绿满眶商城微信小程序-uniapp
xiangpei
8 天以前 962764e90a4cd06b9f8a18ec8f542e689fd50131
pages/tabbar/index/home.vue
@@ -82,27 +82,25 @@
      
      
      <!-- 悬挂商品链接层 -->
      <view class="goods-link-warp">
      <view class="goods-link-warp" v-if="item.goodsList.length > 0">
         <view class="goods-link">
           <view class="goods-container">
             <!-- 商品图片 -->
             <image class="goods-image" :src="item.goods.imageUrl" mode="aspectFill"></image>
             <!-- 商品信息 -->
             <view class="goods-info">
               <text class="goods-name">{{item.goods.name}}</text>
               <view class="price-section">
                 <text class="current-price">¥{{item.goods.price}}</text>
                 <text class="original-price" v-if="item.goods.originalPrice">¥{{item.goods.originalPrice}}</text>
               </view>
               <text class="sales-count">{{item.goods.saleNum}}人已购</text>
             </view>
             <!-- 购买按钮 -->
             <view class="buy-button">
               <text>购买</text>
             </view>
           </view>
           <swiper @change="goodsChange" :autoplay="true" :interval="4000" style="height: 120rpx;">
            <swiper-item v-for="goods in item.goodsList" :key="goods.goodsId">
              <view class="goods-container">
               <!-- 商品图片 -->
               <image class="goods-image" :src="goods.thumbnail" mode="aspectFill"></image>
               <!-- 商品信息 -->
               <view class="goods-info">
                 <text class="goods-name">{{goods.goodsName}}</text>
                 <view class="price-section">
                  <text class="current-price">¥{{goods.price}}</text>
                  <text class="original-price" v-if="goods.originalPrice">¥{{goods.originalPrice}}</text>
                 </view>
               </view>
              </view>
            </swiper-item>
           </swiper>
         </view>
      </view>
      
@@ -237,6 +235,7 @@
  data() {
    return {
      currentImgIndex: 0, // 播放到第几张图--索引
      currentGoodsIndex: 0, // 播放到第几个商品--索引
      currentTime: 0,
      formartDuration: '',
      duration: 0,
@@ -323,6 +322,10 @@
     // 轮播图变化
     imgChange(e) {
        this.currentImgIndex = e.detail.current;
     },
     // 商品轮播图变化
     goodsChange(e) {
        this.currentGoodsIndex = e.detail.current;
     },
     // 获取进度条的位置和尺寸
     getBarRect() {
@@ -898,6 +901,7 @@
   }
   .goods-link {
     position: relative;
     width: 450rpx;
     margin: 20rpx 0;
     padding: 12rpx;
     background-color: rgba(255, 255, 255, 0.9);
@@ -906,6 +910,7 @@
   }
   
   .goods-container {
     width: 100%;
     display: flex;
     align-items: center;
   }
@@ -928,11 +933,13 @@
     font-size: 28rpx;
     color: #333;
     font-weight: bold;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     margin-bottom: 8rpx;
     width: 280rpx; /* 需要指定宽度 */
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
   
   .price-section {