146 lines
3.1 KiB
Vue
146 lines
3.1 KiB
Vue
<template>
|
|
<block>
|
|
<div class="uni-inline-item ranking-tab-box">
|
|
<div class="ranking-tab-unit" @tap="selectTab(1000)" :class="{'active':nowRank==1000}">商超
|
|
</div>
|
|
<div class="ranking-tab-unit" @tap="selectTab(2000)" :class="{'active':nowRank==2000}">餐饮
|
|
</div>
|
|
<div class="ranking-tab-unit" @tap="selectTab(3000)" :class="{'active':nowRank==3000}">小吃
|
|
</div>
|
|
</div>
|
|
<div class="ranking-content" v-if="wechatPushSalesList">
|
|
<div class="ranking-list" v-for="(item,index) in wechatPushSalesList[nowRank]" :key="index">
|
|
<div class="rank-index">{{item.RANK_ID||item.Rank_ID}}</div>
|
|
<div class="ranking-list-unit">
|
|
<div>{{item.COMMODITY_NAME || item.Commodity_Name}}</div>
|
|
<div class="ranking-unit-info">
|
|
<text>销售金额 </text>
|
|
<text>¥{{$util.fmoney(item.TOTALPRICE || item.TotalPrice)}}</text>
|
|
<text>销售数量 </text>
|
|
<text>{{item.SELLCOUNT || item.SellCount}}</text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</block>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ['wechatPushSalesList'],
|
|
data: () => {
|
|
return {
|
|
nowRank: 1000
|
|
}
|
|
},
|
|
methods:{
|
|
selectTab(index){
|
|
|
|
this.nowRank=index
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/*排行*/
|
|
.ranking-tab-box {
|
|
margin: 20rpx 32rpx;
|
|
border: 2rpx solid #565656;
|
|
border-radius: 8rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.ranking-tab-box .ranking-tab-unit {
|
|
color: #565656;
|
|
flex: 1;
|
|
height: 64rpx;
|
|
line-height: 60rpx;
|
|
}
|
|
|
|
.ranking-tab-box .ranking-tab-unit.active {
|
|
background-color: #565656;
|
|
color: #fff
|
|
}
|
|
|
|
.ranking-tab-box .ranking-tab-unit+.ranking-tab-unit {
|
|
border-left: 2rpx solid #565656;
|
|
}
|
|
|
|
.ranking-content {
|
|
/* display: none; */
|
|
min-height: 160rpx;
|
|
}
|
|
|
|
.ranking-content .ranking-list {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #000;
|
|
padding: 24rpx 32rpx;
|
|
}
|
|
|
|
.ranking-content .rank-index {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
text-align: center;
|
|
line-height: 72rpx;
|
|
font-size: 30rpx;
|
|
font-weight: bolder;
|
|
margin-right: 32rpx;
|
|
}
|
|
|
|
.ranking-content .ranking-list:nth-child(1) .rank-index {
|
|
background: url('/static/images/revenue/top1.png') no-repeat center;
|
|
background-size: contain;
|
|
font-size: 0;
|
|
}
|
|
|
|
.ranking-content .ranking-list:nth-child(2) .rank-index {
|
|
background: url(/static/images/revenue/top2.png) no-repeat center;
|
|
background-size: contain;
|
|
font-size: 0;
|
|
}
|
|
|
|
.ranking-content .ranking-list:nth-child(3) .rank-index {
|
|
background: url(/static/images/revenue/top3.png) no-repeat center;
|
|
background-size: contain;
|
|
font-size: 0;
|
|
}
|
|
|
|
.ranking-content .ranking-list-unit {
|
|
font-size: 28rpx;
|
|
flex: 1;
|
|
}
|
|
|
|
.ranking-content .ranking-unit-info {
|
|
/* margin-top: 16rpx; */
|
|
display: flex;
|
|
align-items: center;
|
|
/* font-size: .13rem; */
|
|
}
|
|
|
|
.ranking-content .ranking-unit-info text {
|
|
flex: 2;
|
|
color: #929292;
|
|
}
|
|
|
|
.ranking-content .ranking-unit-info text:nth-child(2) {
|
|
flex: 3;
|
|
}
|
|
|
|
.ranking-content .ranking-unit-info text:nth-child(2n) {
|
|
color: #000
|
|
}
|
|
|
|
.ranking-ico {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
}
|
|
</style>
|