页面优化

peng

2025-10-30 c61f03cfe1fcf023c7128f77f3d692aef309f77f

 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延迟显示提示，避免影响弹窗
@@ -951,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;
      },
@@ -969,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);
         }
      }
   },

@@ -983,6 +1051,9 @@

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

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

// 图片选择区域