APP
/
ox_zhiNengZhuShou
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

fix orderList

course
刘嘉炜 3 years ago
parent
8a1904cfe6
commit
b18cdc1706
1 changed files with 165 additions and 136 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 301
      src/pages/order_list/order_list.vue

301
src/pages/order_list/order_list.vue
View File

@ -1,20 +1,21 @@
<template> <template>
<view class="order-list"> <view class="order-list">
<view class="ol-header"> <view class="ol-header">
<view class="oh-cur-store" v-if="orderType == 3 || orderType == 4 || orderType == 1|| orderType == 10">
<view class="oh-cur-store" v-if="isStoreInfo">
<text>当前门店</text> <text>当前门店</text>
<picker mode="selector" :range="storeList" range-key="name" @change="storeChange"> <picker mode="selector" :range="storeList" range-key="name" @change="storeChange">
<view class="ocs-store"> <view class="ocs-store">
<view :class="curSelectedStore!=null?'active':''">{{curSelectedStore == null?'全部':(curSelectedStore.name || '-')}}</view>
<view :class="curSelectedStore != null ? 'active' : ''">{{ curSelectedStore == null ? '全部' : (curSelectedStore.name || '-')}}</view>
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image> <image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
</view> </view>
</picker> </picker>
</view> </view>
<!-- 约玩tab -->
<view class="ol-select-type" v-if="orderType == 10"> <view class="ol-select-type" v-if="orderType == 10">
<view <view
v-for="(oitem,oi) in selectOrderType" v-for="(oitem,oi) in selectOrderType"
:key="oi" :key="oi"
:class="oitem.type == selectedOrderType ?'als-active':''"
:class="oitem.type == selectedOrderType ? 'als-active' : ''"
@click="tabTypeChange(oitem)" @click="tabTypeChange(oitem)"
>{{oitem.name || '-'}}</view> >{{oitem.name || '-'}}</view>
</view> </view>
@ -23,15 +24,15 @@
<view class="oc-period" @click="showPeriodModal"> <view class="oc-period" @click="showPeriodModal">
<text> <text>
{{ {{
!!periodInfo.start&&!!periodInfo.end ?
`${periodInfo.start.replace(/\-/g,'.')} - ${periodInfo.end.replace(/\-/g,'.')}`:
!!periodInfo.start && !!periodInfo.end ?
`${ periodInfo.start.replace(/\-/g,'.') } - ${ periodInfo.end.replace(/\-/g,'.') }`:
'请选择时间' '请选择时间'
}} }}
</text> </text>
<view></view> <view></view>
</view> </view>
<view class="oc-bot"> <view class="oc-bot">
<view>成功交易{{orderInfo.success_count || 0}}笔，退款{{orderInfo.refund_count || 0}}笔</view>
<view>成功交易{{ orderInfo.success_count || 0 }}笔，退款{{ orderInfo.refund_count || 0 }}笔</view>
<view class="ob-btns"> <view class="ob-btns">
<image mode="aspectFit" @click="toSearch" src="/static/images/icon/search.png"></image> <image mode="aspectFit" @click="toSearch" src="/static/images/icon/search.png"></image>
<image @click="showClassify" mode="aspectFit" src="/static/images/icon/filter.png"></image> <image @click="showClassify" mode="aspectFit" src="/static/images/icon/filter.png"></image>
@ -58,7 +59,7 @@
<view <view
v-for="e in classifyArr" v-for="e in classifyArr"
:key="e.id" :key="e.id"
:class="['ot-item',e.id.toString() === curTabID.toString()?'active':'']"
:class="['ot-item', e.id.toString() === curTabID.toString() ? 'active' : '' ]"
@click="tabChange(e.id)" @click="tabChange(e.id)"
>{{e.name}}</view> >{{e.name}}</view>
</view> </view>
@ -100,26 +101,12 @@
import timing_order from '../../components/timing_order/timing_order.vue' import timing_order from '../../components/timing_order/timing_order.vue'
import organize_order from '../../components/organize_order/organize_order.vue' import organize_order from '../../components/organize_order/organize_order.vue'
import util from '../../utils/util'; import util from '../../utils/util';
import { servers } from '../../js/server'; import { servers } from '../../js/server';
import { API } from '../../js/api'; import { API } from '../../js/api';
import { mapState } from 'vuex'; import { mapState } from 'vuex';
// 预约tab
const resClassify = [ {id:'', name:'全部'}, {id:1, name:'待使用'}, {id:2, name:'已使用'}, {id:3, name:'已失效'}, {id:4, name:'已退款'}, ];
// 会员tab
const memClassify = [
{id:'', name:'全部'}, {id:1, name:'使用中'}, {id:0, name:'已失效'},
]
// 积分tab
const intClassify = [ {id:'', name:'全部'}, {id:1, name:'待发货'}, {id:2, name:'已发货'}, {id:3, name:'已完成'}, ]
// 计时tab 全部/计费中/已完成/已退款 [空字符/0/1/4]
const timClassify = [ {id:'', name:'全部'}, {id:0, name:'计费中'}, {id:1, name:'已完成'}, {id:4, name:'已退款'}, ]
// 约玩tab 全部/计费中/已完成/已退款 [空字符/0/1/4]
const orgClassify = [ {id:'', name:'全部'}, {id:1, name:'已付款'}, {id:2, name:'已完成'}, {id:4, name:'已退款'}, ]
export default { export default {
components: { components: {
// 'reservation-order': order.reservation, // 'reservation-order': order.reservation,
@ -130,27 +117,19 @@
'organize-order': organize_order, 'organize-order': organize_order,
}, },
computed:{ computed:{
isStoreInfo(){
let { orderType } = this;
return orderType == 3 || orderType == 4 || orderType == 1|| orderType == 10
},
// 分类列表
classifyArr(){ classifyArr(){
let { orderType } = this; let { orderType } = this;
if(orderType == 3)return resClassify;
if(orderType == 4)return memClassify;
if(orderType == 5)return intClassify;
if(orderType == 1)return timClassify;
if(orderType == 10)return orgClassify;
return [];
return getClassifyList(+orderType);
}, },
// 标题
titleName(){ titleName(){
let { orderType, appointOrderType } = this; let { orderType, appointOrderType } = this;
if(orderType == 3){
if(appointOrderType == 0)return '订场订单';
if(appointOrderType == 1)return '次卡订单';
return '预约订单';
}
if(orderType == 4)return '会员卡订单';
if(orderType == 5)return '积分商城订单';
if(orderType == 1)return '计时订单';
if(orderType == 10)return '约玩订单';
return '订单'
return getTitleName({ orderType: +orderType, appointOrderType, });
}, },
...mapState(['brandInfo']), ...mapState(['brandInfo']),
}, },
@ -167,7 +146,8 @@
start: '', start: '',
end: '' end: ''
}, },
orderType: 3, // 3->预约,4->会员,5->积分,1计时 , 10->约玩
orderType: 0, // 3->预约,4->会员,5->积分,1计时 , 10->约玩
storeList: [ // 店铺列表 storeList: [ // 店铺列表
{ id: '', name: '全部' } { id: '', name: '全部' }
@ -189,25 +169,17 @@
type:"Sub" type:"Sub"
} }
], ],
selectedOrderType: "Main",//约玩订单已选择类型
selectedOrderType: "Main", //约玩订单已选择类型
// 20210706 // 新增 ,预约订单分开 -> 次票、场次 // 20210706 // 新增 ,预约订单分开 -> 次票、场次
appointOrderType: '' appointOrderType: ''
} }
}, },
onReachBottom(){ onReachBottom(){
let { curTabID, periodInfo, orderType, curSelectedStore, page, appointOrderType } = this;
let _curSelectedStore = curSelectedStore || {};
let { page } = this;
this.getOrderList({ this.getOrderList({
begin: periodInfo.start,
end: periodInfo.end,
status: curTabID,
stadium_id: _curSelectedStore.id || '',
page: ++page, page: ++page,
orderType: orderType,
order_type: appointOrderType,
}) })
}, },
onLoad(options){ onLoad(options){
let _type = options.order_type || ''; let _type = options.order_type || '';
@ -215,68 +187,40 @@
// 场地预约拆分订单 // 场地预约拆分订单
if(options.order_type == 3&&options.type!=undefined)this.appointOrderType = options.type; if(options.order_type == 3&&options.type!=undefined)this.appointOrderType = options.type;
this.$nextTick(_=>{ uni.setNavigationBarTitle({ title: this.titleName }) });
this.periodInfo = this.getDefaultTimeLimit(_type); this.periodInfo = this.getDefaultTimeLimit(_type);
this.getStoreList(); this.getStoreList();
this.$nextTick(this.refreshList); this.$nextTick(this.refreshList);
this.$nextTick(_=> uni.setNavigationBarTitle({ title: this.titleName }));
}, },
methods: { methods: {
// 获取默认时间
// 3->预约,4->会员,5->积分,1->计时
getDefaultTimeLimit(type){
let _date = new Date();
let _sevenTimeStemp = 7*24*60*60*1000;
let _beforeSeven = _date.getTime() - _sevenTimeStemp;
let _afterSeven = _date.getTime() + _sevenTimeStemp;
let _obj = { start: '', end: '' };
if(type == 3 )_obj['start']=util.formatDate({}),_obj['end'] = util.formatDate({date: _afterSeven});
if(type == 4 || type == 1)_obj['start']=util.formatDate({date: _beforeSeven}),_obj['end'] = util.formatDate({});
console.log(_obj)
return _obj;
},
// 刷新列表
refreshList(){
let { curTabID, periodInfo, orderType, curSelectedStore, page, appointOrderType } = this;
let _curSelectedStore = curSelectedStore || {};
this.orderList = [];
this.page = 1;
this.getOrderList({
begin: periodInfo.start,
end: periodInfo.end,
status: curTabID,
stadium_id: _curSelectedStore.id,
orderType: orderType,
order_type: appointOrderType,
})
},
tabChange: util.debounce(function(ID){ tabChange: util.debounce(function(ID){
if(this.curTabID === ID)return; if(this.curTabID === ID)return;
this.curTabID = ID; this.curTabID = ID;
this.hideClassify(); this.hideClassify();
this.$nextTick(this.refreshList); this.$nextTick(this.refreshList);
},300,300), },300,300),
//切换订单列表选项卡type
tabTypeChange: util.debounce(function(item){
this.selectedOrderType = item.type
this.$nextTick(this.refreshList);
},300,true),
showClassify(){
this.isShowClassify = true;
},
hideClassify(){
this.isShowClassify = false;
},
// ----->
// 店铺切换
storeChange(e){ storeChange(e){
let { value } = e.detail; let { value } = e.detail;
let { storeList } = this; let { storeList } = this;
this.curSelectedStore = storeList[value]; this.curSelectedStore = storeList[value];
this.$nextTick(this.refreshList); this.$nextTick(this.refreshList);
}, },
// 获取品牌店铺列表 // 获取品牌店铺列表
getStoreList(){ getStoreList(){
let { brandInfo } = this; let { brandInfo } = this;
@ -292,16 +236,44 @@
this.storeList = [ ...this.storeList, ..._list ]; this.storeList = [ ...this.storeList, ..._list ];
}) })
}, },
// ----->
// 获取默认时间段
// 3->预约,4->会员,5->积分,1->计时
getDefaultTimeLimit(type){
let _date = new Date();
let _sevenTimeStemp = 7*24*60*60*1000;
let _beforeSeven = _date.getTime() - _sevenTimeStemp;
let _afterSeven = _date.getTime() + _sevenTimeStemp;
let _obj = { start: '', end: '' };
if(type == 3 ){
_obj['start']=util.formatDate({});
_obj['end'] = util.formatDate({date: _afterSeven});
}
if(type == 4 || type == 1){
_obj['start']=util.formatDate({date: _beforeSeven});
_obj['end'] = util.formatDate({});
}
return _obj;
},
//切换订单列表选项卡type
tabTypeChange: util.debounce(function(item){
this.selectedOrderType = item.type
this.$nextTick(this.refreshList);
},300,true),
toSearch(){ toSearch(){
let { orderType } = this; let { orderType } = this;
util.routeTo(`/pages/order_search/order_search?type=${orderType}`,'nT'); util.routeTo(`/pages/order_search/order_search?type=${orderType}`,'nT');
}, },
showClassify(){
this.isShowClassify = true;
},
hideClassify(){
this.isShowClassify = false;
},
// 时间段选择
startTimeChange(res){ startTimeChange(res){
let { value } = res.detail; let { value } = res.detail;
this.tempTimer.start = value; this.tempTimer.start = value;
@ -310,7 +282,6 @@
let { value } = res.detail; let { value } = res.detail;
this.tempTimer.end = value; this.tempTimer.end = value;
}, },
confirmPeriod(){ confirmPeriod(){
let { start, end } = this.tempTimer; let { start, end } = this.tempTimer;
@ -329,70 +300,128 @@
hidePeriodModal(){ hidePeriodModal(){
this.isShowPeriod = false; this.isShowPeriod = false;
}, },
getApiUrl(type = this.orderType){
if(type == 3)return API.reservationOrder;
if(type == 4)return API.membershipOrder;
if(type == 5)return API.integralOrder;
if(type == 1)return API.timeOrder;
if(type == 10)return API.organizeOrderList;
// ----->
// 刷新列表
refreshList(){
this.orderList = [];
this.page = 1;
this.getOrderList({ })
}, },
// 获取订单列表
getOrderList({ getOrderList({
begin='',
end='',
// 订单状态
// 预约 - 1 已支付待使用 / 2 已使用 / 3 已失效 / 4 已退款
// 会员 - 1 '使用中' / 0 '无效'
// 积分 - 1已付款 / 2 已发货 / 3 已完成 / 4 取消兑换
status='',
stadium_id='',
page=1, page=1,
page_size=15, page_size=15,
orderType = this.orderType,
order_type='', //预约订单:0是场次订单,1是人次订单，空字符全部; 计时订单:场时/人时[1/2]
}){ }){
let { brandInfo } = this;
let { orderType } = this;
util.showLoad(); util.showLoad();
let postData = {
begin,
end,
status,
brand_id: brandInfo.brand.id,
stadium_id,
page,
page_size,
order_type,
orderType
}
if(this.orderType == "10"){ //助手约玩订单修改, 按后端荣升0430重写接口重新定制字段.后续后端家兴0507重新接手该接口的修改(涉及约玩订单列表及订单详情)
postData['type'] = this.selectedOrderType;
postData['filter_start_time'] = begin;
postData['filter_end_time'] = end;
postData['pay_status'] = status;
}
servers.get({ servers.get({
url: this.getApiUrl(orderType), url: this.getApiUrl(orderType),
data: postData,
data: { ...this.getQueryForList(), page, page_size },
failMsg: '加载失败！' failMsg: '加载失败！'
}) })
.then(res=>{ .then(res=>{
util.hideLoad(); util.hideLoad();
let { list, ...orderInfo } = res; let { list, ...orderInfo } = res;
this.orderInfo = orderInfo
let _list = list || []; let _list = list || [];
this.orderInfo = orderInfo || {};
if(page == 1)return this.orderList = _list; if(page == 1)return this.orderList = _list;
if(_list.length<=0)return util.showNone('没有更多！'); if(_list.length<=0)return util.showNone('没有更多！');
this.page = page; this.page = page;
this.orderList = [ ...this.orderList, ..._list ]; this.orderList = [ ...this.orderList, ..._list ];
}) })
.catch(util.hideLoad)
.catch(util.hideLoad);
},
// 获取列表接口
getApiUrl(type = this.orderType){
if(type == 3)return API.reservationOrder;
if(type == 4)return API.membershipOrder;
if(type == 5)return API.integralOrder;
if(type == 1)return API.timeOrder;
if(type == 10)return API.organizeOrderList;
}, },
// 请求列表订单参数
getQueryForList(){
// 订单状态 status(curTabID)
// 预约 - 1 已支付待使用 / 2 已使用 / 3 已失效 / 4 已退款
// 会员 - 1 '使用中' / 0 '无效'
// 积分 - 1已付款 / 2 已发货 / 3 已完成 / 4 取消兑换
let { brandInfo, curTabID, periodInfo, orderType, curSelectedStore, appointOrderType, selectedOrderType } = this;
let _curSelectedStore = curSelectedStore || {};
let _obj = {
begin: periodInfo.start || '',
end: periodInfo.end || '',
status: curTabID || '',
brand_id: brandInfo.brand.id,
stadium_id: _curSelectedStore.id || ''
};
// 预约订单:0是场次订单,1是人次订单，空字符全部; 计时订单:场时/人时[1/2]
if(orderType == 3)_obj['order_type'] = appointOrderType;
// 助手约玩订单修改, 按后端荣升0430重写接口重新定制字段.后续后端家兴0507重新接手该接口的修改(涉及约玩订单列表及订单详情)
if(orderType == "10"){
postData['type'] = selectedOrderType;
postData['filter_start_time'] = periodInfo.start;
postData['filter_end_time'] = periodInfo.end;
postData['pay_status'] = curTabID;
};
return _obj
},
}, },
}
// 标题
function getTitleName({
orderType,
appointOrderType,
}){
switch(orderType){
case 3:
if(appointOrderType == 0)return '订场订单';
if(appointOrderType == 1)return '次卡订单';
return '预约订单';
case 4:
return '会员卡订单';
case 5:
return '积分商城订单';
case 1:
return '计时订单';
case 10:
return '约玩订单';
default:
return '订单'
}
}
// 分类列表
function getClassifyList(orderType){
switch(orderType){
case 3: // 预约tab
return [ {id:'', name:'全部'}, {id:1, name:'待使用'}, {id:2, name:'已使用'}, {id:3, name:'已失效'}, {id:4, name:'已退款'}, ];
case 4: // 会员tab
return [ {id:'', name:'全部'}, {id:1, name:'使用中'}, {id:0, name:'已失效'},];
case 5: // 积分tab
return [ {id:'', name:'全部'}, {id:1, name:'待发货'}, {id:2, name:'已发货'}, {id:3, name:'已完成'}, ];
case 1: // 计时tab 全部/计费中/已完成/已退款 [空字符/0/1/4]
return [ {id:'', name:'全部'}, {id:0, name:'计费中'}, {id:1, name:'已完成'}, {id:4, name:'已退款'}, ];
case 10: // 约玩tab 全部/计费中/已完成/已退款 [空字符/0/1/4]
return [ {id:'', name:'全部'}, {id:1, name:'已付款'}, {id:2, name:'已完成'}, {id:4, name:'已退款'}, ];
default:
return []
}
} }
</script> </script>

Write Preview
Loading…
Cancel
Save