147 lines
3.2 KiB
Vue
147 lines
3.2 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 style="font-size: 24rpx;">{{ item.COMMODITY_NAME || item.Commodity_Name }}</div>
|
|
<div class="ranking-unit-info">
|
|
<text style="font-size: 24rpx;">销售金额 </text>
|
|
<text style="font-size: 28rpx;font-weight: 600;">¥{{ $util.fmoney(item.TOTALPRICE ||
|
|
item.TotalPrice) }}</text>
|
|
<text style="font-size: 24rpx;">销售数量 </text>
|
|
<text style="font-size: 28rpx;font-weight: 600;">{{ 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('https://eshangtech.com/ShopICO/ahyd-BID/revenue/top1.png') no-repeat center;
|
|
background-size: contain;
|
|
font-size: 0;
|
|
}
|
|
|
|
.ranking-content .ranking-list:nth-child(2) .rank-index {
|
|
background: url('https://eshangtech.com/ShopICO/ahyd-BID/revenue/top2.png') no-repeat center;
|
|
background-size: contain;
|
|
font-size: 0;
|
|
}
|
|
|
|
.ranking-content .ranking-list:nth-child(3) .rank-index {
|
|
background: url('https://eshangtech.com/ShopICO/ahyd-BID/revenue/top3.png') no-repeat center;
|
|
background-size: contain;
|
|
font-size: 0;
|
|
}
|
|
|
|
.ranking-content .ranking-list-unit {
|
|
font-size: 24rpx;
|
|
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>
|