1134 lines
36 KiB
Vue
1134 lines
36 KiB
Vue
<template>
|
||
<view class="page-body">
|
||
<view class="meng" v-if="showNotice" @click="handleShowNotice"></view>
|
||
<!-- 日期筛选 -->
|
||
<div class="ai-center screen-box" style="padding-bottom: 8rpx">
|
||
<!-- <view class="searchBtn" @click="handleSelect">查询筛选</view>-->
|
||
<!-- 搜索框内容 -->
|
||
<div style="display: flex;align-items: center;justify-content: space-between;padding: 10rpx 0">
|
||
<!-- <div class="search_box">-->
|
||
<!-- <img src="/static/images/recons/search_icon.svg" alt="" class="search_icon">-->
|
||
<!-- <input v-model="searchText" confirm-type="search" @confirm="getList" placeholder="请输入关键字" class="select_input" clear/>-->
|
||
<!-- <img src="/static/images/recons/delete.svg" alt="" class="delete" @click="handleDelete">-->
|
||
<!-- </div>-->
|
||
<!-- <div class="select_btn" @click="handleSelect" >-->
|
||
<!-- <img src="/static/images/recons/select_icon.svg" alt="" class="select_icon">-->
|
||
<!-- 筛选-->
|
||
<!-- </div>-->
|
||
</div>
|
||
<!-- 查询时间 -->
|
||
<div style="display: flex;justify-content: space-between">
|
||
<view style="display: flex;">
|
||
<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>
|
||
</view>
|
||
|
||
|
||
<div class="select_btn" @click="handleSelect" >
|
||
<img src="/static/images/recons/select_icon.svg" alt="" class="select_icon">
|
||
筛选
|
||
</div>
|
||
</div>
|
||
<!-- BusinessType【经营模式】 SettlementMode【结算模式】 -->
|
||
<!-- <view class="searchBox">-->
|
||
<!-- <view class="searchItem">-->
|
||
<!-- <span class="searchLabel">经营模式</span>-->
|
||
<!-- <picker mode="selector" :range="BusinessTypeList" :value="BusinessTypeIndex" range-key="label">-->
|
||
<!-- {{BusinessTypeList[BusinessTypeIndex].label}}-->
|
||
<!-- </picker>-->
|
||
<!-- </view>-->
|
||
<!-- <view class="searchItem">-->
|
||
<!-- <span class="searchLabel">结算模式</span>-->
|
||
<!-- <picker mode="selector" :range="SettlementModeList" :value="SettlementModeIndex" range-key="label">-->
|
||
<!-- {{SettlementModeList[SettlementModeIndex].label}}-->
|
||
<!-- </picker>-->
|
||
<!-- </view>-->
|
||
<!-- </view>-->
|
||
</div>
|
||
<template v-if="!pageData.isLoading && pageData.msg && pageData.msg.Total_Revenue">
|
||
<view class="uni-flex ai-center head-card" >
|
||
<!-- @tap="toTrend()"-->
|
||
<view class="topDetail" style="width: 100%">
|
||
<view class="label">实收总额</view>
|
||
<view class="price-num">¥{{$util.fmoney(pageData.msg.Total_Revenue,2)}}</view>
|
||
<view class="detailBox" style="margin-top: 12px">
|
||
<view class="detailItem" >
|
||
<view class="value">{{$util.fmoney(pageData.msg.Different_Price_More,2)}}</view>
|
||
<view class="label">长款金额 <span class="unit">/元</span></view>
|
||
</view>
|
||
<view class="detailItem">
|
||
<view class="value">{{$util.fmoney(pageData.msg.Different_Price_Less,2)}}</view>
|
||
<view class="label">短款金额 <span class="unit">/元</span></view>
|
||
</view>
|
||
<view class="detailItem">
|
||
<view class="value">{{$util.fmoney(pageData.msg.TotalOffAmount,2)}}</view>
|
||
<view class="label">优惠金额 <span class="unit">/元</span></view>
|
||
</view>
|
||
<view class="detailItem">
|
||
<view class="value">{{$util.noDecimal(pageData.msg.TicketCount)}}</view>
|
||
<view class="label">客单数量<span class="unit">/笔</span></view>
|
||
</view>
|
||
<view class="detailItem">
|
||
<view class="value">{{$util.fmoney(pageData.msg.TotalCount,2)}}</view>
|
||
<view class="label">商品出售 <span class="unit">/件</span></view>
|
||
</view>
|
||
<view class="detailItem">
|
||
<view class="value">{{$util.fmoney(pageData.msg.countave,2)}}</view>
|
||
<view class="label">商品均价 <span class="unit">/元</span></view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="modle-title">
|
||
<image src="https://eshangtech.com/ShopICO/ahyd-BID/revenue/yestoday-region.png" mode="aspectFit"></image>
|
||
<text>经营报表</text>
|
||
</view>
|
||
<view class="modleText" v-if="pageData.msg.SearchResult">
|
||
<div v-if="showModal">
|
||
<span v-if="copySearchText && BusinessTypeValue || copySearchText && BusinessTypeValue" class="text" style="color: red;display: block">温馨提示：模糊查询不支持选择经营方法/结算方式</span>
|
||
<span class="text">{{pageData.msg.SearchResult[0]}}</span>
|
||
<view class="text" v-if="BusinessTypeValue!==0">{{`经营模式: ${BusinessTypeList.filter(item=> item.value===BusinessTypeValue)[0].label}`}}</view>
|
||
<view class="text" v-if="SettlementModeValue!==0">{{`结算模式: ${SettlementModeList.filter(item=> item.value===SettlementModeValue)[0].label}`}}</view>
|
||
</div>
|
||
<div v-else>
|
||
<span v-if="copySearchText && BusinessTypeValue || copySearchText && BusinessTypeValue" class="text" style="color: red">温馨提示：模糊查询不支持选择经营方法/结算方式</span>
|
||
<div v-for="(item,index) in pageData.msg.SearchResult" :key="index">
|
||
<span class="text" v-for="(subItem,subIndex) in item" :key="subIndex">
|
||
<span class="text" style="color:red" v-if="item.length>1 && subItem.indexOf('：')===-1">{{copySearchText}}</span>
|
||
{{subItem}}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</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>
|
||
|
||
|
||
<uni-popup ref="popup" type="bottom" style="background: #fff" >
|
||
<div class="popupBox" style="box-sizing:border-box;height: 430px">
|
||
<!-- <div style="display: flex;align-items: center;justify-content: space-between">-->
|
||
<!-- <text class="title">查询配置</text>-->
|
||
<!-- <img src="/static/images/recons/delete.svg" alt="" class="delete" @click="handleClosePopup">-->
|
||
<!-- </div>-->
|
||
<div class="popupContent">
|
||
<div class="search_box">
|
||
<img src="/static/images/recons/search_icon.svg" alt="" class="search_icon">
|
||
<input v-model="searchText" confirm-type="search" @confirm="getList" placeholder="可以查询门店/服务区/品牌/商家等信息" class="select_input" clear/>
|
||
<img src="/static/images/recons/delete.svg" alt="" class="delete" @click="handleDelete">
|
||
</div>
|
||
<view class="popupTitle">日期选择</view>
|
||
<view class="timeList">
|
||
<view :class="selectTime===item.value?'timeItem timeSelectItem':'timeItem'" v-for="(item,index) in timeTypeList" :key="index" @click="handleChangeTime(item.value)">{{item.label}}</view>
|
||
</view>
|
||
<view class="timeList">
|
||
<view :class="selectTimeOther?'timeItem timeSelectItem':'timeItem'" @click="handleTimeOther">自定义</view>
|
||
</view>
|
||
<view class="popupTitle">经营模式</view>
|
||
<view class="timeList">
|
||
<view :class="BusinessTypeValue===item.value?'timeItem timeSelectItem':'timeItem'" v-for="(item,index) in BusinessTypeList" :key="index" @click="handleChangeBusiness(item.value)">{{item.label}}</view>
|
||
</view>
|
||
<view class="popupTitle" style="display: flex;position: relative;align-items: center">
|
||
<span class="title">结算模式</span>
|
||
<view class="notice" @click="handleShowNotice">?
|
||
<view class="noticeBox" v-if="showNotice" :style="{left: '10%',top:'20px'}">
|
||
<span class="noticeText">营收回款：经营模式为商家收款，商家按月/季度/半年/年度模式返款给驿达</span>
|
||
<span class="noticeText">资金返款：经营模式为驿达收款，驿达按月/季度/半年/年度模式打款给商家</span>
|
||
<span class="noticeText">营收分润：经营模式为单个业态使用“移动支付分账”模式，移动支付交易按照七三分成的模式，营收达到保底后按照合同约定的提成比例进行分成</span>
|
||
<span class="noticeText">组合分润：经营模式为多个业态使用“移动支付分账”模式，移动支付交易按照七三分成的模式，营收达到保底后按照合同约定的提成比例进行分成</span>
|
||
<span class="noticeText">阶段提成：经营模式为合作分成，根据营业额的高低，提成比例会进行阶段性的变化</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="timeList">
|
||
<view :class="SettlementModeValue===item.value?'timeItem timeSelectItem':'timeItem'" v-for="(item,index) in SettlementModeList" :key="index" @click="handleChangeSettlement(item.value)">{{item.label}}</view>
|
||
</view>
|
||
</div>
|
||
<div class="btn" @click="handleConfirmCheckChange">确认</div>
|
||
</div>
|
||
</uni-popup>
|
||
<uni-popup ref="timePopup" type="center" style="background: #fff">
|
||
<div class="timePopup">
|
||
<div style="display: flex;margin-left: 10%">
|
||
<picker mode="date" @change="handleChangeTimePopup($event,0)" :value="searchTimePopup[0]" :end="pageData.endDate" start="2018-12-01" class="screen-unit">
|
||
<text style="font-size: 32rpx">{{searchTimePopup[0]}}</text>
|
||
<text class="uni-icon uni-icon-arrowdown"></text>
|
||
</picker>
|
||
<text class="mr20">至</text>
|
||
<picker mode="date" @change="handleChangeTimePopup($event,0)" :value="searchTimePopup[1]" :end="pageData.endDate" start="2018-12-01" class="screen-unit">
|
||
<text style="font-size: 32rpx">{{searchTimePopup[1]}}</text>
|
||
<text class="uni-icon uni-icon-arrowdown"></text>
|
||
</picker>
|
||
</div>
|
||
<div class="btn" @click="handleTimePopup">确认</div>
|
||
</div>
|
||
</uni-popup>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import {mapState} from 'vuex'
|
||
import request from '@/util/index.js'
|
||
import {wrapTreeNode} from "../../util/dateTime";
|
||
import moment from "moment";
|
||
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: [], // 省外
|
||
queryTime:'',// 传入的时间
|
||
lastDay:'',// 首页的实际时间
|
||
searchText:'',// 搜索框内容
|
||
copySearchText:'',// 搜索框内容复制
|
||
requestText:'',// 已经请求过接口的查询框内容
|
||
isScreen:false,// 显示popup里面的内容
|
||
checkBoxValue:['MerchantName','Brand','Shop','Serverpart'],// 查询的字段放接口里的
|
||
checkChange:['MerchantName','Brand','Shop','Serverpart'],// checkBox里面选择了 但是没点确定的
|
||
BusinessTypeList:[],// 经营模式列表
|
||
BusinessTypeValue:0,// 经营模式的选择项
|
||
SettlementModeList:[],// 结算模式列表
|
||
SettlementModeValue:0,// 结算模式的选择项
|
||
timeTypeList:[{label:'近1周',value:1},{label:'近1月',value:2},{label:'近3月',value:3},{label:'近半年',value:4}],
|
||
selectTime:0,
|
||
selectTimeOther:false,
|
||
timePopup:false,
|
||
searchTimePopup: [null,null],
|
||
showNotice:false,
|
||
showModal:false,// 显示模式
|
||
}
|
||
},
|
||
computed:{
|
||
...mapState({'ProvinceCode':(state)=>{return state.userData.ProvinceCode}}),
|
||
},
|
||
methods: {
|
||
// 是否显示结算模式的悬浮框
|
||
handleShowNotice(){
|
||
this.showNotice = !this.showNotice
|
||
},
|
||
// 自定义时间选框里面的选择 改变悬浮框的自定义时间 外面页面上的时间也要跟着改变 强刷
|
||
handleChangeTimePopup(e,index){
|
||
this.searchTimePopup[index] = e.detail.value
|
||
this.$forceUpdate()
|
||
},
|
||
// 自定义时间选框的确定 赋值给页面上的时间
|
||
handleTimePopup(){
|
||
this.pageData.searchTime = this.searchTimePopup
|
||
this.$refs.timePopup.close()
|
||
},
|
||
// 经营模式和结算模式只能二选一 选了一个另一个就取消
|
||
// 选择了结算模式
|
||
handleChangeSettlement(value){
|
||
if (this.BusinessTypeValue!==0){
|
||
this.BusinessTypeValue = 0
|
||
}
|
||
this.SettlementModeValue = value
|
||
},
|
||
// 选择了经营模式
|
||
handleChangeBusiness(value){
|
||
if (this.SettlementModeValue!==0){
|
||
this.SettlementModeValue = 0
|
||
}
|
||
this.BusinessTypeValue = value
|
||
},
|
||
// 给悬浮框的自定义时间赋初始值
|
||
// 选择了自定义时间
|
||
handleTimeOther(){
|
||
this.searchTimePopup = JSON.parse(JSON.stringify(this.pageData.searchTime))
|
||
this.$refs.timePopup.open()
|
||
this.selectTimeOther = true
|
||
this.selectTime = 0
|
||
},
|
||
// 改变选择的时间
|
||
// 选择的时间类型 moment 拿到时间
|
||
handleChangeTime(value){
|
||
this.selectTimeOther = false
|
||
this.selectTime = value
|
||
let endTime
|
||
let startTime
|
||
let searchTime
|
||
if (this.selectTime===1){
|
||
endTime = moment().subtract(1, 'day').format('YYYY-MM-DD')
|
||
startTime = moment().subtract(7, 'day').format('YYYY-MM-DD')
|
||
searchTime = [startTime,endTime]
|
||
}else if(this.selectTime===2){
|
||
endTime = moment().subtract(1, 'day').format('YYYY-MM-DD')
|
||
startTime = moment().subtract(30, 'day').format('YYYY-MM-DD')
|
||
searchTime = [startTime,endTime]
|
||
}else if(this.selectTime===3){
|
||
endTime = moment().subtract(1, 'day').format('YYYY-MM-DD')
|
||
startTime = moment().subtract(90, 'day').format('YYYY-MM-DD')
|
||
searchTime = [startTime,endTime]
|
||
}else if(this.selectTime===4){
|
||
endTime = moment().subtract(1, 'day').format('YYYY-MM-DD')
|
||
startTime = moment().subtract(180, 'day').format('YYYY-MM-DD')
|
||
searchTime = [startTime,endTime]
|
||
}
|
||
this.pageData.searchTime = searchTime
|
||
},
|
||
// 拿到枚举的方法
|
||
async handleEnumeration(text){
|
||
const req ={
|
||
FieldExplainField: text,
|
||
sessionName: text,
|
||
FieldEnumStatus:true
|
||
}
|
||
const data = await request.$webGet('EShangApiMain/FrameWork/GetFieldEnumTree',req)
|
||
// 变成label、value的数据格式
|
||
let list = wrapTreeNode(data.Result_Data.List)
|
||
return list
|
||
},
|
||
handleConfirmCheckChange(){
|
||
// 老的选类型的方法 暂时不让他改 已经写死
|
||
this.checkBoxValue = this.checkChange
|
||
// 关闭悬浮框
|
||
this.$refs.popup.close()
|
||
// 没用的东西
|
||
this.isScreen= false
|
||
// 请求数据的方法
|
||
this.getList()
|
||
},
|
||
// 查询配置的关闭方法 暂时隐藏不用
|
||
handleClosePopup(){
|
||
this.checkChange = this.checkBoxValue
|
||
this.$refs.popup.close()
|
||
this.isScreen= false
|
||
this.BusinessTypeValue = 0
|
||
this.SettlementModeValue = 0
|
||
this.selectTime = 0
|
||
// this.getList()
|
||
},
|
||
// 删除查询字段
|
||
handleDelete(){
|
||
this.searchText = ''
|
||
},
|
||
// 更多筛选的点击打开悬浮框
|
||
handleSelect(){
|
||
this.$refs.popup.open()
|
||
this.isScreen= true
|
||
},
|
||
// 老的一个跳转方法 暂时用不到
|
||
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(){
|
||
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]+
|
||
'&searchKey='+JSON.parse(JSON.stringify(this.checkBoxValue)) + '&searchValue='+this.requestText+
|
||
'&BusinessTypeValue='+this.BusinessTypeValue+'&SettlementModeValue='+this.SettlementModeValue)
|
||
item.visited = true
|
||
this.$forceUpdate()
|
||
},
|
||
// 页面请求的主要方法
|
||
getList(){
|
||
// copySearchText 是要显示在经营报表下方的红色字 每次请求前要清空 不能和searchText同源 不然清空搜索框 显示的文字也会消失
|
||
this.copySearchText= ''
|
||
uni.showLoading({
|
||
title:'正在加载',
|
||
mask:true
|
||
})
|
||
let _this = this
|
||
let searchTime = this.pageData.searchTime
|
||
// 接口要的查询字段类型 之前是可选的 用这样的方法写 暂时可以保留 不影响
|
||
let searchName = ''
|
||
this.checkBoxValue.forEach(item=>{
|
||
if (searchName){
|
||
searchName+=`,${item}`
|
||
}else{
|
||
searchName = item
|
||
}
|
||
})
|
||
let req;
|
||
req = {
|
||
startTime: searchTime[0],
|
||
endTime: searchTime[1],
|
||
SearchKeyName:searchName,
|
||
SearchKeyValue:this.searchText,
|
||
BusinessType:this.searchText?'':this.BusinessTypeValue?this.BusinessTypeValue:'',
|
||
SettlementMode:this.searchText?'':this.SettlementModeValue?this.SettlementModeValue:'',
|
||
}
|
||
// _this.$request.$webGet('WeChat/GetRevenueReport',{
|
||
request.$webGet('CommercialApi/Revenue/GetRevenueReport',req).then(res=>{
|
||
// 拿到数据之后的一些处理方法 看看就明白了
|
||
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
|
||
|
||
uni.hideLoading()
|
||
_this.pageData.isLoading =false
|
||
_this.$forceUpdate()
|
||
})
|
||
}
|
||
},
|
||
async onLoad(query) {
|
||
// 拿时间和拿传入的数据
|
||
this.lastDay = uni.getStorageSync('lastDay')
|
||
if (query.time){
|
||
this.queryTime = query.time
|
||
const date = new Date(this.queryTime)
|
||
let y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
const realDate = new Date(this.lastDay)
|
||
let realMonth = realDate.getMonth() + 1
|
||
if (m<realMonth){
|
||
if (m<10){
|
||
m = '0'+ m
|
||
}
|
||
let day = this.$util.getThisMonthDay(`${y}-${m}`)
|
||
let time = [`${y}-${m}-01`,`${y}-${m}-${day}`]
|
||
this.pageData.searchTime = time
|
||
}else{
|
||
if (m<10){
|
||
m = '0'+ m
|
||
}
|
||
let d = realDate.getDate()
|
||
if (d<10){
|
||
d = '0'+d
|
||
}
|
||
let time = [`${y}-${m}-01`,`${y}-${m}-${d}`]
|
||
this.pageData.searchTime = time
|
||
}
|
||
}
|
||
// 用枚举方法拿到枚举数组
|
||
this.BusinessTypeList = await this.handleEnumeration('BUSINESS_TYPE')
|
||
this.SettlementModeList = await this.handleEnumeration('SETTLEMENT_MODES')
|
||
// 调用接口拿到页面数据的方法
|
||
this.getList()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" >
|
||
.page-body {
|
||
padding-bottom: 80rpx;
|
||
}
|
||
.meng{
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;left: 0;
|
||
z-index: 101;
|
||
}
|
||
.search_box {
|
||
position: relative;
|
||
width: 558rpx;
|
||
height: 72rpx;
|
||
background: #F2F4F5;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
border-radius: 36rpx;
|
||
img {
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
margin: auto 16rpx auto 24rpx;
|
||
}
|
||
.select_input {
|
||
width: 420rpx;
|
||
border: none;
|
||
height: 40rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
.delete{
|
||
width: 20px;
|
||
height: 20px;
|
||
position: absolute;
|
||
right: 0%;
|
||
z-index: 99;
|
||
}
|
||
}
|
||
|
||
.select_btn {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
color: #6C737A;
|
||
img {
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
margin-right:12rpx;
|
||
}
|
||
}
|
||
|
||
.popupBox{
|
||
width: 100%;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
position: relative;
|
||
.popupContent{
|
||
margin-top: 24rpx;
|
||
.search_box {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 72rpx;
|
||
background: #F2F4F5;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
border-radius: 36rpx;
|
||
img {
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
margin: auto 16rpx auto 24rpx;
|
||
}
|
||
.select_input {
|
||
width: 80%;
|
||
border: none;
|
||
height: 40rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
.delete{
|
||
width: 20px;
|
||
height: 20px;
|
||
position: absolute;
|
||
right: 0%;
|
||
z-index: 99;
|
||
}
|
||
}
|
||
.popupTitle{
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: bold;
|
||
line-height: 40rpx;
|
||
margin-top: 24rpx;
|
||
.title{
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: bold;
|
||
line-height: 40rpx;
|
||
}
|
||
.notice{
|
||
margin-left: 8rpx;
|
||
width: 12px;
|
||
height: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 2px solid #A69E9F;
|
||
border-radius: 50%;
|
||
color: #A69E9F;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
.noticeBox{
|
||
max-width: 80%;
|
||
position: absolute;
|
||
top: 15px;
|
||
display: inline-block;
|
||
padding: 5px 10px;
|
||
background: #fff;
|
||
border-radius: 10rpx;
|
||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
|
||
z-index:100;
|
||
transform: translateY(-100%);
|
||
.noticeText{
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.timeList{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-flow: wrap;
|
||
padding: 12rpx 0;
|
||
.timeItem{
|
||
width: 22%;
|
||
margin-right: 3%;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
background: #ffffff;
|
||
border: 1rpx solid #efefef;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
.timeSelectItem{
|
||
background: #e8f3fd;
|
||
border: 1rpx solid #e8f3fd;
|
||
color: #4D95F0;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.title{
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: bold;
|
||
line-height: 40rpx;
|
||
}
|
||
.delete{
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
.checkBox{
|
||
padding: 30rpx 0;
|
||
}
|
||
.btn{
|
||
position: absolute;
|
||
width: calc(100% - 48px);
|
||
//margin-left: 24px;
|
||
padding: 15rpx 0;
|
||
text-align: center;
|
||
border-radius: 16rpx;
|
||
color:#fff;
|
||
background: #0A98D5;
|
||
bottom: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
::v-deep.vue-ref{
|
||
padding-bottom: 0px!important;
|
||
}
|
||
|
||
.timePopup{
|
||
width: 80vw;
|
||
height: 130px;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
.btn{
|
||
width: calc(100% - 48px);
|
||
margin-left: 24px;
|
||
padding: 15rpx 0;
|
||
text-align: center;
|
||
border-radius: 16rpx;
|
||
color:#fff;
|
||
background: #0A98D5;
|
||
margin-top: 30rpx;
|
||
}
|
||
}
|
||
|
||
.screen-box {
|
||
background-color: #fff;
|
||
padding: 0 20rpx;
|
||
position: sticky;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 9;
|
||
}
|
||
.screen-box .searchBtn{
|
||
margin-top: 12rpx;
|
||
box-sizing: border-box;
|
||
padding: 2rpx 10rpx;
|
||
border-radius: 6rpx;
|
||
background: rgba(22, 155, 213, 1);
|
||
color: #fff;
|
||
display: inline-block;
|
||
}
|
||
.screen-box .searchBox{
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.screen-box .searchBox .searchItem{
|
||
display: flex;
|
||
width: 50%;
|
||
align-items: center;
|
||
}
|
||
.searchBox .searchItem .searchLabel{
|
||
margin-right: 16rpx;
|
||
font-size: 16px;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
|
||
|
||
.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: 12rpx 26rpx 40rpx;
|
||
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 .topDetail .detailBox{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-content: flex-start;
|
||
}
|
||
.head-card .topDetail .label{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
opacity: 0.8;
|
||
line-height: 40rpx;
|
||
margin-bottom: 2px;
|
||
}
|
||
.detailBox .detailItem{
|
||
width: 33%;
|
||
margin-bottom: 16px;
|
||
}
|
||
.detailBox .detailItem .value{
|
||
font-size: 16px;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
line-height: 40rpx;
|
||
}
|
||
.detailBox .detailItem .label{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
opacity: 0.8;
|
||
line-height: 40rpx;
|
||
margin-bottom: 2px;
|
||
}
|
||
.detailBox .detailItem .label .unit{
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
line-height: 40rpx;
|
||
margin-left: 2px;
|
||
}
|
||
|
||
|
||
.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;
|
||
}
|
||
.modleText{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 24rpx 18rpx 74rpx;
|
||
.text{
|
||
font-size: 26rpx;
|
||
color: #929292;
|
||
white-space: pre-wrap;
|
||
}
|
||
}
|
||
.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('https://eshangtech.com/ShopICO/ahyd-BID/revenue/you-jt.png')no-repeat center;
|
||
width: 14rpx;
|
||
height: 24rpx;
|
||
background-size: contain;
|
||
display: block;
|
||
position: absolute;
|
||
right: -28rpx;
|
||
top: 8rpx;
|
||
}
|
||
</style>
|