269 lines
6.7 KiB
Vue
269 lines
6.7 KiB
Vue
<template>
|
||
<view class="b-restaurant-order-status">
|
||
<!-- 订单状态 -->
|
||
<!-- 瑞幸订单状态 -->
|
||
<template v-if="InforData['brand_id'] == 13">
|
||
<view class="rx-Order-status style" v-if="InforData['status'] != 2 && InforData['status'] != 4">
|
||
<image class="rx-Order-status-Img" v-if="InforData['status'] == OrderStatus0"
|
||
:src="qnyurl('Unpaid.png','rx')" mode=""></image>
|
||
<image class="rx-Order-status-Img" v-if="InforData['status'] == OrderStatus1"
|
||
:src="qnyurl('NotServed.png','rx')" mode=""></image>
|
||
<image class="rx-Order-status-Img" v-if="InforData['status'] == OrderStatus5"
|
||
:src="qnyurl('cancel.png','rx')" mode=""></image>
|
||
<!-- 订单状态 -->
|
||
<view class="rx-Order-status-Title">
|
||
{{InforData['status'] | OrderState}}
|
||
</view>
|
||
<!-- 未支付 -->
|
||
<template v-if="InforData['status'] == OrderStatus0">
|
||
<view class="rx-Order-status-time">
|
||
剩余付款时间 {{wait_for}}
|
||
</view>
|
||
<view class="rx-Order-status-pay" :style="BtnStyle" @tap="payments">
|
||
立即支付
|
||
</view>
|
||
<view class="rx-Order-status-wait">
|
||
若您已支付请耐心等待商家结算
|
||
</view>
|
||
</template>
|
||
<!-- 待出餐 -->
|
||
<template v-if="InforData['status'] == OrderStatus1">
|
||
<view class="rx-Order-status-wait">
|
||
下单成功，取餐码生成中，请稍后查看
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<!-- 已经出餐 -->
|
||
<view class="rx-Order-status-take style" v-else>
|
||
<view class="rx-Order-status-take-code">
|
||
<text class="text1">取餐码</text>
|
||
<text class="text2">{{InforData['codes'].join('')}}</text>
|
||
</view>
|
||
<view class="rx-Order-status-take-codeimg">
|
||
<img class="img" :src="InforData['qrcode']" alt="">
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<template v-if="InforData['brand_id'] == 10">
|
||
<view class="xbk-Order-status style" v-if="InforData['status'] != 2 && InforData['status'] != 4">
|
||
<image class="xbk-Order-status-Img" v-if="InforData['status'] == OrderStatus0"
|
||
:src="qnyurl('Unpaid.png','xbk')" mode=""></image>
|
||
<image class="xbk-Order-status-Img" v-if="InforData['status'] == OrderStatus1"
|
||
:src="qnyurl('Unpaid.png','xbk')" mode=""></image>
|
||
<image class="xbk-Order-status-Img" v-if="InforData['status'] == OrderStatus5"
|
||
:src="qnyurl('cancel.png','xbk')" mode=""></image>
|
||
<!-- 订单状态 -->
|
||
<view class="xbk-Order-status-Title">
|
||
{{InforData['status'] | OrderState}}
|
||
</view>
|
||
<!-- 未支付 -->
|
||
<template v-if="InforData['status'] == OrderStatus0">
|
||
<view class="xbk-Order-status-time">
|
||
剩余付款时间 {{wait_for}}
|
||
</view>
|
||
<view class="xbk-Order-status-pay" @tap="payments">
|
||
立即支付
|
||
</view>
|
||
<view class="xbk-Order-status-wait">
|
||
若您已支付请耐心等待商家结算
|
||
</view>
|
||
</template>
|
||
<!-- 待出餐 -->
|
||
<template v-if="InforData['status'] == OrderStatus1">
|
||
<view class="xbk-Order-status-wait">
|
||
排队下单中，请耐心等待
|
||
</view>
|
||
<view class="xbk-Order-status-Tips">
|
||
本页面可关闭，将短信通知取单号，或稍后查询我的订单
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<!-- 已经出餐 -->
|
||
<view class="xbk-Order-status-take style" v-else>
|
||
<view class="codes" v-for="(item,index) in InforData['codes']">
|
||
<view class="codes-img">
|
||
<image class="img" :src="qnyurl('Password.png','xbk')" mode=""></image>
|
||
</view>
|
||
<view class="codes-Password">
|
||
口令{{index+1}}：{{item}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import mixin from '@/static/js/mixin/mixin.js';
|
||
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
|
||
export default {
|
||
mixins: [mixin,restaurantmixins],
|
||
name: "b-restaurant-order-status",
|
||
props: {
|
||
InforData: {
|
||
type: Object,
|
||
default: () => {}
|
||
}
|
||
},
|
||
computed: {
|
||
BtnStyle() {
|
||
let style = {};
|
||
switch (this['InforData']['brand_id']) {
|
||
case 1:
|
||
style['color'] = uni.$u.addUnit('#C63836');
|
||
style['border'] = uni.$u.addUnit('1px solid #DC7473');
|
||
break;
|
||
case 10:
|
||
style['color'] = uni.$u.addUnit('#ffffff');
|
||
style['background-color'] = uni.$u.addUnit('#00AF66');
|
||
// style['border'] = uni.$u.addUnit('1px solid #00AF66');
|
||
break;
|
||
case 13:
|
||
style['color'] = uni.$u.addUnit('#ffffff');
|
||
style['border'] = uni.$u.addUnit('1px solid #4A6FE7');
|
||
break;
|
||
};
|
||
return style;
|
||
}
|
||
},
|
||
mounted() {
|
||
if (this['InforData']['status'] == this['OrderStatus0']) {
|
||
this.tiem(this['InforData']['status'], this['InforData']['createtime'])
|
||
};
|
||
},
|
||
data() {
|
||
return {};
|
||
},
|
||
methods: {
|
||
payments() {
|
||
this.$emit('payments', {
|
||
order_sn: this['InforData']['order_sn'],
|
||
restaurant_id: this['InforData']['restaurant_id']
|
||
});
|
||
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #f8f8f8;
|
||
padding: 32rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.b-restaurant-order-status {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.style {
|
||
border-radius: 20rpx;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
// 瑞幸待出餐/未支付/已取消状态
|
||
.rx-Order-status {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 35rpx 0;
|
||
|
||
&-Img {
|
||
width: 108rpx;
|
||
height: 108rpx;
|
||
}
|
||
|
||
&-Title {
|
||
font-size: 36rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
}
|
||
|
||
&-time {
|
||
color: #666666;
|
||
font-size: 26rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
&-pay {
|
||
width: 220rpx;
|
||
height: 60rpx;
|
||
color: #ffffff;
|
||
font-size: 28rpx;
|
||
background: linear-gradient(-77deg, #4A6FE7, #83ACFF);
|
||
border-radius: 30rpx;
|
||
text-align: center;
|
||
line-height: 60rpx;
|
||
}
|
||
|
||
&-wait {
|
||
background: #F7F8FA;
|
||
border-radius: 28rpx;
|
||
padding: 15rpx 30rpx;
|
||
color: #666666;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
// 星巴克
|
||
&-Tips {
|
||
color: #999999;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
// 瑞幸订单完成状态
|
||
.rx-Order-status-take {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 15rpx 0;
|
||
|
||
&-code {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.text1 {
|
||
color: #000000;
|
||
font-size: 26rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
|
||
.text2 {
|
||
color: #4B6FE7;
|
||
font-size: 52rpx;
|
||
}
|
||
}
|
||
|
||
|
||
&-codeimg {
|
||
width: 234rpx;
|
||
height: 235rpx;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.b-restaurant-order-status {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.style {
|
||
border-radius: 20rpx;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
|
||
|
||
}
|
||
</style>
|