定制商品

peng

2025-10-13 a95cd4cfc856d5861c57c82034f874ee27a3ef13

 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: "", // 选中图片的ID
            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和chooseImageId
         this.formValues.chooseImage = this.selectedImages.join(',');
         // 将选中图片的ID也存储到formValues中
         this.formValues.chooseImageId = this.selectedImageObjects.map(img => img.id).join(',');
			
         // 强制更新视图以确保UI正确反映数据变化
         this.$forceUpdate();
      },
      
      // 选择图片（参考video.vue的实现）
@@ -620,8 +632,11 @@
      
      // 表单提交处理
      handleFormSubmit() {
         // 使用新的formValues数据结构
         const formData = this.formValues;
         // 确保选中的图片对象也被包含在提交数据中
         const formData = {
            ...this.formValues,
            selectedImageObjects: this.selectedImageObjects
         };
         
         console.log('表单数据:', formData);
         // 这里可以添加实际的表单提交逻辑
@@ -762,12 +777,18 @@
               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);
               }
@@ -877,7 +898,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 = [];
         }
      }
   },