415 lines
9.2 KiB
Vue
415 lines
9.2 KiB
Vue
<template>
|
||
<view class="b-orders" @tap.stop="orderdetails">
|
||
<!-- 门店信息 -->
|
||
<view class="b-orders-header">
|
||
<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-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 class="b-orders-operate">
|
||
<view class="b-orders-operate-left">
|
||
<view class="b-orders-operate-left-item">
|
||
原价: ￥{{RetainDecimalPoint(item['original_price'])}}
|
||
</view>
|
||
<view class="b-orders-operate-left-item">
|
||
消费补贴卡抵扣：￥{{RetainDecimalPoint(item['deduction_amount_total'])}}
|
||
</view>
|
||
<view class="b-orders-operate-left-item">
|
||
预估佣金：￥{{RetainDecimalPoint(item['self_commission'])}}
|
||
</view>
|
||
</view>
|
||
<view class="b-orders-operate-btn-price">
|
||
|
||
<view class="b-orders-operate-btn-price-pay-price">
|
||
<text class="text1">{{InforData['status'] | orderstate}}：</text>
|
||
<text class="text2">￥{{RetainDecimalPoint(item['pay_price'])}}</text>
|
||
</view>
|
||
待支付
|
||
<view class="b-orders-operate-btn-price-operate" v-if="InforData['status'] == OrderStatus0">
|
||
<view class="btn btn1" @tap.stop="cancel(item['order_sn'])">
|
||
取消订单
|
||
</view>
|
||
<view class="btn btn2" @tap.stop="payment(item['order_sn'])">
|
||
去支付
|
||
</view>
|
||
</view>
|
||
已关闭
|
||
<view class="b-orders-operate-btn-price-operate" v-if="InforData['status'] == OrderStatus5" @tap.stop="Reorder">
|
||
<view class="btn btn1">
|
||
重新下单
|
||
</view>
|
||
</view>
|
||
待出餐/已退款
|
||
<view class="b-orders-operate-btn-price-operate" @tap.stop="service" v-if="InforData['status'] == OrderStatus1 || InforData['status'] == OrderStatus3">
|
||
<view class="btn btn1">
|
||
联系客服
|
||
</view>
|
||
</view>
|
||
已出餐/已出参（部分退款）
|
||
<view class="b-orders-operate-btn-price-operate" v-if="InforData['status'] == OrderStatus2 || InforData['status'] == OrderStatus4" @tap.stop="orderdetails">
|
||
<view class="btn btn1">
|
||
查看取餐码
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// 客服链接
|
||
import {
|
||
KFCSERVICE
|
||
} from '@/static/js/serviceurl.js';
|
||
// 订单底部结算组件
|
||
import bOrderItemSettlement from './b-order-item-settlement.vue';
|
||
import mixin from '@/static/js/mixin.js';
|
||
export default {
|
||
mixins: [mixin],
|
||
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 {
|
||
// 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;
|
||
}
|
||
}
|
||
|
||
&-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>
|