587 lines
19 KiB
Vue
587 lines
19 KiB
Vue
<template>
|
||
<view>
|
||
<view class="hm-header-xian"></view>
|
||
<!--顶部导航-->
|
||
<u-sticky offsetTop="0" customNavHeight="0" bgColor="#ffffff">
|
||
<u-tabs :list="tabs" lineColor="#FF9900" :itemStyle="{height:'88rpx',width:'100rpx'}" :current="current" @change="change" :scrollable="false">
|
||
</u-tabs>
|
||
</u-sticky>
|
||
<!-- #ifdef H5 -->
|
||
<view v-if="isLogin">
|
||
<!-- #endif -->
|
||
<view class="hm-wrap">
|
||
<swiper class="swiper" :current="current" @animationfinish="animationfinish">
|
||
<swiper-item class="item" v-for="(tabs_item,tabs_index) in tabs" :key="tabs_index">
|
||
<scroll-view scroll-y class="hm-w-h" @scrolltolower="reachBottom">
|
||
<view v-if="list[current].total" class="hm-p-lr-20">
|
||
<!--订单列表-->
|
||
<view class="order" v-for="(item, index) in list[current].data" :key="index">
|
||
<view class="hm-p-b-20 hm-border-b">
|
||
{{item.shop.shop_name}}
|
||
<view class="hm-dis-block-inline hm-fr hm-col-error">
|
||
<block v-if="item.order_status.value==10">
|
||
<text v-if="item.pay_status.value==10">
|
||
{{item.pay_status.text}}
|
||
</text>
|
||
<text v-if="item.pay_status.value>10 && item.shop_status.value==10">
|
||
{{item.shop_status.text}}
|
||
</text>
|
||
<text v-if="item.shop_status.value > 10 && item.delivery_status.value==10">
|
||
{{item.delivery_status.text}}
|
||
</text>
|
||
<text v-if="item.shop_status.value > 10 && item.delivery_status.value==20">
|
||
{{item.delivery.delivery_status.text}}
|
||
</text>
|
||
<text
|
||
v-if="item.delivery_status.value==30 && item.receipt_status.value==10">
|
||
{{item.pay_status.value==30?'起菜完毕-待付款':item.receipt_status.text}}
|
||
</text>
|
||
</block>
|
||
<block v-else-if="item.order_status.value==40">
|
||
{{item.refund_status.text}}
|
||
</block>
|
||
<block v-else>
|
||
{{item.order_status.text}}
|
||
</block>
|
||
</view>
|
||
</view>
|
||
<view class="hm-p-t-10 hm-col-tips hm-font-26">
|
||
#{{item.order_mode.text}}#
|
||
<text class="hm-m-l-10"
|
||
v-if="item.order_mode.value==10 && item.table_id > 0">{{item.table.table_name}}</text>
|
||
<text class="hm-m-l-10" v-else>{{item.row_no}}号</text>
|
||
<text class="hm-fr hm-font-24">
|
||
<text v-if="item.order_mode.value == 10">起菜时间：</text>
|
||
<text v-if="item.order_mode.value == 20">送出时间：</text>
|
||
<text v-if="item.order_mode.value == 30">取餐时间：</text>
|
||
{{item.arrive_time.text}}
|
||
</text>
|
||
</view>
|
||
<view class="hm-p-tb-20 hm-font-26" @click="goTo('order/detail?id=' + item.order_id)">
|
||
<view v-for="(item2, index2) in item.goods" :key="index2">
|
||
{{index2+1}}:
|
||
<text class="hm-m-l-10">{{item2.goods_name}}</text>
|
||
<text class="hm-col-tips hm-m-l-15" v-if="item2.goods_attr">{{item2.goods_attr}}</text>
|
||
<view class="hm-dis-block-inline hm-fr hm-w-200">
|
||
× {{item2.total_num}}
|
||
<text class="hm-fr">￥{{item2.total_price}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="hm-p-t-20 hm-text-right">
|
||
共{{item.goods.length}}种商品，实付<text class="hm-col-error">￥{{item.pay_price}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="hm-border-t hm-p-tb-20">
|
||
合计：<text class="hm-col-error">￥{{item.pay_price}}</text>
|
||
<view class="hm-dis-block-inline hm-fr">
|
||
<block v-if="item.order_status.value == 10">
|
||
<view v-if="item.shop_status.value == 10" class="hm-dis-block-inline">
|
||
<u-button @click="cancelOrder(item.order_id)" size="small" text="取消订单">
|
||
</u-button>
|
||
</view>
|
||
<view v-if="item.pay_status.value!=20" class="hm-m-l-20 hm-dis-block-inline">
|
||
<u-button @click="payOrder(index)" size="small" type="warning" text="立即付款">
|
||
</u-button>
|
||
</view>
|
||
<view
|
||
v-if="item.pay_status.value==20 && item.receipt_status.value==10"
|
||
class="hm-m-l-20 hm-dis-block-inline">
|
||
<u-button @click="goTo('order/refund?id='+item.order_id)" size="small"
|
||
type="error" text="我要退单"></u-button>
|
||
</view>
|
||
<view
|
||
v-if="applet.other.is_calling == 1 && item.order_mode.value == 10 && item.table_id > 0 && item.pay_status.value > 10 && item.shop_status.value == 20"
|
||
class="hm-m-l-20 hm-dis-block-inline">
|
||
<u-button @click="spkBox(item.order_id)" size="small" type="success"
|
||
text="呼叫服务"></u-button>
|
||
</view>
|
||
<view
|
||
v-if="item.pay_status.value==20 && item.delivery_status.value==30 && item.receipt_status.value == 10"
|
||
class="hm-m-l-20 hm-dis-block-inline">
|
||
<u-button @click="receipt(item.order_id)" size="small" type="warning"
|
||
text="确认完成"></u-button>
|
||
</view>
|
||
</block>
|
||
<view v-if="item.order_status.value==30 && item.is_cmt.value==0"
|
||
class="hm-dis-block-inline">
|
||
<u-button @click="goTo('order/comment?id='+item.order_id)" size="small"
|
||
type="warning" text="我要评价"></u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<u-loadmore :status="loadStatus[current]" bgColor="#F7F7F7" marginTop="20"
|
||
marginBottom="20" line></u-loadmore>
|
||
</view>
|
||
</view>
|
||
<view v-else class="hm">
|
||
<img :src="applet.domain + '/addons/food/img/empty/order.png'" />
|
||
<view class="text">暂无订单数据</view>
|
||
</view>
|
||
<!-- 技术支持 -->
|
||
<view class="hm">
|
||
{{applet.copyright}} <text class="v">V{{applet.version}}</text>
|
||
</view>
|
||
</scroll-view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</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>
|
||
<!-- #ifdef H5 -->
|
||
</view>
|
||
<view v-else class="hm">
|
||
<img :src="applet.domain + '/addons/food/img/empty/permission.png'" />
|
||
<view class="text">你还没有登录</view>
|
||
<view class="hm-dis-block-inline hm-m-t-20">
|
||
<u-button @click="goTo('login/index')" type="info" text="去登录" plain></u-button>
|
||
</view>
|
||
<!-- 技术支持 -->
|
||
<view class="hm">
|
||
{{applet.copyright}} <text class="v">V{{applet.version}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
let App = getApp();
|
||
export default {
|
||
data() {
|
||
return {
|
||
isLogin: false,
|
||
applet: {},
|
||
userInfo:{},
|
||
tabs: [{
|
||
name: '全部',
|
||
value: 'all'
|
||
},
|
||
{
|
||
name: '待付款',
|
||
value: 'payment'
|
||
},
|
||
{
|
||
name: '待评价',
|
||
value: 'comment'
|
||
},
|
||
{
|
||
name: '退款',
|
||
value: 'refund10'
|
||
}
|
||
],
|
||
current: 0,
|
||
list: [{total:0}],
|
||
loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
|
||
page: [1, 1, 1, 1],
|
||
|
||
pay_mode: 0, //支付模式 0微信，1余额 2后付 3支付宝
|
||
order_pay_price: 0,
|
||
cashier_show: false,
|
||
pay_after:true,
|
||
pay_index: '',
|
||
pay_text: '',
|
||
|
||
spk_box: false,
|
||
order_id: '',
|
||
|
||
};
|
||
},
|
||
|
||
components: {},
|
||
props: {},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad: function() {},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面显示
|
||
*/
|
||
onShow: function() {
|
||
let _this = this;
|
||
_this.isLogin = App.checkIsLogin();
|
||
_this.getApplet();
|
||
_this.getOrderAll();
|
||
_this.current = uni.getStorageSync('order_type') || 0;
|
||
uni.removeStorageSync('order_type');
|
||
// #ifdef MP-ALIPAY
|
||
_this.pay_mode = 3;
|
||
//#endif
|
||
},
|
||
methods: {
|
||
/**
|
||
* 发起付款
|
||
*/
|
||
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.goTo('order/detail?id=' + _this.list[_this.current].data[_this.pay_index].order_id); // 跳转到已付款订单
|
||
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.goTo('order/detail?id=' + result.data.order_id);
|
||
},
|
||
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.goTo('order/detail?id=' + result.data.order_id);
|
||
}
|
||
});
|
||
//#endif
|
||
};
|
||
//验证是否支持后付款
|
||
uni.showLoading({
|
||
title: '正在处理...'
|
||
});
|
||
App._post_form('user.order/pay', {
|
||
order_id: _this.list[_this.current].data[_this.pay_index].order_id,
|
||
pay_mode: pay_mode
|
||
}, function(result) {
|
||
callback(result);
|
||
});
|
||
},
|
||
/**
|
||
* 支付框
|
||
*/
|
||
payOrder: function(index) {
|
||
let _this = this,
|
||
order_mode = _this.list[_this.current].data[index].order_mode.value,
|
||
pay_status = _this.list[_this.current].data[index].pay_status.value,
|
||
postpaid = _this.applet.other.postpaid;
|
||
_this.order_pay_price = _this.list[_this.current].data[index].pay_price;
|
||
_this.getUserDetail();
|
||
_this.pay_index = index;
|
||
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;
|
||
},
|
||
/**
|
||
* 叫号服务框
|
||
*/
|
||
spkBox: function(order_id) {
|
||
let _this = this;
|
||
_this.spk_box = true;
|
||
_this.order_id = order_id;
|
||
},
|
||
/**
|
||
* 呼叫
|
||
*/
|
||
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);
|
||
});
|
||
},
|
||
/**
|
||
* 确认收货
|
||
*/
|
||
receipt: function(order_id) {
|
||
let _this = this;
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "您确认要完成订单？",
|
||
success: function(o) {
|
||
if (o.confirm) {
|
||
App._post_form('user.order/receipt', {
|
||
order_id
|
||
}, function(result) {
|
||
_this.getOrderAll();
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
/**
|
||
* 获取当前用户信息
|
||
*/
|
||
getUserDetail() {
|
||
let _this = this;
|
||
App._get('user/detail', {}, result => {
|
||
_this.userInfo = result.data.detail;
|
||
});
|
||
},
|
||
/**
|
||
* 取消订单
|
||
*/
|
||
cancelOrder: function(order_id) {
|
||
let _this = this;
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "您确认要取消订单？",
|
||
success: function(o) {
|
||
if (o.confirm) {
|
||
App._post_form('user.order/cancel', {
|
||
order_id
|
||
}, function(result) {
|
||
_this.getOrderAll();
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 获取订单列表
|
||
*/
|
||
getOrderList: function(current, page) {
|
||
let _this = this;
|
||
App._get('user.order/lists', {
|
||
page: page || 1,
|
||
dataType: _this.tabs[current].value
|
||
}, function(result) {
|
||
let resList = result.data.list,
|
||
dataList = _this.list[current];
|
||
_this.list[current].data = dataList.data.concat(resList.data);
|
||
_this.loadStatus[current] = 'loadmore';
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 获取所有类型列表
|
||
*/
|
||
getOrderAll: function() {
|
||
let _this = this;
|
||
App._get('user.order/all', {
|
||
page: 1
|
||
}, function(result) {
|
||
_this.list = result.data.list;
|
||
});
|
||
},
|
||
/**
|
||
* tab栏切换
|
||
*/
|
||
change(e) {
|
||
let _this = this;
|
||
_this.current = e.index;
|
||
},
|
||
animationfinish({
|
||
detail: {
|
||
current
|
||
}
|
||
}) {
|
||
this.current = current;
|
||
},
|
||
|
||
/**
|
||
* 触底加载
|
||
*/
|
||
reachBottom: function() {
|
||
let _this = this,
|
||
current = _this.current;
|
||
_this.loadStatus[current] = "loading"; //加载中
|
||
// 已经是最后一页
|
||
if (_this.page[current] >= _this.list[current].last_page) {
|
||
_this.loadStatus[current] = "nomore"; //没有数据
|
||
return false;
|
||
}
|
||
// 加载下一页列表
|
||
_this.getOrderList(current, ++_this.page[current]);
|
||
},
|
||
/**
|
||
* 获取当前小程序配置
|
||
*/
|
||
getApplet() {
|
||
let _this = this,
|
||
applet;
|
||
if (applet = uni.getStorageSync('applet')) {
|
||
_this.applet = applet;
|
||
} else {
|
||
App.getAppletBase(() => {
|
||
_this.getApplet();
|
||
});
|
||
}
|
||
},
|
||
/**
|
||
* 页面跳转
|
||
*/
|
||
goTo: function(url) {
|
||
App.goTo(url);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.swiper{
|
||
flex: 1;
|
||
.item {
|
||
height: 100%;
|
||
.order{
|
||
margin-top: 20rpx;
|
||
background-color: #fff;
|
||
padding: 20rpx;
|
||
border-radius: 8rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|