From 054be7955be38a62b34e619568b94ab05344ec02 Mon Sep 17 00:00:00 2001 From: xuxueyang <xuxy@fengyuntec.com> Date: 星期三, 28 八月 2024 18:44:09 +0800 Subject: [PATCH] 1 --- sub_pages/customer/trade/detail.vue | 68 ++++++++++++++++++++++++++++++++-- 1 files changed, 64 insertions(+), 4 deletions(-) diff --git a/sub_pages/customer/trade/detail.vue b/sub_pages/customer/trade/detail.vue index e0db91c..6997b1a 100644 --- a/sub_pages/customer/trade/detail.vue +++ b/sub_pages/customer/trade/detail.vue @@ -9,17 +9,25 @@ <swiper-item v-if="dto.video"> <video :src="dto.video" class="top-img" :auto-pause-if-navigate="true" style="display: block;margin: 0 auto;"></video> - + <view class="index-tag"> + 1/{{(dto.video&&1||0)+(dto.cover&&1||0)+(dto.bannerList&&dto.bannerList.length||0)}} + </view> </swiper-item> <swiper-item v-for="(url, index) in dto.bannerList" :key="index"> - <image class="top-img" :lazy-load="true" mode="scaleToFill" @click="previewImg(url)" - :src="url"> + <image class="top-img" :lazy-load="true" mode="scaleToFill" @click="previewImg(url)" :src="url"> </image> + <view class="index-tag"> + {{index+1+(dto.video&&1)}}/{{(dto.video&&1||0)+(dto.cover&&1||0)+(dto.bannerList&&dto.bannerList.length||0)}} + </view> </swiper-item> <swiper-item> - <image :src="dto.cover" :lazy-load="true" @click="previewImg(dto.cover)" class="top-img" mode="scaleToFill"> + <image :src="dto.cover" :lazy-load="true" @click="previewImg(dto.cover)" class="top-img" + mode="scaleToFill"> </image> + <view class="index-tag"> + {{(dto.bannerList&&dto.bannerList.length||0)+1+(dto.video&&1||0)}}/{{(dto.video&&1||0)+(dto.cover&&1||0)+(dto.bannerList&&dto.bannerList.length||0)}} + </view> </swiper-item> @@ -47,6 +55,15 @@ <view class="level m-r-15">{{ dto.levelStr || '-' }}</view> <view class=""> {{ dto.name || '-' }} + </view> + </view> + + <view class="tags" v-if="dto.tags||false"> + <!-- <view class="tag red">限时抢购</view> --> + <!-- <view class="tag green">品质严选</view> --> + <view class="tag red" v-for="(tag,k) of dto.tagArr" :class="[k===0?'red':'green']" :key="tag">{{ + tag + }} </view> </view> <view class="desc m-t-12"> @@ -441,6 +458,11 @@ if (!this.dto.bannerList) { this.dto.bannerList = [] } + if (this.dto.tags) { + this.dto.tagArr = this.dto.tags.split(",") || [] + } else { + this.dto.tagArr = [] + } } this.$message.hideLoading() @@ -529,6 +551,19 @@ swiper-item { background-color: #fff; border-radius: 8rpx; + position: relative; + + .index-tag { + position: absolute; + color: #fff; + font-size: 22rpx; + right: 10rpx; + bottom: 10rpx; + padding: 10rpx 20rpx; + text-align: center; + background-color: #545454; + border-radius: 30rpx; + } } } @@ -551,6 +586,31 @@ padding: 46rpx 30rpx; border-radius: 40rpx 40rpx 0rpx 0rpx; + .tags { + margin-top: 12rpx; + display: flex; + + .tag { + // min-width: 60rpx; + padding-left: 10rpx; + padding-right: 10rpx; + line-height: 30rpx; + background: #FEE6E6; + border-radius: 10rpx; + font-size: 18rpx; + color: #CD1212; + margin-right: 6rpx; + text-align: center; + } + + .tag.green { + color: rgba(110, 159, 102, 1); + background: rgba(202, 229, 214, 1); + border-radius: 10rpx; + // opacity: 0.57; + } + } + .title { font-weight: 600; font-size: 36rpx; -- Gitblit v1.9.3