You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
441 lines
14 KiB
441 lines
14 KiB
<template>
|
|
<view class="turnover-container">
|
|
<view class="tc-tab" v-if="storeList.length > 1">
|
|
<view :class="[tabID == 0?'active':'']" @click="tabChange(0)">品牌</view>
|
|
<view :class="[tabID == 1?'active':'']" @click="tabChange(1)">门店</view>
|
|
</view>
|
|
<view class="tc-total-section">
|
|
|
|
<view class="tts-address" v-if="tabID == 0&&storeList.length > 1">
|
|
<view>{{pageInfo.name || '-'}}</view>
|
|
<!-- <image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image> -->
|
|
</view>
|
|
<!-- 仅有一家店铺情况下，没有品牌查看权限 -->
|
|
<view class="tts-address" v-else-if="tabID == 1&&storeList.length ==1">
|
|
<view>{{curSelectStore.name || '-'}}</view>
|
|
<!-- <image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image> -->
|
|
</view>
|
|
<picker v-else-if="tabID == 1" :range="storeList" range-key="name" @change="storeChange">
|
|
<view class="tts-address">
|
|
<view>{{curSelectStore.name || '-'}}</view>
|
|
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
|
|
</view>
|
|
</picker>
|
|
|
|
<view class="tts-money">
|
|
<view>{{pageInfo.duration || '-'}}</view>
|
|
<view>总营业额</view>
|
|
<view><text>¥</text>{{pageInfo.total || '0'}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="tc-info-section">
|
|
<view class="tis-tab">
|
|
<view :class="[timeTabID == 0?'active':'']" @click="timeTabChange(0)">日报</view>
|
|
<view :class="[timeTabID == 1?'active':'']" @click="timeTabChange(1)">近7天</view>
|
|
<view :class="[timeTabID == 2?'active':'']" @click="timeTabChange(2)">月报</view>
|
|
<view :class="[timeTabID == 3?'active':'']" @click="timeTabChange(3)">年报</view>
|
|
</view>
|
|
<view class="tis-data">
|
|
<view class="td-date" v-if="timeTabID == 0 || timeTabID == 2 || timeTabID == 3" @click="toTimeSelect(timeTabID)">
|
|
<text>{{dataTime}}</text>
|
|
<view></view>
|
|
<image mode="aspectFit" src="/static/images/icon/calendar.png"></image>
|
|
</view>
|
|
<view class="td-date" v-else>
|
|
<text>{{beforeSevenDay}}</text>
|
|
<!-- <view></view> -->
|
|
<!-- <image mode="aspectFit" src="/static/images/icon/calendar.png"></image> -->
|
|
</view>
|
|
|
|
<view class="td-tip">实际收入</view>
|
|
<view class="td-price"><text>¥</text>{{pageInfo.calc.total || 0}}</view>
|
|
<view class="td-detail">
|
|
<view>
|
|
<view>
|
|
<text>收款笔数 </text>{{pageInfo.calc.in_count || 0}}
|
|
</view>
|
|
<view>
|
|
<text>退款笔数 </text>{{pageInfo.calc.out_count || 0}}
|
|
</view>
|
|
</view>
|
|
|
|
<view>
|
|
<view>
|
|
<text>收款金额 </text> ￥{{pageInfo.calc.in_total || '0.00'}}
|
|
</view>
|
|
<view>
|
|
<text>退款金额 </text> ￥{{pageInfo.calc.out_total || '0.00'}}
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { API } from '../../js/api';
|
|
import { servers } from '../../js/server';
|
|
import util from '../../utils/util';
|
|
import { mapState } from 'vuex';
|
|
export default {
|
|
computed: {
|
|
...mapState([ 'brandInfo' ]),
|
|
dataTime(){
|
|
let { curTime, timeTabID } = this;
|
|
if(timeTabID == 0)return util.formatDate({ date: curTime.date || '', partition: 'zh' });
|
|
if(timeTabID == 2)return util.formatDate({ date: `${curTime.month}-01`, partition: 'zh' }).substr(0,8);
|
|
if(timeTabID == 3)return `${curTime.year}年`;
|
|
},
|
|
// 最近7天
|
|
beforeSevenDay(){
|
|
let _date = new Date();
|
|
let _beforeSeven = _date.getTime() - (7*24*60*60*1000);
|
|
return `${util.formatDate({date: _beforeSeven, partition: 'zh'}).substr(5)}-${util.formatDate({date: _date, partition: 'zh'}).substr(5)}`
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
tabID: 0,
|
|
timeTabID: 0,
|
|
|
|
pageInfo: {
|
|
calc: {}
|
|
},
|
|
|
|
storeList: [], // 店铺列表
|
|
|
|
curSelectStore: {}, // 当前展示数据门店
|
|
|
|
curTime: {
|
|
date: '',
|
|
month: '',
|
|
year: '',
|
|
},
|
|
|
|
}
|
|
},
|
|
async onLoad(){
|
|
try{
|
|
let { timeTabID } = this;
|
|
let _timeObj = this.getTime();
|
|
|
|
this.curTime = _timeObj;
|
|
let _storeList = await this.getStoreList();
|
|
if(_storeList.length == 1)this.tabID = 1;
|
|
|
|
this.$nextTick(this.refreshPageInfo);
|
|
}catch(err){
|
|
console.log(err);
|
|
util.hideLoad();
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
// 时间切换
|
|
toTimeSelect(type){
|
|
let { curTime, tabID, curSelectStore } = this;
|
|
let storeID = '';
|
|
if(tabID == 1)storeID = curSelectStore.id;
|
|
if(type == 0)util.routeTo(`/pages/time_select/date/date?date=${curTime.date || ''}&store_id=${storeID}`,'nT');
|
|
if(type == 2)util.routeTo(`/pages/time_select/month/month?date=${curTime.month || ''}&store_id=${storeID}`,'nT');
|
|
if(type == 3)util.routeTo(`/pages/time_select/year/year?date=${curTime.year || ''}&store_id=${storeID}`,'nT');
|
|
},
|
|
// 刷新页面
|
|
refreshPageInfo(){
|
|
let { tabID, timeTabID, curSelectStore, curTime } = this;
|
|
let _date;
|
|
if(timeTabID == 0)_date = curTime.date || ''
|
|
if(timeTabID == 1)_date = util.formatDate({}).substr(0,10);
|
|
if(timeTabID == 2)_date = `${curTime.month}-01` || '' // 统一格式
|
|
if(timeTabID == 3)_date = `${curTime.year}-01-01` || ''// 统一格式
|
|
|
|
let _query = {
|
|
type: timeTabID + 1,
|
|
date: _date,
|
|
}
|
|
if(tabID == 1)_query.stadium_id = curSelectStore.id;
|
|
|
|
this.getBrandInfo(_query);
|
|
},
|
|
// 店铺切换
|
|
storeChange(e){
|
|
let { storeList } = this;
|
|
let { value } = e.detail;
|
|
this.curSelectStore = storeList[value];
|
|
this.refreshPageInfo();
|
|
},
|
|
// 时间切换
|
|
timeChange(date){
|
|
let { timeTabID } = this;
|
|
|
|
if(timeTabID == 0) this.curTime.date = date;
|
|
if(timeTabID == 2) this.curTime.month = date;
|
|
if(timeTabID == 3) this.curTime.year = date;
|
|
|
|
this.refreshPageInfo();
|
|
},
|
|
// 获取初始时间
|
|
getTime(){
|
|
let _date = new Date();
|
|
let _year = _date.getFullYear();
|
|
let _month = util.formatNumber(_date.getMonth()+1);
|
|
let _day = util.formatNumber(_date.getDate());
|
|
return {
|
|
date: `${_year}-${_month}-${_day}`,
|
|
month: `${_year}-${_month}`,
|
|
year: _year
|
|
}
|
|
|
|
},
|
|
tabChange: util.debounce(function(type){
|
|
this.tabID = type;
|
|
this.refreshPageInfo();
|
|
},300,300),
|
|
|
|
timeTabChange: util.debounce(function(type){
|
|
this.timeTabID = type;
|
|
this.refreshPageInfo();
|
|
},300,300),
|
|
|
|
// 获取品牌店铺列表
|
|
getStoreList(){
|
|
let { brandInfo } = this;
|
|
util.showLoad();
|
|
return servers.get({
|
|
url: API.stadiumList,
|
|
data: {
|
|
brand_id: brandInfo.brand.id,
|
|
},
|
|
failMsg: '加载店铺列表失败！',
|
|
})
|
|
.then(res=>{
|
|
util.hideLoad();
|
|
// let _list = [res.list[0]] || [];
|
|
let _list = res.list || [];
|
|
this.storeList = _list;
|
|
this.curSelectStore = _list[0] || {};
|
|
return _list || [];
|
|
})
|
|
},
|
|
|
|
getBrandInfo({
|
|
date,
|
|
type,
|
|
stadium_id='',
|
|
}){
|
|
let { brandInfo } = this;
|
|
util.showLoad();
|
|
servers.get({
|
|
url: API.turnoverBrand,
|
|
data: {
|
|
brand_id: brandInfo.brand.id,
|
|
date,
|
|
type,// type=1, 2,3,4 代表日报， 周报， 月报， 年报
|
|
stadium_id
|
|
},
|
|
failMsg: '加载失败！'
|
|
})
|
|
.then(res=>{
|
|
util.hideLoad();
|
|
this.pageInfo = res;
|
|
})
|
|
.catch(util.hideLoad)
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "../../style/public.scss";
|
|
page{
|
|
background-color: #fff;
|
|
}
|
|
.turnover-container{
|
|
|
|
}
|
|
.tc-tab{
|
|
height: 134upx;
|
|
border-bottom: 22upx solid #f2f2f7;
|
|
@include centerFlex(center);
|
|
>view{
|
|
margin: 0 70upx;
|
|
width: 176upx;
|
|
height: 72upx;
|
|
line-height: 72upx;
|
|
text-align: center;
|
|
border-radius: 36upx;
|
|
font-size: 36upx;
|
|
font-weight: 500;
|
|
color: #1a1a1a;
|
|
}
|
|
.active{
|
|
background-color: $themeColor;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.tc-total-section{
|
|
border-bottom: 24upx solid #f2f2f7;
|
|
>picker{
|
|
width: 100%;
|
|
}
|
|
.tts-address{
|
|
padding-left: 48upx;
|
|
padding-right: 44upx;
|
|
height: 108upx;
|
|
border-bottom: 2upx solid #D8D8D8;
|
|
@include centerFlex(space-between);
|
|
>view{
|
|
flex-grow: 1;
|
|
font-size: 28upx;
|
|
color: #1a1a1a;
|
|
@include textHide(1);
|
|
}
|
|
>image{
|
|
margin-left: 20upx;
|
|
flex-shrink: 0;
|
|
width: 28upx;
|
|
height: 28upx;
|
|
}
|
|
}
|
|
.tts-money{
|
|
padding-top: 48upx;
|
|
padding-bottom: 70upx;
|
|
>view{
|
|
text-align: center;
|
|
padding: 0 24upx;
|
|
@include textHide(1);
|
|
&:first-child{
|
|
line-height: 34upx;
|
|
font-size: 24upx;
|
|
color: #9c9c9f;
|
|
}
|
|
&:nth-child(2){
|
|
margin-bottom: 30upx;
|
|
line-height: 40upx;
|
|
font-size: 28upx;
|
|
color: #9c9c9f;
|
|
}
|
|
&:nth-child(3){
|
|
line-height: 90upx;
|
|
font-size: 76upx;
|
|
color: #1a1a1a;
|
|
font-weight: bold;
|
|
>text{
|
|
font-size: 52upx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.tc-info-section{
|
|
.tis-tab{
|
|
padding: 0 34upx;
|
|
height: 108upx;
|
|
border-bottom: 2upx solid #D8D8D8;
|
|
@include centerFlex(space-between);
|
|
>view{
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
width: 120upx;
|
|
height: 106upx;
|
|
line-height: 106upx;
|
|
text-align: center;
|
|
font-size: 32upx;
|
|
color: #9c9c9f;
|
|
}
|
|
.active{
|
|
position: relative;
|
|
color: $themeColor;
|
|
&::after{
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -2upx;
|
|
transform: translateX(-50%);
|
|
width: 100%;
|
|
height: 8upx;
|
|
border-radius: 4upx;
|
|
background-color: $themeColor;
|
|
}
|
|
}
|
|
}
|
|
.tis-data{
|
|
padding-top: 60upx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.td-date{
|
|
margin-bottom: 62upx;
|
|
height: 72upx;
|
|
padding: 0 24upx;
|
|
border-radius: 10upx;
|
|
background-color: #f2f2f7;
|
|
@include centerFlex(center);
|
|
>view{
|
|
font-size: 28upx;
|
|
color: #1a1a1a;
|
|
}
|
|
>view{
|
|
margin: 0 18upx;
|
|
width: 2upx;
|
|
height: 40upx;
|
|
background-color: #D8D8D8;
|
|
}
|
|
>image{
|
|
width: 40upx;
|
|
height: 40upx;
|
|
}
|
|
}
|
|
.td-tip{
|
|
margin-bottom: 6upx;
|
|
text-align: center;
|
|
line-height: 40upx;
|
|
font-size: 28upx;
|
|
color: #9c9c9f;
|
|
}
|
|
.td-price{
|
|
margin-bottom: 130upx;
|
|
padding: 0 24upx;
|
|
line-height: 90upx;
|
|
font-size: 76upx;
|
|
color: #1a1a1a;
|
|
>text{
|
|
font-size: 52upx;
|
|
}
|
|
@include textHide(1);
|
|
}
|
|
.td-detail{
|
|
padding: 0 24upx;
|
|
width: 100%;
|
|
@include centerFlex(center);
|
|
>view{
|
|
max-width: 50%;
|
|
flex-shrink: 0;
|
|
&:first-child{
|
|
margin-right: 24upx;
|
|
}
|
|
&+view{
|
|
margin-left: 24upx;
|
|
}
|
|
>view{
|
|
margin-bottom: 24upx;
|
|
font-weight: 500;
|
|
font-size: 32upx;
|
|
color: #1a1a1a;
|
|
@include textHide(1);
|
|
>text{
|
|
margin-right: 10upx;
|
|
font-weight: 400;
|
|
font-size: 28upx;
|
|
color: #9C9C9F;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|