|
|
|
@ -11,70 +11,70 @@ |
|
|
|
</picker> |
|
|
|
</view> |
|
|
|
<view class="oh-ctrl"> |
|
|
|
<picker> |
|
|
|
<view class="oc-period"> |
|
|
|
<text>2020.08.01-2020.08.27</text> |
|
|
|
<view></view> |
|
|
|
</view> |
|
|
|
</picker> |
|
|
|
<view class="oc-period" @click="showPeriodModal"> |
|
|
|
<text> |
|
|
|
{{ |
|
|
|
!!periodInfo.start&&!!periodInfo.end ? |
|
|
|
`${periodInfo.start} ~ ${periodInfo.end}`: |
|
|
|
'请选择时间' |
|
|
|
}} |
|
|
|
</text> |
|
|
|
<view></view> |
|
|
|
</view> |
|
|
|
<view class="oc-bot"> |
|
|
|
<view>成功交易245笔，退款25笔</view> |
|
|
|
<view class="ob-btns"> |
|
|
|
<image mode="aspectFit" @click="toSearch" src="/static/images/icon/search.png"></image> |
|
|
|
<image mode="aspectFit" src="/static/images/icon/filter.png"></image> |
|
|
|
<image @click="showClassify" mode="aspectFit" src="/static/images/icon/filter.png"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="ol-order-list"> |
|
|
|
<view class="ool-item"> |
|
|
|
<view class="ool-item" v-if="orderType == 3"> |
|
|
|
<reservation-order></reservation-order> |
|
|
|
</view> |
|
|
|
<view class="ool-item"> |
|
|
|
<view class="ool-item" v-if="orderType == 4"> |
|
|
|
<membership-order></membership-order> |
|
|
|
</view> |
|
|
|
<view class="ool-item"> |
|
|
|
<view class="ool-item" v-if="orderType == 5"> |
|
|
|
<integral-order></integral-order> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 分类tab --> |
|
|
|
<view class="ox-dark-mask" v-if="false"> |
|
|
|
<view class="ol-classify"> |
|
|
|
<view class="ox-dark-mask" v-if="isShowClassify" @click="hideClassify"> |
|
|
|
<view class="ol-classify" @click.stop="()=>false"> |
|
|
|
<view class="oc-title"> |
|
|
|
预约订单 |
|
|
|
{{titleName}} |
|
|
|
</view> |
|
|
|
<view class="oc-tabs"> |
|
|
|
<view class="ot-item">全部</view> |
|
|
|
<view class="ot-item">待使用</view> |
|
|
|
<view class="ot-item">已使用</view> |
|
|
|
<view class="ot-item">已失效</view> |
|
|
|
<view class="ot-item">已退款</view> |
|
|
|
<view class="ot-item" v-for="e in classifyArr" :key="e.id">{{e.name}}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 时间段选择 --> |
|
|
|
<view class="ox-dark-mask" v-if="false"> |
|
|
|
<view class="ol-period"> |
|
|
|
<view class="ox-dark-mask" v-if="isShowPeriod" @click="hidePeriodModal"> |
|
|
|
<view class="ol-period" @click.stop="()=>false"> |
|
|
|
<view>日期范围</view> |
|
|
|
<picker> |
|
|
|
<picker mode="date" @change="startTimeChange"> |
|
|
|
<view class="op-time"> |
|
|
|
<text>开始时间</text> |
|
|
|
<view> |
|
|
|
<input placeholder="选择时间" disabled /> |
|
|
|
<input placeholder="选择时间" disabled :value="periodInfo.start" /> |
|
|
|
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</picker> |
|
|
|
<picker> |
|
|
|
<picker mode="date" @change="endTimeChange"> |
|
|
|
<view class="op-time"> |
|
|
|
<text>截止时间</text> |
|
|
|
<view> |
|
|
|
<input placeholder="选择时间" disabled /> |
|
|
|
<input placeholder="选择时间" disabled :value="periodInfo.end" /> |
|
|
|
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</picker> |
|
|
|
<view class="pl-btn active">确定</view> |
|
|
|
<view class="pl-btn active" @click="confirmPeriod">确定</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -86,6 +86,26 @@ |
|
|
|
import integral_order from '../../components/integral_order/integral_order'; |
|
|
|
import membership_order from '../../components/membership_order/membership_order'; |
|
|
|
import util from '../../utils/util'; |
|
|
|
import { servers } from '../../js/server'; |
|
|
|
import { API } from '../../js/api'; |
|
|
|
const resClassify = [ // 预约tab |
|
|
|
{id:0,name:'全部'}, |
|
|
|
{id:1,name:'待使用'}, |
|
|
|
{id:2,name:'已使用'}, |
|
|
|
{id:3,name:'已失效'}, |
|
|
|
{id:4,name:'已退款'}, |
|
|
|
]; |
|
|
|
const memClassify = [ // 会员tab |
|
|
|
{id:0,name:'全部'}, |
|
|
|
{id:1,name:'使用中'}, |
|
|
|
{id:2,name:'已失效'}, |
|
|
|
] |
|
|
|
const intClassify = [ // 积分tab |
|
|
|
{id:0,name:'全部'}, |
|
|
|
{id:1,name:'待发货'}, |
|
|
|
{id:2,name:'已发货'}, |
|
|
|
{id:3,name:'已完成'}, |
|
|
|
] |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
// 'reservation-order': order.reservation, |
|
|
|
@ -93,14 +113,101 @@ |
|
|
|
'membership-order': membership_order, |
|
|
|
'integral-order': integral_order, |
|
|
|
}, |
|
|
|
computed:{ |
|
|
|
classifyArr(){ |
|
|
|
let { orderType } = this; |
|
|
|
if(orderType == 3)return resClassify; |
|
|
|
if(orderType == 4)return memClassify; |
|
|
|
if(orderType == 5)return intClassify; |
|
|
|
return []; |
|
|
|
}, |
|
|
|
titleName(){ |
|
|
|
let { orderType } = this; |
|
|
|
if(orderType == 3)return '预约订单'; |
|
|
|
if(orderType == 4)return '会员卡订单'; |
|
|
|
if(orderType == 5)return '积分商城订单'; |
|
|
|
return '订单' |
|
|
|
} |
|
|
|
}, |
|
|
|
data(){ |
|
|
|
return { |
|
|
|
isShowClassify: false, |
|
|
|
isShowPeriod: false, |
|
|
|
periodInfo: { |
|
|
|
start: '', |
|
|
|
end: '' |
|
|
|
}, |
|
|
|
orderType: 3, // 3->预约,4->会员,5->积分 |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(options){ |
|
|
|
this.orderType = options.order_type; |
|
|
|
this.$nextTick(_=>{ |
|
|
|
uni.setNavigationBarTitle({ |
|
|
|
title: this.titleName |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.getReservatioOrder({}); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
startTimeChange(res){ |
|
|
|
this.periodInfo.start = res.detail.value; |
|
|
|
}, |
|
|
|
endTimeChange(res){ |
|
|
|
this.periodInfo.end = res.detail.value; |
|
|
|
console.log(res) |
|
|
|
}, |
|
|
|
toSearch(){ |
|
|
|
util.routeTo(`/pages/order_search/order_search`,'nT'); |
|
|
|
}, |
|
|
|
showClassify(){ |
|
|
|
this.isShowClassify = true; |
|
|
|
}, |
|
|
|
hideClassify(){ |
|
|
|
this.isShowClassify = false; |
|
|
|
}, |
|
|
|
confirmPeriod(){ |
|
|
|
let { start, end } = this.periodInfo; |
|
|
|
|
|
|
|
if( |
|
|
|
!start || !end || |
|
|
|
new Date(start).getTime()>=new Date(end).getTime() |
|
|
|
)return util.showNone('请选择合理时间！'); |
|
|
|
|
|
|
|
this.hidePeriodModal(); |
|
|
|
}, |
|
|
|
showPeriodModal(){ |
|
|
|
this.isShowPeriod = true; |
|
|
|
}, |
|
|
|
hidePeriodModal(){ |
|
|
|
this.isShowPeriod = false; |
|
|
|
}, |
|
|
|
getReservatioOrder({ |
|
|
|
key='', |
|
|
|
begin='', |
|
|
|
end='', |
|
|
|
status='', |
|
|
|
brand_id='37', |
|
|
|
verify_user_id='160', |
|
|
|
}){ |
|
|
|
servers.get({ |
|
|
|
url: API.reservationOrder, |
|
|
|
data: { |
|
|
|
key, |
|
|
|
begin, |
|
|
|
end, |
|
|
|
status, |
|
|
|
brand_id, |
|
|
|
verify_user_id, |
|
|
|
}, |
|
|
|
failMsg: '加载失败！' |
|
|
|
}) |
|
|
|
.then(res=>{ |
|
|
|
console.log(res); |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(){ |
|
|
|
console.log(reservation_order) |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
@ -148,10 +255,8 @@ |
|
|
|
} |
|
|
|
.oh-ctrl{ |
|
|
|
padding: 24upx 40upx 26upx 24upx; |
|
|
|
picker{ |
|
|
|
margin-bottom: 16upx; |
|
|
|
} |
|
|
|
.oc-period{ |
|
|
|
margin-bottom: 16upx; |
|
|
|
@include centerFlex(flex-start); |
|
|
|
text{ |
|
|
|
line-height: 44upx; |
|
|
|
|
