|
@@ -1,11 +1,11 @@
|
|
<template name="hotProduct">
|
|
<template name="hotProduct">
|
|
<view>
|
|
<view>
|
|
<view class="container clearfix">
|
|
<view class="container clearfix">
|
|
- <view class="title">推荐专区</view>
|
|
|
|
|
|
+ <view class="title-header">推荐专区</view>
|
|
<view class="recommend-list">
|
|
<view class="recommend-list">
|
|
<swiper class="tui-banner-swiper" :autoplay="false" :interval="5000" :duration="500" :circular="true" @change="swiperChange">
|
|
<swiper class="tui-banner-swiper" :autoplay="false" :interval="5000" :duration="500" :circular="true" @change="swiperChange">
|
|
<swiper-item v-for="(product,index) in hotProductList" :key="index">
|
|
<swiper-item v-for="(product,index) in hotProductList" :key="index">
|
|
- <view class="floor-item" v-for="(item, idx) in product" :key="idx" @click.stop="navToDetailPage(item.id)">
|
|
|
|
|
|
+ <view class="floor-item clearfix" v-for="(item, idx) in product" :key="idx" @click.stop="navToDetailPage(item.id)">
|
|
<image class="item-img tui-skeleton-fillet" :src="item.image" mode="aspectFill"></image>
|
|
<image class="item-img tui-skeleton-fillet" :src="item.image" mode="aspectFill"></image>
|
|
<image class="item-icon-type" :src="iconNew" mode="" v-if="item.actType === 2"></image>
|
|
<image class="item-icon-type" :src="iconNew" mode="" v-if="item.actType === 2"></image>
|
|
<image class="item-icon-type" :src="iconHot" mode="" v-if="item.actType === 1"></image>
|
|
<image class="item-icon-type" :src="iconHot" mode="" v-if="item.actType === 1"></image>
|
|
@@ -13,88 +13,78 @@
|
|
<view class="title tui-skeleton-rect">
|
|
<view class="title tui-skeleton-rect">
|
|
<text class="mclap">{{item.name}}</text>
|
|
<text class="mclap">{{item.name}}</text>
|
|
</view>
|
|
</view>
|
|
- <view class="" v-if="hasLogin">
|
|
|
|
- <template v-if="userIdentity === 4">
|
|
|
|
- <view class="title-none" v-if="item.priceFlag === 1">
|
|
|
|
- <text class="p big">¥未公开价格</text>
|
|
|
|
- </view>
|
|
|
|
- <view class="title-none" v-if="item.priceFlag === 2">
|
|
|
|
- <text class="p big">¥价格仅会员可见</text>
|
|
|
|
- </view>
|
|
|
|
- <view class="price tui-skeleton-rect" v-if="item.priceFlag === 0" :class="PromotionsFormat(item.promotions) ? 'none' : ''">
|
|
|
|
- <text class="p sm">¥</text>
|
|
|
|
- <text class="p big">{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price ) | NumFormat}}</text>
|
|
|
|
- <template v-if="item.actStatus===1">
|
|
|
|
- <view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
|
|
|
|
- {{item.promotions.name}}<text v-if="hasLogin && item.priceFlag != 1">:¥{{item.price | NumFormat}}</text>
|
|
|
|
- </view>
|
|
|
|
- <view class="floor-tags" v-else>{{item.promotions.name}}</view>
|
|
|
|
- </template>
|
|
|
|
- <template v-if="item.actStatus ===0 && item.ladderPriceFlag===1">
|
|
|
|
- <view class="floor-tags">阶梯价格</view>
|
|
|
|
- </template>
|
|
|
|
- </view>
|
|
|
|
- </template>
|
|
|
|
|
|
+ <view class="floor-item-act">
|
|
<template v-if="userIdentity === 3">
|
|
<template v-if="userIdentity === 3">
|
|
|
|
+ <template v-if="item.actStatus===1">
|
|
|
|
+ <view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
|
|
|
|
+ {{item.promotions.name}}
|
|
|
|
+ <text v-if="hasLogin && item.priceFlag != 1">:¥{{item.price | NumFormat}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="floor-tags" v-else>{{item.promotions.name}}</view>
|
|
|
|
+ </template>
|
|
|
|
+ <template v-if="item.actStatus ===0 && item.ladderPriceFlag===1">
|
|
|
|
+ <view class="floor-tags">阶梯价格</view>
|
|
|
|
+ </template>
|
|
|
|
+ </template>
|
|
|
|
+ <template v-else>
|
|
|
|
+ <template v-if="item.actStatus===1">
|
|
|
|
+ <view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
|
|
|
|
+ {{item.promotions.name}}
|
|
|
|
+ <text v-if="hasLogin && item.priceFlag != 1">:¥{{item.price | NumFormat}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="floor-tags" v-else>{{item.promotions.name}}</view>
|
|
|
|
+ </template>
|
|
|
|
+ <template v-if="item.actStatus ===0 && item.ladderPriceFlag===1">
|
|
|
|
+ <view class="floor-tags">阶梯价格</view>
|
|
|
|
+ </template>
|
|
|
|
+ </template>
|
|
|
|
+ </view>
|
|
|
|
+ <view v-if="hasLogin">
|
|
|
|
+ <template v-if="userIdentity == 3">
|
|
<template v-if="item.supplierId == shopId">
|
|
<template v-if="item.supplierId == shopId">
|
|
- <view class="title-none" v-if="item.priceFlag === 1">
|
|
|
|
|
|
+ <view class="title-none" v-if="item.priceFlag === '1'">
|
|
<text class="p big">¥未公开价格</text>
|
|
<text class="p big">¥未公开价格</text>
|
|
</view>
|
|
</view>
|
|
<view class="price tui-skeleton-rect" v-else :class="PromotionsFormat(item.promotions) ? 'none' : ''">
|
|
<view class="price tui-skeleton-rect" v-else :class="PromotionsFormat(item.promotions) ? 'none' : ''">
|
|
<text class="p sm">¥</text>
|
|
<text class="p sm">¥</text>
|
|
<text class="p big">{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price ) | NumFormat}}</text>
|
|
<text class="p big">{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price ) | NumFormat}}</text>
|
|
- <template v-if="item.actStatus===1">
|
|
|
|
- <view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
|
|
|
|
- {{item.promotions.name}}<text v-if="hasLogin && item.priceFlag != 1">:¥{{item.price | NumFormat}} {{ shopId }}{{item.supplierId }}</text>
|
|
|
|
- </view>
|
|
|
|
- <view class="floor-tags" v-else>{{item.promotions.name}}</view>
|
|
|
|
- </template>
|
|
|
|
- <template v-if="item.actStatus ===0 && item.ladderPriceFlag===1">
|
|
|
|
- <view class="floor-tags">阶梯价格</view>
|
|
|
|
- </template>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
<template v-else>
|
|
<template v-else>
|
|
<view class="no-price">
|
|
<view class="no-price">
|
|
<view class="p-stars">
|
|
<view class="p-stars">
|
|
<text class="p-no">¥</text>
|
|
<text class="p-no">¥</text>
|
|
- <uni-grader :grade="Number(item.priceGrade)"></uni-grader>
|
|
|
|
|
|
+ <uni-grader :grade="Number(item.priceGrade)" :margin="14"></uni-grader>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
|
|
+ <template v-if="userIdentity ===4">
|
|
|
|
+ <view class="title-none" v-if="item.priceFlag === '1'">
|
|
|
|
+ <text class="p big">¥未公开价格</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="title-none" v-if="item.priceFlag === '2'">
|
|
|
|
+ <text class="p big">¥价格仅会员可见</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="price tui-skeleton-rect" v-if="item.priceFlag === '0'" :class="PromotionsFormat(item.promotions) ? 'none' : ''">
|
|
|
|
+ <text class="p sm">¥</text>
|
|
|
|
+ <text class="p big">{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price ) | NumFormat}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ </template>
|
|
<template v-else>
|
|
<template v-else>
|
|
- <view class="title-none" v-if="item.priceFlag === 1">
|
|
|
|
|
|
+ <view class="title-none" v-if="item.priceFlag === '1'">
|
|
<text class="p big">¥未公开价格</text>
|
|
<text class="p big">¥未公开价格</text>
|
|
</view>
|
|
</view>
|
|
<view class="price tui-skeleton-rect" v-else :class="PromotionsFormat(item.promotions) ? 'none' : ''">
|
|
<view class="price tui-skeleton-rect" v-else :class="PromotionsFormat(item.promotions) ? 'none' : ''">
|
|
<text class="p sm">¥</text>
|
|
<text class="p sm">¥</text>
|
|
<text class="p big">{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price ) | NumFormat}}</text>
|
|
<text class="p big">{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price ) | NumFormat}}</text>
|
|
- <template v-if="item.actStatus === 1">
|
|
|
|
- <view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
|
|
|
|
- {{item.promotions.name}}<text v-if="hasLogin && item.priceFlag != 1">:¥{{item.price | NumFormat}}</text>
|
|
|
|
- </view>
|
|
|
|
- <view class="floor-tags" v-else>{{item.promotions.name}}</view>
|
|
|
|
- </template>
|
|
|
|
- <template v-if="item.actStatus === 0 && item.ladderPriceFlag===1">
|
|
|
|
- <view class="floor-tags">阶梯价格</view>
|
|
|
|
- </template>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
<view v-else class="no-price">
|
|
<view v-else class="no-price">
|
|
<view class="p-stars">
|
|
<view class="p-stars">
|
|
<text class="p-no">¥</text>
|
|
<text class="p-no">¥</text>
|
|
- <uni-grader :grade="Number(item.priceGrade)"></uni-grader>
|
|
|
|
- <template v-if="item.actStatus==1">
|
|
|
|
- <view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
|
|
|
|
- {{item.promotions.name}}<text v-if="hasLogin && item.priceFlag != 1">:¥{{item.price | NumFormat}}</text>
|
|
|
|
- </view>
|
|
|
|
- <view class="floor-tags" v-else>{{item.promotions.name}}</view>
|
|
|
|
- </template>
|
|
|
|
- <template v-if="item.actStatus ==0 && item.ladderPriceFlag==1">
|
|
|
|
- <view class="floor-tags">阶梯价格</view>
|
|
|
|
- </template>
|
|
|
|
|
|
+ <uni-grader :grade="Number(item.priceGrade)" :margin="14"></uni-grader>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
@@ -142,6 +132,7 @@
|
|
},
|
|
},
|
|
filters: {
NumFormat:function(text) {//处理金额
return Number(text).toFixed(2);
},
},
|
|
filters: {
NumFormat:function(text) {//处理金额
return Number(text).toFixed(2);
},
},
|
|
created(){
|
|
created(){
|
|
|
|
+ console.log(this.userIdentity)
|
|
this.initData(this.list)
|
|
this.initData(this.list)
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
@@ -188,7 +179,7 @@
|
|
width: 100%;
|
|
width: 100%;
|
|
height: auto;
|
|
height: auto;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
- .title{
|
|
|
|
|
|
+ .title-header{
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 80rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
line-height: 80rpx;
|
|
@@ -201,7 +192,7 @@
|
|
}
|
|
}
|
|
.recommend-list{
|
|
.recommend-list{
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: 1100rpx;
|
|
|
|
|
|
+ height: 1140rpx;
|
|
position: relative;
|
|
position: relative;
|
|
padding-bottom: 20rpx;
|
|
padding-bottom: 20rpx;
|
|
.tui-banner-swiper {
|
|
.tui-banner-swiper {
|
|
@@ -209,7 +200,7 @@
|
|
margin: 0 auto;
|
|
margin: 0 auto;
|
|
background: #F7F7F7;
|
|
background: #F7F7F7;
|
|
padding: 0 24rpx 0 24rpx;
|
|
padding: 0 24rpx 0 24rpx;
|
|
- height: 1080rpx;
|
|
|
|
|
|
+ height: 1140rpx;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
transform: translateY(0);
|
|
transform: translateY(0);
|
|
.floor-item{
|
|
.floor-item{
|
|
@@ -251,24 +242,22 @@
|
|
.floor-item-act{
|
|
.floor-item-act{
|
|
display: block;
|
|
display: block;
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: 68rpx;
|
|
|
|
|
|
+ height: 32rpx;
|
|
text-align: center;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
- padding: 16rpx 0;
|
|
|
|
- margin-top: 8rpx;
|
|
|
|
}
|
|
}
|
|
.floor-tags{
|
|
.floor-tags{
|
|
- height: 36rpx;
|
|
|
|
|
|
+ height: 28rpx;
|
|
border-radius: 6rpx;
|
|
border-radius: 6rpx;
|
|
background-color: #FFFFFF;
|
|
background-color: #FFFFFF;
|
|
- line-height: 36rpx;
|
|
|
|
|
|
+ line-height: 28rpx;
|
|
color: $color-system;
|
|
color: $color-system;
|
|
text-align: center;
|
|
text-align: center;
|
|
display: inline-block;
|
|
display: inline-block;
|
|
padding:0 16rpx;
|
|
padding:0 16rpx;
|
|
font-size: $font-size-20;
|
|
font-size: $font-size-20;
|
|
- margin-left: 15rpx;
|
|
|
|
border: 1px solid #E15616;
|
|
border: 1px solid #E15616;
|
|
|
|
+ float: left;
|
|
}
|
|
}
|
|
.title-none{
|
|
.title-none{
|
|
font-size: $font-size-26;
|
|
font-size: $font-size-26;
|
|
@@ -292,6 +281,7 @@
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 72rpx;
|
|
height: 72rpx;
|
|
display: flex;
|
|
display: flex;
|
|
|
|
+ line-height: 36rpx;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
margin-bottom: 15rpx;
|
|
margin-bottom: 15rpx;
|
|
padding: 0;
|
|
padding: 0;
|
|
@@ -324,7 +314,7 @@
|
|
}
|
|
}
|
|
.price{
|
|
.price{
|
|
color: #FF2A2A;
|
|
color: #FF2A2A;
|
|
- line-height:70rpx;
|
|
|
|
|
|
+ line-height:54rpx;
|
|
&.none{
|
|
&.none{
|
|
text-decoration: line-through;
|
|
text-decoration: line-through;
|
|
color: #999999;
|
|
color: #999999;
|