491 lines
11 KiB
Vue
491 lines
11 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 等待取餐 -->
|
||
<view class="content-code-Infor"
|
||
v-if="InforData['status'] == OrderStatus2 || InforData['status'] == OrderStatus4">
|
||
<view class="content-code-Infor-title" :class="`themeColor-${BrandInfor['brand_id']}`">
|
||
请至柜台凭取餐码取餐
|
||
</view>
|
||
<view class="content-code-Infor-text">
|
||
您的取餐码为
|
||
</view>
|
||
<view class="content-code-Infor-codelist">
|
||
<view v-for="(item,index) in InforData['codes']" class="code" :key="index">
|
||
{{item}}
|
||
</view>
|
||
<!-- <view v-for="(item,index) in 6" class="code" :key="index">
|
||
13221
|
||
</view> -->
|
||
|
||
</view>
|
||
<view class="content-code-Infor-number">
|
||
<view class="number" v-if="BrandInfor['brand_id'] == 1" :style="{'--color':'#C63836'}">取餐手机尾号</view>
|
||
<view class="number" v-if="BrandInfor['brand_id'] == 5" :style="{'--color':'#FFBC0D'}">取餐手机尾号</view>
|
||
<view>{{InforData['phone_number']}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 正在出餐 -->
|
||
<view class="content-conduct" v-if="InforData['status'] == OrderStatus1">
|
||
<view class="content-conduct-img">
|
||
<image class="img" :src="qnyurl('wait.png')" mode=""></image>
|
||
<view style="color: #C63836;line-height: 80rpx;">正在出取餐码</view>
|
||
<view>请您注意查收取餐码短信</view>
|
||
</view>
|
||
<view class="content-conduct-wait-text">
|
||
<view style="height: 40rpx;line-height: 40rpx;">
|
||
预计等待时间为2~5分钟
|
||
</view>
|
||
<view style="height: 40rpx;line-height: 40rpx;">
|
||
请凭取餐码到店取餐
|
||
</view>
|
||
<view style="height: 40rpx;line-height: 40rpx;">
|
||
订单可能包含多个取餐码，请留意数量
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 订单关闭 -->
|
||
<view class="close">
|
||
<view class="close-img">
|
||
<template v-if="InforData['status'] == OrderStatus5">
|
||
<image class="img" :src="qnyurl('close.png')" mode=""></image>
|
||
<view style="color: #C63836;line-height: 80rpx;">订单已关闭</view>
|
||
</template>
|
||
|
||
<template v-if="InforData['status'] == OrderStatus3">
|
||
<view style="color: #C63836;line-height: 80rpx;">已退款</view>
|
||
<view class="close-text">订单退款将在1-3个工作日给您原路退回</view>
|
||
<view class="close-text"> 给您带来的不便敬请谅解</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
<view class="orders"
|
||
v-if="InforData['status'] == OrderStatus2 || InforData['status'] == OrderStatus4 || InforData['status'] == OrderStatus1">
|
||
<view class="title">
|
||
餐品详情
|
||
</view>
|
||
<view class="orders-list">
|
||
<template v-for="(item,index) in InforData['goods']">
|
||
<view class="orders-list-item" :key="index">
|
||
<view class="orders-list-item-name">
|
||
{{item['product_name']}}
|
||
</view>
|
||
<view class="orders-list-item-pay">
|
||
￥{{RetainDecimalPoint(item['pay_price'])}}
|
||
</view>
|
||
<view class="orders-list-item-num">
|
||
x{{item['amount']}}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<view class="orders-list-num">
|
||
共{{length}}件
|
||
</view>
|
||
</view>
|
||
<view class="Infor"
|
||
v-if="InforData['status'] == OrderStatus2 || InforData['status'] == OrderStatus4 || InforData['status'] == OrderStatus1">
|
||
<view class="title">
|
||
餐品详情
|
||
</view>
|
||
<view class="Infor-item">
|
||
<view class="Infor-item-label">
|
||
取餐门店
|
||
</view>
|
||
<view class="Infor-item-value">
|
||
{{InforData['restaurant_name']}}
|
||
</view>
|
||
</view>
|
||
<view class="Infor-item">
|
||
<view class="Infor-item-label">
|
||
取餐地址
|
||
</view>
|
||
<view class="Infor-item-value">
|
||
{{InforData['restaurant_address']}}
|
||
</view>
|
||
</view>
|
||
<view class="Infor-item">
|
||
<view class="Infor-item-label">
|
||
下单时间
|
||
</view>
|
||
<view class="Infor-item-value">
|
||
{{InforData['create_time']}}
|
||
</view>
|
||
</view>
|
||
<view class="Infor-item">
|
||
<view class="Infor-item-label">
|
||
订单号
|
||
</view>
|
||
<view class="Infor-item-value">
|
||
{{InforData['order_no']}}
|
||
</view>
|
||
</view>
|
||
<view class="Infor-item">
|
||
<view class="Infor-item-label">
|
||
就餐方式
|
||
</view>
|
||
<view class="Infor-item-value">
|
||
{{InforData['eat_type'] == 'EAT_IN'?'堂食':'外带'}}
|
||
</view>
|
||
</view>
|
||
<view class="Infor-item">
|
||
<view class="Infor-item-label">
|
||
联系方式
|
||
</view>
|
||
<view class="Infor-item-value">
|
||
{{InforData['phone_number']}}
|
||
</view>
|
||
</view>
|
||
<view class="Infor-item">
|
||
<view class="Infor-item-label">
|
||
原价
|
||
</view>
|
||
<view class="Infor-item-value">
|
||
￥{{RetainDecimalPoint(InforData['pay_price'] + InforData['deduction_amount_total'])}}
|
||
</view>
|
||
</view>
|
||
<view class="Infor-item">
|
||
<view class="Infor-item-label">
|
||
补贴卡抵扣
|
||
</view>
|
||
<view class="Infor-item-value">
|
||
￥{{RetainDecimalPoint(InforData['deduction_amount_total'])}}
|
||
</view>
|
||
</view>
|
||
<view class="Infor-item">
|
||
<view class="Infor-item-label">
|
||
实际付款
|
||
</view>
|
||
<view class="Infor-item-value">
|
||
￥{{RetainDecimalPoint(InforData['pay_price'])}}
|
||
</view>
|
||
</view>
|
||
<view class="Infor-item">
|
||
<view class="Infor-item-label">
|
||
预估佣金
|
||
</view>
|
||
<view class="Infor-item-value">
|
||
￥{{InforData['self_commission']}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="Tips">
|
||
<view class="title">
|
||
友情提示
|
||
</view>
|
||
<view class="Tips-text">
|
||
<view class="">
|
||
1.如遇门店售罄，订单会自动为您取消并原路退款，给您带来不便敬请谅解。
|
||
</view>
|
||
<view class="">
|
||
2.如订单取消，退款将会在1个工作日内退回至您的账户；
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn" @tap="location">
|
||
联系客服
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
let tiem = null;
|
||
// 混入
|
||
import mixin from '@/static/js/mixin/mixin.js';
|
||
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
|
||
// 接口请求
|
||
import {
|
||
GetorderInfoAPI,
|
||
} from '@/request/restaurant/index.js';
|
||
// 客服链接
|
||
import {
|
||
KFCSERVICE
|
||
} from '@/static/js/serviceurl.js'
|
||
export default {
|
||
mixins: [mixin,restaurantmixins],
|
||
data() {
|
||
return {
|
||
InforData: {},
|
||
order_sn: 0
|
||
}
|
||
},
|
||
onLoad(parameter) {
|
||
this['order_sn'] = parameter['order'];
|
||
this.GetorderInfo()
|
||
},
|
||
computed: {
|
||
length() {
|
||
try{
|
||
return this['InforData']['goods'].map(item => {
|
||
return item['amount'];
|
||
}).reduce((total, currentValue) => {
|
||
return total + currentValue
|
||
})
|
||
}catch(e){
|
||
//TODO handle the exception
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
GetorderInfo() {
|
||
GetorderInfoAPI({
|
||
order_sn: this['order_sn']
|
||
}).then(data => {
|
||
// data['codes'] = JSON.parse(data['codes'])
|
||
this['InforData'] = data['data'];
|
||
console.log('要对比的状态',this['OrderStatus1'])
|
||
console.log('当前订单状态',data['data']['status'])
|
||
if (data['data']['status'] == this['OrderStatus0'] || data['data']['status'] == this['OrderStatus1']) {
|
||
// tiem不等于null说明已经执行过一次了
|
||
this.GetStatus(false);
|
||
} else {
|
||
this.GetStatus(true);
|
||
console.log(tiem,'状态变更停止倒计时');
|
||
}
|
||
})
|
||
},
|
||
|
||
/**
|
||
* @跳转客服
|
||
* */
|
||
service() {
|
||
uni.openCustomerServiceChat({
|
||
extInfo: {
|
||
url: KFCSERVICE,
|
||
},
|
||
corpId: 'ww4f46b491a045158c',
|
||
|
||
success(e) {
|
||
console.log(e)
|
||
},
|
||
fail(e) {
|
||
console.log(e)
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* @定时获取订单状态
|
||
* */
|
||
GetStatus(clear) {
|
||
console.log('进入倒计时方法');
|
||
clearInterval(tiem);
|
||
tiem = null;
|
||
if(!clear){
|
||
tiem = setInterval(() => {
|
||
console.log('进入倒计时')
|
||
this.GetorderInfo();
|
||
}, 10000)
|
||
}
|
||
|
||
}
|
||
},
|
||
onUnload() {
|
||
// 页面卸载之后将定时器取消
|
||
this.GetStatus(true);
|
||
console.log(tiem,'离开页面停止倒计时');
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content{
|
||
padding: 32rpx 0;
|
||
}
|
||
.title {
|
||
color: #333333;
|
||
font-size: 28rpx;
|
||
line-height: 80rpx;
|
||
}
|
||
|
||
.content-code-Infor {
|
||
padding: 40rpx;
|
||
|
||
&-title {
|
||
color: #C63836;
|
||
font-size: 34rpx;
|
||
text-align: center;
|
||
line-height: 70rpx;
|
||
}
|
||
|
||
&-text {
|
||
color: #333333;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
text-align: center;
|
||
}
|
||
|
||
&-codelist {
|
||
font-size: 50rpx;
|
||
color: #C63836;
|
||
display: flex;
|
||
justify-content:center;
|
||
flex-wrap: wrap;
|
||
// justify-content: flex-start;
|
||
font-weight: 700;
|
||
|
||
.code {
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
width: 223rpx;
|
||
}
|
||
}
|
||
|
||
&-number {
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
margin-top: 32rpx;
|
||
|
||
.number {
|
||
$b-color:var(--color);
|
||
line-height: 70rpx;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 30%;
|
||
left: 0;
|
||
// transform: translateY(-30%);
|
||
width: 230rpx;
|
||
height: 1rpx;
|
||
background-color: $b-color;
|
||
}
|
||
|
||
&:before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 30%;
|
||
right: 0;
|
||
// transform: translateY(-30%);
|
||
width: 230rpx;
|
||
height: 1rpx;
|
||
background-color: $b-color;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.close {
|
||
&-img {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-bottom: 32rpx;
|
||
|
||
.img {
|
||
width: 89rpx;
|
||
height: 89rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
&-text {
|
||
color: #666666;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-conduct {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
&-img {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-bottom: 32rpx;
|
||
|
||
.img {
|
||
width: 66rpx;
|
||
height: 79rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
|
||
&-wait-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
|
||
.orders-list-num {
|
||
width: 100%;
|
||
line-height: 80rpx;
|
||
text-align: right;
|
||
}
|
||
|
||
.orders {
|
||
padding: 32rpx 32rpx 0 32rpx;
|
||
|
||
&-list {
|
||
overflow: hidden;
|
||
transition: all 0.5s;
|
||
border-top: 1rpx solid #cccccc;
|
||
border-bottom: 1rpx solid #cccccc;
|
||
|
||
&-item {
|
||
line-height: 70rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: $FONTSIZE28;
|
||
|
||
&-pay {
|
||
width: 200rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
&-name {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.Infor {
|
||
padding: 0 32rpx 32rpx 32rpx;
|
||
|
||
&-item {
|
||
height: 80rpx;
|
||
font-size: 26rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
&-label {
|
||
max-width: 300rpx;
|
||
min-width: 300rpx;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.Tips {
|
||
padding: 32rpx;
|
||
|
||
&-text {
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
margin: 60rpx auto;
|
||
width: 310rpx;
|
||
height: 80rpx;
|
||
border: 1rpx solid #666666;
|
||
border-radius: 6rpx;
|
||
text-align: center;
|
||
line-height: 80rpx;
|
||
}
|
||
</style>
|