From 7c7fd1a80ad89dd1037f2ee420fed2dcde7290a1 Mon Sep 17 00:00:00 2001 From: xuxueyang <xuxy@fengyuntec.com> Date: 星期二, 20 八月 2024 16:42:53 +0800 Subject: [PATCH] 1 --- sub_pages/customer/trade/detail.vue | 122 +++++++++++++++++++++++++++++++++++----- 1 files changed, 106 insertions(+), 16 deletions(-) diff --git a/sub_pages/customer/trade/detail.vue b/sub_pages/customer/trade/detail.vue index 75ded1d..6997b1a 100644 --- a/sub_pages/customer/trade/detail.vue +++ b/sub_pages/customer/trade/detail.vue @@ -2,7 +2,38 @@ <view class="trade-detail"> <view class="top-img-container"> - <image :src="dto.cover" class="top-img" mode="aspectFill"></image> + <!-- <image :src="dto.cover" class="top-img" mode="aspectFill"></image> --> + <uni-swiper-dot class="uni-swiper-dot-box" :mode="'dot'" field="content"> + <swiper class="swiper-box" :interval="10000" :circular="true" :current="0" :autoplay="true"> + + <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> + <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> + <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> + + + </swiper> + </uni-swiper-dot> + @@ -11,9 +42,6 @@ class="icon-sc"></image> <image v-if="dto.collection" src="../../../static/common/icon-sc-fill.png" @click="collectItem(dto)" class="icon-sc"></image> - - - <!-- <view class="num">12</view>--> </view> <view class="icon-container"> <image src="../../../static/common/icon-shop.png" @click="toShopping(dto)" class="icon-shop"> @@ -29,6 +57,15 @@ {{ 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"> <view class="m-r-15">已售:{{ dto.sales || 0 }}</view> <view class="m-r-15">剩余:{{ dto.stock || 0 }}</view> @@ -39,11 +76,11 @@ <span class="num">{{ dto.price || '-' }}</span> 元/扎 </view> - <view class="m-l-a m-r-15"> - <button open-type="contact" class="component-button-contact" > - <image src="../../../static/common/icon-kf.png" class="icon-kf m-l-15 img100"></image> - - </button> + <view class="m-l-a m-r-15"> + <button open-type="contact" class="component-button-contact"> + <image src="../../../static/common/icon-kf.png" class="icon-kf m-l-15 img100"></image> + + </button> </view> <view class="m-r-0 gwc" @click="submitShopping(dto)" v-if="!dto.shopnum"> @@ -92,7 +129,7 @@ </view> </view> - <view class="line" v-if="dto.bannerList&&dto.bannerList.length>0"> + <!-- <view class="line" v-if="dto.bannerList&&dto.bannerList.length>0"> </view> <uni-swiper-dot class="uni-swiper-dot-box" :mode="'dot'" field="content" @@ -100,20 +137,21 @@ <swiper class="swiper-box" :interval="10000" :circular="true" :current="0" :autoplay="true"> <swiper-item v-for="(url, index) in dto.bannerList" :key="index"> <view class="swiper-item" :class="'swiper-item' + index"> - <image class="home-banner-image m-auto m-t-12 m-b-12" style="display: block;" mode="scaleToFill" @click="previewImg(url)" :src="url"> + <image class="home-banner-image m-auto m-t-12 m-b-12" style="display: block;" mode="scaleToFill" + @click="previewImg(url)" :src="url"> </image> </view> </swiper-item> </swiper> - </uni-swiper-dot> + </uni-swiper-dot> --> - <view class="line" v-if="dto.video"> + <!-- <view class="line" v-if="dto.video"> </view> <view class="info-brand m-t-12" v-if="dto.video"> <video :src="dto.video" :auto-pause-if-navigate="true" style="display: block;margin: 0 auto;"></video> - </view> + </view> --> @@ -186,14 +224,14 @@ this.id = options.id || '' // #ifdef PUB_CUSTOMER - + if (options.partnerUserId) { let tmp = this tmp.sharePartnerUserId = options.partnerUserId //合伙人绑定的,判断当前用户,是否有登录,登录没绑定,没登录先缓存合伙人id,等注册和登录时候再弄 setTimeout(() => { //并且当前用户没有绑定 - if(tmp.currentInfo.id&&tmp.currentInfo.customerDTO.partnerId){ + if (tmp.currentInfo.id && tmp.currentInfo.customerDTO.partnerId) { return } if (tmp.currentInfo.id) { @@ -414,7 +452,16 @@ }) if (code === 0) { this.dto = { + bannerList: [], ...data, + } + if (!this.dto.bannerList) { + this.dto.bannerList = [] + } + if (this.dto.tags) { + this.dto.tagArr = this.dto.tags.split(",") || [] + } else { + this.dto.tagArr = [] } } @@ -504,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; + } } } @@ -525,6 +585,31 @@ .trade-info-container { 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; @@ -687,6 +772,11 @@ .top-img-container { position: relative; + swiper { + width: 750rpx; + height: 764rpx; + } + .top-img { width: 750rpx; height: 764rpx; -- Gitblit v1.9.3