diff --git a/App.vue b/App.vue
index 52a8170..e4403f4 100644
--- a/App.vue
+++ b/App.vue
@@ -7,7 +7,7 @@ export default {
 	},
 	onLaunch: function (options) {
 		
-			console.log=()=>{}
+			// console.log=()=>{}
 		// === wgt 包启动诊断日志 ===
 		console.log('=== App Launch 开始 ===')
 		console.log('启动参数:', JSON.stringify(options))
diff --git a/components/balance-list/balance-list.vue b/components/balance-list/balance-list.vue
index de701d2..480819c 100644
--- a/components/balance-list/balance-list.vue
+++ b/components/balance-list/balance-list.vue
@@ -12,7 +12,7 @@
 						</view>
 						<view class="money alipay-font"
 							:class="item.isAdd ? (isBalance ? 'add-color' : 'red-add-color') : 'minus-color', { 'line-height-51rpx': isBalance }">
-							{{ item.isAdd ? '+' : '-' }}{{ Number(item.money).toFixed(2) }}
+							{{ item.isAdd ? '+' : '-' }}{{ numberUtil.formatMoneyWithThousand(item.money) }}
 						</view>
 
 					</view>
@@ -39,7 +39,7 @@
 							<view v-if="item.isRefund" class="refund" :class="{ 'item-box': !isBalance }">已全额退款</view>
 							<view v-if="isBalance" class="balance secondary" :class="{ 'item-box': !isBalance }">余额
 								<text class="balance-text wx-font-regular">{{
-									Number(item.balance).toFixed(2)
+									numberUtil.formatMoneyWithThousand(item.balance)
 								}}</text>元
 							</view>
 						</view>
@@ -58,6 +58,10 @@ import {
 	reactive
 } from 'vue'
 
+import {
+	numberUtil
+} from '@/utils/common.js'
+
 // 定义组件属性
 const props = defineProps({
 	list: {
diff --git a/components/common/auto-width-input.vue b/components/common/auto-width-input.vue
new file mode 100644
index 0000000..a25414a
--- /dev/null
+++ b/components/common/auto-width-input.vue
@@ -0,0 +1,213 @@
+<template>
+	<view class="auto-width-input-container" :class="{ 'is-textarea': type === 'textarea' }">
+		<!-- 测量层：用于计算宽度的影藏文本，必须保持与 input 相同的字体样式 -->
+		<text v-if="type !== 'textarea'" class="measure-text" :style="[inputStyle, { visibility: 'hidden', position: 'absolute', whiteSpace: 'nowrap' }]">
+			{{ modelValue || placeholder }}
+		</text>
+
+		<!-- 输入层 -->
+		<template v-if="type !== 'textarea'">
+			<input class="auto-input" :type="type" :value="modelValue" :placeholder="placeholder" :placeholder-style="placeholderStyle"
+				:style="[inputStyle, { width: finalInputWidth }]" @input="onInput" :maxlength="maxlength" :focus="isFocus" @blur="onBlur" />
+		</template>
+		<template v-else>
+			<textarea class="auto-textarea" :value="modelValue" :placeholder="placeholder" :placeholder-style="placeholderStyle"
+				:style="[inputStyle]" @input="onInput" :maxlength="maxlength" auto-height :focus="isFocus" @blur="onBlur" />
+		</template>
+
+		<!-- 编辑图标 -->
+		<image v-if="showEdit" class="edit-icon" src="/static/image/common/edit.png" @click="handleFocusIcon"></image>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, watch, nextTick, getCurrentInstance, onMounted } from 'vue';
+
+const props = defineProps({
+	modelValue: {
+		type: [String, Number],
+		default: ''
+	},
+	type: {
+		type: String,
+		default: 'text' // 支持所有原生类型如 'number', 'tel', 'digit' 或 'textarea'
+	},
+	placeholder: {
+		type: String,
+		default: '请输入'
+	},
+	placeholderStyle: {
+		type: String,
+		default: 'color: #999;'
+	},
+	fontSize: {
+		type: String,
+		default: '28rpx'
+	},
+	fontWeight: {
+		type: String,
+		default: 'normal'
+	},
+	color: {
+		type: String,
+		default: '#1A1A1A'
+	},
+	maxlength: {
+		type: Number,
+		default: 140
+	},
+	minWidth: {
+		type: String,
+		default: '20rpx'
+	},
+	extraWidth: {
+		type: Number,
+		default: 10 // 额外的缓冲像素，防止文字抖动
+	},
+	showEdit: {
+		type: Boolean,
+		default: false
+	}
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+const instance = getCurrentInstance();
+const inputWidth = ref(props.minWidth);
+// 最终应用的宽度样式
+const finalInputWidth = computed(() => {
+	// 如果是 textarea 或者设置了填满父级，则不使用测量出的宽度
+	if (props.type === 'textarea') return '100%';
+	// 尝试检测 class 中是否包含撑开逻辑
+	const classStr = instance.proxy.$attrs.class || '';
+	if (classStr.includes('flex-1') || classStr.includes('w100')) {
+		return '100%';
+	}
+	return inputWidth.value;
+});
+const isFocus = ref(false);
+
+const inputStyle = computed(() => ({
+	fontSize: props.fontSize,
+	fontWeight: props.fontWeight,
+	color: props.color,
+	fontFamily: 'inherit'
+}));
+
+/**
+ * 点击图标触发聚焦
+ */
+const handleFocusIcon = () => {
+	isFocus.value = false;
+	nextTick(() => {
+		isFocus.value = true;
+	});
+};
+
+/**
+ * 失去焦点处理
+ */
+const onBlur = () => {
+	isFocus.value = false;
+};
+
+/**
+ * 核心逻辑：测量隐藏文本的物理宽度
+ */
+const updateWidth = () => {
+	if (props.type === 'textarea') return;
+	// 如果是强制撑开模式，理论上不需要测量，但为了防止切换状态时的布局闪烁，我们仍保持测量
+	nextTick(() => {
+		const query = uni.createSelectorQuery().in(instance.proxy);
+		query.select('.measure-text').boundingClientRect(data => {
+			if (data && data.width) {
+				heatWidth(data.width);
+			}
+		}).exec();
+	});
+};
+
+const heatWidth = (width) => {
+	// 加上一点额外的空间，避免在某些平台上因为小数点或字体渲染导致的文字换行
+	inputWidth.value = (width + props.extraWidth) + 'px';
+};
+
+const onInput = (e) => {
+	const val = e.detail.value;
+	emit('update:modelValue', val);
+	emit('change', val);
+};
+
+// 监听值的变化实时更新宽度
+watch(() => props.modelValue, () => {
+	updateWidth();
+});
+
+// 初始化
+onMounted(() => {
+	updateWidth();
+});
+</script>
+
+<style lang="less" scoped>
+.auto-width-input-container {
+	position: relative;
+	display: inline-flex; // 默认维持自适应宽度
+	align-items: center;
+	vertical-align: middle;
+	max-width: 100%;
+	flex-wrap: nowrap;
+	
+	// 当父级赋予 flex-1 或手动设置 width: 100% 时，转为标准 flex 布局
+	&.flex-1, &.w100 {
+		display: flex !important;
+		width: 100% !important;
+	}
+
+	&.is-textarea {
+		display: flex !important;
+		width: 100%;
+		align-items: flex-start;
+		flex-direction: row !important;
+	}
+
+	.measure-text {
+		left: -9999rpx;
+		top: -9999rpx;
+		pointer-events: none;
+	}
+
+	.auto-input {
+		min-width: v-bind('props.minWidth');
+		padding: 0;
+		margin: 0;
+		text-align: inherit;
+		height: 1.4em;
+		line-height: 1.4em;
+		flex-shrink: 0;
+		
+		// 如果容器是撑开的，input 也应该撑开
+		& {
+			flex: 1;
+		}
+	}
+
+	.auto-textarea {
+		flex: 1 !important;
+		width: 0 !important;
+		min-width: 0;
+		min-height: 1.4em;
+		padding: 0;
+		margin: 0;
+		line-height: 1.4em;
+		display: block;
+	}
+
+	.edit-icon {
+		width: 28rpx;
+		height: 28rpx;
+		margin-left: 8rpx;
+		flex-shrink: 0;
+		margin-top: 4rpx;
+	}
+}
+</style>
diff --git a/components/message/chat/chat-layout.vue b/components/message/chat/chat-layout.vue
index 8bc4cb0..2c910bd 100644
--- a/components/message/chat/chat-layout.vue
+++ b/components/message/chat/chat-layout.vue
@@ -16,7 +16,7 @@
                                 :src="chatInfo.img || `/static/image/phone-message/${phone}/default.png`">
                             </image>
                             <text v-if="phone != 'iphone'" class="title">{{ chatInfo.title }}</text>
-                            <text v-if="phone == 'oppo'" class="second-text">重庆</text>
+                            <text v-if="phone == 'oppo' && chatInfo.area" class="second-text">{{ chatInfo.area }}</text>
                         </view>
                         <view class="right flex-align-center">
                             <image v-if="phone == 'mi'" class="img shrink-0"
diff --git a/components/shopping/jingdong/shopping-card.vue b/components/shopping/jingdong/shopping-card.vue
index 1f8321e..6d294f8 100644
--- a/components/shopping/jingdong/shopping-card.vue
+++ b/components/shopping/jingdong/shopping-card.vue
@@ -1,5 +1,5 @@
 <template>
-    <view class="shopping-card">
+    <view class="shopping-card" @longpress="onLongPress">
         <!-- Header -->
         <view class="card-header">
             <view class="shop-info">
@@ -14,7 +14,7 @@
                 <view v-if="item.status === '等待付款'" class="status-warning">
                     <image style="width: 116rpx;height: 30rpx;" src="/static/image/shopping/jingdong/dengdaifukuan.png">
                     </image>
-                    <text class="status-desc" v-if="item.statusDesc">{{ item.statusDesc }}</text>
+                    <text class="status-desc" v-if="item.statusDesc">{{ formatStatusDesc(item.statusDesc) }}</text>
                 </view>
                 <text v-else class="status-text"
                     :class="{ red: item.statusColor === 'red' || item.status === '正在出库' || item.status === '商家备餐中' || item.status === '骑手到店取餐中' || item.status === '骑手已到店' }">{{
@@ -63,8 +63,8 @@
                 <view class="product-info">
                     <text class="product-title">{{ item.products[0].title }}</text>
                     <text class="product-desc" v-if="item.products[0].desc">{{ item.products[0].desc }}</text>
-                    <view class="product-tags" v-if="item.products[0].tags && item.products[0].tags.length">
-                        <text class="tag" v-for="(tag, index) in item.products[0].tags" :key="index">{{ tag }}</text>
+                    <view class="product-tags" v-if="item.products[0].service">
+                        <text class="tag">{{ item.products[0].service }}</text>
                     </view>
                 </view>
             </template>
@@ -87,8 +87,7 @@
             <view class="product-price-box">
                 <view class="price-wrap wx-font-regular">
                     <text class="price-symbol">￥</text>
-                    <text class="price-num">{{ item.price || (item.products && item.products[0] &&
-                        item.products[0].price) }}</text>
+                    <text class="price-num">{{ safeFormatPrice(item) }}</text>
                 </view>
                 <text class="product-count"
                     v-if="item.count || (item.products && item.products[0] && item.products[0].count)">共{{
@@ -98,8 +97,7 @@
 
         <!-- Promo -->
         <view class="promo-box"
-            :class="{ 'plus-promo': item.promoType === 'plus', 'cashback-promo': item.promoType === 'cashback', 'coupon-promo': item.promoType === 'coupon' }"
-            v-if="item.promoType || item.promoText || item.promoHighlight">
+            :class="{ 'plus-promo': item.promoType === 'plus', 'cashback-promo': item.shopType == 'waimai' && (item.status == '骑手到店取餐中' || item.status == '商家备餐中'), 'coupon-promo': item.promoType === 'coupon' }">
             <template v-if="item.promoType === 'plus'">
                 <view class="plus-row">
                     <image class="plus-tag" src="/static/image/shopping/jingdong/plus.png"></image>
@@ -107,11 +105,9 @@
                 </view>
                 <text class="promo-action">解锁权益 <uni-icons type="right" size="10" color="#654629"></uni-icons> </text>
             </template>
-            <template v-else-if="item.promoType === 'cashback'">
-                <text class="promo-text">{{ item.promoText }} <text class="highlight" v-if="item.promoHighlight">{{
-                    item.promoHighlight }}</text></text>
-                <text class="promo-action red">{{ item.promoAction || '点击领取' }} <uni-icons type="right" size="10"
-                        color="#ED1C04"></uni-icons></text>
+            <template v-else-if="item.shopType == 'waimai' && (item.status == '骑手到店取餐中' || item.status == '商家备餐中')">
+                <text class="promo-text text-basic">当笔订单返现成功到账，<text style="color: #E31700;">点击领取</text></text>
+                <uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
             </template>
             <template v-else-if="item.promoType === 'coupon'">
                 <view class="coupon-row">
@@ -149,7 +145,7 @@
 </template>
 
 <script setup>
-import { defineProps, computed } from 'vue';
+import { defineProps, computed, defineEmits } from 'vue';
 
 const props = defineProps({
     item: {
@@ -159,6 +155,27 @@ const props = defineProps({
     }
 });
 
+const emit = defineEmits(['btnClick', 'longpress']);
+
+const onLongPress = (e) => {
+    emit('longpress', { event: e, item: props.item });
+};
+
+const formatStatusDesc = (desc) => {
+    if (!desc || !desc.includes(' : ')) return desc;
+    const parts = desc.split(' : ');
+    if (parts.length >= 2) {
+        return `${parts[0]}时${parts[1]}分`;
+    }
+    return desc;
+};
+
+const safeFormatPrice = (item) => {
+    const val = item.price || (item.products && item.products[0] && item.products[0].price);
+    const num = Number(val);
+    return isNaN(num) ? '0.00' : num.toFixed(2);
+};
+
 const getButtons = (shopType, status, item) => {
     const buttons = [];
     if (status == '等待付款') {
@@ -269,7 +286,7 @@ const getButtons = (shopType, status, item) => {
             .shop-name {
                 white-space: nowrap;
                 font-size: 26rpx;
-                line-height: 26rpx;
+                line-height: 28rpx;
                 color: #1A1A1A;
                 font-weight: 700;
                 overflow: hidden;
@@ -682,7 +699,7 @@ const getButtons = (shopType, status, item) => {
                 border-radius: 8rpx;
                 font-size: 22rpx;
                 margin-left: 16rpx;
-                border: 1rpx solid #C7C7C7;
+                border: 0.5px solid #C7C7C7;
                 color: #1A1A1A;
                 background-color: #FFFFFF;
 
diff --git a/main.js b/main.js
index 3c6fb1e..8ad5efd 100644
--- a/main.js
+++ b/main.js
@@ -27,7 +27,7 @@ export function createApp() {
 	const systemInfo = uni.getStorageSync('systemInfo') || {}
 	app.config.globalProperties.$system = systemInfo.platform == 'ios' ? 'iOS' : 'Android'
 	app.config.globalProperties.$systemInfo = systemInfo
-	uni.setStorageSync('version', '1.0.3.sp18')
+	uni.setStorageSync('version', '1.0.4.sp3')
 	app.config.globalProperties.$version = uni.getStorageSync('version')
 	app.use(globalMethods);
 	return {
diff --git a/pages.json b/pages.json
index ccc2172..ced3481 100644
--- a/pages.json
+++ b/pages.json
@@ -9,23 +9,19 @@
 			}
 		}
 	],
-	"subPackages": [
-		{
+	"subPackages": [{
 			"root": "pages/call-log",
-			"pages": [
-				{
-					"path": "call",
-					"style": {
-						"navigationBarTitleText": "通话记录页面",
-						"navigationStyle": "custom"
-					}
+			"pages": [{
+				"path": "call",
+				"style": {
+					"navigationBarTitleText": "通话记录页面",
+					"navigationStyle": "custom"
 				}
-			]
+			}]
 		},
 		{
 			"root": "pages/message",
-			"pages": [
-				{
+			"pages": [{
 					"path": "list-index",
 					"style": {
 						"navigationBarTitleText": "短信列表首页",
@@ -43,8 +39,7 @@
 		},
 		{
 			"root": "pages/shopping",
-			"pages": [
-				{
+			"pages": [{
 					"path": "index",
 					"style": {
 						"navigationBarTitleText": "购物app首页",
@@ -57,13 +52,26 @@
 						"navigationBarTitleText": "京东列表首页",
 						"navigationStyle": "custom"
 					}
+				},
+				{
+					"path": "jingdong/order-detail/order-detail",
+					"style": {
+						"navigationBarTitleText": "订单详情",
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "jingdong/add-order/add-order",
+					"style": {
+						"navigationBarTitleText": "添加订单",
+						"navigationStyle": "custom"
+					}
 				}
 			]
 		},
 		{
 			"root": "pages/balance",
-			"pages": [
-				{
+			"pages": [{
 					"path": "index",
 					"style": {
 						"navigationBarTitleText": "余额页面",
@@ -89,8 +97,7 @@
 		},
 		{
 			"root": "pages/bill",
-			"pages": [
-				{
+			"pages": [{
 					"path": "bill-list/bill-list",
 					"style": {
 						"navigationBarTitleText": "账单列表页面",
@@ -115,8 +122,7 @@
 		},
 		{
 			"root": "pages/ant-credit-pay",
-			"pages": [
-				{
+			"pages": [{
 					"path": "index",
 					"style": {
 						"navigationBarTitleText": "花呗首页",
@@ -134,8 +140,7 @@
 		},
 		{
 			"root": "pages/finance-management",
-			"pages": [
-				{
+			"pages": [{
 					"path": "index",
 					"style": {
 						"navigationBarTitleText": "理财首页",
@@ -160,8 +165,7 @@
 		},
 		{
 			"root": "pages/other",
-			"pages": [
-				{
+			"pages": [{
 					"path": "/video-group-chat/video-group-chat",
 					"style": {
 						"navigationBarTitleText": "视频群聊",
@@ -262,13 +266,19 @@
 						"navigationBarTitleText": "飞猪火车票",
 						"navigationStyle": "custom"
 					}
+				},
+				{
+					"path": "ranking/ranking",
+					"style": {
+						"navigationBarTitleText": "从夯倒拉排名",
+						"navigationStyle": "custom"
+					}
 				}
 			]
 		},
 		{
 			"root": "pages/common",
-			"pages": [
-				{
+			"pages": [{
 					"path": "hot-icon/hot-icon",
 					"style": {
 						"navigationBarTitleText": "热门图标",
diff --git a/pages/bill/bill-detail/bill-detail.vue b/pages/bill/bill-detail/bill-detail.vue
index 99b62c8..c2feff1 100644
--- a/pages/bill/bill-detail/bill-detail.vue
+++ b/pages/bill/bill-detail/bill-detail.vue
@@ -29,7 +29,8 @@
 					<!-- 金额 -->
 					<view class=" money info-item-input alipay-font" style="height: 77rpx;">
 						<!-- 隐藏的text用于测量宽度 -->
-						<text class="text-measure font-w500" style="font-size: 64rpx;">{{ billData.money }}</text>
+						<text class="text-measure font-w500" style="font-size: 64rpx;">{{
+							numberUtil.formatMoneyWithThousand(billData.money) }}</text>
 					</view>
 				</view>
 
@@ -253,7 +254,8 @@ const {
 } = addBillJson
 import {
 	util,
-	randomUtil
+	randomUtil,
+	numberUtil
 } from '@/utils/common.js'
 
 import {
diff --git a/pages/bill/bill-list/bill-list.vue b/pages/bill/bill-list/bill-list.vue
index c6f3c59..660458c 100644
--- a/pages/bill/bill-list/bill-list.vue
+++ b/pages/bill/bill-list/bill-list.vue
@@ -49,9 +49,9 @@
 				<view class="income-ande-outCome flex-between">
 					<view class="flex">
 						<view class="item"><text>支出￥</text><text class="money wx-font-regular">{{
-							Number(currentMonthData.outCome).toFixed(2) }}</text></view>
+							numberUtil.formatMoneyWithThousand(currentMonthData.outCome) }}</text></view>
 						<view class="item"><text>收入￥</text><text class="money wx-font-regular">{{
-							Number(currentMonthData.inCome).toFixed(2) }}</text></view>
+							numberUtil.formatMoneyWithThousand(currentMonthData.inCome) }}</text></view>
 
 					</view>
 					<view class="">
@@ -83,13 +83,13 @@
 							<view class="outCome item">
 								<text class="title">支出</text>
 								<text class="amount alipay-font"><text class="font-11 wx-font-regular">￥</text>{{
-									Number(item.outCome).toFixed(2)
+									numberUtil.formatMoneyWithThousand(item.outCome)
 								}}</text>
 							</view>
 							<view class="income item">
 								<text class="title">收入</text>
 								<text class="amount alipay-font"><text class="font-11 wx-font-regular">￥</text>{{
-									Number(item.inCome).toFixed(2)
+									numberUtil.formatMoneyWithThousand(item.inCome)
 								}}</text>
 							</view>
 						</view>
@@ -129,7 +129,8 @@
 <script setup>
 import {
 	dateUtil,
-	util
+	util,
+	numberUtil
 } from '@/utils/common.js'
 import navBar from '@/components/nav-bar/nav-bar.vue'
 import BalanceList from '@/components/balance-list/balance-list.vue'
diff --git a/pages/index/index.nvue b/pages/index/index.nvue
index 770a0f9..77cb7ee 100644
--- a/pages/index/index.nvue
+++ b/pages/index/index.nvue
@@ -275,11 +275,16 @@ const otherList = [{
 	name: "通话",
 	path: "/pages/common/call-and-message-entry/call-and-message-entry?type=call"
 },
-	// {
-	// 	icon: "/static/image/index/qita/gouwu.png",
-	// 	name: "购物",
-	// 	path: "/pages/shopping/index"
-	// },
+{
+	icon: "/static/image/index/qita/ranking.png",
+	name: "从夯倒拉排名",
+	path: "/pages/other/ranking/ranking"
+},
+{
+	icon: "/static/image/index/qita/gouwu.png",
+	name: "购物",
+	path: "/pages/shopping/index"
+},
 ]
 
 const data = reactive({
diff --git a/pages/message/list-index.vue b/pages/message/list-index.vue
index cfd59ad..e6640bd 100644
--- a/pages/message/list-index.vue
+++ b/pages/message/list-index.vue
@@ -48,6 +48,10 @@
 						<text class="add-label required">联系人</text>
 						<input class="add-input" v-model="addForm.title" placeholder="请输入名称或号码" />
 					</view>
+					<view class="add-row" v-if="data.phone == 'oppo'">
+						<text class="add-label">地区</text>
+						<input class="add-input" v-model="addForm.area" placeholder="请输入地区" />
+					</view>
 					<view class="add-row between" v-if="data.phone == 'iphone'">
 						<text class="add-label">取消通知</text>
 						<switch :checked="addForm.noNotice" @change="addForm.noNotice = !addForm.noNotice" />
@@ -313,6 +317,7 @@ const openAddPopup = () => {
 	addForm.title = ''
 	addForm.img = ''
 	addForm.content = ''
+	addForm.area = ''
 	addForm.unRead = false
 	addForm.unReadNumber = 1
 	addForm.noNotice = false
@@ -347,6 +352,7 @@ const editItem = (item) => {
 	addForm.img = item.img || ''
 	addForm.imgShape = item.imgShape || 'circle'
 	addForm.content = ''
+	addForm.area = item.area || ''
 	addForm.unRead = !!item.unRead
 	addForm.unReadNumber = item.unReadNumber || 0
 	addForm.noNotice = item.noNotice || false
@@ -387,6 +393,7 @@ const confirmAdd = async () => {
 			defaultList.value[idx].unReadNumber = addForm.unReadNumber
 			defaultList.value[idx].noNotice = addForm.noNotice
 			defaultList.value[idx].imgShape = addForm.imgShape
+			defaultList.value[idx].area = addForm.area
 			defaultList.value[idx].time = time
 		}
 	} else {
@@ -399,6 +406,7 @@ const confirmAdd = async () => {
 			img: finalImgPath,
 			title: addForm.title.trim(),
 			imgShape: addForm.imgShape,
+			area: addForm.area,
 			chatList: addForm.content.trim() ? [
 				{
 					id: stringUtil.uuid(),
diff --git a/pages/other/ranking/ranking.vue b/pages/other/ranking/ranking.vue
new file mode 100644
index 0000000..01ab5b3
--- /dev/null
+++ b/pages/other/ranking/ranking.vue
@@ -0,0 +1,784 @@
+<template>
+	<view class="ranking-page">
+		<nav-bar title="从夯到拉" bgColor="#F5F5F5" isRightButton :rightButtonText="rightButtonText"
+			@right-click="onRightClick">
+		</nav-bar>
+
+		<view class="content-container">
+			<view :class="{ 'skin-box': type == 'skin', 'table-box': type != 'skin' }"
+				:style="type == 'skin' ? { backgroundColor: skinBgColor } : {}">
+				<template v-if="type == 'skin'">
+					<view v-if="!isEdit" class="title">{{ title }}</view>
+					<input v-else class="title title-input" v-model="title" maxlength="12" placeholder="请输入排名标题" />
+					<image class="img happy" src="/static/image/other/ranking/happy.png"></image>
+					<image class="img sad" src="/static/image/other/ranking/sad.png"></image>
+				</template>
+				<image v-if="$isVip()" class="watermark" :class="{}" src="/static/image/other/card/shuiyin2.png"
+					mode="heightFix">
+				</image>
+
+				<view class="ranking-table">
+					<view v-for="(item, index) in tierList" :key="index" class="ranking-row">
+						<view class="label-box" :style="{ backgroundColor: item.bgColor }"
+							@click="changeRowBgColor(index)">
+							<!-- <text class="label-text" :class="{ 'with-stroke': item.hasStroke }"
+								:style="{ color: item.textColor }">
+								{{ item.label }}
+							</text> -->
+							<image :style="`height:60rpx;width:160rpx;`"
+								:src="`/static/image/other/ranking/${type == 'skin' ? item.img + '_skin' : item.img}.png`">
+							</image>
+						</view>
+
+						<view class="items-box ranking-item-list" :id="'row-' + index">
+							<view v-for="(img, imgIdx) in item.images" :key="imgIdx" class="item-wrapper"
+								:class="{ 'is-dragging': drag.tierIndex === index && drag.imgIdx === imgIdx }"
+								:style="getDragStyle(index, imgIdx)" @touchstart="onTouchStart($event, index, imgIdx)"
+								@touchmove.stop.prevent="onTouchMove" @touchend="onTouchEnd">
+
+								<image :src="img" mode="aspectFill" class="item-img"></image>
+								<view v-if="isEdit" class="del-btn" @click.stop="deleteImage(index, imgIdx)">×</view>
+							</view>
+
+							<view v-if="isEdit && item.images.length < 4" class="add-btn" @click="chooseImage(index)">
+								<image class="add-icon" src="/static/image/common/add.png"></image>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="save-action">
+				<button v-if="!isEdit" class="save-btn" @click="handleSave">保存图片</button>
+				<!-- 编辑模式下的全局颜色控制器 -->
+				<view v-else-if="type == 'skin'" class="bottom-edit-actions">
+					<view class="color-picker-wrapper">
+						<view class="color-picker">
+							<view v-for="color in ['#FFDFDF', '#DFF0FF', '#E0FFDF', '#FDF5C8', '#F3DFFF']" :key="color"
+								class="color-dot" :style="{ backgroundColor: color }" @click="skinBgColor = color">
+							</view>
+						</view>
+						<input v-if="false" class="hex-input" v-model="skinBgColor" placeholder="#HEX" maxlength="7" />
+					</view>
+					<view class="spectrum-picker" @touchstart="handleHueTouch" @touchmove.stop.prevent="handleHueTouch">
+						<view class="spectrum-bar"></view>
+						<view class="slider-thumb" :style="{ left: (skinHue / 360 * 100) + '%' }"></view>
+					</view>
+
+					<text class="edit-tip">点击左侧分类标签可切换背景色</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="bottom-tabs">
+			<view class="tab-item" :class="{ active: type == 'base' }" @click="switchType('base')">基础</view>
+			<view class="tab-item" :class="{ active: type == 'skin' }" @click="switchType('skin')">皮肤</view>
+		</view>
+
+		<view class="painter-container" v-if="isSnapshot">
+			<l-painter isCanvasToTempFilePath @success="onPainterSuccess"
+				:css="`width:750rpx; padding: 40rpx; background-color:${type == 'skin' ? skinBgColor : '#F8F8F8'};`">
+				<l-painter-view
+					:css="`width: 100%; display: flex; flex-direction: column; position: relative; ${type == 'skin' ? 'padding-top: 120rpx;padding-bottom: 120rpx;' : ''}`">
+					<template v-if="type == 'skin'">
+						<l-painter-text :text="title"
+							css="position: absolute; top: 26rpx; left: 50%; transform: translateX(-50%); font-size: 36rpx; font-weight: bold; color: #333;" />
+						<l-painter-image src="/static/image/other/ranking/happy.png"
+							css="position: absolute;top: 58rpx;right: 24rpx; width: 96rpx; height: 96rpx;" />
+					</template>
+
+					<l-painter-view css="border: 3rpx solid #333; background-color: #fff; width: 100%;">
+						<l-painter-view v-for="(item, index) in tierList" :key="index"
+							:css="`display: flex; min-height: 148rpx; border-bottom: ${index === tierList.length - 1 ? 'none' : '3rpx solid #333'};`">
+							<l-painter-view
+								:css="`width: 176rpx; min-height: 148rpx; background-color: ${item.bgColor}; display: flex; align-items: center; justify-content: center; border-right: 3rpx solid #333;`">
+								<!-- <l-painter-text :text="item.label"
+									:css="`font-size: 52rpx; font-weight: bold; color: ${item.textColor}; ${item.hasStroke ? 'text-shadow: 2rpx 2rpx 0 #000, -2rpx -2rpx 0 #000, 2rpx -2rpx 0 #000, -2rpx 2rpx 0 #000, 0 2rpx 0 #000, 0 -2rpx 0 #000, 2rpx 0 0 #000, -2rpx 0 0 #000;' : ''}`" /> -->
+								<l-painter-image
+									:src="`/static/image/other/ranking/${type == 'skin' ? item.img + '_skin' : item.img}.png`"
+									:css="`height: 60rpx; width: 160rpx;`" mode="heightFix" />
+							</l-painter-view>
+							<l-painter-view
+								:css="`flex: 1; display: flex; align-items: center;height: 148rpx;width:490rpx;padding:0 12rpx;`">
+								<l-painter-image v-for="(img, imgIdx) in item.images" :key="imgIdx" :src="img"
+									css="width: 105rpx; height: 105rpx; margin: 0 8rpx; object-fit: cover;"
+									mode="aspectFill" />
+							</l-painter-view>
+						</l-painter-view>
+					</l-painter-view>
+					<l-painter-view v-if="$isVip()"
+						:css="type == 'skin' ? `position: absolute;bottom: 32rpx;right: 14rpx;` : `position: absolute;top: 50%;right: 50%;transform: translate(50%, -50%);`">
+						<l-painter-image src="/static/image/other/card/shuiyin2.png"
+							css="width: 194rpx;height: 56rpx;" />
+					</l-painter-view>
+					<l-painter-image v-if="type == 'skin'" src="/static/image/other/ranking/sad.png"
+						css="position: absolute;bottom: 76rpx;left: 116rpx; width: 96rpx; height: 96rpx;" />
+				</l-painter-view>
+			</l-painter>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import {
+	ref,
+	reactive,
+	getCurrentInstance
+} from 'vue';
+import {
+	onLoad
+} from '@dcloudio/uni-app';
+
+const {
+	proxy
+} = getCurrentInstance();
+
+const type = ref("base");
+const title = ref("xx排名");
+const skinBgColor = ref("#FFDFDF");
+const skinHue = ref(0); // 记录色相位置
+const isSnapshot = ref(false);
+const isEdit = ref(false);
+const rightButtonText = ref("编辑");
+
+const tierList = ref([{
+	label: '夯',
+	bgColor: '#D5171C',
+	img: 'hang',
+	textColor: '#FFFFFF',
+	hasStroke: true,
+	images: [],
+	width: 60,
+},
+{
+	label: '顶级',
+	bgColor: '#FF6A0B',
+	img: 'dingji',
+	textColor: '#FFFFFF',
+	hasStroke: true,
+	images: [],
+	width: 104,
+},
+{
+	label: '人上人',
+	bgColor: '#FFF06A',
+	img: 'renshangren',
+	textColor: '#FFFFFF',
+	hasStroke: true,
+	images: [],
+	width: 156,
+},
+{
+	label: 'NPC',
+	bgColor: '#FDF5C8',
+	img: 'npc',
+	textColor: '#FFFFFF',
+	hasStroke: true,
+	images: [],
+	width: 110,
+},
+{
+	label: '拉完了',
+	bgColor: '#FFFFFF',
+	img: 'lawanle',
+	textColor: '#FFFFFF',
+	hasStroke: true,
+	images: [],
+	width: 156,
+}
+]);
+
+// --- 生命周期：加载缓存 ---
+onLoad(() => {
+	// 进入页面埋点
+	proxy.$apiUserEvent('all', {
+		type: 'click',
+		key: 'ranking',
+		value: "从夯倒拉排名"
+	})
+	// 获取缓存数据
+	const cache = uni.getStorageSync('ranking_config_data');
+	if (cache) {
+		title.value = cache.title || title.value;
+		type.value = cache.type || type.value;
+		skinBgColor.value = cache.skinBgColor || skinBgColor.value;
+		skinHue.value = cache.skinHue ?? skinHue.value;
+		if (cache.tierList) tierList.value = cache.tierList;
+		console.log(tierList.value);
+	}
+});
+
+// --- 拖拽排序逻辑 ---
+const drag = reactive({
+	tierIndex: -1,
+	imgIdx: -1,
+	startX: 0,
+	startY: 0,
+	moveX: 0,
+	moveY: 0
+});
+
+// 计算拖拽样式
+const getDragStyle = (tIdx, iIdx) => {
+	if (drag.tierIndex === tIdx && drag.imgIdx === iIdx) {
+		return {
+			transform: `translate(${drag.moveX}px, ${drag.moveY}px)`,
+			zIndex: 99,
+			transition: 'none'
+		};
+	}
+	return {
+		transition: 'transform 0.3s ease'
+	};
+};
+
+const onTouchStart = (e, tIdx, iIdx) => {
+	if (!isEdit.value) return;
+	const touch = e.touches[0];
+	drag.tierIndex = tIdx;
+	drag.imgIdx = iIdx;
+	drag.startX = touch.clientX;
+	drag.startY = touch.clientY;
+	drag.moveX = 0;
+	drag.moveY = 0;
+};
+
+const onTouchMove = (e) => {
+	if (drag.tierIndex === -1) return;
+	const touch = e.touches[0];
+	drag.moveX = touch.clientX - drag.startX;
+	drag.moveY = touch.clientY - drag.startY;
+};
+
+const onTouchEnd = () => {
+	if (drag.tierIndex === -1) return;
+
+	const {
+		tierIndex,
+		imgIdx,
+		moveX
+	} = drag;
+	const rowData = tierList.value[tierIndex].images;
+
+	// 估算单个item跨度 (100rpx宽度 + 12rpx间距 ≈ 56px，建议根据真机微调)
+	const itemWidth = 56;
+	const offset = Math.round(moveX / itemWidth);
+	let newIndex = imgIdx + offset;
+
+	// 限制索引范围
+	newIndex = Math.max(0, Math.min(newIndex, rowData.length - 1));
+
+	if (newIndex !== imgIdx) {
+		const temp = rowData.splice(imgIdx, 1)[0];
+		rowData.splice(newIndex, 0, temp);
+	}
+
+	// 重置拖拽状态
+	drag.tierIndex = -1;
+	drag.imgIdx = -1;
+};
+
+// --- 其他业务逻辑 ---
+const chooseImage = (index) => {
+	const currentCount = tierList.value[index].images.length;
+	uni.chooseImage({
+		count: 4 - currentCount,
+		sizeType: ['compressed'],
+		success: (res) => {
+			tierList.value[index].images.push(...res.tempFilePaths);
+		}
+	});
+};
+
+const deleteImage = (tIdx, iIdx) => {
+	const path = tierList.value[tIdx].images[iIdx];
+	removeLocalFile(path); // 物理删除已有文件
+	tierList.value[tIdx].images.splice(iIdx, 1);
+};
+
+const onRightClick = async () => {
+	if (isEdit.value) {
+		uni.showLoading({
+			title: '正在持久化图片...',
+			mask: true
+		});
+		// 1. 深度遍历并持久化所有临时图片
+		for (let tierIdx = 0; tierIdx < tierList.value.length; tierIdx++) {
+			const tier = tierList.value[tierIdx];
+			for (let i = 0; i < tier.images.length; i++) {
+				const path = tier.images[i];
+				// 逻辑逻辑：如果是 static 或者是已经保存的 _doc/usr 路径，则跳过
+				const isStatic = path.startsWith('/static/') || path.startsWith('static/');
+				const isPersistent = path.indexOf('_doc/') !== -1 || path.indexOf('usr/') !== -1;
+
+				if (!isStatic && !isPersistent) {
+					console.log('检测到待持久化图片:', path);
+					const newPath = await saveImageToLocal(path);
+					if (newPath) {
+						tier.images[i] = newPath;
+						console.log('持久化成功，新路径:', newPath);
+					}
+				}
+			}
+		}
+
+		// 2. 全部处理完后，进行数据持久化
+		uni.setStorageSync('ranking_config_data', {
+			title: title.value,
+			type: type.value,
+			skinBgColor: skinBgColor.value,
+			skinHue: skinHue.value,
+			tierList: tierList.value
+		});
+		uni.hideLoading();
+		uni.showToast({
+			title: '已保存',
+			icon: 'none'
+		});
+	}
+	isEdit.value = !isEdit.value;
+	rightButtonText.value = isEdit.value ? "确定" : "编辑";
+};
+
+/**
+ * 将临时图片保存到本地永久目录
+ */
+const saveImageToLocal = (tempFilePath) => {
+	return new Promise((resolve) => {
+		// 如果已经是持久化路径，直接返回
+		if (tempFilePath.indexOf('_doc/') !== -1 || tempFilePath.indexOf('usr/') !== -1) {
+			return resolve(tempFilePath);
+		}
+
+		uni.saveFile({
+			tempFilePath: tempFilePath,
+			success: (res) => {
+				resolve(res.savedFilePath);
+			},
+			fail: (err) => {
+				console.error('本地持久化保存失败:', err);
+				// 提示：H5 环境不支持 saveFile 持久化，仅 App/小程序支持
+				resolve(null);
+			}
+		});
+	});
+};
+
+/**
+ * 物理删除本地已保存的文件
+ */
+const removeLocalFile = (path) => {
+	if (!path) return;
+	// 仅针对非静态资源的本地文件进行删除
+	if (path.indexOf('_doc/') !== -1 || path.indexOf('usr/') !== -1) {
+		uni.removeSavedFile({
+			filePath: path,
+			success: () => console.log('文件物理删除成功:', path),
+			fail: (err) => console.log('文件删除失败:', err)
+		});
+	}
+};
+
+const handleSave = () => {
+	uni.showLoading({
+		title: '生成中...',
+		mask: true
+	});
+	isSnapshot.value = true;
+};
+
+const onPainterSuccess = (path) => {
+	const done = () => {
+		isSnapshot.value = false;
+		uni.hideLoading();
+	};
+	if (!path) return done();
+
+	uni.saveImageToPhotosAlbum({
+		filePath: path,
+		success: () => uni.showToast({
+			title: '保存成功'
+		}),
+		fail: () => uni.showToast({
+			title: '保存失败',
+			icon: 'none'
+		}),
+		complete: done
+	});
+};
+
+const switchType = (val) => {
+	type.value = val;
+	if (val == 'skin') {
+		tierList.value[0].bgColor = '#F3575B'
+		tierList.value[1].bgColor = '#FF9B5B'
+		tierList.value[2].bgColor = '#FFF59E'
+		tierList.value[3].bgColor = '#FFFBE1'
+		tierList.value[4].bgColor = '#FFFFFF'
+	} else {
+		tierList.value[0].bgColor = '#D5171C'
+		tierList.value[1].bgColor = '#FF6A0B'
+		tierList.value[2].bgColor = '#FFF06A'
+		tierList.value[3].bgColor = '#FDF5C8'
+		tierList.value[4].bgColor = '#FFFFFF'
+	}
+
+	// 切换时由于改变了 type，立即同步到缓存中以便记录最后选择的模式
+	const cache = uni.getStorageSync('ranking_config_data') || {};
+	cache.type = val;
+	uni.setStorageSync('ranking_config_data', cache);
+}
+
+/**
+ * 循环切换行背景色 (编辑模式下)
+ */
+const changeRowBgColor = (index) => {
+	if (!isEdit.value) return;
+	const colors = ['#D5171C', '#FF6A0B', '#FFF06A', '#FDF5C8', '#FFFFFF', '#1777FF', '#333333'];
+	const curr = tierList.value[index].bgColor;
+	let nextIdx = (colors.indexOf(curr.toUpperCase()) + 1) % colors.length;
+	if (nextIdx === -1) nextIdx = 0;
+	tierList.value[index].bgColor = colors[nextIdx];
+
+	// 自动适配文字颜色 (深色背景用白色，浅色用黑色)
+	const darkColors = ['#D5171C', '#1777FF', '#333333'];
+	tierList.value[index].textColor = darkColors.includes(colors[nextIdx]) ? '#FFFFFF' : '#FFFFFF';
+};
+
+/**
+ * 处理色域滑动
+ */
+const handleHueTouch = (e) => {
+	const touch = e.touches[0];
+	uni.createSelectorQuery().select('.spectrum-picker').boundingClientRect(rect => {
+		if (rect) {
+			const x = Math.max(0, Math.min(touch.clientX - rect.left, rect.width));
+			skinHue.value = Math.round((x / rect.width) * 360);
+
+			// 1. 获取 HSL 的数值
+			const h = skinHue.value;
+			const s = 70;
+			const l = 90;
+
+			// 2. 转换为 16 进制色值
+			skinBgColor.value = hslToHex(h, s, l);
+		}
+	}).exec();
+};
+
+/**
+ * HSL 转 Hex 工具函数
+ */
+function hslToHex(h, s, l) {
+	l /= 100;
+	const a = s * Math.min(l, 1 - l) / 100;
+	const f = n => {
+		const k = (n + h / 30) % 12;
+		const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+		return Math.round(255 * color).toString(16).padStart(2, '0');
+	};
+	return `#${f(0)}${f(8)}${f(4)}`.toUpperCase();
+}
+</script>
+
+<style lang="less" scoped>
+.ranking-page {
+	min-height: 100vh;
+	background-color: #F8F8F8;
+	padding-bottom: 200rpx;
+}
+
+.content-container {
+	position: relative;
+	padding: 12rpx 24rpx;
+
+}
+
+.table-box {
+	position: relative;
+
+	.watermark {
+		position: absolute;
+		height: 56rpx;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		z-index: 99;
+	}
+}
+
+.ranking-table {
+	border: 3rpx solid #333;
+	background-color: #fff;
+}
+
+.ranking-row {
+	display: flex;
+	min-height: 148rpx;
+	border-bottom: 3rpx solid #333;
+
+	&:last-child {
+		border-bottom: none;
+	}
+}
+
+.label-box {
+	width: 176rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-right: 3rpx solid #333;
+}
+
+.label-text {
+	font-size: 48rpx;
+	font-weight: bold;
+
+	&.with-stroke {
+		text-shadow: 2rpx 2rpx 0 #000, -2rpx -2rpx 0 #000, 2rpx -2rpx 0 #000, -2rpx 2rpx 0 #000;
+	}
+}
+
+.items-box {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	padding: 14rpx 12rpx;
+	flex-wrap: wrap;
+}
+
+.item-wrapper {
+	width: 105rpx;
+	height: 105rpx;
+	position: relative;
+	margin: 0 6rpx;
+	touch-action: none;
+	/* 关键：禁止浏览器默认触摸行为 */
+
+	&.is-dragging {
+		opacity: 0.7;
+		scale: 1.1;
+		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
+	}
+}
+
+.item-img {
+	width: 100%;
+	height: 100%;
+	border-radius: 4rpx;
+}
+
+.del-btn {
+	position: absolute;
+	top: -12rpx;
+	right: -12rpx;
+	width: 36rpx;
+	height: 36rpx;
+	background: #ff4d4f;
+	color: #fff;
+	border-radius: 50%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 24rpx;
+	z-index: 10;
+}
+
+.add-btn {
+	width: 100rpx;
+	height: 100rpx;
+	background: #eee;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 4rpx;
+
+	.add-icon {
+		width: 40rpx;
+		height: 40rpx;
+	}
+}
+
+.save-btn {
+	margin-top: 60rpx;
+	width: 400rpx;
+	background: #1777FF;
+	color: #fff;
+	border-radius: 50rpx;
+}
+
+.bottom-tabs {
+	position: fixed;
+	bottom: 40rpx;
+	bottom: calc(32rpx + env(safe-area-inset-bottom));
+	bottom: calc(32rpx + constant(safe-area-inset-bottom));
+	width: 100%;
+	display: flex;
+	justify-content: center;
+
+	.tab-item {
+		width: 180rpx;
+		height: 80rpx;
+		line-height: 80rpx;
+		text-align: center;
+		background: #fff;
+		margin: 0 20rpx;
+		border-radius: 10rpx;
+
+		&.active {
+			border: 4rpx solid #1777FF;
+			color: #1777FF;
+		}
+	}
+}
+
+.skin-box {
+	position: relative;
+	padding: 120rpx 12rpx;
+	background-color: #FFDFDF;
+
+	.watermark {
+		height: 56rpx !important;
+		position: absolute;
+		right: 14rpx !important;
+		bottom: 32rpx !important;
+	}
+
+	.title {
+		width: 260px;
+		position: absolute;
+		top: 30rpx;
+		left: 50%;
+		transform: translateX(-50%);
+		font-weight: bold;
+		text-align: center;
+		font-size: 36rpx;
+		color: #333;
+	}
+
+	.title-input {
+		min-width: 260px;
+		background: rgba(255, 255, 255, 0.5);
+		border-radius: 8rpx;
+		padding: 4rpx 12rpx;
+		border: 1rpx dashed #1777FF;
+	}
+
+	.title-input {
+		background: rgba(255, 255, 255, 0.5);
+		border-radius: 8rpx;
+		padding: 4rpx 12rpx;
+		width: 300rpx;
+		border: 1rpx dashed #1777FF;
+	}
+
+	.img {
+		position: absolute;
+		width: 90rpx;
+		height: 90rpx;
+	}
+
+	.happy {
+		top: 40rpx;
+		right: 30rpx;
+	}
+
+	.sad {
+		bottom: 60rpx;
+		left: 100rpx;
+	}
+}
+
+.save-action {
+	margin-top: 60rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding-bottom: 60rpx;
+}
+
+.bottom-edit-actions {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 100%;
+}
+
+.edit-tip {
+	font-size: 22rpx;
+	color: #999;
+	margin-top: 10rpx;
+}
+
+.color-picker {
+	display: flex;
+	gap: 16rpx;
+	background: #fff;
+	padding: 12rpx 20rpx;
+	border-radius: 40rpx;
+	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+}
+
+.color-picker-wrapper {
+	display: flex;
+	align-items: center;
+	margin: 12rpx 0;
+}
+
+.hex-input {
+	width: 150rpx;
+	height: 56rpx;
+	background: #fff;
+	border-radius: 28rpx;
+	font-size: 24rpx;
+	text-align: center;
+	color: #333;
+	border: 1rpx solid #eee;
+	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+}
+
+.spectrum-picker {
+	width: 600rpx;
+	height: 32rpx;
+	background: #fff;
+	border-radius: 16rpx;
+	padding: 4rpx;
+	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+	position: relative;
+	margin: 12rpx 0;
+}
+
+.slider-thumb {
+	position: absolute;
+	top: 50%;
+	width: 38rpx;
+	height: 38rpx;
+	background: #fff;
+	border-radius: 50%;
+	transform: translate(-50%, -50%);
+	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
+	border: 2rpx solid #fff;
+	pointer-events: none;
+}
+
+.spectrum-bar {
+	width: 100%;
+	height: 100%;
+	border-radius: 12rpx;
+	background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+}
+
+.color-dot {
+	width: 32rpx;
+	height: 32rpx;
+	border-radius: 50%;
+	border: 2rpx solid #fff;
+	box-shadow: 0 0 4rpx rgba(0, 0, 0, 0.2);
+	margin: 0 10rpx;
+}
+
+.painter-container {
+	position: fixed;
+	left: -9999rpx;
+}
+</style>
\ No newline at end of file
diff --git a/pages/other/ranking/ranking.vue.mine b/pages/other/ranking/ranking.vue.mine
new file mode 100644
index 0000000..208d9a8
--- /dev/null
+++ b/pages/other/ranking/ranking.vue.mine
@@ -0,0 +1,136 @@
+<script setup>
+import { ref } from 'vue';
+
+const list = ref([
+  { label: '澶?, bgColor: '#BE0012', textColor: '#FFFFFF', hasShadow: true },
+  { label: '椤剁骇', bgColor: '#F17415', textColor: '#FFFFFF', hasShadow: true },
+  { label: '浜轰笂浜?, bgColor: '#F9E962', textColor: '#FFFFFF', hasShadow: true },
+  { label: 'NPC', bgColor: '#FDF5C0', textColor: '#555555', hasShadow: false },
+  { label: '鎷夊畬浜?, bgColor: '#FFFFFF', textColor: '#555555', hasShadow: false }
+]);
+
+const handleAdd = (index) => {
+  console.log('娣诲姞椤?, index);
+};
+</script>
+
+<template>
+  <view class="ranking-container">
+    <view class="ranking-table">
+      <view v-for="(item, index) in list" :key="index" class="ranking-row">
+        <!-- 鏍囩鍒?-->
+        <view class="label-col" :style="{ backgroundColor: item.bgColor }">
+          <text class="label-text" :class="{ 'with-shadow': item.hasShadow }" :style="{ color: item.textColor }">
+            {{ item.label }}
+          </text>
+        </view>
+        
+        <!-- 鍐呭鍒?-->
+        <view class="content-col">
+          <!-- 浠呭湪绗竴琛屽睍绀烘紨绀哄浘鐗?-->
+          <template v-if="index === 0">
+            <view class="item-box">
+              <image src="/static/images/food.jpg" mode="aspectFill" class="item-img" />
+            </view>
+          </template>
+          <!-- 娣诲姞鎸夐挳 -->
+          <view class="add-btn" @tap="handleAdd(index)">
+            <text class="plus-icon">+</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="less">
+.ranking-container {
+  padding: 30rpx 20rpx;
+  background-color: #F8F8F8;
+  min-height: 100vh;
+}
+
+.ranking-table {
+  border: 2rpx solid #333;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+}
+
+.ranking-row {
+  display: flex;
+  min-height: 180rpx;
+  border-bottom: 2rpx solid #333;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.label-col {
+  width: 200rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-right: 2rpx solid #333;
+  padding: 0 10rpx;
+  box-sizing: border-box;
+}
+
+.label-text {
+  font-size: 52rpx;
+  font-weight: bold;
+  text-align: center;
+  line-height: 1.2;
+  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
+  
+  &.with-shadow {
+    /* 寮哄姏榛戣壊鎻忚竟锛屾ā鎷?:1鏁堟灉 */
+    text-shadow: 
+      2rpx 2rpx 0 #000, 
+      -2rpx -2rpx 0 #000, 
+      2rpx -2rpx 0 #000, 
+      -2rpx 2rpx 0 #000,
+      0 2rpx 0 #000,
+      0 -2rpx 0 #000,
+      2rpx 0 0 #000,
+      -2rpx 0 0 #000;
+  }
+}
+
+.content-col {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  padding: 20rpx;
+  gap: 20rpx;
+}
+
+.item-box {
+  width: 140rpx;
+  height: 140rpx;
+  background-color: #eee;
+  border: 1rpx solid #ddd;
+}
+
+.item-img {
+  width: 100%;
+  height: 100%;
+}
+
+.add-btn {
+  width: 140rpx;
+  height: 140rpx;
+  background-color: #F2F2F2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  .plus-icon {
+    font-size: 70rpx;
+    color: #DBDBDB;
+    font-weight: 200;
+  }
+}
+</style>
diff --git a/pages/shopping/jingdong/add-order/add-order.vue b/pages/shopping/jingdong/add-order/add-order.vue
new file mode 100644
index 0000000..3737614
--- /dev/null
+++ b/pages/shopping/jingdong/add-order/add-order.vue
@@ -0,0 +1,1804 @@
+<template>
+	<view>
+		<NavBar :title="navTitle" bgColor="#F2F3F7" isRightButton @right-click="onConfirm"></NavBar>
+		<view class="page-container">
+			<view class="tab-box" v-if="!isEditMode">
+				<view class="tab" :class="{ active: item.key == activeTab }" v-for="item in shoppingType"
+					:key="item.key" @click="switchTab(item)">
+					<text>{{ item.label }}</text>
+				</view>
+			</view>
+
+			<!-- 等待付款 -->
+			<template v-if="activeTab == 'dengdaifukuan'">
+				<view class="tip-box">
+					<picker mode="multiSelector" :range="timeRange" :value="timeValue" @change="handleTimeChange">
+						<text>还剩
+							<text style="color: #DD223F;font-weight: 500; margin-left: 10rpx;">{{ order.statusDesc
+							}}</text>
+							<image class="edit-icon" src="/static/image/common/edit.png"></image>
+							订单自动取消
+						</text>
+					</picker>
+				</view>
+				<view class="address-info">
+					<view class="flex-1">
+						<view>
+							<image class="location" src="/static/image/shopping/jingdong/detail/location.png">
+							</image>
+							<view class="name-box animate-scale">
+								<auto-width-input v-model="order.consignee" fontSize="30rpx" fontWeight="500"
+									placeholder="姓名" show-edit />
+							</view>
+							<view class="number-box animate-scale">
+								<auto-width-input v-model="order.phone" fontSize="26rpx" placeholder="电话"
+									color="#8C8C8C" show-edit />
+							</view>
+						</view>
+						<view class="address-box animate-scale">
+							<auto-width-input v-model="order.fullAddress" type="textarea" fontSize="26rpx"
+								placeholder="地址" color="#8C8C8C" show-edit />
+						</view>
+					</view>
+					<!-- <view class="edit-btn">
+					<text>修改</text>
+				</view> -->
+				</view>
+			</template>
+
+			<!-- 正在出库 -->
+			<template v-if="activeTab == 'zhengzaichuku'">
+				<view class="time-box" @click="onClickTrackingTime">
+					<text style="color: #87868E;">出库时间
+						<text style="color: #1A1A1A;font-weight: 500; margin-left: 10rpx;">{{
+							order.trackingTime }}</text>
+						<image class="edit-icon" src="/static/image/common/edit.png"></image>
+					</text>
+				</view>
+				<view class="outbound-info">
+					<image class="outbound-icon shrink-0" src="/static/image/shopping/jingdong/detail/xiadan.png"
+						mode="aspectFit">
+					</image>
+					<view class="outbound-info-content">
+						<view class="title-info">
+							<view class="flex flex-1">
+								<text style="margin-right: 8rpx;" class="shrink-0">已下单 </text>
+								<view class="flex-1 animate-scale flex-align-center">
+									<auto-width-input v-model="order.trackingDesc" fontSize="30rpx" fontWeight="500"
+										placeholder="预计送达时间" color="#1A1A1A" type="text" show-edit />
+								</view>
+							</view>
+							<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
+						</view>
+						<view class="animate-scale desc flex-align-center">
+							<auto-width-input class="desc" v-model="order.trackingDesc2" fontSize="26rpx"
+								placeholder="运输信息" color="#8C8C8C" type="textarea" show-edit />
+							<!-- <text >{{ order.trackingDesc2 }}</text> -->
+						</view>
+						<view class="address-box">
+							<view class="top">
+								<!-- <text class="address">华哈哈哈哈哈哈哈哈哈2栋 22-1</text> -->
+								<view class="address flex-1 animate-scale flex-align-center">
+									<auto-width-input v-model="order.fullAddress" type="textarea" fontWeight="500"
+										fontSize="30rpx" placeholder="收货地址" color="#1A1A1A" show-edit />
+								</view>
+								<!-- <view class="edit-btn" style="margin-left: 16rpx;">修改</view> -->
+							</view>
+							<view class="flex" style="margin-top: 8rpx;">
+								<view class="phone animate-scale flex-align-center" style="margin-right: 8rpx;">
+									<auto-width-input v-model="order.consignee" type="text" fontSize="26rpx"
+										placeholder="收货人" color="#8C8C8C" show-edit />
+								</view>
+								<view class="phone animate-scale flex-align-center">
+									<auto-width-input v-model="order.phone" type="text" fontSize="26rpx"
+										placeholder="电话" color="#8C8C8C" show-edit />
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</template>
+
+			<!-- 已取消 -->
+			<template v-if="activeTab == 'yiquxiao'">
+				<view class="cancel-progress-box">
+					<view class="cancel-content">
+						<view class="title-row">
+							<view class="left">
+								<image class="icon" src="/static/image/shopping/jingdong/detail/tuikuan.png"
+									mode="aspectFit">
+								</image>
+								<text class="title">取消/退款进度</text>
+							</view>
+
+							<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
+						</view>
+						<text class="desc">您的订单已取消，请查看取消进度详情。</text>
+					</view>
+				</view>
+
+				<view class="order-status-box">
+					<view class="status-main">
+						<image class="status-icon" src="/static/image/shopping/jingdong/detail/xiadan.png"
+							mode="aspectFit">
+						</image>
+						<view class="status-content">
+							<view class="title-row">
+								<text class="title">已下单</text>
+								<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
+							</view>
+						</view>
+					</view>
+					<view class="progress-box">
+						<text class="desc">您提交了订单，请等待系统确认</text>
+					</view>
+					<view class="bottom-box">
+						<view class="dot"></view>
+						<view class="flex-1">
+							<view class="address flex-1 animate-scale flex-align-center w100">
+								<auto-width-input class="auto-width" v-model="order.fullAddress" type="textarea"
+									fontWeight="500" fontSize="30rpx" placeholder="收货地址" color="#1A1A1A" show-edit />
+							</view>
+							<view class="flex" style="margin-top: 8rpx;">
+								<view class="phone animate-scale flex-align-center" style="margin-right: 8rpx;">
+									<auto-width-input v-model="order.consignee" type="text" fontSize="26rpx"
+										placeholder="收货人" color="#8C8C8C" show-edit />
+								</view>
+								<view class="phone animate-scale flex-align-center">
+									<auto-width-input v-model="order.phone" type="text" fontSize="26rpx"
+										placeholder="电话" color="#8C8C8C" show-edit />
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</template>
+
+			<!-- 签收 -->
+			<template v-if="activeTab == 'yiqianshou'">
+				<view class="time-box" @click="onClickTrackingTime">
+					<text style="color: #87868E;">签收时间
+						<text style="color: #1A1A1A;font-weight: 500; margin-left: 10rpx;">{{
+							order.trackingTime }}</text>
+						<image class="edit-icon" src="/static/image/common/edit.png"></image>
+					</text>
+				</view>
+				<view class="order-status-box">
+					<view class="status-main">
+
+						<image class="status-icon" src="/static/image/shopping/jingdong/detail/qianshou.png"
+							mode="aspectFit" @click="chooseCourierImg">
+						</image>
+						<view class="status-content">
+							<view class="title-row">
+								<text class="title" style="color: #1A1A1A;">已签收</text>
+								<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
+							</view>
+						</view>
+					</view>
+					<view class="progress-box" style="min-height: 192rpx;">
+						<view class="animate-scale desc flex-align-center shrink-0">
+							<auto-width-input class="desc" v-model="order.trackingDesc2" fontSize="26rpx"
+								placeholder="运输信息" color="#8C8C8C" type="textarea" show-edit />
+						</view>
+						<view class="upload-box flex1 w100">
+							<view class="info-box flex-1 w100">
+								<view class="image-box shrink-0" @click="chooseCourierImg">
+									<image v-if="order.courierImg" class="w100 h100" :src="order.courierImg"
+										mode="aspectFit">
+									</image>
+									<view v-else style="background-color: #EEEEEE;" class="w100 h100 flex-center">
+										<image style="width: 30rpx;height: 30rpx;" src="/static/image/common/add.png">
+										</image>
+									</view>
+								</view>
+								<view class="phone animate-scale flex-align-center flex-1"
+									style="margin-right: 8rpx;width: 100px;">
+									<auto-width-input class="auto-input" v-model="order.courier" type="text"
+										fontSize="26rpx" placeholder="快递员" color="#8C8C8C" show-edit />
+								</view>
+							</view>
+							<view class="btn-box  shrink-0">
+								<view class="btn grey">联系Ta</view>
+								<view class="btn red">打赏Ta</view>
+							</view>
+
+						</view>
+					</view>
+					<view class="bottom-box">
+						<view class="dot"></view>
+						<view class="flex-1">
+							<view class="address flex-1 animate-scale flex-align-center w100">
+								<auto-width-input class="auto-width" v-model="order.fullAddress" type="textarea"
+									fontWeight="500" fontSize="30rpx" placeholder="收货地址" color="#1A1A1A" show-edit />
+							</view>
+							<view class="flex" style="margin-top: 8rpx;">
+								<view class="phone animate-scale flex-align-center" style="margin-right: 8rpx;">
+									<auto-width-input v-model="order.consignee" type="text" fontSize="26rpx"
+										placeholder="收货人" color="#8C8C8C" show-edit />
+								</view>
+								<view class="phone animate-scale flex-align-center">
+									<auto-width-input v-model="order.phone" type="text" fontSize="26rpx"
+										placeholder="电话" color="#8C8C8C" show-edit />
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</template>
+
+			<!-- 商品类型 (自营,京东,其它)-->
+			<view class="time-box" style="margin-top: 16rpx;">
+				<view style="color: #87868E;" class="flex-justify-between flex-align-center">
+					<text>商店类型</text>
+					<picker class="flex-1" style="display: flex;justify-content: flex-end;" :range="shopTypeOptions"
+						:value="shopTypeIndex" @change="onShopTypeChange">
+						<view class="flex-align-center">
+							<text style="color: #1A1A1A; margin-right: 8rpx;">{{ shopTypeOptions[shopTypeIndex]
+							}}</text>
+							<uni-icons type="right" size="14" color="#87868E"></uni-icons>
+						</view>
+					</picker>
+				</view>
+			</view>
+
+			<!-- 商品卡片 -->
+			<view class="product-card">
+				<view class="title-box">
+					<view class="left-box">
+						<image v-if="order.shopType == 'self'" class="img"
+							src="/static/image/shopping/jingdong/detail/ziyin.png">
+						</image>
+						<image v-if="order.shopType == 'jd'" style="width: 32rpx;height: 32rpx;margin-right: 12rpx;"
+							src="/static/image/shopping/jingdong/JD.png">
+						</image>
+						<view class="title flex animate-scale">
+							<auto-width-input v-model="order.shopName" fontSize="26rpx" fontWeight="700"
+								placeholder="请输入店铺名称" color="#1A1A1A" show-edit />
+						</view>
+					</view>
+					<uni-icons class="right-icon" size="14" color="#1A1A1A" type="right"></uni-icons>
+				</view>
+				<view class="product-info">
+					<view class="image-box" @click="chooseImage">
+						<view v-if="!order.products[0].image" class="w100 h100 flex flex-center"
+							style="background-color: #eeeeee;">
+							<image style="width: 60rpx;height: 60rpx;" src="/static/image/common/add.png"></image>
+						</view>
+						<image v-else class="w100 h100" :src="order.products[0].image"></image>
+					</view>
+					<view class="info-box">
+						<view class="name flex animate-scale">
+							<auto-width-input class="name" v-model="order.products[0].title" fontSize="26rpx"
+								fontWeight="700" placeholder="商品标题名称" color="#1A1A1A" show-edit type="textarea" />
+						</view>
+						<view class="flex flex-align-center animate-scale">
+							<auto-width-input class="desc" v-model="order.products[0].desc" type="textarea"
+								fontSize="22rpx" placeholder="商品描述" color="#87868E" show-edit />
+						</view>
+
+						<view class="flex flex-align-center animate-scale">
+							<auto-width-input class="desc" v-model="order.products[0].service" type="textarea"
+								fontSize="22rpx" placeholder="请输入服务" color="#A96F24" show-edit />
+						</view>
+						<view class="flex flex-align-center animate-scale wx-font-medium"
+							style="align-items: baseline;margin-top: 10rpx;">
+							<text style="font-size: 28rpx;font-weight: 500;">￥</text>
+							<auto-width-input class="flex-1 wx-font-medium" v-model="order.products[0].price"
+								type="number" fontSize="36rpx" placeholder="请输入商品价格" color="#1A1A1A" fontWeight="500"
+								show-edit />
+						</view>
+					</view>
+					<!-- <view class="price-box">
+					<view class="price wx-font-medium flex-align-center animate-scale">￥<text
+							style="font-size: 36rpx;">{{
+								order.totalPrice }}</text>
+					</view>
+				</view> -->
+				</view>
+				<view v-if="activeTab == 'dengdaifukuan' || activeTab == 'yiquxiao'" class="btn-box flex"
+					style="margin-top: 60rpx;">
+					<view class="left flex-1 flex-center " style="border-right : 0.5px solid #D8D8D8;">
+						<image class="img" src="/static/image/shopping/jingdong/detail/dianpukefu.png"></image>
+						<view class="name flex-column flex-align-center">
+							<text>店铺客服</text>
+							<text v-if="activeTab == 'dengdaifukuan'" class="text">商品/活动</text>
+						</view>
+					</view>
+					<view class="right flex-1 flex-center ">
+						<image class="img" src="/static/image/shopping/jingdong/detail/jingdongkefu.png"></image>
+						<view class="name flex-column flex-align-center">
+							<text>京东客服</text>
+							<text v-if="activeTab == 'dengdaifukuan'" class="text">物流/平台</text>
+						</view>
+					</view>
+				</view>
+				<view v-else class="btn-box">
+					<view class="btn" :class="{ red: btn == '送朋友' }" v-for="btn in btnList">
+						<image v-if="btn == '送朋友'" class="icon" src="/static/image/shopping/jingdong/detail/gift.png">
+						</image>
+						{{ btn }}
+					</view>
+				</view>
+			</view>
+
+			<!-- 商品总价 -->
+			<view v-if="activeTab == 'dengdaifukuan' || activeTab == 'yiquxiao'" class="product-price">
+				<view class="title flex-justify-between">
+					<text>商品总价</text>
+					<view class="wx-font-medium flex flex-align-center"><text
+							style="font-size: 32rpx;font-weight: 500;">￥</text>
+						<text style="font-size: 32rpx;font-weight: 500;">{{ order.products[0].price }}</text>
+						<!-- <auto-width-input class="wx-font-medium" v-model="order.products[0].price" fontSize="32rpx"
+						placeholder="商品总价" color="#1A1A1A" fontWeight="500" type="number" show-edit /> -->
+					</view>
+				</view>
+				<view class="item flex-justify-between">
+					<text class="label">运费</text>
+					<view class="wx-font-medium flex flex-align-center">￥
+						<auto-width-input class="wx-font-medium" v-model="order.carriage" fontSize="32rpx"
+							placeholder="运费" color="#1A1A1A" fontWeight="500" type="number" show-edit />
+					</view>
+				</view>
+				<view class="price">需付款 <text class="number wx-font-medium">
+						￥{{ (Number(order.products[0].price) + Number(order.carriage)) ?
+							(Number(order.products[0].price)
+								+ Number(order.carriage)) :
+							0 }}</text></view>
+			</view>
+
+			<!-- 订单信息 -->
+			<view class="order-info-box">
+				<view class="title flex-justify-between">
+					<text>订单信息</text>
+				</view>
+				<view v-if="activeTab != 'dengdaifukuan' && activeTab != 'yiquxiao'" class="item flex-justify-between">
+					<text class="label shrink-0">实付款</text>
+					<view class="flex-1 flex-align-center"
+						style="justify-content: flex-end;width: 300rpx;overflow-x: auto;margin-left: 20rpx;">
+						<view class="wx-font-medium flex flex-align-center">
+							<view class="flex" style="align-items: baseline;color: #FF4444;">
+								<text>共减￥</text>
+								<auto-width-input class="wx-font-medium" v-model="order.discount" fontSize="32rpx"
+									placeholder="优惠价格" color="#F10F1A" fontWeight="500" type="number" show-edit />
+							</view>
+						</view>
+						<view class="wx-font-medium flex flex-align-center">
+							<view class="flex" style="align-items: baseline;color: #1A1A1A;">
+								<text>合计￥</text>
+								<auto-width-input class="wx-font-medium" v-model="order.totalPrice" fontSize="36rpx"
+									placeholder="合计总价" color="#1A1A1A" fontWeight="500" type="number" show-edit />
+							</view>
+						</view>
+					</view>
+
+				</view>
+				<view class="order-info">
+					<view class="item flex-justify-between" v-for="item in order.orderInfo"
+						@click="onClickItemInfo(item)">
+						<text class="label shrink-0">{{ item.label }}</text>
+						<view class="flex-1 flex-align-center"
+							style="justify-content: flex-end;width: 300rpx;overflow-x: auto;margin-left: 20rpx;">
+							<auto-width-input class="value" v-model="item.value" fontSize="26rpx" color="#1A1A1A"
+								:type="item.type ? item.type : 'text'" show-edit />
+						</view>
+
+					</view>
+				</view>
+				<view class="delivery-info">
+					<view class="item flex-justify-between" v-for="item in order.sendType"
+						@click="onClickItemInfo(item)">
+						<text class="label shrink-0">{{ item.label }}</text>
+						<view class="flex-1 flex-align-center"
+							style="justify-content: flex-end;width: 300rpx;overflow-x: auto;margin-left: 20rpx;">
+							<auto-width-input class="value" v-model="item.value" fontSize="26rpx" color="#1A1A1A"
+								:type="item.type ? item.type : 'text'" show-edit />
+						</view>
+
+					</view>
+				</view>
+			</view>
+
+		</view>
+	</view>
+
+	<uni-popup ref="timepopup" type="bottom">
+		<!-- 时间选择器 -->
+		<view v-if="selectItemInfo.type == 'time'" class="timeBox">
+			<view class="titleBox">
+				<view class="title" @click="closeTimePicker">
+					取消
+				</view>
+				<view class="btn" @click="settmes">
+					确定
+				</view>
+			</view>
+			<DateTimePicker :defaultDate="datePickerData.selectDate" :minDate="datePickerData.startDate"
+				:maxDate="datePickerData.endDate" :mode="4" @onChange="onChangeStartDate" />
+		</view>
+
+		<!-- 时间段选择器 -->
+		<view v-if="selectItemInfo.type == 'timeRange'" class="timeBox">
+			<view class="titleBox">
+				<view class="title" @click="closeTimePicker">
+					取消
+				</view>
+				<view class="btn" @click="settmes">
+					确定
+				</view>
+			</view>
+			<view class="picker-container">
+				<picker-view class="range-picker-view" :value="timeRangePickerData.rangeSelect"
+					@change="onTimeRangeChange">
+					<picker-view-column>
+						<view class="picker-item" v-for="(item, index) in timeRangePickerData.rangeCols[0]"
+							:key="index">
+							{{ item }}
+						</view>
+					</picker-view-column>
+					<picker-view-column>
+						<view class="picker-item" v-for="(item, index) in timeRangePickerData.rangeCols[1]"
+							:key="index">
+							{{ item }}
+						</view>
+					</picker-view-column>
+					<picker-view-column>
+						<view class="picker-item" v-for="(item, index) in timeRangePickerData.rangeCols[2]"
+							:key="index">
+							{{ item }}
+						</view>
+					</picker-view-column>
+					<picker-view-column>
+						<view class="picker-item" v-for="(item, index) in timeRangePickerData.rangeCols[3]"
+							:key="index">
+							{{ item }}
+						</view>
+					</picker-view-column>
+					<picker-view-column>
+						<view class="picker-item" v-for="(item, index) in timeRangePickerData.rangeCols[4]"
+							:key="index">
+							{{ item }}
+						</view>
+					</picker-view-column>
+				</picker-view>
+			</view>
+		</view>
+	</uni-popup>
+</template>
+
+<script setup>
+import { onLoad } from "@dcloudio/uni-app";
+import { ref, computed, watch, onMounted, nextTick } from "vue";
+import NavBar from "@/components/nav-bar/nav-bar.vue";
+import { shoppingType, shoppingClassfiy } from "../json/order.json";
+import AutoWidthInput from "@/components/common/auto-width-input.vue";
+import DateTimePicker from '@/components/dengrq-datetime-picker/dateTimePicker/index.vue';
+import { stringUtil } from '@/utils/common.js';
+
+const activeTab = ref("dengdaifukuan");
+const isEditMode = ref(false);
+const currentId = ref('');
+const navTitle = computed(() => isEditMode.value ? "修改订单" : "新增订单");
+
+const shopTypeOptions = ['自营商店', '京东商店', '其它'];
+const shopTypeValues = ['self', 'jd', 'none'];
+const shopTypeIndex = computed(() => {
+	if (!order.value || !order.value.shopType) return 2; // 默认“其它”
+	const idx = shopTypeValues.indexOf(order.value.shopType);
+	return idx > -1 ? idx : 2;
+});
+
+const statusBarHeight = ref(0);
+const timepopup = ref();
+
+const selectItemInfo = ref({
+	type: '',
+	value: '',
+	label: '',
+	id: ''
+});
+
+const datePickerData = ref({
+	selectDate: "",
+	startDate: "",
+	endDate: "",
+});
+
+// 时间段选择器数据
+const timeRangePickerData = ref({
+	rangeCols: [[], [], [], [], []], // 年, 月, 日, 开始时间, 结束时间
+	rangeSelect: [0, 5, 14, 9, 22]    // 2026, 06, 15, 09:00, 22:00 (基于索引)
+});
+
+// 初始化时间段选择器的列数据
+const initTimeRangeColumns = () => {
+	const years = [];
+	const now = new Date();
+	const currentYear = now.getFullYear();
+	for (let i = currentYear - 5; i <= currentYear + 5; i++) {
+		years.push(i + '年');
+	}
+
+	const months = [];
+	for (let i = 1; i <= 12; i++) {
+		months.push(i.toString().padStart(2, '0') + '月');
+	}
+
+	const days = [];
+	for (let i = 1; i <= 31; i++) {
+		days.push(i.toString().padStart(2, '0') + '日');
+	}
+
+	const hours = [];
+	for (let i = 0; i < 24; i++) {
+		hours.push(i.toString().padStart(2, '0') + ':00');
+	}
+
+	timeRangePickerData.value.rangeCols = [years, months, days, hours, hours];
+
+	// 根据当前日期设置默认索引 (2026-06-15 示例或当前日期)
+	const yearIdx = years.indexOf('2026年') !== -1 ? years.indexOf('2026年') : 5;
+	timeRangePickerData.value.rangeSelect = [yearIdx, 5, 14, 9, 22];
+};
+
+onMounted(() => {
+	const info = uni.getSystemInfoSync();
+	statusBarHeight.value = info.statusBarHeight || 0;
+	initTimeRangeColumns();
+});
+const order = ref(shoppingClassfiy[activeTab.value]);
+
+// 初始化默认地址信息，防止渲染时为空
+if (order.value) {
+	order.value.consignee = order.value.consignee;
+	order.value.phone = order.value.phone;
+	order.value.fullAddress = order.value.fullAddress;
+}
+
+// 时间选择器数据
+const timeRange = ref([
+	Array.from({ length: 24 }, (_, i) => (i < 10 ? '0' + i : i + '')), // 时
+	Array.from({ length: 60 }, (_, i) => (i < 10 ? '0' + i : i + '')),  // 分
+	Array.from({ length: 60 }, (_, i) => (i < 10 ? '0' + i : i + ''))   // 秒
+]);
+
+// 当前选择器索引
+const timeValue = computed(() => {
+	if (!order.value || !order.value.statusDesc) return [0, 0, 0];
+	const parts = order.value.statusDesc.split(' : ');
+	if (parts.length !== 3) return [0, 0, 0];
+	return [
+		parseInt(parts[0]) || 0,
+		parseInt(parts[1]) || 0,
+		parseInt(parts[2]) || 0
+	];
+});
+
+/**
+ * 修改倒计时时间
+ */
+const handleTimeChange = (e) => {
+	const val = e.detail.value;
+	const h = timeRange.value[0][val[0]];
+	const m = timeRange.value[1][val[1]];
+	const s = timeRange.value[2][val[2]];
+	order.value.statusDesc = `${h} : ${m} : ${s}`;
+};
+
+onLoad((options) => {
+	console.log('页面参数接收:', options);
+	const editFlag = String(options.isEdit) === 'true' || options.isEdit === true;
+
+	if (editFlag && options.id) {
+		// 1. 设置编辑标志
+		isEditMode.value = true;
+		currentId.value = String(options.id);
+
+		// 2. 从缓存加载数据回填
+		const list = uni.getStorageSync('jingdongShopping') || [];
+		const editData = list.find(item => String(item.id) === String(options.id));
+
+		if (editData) {
+			order.value = JSON.parse(JSON.stringify(editData));
+			if (editData.activeTab) {
+				activeTab.value = editData.activeTab;
+			}
+			console.log('编辑模式已激活，数据已回填:', activeTab.value);
+		}
+	} else {
+		// 新增：如果是新增状态，初始化默认数据
+		if (order.value) {
+			const now = formatTime(new Date());
+			// 初始化订单信息（时间、编号）
+			if (order.value.orderInfo) {
+				order.value.orderInfo.forEach(item => {
+					if ((item.label === '下单时间' || item.label === '支付时间') && !item.value) {
+						item.value = now;
+					}
+					if (item.label === '订单编号' && !item.value) {
+						item.value = generateRandomOrder();
+					}
+				});
+			}
+			// 初始化配送信息
+			if (order.value.sendType) {
+				order.value.sendType.forEach(item => {
+					if (item.label === '期望配送时间' && (!item.value || item.value.trim() === '')) {
+						item.value = generateDefaultExpectedTime();
+					}
+				});
+			}
+
+			// 随机初始化特定状态字段
+			if (activeTab.value === 'dengdaifukuan' && !order.value.statusDesc) {
+				const h = (Math.floor(Math.random() * 23) + 1).toString().padStart(2, '0');
+				const m = Math.floor(Math.random() * 59).toString().padStart(2, '0');
+				const s = Math.floor(Math.random() * 59).toString().padStart(2, '0');
+				order.value.statusDesc = `${h} : ${m} : ${s}`;
+			}
+			if (activeTab.value === 'zhengzaichuku' && !order.value.trackingTime) {
+				const date = new Date();
+				date.setMinutes(date.getMinutes() + Math.floor(Math.random() * 50) + 10);
+				order.value.trackingTime = formatTime(date);
+			}
+			if (activeTab.value === 'yiqianshou' && !order.value.trackingTime) {
+				const date = new Date();
+				date.setDate(date.getDate() + Math.floor(Math.random() * 1) + 1);
+				date.setHours(date.getHours() + Math.floor(Math.random() * 12));
+				order.value.trackingTime = formatTime(date);
+			}
+		}
+	}
+});
+
+/**
+ * 选择图片并转换为本地持久化路径 (并清理旧图)
+ */
+const chooseImage = () => {
+	// 记录旧图路径用于清理
+	const oldImagePath = order.value.products[0].image;
+
+	uni.chooseImage({
+		count: 1,
+		sizeType: ['original', 'compressed'],
+		sourceType: ['album', 'camera'],
+		success: (res) => {
+			const tempFilePath = res.tempFilePaths[0];
+			uni.showLoading({ title: '处理图片中...' });
+
+			// 将新图保存为持久化文件
+			uni.saveFile({
+				tempFilePath: tempFilePath,
+				success: (saveRes) => {
+					// 1. 设置新图片路径
+					order.value.products[0].image = saveRes.savedFilePath;
+
+					// 2. 如果旧图是本地持久化文件，则物理删除它
+					if (oldImagePath && (oldImagePath.includes('_doc') || oldImagePath.includes('store_') || oldImagePath.includes('at_'))) {
+						uni.removeSavedFile({
+							filePath: oldImagePath,
+							success: () => console.log('旧图片已清理:', oldImagePath),
+							fail: (err) => console.error('旧图片清理失败:', err)
+						});
+					}
+
+					uni.showToast({ title: '图片已更新', icon: 'success' });
+				},
+				fail: (err) => {
+					console.error('保存图片失败:', err);
+					uni.showToast({ title: '图片持久化失败', icon: 'none' });
+					order.value.products[0].image = tempFilePath;
+				},
+				complete: () => {
+					uni.hideLoading();
+				}
+			});
+		}
+	});
+}
+
+/**
+ * 选择快递员头像并转换为本地持久化路径 (并清理旧图)
+ */
+const chooseCourierImg = () => {
+	// 记录旧图路径用于清理
+	const oldImagePath = order.value.courierImg;
+
+	uni.chooseImage({
+		count: 1,
+		sizeType: ['original', 'compressed'],
+		sourceType: ['album', 'camera'],
+		success: (res) => {
+			const tempFilePath = res.tempFilePaths[0];
+			uni.showLoading({ title: '处理图片中...' });
+
+			// 将新图保存为持久化文件
+			uni.saveFile({
+				tempFilePath: tempFilePath,
+				success: (saveRes) => {
+					// 1. 设置新图片路径
+					order.value.courierImg = saveRes.savedFilePath;
+
+					// 2. 如果旧图是本地持久化文件，则物理删除它
+					if (oldImagePath && (oldImagePath.includes('_doc') || oldImagePath.includes('store_') || oldImagePath.includes('at_'))) {
+						uni.removeSavedFile({
+							filePath: oldImagePath,
+							success: () => console.log('旧头像已清理:', oldImagePath),
+							fail: (err) => console.error('旧头像清理失败:', err)
+						});
+					}
+				},
+				fail: (err) => {
+					console.error('保存头像失败:', err);
+					order.value.courierImg = tempFilePath;
+				},
+				complete: () => {
+					uni.hideLoading();
+				}
+			});
+		}
+	});
+}
+
+/**
+ * 点击列表项触发
+ */
+const onClickItemInfo = (item) => {
+	if (item.label === '收货信息') return; // 收货信息不可手动修改
+	if (item.type == 'time') {
+		datePickerData.value.selectDate = item.value;
+		datePickerData.value.endDate = formatTime(new Date());
+		selectItemInfo.value = item;
+		timepopup.value.open();
+	} else if (item.type == 'timeRange') {
+		selectItemInfo.value = item;
+		timepopup.value.open();
+	} else {
+		// 普通输入聚焦逻辑
+		item.focus = false;
+		nextTick(() => {
+			item.focus = true;
+		});
+	}
+}
+
+/**
+ * 时间选择器变化
+ */
+const onChangeStartDate = (e) => {
+	datePickerData.value.selectDate = e;
+}
+
+/**
+ * 点击出库时间
+ */
+const onClickTrackingTime = () => {
+	selectItemInfo.value = {
+		type: 'time',
+		isTrackingTime: true
+	};
+	datePickerData.value.selectDate = order.value.trackingTime || formatTime(new Date());
+	datePickerData.value.endDate = "2099-12-31 23:59:59";
+	timepopup.value.open();
+}
+
+/**
+ * 确认时间选择
+ */
+const settmes = () => {
+	if (selectItemInfo.value.type == 'time') {
+		if (selectItemInfo.value.isTrackingTime) {
+			order.value.trackingTime = datePickerData.value.selectDate;
+		} else {
+			selectItemInfo.value.value = datePickerData.value.selectDate;
+		}
+	} else if (selectItemInfo.value.type == 'timeRange') {
+		const cols = timeRangePickerData.value.rangeCols;
+		const sel = timeRangePickerData.value.rangeSelect;
+		const y = cols[0][sel[0]].replace('年', '');
+		const m = cols[1][sel[1]].replace('月', '');
+		const d = cols[2][sel[2]].replace('日', '');
+		const startStr = cols[3][sel[3]];
+		const endStr = cols[4][sel[4]];
+		selectItemInfo.value.value = `${y}-${m}-${d},${startStr}-${endStr}`;
+	}
+	timepopup.value.close();
+}
+
+/**
+ * 时间段选择器变化
+ */
+const onTimeRangeChange = (e) => {
+	timeRangePickerData.value.rangeSelect = e.detail.value;
+}
+
+/**
+ * 关闭时间选择器
+ */
+const closeTimePicker = () => {
+	timepopup.value.close();
+}
+
+/**
+ * 格式化时间
+ */
+const formatTime = (date) => {
+	const year = date.getFullYear();
+	const month = date.getMonth() + 1;
+	const day = date.getDate();
+	const hour = date.getHours();
+	const minute = date.getMinutes();
+	const second = date.getSeconds();
+	return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`;
+}
+
+/**
+ * 随机生成 18 位订单号
+ */
+const generateRandomOrder = () => {
+	let orderNo = '30'; // 京东订单常见的开头
+	for (let i = 0; i < 16; i++) {
+		orderNo += Math.floor(Math.random() * 10);
+	}
+	return orderNo;
+}
+
+/**
+ * 生成默认期望配送时间 (明天 09:00-21:00)
+ */
+const generateDefaultExpectedTime = () => {
+	const tomorrow = new Date();
+	tomorrow.setDate(tomorrow.getDate() + 1);
+	const y = tomorrow.getFullYear();
+	const m = (tomorrow.getMonth() + 1).toString().padStart(2, '0');
+	const d = tomorrow.getDate().toString().padStart(2, '0');
+	return `${y}-${m}-${d} 09:00-21:00`;
+}
+
+/**
+ * 切换tab
+ * @param item 
+ */
+const switchTab = (item) => {
+	// 备份当前输入，防止切换 tab 导致数据丢失
+	const oldData = JSON.parse(JSON.stringify(order.value));
+
+	activeTab.value = item.key;
+	order.value = JSON.parse(JSON.stringify(shoppingClassfiy[activeTab.value]));
+
+	if (order.value && oldData) {
+		// 恢复通用字段
+		order.value.consignee = oldData.consignee || order.value.consignee;
+		order.value.phone = oldData.phone || order.value.phone;
+		order.value.fullAddress = oldData.fullAddress || order.value.fullAddress;
+		order.value.shopName = oldData.shopName || order.value.shopName;
+		order.value.shopType = oldData.shopType || order.value.shopType;
+
+		// 恢复 orderInfo 中的手动输入值
+		if (order.value.orderInfo && oldData.orderInfo) {
+			order.value.orderInfo.forEach(newInfo => {
+				const target = oldData.orderInfo.find(o => o.label === newInfo.label);
+				if (target && target.value) {
+					newInfo.value = target.value;
+				}
+			});
+		}
+
+		// 针对新增模式，如果数据仍然为空，则自动生成
+		if (!isEditMode.value && order.value) {
+			const now = formatTime(new Date());
+			// 订单信息
+			if (order.value.orderInfo) {
+				order.value.orderInfo.forEach(info => {
+					if ((info.label === '下单时间' || info.label === '支付时间') && !info.value) {
+						info.value = now;
+					}
+					if (info.label === '订单编号' && !info.value) {
+						info.value = generateRandomOrder();
+					}
+				});
+			}
+			// 配送信息
+			if (order.value.sendType) {
+				order.value.sendType.forEach(info => {
+					if (info.label === '期望配送时间' && (!info.value || info.value.trim() === '')) {
+						info.value = generateDefaultExpectedTime();
+					}
+				});
+			}
+
+			// 随机初始化特定状态字段
+			if (activeTab.value === 'dengdaifukuan' && !order.value.statusDesc) {
+				const h = (Math.floor(Math.random() * 23) + 1).toString().padStart(2, '0');
+				const m = Math.floor(Math.random() * 59).toString().padStart(2, '0');
+				const s = Math.floor(Math.random() * 59).toString().padStart(2, '0');
+				order.value.statusDesc = `${h} : ${m} : ${s}`;
+			}
+			if (activeTab.value === 'zhengzaichuku' && !order.value.trackingTime) {
+				const date = new Date();
+				date.setMinutes(date.getMinutes() + Math.floor(Math.random() * 50) + 10);
+				order.value.trackingTime = formatTime(date);
+			}
+			if (activeTab.value === 'yiqianshou' && !order.value.trackingTime) {
+				const date = new Date();
+				date.setDate(date.getDate() + Math.floor(Math.random() * 1) + 1);
+				date.setHours(date.getHours() + Math.floor(Math.random() * 12));
+				order.value.trackingTime = formatTime(date);
+			}
+		}
+	}
+}
+
+async function onConfirm() {
+	let list = uni.getStorageSync('jingdongShopping') || [];
+	if (!Array.isArray(list)) {
+		list = [];
+	}
+
+	order.value.activeTab = activeTab.value;
+
+	// 处理图片持久化
+	const product = order.value.products[0];
+	if (product && product.image && (product.image.includes('tmp') || product.image.includes('blob'))) {
+		try {
+			const res = await new Promise((resolve, reject) => {
+				uni.saveFile({
+					tempFilePath: product.image,
+					success: resolve,
+					fail: reject
+				});
+			});
+			product.image = res.savedFilePath;
+			console.log('图片持久化成功:', product.image);
+		} catch (err) {
+			console.error('图片保存失败:', err);
+		}
+	}
+
+	if (isEditMode.value) {
+		// 修改模式：查找原有 ID 并替换 (强制转字符串匹配)
+		const index = list.findIndex(item => String(item.id) === String(currentId.value));
+		if (index > -1) {
+			list[index] = JSON.parse(JSON.stringify(order.value));
+		} else {
+			// 如果缓存中没找到（可能是第一次修改系统默认数据），则追加
+			list.push(JSON.parse(JSON.stringify(order.value)));
+		}
+	} else {
+		// 新增模式：仅在真正新增时生成 UUID 并追加
+		order.value.id = stringUtil.uuid();
+		list.push(JSON.parse(JSON.stringify(order.value)));
+	}
+
+	uni.setStorageSync('jingdongShopping', list);
+	uni.showToast({
+		title: isEditMode.value ? '修改成功' : '保存成功',
+		icon: 'success'
+	});
+	setTimeout(() => {
+		uni.navigateBack();
+	}, 1500);
+}
+
+const onShopTypeChange = (e) => {
+	const idx = e.detail.value;
+	order.value.shopType = shopTypeValues[idx];
+}
+
+// 自动同步“收货信息”与“收货地址”
+watch([
+	() => order.value?.consignee,
+	() => order.value?.phone,
+	() => order.value?.fullAddress
+], ([name, phone, fullAddr]) => {
+	if (!order.value) return;
+
+	// 1. 同步“收货信息”
+	const userInfoValue = `${name || ''} ${phone || ''}`.trim();
+	const findAndSet = (list, label, value, onlyIfEmpty = false) => {
+		if (!list) return;
+		const target = list.find(i => i.label === label);
+		if (target) {
+			if (!onlyIfEmpty || !target.value || target.value.trim() === '') {
+				target.value = value;
+			}
+		}
+	};
+
+	findAndSet(order.value.sendType, '收货信息', userInfoValue);
+	findAndSet(order.value.orderInfo, '收货信息', userInfoValue);
+
+	// 2. 如果是正在出库，同步“收货地址” (允许手动修改：仅在为空时自动填充)
+	if (order.value.status === '正在出库' && fullAddr) {
+		findAndSet(order.value.sendType, '收货地址', fullAddr, true);
+		findAndSet(order.value.orderInfo, '收货地址', fullAddr, true);
+	}
+}, { deep: true, immediate: true });
+
+// 自动计算实付款总额
+watch([
+	() => order.value?.products?.[0]?.price,
+	() => order.value?.discount,
+	() => order.value?.carriage
+], ([price, discount, carriage]) => {
+	if (!order.value) return;
+	const p = parseFloat(price) || 0;
+	const d = parseFloat(discount) || 0;
+	const c = parseFloat(carriage) || 0;
+	// 计算逻辑：原价 - 优惠 + 运费
+	const total = (p - d + c).toFixed(2);
+	order.value.totalPrice = total;
+}, { deep: true, immediate: true });
+
+</script>
+
+<style lang="less" scoped>
+/* 右上角点击蒙层：position:fixed，透明，覆盖导航栏右侧按钮区域 */
+.right-btn-mask {
+	position: fixed;
+	top: 0;
+	right: 0;
+	width: 80px;
+	/* height 由 :style 动态绑定 = statusBarHeight + 44px */
+	z-index: 10000;
+	background: transparent;
+}
+
+.tab-box {
+	// // position: -webkit-sticky;
+	// position: sticky;
+	// /* #ifdef H5 */
+	// top: 44px;
+	// /* H5 端通常有导航栏高度 */
+	// /* #endif */
+	// /* #ifndef H5 */
+	// top: 88rpx;
+	// /* #endif */
+	// z-index: 9;
+	background-color: #F2F3F7;
+	padding: 22rpx 24rpx;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	overflow: hidden;
+	overflow-x: scroll;
+
+	&::-webkit-scrollbar {
+		display: none;
+		/* 隐藏滚动条 */
+	}
+
+	.tab {
+		white-space: nowrap;
+		padding: 10rpx 20rpx;
+		border-radius: 28rpx;
+		margin-right: 16rpx;
+		background-color: #fff;
+		font-size: 26rpx;
+		color: #1a1a1a;
+		flex-shrink: 0;
+		font-weight: 500;
+
+		&.active {
+			color: #1B71F8;
+		}
+	}
+
+}
+
+.title-box {
+	display: flex;
+	align-items: center;
+
+	.wait-icon {
+		width: 40rpx;
+		height: 40rpx;
+		margin-right: 12rpx;
+	}
+
+	text {
+		font-size: 36rpx;
+		font-weight: 500;
+		color: #1a1a1a;
+	}
+}
+
+.right-box {
+	display: flex;
+
+	.icon {
+		width: 40rpx;
+		height: 40rpx;
+		margin-left: 20rpx;
+	}
+}
+
+.tip-box {
+	width: 100%;
+	text-align: center;
+	font-size: 26rpx;
+	line-height: 26rpx;
+	color: #1a1a1a;
+	margin-bottom: 16rpx;
+}
+
+.address-info {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 30rpx 22rpx;
+	background-color: #ffffff;
+	border-radius: 24rpx;
+	margin: 0 16rpx;
+
+	.location {
+		width: 28rpx;
+		height: 28rpx;
+		margin-right: 14rpx;
+	}
+
+	.name-box,
+	.number-box {
+		display: inline-flex;
+		align-items: center;
+		vertical-align: middle;
+		margin-right: 16rpx;
+	}
+
+	.address-box {
+		display: flex;
+		align-items: center;
+		margin-top: 8rpx;
+	}
+
+	.name {
+		font-size: 30rpx;
+		color: #1A1A1A;
+		font-weight: 500;
+	}
+
+	.number {
+		font-size: 26rpx;
+		color: #8C8C8C;
+	}
+
+	.address {
+		color: #8C8C8C;
+		font-size: 26rpx;
+		line-height: 42rpx;
+	}
+
+	.edit-btn {
+
+		height: 54rpx;
+		border-radius: 8rpx;
+		border: 0.5px solid #C5C5C5;
+		padding: 0 52rpx;
+		font-size: 26rpx;
+		line-height: 52rpx;
+		color: #1A1A1A;
+		margin-left: 28rpx;
+
+		text {
+			white-space: nowrap;
+		}
+
+	}
+}
+
+.outbound-info {
+	display: flex;
+	align-items: flex-start;
+	background-color: #ffffff;
+	border-radius: 24rpx;
+	margin: 10rpx 16rpx;
+	padding: 22rpx 22rpx 30rpx;
+
+	.outbound-icon {
+		width: 46rpx;
+		height: 46rpx;
+		margin-right: 16rpx;
+	}
+
+	.outbound-info-content {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+
+		.title-info {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			font-size: 30rpx;
+			line-height: 46rpx;
+			font-weight: 500;
+			color: #1A1A1A;
+		}
+
+		.desc {
+			margin-top: 4rpx;
+			font-size: 26rpx;
+			color: #8C8C8C;
+			line-height: 36rpx;
+		}
+
+		.address-box {
+			margin-top: 18rpx;
+
+			.top {
+				display: flex;
+				justify-content: space-between;
+
+				.edit-btn {
+					width: 116rpx;
+					height: 54rpx;
+					border-radius: 8rpx 8rpx 8rpx 8rpx;
+					border: 0.5px solid #C5C5C5;
+					text-align: center;
+					font-size: 26rpx;
+					line-height: 50rpx;
+					color: #1A1A1A;
+				}
+			}
+
+			.address {
+				font-size: 30rpx;
+				line-height: 30rpx;
+				color: #1A1A1A;
+				font-weight: 500;
+				margin-top: 8rpx;
+			}
+
+			.phone {
+				font-size: 26rpx;
+				color: #8C8C8C;
+				line-height: 26rpx;
+			}
+		}
+	}
+}
+
+.cancel-progress-box {
+	display: flex;
+	align-items: center;
+	background-color: #ffffff;
+	border-radius: 24rpx;
+	margin: 10rpx 16rpx;
+	padding: 26rpx 22rpx 30rpx;
+
+	.cancel-icon {
+		width: 60rpx;
+		height: 60rpx;
+		margin-right: 16rpx;
+	}
+
+	.cancel-content {
+		flex: 1;
+
+		.title-row {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.left {
+				display: flex;
+				align-items: center;
+			}
+
+			.icon {
+				width: 46rpx;
+				height: 46rpx;
+				margin-right: 16rpx;
+			}
+
+			.title {
+				font-size: 30rpx;
+				line-height: 30rpx;
+				font-weight: 500;
+				color: #1A1A1A;
+			}
+		}
+
+		.desc {
+			margin-top: 4rpx;
+			font-size: 26rpx;
+			color: #8C8C8C;
+			line-height: 36rpx;
+		}
+	}
+}
+
+.order-status-box {
+	background-color: #ffffff;
+	border-radius: 24rpx;
+	margin: 16rpx;
+	padding: 22rpx 22rpx 30rpx;
+
+	.status-main {
+		display: flex;
+		align-items: flex-start;
+
+		.status-icon {
+			width: 46rpx;
+			height: 46rpx;
+			margin-right: 16rpx;
+		}
+
+		.status-content {
+			flex: 1;
+
+			.title-row {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.title {
+					font-size: 28rpx;
+					font-weight: 700;
+					color: #E40C24;
+				}
+			}
+
+			.desc {
+				margin-top: 4rpx;
+				font-size: 26rpx;
+				color: #8C8C8C;
+				line-height: 36rpx;
+			}
+		}
+	}
+
+	.progress-box {
+		margin-left: 22rpx;
+		border-left: 0.5px solid #F83021;
+		margin-top: 6rpx;
+		padding-left: 40rpx;
+		font-size: 26rpx;
+		color: #8C8C8C;
+		padding-bottom: 18rpx;
+		// height: 62rpx;
+
+
+		.text {
+			font-size: 26rpx;
+			color: #8C8C8C;
+			line-height: 36rpx;
+		}
+
+		.upload-box {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			background-color: #F7F8FC;
+			margin-top: 18rpx;
+			border-radius: 8rpx;
+			padding: 6rpx;
+
+
+			.info-box {
+				display: flex;
+				align-items: center;
+			}
+
+			.btn-box {
+				display: flex;
+
+				.btn {
+					margin-left: 16rpx;
+					border-radius: 8rpx;
+					height: 46rpx;
+					line-height: 42rpx;
+					font-size: 22rpx;
+					color: #1A1A1A;
+					line-height: 46rpx;
+					padding: 0 22rpx;
+				}
+
+				.grey {
+					border: 0.5px solid #C5C5C5;
+					color: #1A1A1A;
+				}
+
+				.red {
+					border: 0.5px solid #ED1C04;
+					color: #ED1C04;
+				}
+			}
+
+			.image-box {
+				width: 56rpx;
+				height: 56rpx;
+				background: #CBCEDA;
+				border-radius: 50%;
+				overflow: hidden;
+				margin-right: 14rpx;
+			}
+
+			.name {
+				font-size: 22rpx;
+				color: #3D3D3D;
+			}
+		}
+	}
+
+	.bottom-box {
+		display: flex;
+		padding-left: 16rpx;
+
+		.dot {
+			width: 14rpx;
+			height: 14rpx;
+			background: #F83021;
+			opacity: 0.5;
+			border-radius: 50%;
+			margin-right: 32rpx;
+			margin-top: 12rpx;
+		}
+
+		.desc {
+			font-size: 30rpx;
+			color: #1A1A1A;
+			line-height: 30rpx;
+			font-weight: 500;
+		}
+
+		.name {
+			font-size: 26rpx;
+			color: #8C8C8C;
+			line-height: 26rpx;
+			margin-top: 12rpx;
+		}
+	}
+
+	.address-timeline {
+		position: relative;
+		margin-top: 10rpx;
+		padding-left: 76rpx;
+
+		.line {
+			position: absolute;
+			left: 29rpx;
+			top: -40rpx;
+			bottom: 30rpx;
+			width: 2rpx;
+			background-color: #F8D3D7;
+		}
+
+		.dot {
+			position: absolute;
+			left: 21rpx;
+			bottom: 40rpx;
+			width: 18rpx;
+			height: 18rpx;
+			background-image: radial-gradient(circle, #F8A7AD 100%, transparent);
+			border-radius: 50%;
+		}
+
+		.info {
+			display: flex;
+			flex-direction: column;
+
+			.address {
+				font-size: 28rpx;
+				font-weight: 700;
+				color: #1A1A1A;
+				line-height: 42rpx;
+			}
+
+			.user {
+				margin-top: 4rpx;
+				font-size: 24rpx;
+				color: #8C8C8C;
+				line-height: 36rpx;
+			}
+		}
+	}
+}
+
+.product-card {
+	padding: 28rpx 22rpx;
+	margin: 16rpx;
+	background-color: #FFFFFF;
+	border-radius: 24rpx;
+
+	.title-box {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.left-box {
+			display: flex;
+			align-items: center;
+			flex: 1;
+			width: 200px;
+
+			.img {
+				width: 50rpx;
+				height: 26rpx;
+				margin-right: 8rpx;
+				flex-shrink: 0;
+			}
+
+			.title {
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				font-size: 26rpx;
+				color: #1A1A1A;
+				line-height: 28rpx;
+				font-weight: 700;
+			}
+		}
+
+
+
+		.right-icon {
+			margin-left: 12rpx;
+		}
+	}
+
+	.product-info {
+		display: flex;
+		margin-top: 14rpx;
+
+		.image-box {
+			width: 152rpx;
+			height: 152rpx;
+			border-radius: 24rpx;
+			overflow: hidden;
+			margin-right: 24rpx;
+		}
+
+		.info-box {
+			flex: 1;
+			overflow: hidden;
+
+			.name {
+				width: 100%;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				font-size: 26rpx;
+				color: #1A1A1A;
+				line-height: 28rpx;
+				font-weight: 700;
+			}
+
+			.desc {
+				margin-top: 16rpx;
+				font-size: 22rpx;
+				color: #87868E;
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 2;
+				overflow: hidden;
+			}
+
+			.tag {
+				font-size: 22rpx;
+				color: #A96F24;
+				margin-top: 18rpx;
+			}
+		}
+
+		.price-box {
+			font-weight: 500;
+			font-size: 28rpx;
+			color: #1A1A1A;
+
+			.price {
+				font-weight: 500;
+			}
+		}
+	}
+
+	.btn-box {
+		display: flex;
+		justify-content: flex-end;
+		margin-top: 26rpx;
+
+		.btn {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 144rpx;
+			white-space: nowrap;
+			font-size: 22rpx;
+			line-height: 22rpx;
+			height: 60rpx;
+			line-height: 58rpx;
+			border-radius: 8rpx;
+			border: 0.5px solid #C7C7C7;
+			color: #1A1A1A;
+			margin-left: 22rpx;
+
+			.icon {
+				width: 28rpx;
+				height: 28rpx;
+				margin-right: 6rpx;
+			}
+
+
+		}
+
+		.red {
+			color: #F10F1A;
+			border: 0.5px solid #F10F1A;
+		}
+
+
+		.img {
+			width: 32rpx;
+			height: 32rpx;
+			flex-shrink: 0;
+			margin-right: 14rpx;
+		}
+	}
+
+	.name {
+		font-size: 26rpx;
+		color: #1A1A1A;
+	}
+
+	.text {
+		font-size: 22rpx;
+		color: #87868E;
+		line-height: 24rpx;
+		margin-top: 8rpx;
+	}
+}
+
+.product-price {
+	background-color: #FFFFFF;
+	padding: 38rpx 22rpx;
+	border-radius: 24rpx;
+	margin: 16rpx;
+
+	.title {
+		font-size: 30rpx;
+		color: #1A1A1A;
+		line-height: 30rpx;
+		font-weight: 700;
+	}
+
+	.item {
+		margin-top: 36rpx;
+
+		.label {
+			color: #87868E;
+			font-size: 26rpx;
+			line-height: 26rpx;
+		}
+
+		.value {
+			font-size: 32rpx;
+			line-height: 32rpx;
+			font-weight: 500;
+		}
+	}
+
+	.price {
+		display: flex;
+		justify-content: flex-end;
+		margin-top: 32rpx;
+		font-size: 26rpx;
+		color: #ED1C04;
+		line-height: 26rpx;
+		font-weight: 500;
+		align-items: baseline;
+
+		.number {
+			font-size: 36rpx;
+			font-weight: 500;
+			margin-left: 6rpx;
+		}
+	}
+}
+
+.order-info-box {
+	margin: 16rpx;
+	background-color: #FFFFFF;
+	border-radius: 24rpx;
+	padding: 28rpx 22rpx;
+
+	.title {
+		font-size: 30rpx;
+		color: #1A1A1A;
+		line-height: 30rpx;
+		font-weight: 700;
+	}
+
+	.order-info {
+		padding-bottom: 34rpx;
+		border-bottom: 0.5px solid #F2F2F2;
+	}
+
+	.item {
+		display: flex;
+		justify-content: space-between;
+		margin-top: 36rpx;
+
+		.label {
+			font-size: 26rpx;
+			color: #87868E;
+			line-height: 26rpx;
+		}
+
+		.value {
+			font-size: 26rpx;
+			color: #1A1A1A;
+			line-height: 26rpx;
+			text-align: right;
+		}
+	}
+}
+
+.timeBox {
+	background-color: #fff;
+	padding: 10px;
+	border-radius: 24rpx 24rpx 0 0;
+
+	.titleBox {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 20px;
+		padding: 0 10px;
+
+		.title {
+			font-size: 28rpx;
+			color: #999;
+		}
+
+		.btn {
+			font-size: 28rpx;
+			color: #1676FE;
+			font-weight: 500;
+		}
+	}
+
+	.range-picker-view {
+		width: 100%;
+		height: 400rpx;
+		background-color: #fff;
+	}
+
+	.picker-item {
+		line-height: 40px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+		font-size: 24rpx;
+		color: #333;
+	}
+}
+</style>
+<style>
+/* 直接在页面导入公共样式 */
+@import '/common/main.css';
+@import "@/common/specify-style.less";
+
+.page-container {
+	padding-bottom: 100rpx;
+}
+
+.edit-icon {
+	width: 28rpx;
+	height: 28rpx;
+	margin-left: 0;
+	flex-shrink: 0;
+}
+
+.auto-input {
+	overflow-x: auto;
+}
+
+.time-box {
+	text-align: left;
+	margin: 8rpx 20rpx;
+	padding: 16rpx;
+	background-color: #ffffff;
+	border-radius: 24rpx;
+}
+</style>
\ No newline at end of file
diff --git a/pages/shopping/jingdong/json/order.json b/pages/shopping/jingdong/json/order.json
new file mode 100644
index 0000000..7f87681
--- /dev/null
+++ b/pages/shopping/jingdong/json/order.json
@@ -0,0 +1,399 @@
+{
+    "shoppingClassfiy": {
+        "dengdaifukuan": {
+            "id": "",
+            "shopType": "self",
+            "shopName": "",
+            "status": "等待付款",
+            "statusDesc": "",
+            "consignee": "",
+            "phone": "",
+            "fullAddress": "",
+            "totalPrice": "",
+            "carriage": "0.00",
+            "products": [
+                {
+                    "image": "",
+                    "name": "",
+                    "title": "",
+                    "desc": "",
+                    "service": "",
+                    "price": "",
+                    "count": ""
+                }
+            ],
+            "orderInfo": [
+                {
+                    "label": "订单编号",
+                    "key": "orderNumber",
+                    "value": "",
+                    "type": "number"
+                },
+                {
+                    "label": "交易快照",
+                    "key": "transactionSnapshot",
+                    "value": "发生交易争执时，可作为判断依据"
+                },
+                {
+                    "label": "支付方式",
+                    "key": "paymentMethod",
+                    "value": "在线支付"
+                },
+                {
+                    "label": "发票类型",
+                    "key": "invoiceType",
+                    "value": "电子普通发票"
+                },
+                {
+                    "label": "下单时间",
+                    "key": "orderTime",
+                    "value": "",
+                    "type": "time"
+                }
+            ],
+            "sendType": [
+                {
+                    "label": "配送方式",
+                    "key": "sendType",
+                    "value": "快递运输"
+                },
+                {
+                    "label": "期望配送时间",
+                    "key": "expectedDeliveryTime",
+                    "value": " ",
+                    "type": "timeRange"
+                },
+                {
+                    "label": "收货方式",
+                    "key": "shippingMethod",
+                    "value": "送货上门"
+                }
+            ],
+            "promoType": "text",
+            "promoHighlight": "白条支付券0.5元优惠券"
+        },
+        "zhengzaichuku": {
+            "id": "",
+            "shopType": "self",
+            "shopName": "",
+            "status": "正在出库",
+            "trackingTitle": "仓库处理中",
+            "trackingDesc": "预计明天9:00-15:00送达",
+            "trackingDesc2": "快递运输 · 温馨提示：您的订单预计x月xx日09:00- 15:00送达",
+            "trackingTime": "",
+            "consignee": "",
+            "phone": "",
+            "fullAddress": "",
+            "totalPrice": "",
+            "carriage": "0.00",
+            "discount": "0.00",
+            "products": [
+                {
+                    "image": "",
+                    "title": "",
+                    "desc": "",
+                    "service": "",
+                    "price": "",
+                    "count": ""
+                }
+            ],
+            "orderInfo": [
+                {
+                    "label": "订单编号",
+                    "key": "orderNumber",
+                    "value": "",
+                    "type": "number"
+                },
+                {
+                    "label": "交易快照",
+                    "key": "transactionSnapshot",
+                    "value": "发生交易争执时，可作为判断依据"
+                },
+                {
+                    "label": "支付方式",
+                    "key": "paymentMethod",
+                    "value": "在线支付"
+                },
+                {
+                    "label": "支付时间",
+                    "key": "paymentTime",
+                    "value": "",
+                    "type": "time"
+                },
+                {
+                    "label": "下单时间",
+                    "key": "orderTime",
+                    "value": "",
+                    "type": "time"
+                }
+            ],
+            "sendType": [
+                {
+                    "label": "配送方式",
+                    "key": "sendType",
+                    "value": "快递运输"
+                },
+                {
+                    "label": "收货信息",
+                    "key": "userInfo",
+                    "value": ""
+                },
+                {
+                    "label": "收货地址",
+                    "key": "address",
+                    "value": "",
+                    "type": "textarea"
+                },
+                {
+                    "label": "期望配送时间",
+                    "key": "expectedDeliveryTime",
+                    "value": "",
+                    "type": "timeRange"
+                },
+                {
+                    "label": "收货方式",
+                    "key": "shippingMethod",
+                    "value": "送货上门"
+                }
+            ],
+            "promoType": "plus",
+            "promoText": "告别凑单, 享免运优惠"
+        },
+        "yiqianshou": {
+            "id": "",
+            "shopType": "self",
+            "shopName": "",
+            "status": "完成",
+            "statusColor": "gray",
+            "trackingTitle": "已签收",
+            "courier": "",
+            "courierImg": "",
+            "trackingDesc": "您的订单已签收，可对快递员的服务进行评价或打赏哦~",
+            "trackingDesc2": "快递运输 · 温馨提示：您的订单已签收",
+            "trackingTime": "",
+            "carriage": "0.00",
+            "discount": "0.00",
+            "products": [
+                {
+                    "image": "",
+                    "title": "",
+                    "desc": "",
+                    "service": "",
+                    "price": "",
+                    "count": ""
+                }
+            ],
+            "orderInfo": [
+                {
+                    "label": "订单编号",
+                    "key": "orderNumber",
+                    "value": "",
+                    "type": "number"
+                },
+                {
+                    "label": "交易快照",
+                    "key": "transactionSnapshot",
+                    "value": "发生交易争执时，可作为判断依据"
+                },
+                {
+                    "label": "支付方式",
+                    "key": "paymentMethod",
+                    "value": "在线支付"
+                },
+                {
+                    "label": "支付时间",
+                    "key": "paymentTime",
+                    "value": "",
+                    "type": "time"
+                },
+                {
+                    "label": "下单时间",
+                    "key": "orderTime",
+                    "value": "",
+                    "type": "time"
+                }
+            ],
+            "sendType": [
+                {
+                    "label": "配送方式",
+                    "key": "sendType",
+                    "value": "快递运输"
+                },
+                {
+                    "label": "期望配送时间",
+                    "key": "expectedDeliveryTime",
+                    "value": "",
+                    "type": "timeRange"
+                },
+                {
+                    "label": "收货方式",
+                    "key": "shippingMethod",
+                    "value": "送货上门"
+                }
+            ],
+            "promoType": "plus",
+            "promoText": "告别凑单, 享免运优惠",
+            "hasMore": true
+        },
+        "wancheng": {
+            "id": "",
+            "shopType": "jd",
+            "shopName": "",
+            "status": "完成",
+            "statusColor": "gray",
+            "carriage": "0.00",
+            "discount": "0.00",
+            "products": [
+                {
+                    "image": "",
+                    "title": "",
+                    "desc": "",
+                    "service": "",
+                    "price": "",
+                    "count": ""
+                }
+            ],
+            "orderInfo": [
+                {
+                    "label": "订单编号",
+                    "key": "orderNumber",
+                    "value": "",
+                    "type": "number"
+                },
+                {
+                    "label": "交易快照",
+                    "key": "transactionSnapshot",
+                    "value": "发生交易争执时，可作为判断依据"
+                },
+                {
+                    "label": "支付方式",
+                    "key": "paymentMethod",
+                    "value": "在线支付"
+                },
+                {
+                    "label": "支付时间",
+                    "key": "paymentTime",
+                    "value": "",
+                    "type": "time"
+                },
+                {
+                    "label": "下单时间",
+                    "key": "orderTime",
+                    "value": "",
+                    "type": "time"
+                }
+            ],
+            "sendType": [
+                {
+                    "label": "配送方式",
+                    "key": "sendType",
+                    "value": "快递运输"
+                },
+                {
+                    "label": "收货信息",
+                    "key": "userInfo",
+                    "value": ""
+                },
+                {
+                    "label": "收货地址",
+                    "key": "address",
+                    "value": "",
+                    "type": "textarea"
+                }
+            ],
+            "hasMore": true
+        },
+        "yiquxiao": {
+            "id": "",
+            "shopType": "self",
+            "shopName": "",
+            "status": "已取消",
+            "statusColor": "gray",
+            "carriage": "0.00",
+            "discount": "0.00",
+            "consignee": "",
+            "phone": "",
+            "fullAddress": "",
+            "products": [
+                {
+                    "image": "",
+                    "title": "",
+                    "desc": "",
+                    "service": "",
+                    "price": "",
+                    "count": ""
+                }
+            ],
+            "orderInfo": [
+                {
+                    "label": "订单编号",
+                    "key": "orderNumber",
+                    "value": "",
+                    "type": "number"
+                },
+                {
+                    "label": "交易快照",
+                    "key": "transactionSnapshot",
+                    "value": "发生交易争执时，可作为判断依据"
+                },
+                {
+                    "label": "支付方式",
+                    "key": "paymentMethod",
+                    "value": "在线支付"
+                },
+                {
+                    "label": "发票类型",
+                    "key": "invoiceType",
+                    "value": "电子普通发票"
+                },
+                {
+                    "label": "下单时间",
+                    "key": "orderTime",
+                    "value": "",
+                    "type": "time"
+                }
+            ],
+            "sendType": [
+                {
+                    "label": "配送方式",
+                    "key": "sendType",
+                    "value": "快递运输"
+                },
+                {
+                    "label": "期望配送时间",
+                    "key": "expectedDeliveryTime",
+                    "value": "",
+                    "type": "timeRange"
+                },
+                {
+                    "label": "收货方式",
+                    "key": "shippingMethod",
+                    "value": "送货上门"
+                }
+            ],
+            "hasMore": true
+        }
+    },
+    "shoppingType": [
+        {
+            "label": "等待付款",
+            "key": "dengdaifukuan"
+        },
+        {
+            "label": "正在出库",
+            "key": "zhengzaichuku"
+        },
+        {
+            "label": "完成-已签收",
+            "key": "yiqianshou"
+        },
+        {
+            "label": "完成",
+            "key": "wancheng"
+        },
+        {
+            "label": "已取消",
+            "key": "yiquxiao"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/pages/shopping/jingdong/list-index.vue b/pages/shopping/jingdong/list-index.vue
index 9c51582..79752a5 100644
--- a/pages/shopping/jingdong/list-index.vue
+++ b/pages/shopping/jingdong/list-index.vue
@@ -1,11 +1,11 @@
 <template>
 	<view class="top-fixed">
-		<nav-bar title="京东" bgColor="#F0F4F9">
+		<nav-bar title="京东" bgColor="#F0F4F9" :buttonGroup="buttonGroup" @button-click="util.clickTitlePopupButton">
 			<template v-slot:center>
 				<view class="search-box">
 					<image class="search-icon" src="/static/image/shopping/jingdong/search-icon.png" mode="aspectFit">
 					</image>
-					<input class="input" type="text" placeholder="搜索我的订单" disabled />
+					<input class="input" type="text" placeholder="搜索我的订单" />
 				</view>
 			</template>
 			<template v-slot:right>
@@ -43,9 +43,14 @@
 		</view>
 	</view>
 	<view class="content" :style="{ paddingTop: contentPaddingTop }">
-		<shopping-card v-for="(item, index) in filteredOrderList" :key="index" :item="item"></shopping-card>
+		<shopping-card v-for="(item, index) in filteredOrderList" :key="index" :item="item" @longpress="handleLongPress"
+			@click="handleCardClick(item)"></shopping-card>
+		<view class="empty-state" v-if="filteredOrderList.length === 0">
+			<image class="empty-icon" src="/static/image/shopping/jingdong/null.png" mode="heightFix"></image>
+			<text class="empty-text">您还没有相关订单</text>
+		</view>
 	</view>
-	<view class="bottom-fixed">
+	<view class="bottom-fixed" :style="{ height: bottomBoxHeight }">
 		<view class="bottom-item">
 			<image class="like-icon" src="/static/image/shopping/jingdong/weinituijian.png" mode="aspectFit"></image>
 			<text>为你推荐</text>
@@ -58,15 +63,161 @@
 			</view>
 		</view>
 	</view>
+
+	<!-- 长按操作气泡菜单 -->
+	<view v-if="showActionMenu" class="action-menu-mask" @click="showActionMenu = false">
+		<view class="action-menu-bubble" :style="{ left: actionMenuState.x + 'px', top: actionMenuState.y + 'px' }"
+			@click.stop>
+			<view class="menu-item" @click.stop="editOrder">修改</view>
+			<view class="menu-line"></view>
+			<view class="menu-item" @click.stop="handleDeleteOrder">删除</view>
+			<view class="bubble-arrow"></view>
+		</view>
+	</view>
 </template>
 
 <script setup>
 import { ref, computed, onMounted, getCurrentInstance } from 'vue';
+import { onShow } from '@dcloudio/uni-app';
 import ShoppingCard from '@/components/shopping/jingdong/shopping-card.vue';
+import { util } from '@/utils/common.js';
+
+const showActionMenu = ref(false);
+const actionMenuState = ref({ x: 0, y: 0, item: null });
+
+//导航栏菜单按钮
+const buttonGroup = [
+	{
+		name: "新增购物订单",
+		click: () => {
+			uni.navigateTo({
+				url: '/pages/shopping/jingdong/add-order/add-order'
+			});
+		}
+	}, {
+		name: "新增秒送订单",
+		click: () => {
+			uni.showToast({
+				title: '开发中，敬请期待',
+				icon: 'none'
+			});
+		}
+	},
+]
+/**
+ * 长按弹出气泡菜单
+ * @param data 
+ */
+const handleLongPress = (data) => {
+	console.log("长按", data);
+	const event = data.event;
+	let x = 0;
+	let y = 0;
+
+	// 兼容不同平台的坐标获取
+	if (event.touches && event.touches.length > 0) {
+		x = event.touches[0].clientX;
+		y = event.touches[0].clientY;
+	} else if (event.changedTouches && event.changedTouches.length > 0) {
+		x = event.changedTouches[0].clientX;
+		y = event.changedTouches[0].clientY;
+	} else {
+		// 兜底处理 (如模拟器点击或 detail 携带)
+		x = event.clientX || (event.detail && event.detail.x) || 0;
+		y = event.clientY || (event.detail && event.detail.y) || 0;
+	}
+
+	if (x || y) {
+		actionMenuState.value = {
+			x: x,
+			y: y,
+			item: data.item
+		};
+		showActionMenu.value = true;
+	} else {
+		console.warn("无法获取长按坐标");
+	}
+};
+
+/**
+ * 修改订单
+ */
+const editOrder = () => {
+	const item = actionMenuState.value.item;
+	if (!item) return;
+	showActionMenu.value = false;
+	uni.navigateTo({
+		url: '/pages/shopping/jingdong/add-order/add-order?id=' + item.id + '&type=' + item.shopType + '&isEdit=true'
+	});
+};
+
+/**
+ * 点击订单卡片
+ * @param item 订单项
+ */
+const handleCardClick = (item) => {
+	if (item.shopType !== "waimai") {
+		uni.navigateTo({
+			url: '/pages/shopping/jingdong/order-detail/order-detail?id=' + item.id
+		});
+	} else {
+
+	}
+};
+
+
+
+/**
+ * 删除订单
+ */
+const handleDeleteOrder = () => {
+	const itemToDel = actionMenuState.value.item;
+
+	// 1. 尝试删除本地持久化图片文件 (商品图 + 快递员头像)
+	const productImage = itemToDel?.products?.[0]?.image;
+	const courierImage = itemToDel?.courierImg;
+
+	const cleanupFile = (path) => {
+		if (path && (path.includes('_doc/') || path.includes('_downloads/') || path.includes('store_') || path.includes('at_'))) {
+			uni.removeSavedFile({
+				filePath: path,
+				success: () => console.log('文件删除成功:', path),
+				fail: (err) => console.error('文件删除失败:', err)
+			});
+		}
+	};
+
+	cleanupFile(productImage);
+	cleanupFile(courierImage);
+
+	// 2. 从列表中移除数据
+	const realIndex = mockOrderList.value.findIndex(item => item === itemToDel);
+	if (realIndex > -1) {
+		mockOrderList.value.splice(realIndex, 1);
+		// 同步更新缓存
+		uni.setStorageSync('jingdongShopping', mockOrderList.value);
+	}
+	showActionMenu.value = false;
+	uni.showToast({
+		title: '已删除',
+		icon: 'none'
+	});
+};
 
 const contentPaddingTop = ref('0px');
 const instance = getCurrentInstance();
 
+/**
+ * 底部盒子高度
+ */
+const bottomBoxHeight = computed(() => {
+	const { windowHeight } = uni.getSystemInfoSync();
+	return `calc(${windowHeight}px - ${contentPaddingTop.value} - 324rpx)`;
+});
+
+/**
+ * 初始化
+ */
 onMounted(() => {
 	setTimeout(() => {
 		const query = uni.createSelectorQuery().in(instance.proxy);
@@ -78,6 +229,15 @@ onMounted(() => {
 	}, 100);
 });
 
+onShow(() => {
+	const cachedData = uni.getStorageSync('jingdongShopping');
+	if (cachedData && Array.isArray(cachedData)) {
+		mockOrderList.value = cachedData;
+	}
+
+	console.log("mockOrderList", mockOrderList.value);
+});
+
 const currentTab = ref(0);
 const tabList = ref([
 	{ name: '全部' },
@@ -86,6 +246,11 @@ const tabList = ref([
 	{ name: '服务', icon: '/static/image/shopping/jingdong/jiazheng.png', disabled: true }
 ]);
 
+
+/**
+ * 切换tab
+ * @param index 
+ */
 const switchTab = (index) => {
 	if (tabList.value[index].disabled) return;
 	currentTab.value = index;
@@ -95,12 +260,16 @@ const currentFilter = ref(-1);
 const filterList = ref([
 	{ name: '待付款' },
 	{ name: '待收货' },
-	{ name: '待使用', disabled: true },
+	{ name: '待使用', disabled: false },
 	{ name: '已完成' },
 	{ name: '待评价' },
 	{ name: '已取消' }
 ]);
 
+/**
+ * 切换筛选
+ * @param index 索引
+ */
 const switchFilter = (index) => {
 	if (filterList.value[index].disabled) return;
 	if (currentFilter.value === index) {
@@ -110,298 +279,279 @@ const switchFilter = (index) => {
 	}
 };
 
+/**
+ * 提取订单的时间戳用于排序
+ */
+const getOrderTimestamp = (item) => {
+	let timeStr = "";
+	if (item.orderInfo) {
+		const target = item.orderInfo.find(i => i.label === '下单时间' || i.label === '支付时间');
+		if (target && target.value) timeStr = target.value;
+	}
+	if (!timeStr && item.trackingTime) {
+		timeStr = item.trackingTime;
+	}
+	return timeStr ? new Date(timeStr.replace(/-/g, '/')).getTime() : 0;
+};
+
+/**
+ * 筛选订单列表
+ */
 const filteredOrderList = computed(() => {
 	const tabName = tabList.value[currentTab.value].name;
-	let baseList = mockOrderList.value;
+	let baseList = [...mockOrderList.value];
 
 	if (tabName === '购物') {
-		baseList = mockOrderList.value.filter(item => item.shopType !== 'waimai');
+		baseList = baseList.filter(item => item.shopType !== 'waimai');
 	} else if (tabName === '秒送') {
-		baseList = mockOrderList.value.filter(item => item.shopType === 'waimai');
+		baseList = baseList.filter(item => item.shopType === 'waimai');
 	}
 
+	let result = [];
 	if (currentFilter.value === -1) {
-		return baseList;
+		result = baseList;
+	} else {
+		const filterName = filterList.value[currentFilter.value].name;
+		result = baseList.filter(item => {
+			if (filterName === '待付款') return item.status === '等待付款';
+			if (filterName === '待收货') return item.status === '正在出库' || item.status === '待收货' || item.status === '运输中' || item.status === '已发货' || item.status === '商家备餐中' || item.status === '骑手到店取餐中';
+			if (filterName === '待使用') return item.status === '待使用';
+			if (filterName === '已完成') return item.status === '完成' || item.status === '已完成' || item.status === '已签收';
+			if (filterName === '待评价') return item.status === '待评价' || item.status === '完成' || item.status === '已完成';
+			if (filterName === '已取消') return item.status === '已取消';
+			return true;
+		});
 	}
-	const filterName = filterList.value[currentFilter.value].name;
 
-	return baseList.filter(item => {
-		if (filterName === '待付款') return item.status === '等待付款';
-		if (filterName === '待收货') return item.status === '正在出库' || item.status === '待收货' || item.status === '运输中' || item.status === '已发货' || item.status === '商家备餐中' || item.status === '骑手到店取餐中';
-		if (filterName === '待使用') return item.status === '待使用';
-		if (filterName === '已完成') return item.status === '完成' || item.status === '已完成' || item.status === '已签收';
-		if (filterName === '待评价') return item.status === '待评价' || item.status === '完成' || item.status === '已完成';
-		if (filterName === '已取消') return item.status === '已取消';
-		return true;
-	});
+	// 执行倒序排序
+	return result.sort((a, b) => getOrderTimestamp(b) - getOrderTimestamp(a));
 });
 
+/**
+ * 模拟订单列表
+ */
 const mockOrderList = ref([
-	{
-		shopType: 'waimai',
-		shopName: '安野屋 (AARYE) 京...',
-		status: '等待付款',
-		statusDesc: '29分钟',
-		products: [
-			{
-				image: '/static/image/shopping/jingdong/product1.png',
-				title: '超值哈哈哈哈哈哈哈哈哈哈哈哈哈哈好一人份',
-				desc: '不支持7天无理由退货',
-				tags: [],
-				price: '69.00',
-				count: 1,
-			}
-		],
-		promoType: 'text',
-		promoHighlight: '近90天600+人回购',
-		buttons: [
-			{ text: '取消订单', type: 'default' },
-			{ text: '查看发票', type: 'default' },
-			{ text: '修改订单', type: 'default' },
-			{ text: '去支付', type: 'primary' }
-		]
-	},
-	{
-		shopType: 'waimai',
-		shopName: '安野屋 (AARYE) 京...',
-		status: '骑手到店取餐中',
-		trackingTitle: '10:22-10:55',
-		trackingDesc: '骑手已到店，大王',
-		trackingTime: '2026-03-10 15:14:30',
-		products: [
-			{
-				image: '/static/image/shopping/jingdong/product1.png',
-				title: '超值哈哈哈哈哈哈哈哈哈哈哈哈哈哈好热 少糖',
-				desc: '不支持7天无理由退货',
-				tags: [],
-				price: '69.00',
-				count: 1,
-			}
-		],
-		promoType: 'cashback',
-		promoText: '当笔订单返现成功到账，',
-		promoAction: '点击领取',
-		buttons: [
-			{ text: '申请退款', type: 'default' },
-			{ text: '查看发票', type: 'default' }
-		]
-	},
-	{
-		shopType: 'waimai',
-		shopName: '安野屋 (AARYE) 京...',
-		status: '商家备餐中',
-		trackingTitle: '10:22-10:55',
-		trackingDesc: '商家已接单，商品备餐中',
-		trackingTime: '2026-03-10 15:14:30',
-		products: [
-			{
-				image: '/static/image/shopping/jingdong/product1.png',
-				title: '超值哈哈哈哈哈哈哈哈哈哈哈哈哈哈好热 少糖',
-				desc: '不支持7天无理由退货',
-				tags: [],
-				price: '69.00',
-				count: 1,
-			}
-		],
-		promoType: 'cashback',
-		promoText: '当笔订单返现成功到账，',
-		promoAction: '点击领取',
-		buttons: [
-			{ text: '申请退款', type: 'default' },
-			{ text: '查看发票', type: 'default' }
-		]
-	},
-	{
-		shopType: 'waimai',
-		shopName: '瑞幸咖啡',
-		status: '完成',
-		statusColor: 'gray',
-		products: [
-			{
-				image: '/static/image/shopping/jingdong/product1.png',
-				title: '多肉桃桃哈哈哈哈哈哈哈哈哈哈好和和好',
-				desc: '不支持7天无理由退货',
-				tags: [],
-				price: '69.00',
-				count: 1,
-			}
-		],
-		promoType: 'coupon',
-		promoText: '恭喜您获得3元京东购物券',
-		promoAction: '去领券',
-		buttons: [
-			{ text: '删除订单', type: 'default' },
-			{ text: '查看发票', type: 'default' },
-			{ text: '退换/售后', type: 'default' },
-			{ text: '再次购买', type: 'primary' }
-		]
-	},
-	{
-		shopType: 'waimai',
-		shopName: '瑞幸咖啡',
-		status: '完成',
-		statusColor: 'gray',
-		products: [
-			{
-				image: '/static/image/shopping/jingdong/product1.png',
-			},
-			{
-				image: '/static/image/shopping/jingdong/product1.png',
-			},
-			{
-				image: '/static/image/shopping/jingdong/product1.png',
-			}
-		],
-		price: '17.00',
-		count: 2,
-		buttons: [
-			{ text: '删除订单', type: 'default' },
-			{ text: '查看发票', type: 'default' },
-			{ text: '退换/售后', type: 'default' },
-			{ text: '再次购买', type: 'primary' }
-		]
-	},
-	{
-		shopType: 'waimai',
-		shopName: '瑞幸咖啡',
-		status: '已取消',
-		statusColor: 'gray',
-		products: [
-			{
-				image: '/static/image/shopping/jingdong/product1.png',
-				title: '多肉桃桃哈哈哈哈哈哈哈哈哈哈好和和好',
-				desc: '不支持7天无理由退货',
-				tags: [],
-				price: '69.00',
-				count: 1,
-			}
-		],
-		buttons: [
-			{ text: '删除订单', type: 'default' },
-			{ text: '钱款去向', type: 'default' },
-			{ text: '再次购买', type: 'primary' }
-		]
-	},
-	{
-		shopType: 'self',
-		shopName: '安野屋 (AARYE) 京联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
-		status: '等待付款',
-		statusDesc: '20小时11分钟',
-		products: [
-			{
-				image: '/static/image/shopping/jingdong/product1.png',
-				title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
-				desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
-				tags: ['无理由退货政策'],
-				price: '69.00',
-				count: 1,
-			}
-		],
-		promoType: 'text',
-		promoHighlight: '白条支付券0.5元优惠券',
-		buttons: [
-			{ text: '取消订单', type: 'default' },
-			{ text: '查看发票', type: 'default' },
-			{ text: '修改订单', type: 'default' },
-			{ text: '去支付', type: 'primary', badge: '减0.5元' }
-		]
-	},
-	{
-		shopType: 'none',
-		shopName: '甜小南旗舰店',
-		status: '正在出库',
-		trackingTitle: '仓库处理中',
-		trackingDesc: '预计 3月12日24:00 前发货，3月15日 24:00 前送达',
-		trackingTime: '2026-03-10 15:14:30',
-		products: [
-			{
-				image: '/static/image/shopping/jingdong/product1.png',
-				title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
-				desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
-				tags: ['无理由退货政策'],
-				price: '69.00',
-				count: 1,
-			}
-		],
-		promoType: 'plus',
-		promoText: '告别凑单, 享免运优惠',
-		buttons: [
-			{ text: '查看发票', type: 'default' },
-			{ text: '再次购买', type: 'default' },
-			{ text: '申请退款', type: 'default' },
-			{ text: '修改订单', type: 'default' }
-		]
-	},
-	{
-		shopType: 'self',
-		shopName: '甜小南旗舰店',
-		status: '完成',
-		statusColor: 'gray',
-		trackingTitle: '已签收',
-		trackingDesc: '您的订单已签收，可对快递员的服务进行评价或打赏哦~',
-		trackingTime: '2026-03-10 15:14:30',
-		products: [
-			{
-				image: '/static/image/shopping/jingdong/product1.png',
-				title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
-				desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
-				tags: ['无理由退货政策'],
-				price: '69.00',
-				count: 1,
-			}
-		],
-		promoType: 'plus',
-		promoText: '告别凑单, 享免运优惠',
-		hasMore: true,
-		buttons: [
-			{ text: '卖了换钱', type: 'default' },
-			{ text: '退还/售后', type: 'default' },
-			{ text: '再次购买', type: 'primary' }
-		]
-	},
-	{
-		shopType: 'jd',
-		shopName: '甜小南旗舰店',
-		status: '完成',
-		statusColor: 'gray',
-		products: [
-			{
-				image: '/static/image/shopping/jingdong/product1.png',
-				title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
-				desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
-				tags: ['无理由退货政策'],
-				price: '1669.00',
-				count: 1,
-			}
-		],
-		hasMore: true,
-		buttons: [
-			{ text: '再次购买', type: 'default' },
-			{ text: '申请退款', type: 'default' },
-			{ text: '修改订单', type: 'default' }
-		]
-	},
-	{
-		shopType: 'self',
-		shopName: '甜小南旗舰店',
-		status: '已取消',
-		statusColor: 'gray',
-		products: [
-			{
-				image: '/static/image/shopping/jingdong/product1.png',
-				title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
-				desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
-				tags: ['无理由退货政策'],
-				price: '1669.00',
-				count: 1,
-			}
-		],
-		buttons: [
-			{ text: '再次购买', type: 'default' },
-			{ text: '申请退款', type: 'default' },
-			{ text: '修改订单', type: 'primary' }
-		]
-	}
+	// {
+	// 	id: 123211111,
+	// 	shopType: 'waimai',
+	// 	shopName: '安野屋 (AARYE) 京...',
+	// 	status: '等待付款',
+	// 	statusDesc: '29分钟',
+	// 	products: [
+	// 		{
+	// 			image: '/static/image/shopping/jingdong/product1.png',
+	// 			title: '超值哈哈哈哈哈哈哈哈哈哈哈哈哈哈好一人份',
+	// 			desc: '不支持7天无理由退货',
+	// 			service: "",
+	// 			price: '69.00',
+	// 			count: 1,
+	// 		}
+	// 	],
+	// 	promoType: 'text',
+	// 	promoHighlight: '近90天600+人回购',
+	// },
+	// {
+	// 	id: 9632554,
+	// 	shopType: 'waimai',
+	// 	shopName: '安野屋 (AARYE) 京...',
+	// 	status: '骑手到店取餐中',
+	// 	trackingTitle: '10:22-10:55',
+	// 	trackingDesc: '骑手已到店，大王',
+	// 	trackingTime: '2026-03-10 15:14:30',
+	// 	products: [
+	// 		{
+	// 			image: '/static/image/shopping/jingdong/product1.png',
+	// 			title: '超值哈哈哈哈哈哈哈哈哈哈哈哈哈哈好热 少糖',
+	// 			desc: '不支持7天无理由退货',
+	// 			service: "",
+	// 			tags: [],
+	// 			price: '69.00',
+	// 			count: 1,
+	// 		}
+	// 	]
+	// },
+	// {
+	// 	id: 63254112,
+	// 	shopType: 'waimai',
+	// 	shopName: '安野屋 (AARYE) 京...',
+	// 	status: '商家备餐中',
+	// 	trackingTitle: '10:22-10:55',
+	// 	trackingDesc: '商家已接单，商品备餐中',
+	// 	trackingTime: '2026-03-10 15:14:30',
+	// 	products: [
+	// 		{
+	// 			image: '/static/image/shopping/jingdong/product1.png',
+	// 			title: '超值哈哈哈哈哈哈哈哈哈哈哈哈哈哈好热 少糖',
+	// 			desc: '不支持7天无理由退货',
+	// 			service: "",
+	// 			tags: [],
+	// 			price: '69.00',
+	// 			count: 1,
+	// 		}
+	// 	]
+	// },
+	// {
+	// 	id: 78456211,
+	// 	shopType: 'waimai',
+	// 	shopName: '瑞幸咖啡',
+	// 	status: '完成',
+	// 	statusColor: 'gray',
+	// 	products: [
+	// 		{
+	// 			image: '/static/image/shopping/jingdong/product1.png',
+	// 			title: '多肉桃桃哈哈哈哈哈哈哈哈哈哈好和和好',
+	// 			desc: '不支持7天无理由退货',
+	// 			service: "",
+	// 			tags: [],
+	// 			price: '69.00',
+	// 			count: 1,
+	// 		}
+	// 	],
+	// 	promoType: 'coupon',
+	// 	promoText: '恭喜您获得3元京东购物券',
+	// 	promoAction: '去领券'
+	// },
+	// {
+	// 	id: 56322115,
+	// 	shopType: 'waimai',
+	// 	shopName: '瑞幸咖啡',
+	// 	status: '完成',
+	// 	statusColor: 'gray',
+	// 	products: [
+	// 		{
+	// 			image: '/static/image/shopping/jingdong/product1.png',
+	// 		},
+	// 		{
+	// 			image: '/static/image/shopping/jingdong/product1.png',
+	// 		},
+	// 		{
+	// 			image: '/static/image/shopping/jingdong/product1.png',
+	// 		}
+	// 	],
+	// 	price: '17.00',
+	// 	count: 2,
+	// },
+	// {
+	// 	id: 52322221,
+	// 	shopType: 'waimai',
+	// 	shopName: '瑞幸咖啡',
+	// 	status: '已取消',
+	// 	statusColor: 'gray',
+	// 	products: [
+	// 		{
+	// 			image: '/static/image/shopping/jingdong/product1.png',
+	// 			title: '多肉桃桃哈哈哈哈哈哈哈哈哈哈好和和好',
+	// 			desc: '不支持7天无理由退货',
+	// 			tags: [],
+	// 			service: "",
+	// 			price: '69.00',
+	// 			count: 1,
+	// 		}
+	// 	]
+	// },
+	// {
+	// 	id: 8562245551,
+	// 	shopType: 'self',
+	// 	shopName: '安野屋 (AARYE) 京联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
+	// 	status: '等待付款',
+	// 	statusDesc: '20小时11分钟',
+	// 	products: [
+	// 		{
+	// 			image: '/static/image/shopping/jingdong/product1.png',
+	// 			title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
+	// 			desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
+	// 			tags: ['无理由退货政策'],
+	// 			service: "无理由退货政策",
+	// 			price: '69.00',
+	// 			count: 1,
+	// 		}
+	// 	],
+	// 	promoType: 'text',
+	// 	promoHighlight: '白条支付券0.5元优惠券',
+	// },
+	// {
+	// 	id: 5504455,
+	// 	shopType: 'none',
+	// 	shopName: '甜小南旗舰店',
+	// 	status: '正在出库',
+	// 	trackingTitle: '仓库处理中',
+	// 	trackingDesc: '预计 3月12日24:00 前发货，3月15日 24:00 前送达',
+	// 	trackingTime: '2026-03-10 15:14:30',
+	// 	products: [
+	// 		{
+	// 			image: '/static/image/shopping/jingdong/product1.png',
+	// 			title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
+	// 			desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
+	// 			tags: ['无理由退货政策'],
+	// 			service: "无理由退货政策",
+	// 			price: '69.00',
+	// 			count: 1,
+	// 		}
+	// 	],
+	// 	promoType: 'plus',
+	// 	promoText: '告别凑单, 享免运优惠',
+	// },
+	// {
+	// 	id: 585552,
+	// 	shopType: 'self',
+	// 	shopName: '甜小南旗舰店',
+	// 	status: '完成',
+	// 	statusColor: 'gray',
+	// 	trackingTitle: '已签收',
+	// 	trackingDesc: '您的订单已签收，可对快递员的服务进行评价或打赏哦~',
+	// 	trackingTime: '2026-03-10 15:14:30',
+	// 	products: [
+	// 		{
+	// 			image: '/static/image/shopping/jingdong/product1.png',
+	// 			title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
+	// 			desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
+	// 			tags: ['无理由退货政策'],
+	// 			service: "无理由退货政策",
+	// 			price: '69.00',
+	// 			count: 1,
+	// 		}
+	// 	],
+	// 	promoType: 'plus',
+	// 	promoText: '告别凑单, 享免运优惠',
+	// 	hasMore: true,
+	// },
+	// {
+	// 	id: 4545451,
+	// 	shopType: 'jd',
+	// 	shopName: '甜小南旗舰店',
+	// 	status: '完成',
+	// 	statusColor: 'gray',
+	// 	products: [
+	// 		{
+	// 			image: '/static/image/shopping/jingdong/product1.png',
+	// 			title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
+	// 			desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
+	// 			tags: ['无理由退货政策'],
+	// 			service: "无理由退货政策",
+	// 			price: '1669.00',
+	// 			count: 1,
+	// 		}
+	// 	],
+	// 	hasMore: true,
+	// },
+	// {
+	// 	id: 1236524,
+	// 	shopType: 'self',
+	// 	shopName: '甜小南旗舰店',
+	// 	status: '已取消',
+	// 	statusColor: 'gray',
+	// 	products: [
+	// 		{
+	// 			image: '/static/image/shopping/jingdong/product1.png',
+	// 			title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
+	// 			desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
+	// 			tags: ['无理由退货政策'],
+	// 			service: "无理由退货政策",
+	// 			price: '1669.00',
+	// 			count: 1,
+	// 		}
+	// 	]
+	// }
 ]);
 </script>
 
@@ -431,7 +581,7 @@ const mockOrderList = ref([
 	height: 60rpx;
 	display: flex;
 	align-items: center;
-	border: 1rpx solid #E5E5E5;
+	border: 0.5px solid #E5E5E5;
 
 	.search-icon {
 		width: 36rpx;
@@ -603,6 +753,12 @@ const mockOrderList = ref([
 	padding: 0 20rpx;
 }
 
+
+.bottom-fixed {
+	display: flex;
+	flex-direction: column;
+}
+
 .bottom-item {
 	display: flex;
 	align-items: center;
@@ -622,7 +778,8 @@ const mockOrderList = ref([
 
 .upload-screenshot-box {
 	width: 100%;
-	height: 540rpx;
+	flex: 1;
+	min-height: 540rpx;
 	background-color: #FFFFFF;
 	display: flex;
 	align-items: center;
@@ -647,4 +804,69 @@ const mockOrderList = ref([
 		}
 	}
 }
+
+.empty-state {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 40rpx 0 64rpx;
+
+	.empty-icon {
+		height: 220rpx;
+		margin-bottom: 12rpx;
+	}
+
+	.empty-text {
+		font-size: 22rpx;
+		color: #999A9E;
+		line-height: 24rpx;
+	}
+}
+
+.action-menu-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 1000;
+}
+
+.action-menu-bubble {
+	position: fixed;
+	background-color: #3B3C3E;
+	border-radius: 12rpx;
+	width: 200rpx;
+	transform: translate(-50%, calc(-100% - 15px));
+	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
+	display: flex;
+	flex-direction: column;
+
+	.menu-item {
+		color: #FFFFFF;
+		font-size: 26rpx;
+		text-align: center;
+		padding: 24rpx 0;
+		line-height: 26rpx;
+	}
+
+	.menu-line {
+		height: 0.5px;
+		background-color: rgba(255, 255, 255, 0.1);
+		margin: 0 24rpx;
+	}
+
+	.bubble-arrow {
+		position: absolute;
+		bottom: -12rpx;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 0;
+		height: 0;
+		border-left: 12rpx solid transparent;
+		border-right: 12rpx solid transparent;
+		border-top: 14rpx solid #3B3C3E;
+	}
+}
 </style>
\ No newline at end of file
diff --git a/pages/shopping/jingdong/order-detail/order-detail.vue b/pages/shopping/jingdong/order-detail/order-detail.vue
new file mode 100644
index 0000000..d16fe0d
--- /dev/null
+++ b/pages/shopping/jingdong/order-detail/order-detail.vue
@@ -0,0 +1,1428 @@
+<template>
+	<view>
+		<nav-bar title="订单详情" bgColor="#F2F3F7">
+			<!-- <template v-slot:left>
+				<image class="back-icon" src="/static/image/common/back.png" mode="aspectFit"></image>
+			</template> -->
+			<template v-slot:center>
+				<view class="title-box">
+					<image v-if="order.status == '已取消'" src="/static/image/shopping/jingdong/detail/cancel.png"
+						mode="aspectFit" class="wait-icon">
+					</image>
+					<image v-else src="/static/image/shopping/jingdong/detail/wait.png" mode="aspectFit"
+						class="wait-icon">
+					</image>
+					<text>{{ order.status }}</text>
+				</view>
+			</template>
+			<template v-slot:right>
+				<view class="right-box">
+					<image class="icon" src="/static/image/shopping/jingdong/detail/share.png" mode="aspectFit">
+					</image>
+					<image class="icon" src="/static/image/shopping/jingdong/detail/more.png" mode="aspectFit">
+					</image>
+				</view>
+			</template>
+		</nav-bar>
+		<!-- 等待付款 -->
+		<template v-if="order.status == '等待付款'">
+			<view class="tip-box">
+				<text>还剩 <text style="color: #DD223F;font-weight: 500;">18 : 25 : 46</text> 订单自动取消</text>
+			</view>
+			<view class="address-info">
+				<view>
+					<view>
+						<image class="location" src="/static/image/shopping/jingdong/detail/location.png"></image>
+						<text class="name">{{ order.consignee }}</text>
+						<text class="number">{{ formattedPhone }}</text>
+					</view>
+					<view>
+						<text class="address">{{ order.fullAddress }}</text>
+					</view>
+				</view>
+				<view class="edit-btn">
+					<text>修改</text>
+				</view>
+			</view>
+		</template>
+
+		<!-- 正在出库 -->
+		<template v-if="order.status == '正在出库'">
+			<view class="outbound-info">
+				<image class="outbound-icon" src="/static/image/shopping/jingdong/detail/xiadan.png" mode="aspectFit">
+				</image>
+				<view class="outbound-info-content">
+					<view class="title-info">
+						<view>
+							<text>{{ order.status === '正在出库' ? '已下单' : order.status }} </text>
+							<text>{{ order.trackingDesc || '预计送达时间' }}</text>
+						</view>
+						<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
+					</view>
+					<text class="desc">{{ order.trackingDesc2 }}</text>
+					<view class="address-box">
+						<view class="top">
+							<text class="address">{{ order.fullAddress }}</text>
+							<view class="edit-btn">修改</view>
+						</view>
+						<view class="phone">{{ order.consignee }} {{ formattedPhone }}</view>
+					</view>
+				</view>
+			</view>
+		</template>
+
+		<!-- 已取消 -->
+		<template v-if="order.status == '已取消'">
+			<view class="cancel-progress-box">
+				<view class="cancel-content">
+					<view class="title-row">
+						<view class="left">
+							<image class="icon" src="/static/image/shopping/jingdong/detail/tuikuan.png"
+								mode="aspectFit">
+							</image>
+							<text class="title">取消/退款进度</text>
+						</view>
+
+						<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
+					</view>
+					<text class="desc">您的订单已取消，请查看取消进度详情。</text>
+				</view>
+			</view>
+
+			<view class="order-status-box">
+				<view class="status-main">
+					<image class="status-icon" src="/static/image/shopping/jingdong/detail/xiadan.png" mode="aspectFit">
+					</image>
+					<view class="status-content">
+						<view class="title-row">
+							<text class="title">已下单</text>
+							<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
+						</view>
+					</view>
+				</view>
+				<view class="progress-box">
+					<text class="desc">您提交了订单，请等待系统确认</text>
+				</view>
+				<view class="bottom-box">
+					<view class="dot"></view>
+					<view>
+						<text class="desc">{{ order.fullAddress }}</text>
+						<view class="name">{{ order.consignee }} {{ formattedPhone }}</view>
+					</view>
+				</view>
+			</view>
+		</template>
+
+		<!-- 签收 -->
+		<template v-if="order.status == '完成' && order.trackingTitle == '已签收'">
+			<view class="order-status-box">
+				<view class="status-main">
+					<image class="status-icon" src="/static/image/shopping/jingdong/detail/qianshou.png"
+						mode="aspectFit">
+					</image>
+					<view class="status-content">
+						<view class="title-row">
+							<text class="title" style="color: #1A1A1A;">已签收</text>
+							<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
+						</view>
+					</view>
+				</view>
+				<view class="progress-box" style="height: 192rpx;">
+					<text class="text">快递运输 · 温馨提示：您的订单预计3月11日09:00- 15:53送达</text>
+					<view class="upload-box">
+						<view class="info-box">
+							<view class="image-box">
+								<image class="w100 h100" :src="order.courierImg" mode="aspectFit"></image>
+							</view>
+							<text class="name">{{ order.courier }}</text>
+						</view>
+						<view class="btn-box">
+							<view class="btn grey">联系Ta</view>
+							<view class="btn red">打赏Ta</view>
+						</view>
+
+					</view>
+				</view>
+				<view class="bottom-box">
+					<view class="dot"></view>
+					<view>
+						<text class="desc">{{ order.fullAddress }}</text>
+						<view class="name">{{ order.consignee }} {{ formattedPhone }}</view>
+					</view>
+				</view>
+			</view>
+		</template>
+
+		<!-- 商品卡片 -->
+		<view class="product-card">
+			<view class="title-box">
+				<view class="left-box">
+					<image v-if="order.shopType == 'self'" class="img"
+						src="/static/image/shopping/jingdong/detail/ziyin.png">
+					</image>
+					<image v-if="order.shopType == 'jd'" style="width: 32rpx;height: 32rpx;margin-right: 12rpx;"
+						src="/static/image/shopping/jingdong/JD.png">
+					</image>
+					<text class="title">{{ order.shopName }}</text>
+				</view>
+				<uni-icons class="right-icon" size="14" color="#1A1A1A" type="right"></uni-icons>
+			</view>
+			<view class="product-info">
+				<view class="image-box">
+					<image v-if="order.products && order.products[0]" class="w100 h100" :src="order.products[0].image">
+					</image>
+				</view>
+				<view class="info-box">
+					<view class="name">{{ order.products && order.products[0]?.title }}</view>
+					<view class="desc">{{ order.products && order.products[0]?.desc }}</view>
+					<view class="tag">{{ order.products && order.products[0]?.service }}</view>
+				</view>
+				<view class="price-box">
+					<view v-if="(order.status != '等待付款' && order.status != '已取消') && order.discount > 0"
+						class="flex-center" style="display: inline-block;">
+						<image style="width: 22rpx;height: 22rpx;margin-right: 4rpx;"
+							src="/static/image/shopping/jingdong/detail/help.png">
+						</image>
+						<text
+							style="font-size: 22rpx;height: 22rpx;color: #87868E;font-weight: 300;line-height: 22rpx;margin-right: 2rpx;">到手价</text>
+					</view>
+					<text class="price wx-font-medium">￥{{
+						order.status == '等待付款' || order.status == '已取消' ?
+							Number(order.products[0]?.price).toFixed(2) :
+							Number(order.products[0]?.price - order.discount).toFixed(2)
+					}}</text>
+					<view v-if="(order.status != '等待付款' && order.status != '已取消') && order.discount > 0"
+						class="wx-font-medium"
+						style="margin-top: 2rpx;text-align: right;color: #87868E;font-weight: 500;">
+						<text style="font-size: 24rpx;">￥{{ Number(order.products[0]?.price).toFixed(2) }}</text>
+					</view>
+				</view>
+			</view>
+			<view v-if="order.status == '等待付款' || order.status == '已取消'" class="btn-box flex"
+				style="margin-top: 60rpx;">
+				<view class="left flex-1 flex-center " style="border-right : 0.5px solid #D8D8D8;">
+					<image class="img" src="/static/image/shopping/jingdong/detail/dianpukefu.png"></image>
+					<view class="name flex-column flex-align-center">
+						<text>店铺客服</text>
+						<text v-if="order.status == '等待付款'" class="text">商品/活动</text>
+					</view>
+				</view>
+				<view class="right flex-1 flex-center ">
+					<image class="img" src="/static/image/shopping/jingdong/detail/jingdongkefu.png"></image>
+					<view class="name flex-column flex-align-center">
+						<text>京东客服</text>
+						<text v-if="order.status == '等待付款'" class="text">物流/平台</text>
+					</view>
+				</view>
+			</view>
+			<view v-else class="btn-box">
+				<view class="btn" :class="{ red: btn == '送朋友' }" v-for="btn in btnList">
+					<image v-if="btn == '送朋友'" class="icon" src="/static/image/shopping/jingdong/detail/gift.png">
+					</image>
+					{{ btn }}
+				</view>
+			</view>
+
+			<!-- 订单信息 -->
+			<view v-if="!(order.status == '等待付款' || order.status == '已取消')" class="order-info-box product-info-box">
+				<view v-if="activeTab != 'dengdaifukuan' && activeTab != 'yiquxiao'" class="item flex-justify-between"
+					style="margin-top: 32rpx;">
+					<text class="label shrink-0 flex-align-center">实付款</text>
+					<view class="flex-1 flex-align-center"
+						style="justify-content: flex-end;width: 300rpx;overflow-x: auto;margin-left: 20rpx;align-items: baseline;overflow-y: hidden;">
+						<view v-if="order.discount > 0" class="wx-font-medium flex flex-align-center"
+							style="height: 32rpx;">
+							<view class="flex" style="align-items: baseline;color: #FF4444;">
+								<text>共减￥</text><text style="font-size: 32rpx;font-weight: 500;">{{ order.discount
+								}}</text>
+							</view>
+						</view>
+						<view class="wx-font-medium flex flex-align-center" style="margin-left: 8rpx; height: 32rpx;">
+							<view class="flex" style="align-items: baseline;color: #1A1A1A;">
+								<text>合计￥</text><text style="font-size: 36rpx;font-weight: 500;">{{ order.totalPrice
+								}}</text>
+							</view>
+						</view>
+					</view>
+
+				</view>
+				<view class="order-info">
+					<view class="item flex-justify-between" v-for="item in order.orderInfo"
+						v-show="isOrderInfoExpanded || ['订单编号', '支付方式'].includes(item.label)"
+						@click="onClickItemInfo(item)">
+						<text class="label shrink-0 flex-align-center" style="color: #87868E;font-size: 26rpx;">{{
+							item.label
+						}}</text>
+						<view class="flex-1 flex-align-center"
+							style="justify-content: flex-end;width: 300rpx;overflow-x: auto;margin-left: 20rpx;">
+							<text style="color: #1A1A1A;font-size: 26rpx;">{{ item.value }}</text>
+							<uni-icons v-if="!item.type" type="right" size="10" color="#1A1A1A"
+								style="margin-top: 0rpx;margin-left: 4rpx;"></uni-icons>
+							<view v-if="item.type == 'number'" class="flex-center"
+								style="color: #1A1A1A;font-size: 26rpx;">
+								<view style="width: 2rpx;height: 16rpx;background-color: #8D8D8D;margin: 0 8rpx;">
+								</view>
+								复制
+							</view>
+						</view>
+
+					</view>
+				</view>
+				<view class="delivery-info" v-if="isOrderInfoExpanded">
+					<view class="item flex-justify-between" v-for="item in order.sendType"
+						@click="onClickItemInfo(item)">
+						<text class="label shrink-0" style="color: #87868E;font-size: 26rpx;">{{ item.label }}</text>
+						<view class="flex-1 flex-align-center"
+							style="justify-content: flex-end;width: 300rpx;overflow-x: auto;margin-left: 20rpx;">
+							<text style="color: #1A1A1A;font-size: 26rpx;">{{ item.value }}</text>
+						</view>
+					</view>
+				</view>
+				<view class="flex-center" style="padding-top: 10rpx;"
+					@click="isOrderInfoExpanded = !isOrderInfoExpanded">
+					<text style="color: #87868E;font-size: 26rpx;">{{ isOrderInfoExpanded ? '收起' : '全部订单信息' }}</text>
+					<uni-icons style="margin-left: 8rpx;" :type="isOrderInfoExpanded ? 'up' : 'down'" size="9"
+						color="#87868E"></uni-icons>
+				</view>
+			</view>
+		</view>
+
+		<!-- 商品总价 -->
+		<view v-if="order.status == '等待付款' || order.status == '已取消'" class="product-price">
+			<view class="title flex-justify-between">
+				<text>商品总价</text>
+				<text class="wx-font-medium" style="font-weight: 500;">￥{{ order.products && order.products[0]?.price
+				}}</text>
+			</view>
+			<view class="item flex-justify-between">
+				<text class="label">运费</text>
+				<text class="value wx-font-medium">￥{{ order.carriage }}</text>
+			</view>
+			<view class="price">需付款 <text class="number wx-font-medium">￥{{ order.totalPrice }}</text></view>
+		</view>
+
+		<!-- 订单信息 (等待付款/已取消状态) -->
+		<view v-if="order.status == '等待付款' || order.status == '已取消'" class="order-info-box">
+			<view class="title flex-justify-between" @click="isOrderInfoExpanded = !isOrderInfoExpanded">
+				<text>订单信息</text>
+				<view style="font-size: 22rpx;margin-right: 6rpx;font-weight: 400;color: #87868E;"
+					class="flex-align-center">
+					{{ isOrderInfoExpanded ? '收起' : '展开' }}
+					<uni-icons :type="isOrderInfoExpanded ? 'up' : 'down'" size="9" color="#87868E"
+						style="margin-left: 8rpx;"></uni-icons>
+				</view>
+			</view>
+			<view class="order-info">
+				<view class="item flex-justify-between" v-for="item in order.orderInfo"
+					v-show="isOrderInfoExpanded || ['订单编号', '支付方式', '发票类型'].includes(item.label)"
+					@click="onClickItemInfo(item)">
+					<text class="label shrink-0" style="color: #87868E;font-size: 26rpx;">{{ item.label }}</text>
+					<view class="flex-1 flex-align-center"
+						style="justify-content: flex-end;width: 300rpx;overflow-x: auto;margin-left: 20rpx;">
+						<text style="color: #1A1A1A;font-size: 26rpx;">{{ item.label === '订单编号' ? item.value :
+							item.value
+						}}</text>
+						<uni-icons v-if="!item.type" type="right" size="10" color="#1A1A1A"
+							style="margin-top: 0rpx;margin-left: 4rpx;"></uni-icons>
+						<view v-if="item.type == 'number'" class="flex-center" style="color: #1A1A1A;font-size: 26rpx;">
+							<view style="width: 2rpx;height: 16rpx;background-color: #8D8D8D;margin: 0 8rpx;"></view>
+							复制
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="delivery-info" v-if="isOrderInfoExpanded">
+				<view class="item flex-justify-between" v-for="item in order.sendType" @click="onClickItemInfo(item)">
+					<text class="label shrink-0" style="color: #87868E;font-size: 26rpx;">{{ item.label }}</text>
+					<view class="flex-1 flex-align-center"
+						style="justify-content: flex-end;width: 300rpx;overflow-x: auto;margin-left: 20rpx;">
+						<text style="color: #1A1A1A;font-size: 26rpx;">{{ item.value }}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 快速解决问题 -->
+		<view v-if="order.status != '等待付款' || order.status == '已取消'" class="help-box card">
+			<view class="title">快速解决问题</view>
+			<view class="tag-box flex">
+				<view class="tag">商品坏了怎么办</view>
+				<view class="tag">开错发票怎么办</view>
+				<view class="tag">商品降价怎么办</view>
+			</view>
+
+			<view class="btn-box flex" style="margin-top: 30rpx;">
+				<view class="left flex-1 flex-center " style="border-right : 0.5px solid #D8D8D8;">
+					<image class="img" src="/static/image/shopping/jingdong/detail/dianpukefu.png"></image>
+					<view class="name flex-column">
+						<text>店铺客服</text>
+						<text class="text">商品/活动</text>
+					</view>
+				</view>
+				<view class="right flex-1 flex-center ">
+					<image class="img" src="/static/image/shopping/jingdong/detail/jingdongkefu.png"></image>
+					<view class="name flex-column">
+						<text>京东客服</text>
+						<text class="text">物流/售后/平台</text>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 安心保障 -->
+		<view class="card security-box">
+			<view class="title flex-justify-between flex-align-center">安心保障
+				<view class="flex-align-center">
+					<text class="text">查看全部 </text>
+					<uni-icons type="right" size="10" color="#87868E"></uni-icons>
+				</view>
+			</view>
+			<view class="flex content">
+				<image class="icon" src="/static/image/shopping/jingdong/detail/jiagebaozhang.png"></image>
+				<view class="flex-1">
+					<view class="flex-justify-between flex-align-center">
+						<text class="label">价格保障</text>
+						<uni-icons type="right" size="10" color="#87868E"></uni-icons>
+					</view>
+					<view class="tag-box flex-align-center flex-justify-between">
+						<view class="flex-align-center">
+							<text>买贵赔三倍</text>
+							<text class="desc">跨平台比价贵就赔</text>
+						</view>
+						<view class="flex-align-center">
+							<text class="desc">去申请</text>
+							<uni-icons type="right" size="10" color="#87868E"></uni-icons>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="card plus-box">
+			<view class="flex-align-center">
+				<image class="plus-logo" src="/static/image/shopping/jingdong/detail/plus-logo.png"></image>
+				<image class="plus-text" src="/static/image/shopping/jingdong/detail/plus-text.png"></image>
+				<text class="dot"></text>
+				<text class="flex-1" style="font-size: 26rpx;color: #342D27;">领30 元无门槛红包</text>
+				<text style="font-size: 22rpx;color: #87868E;margin-right: 10rpx;">去看看</text>
+				<uni-icons type="right" color="#1A1A1A" size="10"></uni-icons>
+			</view>
+			<view class="text">购物再享折上95折</view>
+		</view>
+
+		<view class="w100 flex-center" style="margin-top: 40rpx;margin-bottom: 32rpx;">
+			<image style="width: 32rpx;height: 20rpx;" src="/static/image/shopping/jingdong/detail/like-left.png">
+			</image>
+			<text
+				style="font-size: 26rpx;color: #1A1A1A;line-height: 26rpx;font-weight: 500;margin: 0 10rpx;">你可能还喜欢</text>
+			<image style="width: 32rpx;height: 20rpx;" src="/static/image/shopping/jingdong/detail/like-right.png">
+			</image>
+		</view>
+
+		<!-- 上传图片 -->
+		<view class="upload-screenshot-box">
+			<view class="upload-screenshot-content">
+				<image class="upload-screenshot" src="/static/image/common/upload-screenshot.png" mode="aspectFit">
+				</image>
+				<view class="upload-screenshot-text">长按替换截图</view>
+			</view>
+		</view>
+		<view class="fixed-bottom flex-align-center flex-justify-between">
+			<text>{{ bottomText }}</text>
+			<view class="btn-box">
+				<view v-if="order.status == '等待付款'" class="big-btn ">立即支付<text class="wx-font-medium money">¥69</text>
+				</view>
+				<view v-else class="flex-align-center">
+					<view v-for="btn in bottomBtns" :key="btn" class="bottom-btn " :class="{ red: btn == '再次购买' }">
+						{{ btn }}
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="placeholder"></view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { onLoad, onShow } from '@dcloudio/uni-app';
+import { util } from '@/utils/common.js';
+
+/**
+ * 模拟订单列表
+ */
+const mockOrderList = ref([]);
+
+const bottomBtns = computed(() => {
+	if (order.value.status == '正在出库') {
+		return ['申请退款', '修改订单', '我要催单']
+	} else if (order.value.status == '完成') {
+		if (order.value.trackingTitle == '已签收') {
+			return ['查看发票', '退货/售后', '再次购买']
+		} else {
+			return ['查看物流', '退货/售后', '再次购买']
+		}
+	} else if (order.value.status == '已取消') {
+		return ['再次购买']
+	}
+})
+
+const bottomText = computed(() => {
+	if (order.value.status == '等待付款') {
+		return '取消订单'
+	} else if (order.value.status == '已取消') {
+		return '删除订单'
+	} else {
+		return '更多'
+	}
+})
+
+const btnList = computed(() => {
+	let btns = []
+	if (order.value.status == '正在出库') {
+		btns = ['送朋友', '加购物车']
+	} else if (order.value.status == '完成') {
+		if (order.value.trackingTitle == '已签收') {
+			btns = ['送朋友', '卖了换钱', '加购物车', '申请售后']
+		} else {
+			btns = ['卖了换钱', '使用帮助', '申请售后']
+		}
+	}
+	return btns
+})
+
+const order = ref({});
+onLoad((options) => {
+	console.log('详情页参数:', options);
+	const id = options.id;
+	if (!id) return;
+
+	// 1. 优先从本地缓存查找
+	const cachedList = uni.getStorageSync('jingdongShopping') || [];
+	let target = cachedList.find(item => String(item.id) === String(id));
+
+	// 2. 如果缓存没有，再从静态 mock 列表查找
+	if (!target) {
+		target = mockOrderList.value.find(item => String(item.id) === String(id));
+	}
+
+	if (target) {
+		order.value = target;
+		console.log('成功匹配订单数据:', order.value);
+	} else {
+		console.error('未找到指定的订单数据, ID:', id);
+	}
+});
+
+onShow(() => {
+	// #ifdef APP-PLUS
+	util.setAndroidSystemBarColor('#FFFFFF')
+	setTimeout(() => {
+		plus.navigator.setStatusBarStyle("dark");
+	}, 500);
+	// #endif
+})
+
+// 手机号脱敏处理 (增强容错版)
+const formattedPhone = computed(() => {
+	const phone = order.value?.phone;
+	if (!phone) return "";
+	const p = String(phone);
+	// 只要长度大于等于 7 位，就执行脱敏
+	if (p.length >= 7) {
+		return p.slice(0, 3) + '****' + p.slice(-4);
+	}
+	return p;
+});
+
+// 订单信息展开状态 (进入页面默认收起)
+const isOrderInfoExpanded = ref(false);
+</script>
+
+<style>
+/* 直接在页面导入公共样式 */
+@import '/common/main.css';
+</style>
+<style lang="less" scoped>
+::v-deep .uni-navbar__header {
+	padding: 0 28rpx !important;
+}
+
+.title-box {
+	display: flex;
+	align-items: center;
+
+	.wait-icon {
+		width: 40rpx;
+		height: 40rpx;
+		margin-right: 12rpx;
+	}
+
+	text {
+		font-size: 36rpx;
+		font-weight: 500;
+		color: #1a1a1a;
+	}
+}
+
+.right-box {
+	display: flex;
+
+	.icon {
+		width: 40rpx;
+		height: 40rpx;
+		margin-left: 20rpx;
+	}
+}
+
+.tip-box {
+	width: 100%;
+	text-align: center;
+	font-size: 26rpx;
+	line-height: 26rpx;
+	color: #1a1a1a;
+	margin-bottom: 16rpx;
+}
+
+.address-info {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 30rpx 22rpx;
+	background-color: #ffffff;
+	border-radius: 24rpx;
+	margin: 0 16rpx;
+
+	.location {
+		width: 28rpx;
+		height: 28rpx;
+		margin-right: 14rpx;
+	}
+
+	.name {
+		margin-right: 16rpx;
+		font-size: 30rpx;
+		color: #1A1A1A;
+		font-weight: 500;
+	}
+
+	.number {
+		font-size: 26rpx;
+		line-height: 30rpx;
+		color: #8C8C8C;
+	}
+
+	.address {
+		color: #8C8C8C;
+		font-size: 26rpx;
+		line-height: 42rpx;
+	}
+
+	.edit-btn {
+
+		height: 54rpx;
+		border-radius: 8rpx;
+		border: 0.5px solid #C5C5C5;
+		padding: 0 52rpx;
+		font-size: 26rpx;
+		line-height: 52rpx;
+		color: #1A1A1A;
+		margin-left: 28rpx;
+
+		text {
+			white-space: nowrap;
+		}
+
+	}
+}
+
+.outbound-info {
+	display: flex;
+	align-items: flex-start;
+	background-color: #ffffff;
+	border-radius: 24rpx;
+	margin: 10rpx 16rpx;
+	padding: 22rpx 22rpx 30rpx;
+
+	.outbound-icon {
+		width: 46rpx;
+		height: 46rpx;
+		margin-right: 16rpx;
+	}
+
+	.outbound-info-content {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+
+		.title-info {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			font-size: 30rpx;
+			line-height: 46rpx;
+			font-weight: 500;
+			color: #1A1A1A;
+		}
+
+		.desc {
+			margin-top: 4rpx;
+			font-size: 26rpx;
+			color: #8C8C8C;
+			line-height: 36rpx;
+		}
+
+		.address-box {
+			margin-top: 18rpx;
+
+			.top {
+				display: flex;
+				justify-content: space-between;
+
+				.edit-btn {
+					width: 116rpx;
+					height: 54rpx;
+					border-radius: 8rpx 8rpx 8rpx 8rpx;
+					border: 0.5px solid #C5C5C5;
+					text-align: center;
+					font-size: 26rpx;
+					line-height: 50rpx;
+					color: #1A1A1A;
+				}
+			}
+
+			.address {
+				font-size: 30rpx;
+				line-height: 30rpx;
+				color: #1A1A1A;
+				font-weight: 500;
+				margin-top: 8rpx;
+			}
+
+			.phone {
+				font-size: 26rpx;
+				color: #8C8C8C;
+				line-height: 26rpx;
+			}
+		}
+	}
+}
+
+.cancel-progress-box {
+	display: flex;
+	align-items: center;
+	background-color: #ffffff;
+	border-radius: 24rpx;
+	margin: 10rpx 16rpx;
+	padding: 26rpx 22rpx 30rpx;
+
+	.cancel-icon {
+		width: 60rpx;
+		height: 60rpx;
+		margin-right: 16rpx;
+	}
+
+	.cancel-content {
+		flex: 1;
+
+		.title-row {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.left {
+				display: flex;
+				align-items: center;
+			}
+
+			.icon {
+				width: 46rpx;
+				height: 46rpx;
+				margin-right: 16rpx;
+			}
+
+			.title {
+				font-size: 30rpx;
+				line-height: 30rpx;
+				font-weight: 500;
+				color: #1A1A1A;
+			}
+		}
+
+		.desc {
+			margin-top: 4rpx;
+			font-size: 26rpx;
+			color: #8C8C8C;
+			line-height: 36rpx;
+		}
+	}
+}
+
+.order-status-box {
+	background-color: #ffffff;
+	border-radius: 24rpx;
+	margin: 16rpx;
+	padding: 22rpx 22rpx 30rpx;
+
+	.status-main {
+		display: flex;
+		align-items: flex-start;
+
+		.status-icon {
+			width: 46rpx;
+			height: 46rpx;
+			margin-right: 16rpx;
+		}
+
+		.status-content {
+			flex: 1;
+
+			.title-row {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.title {
+					font-size: 28rpx;
+					font-weight: 700;
+					color: #E40C24;
+				}
+			}
+
+			.desc {
+				margin-top: 4rpx;
+				font-size: 26rpx;
+				color: #8C8C8C;
+				line-height: 36rpx;
+			}
+		}
+	}
+
+	.progress-box {
+		margin-left: 22rpx;
+		border-left: 0.5px solid #F83021;
+		margin-top: 6rpx;
+		padding-left: 40rpx;
+		font-size: 26rpx;
+		color: #8C8C8C;
+		height: 62rpx;
+
+
+		.text {
+			font-size: 26rpx;
+			color: #8C8C8C;
+			line-height: 36rpx;
+		}
+
+		.upload-box {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			background-color: #F7F8FC;
+			margin-top: 18rpx;
+			border-radius: 8rpx;
+			padding: 6rpx;
+
+			.info-box {
+				display: flex;
+				align-items: center;
+			}
+
+			.btn-box {
+				display: flex;
+
+				.btn {
+					margin-left: 16rpx;
+					border-radius: 8rpx;
+					height: 46rpx;
+					line-height: 42rpx;
+					font-size: 22rpx;
+					color: #1A1A1A;
+					line-height: 46rpx;
+					padding: 0 22rpx;
+				}
+
+				.grey {
+					border: 0.5px solid #C5C5C5;
+					color: #1A1A1A;
+				}
+
+				.red {
+					border: 0.5px solid #ED1C04;
+					color: #ED1C04;
+				}
+			}
+
+			.image-box {
+				width: 56rpx;
+				height: 56rpx;
+				background: #CBCEDA;
+				border-radius: 50%;
+				overflow: hidden;
+				margin-right: 14rpx;
+			}
+
+			.name {
+				font-size: 22rpx;
+				color: #3D3D3D;
+			}
+		}
+	}
+
+	.bottom-box {
+		display: flex;
+		padding-left: 16rpx;
+
+		.dot {
+			width: 14rpx;
+			height: 14rpx;
+			background: #F83021;
+			opacity: 0.5;
+			border-radius: 50%;
+			margin-right: 32rpx;
+			margin-top: 12rpx;
+		}
+
+		.desc {
+			font-size: 30rpx;
+			color: #1A1A1A;
+			line-height: 30rpx;
+			font-weight: 500;
+		}
+
+		.name {
+			font-size: 26rpx;
+			color: #8C8C8C;
+			line-height: 26rpx;
+			margin-top: 12rpx;
+		}
+	}
+
+	.address-timeline {
+		position: relative;
+		margin-top: 10rpx;
+		padding-left: 76rpx;
+
+		.line {
+			position: absolute;
+			left: 29rpx;
+			top: -40rpx;
+			bottom: 30rpx;
+			width: 2rpx;
+			background-color: #F8D3D7;
+		}
+
+		.dot {
+			position: absolute;
+			left: 21rpx;
+			bottom: 40rpx;
+			width: 18rpx;
+			height: 18rpx;
+			background-image: radial-gradient(circle, #F8A7AD 100%, transparent);
+			border-radius: 50%;
+		}
+
+		.info {
+			display: flex;
+			flex-direction: column;
+
+			.address {
+				font-size: 28rpx;
+				font-weight: 700;
+				color: #1A1A1A;
+				line-height: 42rpx;
+			}
+
+			.user {
+				margin-top: 4rpx;
+				font-size: 24rpx;
+				color: #8C8C8C;
+				line-height: 36rpx;
+			}
+		}
+	}
+}
+
+.product-card {
+	padding: 28rpx 22rpx;
+	margin: 16rpx;
+	background-color: #FFFFFF;
+	border-radius: 24rpx;
+
+	.title-box {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.left-box {
+			display: flex;
+			align-items: center;
+			flex: 1;
+
+			.img {
+				width: 50rpx;
+				height: 26rpx;
+				margin-right: 8rpx;
+			}
+
+			.title {
+				flex: 1;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				font-size: 26rpx;
+				color: #1A1A1A;
+				line-height: 28rpx;
+				font-weight: 700;
+			}
+		}
+
+
+
+		.right-icon {
+			margin-left: 12rpx;
+		}
+	}
+
+	.product-info {
+		display: flex;
+		margin-top: 14rpx;
+
+		.image-box {
+			width: 152rpx;
+			height: 152rpx;
+			border-radius: 24rpx;
+			overflow: hidden;
+			margin-right: 24rpx;
+		}
+
+		.info-box {
+			flex: 1;
+			margin-right: 44rpx;
+			overflow: hidden;
+
+			.name {
+				width: 100%;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				font-size: 26rpx;
+				color: #1A1A1A;
+				line-height: 28rpx;
+				font-weight: 700;
+			}
+
+			.desc {
+				margin-top: 16rpx;
+				font-size: 22rpx;
+				color: #87868E;
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 2;
+				overflow: hidden;
+			}
+
+			.tag {
+				font-size: 22rpx;
+				color: #A96F24;
+				margin-top: 18rpx;
+			}
+		}
+
+		.price-box {
+			font-weight: 500;
+			font-size: 28rpx;
+			color: #1A1A1A;
+
+			.price {
+				font-size: 700;
+			}
+		}
+	}
+
+	.btn-box {
+		display: flex;
+		justify-content: flex-end;
+		margin-top: 26rpx;
+
+		.btn {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 144rpx;
+			white-space: nowrap;
+			font-size: 22rpx;
+			line-height: 22rpx;
+			height: 60rpx;
+			line-height: 58rpx;
+			border-radius: 8rpx;
+			border: 0.5px solid #C7C7C7;
+			color: #1A1A1A;
+			margin-left: 22rpx;
+
+			.icon {
+				width: 28rpx;
+				height: 28rpx;
+				margin-right: 6rpx;
+			}
+
+
+		}
+
+		.red {
+			color: #F10F1A;
+			border: 0.5px solid #F10F1A;
+		}
+
+
+		.img {
+			width: 32rpx;
+			height: 32rpx;
+			flex-shrink: 0;
+			margin-right: 14rpx;
+		}
+	}
+
+	.name {
+		font-size: 26rpx;
+		color: #1A1A1A;
+	}
+
+	.text {
+		font-size: 22rpx;
+		color: #87868E;
+		line-height: 24rpx;
+		margin-top: 8rpx;
+	}
+}
+
+.product-price {
+	background-color: #FFFFFF;
+	padding: 38rpx 22rpx;
+	border-radius: 24rpx;
+	margin: 16rpx;
+
+	.title {
+		font-size: 32rpx;
+		color: #1A1A1A;
+		line-height: 32rpx;
+		font-weight: 700;
+	}
+
+	.item {
+		margin-top: 36rpx;
+
+		.label {
+			color: #87868E;
+			font-size: 26rpx;
+			line-height: 26rpx;
+		}
+
+		.value {
+			font-size: 32rpx;
+			line-height: 32rpx;
+			font-weight: 500;
+		}
+	}
+
+	.price {
+		display: flex;
+		justify-content: flex-end;
+		margin-top: 32rpx;
+		font-size: 26rpx;
+		color: #ED1C04;
+		line-height: 26rpx;
+		font-weight: 500;
+		align-items: baseline;
+
+		.number {
+			font-size: 36rpx;
+			font-weight: 500;
+			margin-left: 6rpx;
+		}
+	}
+}
+
+.card {
+	background-color: #ffffff;
+	margin: 16rpx;
+	border-radius: 24rpx;
+	padding: 30rpx 22rpx;
+
+	.title {
+		color: #1A1A1A;
+		font-size: 30rpx;
+		line-height: 30rpx;
+		font-weight: 700;
+	}
+}
+
+
+.help-box {
+	.tag-box {
+		margin-top: 32rpx;
+		overflow: hidden;
+
+		.tag {
+			background-color: #F5F6FA;
+			border-radius: 16rpx;
+			height: 68rpx;
+			line-height: 68rpx;
+			font-size: 26rpx;
+			color: #1A1A1A;
+			padding: 0 16rpx;
+			margin: 0 16rpx;
+		}
+
+	}
+
+	.btn-box {
+		display: flex;
+		justify-content: flex-end;
+		margin-top: 26rpx;
+
+		.img {
+			width: 32rpx;
+			height: 32rpx;
+			flex-shrink: 0;
+			margin-right: 14rpx;
+		}
+	}
+
+	.name {
+		font-size: 26rpx;
+		color: #1A1A1A;
+	}
+
+	.text {
+		font-size: 22rpx;
+		color: #87868E;
+		line-height: 24rpx;
+		margin-top: 4rpx;
+	}
+}
+
+.security-box {
+	.title {
+		.text {
+			font-size: 22rpx;
+			color: #87868E;
+			margin-right: 10rpx;
+		}
+	}
+
+	.content {
+		margin-top: 30rpx;
+
+		.icon {
+			width: 36rpx;
+			height: 36rpx;
+			margin-right: 16rpx;
+		}
+
+		.label {
+			font-size: 26rpx;
+			color: #1A1A1A;
+			line-height: 30rpx;
+			font-weight: 700;
+		}
+
+		.tag-box {
+			width: 100%;
+			height: 64rpx;
+			margin-top: 24rpx;
+			background-color: #F7F8FC;
+			border-radius: 8rpx 8rpx 8rpx 8rpx;
+			padding: 0 18rpx;
+			font-size: 26rpx;
+			color: #1A1A1A;
+
+			.desc {
+				font-size: 22rpx;
+				color: #87868E;
+				margin-left: 16rpx;
+				margin-right: 10rpx;
+			}
+		}
+	}
+
+}
+
+.plus-box {
+	padding: 30rpx 24rxp;
+	background: linear-gradient(181deg, #FDF3EA 0%, #FFFFFF 100%);
+	height: 140rpx;
+
+	.plus-logo {
+		width: 42rpx;
+		height: 26rpx;
+	}
+
+	.plus-text {
+		width: 126rpx;
+		height: 26rpx;
+		margin-left: 8rpx;
+	}
+
+	.dot {
+		display: inline-block;
+		width: 6rpx;
+		height: 6rpx;
+		background: #342D27;
+		border-radius: 50%;
+		margin: 0 12rpx;
+	}
+
+	.text {
+		margin-top: 20rpx;
+		font-size: 22rpx;
+		color: #87868E;
+		line-height: 22rpx;
+	}
+}
+
+.upload-screenshot-box {
+	width: 100%;
+	flex: 1;
+	height: 540rpx;
+	background-color: #FFFFFF;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	.upload-screenshot {
+		width: 92rpx;
+		height: 92rpx;
+	}
+
+	.upload-screenshot-content {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		justify-content: center;
+
+		.upload-screenshot-text {
+			font-size: 36rpx;
+			color: #1777FF;
+			line-height: 50rpx;
+			margin-top: 16rpx;
+		}
+	}
+}
+
+.placeholder {
+	height: 104rpx;
+	height: calc(104rpx + env(safe-area-inset-bottom));
+	height: calc(104rpx + constant(safe-area-inset-bottom));
+}
+
+.fixed-bottom {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	padding: 0 24rpx;
+	padding-top: 16rpx;
+	width: 100%;
+	min-height: 90rpx;
+	min-height: calc(90rpx + env(safe-area-inset-bottom));
+	min-height: calc(90rpx + constant(safe-area-inset-bottom));
+	background-color: #FFFFFF;
+	border-top: 0.5px solid #F2F2F2;
+
+	text {
+		font-size: 26rpx;
+		color: #4C4C4C;
+	}
+
+	.btn-box {
+		color: #ffffff;
+
+		.bottom-btn {
+			width: 152rpx;
+			height: 60rpx;
+			border-radius: 8rpx;
+			border: 0.5px solid #C7C7C7;
+			color: #1A1A1A;
+			margin-left: 16rpx;
+			text-align: center;
+			font-size: 26rpx;
+			line-height: 58rpx;
+			margin-bottom: 10rpx;
+		}
+
+		.red {
+			background-color: #FE0F24;
+			color: #FFFFFF;
+			border: none;
+			line-height: 60rpx;
+		}
+	}
+
+	.big-btn {
+		font-size: 32rpx;
+		padding: 0 124rpx;
+		height: 80rpx;
+		background-color: #FE0F24;
+		border-radius: 12rpx 12rpx 12rpx 12rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #FFFFFF;
+
+		.money {
+			font-size: 36rpx;
+			font-weight: 500;
+			color: #FFFFFF;
+			margin-left: 10rpx;
+		}
+	}
+}
+
+.order-info-box {
+	margin: 16rpx;
+	background-color: #FFFFFF;
+	border-radius: 24rpx;
+	padding: 28rpx 22rpx;
+
+	&.product-info-box {
+		padding: 0;
+		margin: 0;
+	}
+
+	.title {
+		font-size: 30rpx;
+		color: #1A1A1A;
+		line-height: 30rpx;
+		font-weight: 700;
+	}
+
+	.order-info {
+		padding-bottom: 34rpx;
+
+	}
+
+	.delivery-info {
+		border-top: 0.5px solid #F2F2F2;
+	}
+
+	.item {
+		display: flex;
+		justify-content: space-between;
+		margin-top: 24rpx;
+		height: 38rpx;
+
+		.label {
+			font-size: 26rpx;
+			color: #87868E;
+			line-height: 26rpx;
+		}
+
+		.value {
+			font-size: 26rpx;
+			color: #1A1A1A;
+			line-height: 26rpx;
+			text-align: right;
+		}
+	}
+}
+</style>
diff --git a/static/image/common/add.png b/static/image/common/add.png
new file mode 100644
index 0000000..07e11e6
Binary files /dev/null and b/static/image/common/add.png differ
diff --git a/static/image/common/edit.png b/static/image/common/edit.png
new file mode 100644
index 0000000..09bc8cb
Binary files /dev/null and b/static/image/common/edit.png differ
diff --git a/static/image/index/qita/ranking.png b/static/image/index/qita/ranking.png
new file mode 100644
index 0000000..b45de44
Binary files /dev/null and b/static/image/index/qita/ranking.png differ
diff --git a/static/image/other/dingji.png b/static/image/other/dingji.png
new file mode 100644
index 0000000..6e98fca
Binary files /dev/null and b/static/image/other/dingji.png differ
diff --git a/static/image/other/hang.png b/static/image/other/hang.png
new file mode 100644
index 0000000..889bdf4
Binary files /dev/null and b/static/image/other/hang.png differ
diff --git a/static/image/other/lawanle.png b/static/image/other/lawanle.png
new file mode 100644
index 0000000..bc8f976
Binary files /dev/null and b/static/image/other/lawanle.png differ
diff --git a/static/image/other/npc.png b/static/image/other/npc.png
new file mode 100644
index 0000000..816422b
Binary files /dev/null and b/static/image/other/npc.png differ
diff --git a/static/image/other/ranking/dingji.png b/static/image/other/ranking/dingji.png
new file mode 100644
index 0000000..e0213c6
Binary files /dev/null and b/static/image/other/ranking/dingji.png differ
diff --git a/static/image/other/ranking/dingji_skin.png b/static/image/other/ranking/dingji_skin.png
new file mode 100644
index 0000000..754ec6e
Binary files /dev/null and b/static/image/other/ranking/dingji_skin.png differ
diff --git a/static/image/other/ranking/hang.png b/static/image/other/ranking/hang.png
new file mode 100644
index 0000000..e0ff1fb
Binary files /dev/null and b/static/image/other/ranking/hang.png differ
diff --git a/static/image/other/ranking/hang_skin.png b/static/image/other/ranking/hang_skin.png
new file mode 100644
index 0000000..3154568
Binary files /dev/null and b/static/image/other/ranking/hang_skin.png differ
diff --git a/static/image/other/ranking/happy.png b/static/image/other/ranking/happy.png
new file mode 100644
index 0000000..9f90471
Binary files /dev/null and b/static/image/other/ranking/happy.png differ
diff --git a/static/image/other/ranking/lawanle.png b/static/image/other/ranking/lawanle.png
new file mode 100644
index 0000000..1a043d2
Binary files /dev/null and b/static/image/other/ranking/lawanle.png differ
diff --git a/static/image/other/ranking/lawanle_skin.png b/static/image/other/ranking/lawanle_skin.png
new file mode 100644
index 0000000..38c8e64
Binary files /dev/null and b/static/image/other/ranking/lawanle_skin.png differ
diff --git a/static/image/other/ranking/npc.png b/static/image/other/ranking/npc.png
new file mode 100644
index 0000000..2d0f093
Binary files /dev/null and b/static/image/other/ranking/npc.png differ
diff --git a/static/image/other/ranking/npc_skin.png b/static/image/other/ranking/npc_skin.png
new file mode 100644
index 0000000..2ec8a30
Binary files /dev/null and b/static/image/other/ranking/npc_skin.png differ
diff --git a/static/image/other/ranking/renshangren.png b/static/image/other/ranking/renshangren.png
new file mode 100644
index 0000000..e3f1376
Binary files /dev/null and b/static/image/other/ranking/renshangren.png differ
diff --git a/static/image/other/ranking/renshangren_skin.png b/static/image/other/ranking/renshangren_skin.png
new file mode 100644
index 0000000..9bb0e44
Binary files /dev/null and b/static/image/other/ranking/renshangren_skin.png differ
diff --git a/static/image/other/ranking/sad.png b/static/image/other/ranking/sad.png
new file mode 100644
index 0000000..28cf599
Binary files /dev/null and b/static/image/other/ranking/sad.png differ
diff --git a/static/image/other/renshangren.png b/static/image/other/renshangren.png
new file mode 100644
index 0000000..6227157
Binary files /dev/null and b/static/image/other/renshangren.png differ
diff --git a/static/image/shopping/jingdong/detail/cancel.png b/static/image/shopping/jingdong/detail/cancel.png
new file mode 100644
index 0000000..b4bb2b4
Binary files /dev/null and b/static/image/shopping/jingdong/detail/cancel.png differ
diff --git a/static/image/shopping/jingdong/detail/dianpukefu.png b/static/image/shopping/jingdong/detail/dianpukefu.png
new file mode 100644
index 0000000..3ab7139
Binary files /dev/null and b/static/image/shopping/jingdong/detail/dianpukefu.png differ
diff --git a/static/image/shopping/jingdong/detail/gift.png b/static/image/shopping/jingdong/detail/gift.png
new file mode 100644
index 0000000..6d3fc64
Binary files /dev/null and b/static/image/shopping/jingdong/detail/gift.png differ
diff --git a/static/image/shopping/jingdong/detail/help.png b/static/image/shopping/jingdong/detail/help.png
new file mode 100644
index 0000000..369aba3
Binary files /dev/null and b/static/image/shopping/jingdong/detail/help.png differ
diff --git a/static/image/shopping/jingdong/detail/jiagebaozhang.png b/static/image/shopping/jingdong/detail/jiagebaozhang.png
new file mode 100644
index 0000000..24b99ef
Binary files /dev/null and b/static/image/shopping/jingdong/detail/jiagebaozhang.png differ
diff --git a/static/image/shopping/jingdong/detail/jingdongkefu.png b/static/image/shopping/jingdong/detail/jingdongkefu.png
new file mode 100644
index 0000000..519ea61
Binary files /dev/null and b/static/image/shopping/jingdong/detail/jingdongkefu.png differ
diff --git a/static/image/shopping/jingdong/detail/like-left.png b/static/image/shopping/jingdong/detail/like-left.png
new file mode 100644
index 0000000..664e879
Binary files /dev/null and b/static/image/shopping/jingdong/detail/like-left.png differ
diff --git a/static/image/shopping/jingdong/detail/like-right.png b/static/image/shopping/jingdong/detail/like-right.png
new file mode 100644
index 0000000..60919c5
Binary files /dev/null and b/static/image/shopping/jingdong/detail/like-right.png differ
diff --git a/static/image/shopping/jingdong/detail/location.png b/static/image/shopping/jingdong/detail/location.png
new file mode 100644
index 0000000..5ea3f99
Binary files /dev/null and b/static/image/shopping/jingdong/detail/location.png differ
diff --git a/static/image/shopping/jingdong/detail/more.png b/static/image/shopping/jingdong/detail/more.png
new file mode 100644
index 0000000..f3f7c74
Binary files /dev/null and b/static/image/shopping/jingdong/detail/more.png differ
diff --git a/static/image/shopping/jingdong/detail/plus-logo.png b/static/image/shopping/jingdong/detail/plus-logo.png
new file mode 100644
index 0000000..e363833
Binary files /dev/null and b/static/image/shopping/jingdong/detail/plus-logo.png differ
diff --git a/static/image/shopping/jingdong/detail/plus-text.png b/static/image/shopping/jingdong/detail/plus-text.png
new file mode 100644
index 0000000..77c51c0
Binary files /dev/null and b/static/image/shopping/jingdong/detail/plus-text.png differ
diff --git a/static/image/shopping/jingdong/detail/qianshou.png b/static/image/shopping/jingdong/detail/qianshou.png
new file mode 100644
index 0000000..1a9515c
Binary files /dev/null and b/static/image/shopping/jingdong/detail/qianshou.png differ
diff --git a/static/image/shopping/jingdong/detail/share.png b/static/image/shopping/jingdong/detail/share.png
new file mode 100644
index 0000000..92f1994
Binary files /dev/null and b/static/image/shopping/jingdong/detail/share.png differ
diff --git a/static/image/shopping/jingdong/detail/tuikuan.png b/static/image/shopping/jingdong/detail/tuikuan.png
new file mode 100644
index 0000000..cec209e
Binary files /dev/null and b/static/image/shopping/jingdong/detail/tuikuan.png differ
diff --git a/static/image/shopping/jingdong/detail/wait.png b/static/image/shopping/jingdong/detail/wait.png
new file mode 100644
index 0000000..39ae611
Binary files /dev/null and b/static/image/shopping/jingdong/detail/wait.png differ
diff --git a/static/image/shopping/jingdong/detail/xiadan.png b/static/image/shopping/jingdong/detail/xiadan.png
new file mode 100644
index 0000000..54f923f
Binary files /dev/null and b/static/image/shopping/jingdong/detail/xiadan.png differ
diff --git a/static/image/shopping/jingdong/detail/ziyin.png b/static/image/shopping/jingdong/detail/ziyin.png
new file mode 100644
index 0000000..704d29b
Binary files /dev/null and b/static/image/shopping/jingdong/detail/ziyin.png differ
diff --git a/static/image/shopping/jingdong/null.png b/static/image/shopping/jingdong/null.png
new file mode 100644
index 0000000..c76b51b
Binary files /dev/null and b/static/image/shopping/jingdong/null.png differ