diff --git a/pages/shopping/index.vue b/pages/shopping/index.vue
index 79806b2..7163507 100644
--- a/pages/shopping/index.vue
+++ b/pages/shopping/index.vue
@@ -50,8 +50,8 @@ const menuList = ref([
 		bgColor: ["#FFF0DA", "#FFFFFF"],
 		btnBg: "#FF953C",
 		shadowColor: "#FF953C",
-		// url: "/pages/shopping/taobao/list-index"
-		url: ""
+		url: "/pages/shopping/taobao/list-index"
+		// url: ""
 	}, {
 		name: "快手",
 		icon: "kuaishou",
diff --git a/pages/shopping/taobao/components/list-card/list-card.vue b/pages/shopping/taobao/components/list-card/list-card.vue
new file mode 100644
index 0000000..b60f60e
--- /dev/null
+++ b/pages/shopping/taobao/components/list-card/list-card.vue
@@ -0,0 +1,582 @@
+<template>
+    <view class="card-wrapper">
+        <view class="card-container" v-for="(item, index) in list" :key="index">
+            <!-- 顶部店铺和状态 -->
+            <view class="card-header">
+                <view class="shop-info">
+                    <image class="taobao-logo" :src="`/static/image/shopping/taobao/${item.shopType}.png`"
+                        mode="heightFix">
+                    </image>
+                    <text class="shop-name">{{ item.shopName || '淘宝店铺' }}</text>
+                    <uni-icons style="margin-left: 4rpx;" type="right" size="10" color="#8C8C8C"></uni-icons>
+                    <!-- <text class="iconfont icon-arrow-right arrow-icon">></text> -->
+                </view>
+                <view class="order-status" :class="item.statusType">
+                    {{ item.statusText || getStatusText(item.statusType) }}
+                </view>
+            </view>
+
+            <!-- 商品列表 -->
+            <view class="goods-list" @tap="goToDetail(item)">
+                <view class="goods-item" v-for="(goods, gIdx) in item.goodsList" :key="gIdx">
+                    <image class="goods-img" :class="{ refunding: item.statusType === 'refunding' }"
+                        :src="goods.image || '/static/default-goods.png'" mode="aspectFill"
+                        :style="{ width: imgHeights[index + '-' + gIdx] ? imgHeights[index + '-' + gIdx] + 'px' : '', height: imgHeights[index + '-' + gIdx] ? imgHeights[index + '-' + gIdx] + 'px' : '' }">
+                    </image>
+                    <view class="goods-info" :id="'goods-info-' + index + '-' + gIdx">
+                        <view class="goods-title-row">
+                            <view class="good-info-box">
+                                <text class="goods-title">{{ goods.title }}</text>
+                                <view class="goods-spec" v-if="goods.specs">{{ goods.specs }}</view>
+                            </view>
+
+                            <view class="goods-price-box">
+                                <text class="price-symbol wx-font-medium">￥</text>
+                                <text class="price-val wx-font-medium">{{ goods.price }}</text>
+                                <text class="goods-count">x{{ goods.count || 1 }}</text>
+                            </view>
+                        </view>
+
+                        <view class="goods-tags"
+                            v-if="goods.tags && goods.tags.length && item.statusType !== 'refunding'">
+                            <text class="tag" v-for="(tag, tIdx) in goods.tags" :key="tIdx">{{ tag }}</text>
+                        </view>
+                        <!-- 单个商品的售后状态 -->
+                        <view class="goods-evaluation" v-if="item.statusType == 'success'">
+                            <view class="left">
+                                <image style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"
+                                    src='/static/image/shopping/taobao/pingjia.png'>
+                                </image>
+                                <text>评价将帮助70人</text>
+                            </view>
+                            <view class="right">
+                                <image style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"
+                                    src='/static/image/shopping/taobao/chaping.png'>
+                                </image>
+                                <text>差评</text>
+                                <image style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"
+                                    src='/static/image/shopping/taobao/zhongping.png'>
+                                </image>
+                                <text>中评</text>
+                                <image style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"
+                                    src='/static/image/shopping/taobao/haoping.png'>
+                                </image>
+                                <text>好评</text>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 各种提示信息 -->
+            <view v-if="item.statusType == 'wait_pay'" class="tips-box daifukuan">
+                <image class="tip-icon" src="/static/image/shopping/taobao/daifukuan.png"></image>
+                <text class="text">订单即将关闭，建议尽快付款</text>
+            </view>
+            <view v-else-if="item.statusType == 'wait_send'" class="tips-box daifahuo">
+                <image class="tip-icon" src="/static/image/shopping/taobao/daifahuo.png"></image>
+                <text class="title">待发货</text>
+                <text class="text">{{ item.statusDesc }}</text>
+            </view>
+            <view v-else-if="item.statusType == 'wait_recv'" class="tips-box yunshuzhong">
+                <image class="tip-icon"
+                    :src="`/static/image/shopping/taobao/${item.isSignFor ? 'yiqianshou' : 'yunshuzhong'}.png`">
+                </image>
+                <text class="title">{{ item.isSignFor ? '已签收' : '运输中' }}</text>
+                <text class="text">{{ item.statusDesc }}</text>
+            </view>
+
+            <view v-else-if="item.statusType == 'refunding'" class="tips-box yunshuzhong">
+                <text class="title">退款成功</text>
+                <text class="text">{{ item.statusDesc }}</text>
+            </view>
+
+            <!-- 价格合计 -->
+            <view class="order-total">
+                <text class="total-label">共{{ getTotalCount(item.goodsList) }}件商品</text>
+                <text class="total-label">实付款</text>
+                <text class="total-symbol wx-font-medium">￥</text>
+                <text class="total-price wx-font-medium">{{ Number(
+                    item.totalPrice).toFixed(2).split(".")[0] }}</text>
+                <text class="total-price wx-font-medium" style="font-size: 28rpx;">.{{ Number(
+                    item.totalPrice).toFixed(2).split(".")[1] }}</text>
+            </view>
+
+            <!-- 底部按钮 -->
+            <view class="card-footer" v-if="getButtons(item.statusType).buttons.length > 0">
+                <view class="more-text"
+                    v-if="getButtons(item.statusType).moreText.text || '更多' && getButtons(item.statusType).moreText.isShow"
+                    :style="{ color: getButtons(item.statusType).moreText.color }">
+                    {{ getButtons(item.statusType).moreText.text || '更多' }}
+                </view>
+                <view class="btn" :class="{ 'btn-primary': btn.primary }"
+                    v-for="(btn, bIdx) in getButtons(item.statusType).buttons" :key="bIdx"
+                    @tap.stop="handleAction(btn.action, item)">
+                    {{ btn.text }}
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, ref, watch, nextTick, getCurrentInstance } from 'vue';
+
+const props = defineProps({
+    list: {
+        type: Array,
+        default: () => []
+    }
+});
+
+const emit = defineEmits(['action', 'detail']);
+
+
+const instance = getCurrentInstance();
+const imgHeights = ref({});
+
+const calculateHeights = () => {
+    nextTick(() => {
+        setTimeout(() => {
+            if (!instance || !instance.proxy) return;
+            const query = uni.createSelectorQuery().in(instance.proxy);
+            let keys = [];
+
+            if (!props.list || props.list.length === 0) return;
+
+            props.list.forEach((item, index) => {
+                if (!item.goodsList) return;
+                item.goodsList.forEach((goods, gIdx) => {
+                    const key = index + '-' + gIdx;
+                    keys.push(key);
+                    query.select('#goods-info-' + key).boundingClientRect();
+                });
+            });
+
+            if (keys.length > 0) {
+                query.exec((res) => {
+                    if (res && res.length > 0) {
+                        res.forEach((data, i) => {
+                            if (data && data.height) {
+                                imgHeights.value[keys[i]] = data.height;
+                            }
+                        });
+                    }
+                });
+            }
+        }, 100); // 延迟等待视图完全渲染
+    });
+};
+
+watch(() => props.list, () => {
+    calculateHeights();
+}, { deep: true, immediate: true });
+
+// 状态文案映射
+const getStatusText = (status) => {
+    const map = {
+        'wait_pay': '待付款',
+        'wait_send': '待发货',
+        'wait_recv': '卖家已发货',
+        'success': '交易成功',
+        'closed': '交易关闭',
+        'refunding': '退货'
+    };
+    return map[status] || status;
+};
+
+// 状态对应的按钮配置
+const getButtons = (status) => {
+    const map = {
+        'wait_pay': {
+            moreText: {
+                text: "",
+                isShow: true,
+                color: "#1a1a1a"
+            },
+            buttons: [
+                { text: '修改地址', action: 'edit_address' },
+                { text: '找朋友付', action: 'cancel' },
+                { text: '继续付款', action: 'pay', primary: true }
+            ]
+        },
+        'wait_send': {
+            moreText: {
+                text: "",
+                isShow: false,
+                color: "#1a1a1a"
+            },
+            buttons: [
+                { text: '催发货', action: 'remind' },
+                { text: '查看物流', action: 'view_logistics' },
+                { text: '修改地址', action: 'edit_address' }
+            ]
+        },
+        'wait_recv': {
+            moreText: {
+                text: "",
+                isShow: true,
+                color: "#1a1a1a"
+            },
+            buttons: [
+                { text: '加入购物车', action: 'add_cart' },
+                { text: '查看物流', action: 'view_logistics' },
+                { text: '确认收货', action: 'confirm', primary: true }
+            ]
+        },
+        'success': {
+            moreText: {
+                text: "",
+                isShow: true,
+                color: "#1a1a1a"
+            },
+            buttons: [
+                { text: '加入购物车', action: 'add_cart' },
+                { text: '再买一单', action: 'buy_again' },
+                { text: '评价', action: 'comment', primary: true }
+            ]
+        },
+        'closed': {
+            moreText: {
+                text: "",
+                isShow: false,
+                color: "#1a1a1a"
+            },
+            buttons: [
+                { text: '删除订单', action: 'delete' },
+                { text: '加入购物车', action: 'add_cart' },
+                { text: '再买一单', action: 'buy_again', primary: true }
+            ]
+        },
+        'refunding': {
+            moreText: {
+                text: "",
+                isShow: true,
+                color: "#7C8495"
+            },
+            buttons: [
+                { text: '加入购物车', action: 'add_cart' },
+                { text: '钱款去向', action: 'query_money' },
+                { text: '联系商家', action: 'contact_merchant', primary: true }
+            ]
+        }
+    };
+    return map[status] || [];
+};
+
+const getTotalCount = (goodsList) => {
+    if (!goodsList || !goodsList.length) return 0;
+    return goodsList.reduce((sum, item) => sum + (Number(item.count) || 1), 0);
+};
+
+const handleAction = (action, item) => {
+    emit('action', { action, item });
+};
+
+const goToDetail = (item) => {
+    emit('detail', item);
+};
+</script>
+
+<style lang="less" scoped>
+.card-wrapper {
+    width: 100%;
+}
+
+.card-container {
+    margin: 16rpx 0;
+    background-color: #FFFFFF;
+    padding: 24rpx;
+    box-sizing: border-box;
+
+    .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 24rpx;
+
+        .shop-info {
+            display: flex;
+            align-items: center;
+
+            .taobao-logo {
+                height: 28rpx;
+                margin-right: 6rpx;
+            }
+
+            .shop-name {
+                font-size: 28rpx;
+                color: #333333;
+                font-weight: bold;
+            }
+
+            .arrow-icon {
+                font-size: 24rpx;
+                color: #999;
+                margin-left: 8rpx;
+            }
+        }
+
+        .order-status {
+            font-size: 26rpx;
+            color: #FF7824;
+            font-weight: 500;
+        }
+    }
+
+    .goods-list {
+        .goods-item {
+            display: flex;
+            align-items: flex-start;
+            margin-bottom: 18rpx;
+
+            .goods-img {
+                min-width: 178rpx;
+                min-height: 178rpx;
+                border-radius: 12rpx;
+                background-color: #F5F5F5;
+                flex-shrink: 0;
+
+                &.refunding {
+                    min-width: 142rpx;
+                    min-height: 142rpx;
+                }
+            }
+
+            .goods-info {
+                flex: 1;
+                margin-left: 24rpx;
+                display: flex;
+                flex-direction: column;
+
+                .goods-title-row {
+                    display: flex;
+                    justify-content: space-between;
+
+
+                    .good-info-box {
+                        flex: 1;
+                        width: 100px;
+                    }
+
+                    .goods-title {
+                        font-size: 26rpx;
+                        color: #00032A;
+                        line-height: 36rpx;
+                        display: -webkit-box;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 1;
+                        overflow: hidden;
+                        flex: 1;
+                        margin-right: 18rpx;
+                        font-weight: 500;
+                    }
+
+                    .goods-price-box {
+                        text-align: right;
+
+
+                        .price-symbol {
+                            font-size: 30rpx;
+                            color: #1A1A1A;
+                            font-weight: 500;
+                        }
+
+                        .price-val {
+                            font-size: 30rpx;
+                            color: #1A1A1A;
+                            font-weight: 500;
+                        }
+
+                        .goods-count {
+                            display: block;
+                            font-size: 22rpx;
+                            line-height: 22rpx;
+                            color: #999999;
+                            margin-top: 14rpx;
+                        }
+                    }
+                }
+
+                .goods-spec {
+                    font-size: 22rpx;
+                    line-height: 22rpx;
+                    color: #7C8495;
+                    border-radius: 8rpx;
+                    align-self: flex-start;
+                    margin-top: 22rpx;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                    width: 100%;
+                }
+
+                .goods-tags {
+                    display: flex;
+                    flex-wrap: wrap;
+                    margin-top: 16rpx;
+
+                    .tag {
+                        font-size: 24rpx;
+                        line-height: 24rpx;
+                        color: #35A156;
+                    }
+                }
+
+                .goods-refund-status {
+                    font-size: 24rpx;
+                    color: #FF5000;
+                    margin-top: 12rpx;
+                }
+
+                .goods-evaluation {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    background-color: #F4F5F7;
+                    border-radius: 8rpx 8rpx 8rpx 8rpx;
+                    height: 46rpx;
+                    padding: 0 12rpx;
+                    margin-top: 20rpx;
+
+                    .left {
+                        display: flex;
+                        align-items: center;
+
+                        text {
+                            width: 176rpx;
+                            white-space: nowrap;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                        }
+                    }
+
+                    .right {
+                        display: flex;
+                        align-items: center;
+
+                        text {
+                            color: #CACFD4;
+                            font-size: 20rpx;
+                            margin-right: 8rpx;
+                        }
+                    }
+
+                    text {
+                        font-size: 24rpx;
+                        color: #1A1A1A;
+                        font-weight: 500;
+                        line-height: 24rpx;
+                    }
+                }
+            }
+        }
+    }
+
+    .tips-box {
+        background-color: #F4F5F7;
+        border-radius: 12rpx;
+        padding: 20rpx 24rpx;
+        margin-top: 16rpx;
+        height: 68rpx;
+        display: flex;
+        align-items: center;
+
+        .title {
+            color: #1A1A1A;
+            margin-left: 8rpx;
+            margin-right: 20rpx;
+            font-weight: 500;
+        }
+
+        .tip-icon {
+            width: 30rpx;
+            height: 30rpx;
+            margin-right: 12rpx;
+        }
+
+        .text {
+            font-size: 26rpx;
+            color: #7C8495;
+        }
+
+        &.daifukuan {
+            .tip-icon {
+                width: 30rpx;
+                height: 30rpx;
+                margin-right: 12rpx;
+            }
+
+            .text {
+                font-size: 26rpx;
+                color: #F37120;
+                font-weight: 500;
+            }
+        }
+
+        &.daifahuo {}
+    }
+
+    .order-total {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        margin-top: 10rpx;
+        margin-bottom: 24rpx;
+
+        .total-label {
+            font-size: 24rpx;
+            color: #1A1A1A;
+            margin-right: 8rpx;
+        }
+
+        .total-symbol {
+            font-size: 28rpx;
+            color: #1A1A1A;
+            font-weight: 500;
+        }
+
+        .total-price {
+            font-size: 32rpx;
+            color: #1A1A1A;
+            font-weight: 500;
+        }
+    }
+
+    .card-footer {
+        position: relative;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+
+        .more-text {
+            position: absolute;
+            left: 0;
+            top: 50%;
+            font-size: 26rpx;
+            line-height: 26rpx;
+            color: #1A1A1A;
+            transform: translateY(-50%);
+        }
+
+        .btn {
+            padding: 0 24rpx;
+            height: 64rpx;
+            line-height: 64rpx;
+            font-size: 26rpx;
+            color: #1A1A1A;
+            margin-left: 16rpx;
+            background-color: #F4F5F7;
+            border-radius: 12rpx;
+
+            &.btn-primary {
+                color: #F37120;
+                background-color: #FFECE5;
+            }
+        }
+    }
+}
+</style>
+<style>
+@import '@/common/main.css';
+</style>
\ No newline at end of file
diff --git a/pages/shopping/taobao/json/order.json b/pages/shopping/taobao/json/order.json
new file mode 100644
index 0000000..ab8246c
--- /dev/null
+++ b/pages/shopping/taobao/json/order.json
@@ -0,0 +1,63 @@
+{
+    //购物类型
+    "shoppingType": [
+        {
+            "label": "待付款",
+            "key": "daifukuan"
+        },
+        {
+            "label": "待发货",
+            "key": "daifahuo"
+        },
+        {
+            "label": "待收货",
+            "key": "daishouhuo"
+        },
+        {
+            "label": "退款/售后",
+            "key": "tuikuanshouhou"
+        },
+        {
+            "label": "评价",
+            "key": "pingjia"
+        },
+        {
+            "label": "已取消",
+            "key": "yiquxiao"
+        }
+    ],
+    //购物类型字段分类
+    "shoppingClassfiy": {
+        "daifukuan": {
+            "status": "待付款",
+            "statusDesc": "卖家未发货",
+            "shopName": "细条条",
+            "shopType": "taobao", //淘宝-taobao，天猫-tianmao，百补-baiyibutie
+            "totalPrice": "",
+            "carriage": "0.00",
+            "products": [
+                {
+                    "image": "",
+                    "title": "",
+                    "desc": "",
+                    "service": "",
+                    "price": "",
+                    "count": "",
+                    "stuta": {
+                        "value": "买家已付款", //待付款-买家已付款，待发货-卖家已发货，待收货-交易完成,退款
+                        "key": "daifukuan",
+                        "desc": "申请退款"
+                    }
+                }
+            ],
+            "orderInfo": [
+                {
+                    "label": "订单编号",
+                    "key": "orderNumber",
+                    "value": "",
+                    "type": "number"
+                }
+            ]
+        }
+    }
+}
\ No newline at end of file
diff --git a/pages/shopping/taobao/list-index.vue b/pages/shopping/taobao/list-index.vue
index 63591a6..ab74eaf 100644
--- a/pages/shopping/taobao/list-index.vue
+++ b/pages/shopping/taobao/list-index.vue
@@ -1,18 +1,610 @@
 <template>
