402 lines
9.5 KiB
Vue
402 lines
9.5 KiB
Vue
<template>
|
|
<view class="head-container">
|
|
<div class="new-content">
|
|
<div class="header-card">
|
|
<image :src="'/static/images/revenue/340000.png'" mode="aspectFit" class="head-log"></image>
|
|
<view class="head-cost-text uni-flex ai-center">实时营收<div class="date-tag"><span>{{nowDay}} 星期{{getWeekDay()}}</span></div></view>
|
|
<div class=" uni-flex ai-base jc-center top-number">
|
|
<text class="top-number-amount">{{today.timeMoney|| '0.00'}}</text>
|
|
<span class="top-number-unit">(元)</span>
|
|
</div>
|
|
|
|
<p class="header-today-info">
|
|
<span style="margin-right: 12rpx;">客单交易</span>
|
|
<text>{{today.totalTicketCount || 0}}</text>
|
|
<span style="font-size: 22rpx;">(单)</span>
|
|
<span class="ml-135 fs12 " style="margin-right: 12rpx;">客单均价</span>
|
|
<text>{{today.avrticketCount || '0.00'}}</text>
|
|
<span style="font-size: 22rpx;">(元)</span>
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
<view class="revenue-card-cont">
|
|
<div class="top-revenue-card">
|
|
<div class="uni-flex jc-between header-date ai-center">
|
|
<div class="revenue-card-title">对客营收 </div>
|
|
<picker mode="date" @change="bindDateChange" :end="{lastDay}" start="2019-12-01" :value="selectDate">
|
|
<text class="revenue-date">{{headMsg.dayOfShow}} 星期{{getWeekDay(selectDate)}}</text>
|
|
</picker>
|
|
</div>
|
|
<div class="uni-flex ai-base jc-center center-amount">
|
|
<text class="revenue-alltime-amount">
|
|
{{headMsg.totalMoneyShow}}
|
|
</text>
|
|
<span class="amount-unit">(元)</span>
|
|
</div>
|
|
</div>
|
|
<div class="uni-flex jc-between">
|
|
<div class="revenue-tag">
|
|
<span>计划营收</span>
|
|
<div class="amount">{{headMsg.budgetamoutShow}}</div>
|
|
</div>
|
|
<div class="revenue-tag">
|
|
<span>相比计划</span>
|
|
<div :class="headMsg.BUDGETAMOUNT< headMsg.totalMoney ? 'up-text-title':'down-text-title'">
|
|
{{$util.fmoney(headMsg.diffBudgetTotal) }}
|
|
<span style="font-size: 24rpx;margin-left: 12rpx;">{{headMsg.diffBili}}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="view-bottom" @click="toggleCard">
|
|
<text class="uni-icon uni-icon-arrowup" :class="{'up':isup}"></text>
|
|
</div>
|
|
</view>
|
|
<div class="model-content" :class="{'hidden': isup }">
|
|
<!-- 营收数据总览 -->
|
|
<div class="uni-flex justify-around" style="padding-top:18rpx;">
|
|
|
|
<div class="check-unit">
|
|
<text>长款金额</text>
|
|
<div class="check-price-color">{{headMsg.DIFFERENT_PRICE_MORE}} <text>元</text></div>
|
|
</div>
|
|
<div class="check-unit">
|
|
<text>短款金额</text>
|
|
<div class="check-price-color">{{headMsg.DIFFERENT_PRICE_LESS}} <text>元</text></div>
|
|
</div>
|
|
<div class="check-unit">
|
|
<text>客单交易</text>
|
|
<div class="check-price-color">{{headMsg.TICKETCOUNT}} <text>笔</text></div>
|
|
</div>
|
|
<div class="check-unit">
|
|
<text>客单均价</text>
|
|
<div class="check-price-color">{{headMsg.TICKETAVE}} <text>元</text></div>
|
|
</div>
|
|
</div>
|
|
<div class="uni-flex justify-around mode-content" style="padding-bottom: 24rpx;">
|
|
<div class="check-unit">
|
|
<text>优惠金额</text>
|
|
<div class="check-price-color">{{headMsg.TOTALOFFAMOUNT}} <text>元</text></div>
|
|
</div>
|
|
<div class="check-unit">
|
|
<text>移动支付</text>
|
|
<div class="check-price-color">{{headMsg.MOBILEPAYMENT}} <text>元</text></div>
|
|
</div>
|
|
<div class="check-unit">
|
|
<text>商品出售</text>
|
|
<div class="check-price-color">{{headMsg.COMMODITY_COUNT}} <text>件</text></div>
|
|
</div>
|
|
<div class="check-unit">
|
|
<text>商品均价</text>
|
|
<div class="check-price-color">{{headMsg.COMMODITYAVE}} <text>元</text></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ['headMsg', 'today', 'lastDay','nowDay', 'isup','selectDate'],
|
|
|
|
methods: {
|
|
bindDateChange(e) {
|
|
this.$emit('bindDateChange', e)
|
|
},
|
|
toggleCard() {
|
|
this.$emit('toggle', this.isup)
|
|
},
|
|
getWeekDay(dayDate){
|
|
|
|
let show_day = ['日','一','二','三','四','五','六']
|
|
let date = dayDate ? new Date(dayDate): new Date();
|
|
let day = date.getDay()
|
|
return show_day[day]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.head-container {
|
|
background: url('/static/images/revenue/340000bg.png') no-repeat top;
|
|
background-size: contain;
|
|
}
|
|
|
|
.new-content {
|
|
color: #fff;
|
|
box-sizing: border-box;
|
|
padding-top: 40rpx;
|
|
}
|
|
|
|
.new-content .text-title {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.new-content .header-card {
|
|
padding: 0 30rpx;
|
|
color: #BED4F4;
|
|
position: relative;
|
|
}
|
|
.head-cost-text {
|
|
color: #BED4F4;
|
|
font-size: 30rpx;
|
|
}
|
|
.head-cost-text .date-tag {
|
|
display: flex;
|
|
border-radius: 20rpx;
|
|
padding: 0 16rpx;
|
|
background: #6179BF;
|
|
color: #C6D1ED;
|
|
font-size: 22rpx;
|
|
margin-left: 16rpx;
|
|
align-items: center;
|
|
|
|
}
|
|
.date-tag::before {
|
|
content: '';
|
|
background: url(/static/images/revenue/date-ico.png) no-repeat center;
|
|
width: 21rpx;
|
|
height: 32rpx;
|
|
background-size: contain;
|
|
display: block;
|
|
margin-right: 8rpx;
|
|
|
|
}
|
|
.head-log {
|
|
position: absolute;
|
|
right: 19rpx;
|
|
top: -4rpx;
|
|
width: 125rpx;
|
|
height: 91rpx;
|
|
}
|
|
|
|
.new-content .top-number {
|
|
padding-top: 16rpx;
|
|
padding-bottom: 16rpx;
|
|
padding-left: 4rpx;
|
|
letter-spacing: 2rpx;
|
|
line-height: 1.1;
|
|
transition: all 1s;
|
|
}
|
|
.new-content .top-number-unit {
|
|
font-size: 24rpx;
|
|
background-image: -webkit-linear-gradient(top, #ffffff 40%, #b3c1e7 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.new-content .top-number-amount {
|
|
background-image: -webkit-linear-gradient(top, #ffffff 40%, #b3c1e7 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
font-size: 76rpx;
|
|
font-family: 'Bahnschrift Regular';
|
|
}
|
|
|
|
.new-content p.header-today-info {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.new-content .header-today-info text {
|
|
font-family: 'Bahnschrift Regular';
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.ml-135 {
|
|
margin-left: 135rpx;
|
|
}
|
|
|
|
.heade-text {
|
|
text-align: right;
|
|
line-height: 1;
|
|
letter-spacing: 0;
|
|
color: #BED4F4;
|
|
font-family: 'Bahnschrift Regular';
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-date {
|
|
padding: 25rpx 0 16rpx 24rpx;
|
|
/* background: linear-gradient( to left,#ffffff 0%, #e3e8fd 100%); */
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.header-date picker {
|
|
color: #fff;
|
|
padding: 2rpx 46rpx 0rpx 20rpx;
|
|
position: relative;
|
|
/* width: 180rpx; */
|
|
border-radius: 24rpx 0px 0px 25rpx ;
|
|
background: #8994b8;
|
|
font-size: 26rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.header-date picker .revenue-date:before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 0rpx;
|
|
height: 0rpx;
|
|
border: 0rpx;
|
|
border-left: 12rpx solid transparent;
|
|
border-right: 12rpx solid transparent;
|
|
border-top: 12rpx solid #fff;
|
|
right: 16rpx;
|
|
top: 20rpx;
|
|
display: block;
|
|
border-radius: 6rpx;
|
|
}
|
|
|
|
.revenue-card-cont {
|
|
|
|
border-radius: 12rpx;
|
|
margin: 38rpx 20rpx 0 20rpx;
|
|
overflow: hidden;
|
|
box-shadow: 1rpx 2rpx 8rpx 0px rgba(224, 224, 224, 0.40);
|
|
background: linear-gradient(to top, #ffffff 0%, #ffffff 51%, #E5E9FC 100%);
|
|
|
|
}
|
|
|
|
.top-revenue-card {
|
|
|
|
/* background: url(/static/images/revenue/card-title.png) no-repeat left top;
|
|
background-size: 187rpx; */
|
|
}
|
|
|
|
.revenue-card-title {
|
|
font-weight: 500;
|
|
text-align: left;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.center-amount,.revenue-alltime-amount {
|
|
background-image: -webkit-linear-gradient(bottom, #e4a061 0%, #e3b890 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
justify-content: center;
|
|
}
|
|
.amount-unit {
|
|
background-image: -webkit-linear-gradient(bottom, #e4a061 0%, #e3b890 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
font-size: 26rpx;
|
|
}
|
|
.revenue-alltime-amount {
|
|
font-size: 86rpx;
|
|
font-family: 'Bahnschrift Regular';
|
|
font-weight: 400;
|
|
text-align: center;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.revenue-tag {
|
|
color: #7E7E7E;
|
|
margin-top: 20rpx;
|
|
text-align: center;
|
|
flex: 1;
|
|
font-size: 24rpx;
|
|
position: relative;
|
|
}
|
|
.revenue-tag +.revenue-tag::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 2rpx;
|
|
height: 66rpx;
|
|
background: #ededed;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 8rpx;
|
|
}
|
|
.revenue-tag .amount {
|
|
color: #252525;
|
|
}
|
|
|
|
.up-text-title {
|
|
color: #6EB92B;
|
|
}
|
|
.up-text-title::before {
|
|
content: "+";
|
|
}
|
|
.up-text-title:after {
|
|
content: "";
|
|
margin-left: 4rpx;
|
|
width: 16rpx;
|
|
height: 18rpx;
|
|
display: inline-block;
|
|
background: url('/static/images/revenue/up-arrow.png') no-repeat center;
|
|
background-size: contain;
|
|
|
|
}
|
|
|
|
.down-text-title {
|
|
color: #EE3E3E;
|
|
}
|
|
.down-text-title::before {
|
|
content: '-';
|
|
}
|
|
.down-text-title:after {
|
|
content: "";
|
|
margin-left: 4rpx;
|
|
width: 16rpx;
|
|
height: 18rpx;
|
|
display: inline-block;
|
|
background: url('/static/images/revenue/down-arrow.png') no-repeat center;
|
|
background-size: contain;
|
|
|
|
}
|
|
|
|
.check-unit {
|
|
font-size: 24rpx;
|
|
|
|
flex: 1;
|
|
text-align: center;
|
|
padding-top: 16rpx;
|
|
}
|
|
|
|
.check-price-color {
|
|
font-size: 32rpx;
|
|
color: #868686;
|
|
line-height: 1.2;
|
|
font-family: 'Bahnschrift Regular';
|
|
}
|
|
|
|
.check-price-color text {
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.view-bottom {
|
|
transition: 0.2s all;
|
|
text-align: center;
|
|
height: 70rpx;
|
|
width: 700rpx;
|
|
margin: 0 auto;
|
|
background-color: #fff;
|
|
line-height: 70rpx;
|
|
}
|
|
|
|
.uni-icon-arrowup {
|
|
color: #5EA9E9;
|
|
font-size: 28rpx;
|
|
transition: all .25s;
|
|
}
|
|
.up {
|
|
transform: rotate(-180deg);
|
|
}
|
|
.model-content {
|
|
max-height: 236rpx;
|
|
transition: max-height .25s;
|
|
background-color: #f9f9f9;
|
|
box-sizing: border-box;
|
|
margin: 0 20rpx 8px 20rpx;
|
|
border-radius: 0 0 12rpx 12rpx;
|
|
}
|
|
|
|
.hidden {
|
|
/* padding-top: 0rpx; */
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height .25s;
|
|
}
|
|
</style>
|