| | |
| | | |
| | | |
| | | <!-- 悬挂商品链接层 --> |
| | | <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> |
| | | |
| | |
| | | data() { |
| | | return { |
| | | currentImgIndex: 0, // 播放到第几张图--索引 |
| | | currentGoodsIndex: 0, // 播放到第几个商品--索引 |
| | | currentTime: 0, |
| | | formartDuration: '', |
| | | duration: 0, |
| | |
| | | // 轮播图变化 |
| | | imgChange(e) { |
| | | this.currentImgIndex = e.detail.current; |
| | | }, |
| | | // 商品轮播图变化 |
| | | goodsChange(e) { |
| | | this.currentGoodsIndex = e.detail.current; |
| | | }, |
| | | // 获取进度条的位置和尺寸 |
| | | getBarRect() { |
| | |
| | | } |
| | | .goods-link { |
| | | position: relative; |
| | | width: 450rpx; |
| | | margin: 20rpx 0; |
| | | padding: 12rpx; |
| | | background-color: rgba(255, 255, 255, 0.9); |
| | |
| | | } |
| | | |
| | | .goods-container { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | |
| | | 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 { |