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 | 201 ++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 186 insertions(+), 15 deletions(-)
diff --git a/pages/product/m-buy/goods.vue b/pages/product/m-buy/goods.vue
index 6289c32..128c85c 100644
--- a/pages/product/m-buy/goods.vue
+++ b/pages/product/m-buy/goods.vue
@@ -113,18 +113,23 @@
v-for="(img, index) in consumizetemplateInfo.templateImgs"
:key="img.id"
class="image-item"
- :class="{ selected: selectedImages.includes(img.imgUrl) }"
- @click="selectImage(img.imgUrl)"
+ :class="{ selected: selectedImageObjects.some(selectedImg => selectedImg.id === img.id) }"
+ @click="handleImageClick(img, index)"
>
<image
:src="getFilePreviewUrlSync(img.imgUrl)"
class="image-preview"
mode="aspectFill"
/>
- <view v-if="selectedImages.includes(img.imgUrl)" class="selected-overlay">
+ <view v-if="selectedImageObjects.some(selectedImg => selectedImg.id === img.id)" class="selected-overlay">
<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>
@@ -231,10 +236,12 @@
// 琛ㄥ崟鐩稿叧鏁版嵁
selectedImages: [], // 閫変腑鐨勬ā鏉垮浘鐗�
+ selectedImageObjects: [], // 閫変腑鐨勬ā鏉垮浘鐗囧璞★紙鍖呭惈ID绛夊畬鏁翠俊鎭級
formValues: {
templateId: "", // 妯℃澘ID
templateName: "", // 妯℃澘鍚嶇О
chooseImage: "", // 閫変腑鐨勫浘鐗�
+ chooseImageId: "", // 閫変腑鍥剧墖鐨処D
templateForm: [] // 琛ㄥ崟鏁扮粍 [{id, templateTitle, value}]
}, // 琛ㄥ崟鍊�
imagePreviewUrls: {}, // 鍥剧墖棰勮URL
@@ -243,6 +250,7 @@
cosClient: null, // COS瀹㈡埛绔�
bucket: '', // 瀛樺偍妗�
region: '', // 鍦板煙
+ endpoint: '', // COS璁块棶endpoint
previewUrls: {} // 鏂囦欢棰勮鍦板潃缂撳瓨
};
},
@@ -357,6 +365,8 @@
this.preloadTemplateImages();
// 鍒濆鍖栨ā鏉胯〃鍗曟暟鎹�
this.initTemplateFormData();
+ // 璁剧疆榛樿閫変腑绗竴寮犳ā鏉垮浘鐗�
+ this.setDefaultSelectedImage();
}, 100);
}
},
@@ -381,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寤惰繜鏄剧ず鎻愮ず锛岄伩鍏嶅奖鍝嶅脊绐�
@@ -418,18 +429,28 @@
}
},
- // 閫夋嫨妯℃澘鍥剧墖
- selectImage(imgUrl) {
- const index = this.selectedImages.indexOf(imgUrl);
- if (index > -1) {
- // 濡傛灉宸查�変腑锛屽垯鍙栨秷閫夋嫨
- this.selectedImages.splice(index, 1);
+ // 閫夋嫨妯℃澘鍥剧墖锛堝崟閫夋ā寮忥級
+ selectImage(imgObject) {
+ // 妫�鏌ュ綋鍓嶉�変腑鐨勫浘鐗囨槸鍚﹀氨鏄偣鍑荤殑鍥剧墖
+ const selectedIndex = this.selectedImageObjects.findIndex(selectedImg => selectedImg.id === imgObject.id);
+
+ if (selectedIndex > -1) {
+ // 濡傛灉鐐瑰嚮鐨勬槸宸查�変腑鐨勫浘鐗囷紝鍒欏彇娑堥�夋嫨
+ this.selectedImageObjects = [];
+ this.selectedImages = [];
} else {
- // 鍚﹀垯娣诲姞鍒伴�変腑鍒楄〃
- this.selectedImages.push(imgUrl);
+ // 濡傛灉鐐瑰嚮鐨勬槸鏈�変腑鐨勫浘鐗囷紝鍒欓�変腑璇ュ浘鐗囷紙娓呯┖涔嬪墠鐨勯�夋嫨锛�
+ this.selectedImageObjects = [imgObject];
+ this.selectedImages = [imgObject.imgUrl];
}
- // 鏇存柊formValues涓殑chooseImage
+
+ // 鏇存柊formValues涓殑chooseImage鍜宑hooseImageId
this.formValues.chooseImage = this.selectedImages.join(',');
+ // 灏嗛�変腑鍥剧墖鐨処D涔熷瓨鍌ㄥ埌formValues涓�
+ this.formValues.chooseImageId = this.selectedImageObjects.map(img => img.id).join(',');
+
+ // 寮哄埗鏇存柊瑙嗗浘浠ョ‘淇漊I姝ｇ‘鍙嶆槧鏁版嵁鍙樺寲
+ this.$forceUpdate();
},
// 閫夋嫨鍥剧墖锛堝弬鑰僾ideo.vue鐨勫疄鐜帮級
@@ -592,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);
@@ -600,6 +625,7 @@
this.$set(this.formValues.templateForm, existingIndex, {
id: fieldId,
templateTitle: templateTitle,
+ contentType: contentType, // 娣诲姞contentType
value: value
});
} else {
@@ -607,6 +633,7 @@
this.formValues.templateForm.push({
id: fieldId,
templateTitle: templateTitle,
+ contentType: contentType, // 娣诲姞contentType
value: value
});
}
@@ -620,8 +647,11 @@
// 琛ㄥ崟鎻愪氦澶勭悊
handleFormSubmit() {
- // 浣跨敤鏂扮殑formValues鏁版嵁缁撴瀯
- const formData = this.formValues;
+ // 纭繚閫変腑鐨勫浘鐗囧璞′篃琚寘鍚湪鎻愪氦鏁版嵁涓�
+ const formData = {
+ ...this.formValues,
+ selectedImageObjects: this.selectedImageObjects
+ };
console.log('琛ㄥ崟鏁版嵁:', formData);
// 杩欓噷鍙互娣诲姞瀹為檯鐨勮〃鍗曟彁浜ら�昏緫
@@ -721,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寤惰繜鏄剧ず鎻愮ず锛岄伩鍏嶅奖鍝嶅脊绐�
@@ -762,17 +800,73 @@
data.cartType = 'BUY_NOW';
}
+ // 鍒涘缓鍖呭惈鍥剧墖ID鐨勫畬鏁磋〃鍗曟暟鎹�
+ const templateData = {
+ ...this.formValues,
+ selectedImageObjects: this.selectedImageObjects
+ };
+
API_trade.addToCart(data).then(res => {
if (res.data.code == 200) {
// 浣跨敤setTimeout寤惰繜璺宠浆锛岄伩鍏嶅奖鍝嶅脊绐�
setTimeout(() => {
uni.navigateTo({
- url: `/pages/order/fillorder?way=${data.cartType}&addr=${this.addr.id || ''}&template=${encodeURIComponent(JSON.stringify(this.formValues))}&parentOrder=${encodeURIComponent(JSON.stringify(this.parentOrder))}`
+ url: `/pages/order/fillorder?way=${data.cartType}&addr=${this.addr.id || ''}&template=${encodeURIComponent(JSON.stringify(templateData))}&parentOrder=${encodeURIComponent(JSON.stringify(this.parentOrder))}`
});
}, 100);
}
});
}
+ },
+
+ /**
+ * 楠岃瘉妯℃澘鏁版嵁鏄惁瀹屾暣
+ */
+ 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) {
// 鏍煎紡鍖栨暟鎹�
@@ -866,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;
},
@@ -877,7 +978,64 @@
this.formValues.templateId = this.consumizetemplateInfo.id;
this.formValues.templateName = this.consumizetemplateInfo.name;
this.formValues.chooseImage = "";
+ this.formValues.chooseImageId = "";
this.formValues.templateForm = [];
+
+ // 鍒濆鍖栭�変腑鐨勫浘鐗囧璞℃暟缁勫拰鍥剧墖URL鏁扮粍
+ 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);
}
}
},
@@ -893,6 +1051,9 @@
// 鍒濆鍖栨ā鏉胯〃鍗曟暟鎹�
this.initTemplateFormData();
+
+ // 榛樿閫変腑绗竴寮犳ā鏉垮浘鐗�
+ this.setDefaultSelectedImage();
console.log("goodsDetail",this.goodsDetail)
}, 100);
@@ -1064,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