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/shopping/jingdong/shopping-card.vue b/components/shopping/jingdong/shopping-card.vue
index 1f8321e..bb8c7c1 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">
@@ -98,8 +98,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 +106,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 +146,7 @@
 </template>
 
 <script setup>
-import { defineProps, computed } from 'vue';
+import { defineProps, computed, defineEmits } from 'vue';
 
 const props = defineProps({
     item: {
@@ -159,6 +156,12 @@ const props = defineProps({
     }
 });
 
+const emit = defineEmits(['btnClick', 'longpress']);
+
+const onLongPress = (e) => {
+    emit('longpress', { event: e, item: props.item });
+};
+
 const getButtons = (shopType, status, item) => {
     const buttons = [];
     if (status == '等待付款') {
diff --git a/main.js b/main.js
index 062b0fc..eb31d1d 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.sp16')
+	uni.setStorageSync('version', '1.0.3.sp17')
 	app.config.globalProperties.$version = uni.getStorageSync('version')
 	app.use(globalMethods);
 	return {
diff --git a/pages.json b/pages.json
index ccc2172..2ed41f4 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,19 @@
 						"navigationBarTitleText": "京东列表首页",
 						"navigationStyle": "custom"
 					}
+				},
+				{
+					"path": "jingdong/order-detail/order-detail",
+					"style": {
+						"navigationBarTitleText": "订单详情",
+						"navigationStyle": "custom"
+					}
 				}
 			]
 		},
 		{
 			"root": "pages/balance",
-			"pages": [
-				{
+			"pages": [{
 					"path": "index",
 					"style": {
 						"navigationBarTitleText": "余额页面",
@@ -89,8 +90,7 @@
 		},
 		{
 			"root": "pages/bill",
-			"pages": [
-				{
+			"pages": [{
 					"path": "bill-list/bill-list",
 					"style": {
 						"navigationBarTitleText": "账单列表页面",
@@ -115,8 +115,7 @@
 		},
 		{
 			"root": "pages/ant-credit-pay",
-			"pages": [
-				{
+			"pages": [{
 					"path": "index",
 					"style": {
 						"navigationBarTitleText": "花呗首页",
@@ -134,8 +133,7 @@
 		},
 		{
 			"root": "pages/finance-management",
-			"pages": [
-				{
+			"pages": [{
 					"path": "index",
 					"style": {
 						"navigationBarTitleText": "理财首页",
@@ -160,8 +158,7 @@
 		},
 		{
 			"root": "pages/other",
-			"pages": [
-				{
+			"pages": [{
 					"path": "/video-group-chat/video-group-chat",
 					"style": {
 						"navigationBarTitleText": "视频群聊",
@@ -262,13 +259,20 @@
 						"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..d5fb984 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/gouwu.png",
+// 	name: "购物",
+// 	path: "/pages/shopping/index"
+// },
+{
+	icon: "/static/image/index/qita/ranking.png",
+	name: "从夯倒拉排名",
+	path: "/pages/other/ranking/ranking"
+},
 ]
 
 const data = reactive({
diff --git a/pages/other/ranking/ranking.vue b/pages/other/ranking/ranking.vue
new file mode 100644
index 0000000..7157dca
--- /dev/null
+++ b/pages/other/ranking/ranking.vue
@@ -0,0 +1,697 @@
+<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" 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 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>
+						</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-view>
+							<l-painter-view :css="`flex: 1; padding: 14rpx 16rpx; display: flex; align-items: center;`">
+								<l-painter-image v-for="(img, imgIdx) in item.images" :key="imgIdx" :src="img"
+									css="width: 110rpx; height: 110rpx; margin: 0 6rpx; object-fit: cover;"
+									mode="aspectFill" />
+							</l-painter-view>
+						</l-painter-view>
+					</l-painter-view>
+					<l-painter-view
+						: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 } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+
+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', textColor: '#FFFFFF', hasStroke: true, images: [] },
+	{ label: '顶级', bgColor: '#FF6A0B', textColor: '#FFFFFF', hasStroke: true, images: [] },
+	{ label: '人上人', bgColor: '#FFF06A', textColor: '#FFFFFF', hasStroke: true, images: [] },
+	{ label: 'NPC', bgColor: '#FDF5C8', textColor: '#FFFFFF', hasStroke: true, images: [] },
+	{ label: '拉完了', bgColor: '#FFFFFF', textColor: '#FFFFFF', hasStroke: true, images: [] }
+]);
+
+// --- 生命周期：加载缓存 ---
+onLoad(() => {
+	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' : '#333333';
+};
+
+/**
+ * 处理色域滑动
+ */
+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 8rpx;
+	flex-wrap: wrap;
+}
+
+.item-wrapper {
+	width: 100rpx;
+	height: 100rpx;
+	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;
+	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 {
+		position: absolute;
+		top: 30rpx;
+		left: 50%;
+		transform: translateX(-50%);
+		font-weight: bold;
+		text-align: center;
+		font-size: 36rpx;
+		color: #333;
+	}
+
+	.title-input {
+		background: rgba(255, 255, 255, 0.5);
+		border-radius: 8rpx;
+		padding: 4rpx 12rpx;
+		width: 300rpx;
+		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/list-index.vue b/pages/shopping/jingdong/list-index.vue
index 9c51582..ccec90e 100644
--- a/pages/shopping/jingdong/list-index.vue
+++ b/pages/shopping/jingdong/list-index.vue
@@ -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,76 @@
 			</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="bubble-arrow"></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 ShoppingCard from '@/components/shopping/jingdong/shopping-card.vue';
 
+const showActionMenu = ref(false);
+const actionMenuState = ref({ x: 0, y: 0, item: null });
+
+const handleLongPress = (data) => {
+	let touch = data.event.touches[0];
+	if (!touch && data.event.changedTouches) touch = data.event.changedTouches[0];
+	if (touch) {
+		actionMenuState.value = {
+			x: touch.clientX,
+			y: touch.clientY,
+			item: data.item
+		};
+		showActionMenu.value = true;
+	}
+};
+
+const handleCardClick = (item) => {
+	if (item.shopType !== "waimai") {
+		uni.navigateTo({
+			url: '/pages/shopping/jingdong/order-detail/order-detail?id=' + item.id
+		});
+	}
+
+};
+
+
+/**
+ * 删除订单
+ */
+const handleDeleteOrder = () => {
+	const itemToDel = actionMenuState.value.item;
+	const realIndex = mockOrderList.value.findIndex(item => item === itemToDel);
+	if (realIndex > -1) {
+		mockOrderList.value.splice(realIndex, 1);
+	}
+	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);
@@ -86,6 +152,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 +166,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,6 +185,9 @@ const switchFilter = (index) => {
 	}
 };
 
+/**
+ * 筛选订单列表
+ */
 const filteredOrderList = computed(() => {
 	const tabName = tabList.value[currentTab.value].name;
 	let baseList = mockOrderList.value;
@@ -136,8 +214,12 @@ const filteredOrderList = computed(() => {
 	});
 });
 
+/**
+ * 模拟订单列表
+ */
 const mockOrderList = ref([
 	{
+		id: 123211111,
 		shopType: 'waimai',
 		shopName: '安野屋 (AARYE) 京...',
 		status: '等待付款',
@@ -154,14 +236,9 @@ const mockOrderList = ref([
 		],
 		promoType: 'text',
 		promoHighlight: '近90天600+人回购',
-		buttons: [
-			{ text: '取消订单', type: 'default' },
-			{ text: '查看发票', type: 'default' },
-			{ text: '修改订单', type: 'default' },
-			{ text: '去支付', type: 'primary' }
-		]
 	},
 	{
+		id: 9632554,
 		shopType: 'waimai',
 		shopName: '安野屋 (AARYE) 京...',
 		status: '骑手到店取餐中',
@@ -177,16 +254,10 @@ const mockOrderList = ref([
 				price: '69.00',
 				count: 1,
 			}
-		],
-		promoType: 'cashback',
-		promoText: '当笔订单返现成功到账，',
-		promoAction: '点击领取',
-		buttons: [
-			{ text: '申请退款', type: 'default' },
-			{ text: '查看发票', type: 'default' }
 		]
 	},
 	{
+		id: 63254112,
 		shopType: 'waimai',
 		shopName: '安野屋 (AARYE) 京...',
 		status: '商家备餐中',
@@ -202,16 +273,10 @@ const mockOrderList = ref([
 				price: '69.00',
 				count: 1,
 			}
-		],
-		promoType: 'cashback',
-		promoText: '当笔订单返现成功到账，',
-		promoAction: '点击领取',
-		buttons: [
-			{ text: '申请退款', type: 'default' },
-			{ text: '查看发票', type: 'default' }
 		]
 	},
 	{
+		id: 78456211,
 		shopType: 'waimai',
 		shopName: '瑞幸咖啡',
 		status: '完成',
@@ -228,15 +293,10 @@ const mockOrderList = ref([
 		],
 		promoType: 'coupon',
 		promoText: '恭喜您获得3元京东购物券',
-		promoAction: '去领券',
-		buttons: [
-			{ text: '删除订单', type: 'default' },
-			{ text: '查看发票', type: 'default' },
-			{ text: '退换/售后', type: 'default' },
-			{ text: '再次购买', type: 'primary' }
-		]
+		promoAction: '去领券'
 	},
 	{
+		id: 56322115,
 		shopType: 'waimai',
 		shopName: '瑞幸咖啡',
 		status: '完成',
@@ -254,14 +314,9 @@ const mockOrderList = ref([
 		],
 		price: '17.00',
 		count: 2,
-		buttons: [
-			{ text: '删除订单', type: 'default' },
-			{ text: '查看发票', type: 'default' },
-			{ text: '退换/售后', type: 'default' },
-			{ text: '再次购买', type: 'primary' }
-		]
 	},
 	{
+		id: 52322221,
 		shopType: 'waimai',
 		shopName: '瑞幸咖啡',
 		status: '已取消',
@@ -275,14 +330,10 @@ const mockOrderList = ref([
 				price: '69.00',
 				count: 1,
 			}
-		],
-		buttons: [
-			{ text: '删除订单', type: 'default' },
-			{ text: '钱款去向', type: 'default' },
-			{ text: '再次购买', type: 'primary' }
 		]
 	},
 	{
+		id: 8562245551,
 		shopType: 'self',
 		shopName: '安野屋 (AARYE) 京联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
 		status: '等待付款',
@@ -299,14 +350,9 @@ const mockOrderList = ref([
 		],
 		promoType: 'text',
 		promoHighlight: '白条支付券0.5元优惠券',
-		buttons: [
-			{ text: '取消订单', type: 'default' },
-			{ text: '查看发票', type: 'default' },
-			{ text: '修改订单', type: 'default' },
-			{ text: '去支付', type: 'primary', badge: '减0.5元' }
-		]
 	},
 	{
+		id: 5504455,
 		shopType: 'none',
 		shopName: '甜小南旗舰店',
 		status: '正在出库',
@@ -325,14 +371,9 @@ const mockOrderList = ref([
 		],
 		promoType: 'plus',
 		promoText: '告别凑单, 享免运优惠',
-		buttons: [
-			{ text: '查看发票', type: 'default' },
-			{ text: '再次购买', type: 'default' },
-			{ text: '申请退款', type: 'default' },
-			{ text: '修改订单', type: 'default' }
-		]
 	},
 	{
+		id: 585552,
 		shopType: 'self',
 		shopName: '甜小南旗舰店',
 		status: '完成',
@@ -353,13 +394,9 @@ const mockOrderList = ref([
 		promoType: 'plus',
 		promoText: '告别凑单, 享免运优惠',
 		hasMore: true,
-		buttons: [
-			{ text: '卖了换钱', type: 'default' },
-			{ text: '退还/售后', type: 'default' },
-			{ text: '再次购买', type: 'primary' }
-		]
 	},
 	{
+		id: 4545451,
 		shopType: 'jd',
 		shopName: '甜小南旗舰店',
 		status: '完成',
@@ -375,13 +412,9 @@ const mockOrderList = ref([
 			}
 		],
 		hasMore: true,
-		buttons: [
-			{ text: '再次购买', type: 'default' },
-			{ text: '申请退款', type: 'default' },
-			{ text: '修改订单', type: 'default' }
-		]
 	},
 	{
+		id: 1236524,
 		shopType: 'self',
 		shopName: '甜小南旗舰店',
 		status: '已取消',
@@ -395,11 +428,6 @@ const mockOrderList = ref([
 				price: '1669.00',
 				count: 1,
 			}
-		],
-		buttons: [
-			{ text: '再次购买', type: 'default' },
-			{ text: '申请退款', type: 'default' },
-			{ text: '修改订单', type: 'primary' }
 		]
 	}
 ]);
@@ -603,6 +631,12 @@ const mockOrderList = ref([
 	padding: 0 20rpx;
 }
 
+
+.bottom-fixed {
+	display: flex;
+	flex-direction: column;
+}
+
 .bottom-item {
 	display: flex;
 	align-items: center;
@@ -622,7 +656,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 +682,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: 1rpx;
+		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..6f1d73c
--- /dev/null
+++ b/pages/shopping/jingdong/order-detail/order-detail.vue
@@ -0,0 +1,1437 @@
+<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">肖战</text>
+						<text class="number">152633221112</text>
+					</view>
+					<view>
+						<text class="address">上海市浦东新区世纪大道123号</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>已下单 </text>
+							<text>预计明天 09:00-15:00送达</text>
+						</view>
+						<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
+					</view>
+					<text class="desc">快递运输 · 温馨提示：您的订单预计3月11日09:00- 15:53送达</text>
+					<view class="address-box">
+						<view class="top">
+							<text class="address">华哈哈哈哈哈哈哈哈哈2栋 22-1</text>
+							<view class="edit-btn">修改</view>
+						</view>
+						<view class="phone">肖战123****1234</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">华哈哈哈哈哈哈哈哈哈2栋 22-1</text>
+						<view class="name">肖战123****1234</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">
+
+							</view>
+							<text class="name">肖战</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">华哈哈哈哈哈哈哈哈哈2栋 22-1</text>
+						<view class="name">肖战123****1234</view>
+					</view>
+				</view>
+			</view>
+		</template>
+
+		<!-- 商品卡片 -->
+		<view class="product-card">
+			<view class="title-box">
+				<view class="left-box">
+					<image class="img" src="/static/image/shopping/jingdong/detail/ziyin.png"></image>
+					<text class="title">安野屋（AARYE）红红火火恍恍惚惚哈哈哈哈哈好</text>
+				</view>
+				<uni-icons class="right-icon" size="14" color="#1A1A1A" type="right"></uni-icons>
+			</view>
+			<view class="product-info">
+				<view class="image-box">
+
+				</view>
+				<view class="info-box">
+					<view class="name">联名哈哈哈哈哈哈哈哈与哈哈哈哈哈哈梦</view>
+					<view class="desc">联名哈哈哈哈哈哈哈哈与哈哈哈哈哈哈梦联名哈哈哈哈哈哈哈哈与哈哈哈哈哈哈梦</view>
+					<view class="tag">无理由退货政策</view>
+				</view>
+				<view class="price-box">
+					<text class="price wx-font-medium">￥69.9</text>
+				</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 : 1rpx 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>
+
+		<!-- 商品总价 -->
+		<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;">￥69</text>
+			</view>
+			<view class="item flex-justify-between">
+				<text class="label">运费</text>
+				<text class="value wx-font-medium">￥0</text>
+			</view>
+			<view class="price">需付款 <text class="number wx-font-medium">￥69</text></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 : 1rpx 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 } from '@dcloudio/uni-app';
+
+/**
+ * 模拟订单列表
+ */
+const mockOrderList = ref([
+	{
+		id: 123211111,
+		shopType: 'waimai',
+		shopName: '安野屋 (AARYE) 京...',
+		status: '等待付款',
+		statusDesc: '29分钟',
+		products: [
+			{
+				image: '/static/image/shopping/jingdong/product1.png',
+				title: '超值哈哈哈哈哈哈哈哈哈哈哈哈哈哈好一人份',
+				desc: '不支持7天无理由退货',
+				tags: [],
+				price: '69.00',
+				count: 1,
+			}
+		],
+		orderInfo: {
+			'orderNo': "123652632566",
+			'payMethod': '在线支付',
+			'payTime': '2026-03-10 15:14:30',
+			'orderTime': '2026-03-10 15:14:30',
+		},
+		deliveryInfo: {
+			'method': '快递运输',
+			'receiptInfo': '张三 12******44444',
+			'address': '啦啦啦啦啦啦啦啦啦啦啦啦啊啦啦啦啦啦啦',
+			'deliveryTime': '2026-03-10 15:14:30',
+			'deliveryMethod': '送货上门',
+		},
+		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天无理由退货',
+				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天无理由退货',
+				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天无理由退货',
+				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: [],
+				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: ['无理由退货政策'],
+				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: ['无理由退货政策'],
+				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: ['无理由退货政策'],
+				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: ['无理由退货政策'],
+				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: ['无理由退货政策'],
+				price: '1669.00',
+				count: 1,
+			}
+		]
+	}
+]);
+
+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(null);
+onLoad((options) => {
+	console.log(options);
+	const id = options.id;
+	order.value = mockOrderList.value.find(item => item.id == id);
+	console.log(order.value);
+});
+</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: 1rpx 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: 1rpx 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: 26rpx;
+				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: 26rpx;
+				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: 1rpx 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;
+
+	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;
+		}
+	}
+}
+</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/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/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/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/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/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