342 lines
8.0 KiB
Vue
342 lines
8.0 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- 出餐地址 -->
|
|
<div class="box_1 flex-col">
|
|
<div class="box_2 flex-row justify-between">
|
|
<div class="tag_1 flex-col" :class="`theme-Union-Class-${BrandInfor['brand_id']}-2`">
|
|
<span class="text_2" :class="`themeColor-${BrandInfor['brand_id']}`">取餐地址</span>
|
|
</div>
|
|
<span class="text_3">{{InforData['restaurant_name']}}</span>
|
|
</div>
|
|
<span class="text_4">{{InforData['restaurant_address']}}</span>
|
|
</div>
|
|
<!-- 出餐状态 -->
|
|
<view class="order-status">
|
|
<template v-if="InforData['status'] == OrderStatus0">
|
|
<view class="order-status-text">
|
|
未支付
|
|
</view>
|
|
<view class="order-status-hint">
|
|
若您已支付可跳转订单列表查看出餐进度
|
|
</view>
|
|
</template>
|
|
<template v-if="InforData['status'] == OrderStatus3">
|
|
<view class="order-status-text">
|
|
出餐失败
|
|
</view>
|
|
<view class="order-status-hint">
|
|
订单金额会在1个工作日内退回 如有疑问，请联系客服处理
|
|
</view>
|
|
</template>
|
|
<template v-if="InforData['status'] == OrderStatus1">
|
|
<view class="order-status-text">
|
|
正在出取餐码
|
|
</view>
|
|
<view class="order-status-hint">
|
|
您也可点击查看订单，等待取餐码
|
|
</view>
|
|
<view class="order-status-waiting-time">
|
|
请凭取餐码到店取餐
|
|
</view>
|
|
<view class="order-status-waiting-time">
|
|
预计等待时间为1-3分钟,五分钟不出取餐码，请立即联系客服
|
|
</view>
|
|
|
|
<view class="order-status-waiting-time">
|
|
有时订单可能包含多个取餐码，请留意我的订单
|
|
</view>
|
|
</template>
|
|
<template v-if="InforData['status'] == OrderStatus2 || InforData['status'] == OrderStatus4">
|
|
<view class="order-status-text" :class="`themeColor-${BrandInfor['brand_id']}`">
|
|
请至柜台凭取餐码取餐
|
|
</view>
|
|
|
|
<view class="order-status-codetext">
|
|
您的取餐码为
|
|
</view>
|
|
<!-- 您的取餐码为 -->
|
|
<view class="order-status-codelist">
|
|
<view v-for="(item,index) in InforData['codes']" :key="index" class="code">
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
</view>
|
|
<view class="order-btn">
|
|
<view class="order-btn-item btn1" @tap="NavPage()">
|
|
继续点餐
|
|
</view>
|
|
<!-- 未出餐状态点击查看订单跳转订单列表 -->
|
|
<view class="order-btn-item btn2" :class="`theme-Union-Class-${BrandInfor['brand_id']}-1`"
|
|
@tap='OrdetrListPage' v-if="InforData['status'] == OrderStatus0">
|
|
查看订单
|
|
</view>
|
|
<!-- 出餐状态下查看订单跳转订单详情 -->
|
|
<navigator v-else
|
|
:url="`/pages/restaurant/order/order-details/order-details?order=${InforData['order_sn']}`"
|
|
hover-class="navigator-hover">
|
|
<view class="order-btn-item btn2" :class="`theme-Union-Class-${BrandInfor['brand_id']}-1`">
|
|
查看订单
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
GetorderInfoAPI
|
|
} from '@/request/restaurant/index.js';
|
|
import mixin from '@/static/js/mixin/mixin.js'
|
|
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
|
|
// 定时获取
|
|
let tiem = null;
|
|
// import {
|
|
// mapMutations
|
|
// } from 'vuex'
|
|
export default {
|
|
mixins: [mixin, restaurantmixins],
|
|
data() {
|
|
return {
|
|
// 是否返回上一页
|
|
paypage: false,
|
|
InforData: {},
|
|
order_sn: 0,
|
|
};
|
|
},
|
|
onLoad(paramet) {
|
|
this['order_sn'] = paramet['order'];
|
|
if(paramet?.order){
|
|
this['order_sn'] = paramet['order'];
|
|
}else{
|
|
this['order_sn'] = paramet['order_sn'];
|
|
}
|
|
if (paramet?.page) {
|
|
this['paypage'] = paramet['page'];
|
|
};
|
|
console.log('onLoad', this['order_sn'],getApp()['globalData']['parameters'])
|
|
},
|
|
onShow() {
|
|
this.GetorderInfo();
|
|
},
|
|
methods: {
|
|
// ...mapMutations({
|
|
// SETNAVINDEX: 'shopping/SETNAVINDEX'
|
|
// }),
|
|
GetorderInfo() {
|
|
console.log('onShow', this['order_sn'])
|
|
clearInterval(tiem);
|
|
tiem = null;
|
|
GetorderInfoAPI({
|
|
order_sn: this['order_sn']
|
|
}).then(data => {
|
|
// data['status'] = 2;
|
|
this['InforData'] = data['data'];
|
|
console.log('要对比的状态', this['OrderStatus1']);
|
|
console.log('当前订单状态', data['data']['status']);
|
|
if (data['data']['status'] == this['OrderStatus0'] || data['data']['status'] == this['OrderStatus1']) {
|
|
this.GetStatus(false);
|
|
} else {
|
|
this.GetStatus(true);
|
|
console.log(tiem, '状态变更停止倒计时');
|
|
}
|
|
})
|
|
},
|
|
|
|
/**
|
|
* @查看订单
|
|
* */
|
|
OrdetrListPage() {
|
|
this.SETNAVINDEX(1);
|
|
setTimeout(() => {
|
|
uni.redirectTo({
|
|
url: '/pages/restaurant/home/home'
|
|
});
|
|
}, 500)
|
|
},
|
|
/**
|
|
* @回退
|
|
* */
|
|
NavPage() {
|
|
// 点击继续点餐,设置导航索引
|
|
this.SETNAVINDEX(0);
|
|
setTimeout(()=>{
|
|
uni.redirectTo({
|
|
url: '/pages/restaurant/home/home'
|
|
});
|
|
},200)
|
|
},
|
|
|
|
/**
|
|
* @定时获取订单状态
|
|
* */
|
|
GetStatus(clear) {
|
|
clearInterval(tiem);
|
|
tiem = null;
|
|
console.log('进入倒计时方法')
|
|
if (!clear) {
|
|
tiem = setInterval(() => {
|
|
console.log('进入倒计时')
|
|
this.GetorderInfo();
|
|
}, 500)
|
|
}
|
|
|
|
}
|
|
},
|
|
onUnload() {
|
|
// 页面卸载之后将定时器取消
|
|
this.GetStatus(true);
|
|
console.log(tiem, '离开页面停止倒计时');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
width: 100%;
|
|
min-height: 100%;
|
|
background-color: #F6F6F6;
|
|
}
|
|
|
|
// 顶部地址
|
|
.box_1 {
|
|
background-color: white;
|
|
width: 100%;
|
|
height: 130rpx;
|
|
padding: 32rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
.box_2 {
|
|
flex-direction: row;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: $FONTSIZE28;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.tag_1 {
|
|
background-color: rgba(255, 255, 255, 1.000000);
|
|
border: 1px solid rgba(198, 56, 54, 1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 10rpx 6rpx;
|
|
}
|
|
|
|
.text_2 {
|
|
color: rgba(198, 56, 54, 1);
|
|
font-size: 22rpx;
|
|
font-family: PingFang-SC-Medium;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 22rpx;
|
|
}
|
|
|
|
.text_3 {
|
|
color: rgba(51, 51, 51, 1);
|
|
font-size: $FONTSIZE28;
|
|
font-family: PingFang-SC-Bold;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: $FONTSIZE28;
|
|
padding-left: 15rpx;
|
|
}
|
|
|
|
.text_4 {
|
|
width: 320rpx;
|
|
height: 23rpx;
|
|
color: rgba(153, 153, 153, 1);
|
|
font-size: 24rpx;
|
|
font-family: PingFang-SC-Medium;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
line-height: 24rpx;
|
|
}
|
|
|
|
.order-status {
|
|
width: 100%;
|
|
height: 512rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background-color: #ffffff;
|
|
|
|
&-codetext {
|
|
text-align: center;
|
|
color: #333333;
|
|
font-size: $FONTSIZE24;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
&-codelist {
|
|
font-size: 50rpx;
|
|
color: #C63836;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
font-weight: 700;
|
|
|
|
.code {
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
width: 223rpx;
|
|
}
|
|
}
|
|
|
|
&-text {
|
|
color: $THEMECOLOR2;
|
|
font-size: $FONTSIZE34;
|
|
margin-bottom: 24rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
&-hint {
|
|
text-align: center;
|
|
font-size: $FONTSIZE28;
|
|
color: #999999;
|
|
margin-bottom: 72rpx;
|
|
}
|
|
|
|
&-waiting-time {
|
|
text-align: center;
|
|
color: #333333;
|
|
font-size: $FONTSIZE24;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
}
|
|
|
|
.order-btn {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-top: 86rpx;
|
|
|
|
&-item {
|
|
width: 340rpx;
|
|
height: 100rpx;
|
|
border: 1rpx solid;
|
|
font-size: $FONTSIZE28;
|
|
text-align: center;
|
|
line-height: 100rpx;
|
|
}
|
|
|
|
.btn1 {
|
|
border-color: #333333;
|
|
color: #333333;
|
|
}
|
|
|
|
.btn2 {
|
|
background-color: $THEMECOLOR2;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
</style>
|