-	<view class="container">
-		<view v-for="item in mockOrderList" :key="item.id">
-			{{ item.name }}
+	<view class="page-container flex-column">
+		<view class="top-fixed">
+			<nav-bar v-if="!selectedImage" title="淘宝" bgColor="#ffffff" :buttonGroup="buttonGroup"
+				@button-click="util.clickTitlePopupButton" tipLayerType="jingdong-shopping-list" isTipLayer
+				tipLayerText="添加订单信息">
+				<template v-slot:left>
+					<image class="back-icon" src="/static/image/shopping/taobao/back.png" mode="aspectFit"></image>
+				</template>
+				<template v-slot:center>
+					<view class="search-box flex-align-center">
+						<image class="search-icon" src="/static/image/shopping/jingdong/search-icon.png"
+							mode="aspectFit">
+						</image>
+						<input class="input" type="text" placeholder="搜索我的订单" />
+					</view>
+				</template>
+				<template v-slot:right>
+					<view class="right-box flex-align-center">
+						<view class="item flex-column flex-align-center">
+							<image class="icon" src="/static/image/shopping/taobao/shaixuan.png"></image>
+							<text class="text">筛选</text>
+						</view>
+						<view class="item flex-column flex-align-center">
+							<image class="icon" src="/static/image/shopping/taobao/guanli.png"></image>
+							<text class="text">管理</text>
+						</view>
+						<view class="item flex-column flex-align-center">
+							<image class="icon" src="/static/image/shopping/taobao/xiaoxi.png"></image>
+							<text class="text" style="opacity: 0;">消息</text>
+						</view>
+					</view>
+				</template>
+			</nav-bar>
+			<view class="tab-list">
+				<view class="tab-item" v-for="(item, index) in tabList" :key="index"
+					:class="{ active: currentTab === index }" @click="switchTab(index)">
+					<view class="title">
+						<text>{{ item.name }}</text>
+						<view class="line" v-if="currentTab === index"></view>
+					</view>
+					<!-- <view class="line" v-if="currentTab === index"></view> -->
+					<image v-if="item.icon" class="badge-icon" :class="{ 'android-m-top': $system == 'Android' }"
+						:src="item.icon" mode="heightFix"></image>
+				</view>
+			</view>
+			<view class="filter-wrapper">
+				<view class="position-l">
+					<view class="filter-item" :class="{ active: currentFilter === 0 }" @click="switchFilter(0)">
+						<text class="text">全部</text>
+					</view>
+				</view>
+				<scroll-view class="filter-scroll" scroll-x="true" :show-scrollbar="false">
+					<view class="filter-list">
+						<view class="filter-item " v-for="(item, index) in filterList" :key="index"
+							:class="{ active: currentFilter === index, disabled: item.disabled }"
+							@click="switchFilter(index)">
+							<text class="text">{{ item.name }}</text>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+
 		</view>
