From c7a434a24d8291d71f5a9529de4edbf48bcf4e49 Mon Sep 17 00:00:00 2001
From: tangxinyue <524779910@qq.com>
Date: Fri, 10 Apr 2026 14:08:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BA=AC=E4=B8=9C=E8=B4=AD?=
 =?UTF-8?q?=E7=89=A9=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/shopping/jingdong/list-index.vue        | 336 +++++++++++++++++-
 .../jingdong/order-detail/order-detail.vue    | 130 +++++--
 2 files changed, 443 insertions(+), 23 deletions(-)

diff --git a/pages/shopping/jingdong/list-index.vue b/pages/shopping/jingdong/list-index.vue
index 79752a5..1c11e35 100644
--- a/pages/shopping/jingdong/list-index.vue
+++ b/pages/shopping/jingdong/list-index.vue
@@ -1,6 +1,8 @@
 <template>
 	<view class="top-fixed">
-		<nav-bar title="京东" bgColor="#F0F4F9" :buttonGroup="buttonGroup" @button-click="util.clickTitlePopupButton">
+		<nav-bar v-if="!selectedImage" title="京东" bgColor="#F0F4F9" :buttonGroup="buttonGroup"
+			@button-click="util.clickTitlePopupButton" tipLayerType="jingdong-shopping-list" isTipLayer
+			tipLayerText="添加订单信息">
 			<template v-slot:center>
 				<view class="search-box">
 					<image class="search-icon" src="/static/image/shopping/jingdong/search-icon.png" mode="aspectFit">
@@ -17,6 +19,9 @@
 				</view>
 			</template>
 		</nav-bar>
+		<nav-bar v-else title="拼图" bgColor="#EFEFEF" noBack @back="closeImage" isRightButton
+			@right-click="confirmImage">
+		</nav-bar>
 		<view class="tab-list">
 			<view class="tab-item" v-for="(item, index) in tabList" :key="index"
 				:class="{ active: currentTab === index }" @click="switchTab(index)">
@@ -55,13 +60,30 @@
 			<image class="like-icon" src="/static/image/shopping/jingdong/weinituijian.png" mode="aspectFit"></image>
 			<text>为你推荐</text>
 		</view>
-		<view class="upload-screenshot-box">
-			<view class="upload-screenshot-content">
+
+		<view v-if="!selectedImage" class="upload-screenshot-box" @touchstart="handleTouchStart"
+			@touchend="handleTouchEnd">
+			<view v-if="!screenshotImage" 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 v-else class="upload-screenshot-content">
+				<image class="screenshot-preview" :src="screenshotImage" mode="widthFix"></image>
+			</view>
+			<!-- <image v-else class="w100 h100" :src="screenshotImage" mode="widthFix"></image> -->
 		</view>
+		<view v-else class="upload-screenshot-box scroll-image-box">
+			<scroll-view class="image-box" style="width: 100%;height: 100%;" scroll-y :show-scrollbar="false"
+				@scroll="onImageScroll">
+				<image class="crop-image-target" style="width:100%;" :src="selectedImage" mode="widthFix"></image>
+			</scroll-view>
+			<view class="dashed-line-box">
+				<view class="dashed-line-text">我是分割线</view>
+			</view>
+		</view>
+		<canvas canvas-id="crop-canvas"
+			style="position: fixed; left: -9999px; width: 750rpx; height: 100vh; pointer-events: none;"></canvas>
 	</view>
 
 	<!-- 长按操作气泡菜单 -->
@@ -74,6 +96,14 @@
 			<view class="bubble-arrow"></view>
 		</view>
 	</view>
+
+	<!-- 水印 -->
+	<view v-if="$isVip()">
+		<watermark dark="light" />
+		<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark')">
+			<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
+		</liu-drag-button>
+	</view>
 </template>
 
 <script setup>
@@ -85,6 +115,12 @@ import { util } from '@/utils/common.js';
 const showActionMenu = ref(false);
 const actionMenuState = ref({ x: 0, y: 0, item: null });
 
