From 93d859ef23c015d96c7c16024f7c99fe2c054c4f Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期二, 14 十月 2025 09:25:19 +0800
Subject: [PATCH] 定制商品
---
pages/product/m-buy/goods.vue | 74 ++++++++++++++++++++++++++++++++++++
1 files changed, 73 insertions(+), 1 deletions(-)
diff --git a/pages/product/m-buy/goods.vue b/pages/product/m-buy/goods.vue
index f6c92b1..6af3cf0 100644
--- a/pages/product/m-buy/goods.vue
+++ b/pages/product/m-buy/goods.vue
@@ -114,7 +114,7 @@
:key="img.id"
class="image-item"
:class="{ selected: selectedImageObjects.some(selectedImg => selectedImg.id === img.id) }"
- @click="selectImage(img)"
+ @click="handleImageClick(img, index)"
>
<image
:src="getFilePreviewUrlSync(img.imgUrl)"
@@ -125,6 +125,11 @@
<uni-icons type="checkmarkempty" size="30" color="#fff"></uni-icons>
</view>
</view>
+ </view>
+
+ <!-- 鏌ョ湅閫変腑鍥剧墖鎸夐挳 -->
+ <view class="view-selected-image" v-if="selectedImageObjects.length > 0" @click="viewSelectedImage">
+ 鏌ョ湅閫変腑妯℃澘鍥剧墖
</view>
</view>
@@ -359,6 +364,8 @@
this.preloadTemplateImages();
// 鍒濆鍖栨ā鏉胯〃鍗曟暟鎹�
this.initTemplateFormData();
+ // 璁剧疆榛樿閫変腑绗竴寮犳ā鏉垮浘鐗�
+ this.setDefaultSelectedImage();
}, 100);
}
},
@@ -969,6 +976,58 @@
this.selectedImageObjects = [];
this.selectedImages = [];
}
+ },
+
+ // 棰勮妯℃澘鍥剧墖
+ previewImage(imgObject, index) {
+ // 鍙瑙堝綋鍓嶉�変腑鐨勫浘鐗�
+ const urls = [this.getFilePreviewUrlSync(imgObject.imgUrl)];
+
+ // 璋冪敤uniapp鍘熺敓API棰勮鍥剧墖
+ uni.previewImage({
+ current: 0, // 褰撳墠鏄剧ず鍥剧墖鐨勭储寮曪紙鍙湁涓�寮犲浘鐗囷紝鎵�浠ユ槸0锛�
+ urls: urls, // 闇�瑕侀瑙堢殑鍥剧墖閾炬帴鍒楄〃
+ indicator: 'default', // 鏄剧ず绱㈠紩鎸囩ず鍣�
+ loop: false // 鍙湁涓�寮犲浘鐗囷紝涓嶉渶瑕佸惊鐜瑙�
+ });
+ },
+
+ // 澶勭悊妯℃澘鍥剧墖鐐瑰嚮浜嬩欢锛堟棦鍙互棰勮鍙堝彲浠ラ�変腑锛�
+ handleImageClick(imgObject, index) {
+ // 妫�鏌ュ綋鍓嶅浘鐗囨槸鍚﹀凡閫変腑
+ const isSelected = this.selectedImageObjects.some(selectedImg => selectedImg.id === imgObject.id);
+
+ if (isSelected) {
+ // 濡傛灉宸查�変腑锛屽垯棰勮鍥剧墖
+ this.previewImage(imgObject, index);
+ } else {
+ // 濡傛灉鏈�変腑锛屽垯閫変腑鍥剧墖
+ this.selectImage(imgObject);
+ }
+ },
+
+ // 鏌ョ湅閫変腑鐨勫浘鐗�
+ viewSelectedImage() {
+ // 妫�鏌ユ槸鍚︽湁閫変腑鐨勫浘鐗�
+ if (this.selectedImageObjects.length > 0) {
+ // 鑾峰彇绗竴涓�変腑鐨勫浘鐗囷紙鍥犱负鏄崟閫夋ā寮忥級
+ const selectedImage = this.selectedImageObjects[0];
+ // 棰勮閫変腑鐨勫浘鐗�
+ this.previewImage(selectedImage, 0);
+ }
+ },
+
+ // 璁剧疆榛樿閫変腑绗竴寮犳ā鏉垮浘鐗�
+ setDefaultSelectedImage() {
+ // 妫�鏌ユ槸鍚︽湁妯℃澘鍥剧墖涓斿綋鍓嶆病鏈夐�変腑浠讳綍鍥剧墖
+ if (this.consumizetemplateInfo &&
+ this.consumizetemplateInfo.templateImgs &&
+ this.consumizetemplateInfo.templateImgs.length > 0 &&
+ this.selectedImageObjects.length === 0) {
+ // 閫変腑绗竴寮犲浘鐗�
+ const firstImage = this.consumizetemplateInfo.templateImgs[0];
+ this.selectImage(firstImage);
+ }
}
},
@@ -983,6 +1042,9 @@
// 鍒濆鍖栨ā鏉胯〃鍗曟暟鎹�
this.initTemplateFormData();
+
+ // 榛樿閫変腑绗竴寮犳ā鏉垮浘鐗�
+ this.setDefaultSelectedImage();
console.log("goodsDetail",this.goodsDetail)
}, 100);
@@ -1154,7 +1216,17 @@
.title-text {
font-size: 36rpx;
font-weight: bold;
+}
+
+// 鏌ョ湅閫変腑鍥剧墖鎸夐挳鏍峰紡
+.view-selected-image {
+ margin-top: 20rpx;
+ padding: 30rpx;
+ text-align: center;
+ background-color: #f0f0f0;
+ border-radius: 10rpx;
color: #333;
+ font-size: 28rpx;
}
// 鍥剧墖閫夋嫨鍖哄煙
--
Gitblit v1.8.0