410 lines
12 KiB
Vue
410 lines
12 KiB
Vue
<template>
|
||
<view class="Order-settlement">
|
||
<view class="Order-settlement-left">
|
||
<view class="Order-settlement-left-item">
|
||
原价: ￥{{RetainDecimalPoint(InforData['original_price'])}}
|
||
</view>
|
||
<view class="Order-settlement-left-item">
|
||
消费补贴卡抵扣：￥{{RetainDecimalPoint(InforData['deduction_amount_total'])}}
|
||
</view>
|
||
<view class="Order-settlement-left-item">
|
||
预估佣金：￥{{InforData['self_commission']}}
|
||
</view>
|
||
</view>
|
||
<view class="Order-settlement-btn-price">
|
||
<view class="Order-settlement-btn-price-pay-price">
|
||
<text class="text1">{{InforData['status'] | OrderStateText}}：</text>
|
||
<text class="text2" style="color:#DE2F2C">￥{{RetainDecimalPoint(InforData['pay_price'])}}</text>
|
||
</view>
|
||
<!-- 待支付 -->
|
||
<view class="Order-settlement-btn-price-operate" v-if="InforData['status'] == OrderStatus0">
|
||
<view class="btn btn1" @tap.stop="cancel(InforData['order_sn'],index)">
|
||
取消订单
|
||
</view>
|
||
<view class="btn btn2" :style="[orderStyle]" @tap.stop="payment(InforData['order_sn'],index)">
|
||
去支付
|
||
</view>
|
||
</view>
|
||
<!-- 已出餐 -->
|
||
<view class="Order-settlement-btn-price-operate" v-if="InforData['status'] == OrderStatus2">
|
||
<!-- 瑞幸-已出参订单按钮 -->
|
||
<template v-if="Brand_RX">
|
||
<view class="btn btn1" @tap.stop="location">
|
||
联系客服
|
||
</view>
|
||
<!-- <navigator hover-class="none" -->
|
||
<!-- :url="`/pages/restaurant/order/order-details/rx-orders-details?order=${InforData['order_sn']}`"> -->
|
||
<view class="btn btn2" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['RX_brand_id'])">
|
||
查看取餐码
|
||
</view>
|
||
<!-- </navigator> -->
|
||
</template>
|
||
|
||
<!-- 肯德基-已出参订单按钮 -->
|
||
<template v-if="Brand_KFC">
|
||
<!-- <navigator hover-class="none"
|
||
:url="`/pages/restaurant/order/order-details/order-details?order=${InforData['order_sn']}`"> -->
|
||
<view class="btn btn1" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['KFC_brand_id'])">
|
||
查看取餐码
|
||
</view>
|
||
<!-- </navigator> -->
|
||
</template>
|
||
|
||
<!-- 麦当劳-已出参订单按钮 -->
|
||
<template v-if="Brand_MDL">
|
||
<!-- <navigator hover-class="none" -->
|
||
<!-- :url="`/pages/restaurant/order/order-details/xbk-orders-details?order=${InforData['order_sn']}`"> -->
|
||
<view class="btn btn1" :class="`theme-Union-Class-${BrandInfor['brand_id']}-1`" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['XBK_brand_id'])">
|
||
查看取餐码
|
||
</view>
|
||
<!-- </navigator> -->
|
||
</template>
|
||
|
||
<!-- 星巴克-已出参订单按钮 -->
|
||
<template v-if="Brand_XBK">
|
||
<!-- <navigator hover-class="none" -->
|
||
<!-- :url="`/pages/restaurant/order/order-details/xbk-orders-details?order=${InforData['order_sn']}`"> -->
|
||
<view class="btn btn1" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['XBK_brand_id'])">
|
||
取餐口令
|
||
</view>
|
||
<!-- </navigator> -->
|
||
</template>
|
||
</view>
|
||
|
||
<!-- 已出餐（部分退款） -->
|
||
<view class="Order-settlement-btn-price-operate" v-if="InforData['status'] == OrderStatus4">
|
||
|
||
<!-- 瑞幸-已出参（部分退款）订单按钮 -->
|
||
<template v-if="Brand_RX">
|
||
<!-- <navigator hover-class="none" -->
|
||
<!-- :url="`/pages/restaurant/order/order-details/rx-orders-details?order=${InforData['order_sn']}`"> -->
|
||
<view class="btn btn1" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['RX_brand_id'])">
|
||
查看取餐码
|
||
</view>
|
||
<!-- </navigator> -->
|
||
</template>
|
||
|
||
<!-- 肯德基-已出参（部分退款）订单按钮 -->
|
||
<template v-if="Brand_KFC">
|
||
<!-- <navigator hover-class="none" -->
|
||
<!-- :url="`/pages/restaurant/order/order-details/order-details?order=${InforData['order_sn']}`"> -->
|
||
<view class="btn btn1" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['KFC_brand_id'])">
|
||
查看取餐码
|
||
</view>
|
||
<!-- </navigator> -->
|
||
</template>
|
||
|
||
<!-- 麦当劳-已出参订单按钮 -->
|
||
<template v-if="Brand_MDL">
|
||
<!-- <navigator hover-class="none" -->
|
||
<!-- :url="`/pages/restaurant/order/order-details/xbk-orders-details?order=${InforData['order_sn']}`"> -->
|
||
<view class="btn btn1" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['XBK_brand_id'])">
|
||
查看取餐码
|
||
</view>
|
||
<!-- </navigator> -->
|
||
</template>
|
||
|
||
<!-- 星巴克-已出参（部分退款）订单按钮 -->
|
||
<template v-if="Brand_XBK">
|
||
<!-- <navigator hover-class="none" -->
|
||
<!-- :url="`/pages/restaurant/order/order-details/xbk-orders-details?order=${InforData['order_sn']}`"> -->
|
||
<view class="btn btn1" :style="[orderStyle]" @tap.stop="OrderDetails(shopid['XBK_brand_id'])">
|
||
查看口令
|
||
</view>
|
||
<!-- </navigator> -->
|
||
</template>
|
||
</view>
|
||
|
||
<!-- 待出餐/已退款（订单失败就会退款） -->
|
||
<view class="Order-settlement-btn-price-operate"
|
||
v-if="InforData['status'] == OrderStatus1 || InforData['status'] == OrderStatus3">
|
||
<!-- 瑞幸-待出餐/已退款订单按钮 -->
|
||
<template v-if="Brand_RX">
|
||
<view class="btn btn1" @tap.stop="location">
|
||
联系客服
|
||
</view>
|
||
<!-- <navigator hover-class="none" -->
|
||
<!-- :url="`/pages/restaurant/order/order-details/rx-orders-details?order=${InforData['order_sn']}`"> -->
|
||
<view class="btn btn1 btn2" @tap.stop="OrderDetails(shopid['RX_brand_id'])">
|
||
查看订单
|
||
</view>
|
||
<!-- </navigator> -->
|
||
</template>
|
||
|
||
<!-- 肯德基-待出餐/已退款订单按钮 -->
|
||
<template v-if="Brand_KFC">
|
||
<view class="btn btn1" @tap.stop="location">
|
||
联系客服
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 麦当劳-待出餐/已退款订单按钮 -->
|
||
<template v-if="Brand_MDL">
|
||
<view class="btn btn1" :class="`theme-Union-Class-${BrandInfor['brand_id']}-1`" @tap.stop="location">
|
||
联系客服
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 星巴克-待出餐/已退款订单按钮 -->
|
||
<template v-if="Brand_XBK">
|
||
<!-- <navigator hover-class="none" -->
|
||
<!-- :url="`/pages/restaurant/order/order-details/xbk-orders-details?order=${InforData['order_sn']}`"> -->
|
||
<view class="btn btn1 btn2" @tap.stop="OrderDetails(shopid['XBK_brand_id'])">
|
||
查看订单
|
||
</view>
|
||
<!-- </navigator> -->
|
||
</template>
|
||
</view>
|
||
|
||
<!-- 已取消 -->
|
||
<view class="Order-settlement-btn-price-operate" v-if="InforData['status'] == OrderStatus5">
|
||
<!-- 瑞幸-已取消订单按钮 -->
|
||
<template v-if="Brand_RX">
|
||
<view class="btn btn1" @tap.stop="location">
|
||
联系客服
|
||
</view>
|
||
<view class="btn btn1 btn2" @tap.stop="OrderReorder">
|
||
再来一单
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 肯德基-已取消订单按钮 -->
|
||
<template v-if="Brand_KFC">
|
||
<view class="btn btn1 btn2" @tap.stop="OrderReorder">
|
||
重新下单
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 肯德基-已取消订单按钮 -->
|
||
<template v-if="Brand_MDL">
|
||
<view class="btn btn1 btn2" :class="`theme-Union-Class-${BrandInfor['brand_id']}-1`" @tap.stop="OrderReorder">
|
||
重新下单
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 星巴克-已取消订单按钮 -->
|
||
<template v-if="Brand_XBK">
|
||
<view class="btn btn1" @tap.stop="location">
|
||
联系客服
|
||
</view>
|
||
<view class="btn btn1 btn2" @tap.stop="OrderReorder">
|
||
重新下单
|
||
</view>
|
||
</template>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
RXSERVICE
|
||
} from '@/static/js/serviceurl.js'
|
||
import mixin from '@/static/js/mixin/mixin.js';
|
||
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
|
||
import {
|
||
mapGetters,
|
||
} from 'vuex'
|
||
export default {
|
||
name: 'b-order-item-settlement',
|
||
mixins: [mixin, restaurantmixins],
|
||
// 取消订单,再次支付,重新下单
|
||
inject: ["cancel", "Reorder", "payments"],
|
||
props: {
|
||
index: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
infor: {
|
||
type: Object,
|
||
default: () => {}
|
||
}
|
||
},
|
||
computed: {
|
||
|
||
InforData() {
|
||
return this['infor']
|
||
},
|
||
|
||
// 各品牌主体色不一样
|
||
orderStyle() {
|
||
let style = {};
|
||
switch (this['BrandInfor']['brand_id']) {
|
||
case 1:
|
||
style['color'] = uni.$u.addUnit('#C63836');
|
||
style['border'] = uni.$u.addUnit('1px solid #DC7473');
|
||
break;
|
||
case 5:
|
||
style['color'] = uni.$u.addUnit('#000000');
|
||
style['background-color'] = uni.$u.addUnit('#FFBC0D');
|
||
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('#4A6FE7');
|
||
style['border'] = uni.$u.addUnit('1px solid #4A6FE7');
|
||
break;
|
||
};
|
||
return style;
|
||
},
|
||
|
||
Brand_RX() {
|
||
return this['BrandInfor']['brand_id'] == 13;
|
||
},
|
||
|
||
Brand_KFC() {
|
||
return this['BrandInfor']['brand_id'] == 1;
|
||
},
|
||
|
||
Brand_XBK() {
|
||
return this['BrandInfor']['brand_id'] == 10;
|
||
},
|
||
Brand_MDL() {
|
||
return this['BrandInfor']['brand_id'] == 5;
|
||
},
|
||
Brand_DYP() {
|
||
return this['BrandInfor']['brand_id'] == 19;
|
||
}
|
||
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
// 重新下单前数据重构
|
||
OrderReorder() {
|
||
let arr = this['InforData']['goods'].map(item => {
|
||
console.log(this['InforData'],'InforData')
|
||
item['restaurant_id'] = this['InforData']['restaurant_id'];
|
||
// 以下数据用于重新下单时保存当前店铺信息
|
||
item['restaurant_address'] = this['InforData']['restaurant_address'];
|
||
item['restaurant_name'] = this['InforData']['restaurant_name'];
|
||
item['latitude'] = this['InforData']['lat'];
|
||
item['longitude'] = this['InforData']['lng'];
|
||
// 因为前端记录商品数量使用的是num,而重新加入购物车时后台代表数量的则是amount
|
||
item['num'] = item['amount'];
|
||
item['pay'] = item['original_price'] / item['amount'];
|
||
// item['pay_price'] = item['original_price'];
|
||
return item;
|
||
});
|
||
this.Reorder(arr);
|
||
},
|
||
|
||
|
||
|
||
OrderDetails(type) {
|
||
let url;
|
||
switch (type) {
|
||
case this['shopid']['KFC_brand_id']:
|
||
url =
|
||
`/pages/restaurant/order/order-details/order-details?order=${this['InforData']['order_sn']}`;
|
||
break;
|
||
case this['shopid']['XBK_brand_id']:
|
||
url =
|
||
`/pages/restaurant/order/order-details/xbk-orders-details?order=${this['InforData']['order_sn']}`;
|
||
break;
|
||
case this['shopid']['RX_brand_id']:
|
||
url =
|
||
`/pages/restaurant/order/order-details/rx-orders-details?order=${this['InforData']['order_sn']}`;
|
||
break;
|
||
};
|
||
uni.navigateTo({url})
|
||
},
|
||
/**
|
||
* @跳转客服
|
||
* */
|
||
service() {
|
||
uni.openCustomerServiceChat({
|
||
extInfo: {
|
||
url: RXSERVICE,
|
||
},
|
||
corpId: 'ww4f46b491a045158c',
|
||
|
||
success(e) {
|
||
console.log(e)
|
||
},
|
||
fail(e) {
|
||
console.log(e)
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.Order-settlement {
|
||
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: $FONTSIZE22;
|
||
text-align: center;
|
||
// line-height: 58rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.btn1 {
|
||
border: 2rpx solid #E3E3E3;
|
||
border-radius: 50rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.btn2 {
|
||
// border: 2rpx solid #C63836;
|
||
border-radius: 50rpx;
|
||
// color: #C63836;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|