+// 长按替换截图相关
+const screenshotImage = ref('');
+const selectedImage = ref('');
+const scrollTop = ref(0);
+let longPressTimer = null;
+
 //导航栏菜单按钮
 const buttonGroup = [
 	{
@@ -235,9 +271,243 @@ onShow(() => {
 		mockOrderList.value = cachedData;
 	}
 
+	// 读取缓存的截图
+	const cachedImage = uni.getStorageSync('jingdong_screenshot');
+	if (cachedImage) {
+		screenshotImage.value = cachedImage;
+	}
+
+	console.log('screenshotImage.value', screenshotImage.value)
+
 	console.log("mockOrderList", mockOrderList.value);
 });
 
+// 长按替换截图 - 选择图片
+const chooseImage = () => {
+	if (selectedImage.value) return;
+	uni.chooseImage({
+		count: 1,
+		sourceType: ['album'],
+		success: (res) => {
+			selectedImage.value = res.tempFilePaths[0];
+		}
+	});
+};
+
+// 长按事件
+const handleTouchStart = (e) => {
+	const systemInfo = uni.getSystemInfoSync();
+	if (systemInfo.platform === 'ios' && systemInfo.safeAreaInsets?.bottom) {
+		const clientY = e.touches[0].clientY;
+		const windowHeight = systemInfo.windowHeight;
+		if (clientY > windowHeight - systemInfo.safeAreaInsets.bottom) {
+			return;
+		}
+	}
+	longPressTimer = setTimeout(() => {
+		uni.vibrateShort();
+		chooseImage();
+	}, 1200);
+};
+
+const handleTouchEnd = () => {
+	if (longPressTimer) {
+		clearTimeout(longPressTimer);
+		longPressTimer = null;
+	}
+};
+
+// 图片滚动
+const onImageScroll = (e) => {
+	scrollTop.value = e.detail.scrollTop;
+};
+
+// 确认裁剪截图
+//const confirmImage = () => {
+//	uni.showLoading({ title: '处理中...' });
+//	const query = uni.createSelectorQuery().in(instance.proxy);
+//	query.select('.image-box').boundingClientRect();
+//	query.select('.crop-image-target').boundingClientRect();
+//	query.exec(res => {
+//		if (!res[0] || !res[1]) {
+//			uni.hideLoading();
+//			return;
+//		}
+//		const container = res[0];
+//		const image = res[1];
+//
+//		uni.getImageInfo({
+//			src: selectedImage.value,
+//			success: (imgInfo) => {
+//				const scale = imgInfo.width / image.width;
+//				const sTop = scrollTop.value * scale;
+//				const sHeight = container.height * scale;
+//				const sWidth = imgInfo.width;
+//				const canvasW = container.width;
+//				const canvasH = container.height;
+//
+//				const ctx = uni.createCanvasContext('crop-canvas', instance.proxy);
+//				ctx.clearRect(0, 0, canvasW, canvasH);
+//				ctx.drawImage(
+//					imgInfo.path,
+//					0, sTop, sWidth, sHeight,
+//					0, 0, canvasW, canvasH
+//				);
+//				ctx.draw(false, () => {
+//					uni.canvasToTempFilePath({
+//						canvasId: 'crop-canvas',
+//						width: canvasW,
+//						height: canvasH,
+//						destWidth: sWidth,
+//						destHeight: sHeight,
+//						success: (res) => {
+//							uni.saveFile({
+//								tempFilePath: res.tempFilePath,
+//								success: (saveRes) => {
+//									screenshotImage.value = saveRes.savedFilePath;
+//									selectedImage.value = '';
+//									uni.setStorageSync('jingdong_screenshot', saveRes.savedFilePath);
+//									uni.hideLoading();
+//									uni.showToast({ title: '截图替换成功', icon: 'success' });
+//								},
+//								fail: () => {
+//									uni.hideLoading();
+//									uni.showToast({ title: '保存失败', icon: 'none' });
+//								}
+//							});
+//						},
+//						fail: () => {
+//							uni.hideLoading();
+//							uni.showToast({ title: '裁剪失败', icon: 'none' });
+//						}
+//					}, instance.proxy);
+//				});
+//			},
+//			fail: () => {
+//				uni.hideLoading();
+//				uni.showToast({ title: '图片加载失败', icon: 'none' });
+//			}
+//		});
+//	});
+//};
+
+// 确认图片裁剪
+const confirmImage = () => {
+	uni.showLoading({
+		title: '处理中...'
+	})
+	const query = uni.createSelectorQuery().in(instance)
+
+	// 获取容器和图片信息
+	query.select('.image-box').boundingClientRect()
+	query.select('.crop-image-target').boundingClientRect()
+	query.exec(res => {
+		if (!res[0] || !res[1]) {
+			uni.hideLoading()
+			return
+		}
+
+		console.log('rects', res)
+		const container = res[0] // 容器
+		const image = res[1] // 图片实际渲染尺寸
+
+		// 计算缩放比例 (渲染宽度 / 实际宽度 不准确，应该反过来用 图片原始宽/渲染宽?)
+		// 这里更简单的方法是：canvas设为容器大小，把图片画进去
+		// canvas drawImage 参数: img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight
+
+		// 获取图片原始尺寸
+		uni.getImageInfo({
+			src: selectedImage.value,
+			success: (imgInfo) => {
+				const scale = imgInfo.width / image.width // 图片 原始宽 / 渲染宽
+				const sTop = scrollTop.value * scale // 原始图上的裁切起始Y
+				const sHeight = container.height * scale // 原始图上的裁切高度
+
+				// 因为是 widthFix，宽度就是原始图宽度（或裁切全宽）
+				const sWidth = imgInfo.width
+
+				// 设置画布尺寸 (使用像素值)
+				// 注意：canvasContext绘制使用的是逻辑像素还是物理像素？通常需要考虑到 pixelRatio，
+				// 但 uni-app canvas-id 方式通常对应逻辑像素(px)
+				// 我们把 canvas 大小设为和容器显示一致
+				const canvasW = container.width
+				const canvasH = container.height
+
+				const ctx = uni.createCanvasContext('crop-canvas', instance)
+
+				// 清除画布
+				ctx.clearRect(0, 0, canvasW, canvasH)
+
+				// 绘制
+				// drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
+				ctx.drawImage(
+					imgInfo.path,
+					0, sTop, sWidth, sHeight, // 源图裁剪区域
+					0, 0, canvasW, canvasH // 画布绘制区域
+				)
+				ctx.draw(false, () => {
+					uni.canvasToTempFilePath({
+						canvasId: 'crop-canvas',
+						width: canvasW,
+						height: canvasH,
+						destWidth: sWidth, // 使用原图实际宽度,保持原图清晰度
+						destHeight: sHeight, // 使用原图实际高度,保持原图清晰度
+						success: (res) => {
+							console.log('crop success (temp)', res
+								.tempFilePath)
+
+							// 将临时路径保存为永久路径
+							uni.saveFile({
+								tempFilePath: res.tempFilePath,
+								success: (saveRes) => {
+									console.log('save success (saved)', saveRes.savedFilePath)
+									screenshotImage.value = saveRes.savedFilePath
+									selectedImage.value = '' // 隐藏编辑模式
+									setTimeout(() => {
+										plus.navigator.setStatusBarStyle("light");
+									}, 200)
+									// 保存到缓存
+									uni.setStorageSync('jingdong_screenshot', screenshotImage.value)
+									uni.hideLoading()
+								},
+								fail: (err) => {
+									console.error('saveFile fail', err)
+									uni.hideLoading()
+									uni.showToast({
+										title: '保存失败',
+										icon: 'none'
+									})
+								}
+							})
+						},
+						fail: (err) => {
+							console.error(err)
+							uni.hideLoading()
+							uni.showToast({
+								title: '裁剪失败',
+								icon: 'none'
+							})
+						}
+					}, instance)
+				})
+			},
+			fail: () => {
+				uni.hideLoading()
+				uni.showToast({
+					title: '图片加载失败',
+					icon: 'none'
+				})
+			}
+		})
+
+	})
+}
+
+// 关闭截图预览
+const closeImage = () => {
+	selectedImage.value = '';
+};
+
 const currentTab = ref(0);
 const tabList = ref([
 	{ name: '全部' },
@@ -784,6 +1054,7 @@ const mockOrderList = ref([
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	position: relative;
 
 	.upload-screenshot {
 		width: 92rpx;
@@ -791,6 +1062,8 @@ const mockOrderList = ref([
 	}
 
 	.upload-screenshot-content {
+		width: 100%;
+		height: 100%;
 		display: flex;
 		align-items: center;
 		flex-direction: column;
@@ -802,6 +1075,63 @@ const mockOrderList = ref([
 			line-height: 50rpx;
 			margin-top: 16rpx;
 		}
+
+		.screenshot-preview {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.scroll-image-box {
+		width: 100%;
+		min-height: 0; // 修复 flex一出问题
+		// overflow: hidden; // scroll-view 需要
+		position: relative;
+	}
+
+	.dashed-line-box {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		top: 0;
+		left: 0;
+		border: 4rpx dashed #ffffff;
+		pointer-events: none;
+
+		.dashed-line-text {
+			height: 44rpx;
+			line-height: 44rpx;
+			width: 180rpx;
+			padding: 0 20rpx;
+			border-radius: 8rpx;
+			color: #1777FF;
+			font-size: 24rpx;
+			font-weight: 500;
+			background-color: #fff;
+			position: absolute;
+			top: 0;
+			left: 50%;
+			transform: translate(-50%, -50%);
+		}
+	}
+
+	.mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.8);
+		z-index: 999;
+
+		.mask-icon {
+			position: absolute;
+			top: 50%;
+			right: 52rpx;
+			transform: translateY(-25%);
+			width: 360rpx;
+			height: 360rpx;
+		}
 	}
 }
 
diff --git a/pages/shopping/jingdong/order-detail/order-detail.vue b/pages/shopping/jingdong/order-detail/order-detail.vue
index d16fe0d..8ee89db 100644
--- a/pages/shopping/jingdong/order-detail/order-detail.vue
+++ b/pages/shopping/jingdong/order-detail/order-detail.vue
@@ -1,6 +1,7 @@
 <template>
 	<view>
-		<nav-bar title="订单详情" bgColor="#F2F3F7">
+		<nav-bar title="订单详情" bgColor="#F2F3F7" :buttonGroup="buttonGroup" @button-click="util.clickTitlePopupButton"
+			tipLayerType="jingdong-shopping-order-detail-tip" isTipLayer tipLayerText="编辑订单信息">
 			<!-- <template v-slot:left>
 				<image class="back-icon" src="/static/image/common/back.png" mode="aspectFit"></image>
 			</template> -->
@@ -27,7 +28,7 @@
 		<!-- 等待付款 -->
 		<template v-if="order.status == '等待付款'">
 			<view class="tip-box">
-				<text>还剩 <text style="color: #DD223F;font-weight: 500;">18 : 25 : 46</text> 订单自动取消</text>
+				<text>还剩 <text style="color: #DD223F;font-weight: 500;">{{ order.statusDesc }}</text> 订单自动取消</text>
 			</view>
 			<view class="address-info">
 				<view>
@@ -410,29 +411,33 @@
 			<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">
+		<template v-if="screenshotImage">
+			<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 class="upload-screenshot-text">长按替换截图</view>
 			</view>
-		</view>
+
+			<!-- 上传图片 -->
+			<view class="upload-screenshot-box">
+				<view class="upload-screenshot-content w100">
+					<!-- <image class="upload-screenshot" src="/static/image/common/upload-screenshot.png" mode="aspectFit">
+					</image>
+					<view class="upload-screenshot-text">长按替换截图</view> -->
+					<image class="w100" :src="screenshotImage" mode="widthFix"></image>
+				</view>
+			</view>
+		</template>
+
 		<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-else class="flex-align-center 我00">
 					<view v-for="btn in bottomBtns" :key="btn" class="bottom-btn " :class="{ red: btn == '再次购买' }">
 						{{ btn }}
 					</view>
@@ -440,18 +445,38 @@
 			</view>
 		</view>
 		<view class="placeholder"></view>
+		<!-- 水印 -->
+		<view v-if="$isVip()">
+			<watermark dark="light" />
+			<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark')">
+				<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
+			</liu-drag-button>
+		</view>
 	</view>
+
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onUnmounted, watch } from 'vue';
 import { onLoad, onShow } from '@dcloudio/uni-app';
 import { util } from '@/utils/common.js';
 
+const buttonGroup = [
+	{
+		name: "修改订单",
+		click: () => {
+			uni.navigateTo({
+				url: '/pages/shopping/jingdong/add-order/add-order?id=' + order.value.id + '&type=' + order.value.shopType + '&isEdit=true'
+			});
+		}
+	},
+]
+
 /**
  * 模拟订单列表
  */
 const mockOrderList = ref([]);
+const screenshotImage = ref('')
 
 const bottomBtns = computed(() => {
 	if (order.value.status == '正在出库') {
@@ -509,12 +534,77 @@ onLoad((options) => {
 	if (target) {
 		order.value = target;
 		console.log('成功匹配订单数据:', order.value);
+
+		// 如果是等待付款状态，启动倒计时
+		if (order.value.status === '等待付款' && order.value.statusDesc) {
+			initCountdown();
+		}
 	} else {
 		console.error('未找到指定的订单数据, ID:', id);
 	}
 });
 
+let countdownTimer = null;
+
+/**
+ * 初始化并启动倒计时
+ */
+const initCountdown = () => {
+	if (countdownTimer) clearInterval(countdownTimer);
+
+	// 解析时间字符串 "HH : mm : ss" 或 "HH:mm:ss" 为秒数
+	const parseTimeToSeconds = (timeStr) => {
+		if (!timeStr) return 0;
+		// 统一格式，移除空格并将冒号分隔
+		const parts = timeStr.replace(/\s/g, '').split(':');
+		let seconds = 0;
+		if (parts.length === 3) {
+			seconds = parseInt(parts[0]) * 3600 + parseInt(parts[1]) * 60 + parseInt(parts[2]);
+		} else if (parts.length === 2) {
+			seconds = parseInt(parts[0]) * 60 + parseInt(parts[1]);
+		}
+		return isNaN(seconds) ? 0 : seconds;
+	};
+
+	// 将秒数格式化为 "HH : mm : ss"
+	const formatSecondsToTime = (totalSeconds) => {
+		if (totalSeconds <= 0) return "00 : 00 : 00";
+		const h = Math.floor(totalSeconds / 3600);
+		const m = Math.floor((totalSeconds % 3600) / 60);
+		const s = totalSeconds % 60;
+		const pad = (n) => String(n).padStart(2, '0');
+		return `${pad(h)} : ${pad(m)} : ${pad(s)}`;
+	};
+
+	let remainingSeconds = parseTimeToSeconds(order.value.statusDesc);
+
+	if (remainingSeconds <= 0) return;
+
+	countdownTimer = setInterval(() => {
+		remainingSeconds--;
+		if (remainingSeconds <= 0) {
+			order.value.statusDesc = "00 : 00 : 00";
+			clearInterval(countdownTimer);
+			// 可选：倒计时结束时改变状态为“已取消”
+			// order.value.status = '已取消';
+		} else {
+			order.value.statusDesc = formatSecondsToTime(remainingSeconds);
+		}
+	}, 1000);
+};
+
+onUnmounted(() => {
+	if (countdownTimer) {
+		clearInterval(countdownTimer);
+	}
+});
+
 onShow(() => {
+	// 读取缓存的截图
+	const cachedImage = uni.getStorageSync('jingdong_screenshot');
+	if (cachedImage) {
+		screenshotImage.value = cachedImage;
+	}
 	// #ifdef APP-PLUS
 	util.setAndroidSystemBarColor('#FFFFFF')
 	setTimeout(() => {
@@ -1284,7 +1374,7 @@ const isOrderInfoExpanded = ref(false);
 .upload-screenshot-box {
 	width: 100%;
 	flex: 1;
-	height: 540rpx;
+	// height: 540rpx;
 	background-color: #FFFFFF;
 	display: flex;
 	align-items: center;