+		<scroll-view class="flex-1" style="height: 100px;" scroll-y="true">
+			<view v-if="currentTab === 0 && currentFilter === 0"
+				class="shangou-tips flex-align-center flex-justify-between">
+				<view class="left flex-align-center">
+					<image style="width: 64rpx;height: 28rpx;margin-right: 8rpx;"
+						src="/static/image/shopping/taobao/shangou-logo.png"></image>
+					<text>暂无进行中订单</text>
+				</view>
+				<view class="right">
+					<text>查看全部</text>
+					<uni-icons type="right" size="14" color="#5E6367"></uni-icons>
+				</view>
+			</view>
+			<listCard :list="displayList" />
+		</scroll-view>
+
 	</view>
+
+
+	<!-- 水印 -->
+	<!-- <view v-if="$isVip()">
+		<watermark dark="light" source="uni_alipay_shopping_taobao" />
+		<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_shopping_taobao')">
+			<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
+		</liu-drag-button>
+	</view> -->
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, computed, onMounted, getCurrentInstance } from 'vue';
+import { onShow } from '@dcloudio/uni-app';
+import { util } from '@/utils/common.js';
+import listCard from './components/list-card/list-card.vue';
+
+const mockList = ref([
+	{
+		orderType: "shopping",
+		shopName: '淘宝心选官方旗舰店',
+		statusType: 'wait_pay',
+		shopType: 'taobao',
+		statusDesc: '',
+		goodsList: [
+			{
+				image: '',
+				title: '【官方正品】全棉时代纯棉柔巾洗脸巾抽纸加厚擦脸巾100抽*6包',
+				specs: '颜色分类: 100抽*6包',
+				price: '69.00',
+				count: 1,
+				tags: ['七天无理由退换']
+			}
+		],
+		totalPrice: '69.00'
+	},
+	{
+		orderType: "shopping",
+		shopName: '小米官方旗舰店',
+		statusType: 'wait_send',
+		statusDesc: '预计明天送达',
+		shopType: 'taobao',
+		goodsList: [
+			{
+				image: '',
+				title: 'Xiaomi/小米 14 徕卡光学镜头 骁龙8Gen3 澎湃OS 小米手机',
+				specs: '颜色分类: 黑色; 内存容量: 16GB+512GB',
+				price: '4599.00',
+				count: 1,
+				tags: ['正品保障', '顺丰包邮']
+			}
+		],
+		totalPrice: '4599.00'
+	},
+	{
+		orderType: "shopping",
+		shopName: 'NIKE官方旗舰店',
+		statusType: 'wait_recv',
+		statusDesc: '您已在重庆九龙坡区哈哈哈完成取件，...',
+		isSignFor: true,
+		shopType: 'taobao',
+		goodsList: [
+			{
+				image: '',
+				title: 'Nike耐克官方AIR FORCE 1 07空军一号男鞋板鞋运动鞋CW2288',
+				specs: '颜色分类: 纯白; 尺码: 42.5',
+				price: '749.00',
+				count: 1,
+				tags: ['假一赔四']
+			}
+		],
+		totalPrice: '749.00'
+	},
+	{
+		orderType: "shopping",
+		shopName: 'NIKE官方旗舰店',
+		statusType: 'wait_recv',
+		isSignFor: false,
+		statusDesc: "平台支持退货",
+		shopType: 'taobao',
+		goodsList: [
+			{
+				image: '',
+				title: 'Nike耐克官方AIR FORCE 1 07空军一号男鞋板鞋运动鞋CW2288',
+				specs: '颜色分类: 纯白; 尺码: 42.5',
+				price: '749.00',
+				count: 1,
+				tags: ['假一赔四']
+			}
+		],
+		totalPrice: '749.00'
+	},
+	{
+		orderType: "shopping",
+		shopName: '三只松鼠旗舰店',
+		statusType: 'success',
+		shopType: 'taobao',
+		goodsList: [
+			{
+				image: '',
+				title: '三只松鼠 坚果大礼包 每日坚果 送礼佳品 1498g',
+				specs: '颜色分类: 坚果礼盒1498g',
+				price: '128.00',
+				count: 2,
+				tags: ['过敏包退']
+			}
+		],
+		totalPrice: '256.00'
+	},
+	{
+		orderType: "shopping",
+		shopName: 'Apple Store 官方旗舰店',
+		statusType: 'closed',
+		shopType: 'tianmao',
+		goodsList: [
+			{
+				image: '',
+				title: 'Apple iPhone 15 Pro (A3104) 256GB 原色钛金属 5G手机',
+				specs: '颜色分类: 原色钛金属; 内存容量: 256GB',
+				price: '8999.00',
+				count: 1,
+				tags: []
+			}
+		],
+		totalPrice: '8999.00'
+	},
+	{
+		orderType: "shopping",
+		shopName: '优衣库官方旗舰店',
+		statusType: 'refunding',
+		statusDesc: '平台支持退款',
+		shopType: 'taobao',
+		goodsList: [
+			{
+				image: '',
+				title: 'UNIQLO 优衣库 男装/女装 摇粒绒拉链运动开衫(长袖) 463351',
+				specs: '颜色分类: 藏青色; 尺码: L',
+				price: '199.00',
+				count: 1,
+				tags: ['极速退款'],
+				refundStatus: '退款成功'
+			}
+		],
+		totalPrice: '199.00'
+	},
+	{
+		orderType: "waimai",
+		shopName: '美团外卖-麦当劳',
+		statusType: 'success',
+		statusDesc: '订单已完成',
+		shopType: 'taobao',
+		goodsList: [
+			{
+				image: '',
+				title: '麦辣鸡腿堡套餐',
+				specs: '默认',
+				price: '32.00',
+				count: 1,
+				tags: []
+			}
+		],
+		totalPrice: '32.00'
+	},
+	{
+		orderType: "waimai",
+		shopName: '饿了么-星巴克',
+		statusType: 'wait_send',
+		statusDesc: '商家准备中',
+		shopType: 'taobao',
+		goodsList: [
+			{
+				image: '',
+				title: '拿铁咖啡',
+				specs: '大杯 / 热',
+				price: '28.00',
+				count: 1,
+				tags: []
+			}
+		],
+		totalPrice: '28.00'
+	},
+	{
+		orderType: "waimai",
+		shopName: '淘鲜达-盒马鲜生',
+		statusType: 'success',
+		statusDesc: '订单已完成',
+		shopType: 'taobao',
+		goodsList: [
+			{
+				image: '',
+				title: '进口智利车厘子 500g',
+				specs: 'JJ级',
+				price: '59.00',
+				count: 1,
+				tags: ['一小时送达']
+			}
+		],
+		totalPrice: '59.00'
+	}
+]);
+
+const displayList = computed(() => {
+	let list = mockList.value;
+
+	// 1. 一级 Tab 过滤 (orderType)
+	if (currentTab.value === 1) { // 购物
+		list = list.filter(item => item.orderType === 'shopping');
+	} else if (currentTab.value === 2) { // 闪购
+		list = list.filter(item => item.orderType === 'waimai');
+	}
+
+	// 2. 二级分类过滤 (currentFilter)
+	if (currentFilter.value > 0) {
+		const filterName = filterList.value[currentFilter.value]?.name;
+
+		// 统一定义状态映射
+		const statusMap = {
+			'待付款': ['wait_pay'],
+			'待发货': ['wait_send'],
+			'待收货': ['wait_recv'],
+			'退款/售后': ['refunding'],
+			'已关闭': ['closed'],
+			'待评价': ['success'] // 闪购下 success 状态代表已送达可评价
+		};
+
+		const targetStatus = statusMap[filterName];
+		if (targetStatus) {
+			list = list.filter(item => targetStatus.includes(item.statusType));
+		}
+	}
+
+	return list;
+});
+
+const currentFilter = ref(0);
+const filterList = ref([
+	{ name: '全部' },
+	{ name: '待付款' },
+	{ name: '待发货' },
+	{ name: '待收货' },
+	{ name: '退款/售后' },
+	{ name: '已关闭' }
+]);
+
+const currentTab = ref(0);
+const tabList = ref([
+	{ name: '全部订单' },
+	{ name: '购物' },
+	{ name: '闪购', icon: '/static/image/shopping/taobao/waimai.png' },
+	{ name: '飞猪', icon: '/static/image/shopping/taobao/lvxing.png', disabled: true }
+]);
 
 /**
- * 模拟订单列表
+ * 切换tab
+ * @param index 
  */
