定制商品

peng

2025-10-14 93d859ef23c015d96c7c16024f7c99fe2c054c4f

 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>
                  
@@ -359,6 +364,8 @@
                  this.preloadTemplateImages();
                  // 初始化模板表单数据
                  this.initTemplateFormData();
                  // 设置默认选中第一张模板图片
                  this.setDefaultSelectedImage();
               }, 100);
            }
         },
@@ -969,6 +976,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);
         }
      }
   },

@@ -983,6 +1042,9 @@

         // 初始化模板表单数据
         this.initTemplateFormData();
			
         // 默认选中第一张模板图片
         this.setDefaultSelectedImage();

         console.log("goodsDetail",this.goodsDetail)
      }, 100);
@@ -1154,7 +1216,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;
}

// 图片选择区域