update 解决图片显示问题

peng

2025-06-25 18f835d43008233b139f1f766ec87c6ed0bb1fee

 pages/commodity-square/commoditySquare.vue

@@ -8,17 +8,17 @@
         <view class="left" style="width: 310rpx;">
            <view class="commoditySquareItem" v-for="(item,index) in goodsList1"
               @click="goToGoodsInfo('goodsList1',item.id)">
               <video :src="item.goodsVideo" v-if="item.goodsVideo " v-show="item.show" :initial-time="0"
               <!-- <video :src="item.goodsVideo" v-if="item.goodsVideo " v-show="item.show" :initial-time="0"
                  :controls="false" object-fit="contain" :show-play-btn="false" :show-center-play-btn="false"
                  @loadedmetadata="getvideoInfo($event,'goodsList1',index)" :ref="'video'+item.id"
                  :style="{width:item.width,height:item.height}"></video>
               <image :src="item.thumbnail" v-if="item.goodsVideo ==null  || item.goodsVideo == ''"
                  :style="{width:item.width,height:item.height}"></video> -->
               <image :src="item.thumbnail" 
                  mode="aspectFill" class="goodsImg">
               </image>
               <view class="goodsInfo">
                  <view class="">{{item.goodsName}}</view>
                  <view class="goodsName">{{item.goodsName}}</view>
                  <view class="priceInfo">
                     <view class="">￥{{item.price}}</view>
                     <view class="goodsPrice">￥{{item.price}}</view>
                     <view class="">已售: {{item.buyCount}}</view>
                  </view>
               </view>
@@ -27,17 +27,17 @@
         <view class="right" style="width: 310rpx;">
            <view class="commoditySquareItem" v-for="(item,index) in goodsList2"
               @click="goToGoodsInfo('goodsList2',item.id)">
               <video :src="item.goodsVideo" v-if="item.goodsVideo " v-show="item.show" :initial-time="0"
<!--                <video :src="item.goodsVideo" v-if="item.goodsVideo " v-show="item.show" :initial-time="0"
                  :controls="false" object-fit="contain" :show-play-btn="false" :show-center-play-btn="false"
                  @loadedmetadata="getvideoInfo($event,'goodsList2',index)" :ref="'video'+item.id"
                  :style="{width:item.width,height:item.height}"></video>
               <image :src="item.thumbnail" v-if="item.goodsVideo ==null || item.goodsVideo == ''"
                  :style="{width:item.width,height:item.height}"></video> -->
               <image :src="item.thumbnail" 
                  mode="aspectFill" class="goodsImg">
               </image>
               <view class="goodsInfo">
                  <view class="">{{item.goodsName}}</view>
                  <view class="goodsName">{{item.goodsName}}</view>
                  <view class="priceInfo">
                     <view class="">￥{{item.price}}</view>
                     <view class="goodsPrice">￥{{item.price}}</view>
                     <view class="">已售: {{item.buyCount}}</view>
                  </view>
               </view>
@@ -96,6 +96,7 @@
               pageSize: 12,
               pageNumber: 1,
               categoryId: null,
               canFilter:true
            },
            //商品双列显示
            goodsList1: [],
@@ -165,19 +166,19 @@
         },
         async getgoodsData() {
            const goodsList = await getGoodsList(this.getGoodsParam);
            const sts = await getSTSToken();
            const stsUrl = sts.data.data.endpoint
            // 处理数据
            goodsList.data.result.records.forEach(item => {
               if (item.thumbnail !== '' && item.thumbnail !== null && item.thumbnail.indexOf('http') ===
                  -1) {
                  item.thumbnail = stsUrl + '/' + item.thumbnail
               }
               if (item.goodsVideo !== '' && item.goodsVideo !== null && item.goodsVideo.indexOf(
                     'http') === -1) {
                  item.goodsVideo = stsUrl + '/' + item.goodsVideo
               }
            })
            // const sts = await getSTSToken();
            // const stsUrl = sts.data.data.endpoint
            // // 处理数据
            // goodsList.data.result.records.forEach(item => {
            //    if (item.thumbnail !== '' && item.thumbnail !== null && item.thumbnail.indexOf('http') ===
            //       -1) {
            //       item.thumbnail = stsUrl + '/' + item.thumbnail
            //    }
            //    if (item.goodsVideo !== '' && item.goodsVideo !== null && item.goodsVideo.indexOf(
            //          'http') === -1) {
            //       item.goodsVideo = stsUrl + '/' + item.goodsVideo
            //    }
            // })
            //计算两个数组的长度 用于解决瀑布流两边高度不一致问题
            //平分给两个数组
            const goodsSize = goodsList.data.result.records.length;
@@ -317,11 +318,11 @@
      flex: 1
   }

   .priceInfo {
      margin-top: 10rpx;
      display: flex;
      justify-content: space-around;
   }
   // .priceInfo {
   //    margin-top: 10rpx;
   //    display: flex;
   //    justify-content: space-around;
   // }

   // 处理抽屉内容滚动
   .scroll-view-box {
@@ -370,4 +371,26 @@
      // width: 500rpx;
      // z-index: 9999;
   }
   .goodsInfo{
      margin-top: 10rpx;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      flex-direction: column;
   }
   .goodsName{
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .priceInfo{
      margin-top: 10rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
   }
   .goodsPrice{
      color: red;
      font-weight: bold;
   }
</style>