391 lines
8.2 KiB
Vue
391 lines
8.2 KiB
Vue
<template>
|
|
<view class="b-orders" @tap.stop="orderdetails">
|
|
<!-- 肯德基门店信息 -->
|
|
<view class="b-orders-header" v-if="item['brand_id'] == 1">
|
|
<view class="b-orders-header-label">
|
|
门店
|
|
</view>
|
|
<view class="b-orders-header-name">
|
|
{{item['restaurant_name']}}
|
|
</view>
|
|
<!-- 待出餐 -->
|
|
<view class="b-orders-header-state-70B452">
|
|
<text v-if="InforData['status'] == OrderStatus0">{{wait_for}}</text>{{InforData['status'] | OrderState}}
|
|
</view>
|
|
</view>
|
|
<!-- 麦当劳门店信息 -->
|
|
<view class="b-orders-header-Mdl" v-if="item['brand_id'] == 5">
|
|
<view class="b-orders-header-Mdl-label">
|
|
门店
|
|
</view>
|
|
<view class="b-orders-header-Mdl-name">
|
|
{{item['restaurant_name']}}
|
|
</view>
|
|
<!-- 待出餐 -->
|
|
<view class="b-orders-header-Mdl-state-MDL-70B452">
|
|
<text class="tiem" v-if="InforData['status'] == OrderStatus0">{{wait_for}}</text>
|
|
<text>{{InforData['status'] | OrderState}}</text>
|
|
</view>
|
|
</view>
|
|
<!-- 订单信息 -->
|
|
<view class="b-orders-infor">
|
|
<view class="b-orders-infor-item">
|
|
<view class="b-orders-infor-item-label">
|
|
订单编号:
|
|
</view>
|
|
<view class="b-orders-infor-item-value">
|
|
{{item['order_no']?item['order_no']:item['order_sn']}}
|
|
</view>
|
|
</view>
|
|
<view class="b-orders-infor-item">
|
|
<view class="b-orders-infor-item-label">
|
|
下单时间:
|
|
</view>
|
|
<view class="b-orders-infor-item-value">
|
|
{{item['create_time']}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="b-orders-list" :style="{height: item['goods']['length']>3?height:'auto'}">
|
|
<template v-for="(item,index) in item['goods']">
|
|
<view class="b-orders-list-item" :key="index">
|
|
<view class="b-orders-list-item-name">
|
|
{{item['product_name']}}
|
|
</view>
|
|
<view class="b-orders-list-item-num">
|
|
x{{item['amount']}}
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
<!-- 展开 -->
|
|
<view class="b-orders-expand" v-if="item['goods'] && item['goods']['length']>3" @tap.stop="show = !show">
|
|
{{ShowText}}
|
|
</view>
|
|
|
|
<!-- 订单底部结算组件 -->
|
|
<b-order-item-settlement :infor="item" :index="index"></b-order-item-settlement>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// 客服链接
|
|
import {
|
|
KFCSERVICE
|
|
} from '@/static/js/serviceurl.js';
|
|
// 订单底部结算组件
|
|
import bOrderItemSettlement from './b-order-item-settlement.vue';
|
|
import mixin from '@/static/js/mixin/mixin.js';
|
|
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
|
|
export default {
|
|
mixins: [mixin,restaurantmixins],
|
|
name: "b-orders",
|
|
components: {
|
|
bOrderItemSettlement
|
|
},
|
|
props: {
|
|
item: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
index: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
height: '200rpx',
|
|
show: false,
|
|
// countDown:null,
|
|
// wait_for:''
|
|
};
|
|
},
|
|
watch: {
|
|
show(v) {
|
|
if (v) {
|
|
this['height'] = 'auto';
|
|
} else {
|
|
this['height'] = '200rpx';
|
|
}
|
|
},
|
|
|
|
// 状态改变再次调用
|
|
status(v){
|
|
if(v != 0){
|
|
clearTimeout(this['countDown']);
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
ShowText() {
|
|
return this['show'] ? '收起' : '展开';
|
|
},
|
|
|
|
InforData() {
|
|
return this['item'];
|
|
},
|
|
|
|
order_no() {
|
|
return this['InforData']['order_no'] ? this['InforData']['order_no'] : this['InforData']['order_sn']
|
|
},
|
|
status(){
|
|
return this['InforData']['status']
|
|
}
|
|
},
|
|
mounted() {
|
|
this.tiem(this['InforData']['status'], this['InforData']['createtime'])
|
|
},
|
|
methods: {
|
|
orderdetails() {
|
|
if (this['InforData']['status'] == 2 || this['InforData']['status'] == 5 || this['InforData']['status'] ==
|
|
1) {
|
|
uni.navigateTo({
|
|
url: `/pages/restaurant/order/order-details/order-details?order=${this['item']['order_sn']}`
|
|
})
|
|
}
|
|
|
|
},
|
|
|
|
// 取消订单
|
|
cancel(order_sn) {
|
|
this.$emit('cancel', order_sn, this['index']);
|
|
},
|
|
|
|
// 重新支付
|
|
payment(order_sn) {
|
|
this.$emit('payment', order_sn, this['item']['restaurant_id']);
|
|
},
|
|
|
|
// 重新下单
|
|
Reorder() {
|
|
let arr = this['item']['goods'].map(item => {
|
|
item['restaurant_id'] = this['item']['restaurant_id'];
|
|
// 以下数据用于重新下单时保存当前店铺信息
|
|
item['restaurant_address'] = this['item']['restaurant_address'];
|
|
item['restaurant_name'] = this['item']['restaurant_name'];
|
|
item['latitude'] = this['item']['lat'];
|
|
item['longitude'] = this['item']['lng'];
|
|
return item
|
|
})
|
|
// console.log(arr, 'arr');
|
|
this.$emit('Reorder', arr);
|
|
},
|
|
|
|
/**
|
|
* @跳转客服
|
|
* */
|
|
service() {
|
|
uni.openCustomerServiceChat({
|
|
extInfo: {
|
|
url: KFCSERVICE,
|
|
},
|
|
corpId: 'ww4f46b491a045158c',
|
|
|
|
success(e) {
|
|
// console.log(e)
|
|
},
|
|
fail(e) {
|
|
// console.log(e)
|
|
}
|
|
})
|
|
},
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.b-orders {
|
|
width: 100%;
|
|
// min-height: 637rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0 0 14rpx 1rpx rgba(174, 174, 174, 0.3300);
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
margin-top: 20rpx;
|
|
&-header-Mdl{
|
|
background: #FFFAEC !important;
|
|
}
|
|
&-header,&-header-Mdl {
|
|
// height: 70rpx;
|
|
background: #F6F6F6;
|
|
padding: 21rpx 30rpx;
|
|
font-size: $FONTSIZE28;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
|
|
&-label {
|
|
background: #E64946;
|
|
border-radius: 2rpx;
|
|
color: #FFFFFF;
|
|
margin-right: 15rpx;
|
|
padding: 2rpx 10rpx;
|
|
}
|
|
|
|
&-name {
|
|
color: #333333;
|
|
flex: 1;
|
|
}
|
|
|
|
&-state-E64946 {
|
|
color: #E64946;
|
|
}
|
|
|
|
&-state-999999 {
|
|
color: #999999;
|
|
}
|
|
|
|
&-state-70B452 {
|
|
color: #70B452;
|
|
}
|
|
|
|
&-state-MDL-70B452 {
|
|
.tiem{
|
|
color: #DE2F2C;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-infor {
|
|
font-size: $FONTSIZE28;
|
|
color: #666666;
|
|
padding: 26rpx 32rpx;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 90%;
|
|
bottom: 0;
|
|
left: 50%;
|
|
height: 1rpx;
|
|
background-color: #E3E3E3;
|
|
transform: scale(0.5, 0.5);
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
&-item {
|
|
margin-bottom: 23rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
&-label {
|
|
max-width: 170rpx;
|
|
min-width: 170rpx;
|
|
}
|
|
|
|
&-value {
|
|
text-align: right;
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
&-list {
|
|
padding: 32rpx 32rpx 0 32rpx;
|
|
|
|
overflow: hidden;
|
|
transition: all 0.5s;
|
|
|
|
&-item {
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: $FONTSIZE28;
|
|
|
|
&-name {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-expand {
|
|
width: 100%;
|
|
line-height: 80rpx;
|
|
font-size: $FONTSIZE24;
|
|
text-align: center;
|
|
position: relative;
|
|
|
|
// border-bottom: 1rpx solid #E3E3E3;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 90%;
|
|
bottom: 0;
|
|
left: 50%;
|
|
height: 1rpx;
|
|
background-color: #E3E3E3;
|
|
transform: scale(0.5, 0.5);
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
&-operate {
|
|
padding: 0 32rpx 21rpx 32rpx;
|
|
margin-top: 48rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
&-left {
|
|
color: #333333;
|
|
font-size: $FONTSIZE24;
|
|
|
|
&-item:nth-of-type(1) {
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
&-item:nth-of-type(2) {
|
|
margin-bottom: 12rpx;
|
|
}
|
|
}
|
|
|
|
&-btn-price {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
&-pay-price {
|
|
.text1 {
|
|
color: #333333;
|
|
font-size: $FONTSIZE24;
|
|
}
|
|
|
|
.text2 {
|
|
color: #CE211F;
|
|
font-size: $FONTSIZE36;
|
|
}
|
|
}
|
|
|
|
&-operate {
|
|
display: flex;
|
|
|
|
.btn {
|
|
width: 160rpx;
|
|
height: 58rpx;
|
|
font-size: $FONTSIZE28;
|
|
text-align: center;
|
|
line-height: 58rpx;
|
|
}
|
|
|
|
.btn1 {
|
|
border: 2rpx solid #E3E3E3;
|
|
border-radius: 50rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.btn2 {
|
|
border: 2rpx solid #C63836;
|
|
border-radius: 50rpx;
|
|
color: #C63836;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|