Merge branch 'Branch_1' of https://git.u8t.cn/tangxinyue/alipay-emulator into Branch_1

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: {

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' }"
+            :class="{ 'plus-promo': item.promoType === 'plus', 'cashback-promo': item.shopType == 'waimai' && (item.status == '骑手到店取餐中' || item.status == '商家备餐中'), 'coupon-promo': item.promoType === 'coupon' }">
-            v-if="item.promoType || item.promoText || item.promoHighlight">
             <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'">
+            <template v-else-if="item.shopType == 'waimai' && (item.status == '骑手到店取餐中' || item.status == '商家备餐中')">
-                <text class="promo-text">{{ item.promoText }} <text class="highlight" v-if="item.promoHighlight">{{
+                <text class="promo-text text-basic">当笔订单返现成功到账，<text style="color: #E31700;">点击领取</text></text>
-                    item.promoHighlight }}</text></text>
+                <uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
-                <text class="promo-action red">{{ item.promoAction || '点击领取' }} <uni-icons type="right" size="10"
-                        color="#ED1C04"></uni-icons></text>
             </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 == '等待付款') {

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 {

pages.json

@@ -9,23 +9,19 @@
 			}
 		}
 	],
-	"subPackages": [
+	"subPackages": [{
-		{
 			"root": "pages/call-log",
-			"pages": [
+			"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": "热门图标",

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 {

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'

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",
+// 	icon: "/static/image/index/qita/gouwu.png",
-	// 	name: "购物",
+// 	name: "购物",
-	// 	path: "/pages/shopping/index"
+// 	path: "/pages/shopping/index"
-	// },
+// },
+{
+	icon: "/static/image/index/qita/ranking.png",
+	name: "从夯倒拉排名",
+	path: "/pages/other/ranking/ranking"
+},
 ]
 
 const data = reactive({

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>

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>

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 class="bottom-fixed">
+	</view>
+	<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: '去领券',
+		promoAction: '去领券'
-		buttons: [
-			{ text: '删除订单', type: 'default' },
-			{ text: '查看发票', type: 'default' },
-			{ text: '退换/售后', type: 'default' },
-			{ text: '再次购买', type: 'primary' }
-		]
 	},
 	{
+		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>