293 lines
10 KiB
Vue
293 lines
10 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div class="yesterday">
|
|
<div class="top">
|
|
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/datePortrait.svg"></image>
|
|
<p class="title">昨日客单量</p>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="item">
|
|
<p class="price">{{ info.TicketCount?info.TicketCount:'-' }}</p>
|
|
<p class="text">入区车辆 <text class="unit">/笔</text></p>
|
|
</div>
|
|
<div class="item">
|
|
<p class="price">{{ info.AvgTicketPrice?info.AvgTicketPrice:'-' }}</p>
|
|
<p class="text">单车价值 <text class="unit">/元</text></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month">
|
|
<div class="top">
|
|
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/change.svg"></image>
|
|
<p class="title">月均客单量</p>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="item">
|
|
<p class="price">{{ info.TicketAvgCount?info.TicketAvgCount:'-' }}</p>
|
|
<p class="text">客单交易 <text class="unit">/笔</text></p>
|
|
</div>
|
|
<div class="item">
|
|
<p class="price">{{ info.MonthAvgTicketPrice?info.MonthAvgTicketPrice:'-' }}</p>
|
|
<p class="text">客单均价 <text class="unit">/元</text></p>
|
|
</div>
|
|
<div class="item">
|
|
<p class="price">{{ info.TicketAvgCount?info.TicketAvgCount:'-' }}</p>
|
|
<p class="text">入区车辆 <text class="unit">/笔</text></p>
|
|
</div>
|
|
<div class="item">
|
|
<p class="price">{{ info.MonthAvgTicketPrice?info.MonthAvgTicketPrice:'-' }}</p>
|
|
<p class="text">单车价值 <text class="unit">/元</text></p>
|
|
</div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="box">
|
|
<div class="pro">
|
|
<div class="big" :style="{width:info.transactionLevel.HighConsumption_Rate +'%'}" @click="handleShow(0)">
|
|
<view class="meng" v-if="genderList[0]">{{'高消费'}}</view>
|
|
</div>
|
|
<div class="normal" :style="{width:info.transactionLevel.NormalConsumption_Rate +'%',left:info.transactionLevel.HighConsumption_Rate+'%'}" @click="handleShow(1)">
|
|
<view class="meng" v-if="genderList[1]">{{'普通消费'}}</view>
|
|
</div>
|
|
<div class="small" @click="handleShow(2)" :style="{width:info.transactionLevel.LowConsumption_Rate +'%',left:(Number(info.transactionLevel.HighConsumption_Rate) + Number(info.transactionLevel.NormalConsumption_Rate))+'%'}">
|
|
<view class="meng" v-if="genderList[2]">{{'低消费'}}</view>
|
|
</div>
|
|
</div>
|
|
<div class="type">
|
|
<text class="item big">高消费 {{info.transactionLevel.HighConsumption_Rate?info.transactionLevel.HighConsumption_Rate:'-'}}%</text>
|
|
<text class="item normal">普通消费 {{info.transactionLevel.NormalConsumption_Rate?info.transactionLevel.NormalConsumption_Rate:'-'}}%</text>
|
|
<text class="item small">低消费 {{info.transactionLevel.LowConsumption_Rate?info.transactionLevel.LowConsumption_Rate:'-' }}%</text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "customerFirst",
|
|
data() {
|
|
return {
|
|
info:{
|
|
transactionLevel:{
|
|
HighConsumption_Rate:0,
|
|
NormalConsumption_Rate:0,
|
|
LowConsumption_Rate:0
|
|
}
|
|
},
|
|
genderList:[false,false,false]
|
|
}
|
|
},
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
},
|
|
watch: {
|
|
data: {
|
|
handler(value) {
|
|
console.log('3333333', value)
|
|
this.info = value
|
|
}
|
|
}
|
|
},
|
|
methods:{
|
|
handleShow(num){
|
|
console.log(1111)
|
|
let list = []
|
|
this.genderList.forEach(()=>{
|
|
list.push(false)
|
|
})
|
|
this.genderList = list
|
|
this.genderList[num] = true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main{
|
|
width: 100%;
|
|
.yesterday,.month{
|
|
margin-top: 12px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background: #F7F7F7;
|
|
border-radius: 4px;
|
|
padding: 12px;
|
|
.top{
|
|
display: flex;
|
|
.icon{
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: 9px;
|
|
}
|
|
.title{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
.bottom{
|
|
margin-top: 12px;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
box-sizing: border-box;
|
|
.item{
|
|
width:50%;
|
|
padding-left: 26px;
|
|
box-sizing: border-box;
|
|
margin-bottom: 12px;
|
|
.price{
|
|
font-size: 16px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #341D00;
|
|
line-height: 20px;
|
|
margin-bottom: 2px;
|
|
}
|
|
.text{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 20px;
|
|
.unit{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.progress{
|
|
width: calc(100% - 8px);
|
|
box-sizing: border-box;
|
|
padding-left: 26px;
|
|
margin-top: 12px;
|
|
.box{
|
|
width: 100%;
|
|
.pro{
|
|
width: 100%;
|
|
height: 16px;
|
|
border-radius: 2px 0 0 2px;
|
|
position: relative;
|
|
.big{
|
|
position: absolute;
|
|
height: 100%;
|
|
background: #1E80FF;
|
|
border-radius: 2px 0 0 2px;
|
|
.meng{
|
|
width: 70px;
|
|
height: 20px;
|
|
box-sizing: border-box;
|
|
line-height: 20px;
|
|
position: absolute;
|
|
display: inline-block;
|
|
padding: 0 5px;
|
|
z-index: 9;
|
|
left: 0;top: -20px;
|
|
background: rgba(0,0,0,0.6);
|
|
color:#fff;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
.normal{
|
|
position: absolute;
|
|
height: 100%;
|
|
background: #ACB9CD;
|
|
border-radius: 2px 0 0 2px;
|
|
.meng{
|
|
width: 70px;
|
|
height: 20px;
|
|
box-sizing: border-box;
|
|
line-height: 20px;
|
|
position: absolute;
|
|
display: inline-block;
|
|
padding: 0 5px;
|
|
z-index: 9;
|
|
right: 0;top: -20px;
|
|
background: rgba(0,0,0,0.6);
|
|
color:#fff;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
.small{
|
|
position: absolute;
|
|
height: 100%;
|
|
background: #CAD0DA;
|
|
border-radius: 2px 0 0 2px;
|
|
.meng{
|
|
width: 70px;
|
|
height: 20px;
|
|
box-sizing: border-box;
|
|
line-height: 20px;
|
|
position: absolute;
|
|
display: inline-block;
|
|
padding: 0 5px;
|
|
z-index: 9;
|
|
right: 0;top: -20px;
|
|
background: rgba(0,0,0,0.6);
|
|
color:#fff;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
}
|
|
.type{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 4px;
|
|
.item{
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 18px;
|
|
position: relative;
|
|
text-align: left;
|
|
padding-left: 8px;
|
|
}
|
|
.item:last-child{
|
|
margin-right: 0px;
|
|
}
|
|
.big:before{
|
|
content:'';
|
|
width: 4px;
|
|
height: 12px;
|
|
background: #1E80FF;
|
|
position: absolute;
|
|
left: 0;top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.normal:before{
|
|
content:'';
|
|
width: 4px;
|
|
height: 12px;
|
|
background: #ACB9CD;
|
|
position: absolute;
|
|
left: 0;top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.small:before{
|
|
content:'';
|
|
width: 4px;
|
|
height: 12px;
|
|
background: #CAD0DA;
|
|
position: absolute;
|
|
left: 0;top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|