From 6a20878b9b1e3460531b055d72d5d671f761abc3 Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期四, 16 十月 2025 15:36:20 +0800
Subject: [PATCH] 定制商品
---
pages/product/m-buy/goods.vue | 147 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 146 insertions(+), 1 deletions(-)
diff --git a/pages/product/m-buy/goods.vue b/pages/product/m-buy/goods.vue
index 2821674..128c85c 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>
@@ -245,6 +250,7 @@
cosClient: null, // COS瀹㈡埛绔�
bucket: '', // 瀛樺偍妗�
region: '', // 鍦板煙
+ endpoint: '', // COS璁块棶endpoint
previewUrls: {} // 鏂囦欢棰勮鍦板潃缂撳瓨
};
},
@@ -359,6 +365,8 @@
this.preloadTemplateImages();
// 鍒濆鍖栨ā鏉胯〃鍗曟暟鎹�
this.initTemplateFormData();
+ // 璁剧疆榛樿閫変腑绗竴寮犳ā鏉垮浘鐗�
+ this.setDefaultSelectedImage();
}, 100);
}
},
@@ -383,6 +391,7 @@
});
this.bucket = res.data.data.bucket;
this.region = res.data.data.region;
+ this.endpoint = res.data.data.endpoint; // 鑾峰彇endpoint
}).catch(err => {
console.error('鍒濆鍖朇OS澶辫触', err);
// 浣跨敤setTimeout寤惰繜鏄剧ず鎻愮ず锛岄伩鍏嶅奖鍝嶅脊绐�
@@ -604,6 +613,10 @@
this.formValues.templateId = this.consumizetemplateInfo.id;
this.formValues.templateName = this.consumizetemplateInfo.name;
+ // 鏌ユ壘瀵瑰簲鐨勬ā鏉垮瓧娈典互鑾峰彇contentType
+ const templateItem = this.consumizetemplateInfo.templateConstomizeTitles.find(item => item.id === fieldId);
+ const contentType = templateItem ? templateItem.contentType : '';
+
// 鏌ユ壘鏄惁宸插瓨鍦ㄨ瀛楁
const existingIndex = this.formValues.templateForm.findIndex(item => item.id === fieldId);
@@ -612,6 +625,7 @@
this.$set(this.formValues.templateForm, existingIndex, {
id: fieldId,
templateTitle: templateTitle,
+ contentType: contentType, // 娣诲姞contentType
value: value
});
} else {
@@ -619,6 +633,7 @@
this.formValues.templateForm.push({
id: fieldId,
templateTitle: templateTitle,
+ contentType: contentType, // 娣诲姞contentType
value: value
});
}
@@ -736,6 +751,14 @@
* 娣诲姞鍒拌喘鐗╄溅鎴栬喘涔�
*/
addToCartOrBuy(val) {
+ // 妫�鏌ュ晢鍝佹槸鍚﹂渶瑕佹ā鏉垮苟涓旀ā鏉挎暟鎹槸鍚﹀畬鏁�
+ if (this.consumizetemplateInfo && this.consumizetemplateInfo.id) {
+ const isValid = this.validateTemplateData();
+ if (!isValid) {
+ return;
+ }
+ }
+
console.log(JSON.stringify(this.formValues))
if (!this.selectSkuList) {
// 浣跨敤setTimeout寤惰繜鏄剧ず鎻愮ず锛岄伩鍏嶅奖鍝嶅脊绐�
@@ -794,6 +817,56 @@
}
});
}
+ },
+
+ /**
+ * 楠岃瘉妯℃澘鏁版嵁鏄惁瀹屾暣
+ */
+ validateTemplateData() {
+ // 妫�鏌ユā鏉垮浘鐗囨槸鍚﹀凡閫夋嫨锛堝鏋滄湁妯℃澘鍥剧墖锛�
+ if (this.consumizetemplateInfo.templateImgs &&
+ this.consumizetemplateInfo.templateImgs.length > 0 &&
+ this.selectedImageObjects.length === 0) {
+ setTimeout(() => {
+ uni.showToast({
+ title: '璇烽�夋嫨妯℃澘鍥剧墖',
+ icon: 'none'
+ });
+ }, 100);
+ return false;
+ }
+
+ // 妫�鏌ュ姩鎬佽〃鍗曢」鏄惁宸插～鍐�
+ if (this.consumizetemplateInfo.templateConstomizeTitles) {
+ for (const item of this.consumizetemplateInfo.templateConstomizeTitles) {
+ const formItem = this.formValues.templateForm.find(formItem => formItem.id === item.id);
+
+ // 濡傛灉琛ㄥ崟椤逛笉瀛樺湪鎴栬�呭�间负绌�
+ if (!formItem || !formItem.value || formItem.value.trim() === '') {
+ setTimeout(() => {
+ uni.showToast({
+ title: `璇峰～鍐�${item.templateTitle}`,
+ icon: 'none'
+ });
+ }, 100);
+ return false;
+ }
+
+ // 鐗瑰埆妫�鏌ュ浘鐗囩被鍨嬬殑琛ㄥ崟椤规槸鍚︽湁涓婁紶
+ if (item.contentType === 'IMAGE' &&
+ (!this.imagePreviewUrls[item.id] || this.imagePreviewUrls[item.id].trim() === '')) {
+ setTimeout(() => {
+ uni.showToast({
+ title: `璇蜂笂浼�${item.templateTitle}`,
+ icon: 'none'
+ });
+ }, 100);
+ return false;
+ }
+ }
+ }
+
+ return true;
},
formatSku(list) {
// 鏍煎紡鍖栨暟鎹�
@@ -887,6 +960,13 @@
if (this.previewUrls && this.previewUrls[fileKey]) {
return this.previewUrls[fileKey];
}
+ // 濡傛灉娌℃湁http鍓嶇紑锛岄渶瑕佹嫾鎺ndpoint杩涜鏄剧ず
+ if (fileKey && !fileKey.startsWith('http://') && !fileKey.startsWith('https://')) {
+ // 浣跨敤endpoint鎷兼帴瀹屾暣鐨刄RL
+ if (this.endpoint) {
+ return this.endpoint + '/' + fileKey;
+ }
+ }
// 鍚﹀垯杩斿洖鍘熷鍊�
return fileKey;
},
@@ -905,6 +985,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);
+ }
}
},
@@ -919,6 +1051,9 @@
// 鍒濆鍖栨ā鏉胯〃鍗曟暟鎹�
this.initTemplateFormData();
+
+ // 榛樿閫変腑绗竴寮犳ā鏉垮浘鐗�
+ this.setDefaultSelectedImage();
console.log("goodsDetail",this.goodsDetail)
}, 100);
@@ -1090,7 +1225,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