459 lines
11 KiB
Vue
459 lines
11 KiB
Vue
<template>
|
|
<view class="main" v-if="!isLoading">
|
|
<!-- 时间筛选卡片 -->
|
|
<view class="filterCard">
|
|
<view class="filterHeader">
|
|
<view class="filterTitle">时间筛选</view>
|
|
</view>
|
|
|
|
<view class="dateSelector">
|
|
<view class="dateRange">
|
|
<picker mode="date" @change="bindDateChange($event, 0)" :value="pageData.searchTime[0]"
|
|
:end="pageData.endDate" start="2018-12-01" class="datePicker">
|
|
<view class="dateInput">
|
|
<text>{{ pageData.searchTime[0] }}</text>
|
|
<text class="uni-icon uni-icon-arrowdown"></text>
|
|
</view>
|
|
</picker>
|
|
|
|
<view class="dateSeparator">至</view>
|
|
|
|
<picker mode="date" @change="bindDateChange($event, 1)" :value="pageData.searchTime[1]"
|
|
:end="pageData.endDate" start="2018-12-01" class="datePicker">
|
|
<view class="dateInput">
|
|
<text>{{ pageData.searchTime[1] }}</text>
|
|
<text class="uni-icon uni-icon-arrowdown"></text>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 服务区信息卡片 -->
|
|
<view class="serviceCard" v-show="pageMsg.Serverpart_Name">
|
|
<view class="serviceHeader">
|
|
<view class="serviceName">{{ pageMsg.Serverpart_Name }}</view>
|
|
<view class="serviceRevenue">¥{{ $util.fmoney(pageMsg.Serverpart_Revenue, 2) }}</view>
|
|
</view>
|
|
|
|
<view class="serviceDetails" v-if="pageMsg.Serverpart_S || pageMsg.Serverpart_N">
|
|
<view class="detailItem" v-if="pageMsg.Serverpart_S">
|
|
<view class="detailLabel">{{ pageMsg.Serverpart_S }}</view>
|
|
<view class="detailValue">¥{{ $util.fmoney(pageMsg.Serverpart_RevenueS, 2) }}</view>
|
|
</view>
|
|
<view class="detailItem" v-if="pageMsg.Serverpart_N">
|
|
<view class="detailLabel">{{ pageMsg.Serverpart_N }}</view>
|
|
<view class="detailValue">¥{{ $util.fmoney(pageMsg.Serverpart_RevenueN, 2) }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 商铺列表 -->
|
|
<view class="shopList" v-if="pageMsg.ShopList && pageMsg.ShopList.length > 0">
|
|
<view class="shopItem" v-for="(item, i) in pageMsg.ShopList" :key="i">
|
|
<view class="shopHeader">
|
|
<view class="shopIcon">
|
|
<image :src="item.BusinessType_Logo || '/static/images/revenue/operating-shop.png'"
|
|
mode="aspectFill" />
|
|
</view>
|
|
|
|
<view class="shopInfo">
|
|
<view class="shopTop">
|
|
<view class="shopName">{{ item.BusinessType_Name }}</view>
|
|
<view class="shopRevenue">+ ¥{{ $util.fmoney(item.BusinessType_Revenue, 2) }}</view>
|
|
</view>
|
|
|
|
<view class="shopBottom">
|
|
<view class="uploadType" :class="{
|
|
'scan': item.Upload_Type == 1,
|
|
'port': item.Upload_Type == 2,
|
|
'auto': item.Upload_Type != 1 && item.Upload_Type != 2
|
|
}">
|
|
<view class="typeIcon"></view>
|
|
<text class="typeText">
|
|
<template v-if="item.Upload_Type == 1">扫码上传</template>
|
|
<template v-else-if="item.Upload_Type == 2">接口传输</template>
|
|
<template v-else>自动上传</template>
|
|
</text>
|
|
</view>
|
|
|
|
<view class="revenueDetails">
|
|
<view class="revenueItem"
|
|
v-if="item.Serverpart_RevenueS || item.Serverpart_RevenueS === 0">
|
|
<text class="revenueLabel">{{ item.Serverpart_S }}:</text>
|
|
<text class="revenueValue">¥{{ $util.fmoney(item.Serverpart_RevenueS, 2) }}</text>
|
|
</view>
|
|
<view class="revenueItem"
|
|
v-if="item.Serverpart_RevenueN || item.Serverpart_RevenueN === 0">
|
|
<text class="revenueLabel">{{ item.Serverpart_N }}:</text>
|
|
<text class="revenueValue">¥{{ $util.fmoney(item.Serverpart_RevenueN, 2) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 无数据状态 -->
|
|
<view v-if="isLoading && !pageOption.Serverpart_Name" class="noDataContainer">
|
|
<noFound nodata="true" :text="noDataText" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '@/util/index.js'
|
|
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 {
|
|
isLoading: true,
|
|
pageData: {
|
|
endDate: nowTime,
|
|
searchTime: [sTime, nowTime],
|
|
msg: {},
|
|
isLoading: true,
|
|
exsideShow: true,
|
|
insideShow: true,
|
|
},
|
|
pageMsg: {},
|
|
pageOption: {},
|
|
noDataText: '抱歉，没有数据，请稍后重试'
|
|
}
|
|
},
|
|
methods: {
|
|
bindDateChange(e, index) {
|
|
let nowDate = this.pageData.searchTime[index]
|
|
if (e.detail.value != nowDate) {
|
|
this.pageData.searchTime[index] = e.detail.value
|
|
this.$forceUpdate()
|
|
this.getDetail({ st: this.pageData.searchTime[0], et: this.pageData.searchTime[1], id: this.pageOption.id, pcode: this.pageOption.pcode })
|
|
}
|
|
},
|
|
toTrend() {
|
|
this.$util.toNextRoute('navigateTo', '/pages/operatingStatements/operatingTrend?name=' + this.pageMsg.Serverpart_Name + '&time=' + this.pageOption.et + '&id=' + this.pageOption.id + '&ProvinceCode=' + this.pageOption.pcode)
|
|
},
|
|
getDetail(obj) {
|
|
let _this = this
|
|
uni.showLoading({
|
|
title: '正在加载...',
|
|
mask: true
|
|
})
|
|
// _this.$request.$webGet('WeChat/GetRevenueReportDetils',{
|
|
request.$webGet('CommercialApi/Revenue/GetRevenueReportDetil', {
|
|
startTime: obj.st,
|
|
endTime: obj.et,
|
|
serverpartId: obj.id,
|
|
provinceCode: obj.pcode,
|
|
BusinessTrade: obj.BusinessTrade || '',
|
|
SearchKeyName: _this.pageOption.searchKey,
|
|
SearchKeyValue: _this.pageOption.searchValue,
|
|
BusinessType: _this.pageOption.BusinessTypeValue > 0 ? _this.pageOption.BusinessTypeValue : '',
|
|
SettlementMode: _this.pageOption.SettlementModeValue > 0 ? _this.pageOption.SettlementModeValue : '',
|
|
}).then(res => {
|
|
if (res.Result_Code == 100) {
|
|
_this.pageMsg = res.Result_Data
|
|
|
|
} else if (res.Result_Code == 200 || res.Result_Code == 999) {
|
|
_this.noDataText = '暂无数据'
|
|
} else {
|
|
_this.noDataText = res.Result_Desc
|
|
}
|
|
uni.hideLoading()
|
|
_this.isLoading = false
|
|
})
|
|
},
|
|
},
|
|
// 拿到传入的数据
|
|
onLoad(op) {
|
|
console.log('op', op)
|
|
this.pageOption = op
|
|
if (this.pageOption.st) {
|
|
this.pageData.searchTime[0] = this.pageOption.st
|
|
}
|
|
if (this.pageOption.et) {
|
|
this.pageData.searchTime[1] = this.pageOption.et
|
|
}
|
|
this.getDetail(op)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// 使用项目全局颜色变量
|
|
$bg: #f8f9fa;
|
|
$muted: #666;
|
|
$card: #fff;
|
|
$shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
|
$primary: #27B25F;
|
|
$primary2: #4CCC7F;
|
|
$success: #2ed573;
|
|
$warning: #ff9f43;
|
|
$danger: #ff4757;
|
|
$info: #3742fa;
|
|
|
|
page {
|
|
background-color: $bg;
|
|
}
|
|
|
|
.main {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
background-color: $bg;
|
|
padding: 32rpx;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// 筛选卡片
|
|
.filterCard {
|
|
background: $card;
|
|
border-radius: 16rpx;
|
|
padding: 24rpx;
|
|
margin-bottom: 32rpx;
|
|
box-shadow: $shadow;
|
|
|
|
.filterHeader {
|
|
margin-bottom: 24rpx;
|
|
|
|
.filterTitle {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
}
|
|
}
|
|
|
|
.dateSelector {
|
|
.dateRange {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.datePicker {
|
|
flex: 1;
|
|
|
|
.dateInput {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 16rpx 24rpx;
|
|
background: #f8f8f8;
|
|
border-radius: 12rpx;
|
|
|
|
text:first-child {
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
}
|
|
|
|
.uni-icon-arrowdown {
|
|
font-size: 20rpx;
|
|
color: $muted;
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dateSeparator {
|
|
margin: 0 24rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: $muted;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 服务区信息卡片
|
|
.serviceCard {
|
|
background: linear-gradient(to left, #93a4ec 0%, #4b76e9 100%);
|
|
border-radius: 16rpx;
|
|
padding: 24rpx;
|
|
margin-bottom: 32rpx;
|
|
box-shadow: $shadow;
|
|
|
|
.serviceHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 24rpx;
|
|
|
|
.serviceName {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
flex: 1;
|
|
}
|
|
|
|
.serviceRevenue {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
font-family: 'DIN Alternate', 'Arial', sans-serif;
|
|
}
|
|
}
|
|
|
|
.serviceDetails {
|
|
display: flex;
|
|
gap: 32rpx;
|
|
|
|
.detailItem {
|
|
flex: 1;
|
|
|
|
.detailLabel {
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.detailValue {
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
font-family: 'DIN Alternate', 'Arial', sans-serif;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 商铺列表
|
|
.shopList {
|
|
.shopItem {
|
|
background: $card;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 24rpx;
|
|
padding: 32rpx;
|
|
box-shadow: $shadow;
|
|
|
|
.shopHeader {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
|
|
.shopIcon {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
margin-right: 24rpx;
|
|
flex-shrink: 0;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 12rpx;
|
|
}
|
|
}
|
|
|
|
.shopInfo {
|
|
flex: 1;
|
|
|
|
.shopTop {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 16rpx;
|
|
|
|
.shopName {
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
flex: 1;
|
|
}
|
|
|
|
.shopRevenue {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: $primary;
|
|
font-family: 'DIN Alternate', 'Arial', sans-serif;
|
|
}
|
|
}
|
|
|
|
.shopBottom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.uploadType {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.typeIcon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-right: 8rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.typeText {
|
|
font-size: 22rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
&.scan {
|
|
.typeIcon {
|
|
background: url(/static/images/revenue/scan-up.png) no-repeat center;
|
|
background-size: contain;
|
|
}
|
|
|
|
.typeText {
|
|
color: #DFBE9F;
|
|
}
|
|
}
|
|
|
|
&.port {
|
|
.typeIcon {
|
|
background: url(/static/images/revenue/port.png) no-repeat center;
|
|
background-size: contain;
|
|
}
|
|
|
|
.typeText {
|
|
color: #95BAF2;
|
|
}
|
|
}
|
|
|
|
&.auto {
|
|
.typeText {
|
|
color: $muted;
|
|
}
|
|
}
|
|
}
|
|
|
|
.revenueDetails {
|
|
display: flex;
|
|
gap: 24rpx;
|
|
|
|
.revenueItem {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.revenueLabel {
|
|
font-size: 22rpx;
|
|
font-weight: 400;
|
|
color: $muted;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.revenueValue {
|
|
font-size: 22rpx;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
font-family: 'DIN Alternate', 'Arial', sans-serif;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 无数据状态
|
|
.noDataContainer {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 400rpx;
|
|
}
|
|
</style>
|