test_service d3170b4d1c 1
2023-12-01 15:43:29 +08:00

680 lines
24 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view>
<view class="hm-header-xian"></view>
<view v-if="order" class="hm-p-lr-20">
<!-- 订单状态 -->
<view class="hm-p-lr-20 hm-bg-f hm-br-8 hm-m-t-20">
<view class="hm-p-tb-20 hm-text-center">
<view v-if="order.order_mode.value == 10 && order.table_id > 0">
餐桌<text class="hm-col-warning hm-font-b hm-m-l-10">{{order.table.table_name}}</text>
</view>
<view v-else>
取餐号<text class="hm-col-warning hm-font-b hm-m-l-10">{{order.row_no}}</text>
</view>
<view v-if="order.flavor" class="hm-p-t-20 hm-line-1 hm-font-22 hm-col-tips">
{{order.flavor}}
</view>
<view v-if="order.message" class="hm-p-t-20 hm-line-1 hm-font-22 hm-col-tips">
{{order.message}}
</view>
</view>
<!-- 订单状态 -->
<view class="hm-p-tb-20 hm-text-center hm-border-t hm-col-content">
<u-steps :current="steps_index" activeColor="#ff9900" dot>
<block v-if="order.order_status.value == 10 || order.order_status.value == 30">
<u-steps-item :title="steps[0][0].title" :desc="steps[0][0].desc"></u-steps-item>
<u-steps-item :title="steps[0][1].title" :desc="steps[0][1].desc"></u-steps-item>
<u-steps-item :title="steps[0][2].title" :desc="steps[0][2].desc"></u-steps-item>
<u-steps-item :title="steps[0][3].title" :desc="steps[0][3].desc"></u-steps-item>
<u-steps-item :title="steps[0][4].title" :desc="steps[0][4].desc"></u-steps-item>
<u-steps-item :title="steps[0][5].title" :desc="steps[0][5].desc"></u-steps-item>
</block>
<block v-if="order.order_status.value == 20">
<u-steps-item :title="steps[1][0].title" :desc="steps[1][0].desc"></u-steps-item>
<u-steps-item :title="steps[1][1].title" :desc="steps[1][1].desc"></u-steps-item>
</block>
<block v-if="order.order_status.value == 40">
<u-steps-item :title="steps[2][0].title" :desc="steps[2][0].desc"></u-steps-item>
<u-steps-item :title="steps[2][1].title" :desc="steps[2][1].desc"></u-steps-item>
<u-steps-item :title="steps[2][2].title" :desc="steps[2][2].desc"></u-steps-item>
</block>
</u-steps>
</view>
<!-- 订单操作 -->
<view class="hm-text-center hm-border-t hm-col-content">
<block v-if="order.order_status.value == 10">
<view v-if="order.shop_status.value == 10" class="hm-dis-block-inline hm-p-tb-20">
<u-button @click="cancelOrder()" text="取消订单">
</u-button>
</view>
<view v-if="order.pay_status.value!=20" class="hm-m-l-20 hm-dis-block-inline hm-p-tb-20">
<u-button @click="payOrder()" type="warning" text="立即付款">
</u-button>
</view>
<view
v-if="order.pay_status.value==20 && order.receipt_status.value==10"
class="hm-m-l-20 hm-dis-block-inline hm-p-tb-20">
<u-button @click="goTo('order/refund?id='+order.order_id)" type="error" text="我要退单"></u-button>
</view>
<view
v-if="applet.other.is_calling == 1 && order.order_mode.value == 10 && order.table_id > 0 && order.pay_status.value > 10 && order.shop_status.value == 20"
class="hm-m-l-20 hm-dis-block-inline hm-p-tb-20">
<u-button @click="spk_box = true" type="success"
text="呼叫服务"></u-button>
</view>
<view
v-if="order.pay_status.value==20 && order.delivery_status.value==30 && order.receipt_status.value == 10"
class="hm-m-l-20 hm-dis-block-inline hm-p-tb-20">
<u-button @click="receipt()" type="warning"
text="确认完成"></u-button>
</view>
</block>
<view v-if="order.order_status.value==30 && order.is_cmt.value==0"
class="hm-dis-block-inline hm-p-tb-20">
<u-button @click="goTo('order/comment?id='+order.order_id)" type="warning" text="我要评价"></u-button>
</view>
</view>
<!-- 外卖配送员 -->
<view v-if="order.order_mode.value==20 && order.delivery && order.delivery.delivery_status.value > 10" @click="phone(order.delivery.phone)" class="u-p-tb-20 u-h-80 u-b-t">
<image style="width: 80rpx;height: 80rpx;" class="hm-br-b50 hm-fl hm-m-r-10" src="/static/delivery.jpg"></image>
<view class="hm-dis-block-inline">
<view class="hm-p-l-10">{{order.delivery.linkman}}<text class="hm-m-l-10 hm-col-tips">({{order.delivery.company.text ? order.delivery.company.text:'--'}})</text></view>
<view class="hm-p-t-10">
<u-rate value="5" activeColor="#FF9900" inactiveColor="#999" allowHalf></u-rate>
</view>
</view>
<view class="hm-dis-block-inline hm-fr hm-m-t-20">
<u-icon name="phone-fill" size="30" color="#444"></u-icon>
</view>
</view>
<view class="hm-p-tb-20 hm-border-t">
<text v-if="order.order_mode.value==10">起菜时间</text>
<text v-if="order.order_mode.value==20">起送时间</text>
<text v-if="order.order_mode.value==30">取餐时间</text>
<text class="hm-m-l-50 hm-col-tips">
{{order.arrive_time.text}}
</text>
</view>
<!-- 收货信息 -->
<block v-if="order.order_mode.value==20">
<view class="hm-p-tb-20 hm-border-t">
<view class="hm-dis-block-inline hm-fl">配送地址</view>
<view class="hm-dis-block-inline hm-m-l-50">
<view class="hm-col-main">
{{order.address.name}}<text class="hm-m-l-10">({{order.address.gender.text}})</text><text class="hm-m-l-20">{{order.address.phone}}</text></view>
<view class="hm-p-t-10 hm-col-tips">
{{order.address.detail}}
</view>
</view>
</view>
</block>
</view>
<!-- 商品与价格 -->
<view class="hm-p-lr-20 hm-bg-f hm-br-8 hm-m-t-20">
<!-- 商品列表 -->
<view class="hm-p-tb-20 hm-border-b" style="height: 120rpx;" v-for="(item, index) in order.goods" :key="index">
<image style="height: 120rpx;width:120rpx" class="hm-fl hm-br-8 hm-m-r-20" :src="item.image.url"></image>
<view class="hm-m-t-10 hm-line-1">{{item.goods_name}}</view>
<view v-if="item.goods_attr" class="fhm-ont-28 hm-col-tips">{{item.goods_attr}}</view>
<view class="hm-font-28">
<text class="hm-col-error hm-m-r-10">¥{{item.goods_price}}</text>
<text class="hm-col-content">×{{item.total_num}}</text>
<view v-if="item.refund_num>0" class="hm-dis-block-inline hm-m-l-50">
<text class="hm-col-error hm-m-r-10">退餐</text>
<text class="hm-col-content">×{{item.refund_num}}</text>
</view>
</view>
</view>
<!-- 订单费用 -->
<view class="hm-p-tb-20 hm-border-b">
实付金额
<text class="hm-col-error hm-fr">¥{{order.pay_price}}</text>
</view>
<view v-if="order.delivery_price>0" class="hm-p-tb-20 hm-border-b">
配送费用
<text class="hm-col-error hm-fr">+¥{{order.delivery_price}}</text>
</view>
<view v-if="order.pack_price>0" class="hm-p-tb-20 hm-border-b">
包装费用
<text class="hm-col-error hm-fr">+¥{{order.pack_price}}</text>
</view>
<view class="hm-p-tb-20 hm-border-b">
优惠金额
<text class="hm-col-error hm-fr">-¥{{order.activity_price}}</text>
</view>
<view v-if="order.order_status.value == 40" class="hm-p-tb-20 hm-border-b">
退款金额
<text class="hm-col-error hm-fr">¥{{order.refund_price}}</text>
</view>
<!-- 订单总计 -->
<view class="hm-p-tb-20 hm-border-b hm-text-right">
共{{total_num}}件商品,合计:<text class="hm-col-error">¥{{order.total_price}}</text>
</view>
<view class="hm-p-tb-20 hm-text-center">
<view class="hm-dis-block-inline">
<u-button @click="phone(order.shop.phone)" icon="phone-fill" text="联系商家"></u-button>
</view>
</view>
</view>
<!-- 订单信息 -->
<view class="hm-p-lr-20 hm-bg-f hm-br-8 hm-m-t-20">
<view class="hm-p-tb-20">
订单号码
<text class="hm-col-tips hm-m-l-50">{{order.order_no}}</text>
<view class="hm-dis-block-inline hm-fr">
<u-button @click="copy(order.order_no)" :customStyle="{padding:'0rpx 30rpx',marginTop:'-8rpx'}" size="small" text="复制"></u-button>
</view>
</view>
<view class="hm-p-tb-20 hm-border-t">
订单时间
<text class="hm-col-tips hm-m-l-50">{{order.create_time}}</text>
</view>
<view class="hm-p-tb-20 hm-border-t">
支付方式
<text v-if="order.pay_status.value == 30" class="hm-col-tips hm-m-l-50">线下支付</text>
<text v-if="order.pay_status.value == 20" class="hm-col-tips hm-m-l-50">{{order.pay_mode.text}}</text>
<text v-if="order.pay_status.value == 10" class="hm-col-tips hm-m-l-50">--</text>
</view>
</view>
</view>
<!-- 技术支持 -->
<view class="hm">
{{applet.copyright}} <text class="v">V{{applet.version}}</text>
</view>
<u-popup :show="cashier_show" @close="cashier_show = false" mode="center" round="8" :closeable="true">
<view class="hm-popup">
<view class="hm-p-b-20 hm-border-b hm-text-center">支付收银台</view>
<view class="hm-p-tb-50 hm-text-center">
<view class="hm-font-b hm-col-0">
<text class="hm-font-100">{{order_pay_price}}</text>
</view>
<view class="hm-font-28 hm-col-content">订单支付</view>
</view>
<!-- #ifdef H5 || MP-WEIXIN -->
<view class="hm-p-20 hm-border-t" @click="pay_mode = 0">
<view class="hm-m-r-10 hm-dis-block-inline">
<u-icon name="weixin-circle-fill" size="25" color="#19be6b"></u-icon>
</view>
微信
<view class="hm-fr hm-dis-block-inline">
<u-icon name="checkbox-mark" v-if="pay_mode==0" size="25" color="#fa3534"></u-icon>
</view>
</view>
<!-- #endif -->
<!-- #ifdef H5 || MP-ALIPAY -->
<view class="hm-p-20 hm-border-t" @click="pay_mode = 3">
<view class="hm-m-r-10 hm-dis-block-inline">
<u-icon name="zhifubao-circle-fill" size="25" color="#2979ff"></u-icon>
</view>
支付宝
<view class="hm-fr hm-dis-block-inline">
<u-icon name="checkbox-mark" v-if="pay_mode==3" size="25" color="#fa3534"></u-icon>
</view>
</view>
<!-- #endif -->
<view v-if="pay_after" class="hm-p-20 hm-border-t" @click="pay_mode = 2">
<view class="hm-m-r-10 hm-dis-block-inline">
<u-icon name="rmb-circle-fill" size="25" color="#fa3534"></u-icon>
</view>
{{pay_text}}
<view class="hm-fr hm-dis-block-inline">
<u-icon name="checkbox-mark" v-if="pay_mode==2" size="25" color="#fa3534"></u-icon>
</view>
</view>
<view class="hm-p-20 hm-border-t hm-border-b" @click="pay_mode = 1">
<view class="hm-m-r-10 hm-dis-block-inline">
<u-icon name="red-packet-fill" size="25"
:color="Number(userInfo.money) < Number(order_pay_price)?'#c0c4cc':'#FF9900'"></u-icon>
</view>
<text :class="Number(userInfo.money) < Number(order_pay_price)?'hm-col-light':''">
余额(<text
:class="Number(userInfo.money) < Number(order_pay_price)?'hm-font-26':'hm-col-error hm-font-26'">{{userInfo.money}}</text>)
</text>
<view class="hm-fr hm-dis-block-inline">
<u-icon name="checkbox-mark" v-if="pay_mode==1" size="25" color="#fa3534"></u-icon>
<text v-if="Number(userInfo.money) < Number(order_pay_price)" class="hm-col-light">余额不足</text>
</view>
</view>
<view class="hm-p-t-50">
<view class="hm-p-lr-b25">
<u-button type="error" @click="payment" text="确认支付"></u-button>
</view>
</view>
</view>
</u-popup>
<u-popup :show="spk_box" @close="spk_box=false" round="8" closeable>
<view class="hm-p-20 hm-border-b">在线呼叫服务</view>
<view class="hm-p-tb-50">
<view @click="spk('money')" class="hm-dis-block-inline hm-w-b16">
<view class="hm-text-center">
<view class="hm-dis-block-inline">
<u-icon name="red-packet-fill" color="#19be6b" size="30"></u-icon>
</view>
</view>
<view class="hm-text-center hm-font-26 hm-m-t-10">结账</view>
</view>
<view @click="spk('order')" class="hm-dis-block-inline hm-w-b16">
<view class="hm-text-center">
<view class="hm-dis-block-inline">
<u-icon name="file-text-fill" color="#19be6b" size="30"></u-icon>
</view>
</view>
<view class="hm-text-center hm-font-26 hm-m-t-10">点单</view>
</view>
<view @click="spk('pack')" class="hm-dis-block-inline hm-w-b16">
<view class="hm-text-center">
<view class="hm-dis-block-inline">
<u-icon name="bag-fill" color="#19be6b" size="30"></u-icon>
</view>
</view>
<view class="hm-text-center hm-font-26 hm-m-t-10">打包</view>
</view>
<view @click="spk('upper')" class="hm-dis-block-inline hm-w-b16">
<view class="hm-text-center">
<view class="hm-dis-block-inline">
<u-icon name="play-right-fill" color="#19be6b" size="30"></u-icon>
</view>
</view>
<view class="hm-text-center hm-font-26 hm-m-t-10">起菜</view>
</view>
<view @click="spk('water')" class="hm-dis-block-inline hm-w-b16">
<view class="hm-text-center">
<view class="hm-dis-block-inline">
<u-icon name="checkmark-circle-fill" color="#19be6b" size="30"></u-icon>
</view>
</view>
<view class="hm-text-center hm-font-26 hm-m-t-10">茶水</view>
</view>
<view @click="spk('serve')" class="hm-dis-block-inline hm-w-b16">
<view class="hm-text-center">
<view class="hm-dis-block-inline">
<u-icon name="bell-fill" color="#19be6b" size="30"></u-icon>
</view>
</view>
<view class="hm-text-center hm-font-26 hm-m-t-10">服务员</view>
</view>
</view>
</u-popup>
<!-- 快捷导航 -->
<shortcut></shortcut>
</view>
</template>
<script>
let App = getApp();
export default {
data() {
return {
order_id: null,
total_num:0,//商品数量
userInfo:{},
order: null,
applet: {},
pay_mode: 0, //支付模式 0微信1余额 2后付 3支付宝
order_pay_price: 0,
cashier_show: false,
pay_after:true,
pay_text: '',
spk_box: false,
steps:[
[
{
title:'创建订单',
desc:' '
},
{
title:'支付成功',
desc:' '
},
{
title:'商家接单',
desc:' '
},
{
title:'',
desc:' '
},
{
title:'',
desc:' '
},
{
title:'订单完成',
desc:' '
}
],
[
{
title:'创建订单',
desc:' '
},
{
title:'订单取消',
desc:' '
}
],
[
{
title:'创建订单',
desc:' '
},
{
title:'退款处理',
desc:' '
},
{
title:'完成退款',
desc:' '
}
]
],//订单步骤
steps_index:0,//起点位置
};
},
components: {},
props: {},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
let _this = this;
_this.order_id = options.id;
_this.applet = uni.getStorageSync('applet');
_this.getOrderDetail();
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
let _this = this;
_this.getOrderDetail();
},
methods: {
/**
* 支付框
*/
payOrder: function() {
let _this = this,
order_mode = _this.order.order_mode.value,
pay_status = _this.order.pay_status.value,
postpaid = _this.applet.other.postpaid;
_this.order_pay_price = _this.order.pay_price;
_this.getUserDetail();
if(pay_status == 30 || postpaid[order_mode] == 0){
_this.pay_after = false;//隐藏后付费
}else{
_this.pay_after = true;//显示后付费
}
if (order_mode == 10) {
_this.pay_text = '餐后支付';
}
if (order_mode == 20) {
_this.pay_text = '骑手代收';
}
if (order_mode == 30) {
_this.pay_text = '取餐付';
}
_this.cashier_show = true;
},
/**
* 发起付款
*/
payment: function() {
let _this = this,
pay_mode = _this.pay_mode;
let callback = function(result) {
_this.cashier_show = false;
if (result.code === -10) {
App.showError(result.msg, function() {
App.goTo('order/index'); // 跳转到订单列表
});
return false;
}
// 发起余额支付
if (pay_mode == 1 || pay_mode == 2) {
_this.getOrderDetail();
return true;
}
// 发起微信支付
// #ifdef MP-WEIXIN
uni.requestPayment({
timeStamp: result.data.payment.timeStamp,
nonceStr: result.data.payment.nonceStr,
package: result.data.payment.package,
signType: result.data.payment.signType,
paySign: result.data.payment.paySign,
success: function(res) {
_this.getOrderDetail();
},
fail: function(res) {
let msg = '支付失败';
if(res.errMsg == 'requestPayment:fail cancel'){
msg = '用户取消支付';
}
App.showError(msg);
}
});
//#endif
//#ifdef H5
// #ifdef MP-WEIXIN
window.location.href = result.data.payment.h5_url;
//#endif
//#endif
// #ifdef MP-ALIPAY
uni.requestPayment({
orderInfo: result.data.payment.trade_no,
success: function(res) {
if(res.resultCode != '9000'){
App.showError(res.memo);
return false;
}
_this.getOrderDetail();
}
});
//#endif
};
//验证是否支持后付款
uni.showLoading({
title: '正在处理...'
});
App._post_form('user.order/pay', {
order_id: _this.order_id,
pay_mode: pay_mode
}, function(result) {
callback(result);
});
},
/**
* 获取订单详情
*/
getOrderDetail: function() {
let _this = this;
App._get('user.order/detail', {
order_id: _this.order_id
}, function(result) {
let order = result.data.order;
_this.order = order;
let create_time = new Date(order.create_time);
create_time = Date.parse(create_time);
//计算订单步骤
if(order.order_status.value == 10 || order.order_status.value == 30){
//订单进行中
if(order.order_mode.value == 10){
_this.steps[0][3].title = '开始起菜';//接单时间
_this.steps[0][4].title = '起菜完毕';//接单时间
}
if(order.order_mode.value == 20){
_this.steps[0][3].title = '骑手接单';//接单时间
_this.steps[0][4].title = '骑手配送';//接单时间
}
if(order.order_mode.value == 30){
_this.steps[0][3].title = '用户取餐';//接单时间
_this.steps[0][4].title = '取餐完毕';//接单时间
}
_this.steps[0][0].desc = uni.$u.timeFormat(create_time, 'mm月dd日 hh:MM');
if(order.pay_status.value > 10){
_this.steps_index = 1;
_this.steps[0][1].desc = uni.$u.timeFormat(order.pay_time, 'mm月dd日 hh:MM');//支付时间
if(order.shop_status.value > 10){
_this.steps_index = 2;
_this.steps[0][2].desc = uni.$u.timeFormat(order.shop_time, 'mm月dd日 hh:MM');//接单时间
if(order.order_mode.value == 10){
//扫码
if(order.delivery_status.value < 30){
_this.steps_index = 3;
_this.steps[0][3].desc = uni.$u.timeFormat(order.shop_time, 'mm月dd日 hh:MM');
}else{
_this.steps_index = 4;
_this.steps[0][3].desc = uni.$u.timeFormat(order.delivery_time, 'mm月dd日 hh:MM');
_this.steps[0][4].desc = uni.$u.timeFormat(order.delivery_time, 'mm月dd日 hh:MM');
}
}
if(order.order_mode.value == 20){
//外卖
if(order.delivery.delivery_status.value > 10){
_this.steps_index = 3;
_this.steps[0][3].desc = uni.$u.timeFormat(order.delivery_time, 'mm月dd日 hh:MM');
if(order.delivery.delivery_status.value > 30){
_this.steps_index = 4;
_this.steps[0][4].desc = uni.$u.timeFormat(order.delivery.delivery_time, 'mm月dd日 hh:MM');
}
}
}
if(order.order_mode.value == 30){
//自取、外带
if(order.delivery_status.value < 30){
_this.steps_index = 3;
_this.steps[0][3].desc = uni.$u.timeFormat(order.shop_time, 'mm月dd日 hh:MM');
}else{
_this.steps_index = 4;
_this.steps[0][3].desc = uni.$u.timeFormat(order.delivery_time, 'mm月dd日 hh:MM');
_this.steps[0][4].desc = uni.$u.timeFormat(order.delivery_time, 'mm月dd日 hh:MM');
}
}
if(order.receipt_status.value == 20){
_this.steps_index = 5;
_this.steps[0][5].desc = uni.$u.timeFormat(order.receipt_time, 'mm月dd日 hh:MM');
}
}
}
}
if(order.order_status.value == 20){
//订单被取消
_this.steps[1][0].desc = uni.$u.timeFormat(create_time, 'mm月dd日 hh:MM');
let update_time = new Date(order.update_time);
update_time = Date.parse(update_time);
_this.steps[1][1].desc = uni.$u.timeFormat(update_time, 'mm月dd日 hh:MM');
_this.steps_index = 1;
}
if(order.order_status.value == 40){
//订单退款
_this.steps[2][0].desc = uni.$u.timeFormat(create_time, 'mm月dd日 hh:MM');
if(order.refund_status.value == 10){
_this.steps_index = 1;
_this.steps[2][1].desc = uni.$u.timeFormat(order.refund_time, 'mm月dd日 hh:MM');
}else{
_this.steps_index = 2;
_this.steps[2][1].desc = uni.$u.timeFormat(order.refund_time, 'mm月dd日 hh:MM');
_this.steps[2][2].desc = uni.$u.timeFormat(order.refund_time, 'mm月dd日 hh:MM');
}
}
//计算商品数量
for(let n=0;n<_this.order.goods.length;n++){
_this.total_num += Number(_this.order.goods[n].total_num);
}
});
},
/**
* 取消订单
*/
cancelOrder: function() {
let _this = this;
uni.showModal({
title: "提示",
content: "您确认要取消订单",
success: function(o) {
if (o.confirm) {
App._post_form('user.order/cancel', {
order_id: _this.order_id
}, function(result) {
_this.getOrderDetail();
});
}
}
});
},
/**
* 确认收货
*/
receipt: function() {
let _this = this;
uni.showModal({
title: "提示",
content: "您确认要完成订单",
success: function(o) {
if (o.confirm) {
App._post_form('user.order/receipt', {
order_id: _this.order_id
}, function(result) {
_this.getOrderDetail();
});
}
}
});
},
/**
* 呼叫
*/
spk: function(mode) {
let _this = this;
_this.spk_box = false;
App._post_form('order/spk', {
order_id: _this.order_id,
mode: mode
}, function(result) {
App.showSuccess(result.msg);
});
},
/**
* 获取当前用户信息
*/
getUserDetail() {
let _this = this;
App._get('user/detail', {}, result => {
_this.userInfo = result.data.detail;
});
},
/**
* 拨打电话
*/
phone: function(phone)
{
uni.makePhoneCall({
phoneNumber: phone
});
},
/**
* 复制
*/
copy: function(str) {
wx.setClipboardData({
data: str,
success (res) {}
})
},
goTo: function(url) {
App.goTo(url);
}
}
};
</script>
<style>
</style>