页面优化

peng

2025-11-06 d68fb476c248c6c3ab974ea6b18d6bba638f12d8

 pages/product/m-buy/goods.vue

@@ -4,8 +4,8 @@
         <!-- 商品 -->
         <view class="goods-box bottom">
            <view class="goods-header">
               <view class="goods-img">
                  <!-- <u-image width="200rpx" border-radius="20" class="uimage" height="200rpx" :src="selectedSpecImg ? selectedSpecImg : goodsDetail.thumbnail"></u-image> -->
               <view class="goods-img" v-if="goodsDetail.specList && goodsDetail.specList.length > 0 && goodsDetail.specList[0].specImage.length > 0" @click="previewImageSpec">
                  <u-image width="200rpx" border-radius="20" class="uimage" height="200rpx" :src="selectedSpecImg ? selectedSpecImg : goodsDetail.thumbnail"></u-image>
               </view>
               <view class="goods-skus">
                  <!-- 有活动商品价格 -->
@@ -250,6 +250,7 @@
         cosClient: null, // COS客户端
         bucket: '', // 存储桶
         region: '', // 地域
         endpoint: '', // COS访问endpoint
         previewUrls: {} // 文件预览地址缓存
      };
   },
@@ -390,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延迟显示提示，避免影响弹窗
@@ -958,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;
      },
@@ -977,7 +986,20 @@
            this.selectedImages = [];
         }
      },
		
      // 预览模板图片
      previewImageSpec() {
         // 只预览当前选中的图片
         const url = this.selectedSpecImg ? this.selectedSpecImg : this.goodsDetail.thumbnail
         const urls = [url];
			
         // 调用uniapp原生API预览图片
         uni.previewImage({
            current: 0, // 当前显示图片的索引（只有一张图片，所以是0）
            urls: urls, // 需要预览的图片链接列表
            indicator: 'default', // 显示索引指示器
            loop: false // 只有一张图片，不需要循环预览
         });
      },
      // 预览模板图片
      previewImage(imgObject, index) {
         // 只预览当前选中的图片