-const mockOrderList = ref([]);
+const switchTab = (index) => {
+	if (tabList.value[index].disabled) return;
+	currentTab.value = index;
+	// 重置筛选为“全部”
+	currentFilter.value = 0;
+	// 动态更新筛选项
+	updateFilterList();
+};
+
+/**
+ * 动态更新筛选项
+ */
+const updateFilterList = () => {
+	let sourceList = [];
+	// 根据tab切换不同的筛选项数据
+	switch (currentTab.value) {
+		case 0:
+			sourceList = ["全部", "待付款", "待发货", "待收货", "退款/售后", "已关闭"];
+			break;
+		case 1:
+			sourceList = ["全部", "待付款", "待发货", "待收货", "退款/售后", "已关闭"];
+			break;
+		case 2:
+			sourceList = ["全部", "待付款", "待发货", "待收货", "待评价", "已关闭"];
+			break;
+		case 3:
+			sourceList = ["全部", "全部行程", "已完成", "退款/售后"];
+			break;
+	}
+	filterList.value = sourceList.map((name, index) => ({
+		name,
+		disabled: index === 2 && currentTab.value === 1 // 示例：只有待发货可以被禁用
+	}));
+};
+
+/**
+ * 切换筛选
+ * @param index 索引
+ */
+const switchFilter = (index) => {
+	if (filterList.value[index].disabled) return;
+	if (currentFilter.value === index) {
+		currentFilter.value = 0;
+	} else {
+		currentFilter.value = index;
+	}
+};
+
+
 </script>
 
