From 3a2524692711cf35fc142881b2837368ae2c3d25 Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期一, 13 十月 2025 14:57:19 +0800
Subject: [PATCH] 定制商品
---
pages/product/m-buy/goods.vue | 120 ++++++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 105 insertions(+), 15 deletions(-)
diff --git a/pages/product/m-buy/goods.vue b/pages/product/m-buy/goods.vue
index 6289c32..f6c92b1 100644
--- a/pages/product/m-buy/goods.vue
+++ b/pages/product/m-buy/goods.vue
@@ -113,15 +113,15 @@
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="selectImage(img)"
>
<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>
@@ -231,10 +231,12 @@
// 琛ㄥ崟鐩稿叧鏁版嵁
selectedImages: [], // 閫変腑鐨勬ā鏉垮浘鐗�
+ selectedImageObjects: [], // 閫変腑鐨勬ā鏉垮浘鐗囧璞★紙鍖呭惈ID绛夊畬鏁翠俊鎭級
formValues: {
templateId: "", // 妯℃澘ID
templateName: "", // 妯℃澘鍚嶇О
chooseImage: "", // 閫変腑鐨勫浘鐗�
+ chooseImageId: "", // 閫変腑鍥剧墖鐨処D
templateForm: [] // 琛ㄥ崟鏁扮粍 [{id, templateTitle, value}]
}, // 琛ㄥ崟鍊�
imagePreviewUrls: {}, // 鍥剧墖棰勮URL
@@ -418,18 +420,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 +604,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 +616,7 @@
this.$set(this.formValues.templateForm, existingIndex, {
id: fieldId,
templateTitle: templateTitle,
+ contentType: contentType, // 娣诲姞contentType
value: value
});
} else {
@@ -607,6 +624,7 @@
this.formValues.templateForm.push({
id: fieldId,
templateTitle: templateTitle,
+ contentType: contentType, // 娣诲姞contentType
value: value
});
}
@@ -620,8 +638,11 @@
// 琛ㄥ崟鎻愪氦澶勭悊
handleFormSubmit() {
- // 浣跨敤鏂扮殑formValues鏁版嵁缁撴瀯
- const formData = this.formValues;
+ // 纭繚閫変腑鐨勫浘鐗囧璞′篃琚寘鍚湪鎻愪氦鏁版嵁涓�
+ const formData = {
+ ...this.formValues,
+ selectedImageObjects: this.selectedImageObjects
+ };
console.log('琛ㄥ崟鏁版嵁:', formData);
// 杩欓噷鍙互娣诲姞瀹為檯鐨勮〃鍗曟彁浜ら�昏緫
@@ -721,6 +742,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 +791,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) {
// 鏍煎紡鍖栨暟鎹�
@@ -877,7 +962,12 @@
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 = [];
}
}
},
--
Gitblit v1.8.0