<template>
|
<view class="rankpage-wrapper wrapperLayer">
|
<titleBar :titleText='pageName +"-热销榜"' :pageForm='"rank"'></titleBar>
|
|
<view class="goodsList-container colCen">
|
<block v-for="(items,index) in goodsList" :key="index">
|
<view class="goodsItems-container rowCen" @tap="goDetails(items)">
|
<image class="medalpic" v-if="index==0" src="../../static/images/goods/first.png" mode="aspectFill"></image>
|
<image class="medalpic" v-if="index==1" src="../../static/images/goods/second.png" mode="aspectFill"></image>
|
<image class="medalpic" v-if="index==2" src="../../static/images/goods/third.png" mode="aspectFill"></image>
|
<view class="leftpic defIcon">
|
<image :src="items.mainPic" mode="aspectFill"></image>
|
</view>
|
<view class="right-info-container colCen">
|
<view class="goodsnameinfo-content rowSta">
|
<view class="typeIcon-content defIcon">
|
<image :src="items.icon" mode="heightFix"></image>
|
</view>
|
<view class="tradename">
|
{{items.dtitle}}
|
</view>
|
</view>
|
|
<view class="saleNum-container">
|
今日已售<span>{{items.monthSales}}</span>件
|
</view>
|
|
<view class="ori-price rowCen">
|
<view class="tips">
|
原价
|
</view>
|
|
<s class="original-price">
|
￥{{items.originalPrice}}
|
</s>
|
</view>
|
|
<view class="bottomInfo-container rowEndBet">
|
<view class="left-price-box rowEnd">
|
<view class="tips">
|
券后价￥
|
</view>
|
<view class="price">
|
{{items.actualPrice}}
|
</view>
|
</view>
|
<view class="snapUp-btn rowCenCen">
|
<view>速度抢</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</block>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import titleBar from '../../components/backTitlebar.vue';
|
export default {
|
components: {
|
titleBar
|
},
|
data(){
|
return{
|
id:'',
|
pageName:'',
|
goodsList:''
|
}
|
},
|
onLoad(options){
|
this.id = options.id
|
this.pageName = options.name
|
this.getpageInfo()
|
},
|
methods:{
|
getpageInfo(){
|
var that = this;
|
this.$u.api.cateRankList({
|
subdivisionId:this.id
|
}).then(e => {
|
if(e.code != 0) return that.$alert(e.msg)
|
that.goodsList = e.data.list;
|
}).catch(function (err) {
|
})
|
},
|
goDetails(info) {
|
info.searchSource = 1
|
uni.navigateTo({
|
url: './goodsDetail?info=' + encodeURIComponent(JSON.stringify(info))
|
})
|
}
|
},
|
onPullDownRefresh() {
|
this.getpageInfo()
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.goodsList-container {
|
width: 100%;
|
padding: 0 20rpx;
|
margin-top: 20rpx;
|
.goodsItems-container {
|
width: 100%;
|
height: 262rpx;
|
background: #FFFFFF;
|
border-radius: 16rpx;
|
padding: 0 10rpx;
|
margin-bottom: 20rpx;
|
position: relative;
|
.medalpic{
|
position: absolute;
|
z-index: 10;
|
top: 0;
|
left: 0;
|
width: 31rpx;
|
height: 46rpx;
|
}
|
.leftpic {
|
width: 222rpx;
|
height: 222rpx;
|
border-radius: 8rpx;
|
overflow: hidden;
|
}
|
|
.right-info-container {
|
width: 450rpx;
|
margin-left: 20rpx;
|
|
.goodsnameinfo-content {
|
width: 100%;
|
margin-bottom: 15rpx;
|
|
.typeIcon-content {
|
width: 60rpx;
|
height: 24rpx;
|
margin-right: 5rpx;
|
margin-top: 8rpx;
|
}
|
|
.tradename {
|
width: 400rpx;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
|
.saleNum-container {
|
width: 100%;
|
font-size: 28rpx;
|
font-weight: 500;
|
color: #888888;
|
margin-bottom: 20rpx;
|
span{
|
color: #FE3738;
|
}
|
}
|
|
.ori-price{
|
width: 100%;
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #999999;
|
margin-bottom: 20rpx;
|
}
|
|
.bottomInfo-container {
|
width: 100%;
|
|
.left-price-box {
|
.tips{
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #FE3738;
|
line-height: 38rpx;
|
}
|
.price{
|
font-size: 30rpx;
|
font-weight: bold;
|
color: #FE3738;
|
}
|
}
|
|
.snapUp-btn {
|
height: 44rpx;
|
background: linear-gradient(266deg, #FC3E3E, #FEB91C);
|
border-radius: 8rpx;
|
padding: 0 10rpx;
|
border-radius: 8rpx;
|
font-size: 28rpx;
|
font-weight: 500;
|
color: #FFFFFF;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
