定制商品

peng

2025-10-16 6a20878b9b1e3460531b055d72d5d671f761abc3

 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('初始化COS失败', 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前缀，需要拼接endpoint进行显示
         if (fileKey && !fileKey.startsWith('http://') && !fileKey.startsWith('https://')) {
            // 使用endpoint拼接完整的URL
            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;
}

// 图片选择区域