diff --git a/pages.json b/pages.json
index 30f2813..e3978f7 100644
--- a/pages.json
+++ b/pages.json
@@ -8,6 +8,15 @@
     },
     "pages": [
         //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+        {
+            "path": "pages/order/list",
+            "style": {
+                "navigationBarTitleText": "订单"
+            },
+            "meta": {
+                "auth": true
+            }
+        },
         {
             "path": "pages/index/my",
             "style": {
@@ -63,7 +72,7 @@
                 "pagePath": "pages/index/product"
             },
             {
-                "pagePath": "pages/index/icons"
+                "pagePath": "pages/order/list"
             },
             {
                 "pagePath": "pages/index/my"
diff --git a/pages/order/detail.vue b/pages/order/detail.vue
new file mode 100644
index 0000000..0afeca7
--- /dev/null
+++ b/pages/order/detail.vue
@@ -0,0 +1,616 @@
+<!-- 订单详情 -->
+<template>
+    <s-layout title="订单详情" class="index-wrap" navbar="inner">
+        <!-- 订单状态 -->
+        <view
+            class="state-box ss-flex-col ss-col-center ss-row-right"
+            :style="[
+                {
+                    marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
+                    paddingTop: Number(statusBarHeight + 88) + 'rpx',
+                },
+            ]"
+        >
+            <view class="ss-flex ss-m-t-32 ss-m-b-20">
+                <image
+                    v-if="
+                        state.orderInfo.status_code == 'unpaid' ||
+                        state.orderInfo.status === 10 || // 待发货
+                        state.orderInfo.status_code == 'nocomment'
+                    "
+                    class="state-img"
+                    :src="sheep.$url.static('/static/img/shop/order/order_loading.png')"
+                >
+                </image>
+                <image
+                    v-if="state.orderInfo.status_code == 'completed' || state.orderInfo.status_code == 'refund_agree'"
+                    class="state-img"
+                    :src="sheep.$url.static('/static/img/shop/order/order_success.png')"
+                >
+                </image>
+                <image
+                    v-if="state.orderInfo.status_code == 'cancel' || state.orderInfo.status_code == 'closed'"
+                    class="state-img"
+                    :src="sheep.$url.static('/static/img/shop/order/order_close.png')"
+                >
+                </image>
+                <image
+                    v-if="state.orderInfo.status_code == 'noget'"
+                    class="state-img"
+                    :src="sheep.$url.static('/static/img/shop/order/order_express.png')"
+                >
+                </image>
+                <view class="ss-font-30">{{ formatOrderStatus(state.orderInfo) }}</view>
+            </view>
+            <view class="ss-font-26 ss-m-x-20 ss-m-b-70">{{ formatOrderStatusDescription(state.orderInfo) }}</view>
+        </view>
+
+        <!-- 收货地址 -->
+        <view class="order-address-box" v-if="state.orderInfo.receiverAreaId > 0">
+            <view class="ss-flex ss-col-center">
+                <text class="address-username">
+                    {{ state.orderInfo.receiverName }}
+                </text>
+                <text class="address-phone">{{ state.orderInfo.receiverMobile }}</text>
+            </view>
+            <view class="address-detail">
+                {{ state.orderInfo.receiverAreaName }} {{ state.orderInfo.receiverDetailAddress }}
+            </view>
+        </view>
+
+        <view class="detail-goods" :style="[{ marginTop: state.orderInfo.receiverAreaId > 0 ? '0' : '-40rpx' }]">
+            <!-- 订单信 -->
+            <view class="order-list" v-for="item in state.orderInfo.items" :key="item.goods_id">
+                <view class="order-card">
+                    <s-goods-item
+                        @tap="onGoodsDetail(item.spuId)"
+                        :img="item.picUrl"
+                        :title="item.spuName"
+                        :skuText="item.properties.map((property) => property.valueName).join(' ')"
+                        :price="item.price"
+                        :num="item.count"
+                    >
+                        <template #tool>
+                            <view class="ss-flex">
+                                <button
+                                    class="ss-reset-button apply-btn"
+                                    v-if="[10, 20, 30].includes(state.orderInfo.status) && item.afterSaleStatus === 0"
+                                    @tap.stop="
+                                        sheep.$router.go('/pages/order/aftersale/apply', {
+                                            orderId: state.orderInfo.id,
+                                            itemId: item.id,
+                                        })
+                                    "
+                                >
+                                    申请售后
+                                </button>
+                                <button
+                                    class="ss-reset-button apply-btn"
+                                    v-if="item.afterSaleStatus === 10"
+                                    @tap.stop="
+                                        sheep.$router.go('/pages/order/aftersale/detail', {
+                                            id: item.afterSaleId,
+                                        })
+                                    "
+                                >
+                                    退款中
+                                </button>
+                                <button
+                                    class="ss-reset-button apply-btn"
+                                    v-if="item.afterSaleStatus === 20"
+                                    @tap.stop="
+                                        sheep.$router.go('/pages/order/aftersale/detail', {
+                                            id: item.afterSaleId,
+                                        })
+                                    "
+                                >
+                                    退款成功
+                                </button>
+                            </view>
+                        </template>
+                        <template #priceSuffix>
+                            <button class="ss-reset-button tag-btn" v-if="item.status_text">
+                                {{ item.status_text }}
+                            </button>
+                        </template>
+                    </s-goods-item>
+                </view>
+            </view>
+        </view>
+
+        <!-- 订单信息 -->
+        <view class="notice-box">
+            <view class="notice-box__content">
+                <view class="notice-item--center">
+                    <view class="ss-flex ss-flex-1">
+                        <text class="title">订单编号：</text>
+                        <text class="detail">{{ state.orderInfo.no }}</text>
+                    </view>
+                    <button class="ss-reset-button copy-btn" @tap="onCopy">复制</button>
+                </view>
+                <view class="notice-item">
+                    <text class="title">下单时间：</text>
+                    <text class="detail">
+                        {{ sheep.$helper.timeFormat(state.orderInfo.createTime, 'yyyy-mm-dd hh:MM:ss') }}
+                    </text>
+                </view>
+                <view class="notice-item" v-if="state.orderInfo.payTime">
+                    <text class="title">支付时间：</text>
+                    <text class="detail">
+                        {{ sheep.$helper.timeFormat(state.orderInfo.payTime, 'yyyy-mm-dd hh:MM:ss') }}
+                    </text>
+                </view>
+                <view class="notice-item">
+                    <text class="title">支付方式：</text>
+                    <text class="detail">{{ state.orderInfo.payChannelName || '-' }}</text>
+                </view>
+            </view>
+        </view>
+
+        <!-- 价格信息 -->
+        <view class="order-price-box">
+            <view class="notice-item ss-flex ss-row-between">
+                <text class="title">商品总额</text>
+                <view class="ss-flex">
+                    <text class="detail">￥{{ fen2yuan(state.orderInfo.totalPrice) }}</text>
+                </view>
+            </view>
+            <view class="notice-item ss-flex ss-row-between">
+                <text class="title">运费</text>
+                <text class="detail">￥{{ fen2yuan(state.orderInfo.deliveryPrice) }}</text>
+            </view>
+            <!-- TODO 芋艿：优惠劵抵扣、积分抵扣 -->
+            <view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.couponPrice > 0">
+                <text class="title">优惠劵金额</text>
+                <text class="detail">-¥{{ fen2yuan(state.orderInfo.couponPrice) }}</text>
+            </view>
+            <view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.discountPrice > 0">
+                <text class="title">活动优惠</text>
+                <text class="detail">¥{{ fen2yuan(state.orderInfo.discountPrice) }}</text>
+            </view>
+            <view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.vipPrice > 0">
+                <text class="title">会员优惠</text>
+                <text class="detail">-¥{{ fen2yuan(state.orderInfo.vipPrice) }}</text>
+            </view>
+            <view class="notice-item all-rpice-item ss-flex ss-m-t-20">
+                <text class="title">{{ state.orderInfo.payStatus ? '已付款' : '需付款' }}</text>
+                <text class="detail all-price">￥{{ fen2yuan(state.orderInfo.payPrice) }}</text>
+            </view>
+            <view class="notice-item all-rpice-item ss-flex ss-m-t-20" v-if="state.orderInfo.refundPrice > 0">
+                <text class="title">已退款</text>
+                <text class="detail all-price">￥{{ fen2yuan(state.orderInfo.refundPrice) }}</text>
+            </view>
+        </view>
+
+        <!-- 底部按钮 -->
+        <!-- TODO: 查看物流、等待成团、评价完后返回页面没刷新页面 -->
+        <su-fixed bottom placeholder bg="bg-white" v-if="state.orderInfo.buttons?.length">
+            <view class="footer-box ss-flex ss-col-center ss-row-right">
+                <button
+                    class="ss-reset-button cancel-btn"
+                    v-if="state.orderInfo.buttons?.includes('cancel')"
+                    @tap="onCancel(state.orderInfo.id)"
+                >
+                    取消订单
+                </button>
+                <button
+                    class="ss-reset-button pay-btn ui-BG-Main-Gradient"
+                    v-if="state.orderInfo.buttons?.includes('pay')"
+                    @tap="onPay(state.orderInfo.payOrderId)"
+                >
+                    继续支付
+                </button>
+                <button
+                    class="ss-reset-button cancel-btn"
+                    v-if="state.orderInfo.buttons?.includes('combination')"
+                    @tap="
+                        sheep.$router.go('/pages/activity/groupon/detail', {
+                            id: state.orderInfo.combinationRecordId,
+                        })
+                    "
+                >
+                    拼团详情
+                </button>
+                <button
+                    class="ss-reset-button cancel-btn"
+                    v-if="state.orderInfo.buttons?.includes('express')"
+                    @tap="onExpress(state.orderInfo.id)"
+                >
+                    查看物流
+                </button>
+                <button
+                    class="ss-reset-button cancel-btn"
+                    v-if="state.orderInfo.buttons?.includes('confirm')"
+                    @tap="onConfirm(state.orderInfo.id)"
+                >
+                    确认收货
+                </button>
+                <button
+                    class="ss-reset-button cancel-btn"
+                    v-if="state.orderInfo.buttons?.includes('comment')"
+                    @tap="onComment(state.orderInfo.id)"
+                >
+                    评价
+                </button>
+            </view>
+        </su-fixed>
+    </s-layout>
+</template>
+
+<script setup>
+import sheep from '@/sheep'
+import { onLoad } from '@dcloudio/uni-app'
+import { reactive } from 'vue'
+import { isEmpty } from 'lodash'
+import { fen2yuan, formatOrderStatus, formatOrderStatusDescription, handleOrderButtons } from '@/sheep/hooks/useGoods'
+import OrderApi from '@/sheep/api/trade/order'
+
+const statusBarHeight = sheep.$platform.device.statusBarHeight * 2
+const headerBg = sheep.$url.css('/static/img/shop/order/order_bg.png')
+
+const state = reactive({
+    orderInfo: {},
+    merchantTradeNo: '', // 商户订单号
+    comeinType: '', // 进入订单详情的来源类型
+})
+
+// 复制
+const onCopy = () => {
+    sheep.$helper.copyText(state.orderInfo.sn)
+}
+
+// 去支付
+function onPay(payOrderId) {
+    sheep.$router.go('/pages/pay/index', {
+        id: payOrderId,
+    })
+}
+
+// 查看商品
+function onGoodsDetail(id) {
+    sheep.$router.go('/pages/goods/index', {
+        id,
+    })
+}
+
+// 取消订单
+async function onCancel(orderId) {
+    uni.showModal({
+        title: '提示',
+        content: '确定要取消订单吗?',
+        success: async function (res) {
+            if (!res.confirm) {
+                return
+            }
+            const { code } = await OrderApi.cancelOrder(orderId)
+            if (code === 0) {
+                await getOrderDetail(orderId)
+            }
+        },
+    })
+}
+
+// 查看物流
+async function onExpress(id) {
+    sheep.$router.go('/pages/order/express/log', {
+        id,
+    })
+}
+
+// 确认收货 TODO 芋艿：待测试
+async function onConfirm(orderId, ignore = false) {
+    // 需开启确认收货组件
+    // todo: 芋艿：待接入微信
+    // 1.怎么检测是否开启了发货组件功能？如果没有开启的话就不能在这里return出去
+    // 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果
+    let isOpenBusinessView = true
+    if (
+        sheep.$platform.name === 'WechatMiniProgram' &&
+        !isEmpty(state.orderInfo.wechat_extra_data) &&
+        isOpenBusinessView &&
+        !ignore
+    ) {
+        mpConfirm(orderId)
+        return
+    }
+
+    // 正常的确认收货流程
+    const { code } = await OrderApi.receiveOrder(orderId)
+    if (code === 0) {
+        await getOrderDetail(orderId)
+    }
+}
+
+// #ifdef MP-WEIXIN
+// 小程序确认收货组件
+function mpConfirm(orderId) {
+    if (!wx.openBusinessView) {
+        sheep.$helper.toast(`请升级微信版本`)
+        return
+    }
+    wx.openBusinessView({
+        businessType: 'weappOrderConfirm',
+        extraData: {
+            merchant_trade_no: state.orderInfo.wechat_extra_data.merchant_trade_no,
+            transaction_id: state.orderInfo.wechat_extra_data.transaction_id,
+        },
+        success(response) {
+            console.log('success:', response)
+            if (response.errMsg === 'openBusinessView:ok') {
+                if (response.extraData.status === 'success') {
+                    onConfirm(orderId, true)
+                }
+            }
+        },
+        fail(error) {
+            console.log('error:', error)
+        },
+        complete(result) {
+            console.log('result:', result)
+        },
+    })
+}
+// #endif
+
+// 评价
+function onComment(id) {
+    sheep.$router.go('/pages/goods/comment/add', {
+        id,
+    })
+}
+
+async function getOrderDetail(id) {
+    // 对详情数据进行适配
+    let res
+    if (state.comeinType === 'wechat') {
+        // 微信场景下
+        res = await OrderApi.getOrder(id, {
+            merchant_trade_no: state.merchantTradeNo,
+        })
+    } else {
+        res = await OrderApi.getOrder(id)
+    }
+    if (res.code === 0) {
+        state.orderInfo = res.data
+        handleOrderButtons(state.orderInfo)
+    } else {
+        sheep.$router.back()
+    }
+}
+
+onLoad(async (options) => {
+    let id = 0
+    if (options.id) {
+        id = options.id
+    }
+    // TODO 芋艿：下面两个变量，后续接入
+    state.comeinType = options.comein_type
+    if (state.comeinType === 'wechat') {
+        state.merchantTradeNo = options.merchant_trade_no
+    }
+    await getOrderDetail(id)
+})
+</script>
+
+<style lang="scss" scoped>
+.score-img {
+    width: 36rpx;
+    height: 36rpx;
+    margin: 0 4rpx;
+}
+
+.apply-btn {
+    width: 140rpx;
+    height: 50rpx;
+    border-radius: 25rpx;
+    font-size: 24rpx;
+    border: 2rpx solid #dcdcdc;
+    line-height: normal;
+    margin-left: 16rpx;
+}
+
+.state-box {
+    color: rgba(#fff, 0.9);
+    width: 100%;
+    background: v-bind(headerBg) no-repeat, linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    background-size: 750rpx 100%;
+    box-sizing: border-box;
+
+    .state-img {
+        width: 60rpx;
+        height: 60rpx;
+        margin-right: 20rpx;
+    }
+}
+
+.order-address-box {
+    background-color: #fff;
+    border-radius: 10rpx;
+    margin: -50rpx 20rpx 16rpx 20rpx;
+    padding: 44rpx 34rpx 42rpx 20rpx;
+    font-size: 30rpx;
+    box-sizing: border-box;
+    font-weight: 500;
+    color: rgba(51, 51, 51, 1);
+
+    .address-username {
+        margin-right: 20rpx;
+    }
+
+    .address-detail {
+        font-size: 26rpx;
+        font-weight: 500;
+        color: rgba(153, 153, 153, 1);
+        margin-top: 20rpx;
+    }
+}
+
+.detail-goods {
+    border-radius: 10rpx;
+    margin: 0 20rpx 20rpx 20rpx;
+
+    .order-list {
+        margin-bottom: 20rpx;
+        background-color: #fff;
+
+        .order-card {
+            padding: 20rpx 0;
+
+            .order-sku {
+                font-size: 24rpx;
+
+                font-weight: 400;
+                color: rgba(153, 153, 153, 1);
+                width: 450rpx;
+                margin-bottom: 20rpx;
+
+                .order-num {
+                    margin-right: 10rpx;
+                }
+            }
+
+            .tag-btn {
+                margin-left: 16rpx;
+                font-size: 24rpx;
+                height: 36rpx;
+                color: var(--ui-BG-Main);
+                border: 2rpx solid var(--ui-BG-Main);
+                border-radius: 14rpx;
+                padding: 0 4rpx;
+            }
+        }
+    }
+}
+
+// 订单信息。
+.notice-box {
+    background: #fff;
+    border-radius: 10rpx;
+    margin: 0 20rpx 20rpx 20rpx;
+
+    .notice-box__head {
+        font-size: 30rpx;
+
+        font-weight: 500;
+        color: rgba(51, 51, 51, 1);
+        line-height: 80rpx;
+        border-bottom: 1rpx solid #dfdfdf;
+        padding: 0 25rpx;
+    }
+
+    .notice-box__content {
+        padding: 20rpx;
+
+        .self-pickup-box {
+            width: 100%;
+
+            .self-pickup--img {
+                width: 200rpx;
+                height: 200rpx;
+                margin: 40rpx 0;
+            }
+        }
+    }
+
+    .notice-item,
+    .notice-item--center {
+        display: flex;
+        align-items: center;
+        line-height: normal;
+        margin-bottom: 24rpx;
+
+        .title {
+            font-size: 28rpx;
+            color: #999;
+        }
+
+        .detail {
+            font-size: 28rpx;
+            color: #333;
+            flex: 1;
+        }
+    }
+}
+
+.copy-btn {
+    width: 100rpx;
+    line-height: 50rpx;
+    border-radius: 25rpx;
+    padding: 0;
+    background: rgba(238, 238, 238, 1);
+    font-size: 22rpx;
+    font-weight: 400;
+    color: rgba(51, 51, 51, 1);
+}
+
+// 订单价格信息
+.order-price-box {
+    background-color: #fff;
+    border-radius: 10rpx;
+    padding: 20rpx;
+    margin: 0 20rpx 20rpx 20rpx;
+
+    .notice-item {
+        line-height: 70rpx;
+
+        .title {
+            font-size: 28rpx;
+            color: #999;
+        }
+
+        .detail {
+            font-size: 28rpx;
+            color: #333;
+            font-family: OPPOSANS;
+        }
+    }
+
+    .all-rpice-item {
+        justify-content: flex-end;
+        align-items: center;
+
+        .title {
+            font-size: 26rpx;
+            font-weight: 500;
+            color: #333333;
+            line-height: normal;
+        }
+
+        .all-price {
+            font-size: 26rpx;
+            font-family: OPPOSANS;
+            line-height: normal;
+            color: $red;
+        }
+    }
+}
+
+// 底部
+.footer-box {
+    height: 100rpx;
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 10rpx;
+    padding-right: 20rpx;
+
+    .cancel-btn {
+        width: 160rpx;
+        height: 60rpx;
+        background: #eeeeee;
+        border-radius: 30rpx;
+        margin-right: 20rpx;
+        font-size: 26rpx;
+        font-weight: 400;
+        color: #333333;
+    }
+
+    .pay-btn {
+        width: 160rpx;
+        height: 60rpx;
+        font-size: 26rpx;
+        border-radius: 30rpx;
+        font-weight: 500;
+        color: #fff;
+    }
+}
+</style>
diff --git a/pages/order/list.vue b/pages/order/list.vue
new file mode 100644
index 0000000..f528425
--- /dev/null
+++ b/pages/order/list.vue
@@ -0,0 +1,213 @@
+<template>
+    <pb-layout title="订单" navbar="nomal" tabbar="/pages/order/list" :bgStyle="bgStyle">
+        <pb-sticky bgColor="#fff">
+            <pb-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab" />
+        </pb-sticky>
+        <p-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无订单" />
+        <view v-if="state.pagination.total > 0">
+            <view
+                class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20"
+                v-for="order in state.pagination.list"
+                :key="order.payOrderId"
+            >
+                <view v-for="(sorder, sindex) in order.order" @tap="onOrderDetail(sorder.id)">
+                    <view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
+                        <!-- <view class="order-no">订单号：{{ sorder.no }}</view> -->
+                        <view class="order-no text-lg font-weight-bold">{{ sorder.particularName }}</view>
+                        <view class="order-state ss-font-26" :class="formatOrderColor(sorder)">
+                            {{ formatOrderStatus(sorder) }}
+                        </view>
+                    </view>
+                    <view class="border-bottom" v-for="item in sorder.items" :key="item.id">
+                        <p-goods-item
+                            :img="item.picUrl"
+                            :title="item.spuName"
+                            :skuText="item.properties.map((property) => property.valueName).join(' ')"
+                            :price="item.price"
+                            :num="item.count"
+                        />
+                    </view>
+
+                    <view
+                        class="order-card-footer ss-flex ss-col-center ss-p-x-20"
+                        :class="sorder.buttons.length > 3 ? 'ss-row-between' : 'ss-row-right'"
+                    >
+                        <view class="ss-flex ss-col-center">
+                            <button
+                                v-if="sorder.buttons.includes('combination')"
+                                class="tool-btn ss-reset-button"
+                                @tap.stop="onOrderGroupon(sorder)"
+                            >
+                                拼团详情
+                            </button>
+                            <button
+                                v-if="sorder.buttons.length === 0"
+                                class="tool-btn ss-reset-button"
+                                @tap.stop="onOrderDetail(sorder.id)"
+                            >
+                                查看详情
+                            </button>
+                            <button
+                                v-if="sorder.buttons.includes('confirm')"
+                                class="tool-btn ss-reset-button"
+                                @tap.stop="onConfirm(sorder)"
+                            >
+                                确认收货
+                            </button>
+                            <button
+                                v-if="sorder.buttons.includes('express')"
+                                class="tool-btn ss-reset-button"
+                                @tap.stop="onExpress(sorder.id)"
+                            >
+                                查看物流
+                            </button>
+                            <button
+                                v-if="sorder.buttons.includes('cancel')"
+                                class="tool-btn ss-reset-button"
+                                @tap.stop="onCancel(sorder.id, sindex)"
+                            >
+                                取消订单
+                            </button>
+                            <button
+                                v-if="sorder.buttons.includes('comment')"
+                                class="tool-btn ss-reset-button"
+                                @tap.stop="onComment(sorder.id)"
+                            >
+                                评价
+                            </button>
+                            <button
+                                v-if="sorder.buttons.includes('delete')"
+                                class="delete-btn ss-reset-button"
+                                @tap.stop="onDelete(sorder.id)"
+                            >
+                                删除订单
+                            </button>
+                        </view>
+                    </view>
+                    <view class="pay-box ss-m-t-30 ss-flex ss-gap-40 ss-p-b-40 ss-row-right ss-p-r-20">
+                        <view class="ss-flex ss-col-center">
+                            <view class="discounts-title pay-color"
+                                >共 {{ totalNumsPerOrder(order) }} 件商品,总金额:</view
+                            >
+                            <view class="discounts-money pay-color"> ￥{{ fen2yuan(totalPricePerOrder(order)) }} </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <uni-load-more
+            v-if="state.pagination.total > 0"
+            :status="state.loadStatus"
+            :content-text="{ contentdown: '上拉加载更多' }"
+        />
+    </pb-layout>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
+import { fen2yuan, formatOrderColor, formatOrderStatus, handleOrderButtons } from '@/peach/hooks/useGoods'
+import peach from '@/peach'
+import _, { isEmpty } from 'lodash'
+import { resetPagination } from '@/peach/util'
+
+const bgStyle = {
+    backgroundColor: '#fff',
+    description: '',
+}
+
+const state = ref({
+    currentTab: 0,
+    pagination: {
+        list: [],
+        total: 0,
+        pageNo: 1,
+        pageSize: 6,
+    },
+    loadStatus: '',
+})
+
+const tabMaps = [
+    {
+        name: '全部',
+    },
+    {
+        name: '待付款',
+        value: 0,
+    },
+    {
+        name: '待核销',
+        value: 50,
+    },
+    {
+        name: '待配送',
+        value: 60,
+    },
+]
+
+// 单个订单总商品数
+function totalNumsPerOrder(order) {
+    if (order.order.length) {
+        return order.order.reduce((per, cur) => {
+            return per + cur.productCount
+        }, 0)
+    }
+}
+
+// 单个订单总金额
+function totalPricePerOrder(order) {
+    if (order.order.length) {
+        return order.order.reduce((per, cur) => {
+            return per + cur.payPrice
+        }, 0)
+    }
+}
+
+// 切换选项卡
+function onTabsChange(e) {
+    if (state.value.currentTab === e.index) {
+        return
+    }
+    // 重头加载代码
+    resetPagination(state.value.pagination)
+    state.value.currentTab = e.index
+    getOrderList()
+}
+
+// 订单详情
+function onOrderDetail(id) {
+    peach.$router.go('/pages/order/detail', {
+        id,
+    })
+}
+
+onLoad(async (options) => {
+    if (options.type) {
+        state.value.currentTab = options.type
+    }
+    await getOrderList()
+})
+
+// 加载更多
+function loadMore() {
+    if (state.value.loadStatus === 'noMore') {
+        return
+    }
+    state.value.pagination.pageNo++
+    getOrderList()
+}
+
+// 上拉加载更多
+onReachBottom(() => {
+    loadMore()
+})
+
+// 下拉刷新
+onPullDownRefresh(() => {
+    resetPagination(state.value.pagination)
+    getOrderList()
+    setTimeout(function () {
+        uni.stopPullDownRefresh()
+    }, 800)
+})
+</script>
diff --git a/pages/user/wallet/money.vue b/pages/user/wallet/money.vue
new file mode 100644
index 0000000..5c4e324
--- /dev/null
+++ b/pages/user/wallet/money.vue
@@ -0,0 +1,370 @@
+<!-- 我的钱包 -->
+<template>
+    <pb-layout navbar="inner" class="wallet-wrap" title="钱包" :bgStyle="bgStyle">
+        <!-- 钱包卡片 -->
+        <view class="header-box ss-flex ss-row-center ss-col-center">
+            <view class="card-box ui-BG-Main ui-Shadow-Main">
+                <view class="card-head ss-flex ss-col-center">
+                    <view class="card-title ss-m-r-10">钱包余额（元）</view>
+                    <view
+                        @tap="state.showMoney = !state.showMoney"
+                        class="ss-eye-icon"
+                        :class="state.showMoney ? 'cicon-eye' : 'cicon-eye-off'"
+                    />
+                </view>
+                <view class="ss-flex ss-row-between ss-col-center ss-m-t-64">
+                    <view class="money-num">{{ state.showMoney ? fen2yuan(userWallet.balance) : '*****' }}</view>
+                    <button class="ss-reset-button topup-btn" @tap="peach.$router.go('/pages/pay/recharge')">
+                        充值
+                    </button>
+                </view>
+            </view>
+        </view>
+
+        <su-sticky>
+            <!-- 统计 -->
+            <view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between">
+                <uni-datetime-picker v-model="state.data" type="daterange" @change="onChangeTime" :end="state.today">
+                    <button class="ss-reset-button date-btn">
+                        <text>{{ dateFilterText }}</text>
+                        <text class="cicon-drop-down ss-seldate-icon"></text>
+                    </button>
+                </uni-datetime-picker>
+                <view class="total-box">
+                    <view class="ss-m-b-10">总收入￥{{ fen2yuan(state.summary.totalIncome) }}</view>
+                    <view>总支出￥{{ fen2yuan(state.summary.totalExpense) }}</view>
+                </view>
+            </view>
+            <su-tabs :list="tabMaps" @change="onChange" :scrollable="false" :current="state.currentTab"></su-tabs>
+        </su-sticky>
+        <s-empty v-if="state.pagination.total === 0" text="暂无数据" icon="/static/data-empty.png" />
+
+        <!-- 钱包记录 -->
+        <view v-if="state.pagination.total > 0">
+            <view class="wallet-list ss-flex border-bottom" v-for="item in state.pagination.list" :key="item.id">
+                <view class="list-content">
+                    <view class="title-box ss-flex ss-row-between ss-m-b-20">
+                        <text class="title ss-line-1">
+                            {{ item.title }}
+                        </text>
+                        <view class="money">
+                            <text v-if="item.price >= 0" class="add">+{{ fen2yuan(item.price) }}</text>
+                            <text v-else class="minus">{{ fen2yuan(item.price) }}</text>
+                        </view>
+                    </view>
+                    <text class="time">
+                        {{ peach.$helper.timeFormat(state.createTime, 'yyyy-mm-dd hh:MM:ss') }}
+                    </text>
+                </view>
+            </view>
+        </view>
+        <uni-load-more
+            v-if="state.pagination.total > 0"
+            :status="state.loadStatus"
+            :content-text="{
+                contentdown: '上拉加载更多',
+            }"
+        />
+    </pb-layout>
+</template>
+
+<script setup>
+import { computed, reactive } from 'vue'
+import { onLoad, onReachBottom } from '@dcloudio/uni-app'
+import peach from '@/peach'
+import dayjs from 'dayjs'
+import _ from 'lodash'
+import PayWalletApi from '@/peach/api/pay/wallet'
+import { fen2yuan } from '@/peach/hooks/useGoods'
+import { resetPagination } from '@/peach/util'
+
+const bgStyle = {
+    backgroundImage: '/static/bg-page.png',
+    imageType: 'local',
+    backgroundColor: '#fff',
+    description: '',
+}
+
+const headerBg = peach.$url.css('/static/img/shop/user/wallet_card_bg.png')
+
+// 数据
+const state = reactive({
+    showMoney: false,
+    date: [], // 筛选的时间段
+    currentTab: 0,
+    pagination: {
+        list: [],
+        total: 0,
+        pageNo: 1,
+        pageSize: 8,
+    },
+    summary: {
+        totalIncome: 0,
+        totalExpense: 0,
+    },
+    loadStatus: '',
+    today: '',
+})
+
+const tabMaps = [
+    {
+        name: '全部',
+        value: '',
+    },
+    {
+        name: '收入',
+        value: '1',
+    },
+    {
+        name: '支出',
+        value: '2',
+    },
+]
+
+const userWallet = computed(() => peach.$store('user').userWallet)
+
+// 格式化时间段
+const dateFilterText = computed(() => {
+    if (state.date[0] === state.date[1]) {
+        return state.date[0]
+    } else {
+        return state.date.join('~')
+    }
+})
+
+// 获得钱包记录分页
+async function getLogList() {
+    state.loadStatus = 'loading'
+    const { data, code } = await PayWalletApi.getWalletTransactionPage({
+        pageNo: state.pagination.pageNo,
+        pageSize: state.pagination.pageSize,
+        type: tabMaps[state.currentTab].value,
+        'createTime[0]': state.date[0] + ' 00:00:00',
+        'createTime[1]': state.date[1] + ' 23:59:59',
+    })
+    if (code !== 0) {
+        return
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list)
+    state.pagination.total = data.total
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore'
+}
+
+// 获得钱包统计
+async function getSummary() {
+    const { data, code } = await PayWalletApi.getWalletTransactionSummary({
+        createTime: [state.date[0] + ' 00:00:00', state.date[1] + ' 23:59:59'],
+    })
+    if (code !== 0) {
+        return
+    }
+    state.summary = data
+}
+
+onLoad(() => {
+    state.today = dayjs().format('YYYY-MM-DD')
+    state.date = [state.today, state.today]
+    getLogList()
+    getSummary()
+    // 刷新钱包的缓存
+    peach.$store('user').getWallet()
+})
+
+// 处理 tab 切换
+function onChange(e) {
+    state.currentTab = e.index
+    // 重新加载列表
+    resetPagination(state.pagination)
+    getLogList()
+    getSummary()
+}
+
+// 处理时间筛选
+function onChangeTime(e) {
+    state.date[0] = e[0]
+    state.date[1] = e[e.length - 1]
+    // 重新加载列表
+    resetPagination(state.pagination)
+    getLogList()
+    getSummary()
+}
+
+onReachBottom(() => {
+    if (state.loadStatus === 'noMore') {
+        return
+    }
+    state.pagination.pageNo++
+    getLogList()
+})
+</script>
+
+<style lang="scss" scoped>
+// 钱包
+.header-box {
+    background-color: $white;
+    padding: 30rpx;
+
+    .card-box {
+        width: 100%;
+        min-height: 300rpx;
+        padding: 40rpx;
+        background-size: 100% 100%;
+        border-radius: 30rpx;
+        overflow: hidden;
+        position: relative;
+        z-index: 1;
+        box-sizing: border-box;
+
+        &::after {
+            content: '';
+            display: block;
+            width: 100%;
+            height: 100%;
+            z-index: 2;
+            position: absolute;
+            top: 0;
+            left: 0;
+            background: v-bind(headerBg) no-repeat;
+            pointer-events: none;
+        }
+
+        .card-head {
+            color: $white;
+            font-size: 30rpx;
+        }
+
+        .ss-eye-icon {
+            font-size: 40rpx;
+            color: $white;
+        }
+
+        .money-num {
+            font-size: 70rpx;
+            line-height: 70rpx;
+            font-weight: 500;
+            color: $white;
+            font-family: OPPOSANS;
+        }
+
+        .reduce-num {
+            font-size: 26rpx;
+            font-weight: 400;
+            color: $white;
+        }
+
+        .topup-btn {
+            width: 120rpx;
+            height: 60rpx;
+            line-height: 60rpx;
+            border-radius: 30px;
+            font-size: 26rpx;
+            font-weight: 500;
+            background-color: $white;
+            color: var(--ui-BG-Main);
+        }
+    }
+}
+
+// 筛选
+
+.filter-box {
+    height: 114rpx;
+    background-color: $bg-page;
+
+    .total-box {
+        font-size: 24rpx;
+        font-weight: 500;
+        color: $dark-9;
+    }
+
+    .date-btn {
+        background-color: $white;
+        line-height: 54rpx;
+        border-radius: 27rpx;
+        padding: 0 20rpx;
+        font-size: 24rpx;
+        font-weight: 500;
+        color: $dark-6;
+
+        .ss-seldate-icon {
+            font-size: 50rpx;
+            color: $dark-9;
+        }
+    }
+}
+
+.tabs-box {
+    background: $white;
+    border-bottom: 2rpx solid #eeeeee;
+}
+
+// tab
+.wallet-tab-card {
+    .tab-item {
+        height: 80rpx;
+        position: relative;
+
+        .tab-title {
+            font-size: 30rpx;
+        }
+
+        .cur-tab-title {
+            font-weight: $font-weight-bold;
+        }
+
+        .tab-line {
+            width: 60rpx;
+            height: 6rpx;
+            border-radius: 6rpx;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: 2rpx;
+            background-color: var(--ui-BG-Main);
+        }
+    }
+}
+
+// 钱包记录
+.wallet-list {
+    padding: 30rpx;
+    background-color: #ffff;
+
+    .head-img {
+        width: 70rpx;
+        height: 70rpx;
+        border-radius: 50%;
+        background: $gray-c;
+    }
+
+    .list-content {
+        justify-content: space-between;
+        align-items: flex-start;
+        flex: 1;
+
+        .title {
+            font-size: 28rpx;
+            color: $dark-3;
+            width: 400rpx;
+        }
+
+        .time {
+            color: $gray-c;
+            font-size: 22rpx;
+        }
+    }
+
+    .money {
+        font-size: 28rpx;
+        font-weight: bold;
+        font-family: OPPOSANS;
+        .add {
+            color: var(--ui-BG-Main);
+        }
+
+        .minus {
+            color: $dark-3;
+        }
+    }
+}
+</style>
diff --git a/peach/components/p-goods-item/p-goods-item.vue b/peach/components/p-goods-item/p-goods-item.vue
new file mode 100644
index 0000000..f4926c9
--- /dev/null
+++ b/peach/components/p-goods-item/p-goods-item.vue
@@ -0,0 +1,181 @@
+<template>
+    <view>
+        <view>
+            <slot name="top"></slot>
+        </view>
+        <view
+            class="ss-order-card-warp ss-flex ss-col-stretch ss-row-between bg-white"
+            :style="[{ borderRadius: radius + 'rpx', marginBottom: marginBottom + 'rpx' }]"
+        >
+            <view class="img-box ss-m-r-24">
+                <image class="order-img" :src="sheep.$url.cdn(img)" mode="aspectFill"></image>
+            </view>
+            <view
+                class="box-right ss-flex-col ss-row-between"
+                :style="[{ width: titleWidth ? titleWidth + 'rpx' : '' }]"
+            >
+                <view class="title-text ss-line-2" v-if="title">{{ title }}</view>
+                <view v-if="skuString" class="spec-text ss-m-t-8 ss-m-b-12">{{ skuString }}</view>
+                <view class="groupon-box">
+                    <slot name="groupon"></slot>
+                </view>
+                <view class="ss-flex">
+                    <view class="ss-flex ss-col-center">
+                        <view
+                            class="price-text ss-flex ss-col-center"
+                            :style="[{ color: priceColor }]"
+                            v-if="price && Number(price) > 0"
+                        >
+                            ￥{{ fen2yuan(price) }}
+                        </view>
+                        <view v-if="num" class="total-text ss-flex ss-col-center">x {{ num }}</view>
+                        <slot name="priceSuffix"></slot>
+                    </view>
+                </view>
+                <view class="tool-box">
+                    <slot name="tool"></slot>
+                </view>
+                <view>
+                    <slot name="rightBottom"></slot>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import peach from '@/peach'
+import { computed } from 'vue'
+import { fen2yuan } from '@/peach/hooks/useGoods'
+/**
+ * 订单卡片
+ *
+ * @property {String} img 											- 图片
+ * @property {String} title 										- 标题
+ * @property {Number} titleWidth = 0								- 标题宽度，默认0，单位rpx
+ * @property {String} skuText 										- 规格
+ * @property {String | Number} price 								- 价格
+ * @property {String} priceColor 									- 价格颜色
+ * @property {Number | String} num									- 数量
+ *
+ */
+const props = defineProps({
+    img: {
+        type: String,
+        default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto',
+    },
+    title: {
+        type: String,
+        default: '',
+    },
+    titleWidth: {
+        type: Number,
+        default: 0,
+    },
+    skuText: {
+        type: [String, Array],
+        default: '',
+    },
+    price: {
+        type: [String, Number],
+        default: '',
+    },
+    priceColor: {
+        type: [String],
+        default: '',
+    },
+    num: {
+        type: [String, Number],
+        default: 0,
+    },
+    score: {
+        type: [String, Number],
+        default: '',
+    },
+    radius: {
+        type: [String],
+        default: '',
+    },
+    marginBottom: {
+        type: [String],
+        default: '',
+    },
+})
+const skuString = computed(() => {
+    if (!props.skuText) {
+        return ''
+    }
+    if (typeof props.skuText === 'object') {
+        return props.skuText.join(',')
+    }
+    return props.skuText
+})
+</script>
+
+<style lang="scss" scoped>
+.score-img {
+    width: 36rpx;
+    height: 36rpx;
+    margin: 0 4rpx;
+}
+.ss-order-card-warp {
+    padding: 20rpx;
+
+    .img-box {
+        width: 164rpx;
+        height: 164rpx;
+        border-radius: 10rpx;
+        overflow: hidden;
+
+        .order-img {
+            width: 164rpx;
+            height: 164rpx;
+        }
+    }
+
+    .box-right {
+        flex: 1;
+        // width: 500rpx;
+        // height: 164rpx;
+        position: relative;
+
+        .tool-box {
+            position: absolute;
+            right: 0rpx;
+            bottom: -10rpx;
+        }
+    }
+
+    .title-text {
+        font-size: 28rpx;
+        font-weight: 500;
+        line-height: 40rpx;
+    }
+
+    .spec-text {
+        font-size: 24rpx;
+        font-weight: 400;
+        color: $dark-9;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+    }
+
+    .price-text {
+        font-size: 24rpx;
+        font-weight: 500;
+        font-family: OPPOSANS;
+    }
+
+    .total-text {
+        font-size: 24rpx;
+        font-weight: 400;
+        line-height: 24rpx;
+        color: $dark-9;
+        margin-left: 8rpx;
+    }
+}
+</style>
diff --git a/peach/store/app.js b/peach/store/app.js
index 1309b11..2b13618 100644
--- a/peach/store/app.js
+++ b/peach/store/app.js
@@ -72,8 +72,8 @@ const useAppStore = defineStore(
                         {
                             activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-002.png',
                             iconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-001.png',
-                            text: '购物车',
-                            url: '/pages/index/icons',
+                            text: '订单',
+                            url: '/pages/order/list',
                         },
                         {
                             activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-002.png',
diff --git a/peach/ui/pb-sticky/pb-sticky.vue b/peach/ui/pb-sticky/pb-sticky.vue
new file mode 100644
index 0000000..d6ff272
--- /dev/null
+++ b/peach/ui/pb-sticky/pb-sticky.vue
@@ -0,0 +1,264 @@
+<template>
+    <view class="u-sticky" :id="elId" :style="[style]">
+        <view :style="[stickyContent]" class="u-sticky__content"><slot /></view>
+    </view>
+</template>
+
+<script>
+import { deepMerge, addStyle, addUnit, sleep, guid, getPx, os, sys } from '@/peach/helper'
+import peach from '@/peach'
+/**
+ * sticky 吸顶
+ * @description 该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
+ * @property {String ｜ Number}	offsetTop		吸顶时与顶部的距离，单位px（默认 0 ）
+ * @property {String ｜ Number}	customNavHeight	自定义导航栏的高度 （h5 默认44  其他默认 0 ）
+ * @property {Boolean}			stickyToTop		是否开启吸顶功能 （默认 false ）
+ * @property {String}			bgColor			组件背景颜色（默认 '#ffffff' ）
+ * @property {String ｜ Number}	zIndex			吸顶时的z-index值
+ * @property {String ｜ Number}	index			自定义标识，用于区分是哪一个组件
+ * @property {Object}			customStyle		组件的样式，对象形式
+ * @event {Function} fixed		组件吸顶时触发
+ * @event {Function} unfixed	组件取消吸顶时触发
+ * @example <u-sticky offsetTop="200"><view>塞下秋来风景异，衡阳雁去无留意</view></u-sticky>
+ */
+export default {
+    name: 'pb-sticky',
+    props: {
+        // 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px
+        offsetTop: {
+            type: [String, Number],
+            default: 0,
+        },
+        // 自定义导航栏的高度
+        customNavHeight: {
+            type: [String, Number],
+            // #ifdef H5
+            // H5端的导航栏属于“自定义”导航栏的范畴，因为它是非原生的，与普通元素一致
+            default: 44,
+            // #endif
+            // #ifndef H5
+            default: peach.$platform.navbar,
+            // #endif
+        },
+        // 是否开启吸顶功能
+        stickyToTop: {
+            type: Boolean,
+            default: false,
+        },
+        // 吸顶区域的背景颜色
+        bgColor: {
+            type: String,
+            default: 'transparent',
+        },
+        // z-index值
+        zIndex: {
+            type: [String, Number],
+            default: '',
+        },
+        // 列表中的索引值
+        index: {
+            type: [String, Number],
+            default: '',
+        },
+        customStyle: {
+            type: [Object, String],
+            default: () => ({}),
+        },
+    },
+    data() {
+        return {
+            cssSticky: false, // 是否使用css的sticky实现
+            stickyTop: 0, // 吸顶的top值，因为可能受自定义导航栏影响，最终的吸顶值非offsetTop值
+            elId: guid(),
+            left: 0, // js模式时，吸顶的内容因为处于postition: fixed模式，为了和原来保持一致的样式，需要记录并重新设置它的left，height，width属性
+            width: 'auto',
+            height: 'auto',
+            fixed: false, // js模式时，是否处于吸顶模式
+        }
+    },
+    computed: {
+        style() {
+            const style = {}
+            if (!this.stickyToTop) {
+                if (this.cssSticky) {
+                    style.position = 'sticky'
+                    style.zIndex = this.uZindex
+                    style.top = addUnit(this.stickyTop)
+                } else {
+                    style.height = this.fixed ? this.height + 'px' : 'auto'
+                }
+            } else {
+                // 无需吸顶时，设置会默认的relative(nvue)和非nvue的static静态模式即可
+                // #ifdef APP-NVUE
+                style.position = 'relative'
+                // #endif
+                // #ifndef APP-NVUE
+                style.position = 'static'
+                // #endif
+            }
+            style.backgroundColor = this.bgColor
+            return deepMerge(addStyle(this.customStyle), style)
+        },
+        // 吸顶内容的样式
+        stickyContent() {
+            const style = {}
+            if (!this.cssSticky) {
+                style.position = this.fixed ? 'fixed' : 'static'
+                style.top = this.stickyTop + 'px'
+                style.left = this.left + 'px'
+                style.width = this.width == 'auto' ? 'auto' : this.width + 'px'
+                style.zIndex = this.uZindex
+            }
+            return style
+        },
+        uZindex() {
+            return this.zIndex ? this.zIndex : 970
+        },
+    },
+    mounted() {
+        this.init()
+    },
+    methods: {
+        init() {
+            this.getStickyTop()
+            // 判断使用的模式
+            this.checkSupportCssSticky()
+            // 如果不支持css sticky，则使用js方案，此方案性能比不上css方案
+            if (!this.cssSticky) {
+                !this.stickyToTop && this.initObserveContent()
+            }
+        },
+        $uGetRect(selector, all) {
+            return new Promise((resolve) => {
+                uni.createSelectorQuery()
+                    .in(this)
+                    [all ? 'selectAll' : 'select'](selector)
+                    .boundingClientRect((rect) => {
+                        if (all && Array.isArray(rect) && rect.length) {
+                            resolve(rect)
+                        }
+                        if (!all && rect) {
+                            resolve(rect)
+                        }
+                    })
+                    .exec()
+            })
+        },
+        initObserveContent() {
+            // 获取吸顶内容的高度，用于在js吸顶模式时，给父元素一个填充高度，防止"塌陷"
+            this.$uGetRect('#' + this.elId).then((res) => {
+                this.height = res.height
+                this.left = res.left
+                this.width = res.width
+                this.$nextTick(() => {
+                    this.observeContent()
+                })
+            })
+        },
+        observeContent() {
+            // 先断掉之前的观察
+            this.disconnectObserver('contentObserver')
+            const contentObserver = uni.createIntersectionObserver({
+                // 检测的区间范围
+                thresholds: [0.95, 0.98, 1],
+            })
+            // 到屏幕顶部的高度时触发
+            contentObserver.relativeToViewport({
+                top: -this.stickyTop,
+            })
+            // 绑定观察的元素
+            contentObserver.observe(`#${this.elId}`, (res) => {
+                this.setFixed(res.boundingClientRect.top)
+            })
+            this.contentObserver = contentObserver
+        },
+        setFixed(top) {
+            // 判断是否出于吸顶条件范围
+            const fixed = top <= this.stickyTop
+            this.fixed = fixed
+        },
+        disconnectObserver(observerName) {
+            // 断掉观察，释放资源
+            const observer = this[observerName]
+            observer && observer.disconnect()
+        },
+        getStickyTop() {
+            this.stickyTop = getPx(this.offsetTop) + getPx(this.customNavHeight)
+        },
+        async checkSupportCssSticky() {
+            // #ifdef H5
+            // H5，一般都是现代浏览器，是支持css sticky的，这里使用创建元素嗅探的形式判断
+            if (this.checkCssStickyForH5()) {
+                this.cssSticky = true
+            }
+            // #endif
+
+            // 如果安卓版本高于8.0，依然认为是支持css sticky的(因为安卓7在某些机型，可能不支持sticky)
+            if (os() === 'android' && Number(sys().system) > 8) {
+                this.cssSticky = true
+            }
+
+            // APP-Vue和微信平台，通过computedStyle判断是否支持css sticky
+            // #ifdef APP-VUE || MP-WEIXIN
+            this.cssSticky = await this.checkComputedStyle()
+            // #endif
+
+            // ios上，从ios6开始，都是支持css sticky的
+            if (os() === 'ios') {
+                this.cssSticky = true
+            }
+
+            // nvue，是支持css sticky的
+            // #ifdef APP-NVUE
+            this.cssSticky = true
+            // #endif
+        },
+        // 在APP和微信小程序上，通过uni.createSelectorQuery可以判断是否支持css sticky
+        checkComputedStyle() {
+            // 方法内进行判断，避免在其他平台生成无用代码
+            // #ifdef APP-VUE || MP-WEIXIN
+            return new Promise((resolve) => {
+                uni.createSelectorQuery()
+                    .in(this)
+                    .select('.u-sticky')
+                    .fields({
+                        computedStyle: ['position'],
+                    })
+                    .exec((e) => {
+                        resolve('sticky' === e[0].position)
+                    })
+            })
+            // #endif
+        },
+        // H5通过创建元素的形式嗅探是否支持css sticky
+        // 判断浏览器是否支持sticky属性
+        checkCssStickyForH5() {
+            // 方法内进行判断，避免在其他平台生成无用代码
+            // #ifdef H5
+            const vendorList = ['', '-webkit-', '-ms-', '-moz-', '-o-'],
+                vendorListLength = vendorList.length,
+                stickyElement = document.createElement('div')
+            for (let i = 0; i < vendorListLength; i++) {
+                stickyElement.style.position = vendorList[i] + 'sticky'
+                if (stickyElement.style.position !== '') {
+                    return true
+                }
+            }
+            return false
+            // #endif
+        },
+    },
+    beforeDestroy() {
+        this.disconnectObserver('contentObserver')
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.u-sticky {
+    /* #ifdef APP-VUE || MP-WEIXIN */
+    // 此处默认写sticky属性，是为了给微信和APP通过uni.createSelectorQuery查询是否支持css sticky使用
+    position: sticky;
+    /* #endif */
+}
+</style>
diff --git a/peach/ui/pb-tabs/pb-tabs.vue b/peach/ui/pb-tabs/pb-tabs.vue
new file mode 100644
index 0000000..a222b40
--- /dev/null
+++ b/peach/ui/pb-tabs/pb-tabs.vue
@@ -0,0 +1,432 @@
+<template>
+    <view class="u-tabs">
+        <view class="u-tabs__wrapper">
+            <slot name="left" />
+            <view class="u-tabs__wrapper__scroll-view-wrapper">
+                <scroll-view
+                    :scroll-x="scrollable"
+                    :scroll-left="scrollLeft"
+                    scroll-with-animation
+                    enable-flex
+                    class="u-tabs__wrapper__scroll-view white-space"
+                    :show-scrollbar="false"
+                    ref="u-tabs__wrapper__scroll-view"
+                >
+                    <view class="u-tabs__wrapper__nav" ref="u-tabs__wrapper__nav">
+                        <view
+                            class="u-tabs__wrapper__nav__item"
+                            v-for="(item, index) in list"
+                            :key="index"
+                            @tap="clickHandler(item, index)"
+                            :ref="`u-tabs__wrapper__nav__item-${index}`"
+                            :style="[addStyle(itemStyle), { flex: scrollable ? '' : 1 }]"
+                            :class="[
+                                `u-tabs__wrapper__nav__item-${index}`,
+                                item.disabled && 'u-tabs__wrapper__nav__item--disabled',
+                            ]"
+                        >
+                            <text
+                                :class="[item.disabled && 'u-tabs__wrapper__nav__item__text--disabled']"
+                                class="u-tabs__wrapper__nav__item__text"
+                                :style="[textStyle(index)]"
+                                >{{ item[keyName] }}</text
+                            >
+                        </view>
+                        <!-- #ifdef APP-NVUE -->
+                        <view
+                            class="u-tabs__wrapper__nav__line"
+                            ref="u-tabs__wrapper__nav__line"
+                            :style="[
+                                {
+                                    width: addUnit(lineWidth),
+                                    height: addUnit(lineHeight),
+                                    background: lineColor ? lineColor : 'var(--ui-BG-Main)',
+                                    backgroundSize: lineBgSize,
+                                },
+                            ]"
+                        ></view>
+                        <!-- #endif -->
+                        <!-- #ifndef APP-NVUE -->
+                        <view
+                            class="u-tabs__wrapper__nav__line"
+                            ref="u-tabs__wrapper__nav__line"
+                            :style="[
+                                {
+                                    width: addUnit(lineWidth),
+                                    transform: `translate(${lineOffsetLeft}px)`,
+                                    transitionDuration: `${firstTime ? 0 : duration}ms`,
+                                    height: addUnit(lineHeight),
+                                    background: lineColor ? lineColor : 'var(--ui-BG-Main)',
+                                    backgroundSize: lineBgSize,
+                                },
+                            ]"
+                        >
+                        </view>
+                        <!-- #endif -->
+                    </view>
+                </scroll-view>
+            </view>
+            <slot name="right" />
+        </view>
+    </view>
+</template>
+
+<script>
+import { deepMerge, addStyle, addUnit, sleep, getPx, sys } from '@/peach/helper'
+// #ifdef APP-NVUE
+const animation = uni.requireNativePlugin('animation')
+const dom = uni.requireNativePlugin('dom')
+// #endif
+
+/**
+ * Tabs 标签
+ * @description tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
+ * @tutorial https://www.uviewui.com/components/tabs.html
+ * @property {String | Number}	duration			滑块移动一次所需的时间，单位秒（默认 200 ）
+ * @property {String | Number}	swierWidth			swiper的宽度（默认 '750rpx' ）
+ * @property {String}	keyName	 从`list`元素对象中读取的键名（默认 'name' ）
+ * @event {Function(index)} change 标签改变时触发 index: 点击了第几个tab，索引从0开始
+ * @event {Function(index)} click 点击标签时触发 index: 点击了第几个tab，索引从0开始
+ * @example <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
+ */
+export default {
+    name: 'pb-tabs',
+    data() {
+        return {
+            addStyle,
+            addUnit,
+            firstTime: true,
+            scrollLeft: 0,
+            scrollViewWidth: 0,
+            lineOffsetLeft: 0,
+            tabsRect: {
+                left: 0,
+            },
+            innerCurrent: 0,
+            moving: false,
+        }
+    },
+    props: {
+        // 滑块的移动过渡时间，单位ms
+        duration: {
+            type: Number,
+            default: 300,
+        },
+        // tabs标签数组
+        list: {
+            type: Array,
+            default: [],
+        },
+        // 滑块颜色
+        lineColor: {
+            type: String,
+            default: '',
+        },
+        // 菜单选择中时的样式
+        activeStyle: {
+            type: [String, Object],
+            default() {
+                return {
+                    color: '#303133',
+                }
+            },
+        },
+        // 菜单非选中时的样式
+        inactiveStyle: {
+            type: [String, Object],
+            default() {
+                return {
+                    color: '#606266',
+                }
+            },
+        },
+        // 滑块长度
+        lineWidth: {
+            type: [String, Number],
+            default: 20,
+        },
+        // 滑块高度
+        lineHeight: {
+            type: [String, Number],
+            default: 3,
+        },
+        // 滑块背景显示大小，当滑块背景设置为图片时使用
+        lineBgSize: {
+            type: String,
+            default: 'cover',
+        },
+        // 菜单item的样式
+        itemStyle: {
+            type: [String, Object],
+            default() {
+                return {
+                    height: '44px',
+                }
+            },
+        },
+        // 菜单是否可滚动
+        scrollable: {
+            type: Boolean,
+            default: true,
+        },
+        // 当前选中标签的索引
+        current: {
+            type: [Number, String],
+            default: 0,
+        },
+        // 默认读取的键名
+        keyName: {
+            type: String,
+            default: 'name',
+        },
+    },
+    watch: {
+        current: {
+            immediate: true,
+            handler(newValue, oldValue) {
+                // 内外部值不相等时，才尝试移动滑块
+                if (newValue !== this.innerCurrent) {
+                    this.innerCurrent = newValue
+                    this.$nextTick(() => {
+                        this.resize()
+                    })
+                }
+            },
+        },
+        // list变化时，重新渲染list各项信息
+        list() {
+            this.$nextTick(() => {
+                this.resize()
+            })
+        },
+    },
+    computed: {
+        textStyle() {
+            return (index) => {
+                const style = {}
+                // 取当期是否激活的样式
+                const customeStyle =
+                    index === this.innerCurrent ? addStyle(this.activeStyle) : addStyle(this.inactiveStyle)
+                // 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式
+                if (this.list[index].disabled) {
+                    style.color = '#c8c9cc'
+                }
+                return deepMerge(customeStyle, style)
+            }
+        },
+    },
+    async mounted() {
+        this.init()
+    },
+    methods: {
+        $uGetRect(selector, all) {
+            return new Promise((resolve) => {
+                uni.createSelectorQuery()
+                    .in(this)
+                    [all ? 'selectAll' : 'select'](selector)
+                    .boundingClientRect((rect) => {
+                        if (all && Array.isArray(rect) && rect.length) {
+                            resolve(rect)
+                        }
+                        if (!all && rect) {
+                            resolve(rect)
+                        }
+                    })
+                    .exec()
+            })
+        },
+        setLineLeft() {
+            const tabItem = this.list[this.innerCurrent]
+            if (!tabItem) {
+                return
+            }
+            // 获取滑块该移动的位置
+            let lineOffsetLeft = this.list
+                .slice(0, this.innerCurrent)
+                .reduce((total, curr) => total + curr.rect.width, 0)
+            // 获取下划线的数值px表示法
+            const lineWidth = getPx(this.lineWidth)
+            this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2
+            // #ifdef APP-NVUE
+            // 第一次移动滑块，无需过渡时间
+            this.animation(this.lineOffsetLeft, this.firstTime ? 0 : parseInt(this.duration))
+            // #endif
+
+            // 如果是第一次执行此方法，让滑块在初始化时，瞬间滑动到第一个tab item的中间
+            // 这里需要一个定时器，因为在非nvue下，是直接通过style绑定过渡时间，需要等其过渡完成后，再设置为false(非第一次移动滑块)
+            if (this.firstTime) {
+                setTimeout(() => {
+                    this.firstTime = false
+                }, 10)
+            }
+        },
+        // nvue下设置滑块的位置
+        animation(x, duration = 0) {
+            // #ifdef APP-NVUE
+            const ref = this.$refs['u-tabs__wrapper__nav__line']
+            animation.transition(ref, {
+                styles: {
+                    transform: `translateX(${x}px)`,
+                },
+                duration,
+            })
+            // #endif
+        },
+        // 点击某一个标签
+        clickHandler(item, index) {
+            // 因为标签可能为disabled状态，所以click是一定会发出的，但是change事件是需要可用的状态才发出
+            this.$emit('click', {
+                ...item,
+                index,
+            })
+            // 如果disabled状态，返回
+            if (item.disabled) return
+            this.innerCurrent = index
+            this.resize()
+            this.$emit('change', {
+                ...item,
+                index,
+            })
+        },
+        init() {
+            sleep().then(() => {
+                this.resize()
+            })
+        },
+        setScrollLeft() {
+            // 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
+            const tabRect = this.list[this.innerCurrent]
+            // 累加得到当前item到左边的距离
+            const offsetLeft = this.list.slice(0, this.innerCurrent).reduce((total, curr) => {
+                return total + curr.rect.width
+            }, 0)
+            // 此处为屏幕宽度
+            const windowWidth = sys().windowWidth
+            // 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
+            let scrollLeft =
+                offsetLeft -
+                (this.tabsRect.width - tabRect.rect.width) / 2 -
+                (windowWidth - this.tabsRect.right) / 2 +
+                this.tabsRect.left / 2
+            // 这里做一个限制，限制scrollLeft的最大值为整个scroll-view宽度减去tabs组件的宽度
+            scrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width)
+            this.scrollLeft = Math.max(0, scrollLeft)
+        },
+        // 获取所有标签的尺寸
+        resize() {
+            // 如果不存在list，则不处理
+            if (this.list.length === 0) {
+                return
+            }
+            Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
+                this.tabsRect = tabsRect
+                this.scrollViewWidth = 0
+                itemRect.map((item, index) => {
+                    // 计算scroll-view的宽度，这里
+                    this.scrollViewWidth += item.width
+                    // 另外计算每一个item的中心点X轴坐标
+                    this.list[index].rect = item
+                })
+                // 获取了tabs的尺寸之后，设置滑块的位置
+                this.setLineLeft()
+                this.setScrollLeft()
+            })
+        },
+        // 获取导航菜单的尺寸
+        getTabsRect() {
+            return new Promise((resolve) => {
+                this.queryRect('u-tabs__wrapper__scroll-view').then((size) => resolve(size))
+            })
+        },
+        // 获取所有标签的尺寸
+        getAllItemRect() {
+            return new Promise((resolve) => {
+                const promiseAllArr = this.list.map((item, index) =>
+                    this.queryRect(`u-tabs__wrapper__nav__item-${index}`, true)
+                )
+                Promise.all(promiseAllArr).then((sizes) => resolve(sizes))
+            })
+        },
+        // 获取各个标签的尺寸
+        queryRect(el, item) {
+            // #ifndef APP-NVUE
+            // $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://www.uviewui.com/js/getRect.html
+            // 组件内部一般用this.$uGetRect，对外的为uni.$u.getRect，二者功能一致，名称不同
+            return new Promise((resolve) => {
+                this.$uGetRect(`.${el}`).then((size) => {
+                    resolve(size)
+                })
+            })
+            // #endif
+
+            // #ifdef APP-NVUE
+            // nvue下，使用dom模块查询元素高度
+            // 返回一个promise，让调用此方法的主体能使用then回调
+            return new Promise((resolve) => {
+                dom.getComponentRect(item ? this.$refs[el][0] : this.$refs[el], (res) => {
+                    resolve(res.size)
+                })
+            })
+            // #endif
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.u-tabs {
+    background: #fff;
+    border-bottom: 2rpx solid #eee;
+
+    &__wrapper {
+        @include flex;
+        align-items: center;
+
+        &__scroll-view-wrapper {
+            flex: 1;
+            /* #ifndef APP-NVUE */
+            overflow: auto hidden;
+            /* #endif */
+        }
+
+        &__nav {
+            @include flex;
+            position: relative;
+
+            &__item {
+                padding: 0 11px;
+                @include flex;
+                align-items: center;
+                justify-content: center;
+
+                &--disabled {
+                    /* #ifndef APP-NVUE */
+                    cursor: not-allowed;
+                    /* #endif */
+                }
+
+                &__text {
+                    font-size: 14px;
+                    color: #606266;
+                    white-space: nowrap !important;
+
+                    &--disabled {
+                        color: #c8c9cc !important;
+                    }
+                }
+            }
+
+            &__line {
+                height: 3px;
+                background: #3c9cff;
+                width: 30px;
+                position: absolute;
+                bottom: 2px;
+                border-radius: 100px;
+                transition-property: transform;
+                transition-duration: 300ms;
+            }
+        }
+    }
+}
+</style>
diff --git a/static/order-empty.png b/static/order-empty.png
new file mode 100644
index 0000000..a7b46fe
Binary files /dev/null and b/static/order-empty.png differ