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.
456 lines
16 KiB
456 lines
16 KiB
<template>
|
|
<view class="collection-info">
|
|
<view class="ci-header">
|
|
<view class="ch-stadium">
|
|
<view class="cs-txt">当前门店</view>
|
|
<picker :range="stadiumList" range-key="name" @change="storeChange">
|
|
<view class="cs-picker">
|
|
<input :value="curStadium.name || '-'" disabled />
|
|
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
|
|
</view>
|
|
</picker>
|
|
|
|
</view>
|
|
<view class="ch-date-scene">
|
|
<view class="cds-item">
|
|
<view class="ci-txt">日期</view>
|
|
<view class="ci-frame ci-date">
|
|
<input disabled :value="curDate || '-'" />
|
|
<view></view>
|
|
<picker mode="date" @change="dateChange">
|
|
<image mode="aspectFit" src="/static/images/icon/calendar.png"></image>
|
|
</picker>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="cds-item">
|
|
<view class="ci-txt">场景</view>
|
|
<view class="ci-frame ci-scene">
|
|
<picker class="cs-picker" :range="sceneList" range-key="name" @change="sceneChange">
|
|
<view class="cp-picker-frame">
|
|
<input disabled :value="curScene.name || '-'" />
|
|
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png" style="transform: rotateZ(90deg);"></image>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="ci-tab">
|
|
<view class="ct-item" @click="typeChange(0)">
|
|
<view :class="[curType == 0?'active':'']">全部</view>
|
|
</view>
|
|
<view class="ct-item" @click="typeChange(1)">
|
|
<view :class="[curType == 1?'active':'']">退款</view>
|
|
</view>
|
|
</view>
|
|
<view class="ci-total">
|
|
收款{{ totalInfo.income_num || 0 }}笔（<text>￥{{ totalInfo.income_amount || 0 }}</text>) ，退款{{ totalInfo.refund_num || 0 }}笔（<text>￥{{ totalInfo.refund_amount || 0 }}</text>）
|
|
</view>
|
|
<view class="ci-ls">
|
|
<block v-for="(e, i) in recordLs" :key="i">
|
|
<view class="cl-item">
|
|
<view class="ci-name">
|
|
<view>{{ e.scene_name || '-' }}</view>
|
|
<view :class="e.amount<=0?'black': ''">{{ e.amount>0?'+':'' }}{{ e.amount || '-' }}</view>
|
|
</view>
|
|
<view class="ci-line">
|
|
<view>{{ e.order_no || '-' }}</view>
|
|
<view v-if="e.amount<=0">{{ e.refund_desc || '-' }}</view>
|
|
</view>
|
|
<view class="ci-line">
|
|
<view>{{ e.pay_time || '-' }}</view>
|
|
<view></view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
|
|
</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']),
|
|
},
|
|
data(){
|
|
return {
|
|
optionsQuery: {},
|
|
stadiumList: [],
|
|
curStadium: {},
|
|
sceneList: [],
|
|
curScene: {},
|
|
curDate: '',
|
|
curType: 0, // 0 -> 全部, 1 -> 退款；
|
|
|
|
recordLs: [],
|
|
totalInfo: {},
|
|
page: 1
|
|
}
|
|
},
|
|
onReachBottom(){
|
|
let { curStadium, optionsQuery, curScene, curDate, curType, page } = this;
|
|
let _query = {
|
|
brand_id: optionsQuery.brand_id,
|
|
stadium_id: optionsQuery.stadium_id == 0 ? -1 : curStadium.id,
|
|
time_str: curDate,
|
|
scene: curScene.scene,
|
|
type: curType == 1 ? '退款' : '全部',
|
|
page: ++page
|
|
}
|
|
|
|
this.getRecordLs(_query);
|
|
},
|
|
onLoad(options){
|
|
this.optionsQuery = options || {};
|
|
|
|
this.initPage(options);
|
|
},
|
|
methods: {
|
|
typeChange(idx){
|
|
this.curType = idx;
|
|
this.$nextTick(_=>this.refreshList());
|
|
},
|
|
async initPage(options){
|
|
let _stadiumLs = [];
|
|
if(!!options.stadium_id)_stadiumLs = await this.getStoreList(options.stadium_id);
|
|
let _sceneLs = await this.getSceneList();
|
|
this.curDate = util.formatDate({});
|
|
this.$nextTick(_=>this.refreshList());
|
|
},
|
|
refreshList(){
|
|
let { curStadium, optionsQuery, curScene, curDate, curType } = this;
|
|
this.page = 1;
|
|
this.recordLs = [];
|
|
|
|
let _query = {
|
|
brand_id: optionsQuery.brand_id,
|
|
stadium_id: optionsQuery.stadium_id == 0 ? -1 : curStadium.id,
|
|
time_str: curDate,
|
|
scene: curScene.scene,
|
|
type: curType == 1 ? '退款' : '全部'
|
|
}
|
|
|
|
this.getRecordLs(_query);
|
|
},
|
|
dateChange(e){
|
|
this.curDate = e.detail.value;
|
|
this.$nextTick(_=>this.refreshList());
|
|
|
|
},
|
|
sceneChange(e){
|
|
let { sceneList } = this;
|
|
this.curScene = sceneList[e.detail.value];
|
|
this.$nextTick(_=>this.refreshList());
|
|
},
|
|
async storeChange(e){
|
|
let { stadiumList } = this;
|
|
this.curStadium = stadiumList[e.detail.value] || {};
|
|
await this.getSceneList();
|
|
this.$nextTick(_=>this.refreshList());
|
|
},
|
|
getRecordLs({
|
|
brand_id,
|
|
stadium_id = '', // 空字符全部 -1品牌收款
|
|
time_str, // 日期y-m-d
|
|
scene,
|
|
type = '全部' , // 全部/退款
|
|
page_size = 15,
|
|
page = 1,
|
|
}){
|
|
let { optionsQuery } = this;
|
|
util.showLoad();
|
|
return servers.get({
|
|
url: API.consumeCountDetailLs,
|
|
data: {
|
|
brand_id,
|
|
stadium_id: stadium_id == 0 ? -1 : stadium_id == -2 ? '' : stadium_id,
|
|
time_str,
|
|
page,
|
|
page_size,
|
|
scene,
|
|
type,
|
|
},
|
|
failMsg: '加载店铺列表失败！',
|
|
|
|
})
|
|
.then(res=>{
|
|
util.hideLoad();
|
|
let _list = res.list || [];
|
|
this.totalInfo = res || {};
|
|
if(page == 1)return this.recordLs = _list;
|
|
if(!_list.length)return util.showNone('没有更多！');
|
|
this.page = page;
|
|
this.recordLs = [...this.recordLs, ..._list];
|
|
|
|
})
|
|
},
|
|
// 店铺列表
|
|
getStoreList(stadium_id = ''){
|
|
let { optionsQuery } = this;
|
|
return servers.get({
|
|
url: API.stadiumList,
|
|
data: {
|
|
brand_id: optionsQuery.brand_id,
|
|
},
|
|
failMsg: '加载店铺列表失败！',
|
|
|
|
})
|
|
.then(res=>{
|
|
let _list = res.list || [];
|
|
let _all = { name: '全部', id: -2, }
|
|
_list.unshift(_all);
|
|
let _cur = null;
|
|
if(!!stadium_id){
|
|
let _fiLs = _list.filter(e=>e.id == stadium_id);
|
|
if(_fiLs.length)_cur = _fiLs[0];
|
|
}
|
|
if(_cur&&_cur.id){
|
|
this.curStadium = _cur;
|
|
}else{
|
|
this.curStadium = _all;
|
|
}
|
|
return this.stadiumList = _list;
|
|
})
|
|
},
|
|
// 场景列表
|
|
getSceneList(){
|
|
let { optionsQuery, curStadium } = this;
|
|
return servers.get({
|
|
url: API.consumeCountGetScene,
|
|
data: {
|
|
brand_id: optionsQuery.brand_id,
|
|
stadium_id: optionsQuery.stadium_id == 0 ? -1 : curStadium.id,
|
|
},
|
|
failMsg: '加载场景列表失败！',
|
|
|
|
})
|
|
.then(res=>{
|
|
let _list = res || [];
|
|
if(_list.length)this.curScene = _list[0]
|
|
return this.sceneList = _list;
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "~style/public.scss";
|
|
page{
|
|
background-color: #fff;
|
|
}
|
|
.collection-info{
|
|
padding-bottom: 0upx;
|
|
padding-bottom: calc( 0upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
|
|
padding-bottom: calc( 0upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
|
|
.ci-header{
|
|
padding: 26upx 24upx 0;
|
|
.ch-stadium{
|
|
padding-bottom: 26upx;
|
|
@include centerFlex(space-between);
|
|
|
|
.cs-txt{
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
margin-right: 20upx;
|
|
font-size: 28upx;
|
|
line-height: 40upx;
|
|
color: #9c9c9f;
|
|
}
|
|
picker{
|
|
flex-grow: 1;
|
|
}
|
|
.cs-picker{
|
|
padding: 0 20upx;
|
|
height: 92upx;
|
|
border-radius: 10upx;
|
|
background-color: #f2f1f6;
|
|
@include centerFlex(space-between);
|
|
>input{
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
font-size: 28upx;
|
|
color: #1a1a1a;
|
|
}
|
|
image{
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
width: 28upx;
|
|
height: 28upx;
|
|
transform: rotateZ(90deg);
|
|
}
|
|
}
|
|
}
|
|
.ch-date-scene{
|
|
margin-bottom: 30upx;
|
|
@include centerFlex(space-between);
|
|
.cds-item{
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
@include centerFlex(flex-start);
|
|
.ci-txt{
|
|
margin-right: 16upx;
|
|
line-height: 34upx;
|
|
font-size: 24upx;
|
|
color: #9c9c9f;
|
|
}
|
|
.ci-frame{
|
|
height: 64upx;
|
|
border-radius: 10upx;
|
|
background-color: #f2f1f6;
|
|
}
|
|
.ci-date{
|
|
padding: 0 16upx;
|
|
width: 240upx;
|
|
@include centerFlex(space-between);
|
|
>input{
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
font-size: 24upx;
|
|
color: #1a1a1a;
|
|
}
|
|
>view{
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
margin: 0 14upx;
|
|
height: 32upx;
|
|
width: 2upx;
|
|
background-color: #B2B2B2;
|
|
}
|
|
picker{
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
image{
|
|
margin: 0;
|
|
padding: 0;
|
|
display: block;
|
|
height: 40upx;
|
|
width: 40upx;
|
|
}
|
|
}
|
|
|
|
}
|
|
.ci-scene{
|
|
.cs-picker{
|
|
|
|
}
|
|
.cp-picker-frame{
|
|
padding: 0 20upx;
|
|
width: 264upx;
|
|
@include centerFlex(space-between);
|
|
input{
|
|
flex-grow: 1;
|
|
height: 64upx;
|
|
font-size: 24upx;
|
|
color: #1a1a1a;
|
|
}
|
|
image{
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
margin-left: 16upx;
|
|
height: 28upx;
|
|
width: 28upx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
.ci-tab{
|
|
@include centerFlex(center);
|
|
border-bottom: 2upx solid #D8D8D8;
|
|
.ct-item{
|
|
flex-grow: 1;
|
|
@include centerFlex(center);
|
|
>view{
|
|
position: relative;
|
|
display: inline-block;
|
|
text-align: center;
|
|
line-height: 110upx;
|
|
height: 110upx;
|
|
font-size: 32upx;
|
|
color: #9C9C9F;
|
|
&.active{
|
|
color: $themeColor;
|
|
&::after{
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translateX(-50%);
|
|
width: 200%;
|
|
height: 8upx;
|
|
border-radius: 4upx;
|
|
background-color: $themeColor;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
.ci-total{
|
|
padding: 0 24upx;
|
|
line-height: 96upx;
|
|
font-size: 24upx;
|
|
color: #9C9C9F;
|
|
@include textHide(1);
|
|
>text{
|
|
color: #F6843E;
|
|
}
|
|
|
|
}
|
|
.ci-ls{
|
|
padding: 0 30upx;
|
|
.cl-item{
|
|
padding: 30upx 0;
|
|
&:not(:last-child){
|
|
border-bottom: 2upx solid #D8D8D8;
|
|
}
|
|
.ci-name{
|
|
margin-bottom: 8upx;
|
|
@include centerFlex(space-between);
|
|
>view{
|
|
font-size: 32upx;
|
|
color: #1a1a1a;
|
|
width: 50%;
|
|
@include textHide(1);
|
|
&+view{
|
|
text-align: right;
|
|
font-weight: 500;
|
|
color: #F6843E;
|
|
&.black{
|
|
color: #1A1A1A;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ci-line{
|
|
@include centerFlex(space-between);
|
|
|
|
>view{
|
|
line-height: 34upx;
|
|
font-size: 24upx;
|
|
color: #9C9C9F;
|
|
@include textHide(1);
|
|
&+view{
|
|
flex-shrink: 0;
|
|
max-width: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</style>
|