623 lines
15 KiB
Vue
623 lines
15 KiB
Vue
<template>
|
|
<view class="page-body">
|
|
<!-- 日期筛选 -->
|
|
<div class="uni-flex ai-center screen-box">
|
|
<picker mode="date" @change="bindDateChange($event, 0)" :value="pageData.searchTime[0]"
|
|
:end="pageData.endDate" start="2018-12-01" class="screen-unit">
|
|
<text>{{ pageData.searchTime[0] }}</text>
|
|
<text class="uni-icon uni-icon-arrowdown"></text>
|
|
</picker>
|
|
<text class="mr20">至</text>
|
|
<picker mode="date" @change="bindDateChange($event, 1)" :value="pageData.searchTime[1]"
|
|
:end="pageData.endDate" start="2018-12-01" class="screen-unit">
|
|
<text>{{ pageData.searchTime[1] }}</text>
|
|
<text class="uni-icon uni-icon-arrowdown"></text>
|
|
</picker>
|
|
</div>
|
|
<template v-if="!pageData.isLoading && pageData.msg && pageData.msg.Total_Revenue">
|
|
<view class="uni-flex ai-center head-card">
|
|
<view class="" @tap="toTrend()">
|
|
<view>实收总额</view>
|
|
<view class="price-num">¥{{ $util.fmoney(pageData.msg.Total_Revenue, 2) }}</view>
|
|
</view>
|
|
<view class="" v-if="pageData.msg && pageData.msg.Province_ExternalAmount">
|
|
<div class="all-diff" @tap="regionType = !regionType">
|
|
<image src="../../static/images/revenue/next.png"></image>
|
|
切换
|
|
</div>
|
|
<view>{{ !regionType ? "省内" : "省外" }}实收</view>
|
|
<view class="price-num">¥{{ !regionType ? $util.fmoney(pageData.msg.Province_InsideAmount, 2) :
|
|
$util.fmoney(pageData.msg.Province_ExternalAmount, 2) }}</view>
|
|
</view>
|
|
<view class="" v-else>
|
|
<div class="all-diff" @tap="regionType = !regionType">
|
|
<image src="../../static/images/revenue/next.png"></image>
|
|
切换方向
|
|
</div>
|
|
<view>{{ !regionType ? "东 (南)" : "西 (北)" }}区实收</view>
|
|
<view class="price-num">¥{{ !regionType ? $util.fmoney(pageData.msg.Revenue_AmountS, 2) :
|
|
$util.fmoney(pageData.msg.Revenue_AmountN, 2) }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="modle-title">
|
|
<image src="/static/images/revenue/yestoday-region.png" mode="aspectFit"></image>
|
|
<text>经营报表</text>
|
|
</view>
|
|
<view class="bg-white" v-if="ServerpartList.length > 0">
|
|
<view class="region-area-title uni-flex ai-center jc-between"
|
|
v-show="pageData.msg.Province_ExternalAmount" :class="{ 'active': pageData.insideShow }"
|
|
@tap="pageData.insideShow = !pageData.insideShow">
|
|
<text>省内区域</text>
|
|
|
|
</view>
|
|
<view v-show="pageData.insideShow">
|
|
<view v-for="(item, i) in ServerpartList" :key="i">
|
|
<div class=" region-cell" @tap="toggleRegion(item)">
|
|
<div class="region-cell-unit region-title cuIcon-triangledownfill">
|
|
<text class="">{{ item.Region_Name }}</text>
|
|
<div class="ct01">
|
|
<text class="strong-text">¥{{ $util.fmoney(item.Total_Revenue, 2) }}</text>
|
|
</div>
|
|
</div>
|
|
<div class="region-cell-unit">
|
|
<text>营收占比</text>
|
|
<div class="ct01">
|
|
<text class="strong-text">{{ item.Revenue_Proportion }}</text>
|
|
</div>
|
|
</div>
|
|
<div class="region-cell-unit">
|
|
<text class="uni-icon uni-icon-arrowright" :class="{ 'active': item.show }"></text>
|
|
</div>
|
|
</div>
|
|
<ul class="region-cell-area" v-show="item.show">
|
|
<li v-for="(child, index) in item.revenueServerModels" :class="{ 'visited': child.visited }"
|
|
:key="index" @tap="toDetail(child)">
|
|
<view>{{ child.Serverpart_Name }}</view>
|
|
<view class="uni-flex ai-center data-number">
|
|
<text class="">{{ child.Revenue_Proportion }}</text>
|
|
<text style="flex: 2;">¥{{ $util.fmoney(child.Total_Revenue, 2) }}</text>
|
|
|
|
</view>
|
|
</li>
|
|
</ul>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<template v-if="insideRegionList.length > 0">
|
|
<view class="region-area-title uni-flex ai-center jc-between"
|
|
:class="{ 'active': pageData.exsideShow }" @tap="pageData.exsideShow = !pageData.exsideShow">
|
|
<text>省外区域</text>
|
|
</view>
|
|
<view v-show="pageData.exsideShow">
|
|
<view v-for="(item, i) in insideRegionList" :key="i">
|
|
<div class=" region-cell" @tap="toggleRegion(item)">
|
|
<div class="region-cell-unit region-title cuIcon-triangledownfill"
|
|
:class="{ 'active': item.show }">
|
|
<text class="">{{ item.Region_Name }}</text>
|
|
<div class="ct01">
|
|
<text class="strong-text">¥{{ $util.fmoney(item.Total_Revenue, 2) }}</text>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="region-cell-unit">
|
|
<text>营收占比</text>
|
|
<div class="ct01">
|
|
<text class="strong-text">{{ item.Revenue_Proportion }}</text>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="region-cell-unit"><text class="uni-icon uni-icon-arrowright"
|
|
:class="{ 'active': item.show }"></text></div>
|
|
</div>
|
|
<ul class="region-cell-area" v-show="item.show">
|
|
<li v-for="(child, index) in item.revenueServerModels"
|
|
:class="{ 'visited': child.visited }" :key="index" @tap="toDetail(child)">
|
|
<view>{{ child.Serverpart_Name }}</view>
|
|
<view class="uni-flex ai-center data-number">
|
|
<text class="">{{ child.Revenue_Proportion }}</text>
|
|
<text style="flex: 2;">¥{{ $util.fmoney(child.Total_Revenue, 2) }}</text>
|
|
|
|
</view>
|
|
</li>
|
|
</ul>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
</view>
|
|
</template>
|
|
<view class="" v-else-if="!pageData.isLoading && !pageData.msg">
|
|
<noFound nodata=" true" :text="noDataText" />
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
export default {
|
|
|
|
data() {
|
|
let now = new Date()
|
|
|
|
let nowTime = this.$util.cutDate(now, 'YYYY-MM-DD', -1)
|
|
let sTime = this.$util.cutDate(now, 'YYYY-MM-DD', -1)
|
|
return {
|
|
pageData: {
|
|
endDate: nowTime,
|
|
searchTime: [sTime, nowTime],
|
|
msg: {},
|
|
isLoading: true,
|
|
exsideShow: true,
|
|
insideShow: true,
|
|
},
|
|
noDataText: '抱歉，没有数据，请稍后重试',
|
|
regionType: 0, // 0 东南 1 西北
|
|
ServerpartList: [],
|
|
insideRegionList: [] // 省外
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState({ 'ProvinceCode': (state) => { return state.userData.ProvinceCode } }),
|
|
},
|
|
methods: {
|
|
toTrend() {
|
|
this.$util.toNextRoute('navigateTo', '/pages/operatingStatements/operatingTrend?time=' + this.pageData.searchTime[1])
|
|
|
|
},
|
|
bindDateChange(e, index) {
|
|
let nowDate = this.pageData.searchTime[index]
|
|
if (e.detail.value != nowDate) {
|
|
this.pageData.searchTime[index] = e.detail.value
|
|
this.$forceUpdate()
|
|
this.searchList()
|
|
}
|
|
},
|
|
searchList() {
|
|
uni.showLoading({
|
|
title: '正在加载',
|
|
mask: true
|
|
})
|
|
|
|
this.getList()
|
|
},
|
|
toggleRegion(item) {
|
|
item.show = !item.show ? true : false
|
|
this.$forceUpdate()
|
|
},
|
|
toDetail(item) {
|
|
this.$util.toNextRoute('navigateTo', '/pages/operatingStatements/detail?pcode=' + item.Province_Code + '&id=' + item.Serverpart_Id + '&st=' + this.pageData.searchTime[0] + '&et=' + this.pageData.searchTime[1])
|
|
item.visited = true
|
|
this.$forceUpdate()
|
|
},
|
|
getList() {
|
|
let _this = this
|
|
let searchTime = this.pageData.searchTime
|
|
|
|
const req = {
|
|
provinceCode: this.ProvinceCode,
|
|
startTime: searchTime[0],
|
|
endTime: searchTime[1],
|
|
}
|
|
console.log('reqdad', req);
|
|
uni.showLoading({
|
|
title: '正在加载',
|
|
mask: true
|
|
})
|
|
_this.$request.$webGet('CommercialApi/Revenue/GetRevenueReport', req).then((res) => {
|
|
console.log('resresresres', res);
|
|
uni.hideLoading()
|
|
if (res.Result_Code == 100) {
|
|
_this.pageData.msg = res.Result_Data
|
|
_this.pageData.msg.countave = (Number(_this.pageData.msg.Province_InsideAmount) / Number(_this.pageData.msg.TotalCount)).toFixed(2)
|
|
res.Result_Data.revenueRegionModels.map(n => {
|
|
n.show = false
|
|
})
|
|
if (res.Result_Data.revenueInsideRegionModels) {
|
|
res.Result_Data.revenueInsideRegionModels.map(n => {
|
|
n.show = false
|
|
})
|
|
_this.insideRegionList = res.Result_Data.revenueInsideRegionModels
|
|
}
|
|
|
|
// _this.pageData.msg.SearchResult
|
|
// 判断一下 如果是有搜索框的值 就按照搜索框有的值显示
|
|
// 没有就出现结算模式 或者经营模式
|
|
if (this.searchText) {
|
|
this.showModal = false
|
|
if (res.Result_Data.SearchResult) {
|
|
let newList = []
|
|
res.Result_Data.SearchResult.forEach(item => {
|
|
newList.push(item.split(this.searchText))
|
|
_this.pageData.msg.SearchResult = newList
|
|
_this.copySearchText = JSON.parse(JSON.stringify(this.searchText))
|
|
})
|
|
}
|
|
} else {
|
|
if (this.BusinessTypeValue || this.SettlementModeValue) {
|
|
this.showModal = true
|
|
}
|
|
}
|
|
_this.ServerpartList = res.Result_Data.revenueRegionModels
|
|
} else if (res.Result_Code == 200 || res.Result_Code == 999) {
|
|
_this.noDataText = '暂无数据'
|
|
_this.insideRegionList = []
|
|
_this.pageData.msg = null
|
|
} else {
|
|
_this.pageData.msg = null
|
|
_this.noDataText = res.Result_Desc
|
|
_this.insideRegionList = []
|
|
}
|
|
_this.requestText = _this.searchText
|
|
|
|
_this.pageData.isLoading = false
|
|
_this.$forceUpdate()
|
|
})
|
|
|
|
// _this.$request.$webGet('WeChat/GetRevenueReport', {
|
|
// startTime: searchTime[0],
|
|
// endTime: searchTime[1],
|
|
// additionalCode: this.ProvinceCode == '330000' ? '451200,630000' : ''
|
|
// }).then(res => {
|
|
|
|
// if (res.Result_Code == 100) {
|
|
// _this.pageData.msg = res.Result_Data
|
|
// res.Result_Data.revenueRegionModels.map(n => {
|
|
// n.show = false
|
|
// })
|
|
// if (res.Result_Data.revenueInsideRegionModels) {
|
|
// res.Result_Data.revenueInsideRegionModels.map(n => {
|
|
// n.show = false
|
|
// })
|
|
// _this.insideRegionList = res.Result_Data.revenueInsideRegionModels
|
|
// }
|
|
|
|
// _this.ServerpartList = res.Result_Data.revenueRegionModels
|
|
// } else {
|
|
// _this.pageData.msg = null
|
|
// _this.noDataText = res.Result_Desc
|
|
// }
|
|
// uni.hideLoading()
|
|
// _this.pageData.isLoading = false
|
|
// _this.$forceUpdate()
|
|
// })
|
|
}
|
|
},
|
|
onLoad() {
|
|
uni.showLoading({
|
|
title: '正在加载...',
|
|
mask: true
|
|
})
|
|
|
|
this.getList()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.page-body {
|
|
padding-bottom: 80rpx;
|
|
}
|
|
|
|
.screen-box {
|
|
background-color: #fff;
|
|
padding: 0 20rpx;
|
|
position: sticky;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 9;
|
|
}
|
|
|
|
.screen-box .screen-unit {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 200rpx;
|
|
padding: 0 14rpx;
|
|
line-height: 3;
|
|
}
|
|
|
|
.screen-box .mr20 {
|
|
margin-right: 20rpx;
|
|
color: #95999C;
|
|
}
|
|
|
|
.uni-icon-arrowdown {
|
|
font-size: 22rpx;
|
|
color: #C7C7C7;
|
|
margin-left: 8rpx;
|
|
}
|
|
|
|
.screen-box text {
|
|
line-height: 3;
|
|
}
|
|
|
|
.screen-box image {
|
|
width: 12rpx;
|
|
height: 8rpx;
|
|
margin: 0 16rpx;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.head-card {
|
|
padding: 40rpx 26rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.head-card>view {
|
|
width: 330rpx;
|
|
height: 190rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
padding-top: 30rpx;
|
|
font-size: 28rpx;
|
|
border-radius: 24rpx;
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
.head-card>view:first-child {
|
|
|
|
background: linear-gradient(to left, #93a4ec 0%, #4b76e9 100%);
|
|
}
|
|
|
|
.head-card>view:last-child {
|
|
margin-left: 30rpx;
|
|
background: linear-gradient(to left, #8cdade 0%, #82c2ce 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.head-card .price-num {
|
|
font-family: 'Bahnschrift Regular';
|
|
font-size: 50rpx;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.all-diff {
|
|
background: linear-gradient(#f28785, #ee5b4c);
|
|
height: 36rpx;
|
|
line-height: 36rpx;
|
|
width: 126rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
font-size: 20rpx;
|
|
border-radius: 0 0 0 54rpx;
|
|
|
|
}
|
|
|
|
.all-diff image {
|
|
width: 20rpx;
|
|
height: 17rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.modle-title {
|
|
padding-left: 24rpx;
|
|
font-size: 30rpx;
|
|
padding-top: 32rpx;
|
|
padding-bottom: 20rpx;
|
|
font-weight: bolder;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.modle-title image {
|
|
max-width: 36rpx;
|
|
max-height: 36rpx;
|
|
margin-right: 14rpx;
|
|
}
|
|
|
|
.bg-white {
|
|
background-color: #fff;
|
|
margin: 0 24rpx;
|
|
border-radius: 12rpx;
|
|
padding-bottom: 26rpx;
|
|
}
|
|
|
|
.region-area-title {
|
|
color: #000;
|
|
font-weight: bolder;
|
|
padding: 26rpx 46rpx 0 56rpx;
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
|
|
/*日结上传*/
|
|
.region-title {
|
|
position: relative;
|
|
color: #929292;
|
|
/* font-weight: bolder; */
|
|
|
|
}
|
|
|
|
.region-title,
|
|
.ct01 {
|
|
color: #000000;
|
|
}
|
|
|
|
.ct01 {
|
|
padding-top: 8rpx;
|
|
}
|
|
|
|
.region-area-title:before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 0rpx;
|
|
height: 0rpx;
|
|
border: 0rpx;
|
|
border-left: 8rpx solid transparent;
|
|
border-right: 8rpx solid transparent;
|
|
border-top: 8rpx solid #BBB7B7;
|
|
left: 22rpx;
|
|
top: 48rpx;
|
|
transform: rotate(-90deg);
|
|
transition: all 0.4s;
|
|
display: block;
|
|
}
|
|
|
|
.active.region-area-title:before {
|
|
|
|
border-left: 8rpx solid transparent;
|
|
border-right: 8rpx solid transparent;
|
|
border-top: 8rpx solid #E0BB97;
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
.region-cell {
|
|
display: flex;
|
|
padding: 26rpx 46rpx 16rpx 56rpx;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.region-cell .active.uni-icon-arrowright::before {
|
|
transform: rotate(90deg);
|
|
|
|
|
|
}
|
|
|
|
.region-cell .uni-icon-arrowdown,
|
|
.region-cell .uni-icon-arrowright {
|
|
font-size: 36rpx;
|
|
color: #5A5A5A;
|
|
/* padding-bottom: 12rpx; */
|
|
position: relative;
|
|
}
|
|
|
|
.region-cell .uni-icon-arrowright::before {
|
|
position: absolute;
|
|
right: -26rpx;
|
|
top: -46rpx;
|
|
transition: all 0.4s;
|
|
}
|
|
|
|
.region-cell .region-cell-unit {
|
|
flex: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #929292;
|
|
font-size: 26rpx;
|
|
line-height: 1.5;
|
|
text-align: right;
|
|
}
|
|
|
|
.region-cell .region-cell-unit:nth-child(1) {
|
|
flex: 3;
|
|
text-align: left;
|
|
}
|
|
|
|
.region-cell .region-cell-unit:nth-child(3) {
|
|
|
|
flex: 2.5;
|
|
|
|
}
|
|
|
|
.region-cell-image {
|
|
width: 48rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
height: 50rpx;
|
|
|
|
}
|
|
|
|
.region-cell image {
|
|
width: 14rpx;
|
|
height: 23rpx;
|
|
}
|
|
|
|
/*日结上传服务区*/
|
|
.region-cell-area {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.region-cell-area li:nth-child(2n+1) {
|
|
background-color: #FCFCFC;
|
|
}
|
|
|
|
.region-cell-area li view:first-child {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.region-cell-area li.visited view:first-child {
|
|
color: #007AFF;
|
|
|
|
}
|
|
|
|
.region-cell-area li:nth-child(2n+1) {
|
|
background-color: #F9F9FB;
|
|
}
|
|
|
|
.region-cell-area li:nth-child(2n) view:first-child:before {
|
|
content: '';
|
|
background-color: #5596F9;
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
border-radius: 8rpx;
|
|
display: block;
|
|
margin-right: 16rpx;
|
|
/* position: absolute;
|
|
left: 0rpx; */
|
|
|
|
}
|
|
|
|
.region-cell-area li:nth-child(2n+1) view:first-child:before {
|
|
content: '';
|
|
background-color: #FE6D67;
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
border-radius: 8rpx;
|
|
display: block;
|
|
margin-right: 16rpx;
|
|
/* position: absolute;
|
|
left: 0rpx; */
|
|
}
|
|
|
|
.region-cell-area li {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16rpx 46rpx 16rpx 56rpx;
|
|
position: relative;
|
|
text-align: left;
|
|
color: #2E2E2E;
|
|
}
|
|
|
|
.region-cell-area li>view {
|
|
flex: 2;
|
|
font-size: 22rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.region-cell-area li>view text {
|
|
font-size: 22rpx;
|
|
flex: 1;
|
|
text-align: right;
|
|
}
|
|
|
|
.region-cell-area li>view text:last-child {
|
|
/* text-align: right; */
|
|
font-weight: bolder;
|
|
padding-right: 8rpx;
|
|
flex: 2;
|
|
}
|
|
|
|
.region-cell-area li>view:last-child:after {
|
|
content: '';
|
|
background: url(/static/images/revenue/you-jt.png) no-repeat center;
|
|
width: 14rpx;
|
|
height: 24rpx;
|
|
background-size: contain;
|
|
display: block;
|
|
position: absolute;
|
|
right: -28rpx;
|
|
top: 8rpx;
|
|
}
|
|
</style>
|