-<style lang="less"></style>
\ No newline at end of file
+<style lang="less" scoped>
+.page-container {
+	height: 100vh;
+	overflow: hidden;
+}
+
+.top-fixed {
+	background-color: #ffffff;
+
+	::v-deep .uni-navbar__header-btns {
+		width: auto !important;
+	}
+
+	::v-deep .uni-navbar__header-container {
+		padding: 0 14rpx;
+		padding-left: 34rpx;
+	}
+
+	.back-icon {
+		width: 40rpx;
+		height: 40rpx;
+	}
+
+	.search-box {
+		background-color: #F1F5F8;
+		padding: 0 18rpx;
+		width: 100%;
+		border-radius: 16rpx;
+
+		.search-icon {
+			width: 26rpx;
+			height: 26rpx;
+			margin-right: 10rpx;
+		}
+
+		.input {
+			width: 100%;
+			height: 72rpx;
+			font-size: 26rpx;
+
+			::v-deep .input-placeholder {
+				color: #7E8C9D;
+			}
+		}
+	}
+
+	.right-box {
+		.item {
+			margin: 0 14rpx;
+
+			.icon {
+				width: 40rpx;
+				height: 40rpx;
+			}
+
+			.text {
+				font-size: 20rpx;
+				color: #1A1A1A;
+				line-height: 20rpx;
+				margin-top: 4rpx;
+			}
+		}
+	}
+
+	.tab-list {
+		display: flex;
+		align-items: center;
+		padding: 16rpx 36rpx 10rpx;
+
+		.tab-item {
+			display: flex;
+			align-items: center;
+			margin-right: 58rpx;
+
+			.title {
+				position: relative;
+				font-size: 30rpx;
+				color: #00032A;
+				font-weight: 500;
+				line-height: 16px !important;
+			}
+
+			&.active {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+
+				.title {
+					color: #EF7518;
+				}
+			}
+
+			.line {
+				position: absolute;
+				bottom: -12rpx;
+				left: 50%;
+				transform: translateX(-50%);
+				width: 22rpx;
+				height: 4rpx;
+				background-color: #EF7518;
+				border-radius: 4rpx;
+			}
+
+			.badge-icon {
+				margin-left: 6rpx;
+				width: 52rpx;
+				height: 14px;
+
+				&.android-m-top {
+					margin-top: -3rpx;
+				}
+			}
+		}
+	}
+
+	.filter-wrapper {
+		position: relative;
+		display: flex;
+		align-items: center;
+		padding: 0 22rpx 0 30rpx;
+		margin-top: 28rpx;
+		padding-bottom: 16rpx;
+
+		.filter-scroll {
+			flex: 1;
+			width: 0;
+			white-space: nowrap;
+
+			.filter-list {
+				padding-right: 24rpx;
+			}
+		}
+
+		.position-l {
+			position: absolute;
+			left: 0;
+			padding-left: 30rpx;
+			background-color: #ffffff;
+			z-index: 1;
+
+			.filter-item {
+				margin-right: 10rpx;
+			}
+		}
+
+		.filter-item {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			vertical-align: middle;
+			height: 56rpx;
+			padding: 0 22rpx;
+			background-color: #F1F4F9;
+			border-radius: 12rpx;
+			margin-right: 16rpx;
+			border: 2rpx solid transparent;
+			box-sizing: border-box;
+
+			.text {
+				font-size: 26rpx;
+				line-height: 26rpx;
+				color: #00032A;
+			}
+
+			.close-icon {
+				font-size: 18px;
+				color: #E40C24;
+				margin-top: -4rpx;
+				line-height: 14px;
+				margin-left: 6rpx;
+				font-weight: 400;
+			}
+
+			&.active {
+				background-color: #FFEEE6;
+
+				.text {
+					color: #EF7518;
+				}
+			}
+
+			// &.disabled {
+			// 	background-color: #F8F8F8;
+			// 	border-color: transparent;
+
+			// 	.text {
+			// 		color: #CCCCCC;
+			// 	}
+			// }
+		}
+	}
+}
+
+.shangou-tips {
+	padding: 28rpx 22rpx 36rpx 32rpx;
+	background-color: #ffffff;
+
+	.left {
+		height: 28rpx;
+
+		text {
+			font-size: 26rpx;
+			line-height: 28rpx;
+			color: #00032A;
+			font-weight: 500;
+		}
+	}
+
+	.right {
+		color: #5E6367;
+		font-size: 26rpx;
+		line-height: 28rpx;
+
+		text {
+			margin-right: 10rpx;
+		}
+	}
+}
+</style>
+<style>
+@import '@/common/main.css';
+</style>
\ No newline at end of file
diff --git a/static/image/shopping/taobao/chaping.png b/static/image/shopping/taobao/chaping.png
new file mode 100644
index 0000000..a0a420d
Binary files /dev/null and b/static/image/shopping/taobao/chaping.png differ
diff --git a/static/image/shopping/taobao/daifahuo.png b/static/image/shopping/taobao/daifahuo.png
new file mode 100644
index 0000000..2681882
Binary files /dev/null and b/static/image/shopping/taobao/daifahuo.png differ
diff --git a/static/image/shopping/taobao/daifukuan.png b/static/image/shopping/taobao/daifukuan.png
new file mode 100644
index 0000000..f771d81
Binary files /dev/null and b/static/image/shopping/taobao/daifukuan.png differ
diff --git a/static/image/shopping/taobao/haoping.png b/static/image/shopping/taobao/haoping.png
new file mode 100644
index 0000000..80971ab
Binary files /dev/null and b/static/image/shopping/taobao/haoping.png differ
diff --git a/static/image/shopping/taobao/lvxing.png b/static/image/shopping/taobao/lvxing.png
new file mode 100644
index 0000000..c0250ba
Binary files /dev/null and b/static/image/shopping/taobao/lvxing.png differ
diff --git a/static/image/shopping/taobao/pingjia.png b/static/image/shopping/taobao/pingjia.png
new file mode 100644
index 0000000..803d220
Binary files /dev/null and b/static/image/shopping/taobao/pingjia.png differ
diff --git a/static/image/shopping/taobao/shangou-logo.png b/static/image/shopping/taobao/shangou-logo.png
new file mode 100644
index 0000000..942962e
Binary files /dev/null and b/static/image/shopping/taobao/shangou-logo.png differ
diff --git a/static/image/shopping/taobao/taobao.png b/static/image/shopping/taobao/taobao.png
new file mode 100644
index 0000000..c394aa4
Binary files /dev/null and b/static/image/shopping/taobao/taobao.png differ
diff --git a/static/image/shopping/taobao/tianmao.png b/static/image/shopping/taobao/tianmao.png
new file mode 100644
index 0000000..fa08f1f
Binary files /dev/null and b/static/image/shopping/taobao/tianmao.png differ
diff --git a/static/image/shopping/taobao/waimai.png b/static/image/shopping/taobao/waimai.png
new file mode 100644
index 0000000..1221c2d
Binary files /dev/null and b/static/image/shopping/taobao/waimai.png differ
diff --git a/static/image/shopping/taobao/yiqianshou.png b/static/image/shopping/taobao/yiqianshou.png
new file mode 100644
index 0000000..2d08ead
Binary files /dev/null and b/static/image/shopping/taobao/yiqianshou.png differ
diff --git a/static/image/shopping/taobao/yunshuzhong.png b/static/image/shopping/taobao/yunshuzhong.png
new file mode 100644
index 0000000..dc3fae9
Binary files /dev/null and b/static/image/shopping/taobao/yunshuzhong.png differ
diff --git a/static/image/shopping/taobao/zhongping.png b/static/image/shopping/taobao/zhongping.png
new file mode 100644
index 0000000..ddba1af
Binary files /dev/null and b/static/image/shopping/taobao/zhongping.png differ