|
|
@ -1,11 +1,11 @@ |
|
|
|
<template> |
|
|
|
<view class="order-list"> |
|
|
|
<view class="ol-header"> |
|
|
|
<view class="oh-cur-store"> |
|
|
|
<view class="oh-cur-store" v-if="orderType == 3 || orderType == 4"> |
|
|
|
<text>当前门店</text> |
|
|
|
<picker> |
|
|
|
<picker mode="selector" :range="storeList" range-key="name" @change="storeChange"> |
|
|
|
<view class="ocs-store"> |
|
|
|
<view>全部</view> |
|
|
|
<view>{{curSelectedStore.name || '-'}}</view> |
|
|
|
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image> |
|
|
|
</view> |
|
|
|
</picker> |
|
|
@ -22,7 +22,7 @@ |
|
|
|
<view></view> |
|
|
|
</view> |
|
|
|
<view class="oc-bot"> |
|
|
|
<view>成功交易245笔,退款25笔</view> |
|
|
|
<view>成功交易{{orderInfo.success_count || 0}}笔,退款{{orderInfo.refund_count || 0}}笔</view> |
|
|
|
<view class="ob-btns"> |
|
|
|
<image mode="aspectFit" @click="toSearch" src="/static/images/icon/search.png"></image> |
|
|
|
<image @click="showClassify" mode="aspectFit" src="/static/images/icon/filter.png"></image> |
|
|
@ -31,14 +31,10 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="ol-order-list"> |
|
|
|
<view class="ool-item" v-if="orderType == 3"> |
|
|
|
<reservation-order></reservation-order> |
|
|
|
</view> |
|
|
|
<view class="ool-item" v-if="orderType == 4"> |
|
|
|
<membership-order></membership-order> |
|
|
|
</view> |
|
|
|
<view class="ool-item" v-if="orderType == 5"> |
|
|
|
<integral-order></integral-order> |
|
|
|
<view class="ool-item" v-for="(e,i) in orderList" :key="i" > |
|
|
|
<reservation-order :order-info="e" v-if="orderType == 3"></reservation-order> |
|
|
|
<membership-order :order-info="e" v-if="orderType == 4"></membership-order> |
|
|
|
<integral-order :order-info="e" v-if="orderType == 5"></integral-order> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 分类tab --> |
|
|
@ -48,7 +44,12 @@ |
|
|
|
{{titleName}} |
|
|
|
</view> |
|
|
|
<view class="oc-tabs"> |
|
|
|
<view class="ot-item" v-for="e in classifyArr" :key="e.id">{{e.name}}</view> |
|
|
|
<view |
|
|
|
v-for="e in classifyArr" |
|
|
|
:key="e.id" |
|
|
|
:class="['ot-item',e.id === curTabID?'active':'']" |
|
|
|
@click="tabChange(e.id)" |
|
|
|
>{{e.name}}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
@ -60,7 +61,7 @@ |
|
|
|
<view class="op-time"> |
|
|
|
<text>开始时间</text> |
|
|
|
<view> |
|
|
|
<input placeholder="选择时间" disabled :value="periodInfo.start" /> |
|
|
|
<input placeholder="选择时间" disabled :value="tempTimer.start" /> |
|
|
|
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
@ -69,7 +70,7 @@ |
|
|
|
<view class="op-time"> |
|
|
|
<text>截止时间</text> |
|
|
|
<view> |
|
|
|
<input placeholder="选择时间" disabled :value="periodInfo.end" /> |
|
|
|
<input placeholder="选择时间" disabled :value="tempTimer.end" /> |
|
|
|
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
@ -88,20 +89,21 @@ |
|
|
|
import util from '../../utils/util'; |
|
|
|
import { servers } from '../../js/server'; |
|
|
|
import { API } from '../../js/api'; |
|
|
|
import { mapState } from 'vuex'; |
|
|
|
const resClassify = [ // 预约tab |
|
|
|
{id:0,name:'全部'}, |
|
|
|
{id:'',name:'全部'}, |
|
|
|
{id:1,name:'待使用'}, |
|
|
|
{id:2,name:'已使用'}, |
|
|
|
{id:3,name:'已失效'}, |
|
|
|
{id:4,name:'已退款'}, |
|
|
|
]; |
|
|
|
const memClassify = [ // 会员tab |
|
|
|
{id:0,name:'全部'}, |
|
|
|
{id:'',name:'全部'}, |
|
|
|
{id:1,name:'使用中'}, |
|
|
|
{id:2,name:'已失效'}, |
|
|
|
{id:0,name:'已失效'}, |
|
|
|
] |
|
|
|
const intClassify = [ // 积分tab |
|
|
|
{id:0,name:'全部'}, |
|
|
|
{id:'',name:'全部'}, |
|
|
|
{id:1,name:'待发货'}, |
|
|
|
{id:2,name:'已发货'}, |
|
|
|
{id:3,name:'已完成'}, |
|
|
@ -127,19 +129,52 @@ |
|
|
|
if(orderType == 4)return '会员卡订单'; |
|
|
|
if(orderType == 5)return '积分商城订单'; |
|
|
|
return '订单' |
|
|
|
} |
|
|
|
}, |
|
|
|
...mapState(['brandInfo']), |
|
|
|
}, |
|
|
|
data(){ |
|
|
|
return { |
|
|
|
isShowClassify: false, |
|
|
|
isShowPeriod: false, |
|
|
|
periodInfo: { |
|
|
|
isShowClassify: false, // 是否显示分类弹窗 |
|
|
|
isShowPeriod: false, // 是否显示时间段弹窗 |
|
|
|
curTabID: '', // 当前tabID 对应 接口status 值 |
|
|
|
periodInfo: { // 展示和请求时间 |
|
|
|
start: '', |
|
|
|
end: '' |
|
|
|
}, |
|
|
|
tempTimer: { // 弹窗临时时间 |
|
|
|
start: '', |
|
|
|
end: '' |
|
|
|
}, |
|
|
|
orderType: 3, // 3->预约,4->会员,5->积分 |
|
|
|
|
|
|
|
storeList: [ // 店铺列表 |
|
|
|
{ id: '', name: '全部' } |
|
|
|
], |
|
|
|
|
|
|
|
curSelectedStore: { id: '', name: '全部' }, // 当前选中店铺 |
|
|
|
|
|
|
|
orderInfo: {}, // 订单信息 退款数等 |
|
|
|
orderList: [], // 订单列表 |
|
|
|
page: 1, |
|
|
|
} |
|
|
|
}, |
|
|
|
onReachBottom(){ |
|
|
|
let { curTabID, periodInfo, orderType, curSelectedStore, page } = this; |
|
|
|
|
|
|
|
this.getOrderList({ |
|
|
|
begin: periodInfo.start, |
|
|
|
end: periodInfo.end, |
|
|
|
// 订单状态 |
|
|
|
// 预约 - 1 已支付待使用 / 2 已使用 / 3 已失效 / 4 已退款 |
|
|
|
// 会员 - 1 '使用中' / 0 '无效' |
|
|
|
// 积分 - 1已付款 / 2 已发货 / 3 已完成 / 4 取消兑换 |
|
|
|
status: curTabID, |
|
|
|
stadium_id: curSelectedStore.id, |
|
|
|
page: ++page, |
|
|
|
orderType: orderType, |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
onLoad(options){ |
|
|
|
this.orderType = options.order_type; |
|
|
|
this.$nextTick(_=>{ |
|
|
@ -147,18 +182,59 @@ |
|
|
|
title: this.titleName |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.getReservatioOrder({}); |
|
|
|
this.getStoreList(); |
|
|
|
this.getOrderList({ |
|
|
|
orderType: options.order_type |
|
|
|
}) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
startTimeChange(res){ |
|
|
|
this.periodInfo.start = res.detail.value; |
|
|
|
refreshList(){ |
|
|
|
let { curTabID, periodInfo, orderType, curSelectedStore, page } = this; |
|
|
|
this.orderList = []; |
|
|
|
this.page = 1; |
|
|
|
|
|
|
|
this.getOrderList({ |
|
|
|
begin: periodInfo.start, |
|
|
|
end: periodInfo.end, |
|
|
|
// 订单状态 |
|
|
|
// 预约 - 1 已支付待使用 / 2 已使用 / 3 已失效 / 4 已退款 |
|
|
|
// 会员 - 1 '使用中' / 0 '无效' |
|
|
|
// 积分 - 1已付款 / 2 已发货 / 3 已完成 / 4 取消兑换 |
|
|
|
status: curTabID, |
|
|
|
stadium_id: curSelectedStore.id, |
|
|
|
orderType: orderType, |
|
|
|
}) |
|
|
|
}, |
|
|
|
endTimeChange(res){ |
|
|
|
this.periodInfo.end = res.detail.value; |
|
|
|
console.log(res) |
|
|
|
tabChange: util.debounce(function(ID){ |
|
|
|
if(this.curTabID === ID)return; |
|
|
|
this.curTabID = ID; |
|
|
|
this.hideClassify(); |
|
|
|
this.$nextTick(this.refreshList); |
|
|
|
},300,300), |
|
|
|
storeChange(e){ |
|
|
|
let { value } = e.detail; |
|
|
|
let { storeList } = this; |
|
|
|
this.curSelectedStore = storeList[value]; |
|
|
|
this.$nextTick(this.refreshList); |
|
|
|
}, |
|
|
|
// 获取品牌店铺列表 |
|
|
|
getStoreList(){ |
|
|
|
let { brandInfo } = this; |
|
|
|
servers.get({ |
|
|
|
url: API.stadiumList, |
|
|
|
data: { |
|
|
|
brand_id: brandInfo.brand.id, |
|
|
|
}, |
|
|
|
failMsg: '加载店铺列表失败!', |
|
|
|
}) |
|
|
|
.then(res=>{ |
|
|
|
let _list = res.list || []; |
|
|
|
this.storeList = [ ...this.storeList, ..._list ]; |
|
|
|
}) |
|
|
|
}, |
|
|
|
toSearch(){ |
|
|
|
util.routeTo(`/pages/order_search/order_search`,'nT'); |
|
|
|
let { orderType } = this; |
|
|
|
util.routeTo(`/pages/order_search/order_search?type=${orderType}`,'nT'); |
|
|
|
}, |
|
|
|
showClassify(){ |
|
|
|
this.isShowClassify = true; |
|
|
@ -166,15 +242,26 @@ |
|
|
|
hideClassify(){ |
|
|
|
this.isShowClassify = false; |
|
|
|
}, |
|
|
|
startTimeChange(res){ |
|
|
|
let { value } = res.detail; |
|
|
|
this.tempTimer.start = value; |
|
|
|
}, |
|
|
|
endTimeChange(res){ |
|
|
|
let { value } = res.detail; |
|
|
|
this.tempTimer.end = value; |
|
|
|
}, |
|
|
|
|
|
|
|
confirmPeriod(){ |
|
|
|
let { start, end } = this.periodInfo; |
|
|
|
let { start, end } = this.tempTimer; |
|
|
|
|
|
|
|
if( |
|
|
|
!start || !end || |
|
|
|
new Date(start).getTime()>=new Date(end).getTime() |
|
|
|
new Date(start.replace(/\-/g,'/')).getTime()>=new Date(end.replace(/\-/g,'/')).getTime() |
|
|
|
)return util.showNone('请选择合理时间!'); |
|
|
|
|
|
|
|
this.periodInfo = { ...this.tempTimer }; |
|
|
|
this.hidePeriodModal(); |
|
|
|
this.$nextTick(this.refreshList); |
|
|
|
}, |
|
|
|
showPeriodModal(){ |
|
|
|
this.isShowPeriod = true; |
|
|
@ -182,30 +269,52 @@ |
|
|
|
hidePeriodModal(){ |
|
|
|
this.isShowPeriod = false; |
|
|
|
}, |
|
|
|
getReservatioOrder({ |
|
|
|
key='', |
|
|
|
getApiUrl(type = this.orderType){ |
|
|
|
if(type == 3)return API.reservationOrder; |
|
|
|
if(type == 4)return API.membershipOrder; |
|
|
|
if(type == 5)return API.integralOrder; |
|
|
|
}, |
|
|
|
getOrderList({ |
|
|
|
begin='', |
|
|
|
end='', |
|
|
|
status='', |
|
|
|
brand_id='37', |
|
|
|
verify_user_id='160', |
|
|
|
// 订单状态 |
|
|
|
// 预约 - 1 已支付待使用 / 2 已使用 / 3 已失效 / 4 已退款 |
|
|
|
// 会员 - 1 '使用中' / 0 '无效' |
|
|
|
// 积分 - 1已付款 / 2 已发货 / 3 已完成 / 4 取消兑换 |
|
|
|
status='', |
|
|
|
stadium_id='', |
|
|
|
page=1, |
|
|
|
page_size=15, |
|
|
|
orderType = this.orderType |
|
|
|
}){ |
|
|
|
let { brandInfo } = this; |
|
|
|
util.showLoad(); |
|
|
|
servers.get({ |
|
|
|
url: API.reservationOrder, |
|
|
|
url: this.getApiUrl(orderType), |
|
|
|
data: { |
|
|
|
key, |
|
|
|
begin, |
|
|
|
end, |
|
|
|
status, |
|
|
|
brand_id, |
|
|
|
verify_user_id, |
|
|
|
brand_id: brandInfo.brand.id, |
|
|
|
stadium_id, |
|
|
|
page, |
|
|
|
page_size, |
|
|
|
}, |
|
|
|
failMsg: '加载失败!' |
|
|
|
}) |
|
|
|
.then(res=>{ |
|
|
|
console.log(res); |
|
|
|
util.hideLoad(); |
|
|
|
let { list, ...orderInfo } = res; |
|
|
|
this.orderInfo = orderInfo |
|
|
|
let _list = list || []; |
|
|
|
if(page == 1)return this.orderList = _list; |
|
|
|
if(_list.length<=0)return util.showNone('没有更多!'); |
|
|
|
this.page = page; |
|
|
|
this.orderList = [ ...this.orderList, ..._list ]; |
|
|
|
}) |
|
|
|
} |
|
|
|
.catch(util.hideLoad) |
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
} |
|
|
@ -326,6 +435,9 @@ |
|
|
|
font-size: 32upx; |
|
|
|
color: #1a1a1a; |
|
|
|
@include textHide(1); |
|
|
|
&.active{ |
|
|
|
color: $themeColor; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|