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

752 lines
24 KiB
Vue
Raw 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 class="hm-p-b-100">
<view class="hm-header-xian"></view>
<!-- 堂食 -->
<view v-if="foodMode == 10" class="hm-bg-f hm-p-lr-20">
<view v-if="table_id != ''" class="hm-p-tb-20 hm-text-center hm-font-30 hm-font-b">
{{table_name}}
</view>
<view :class="table_id != ''?'hm-border-t':''" class="hm-p-tb-20" @click="arriveShow = true">
起菜时间
<view class="hm-font-28 hm-col-warning hm-dis-block-inline hm-fr">
{{arriveTitle}}
<view class="hm-dis-block-inline hm-m-l-10">
<u-icon name="arrow-right" color="#909193"></u-icon>
</view>
</view>
</view>
</view>
<!-- 外卖 -->
<view v-if="foodMode == 20" class="hm-bg-f hm-p-lr-20">
<view v-if="intra_region" class="hm-p-t-20">
<u-alert description="收货地址超出配送范围!" type="error" center></u-alert>
</view>
<view v-if="address" class="hm-p-tb-20" @click="goTo('user/address/index?from=flow')">
<view class="hm-font-b hm-font-28">
{{address.detail}}
</view>
<view class="hm-font-26 hm-col-content hm-m-t-10">
{{address.name}}<text class="hm-m-l-10">({{address.gender.text}})</text><text class="hm-m-l-30">{{address.phone}}</text>
</view>
<view class="hm-dis-block-inline hm-fr" style="margin-top: -50rpx;">
<u-icon name="arrow-right" color="#909193"></u-icon>
</view>
</view>
<view v-else class="hm-p-tb-20 hm-text-center">
<view class="hm-dis-block-inline">
<u-button @click="goTo('user/address/add')" size="small"
:customStyle="{color:'#909193',padding:'0rpx 30rpx'}" text="添加地址"></u-button>
</view>
</view>
<view class="hm-p-tb-20 hm-border-t" @click="arriveShow = true">
派送时间
<view class="hm-font-28 hm-col-warning hm-dis-block-inline hm-fr">
{{arriveTitle}}
<view class="hm-dis-block-inline hm-m-l-10">
<u-icon name="arrow-right" color="#909193"></u-icon>
</view>
</view>
</view>
</view>
<!-- 外带 -->
<view v-if="foodMode == 30" @click="arriveShow = true" class="hm-bg-f hm-p-20">
取餐时间
<view class="hm-font-28 hm-col-warning hm-dis-block-inline hm-fr">
{{arriveTitle}}
<view class="hm-dis-block-inline hm-m-l-10">
<u-icon name="arrow-right" color="#909193"></u-icon>
</view>
</view>
</view>
<!-- 订单备注 -->
<view class="hm-bg-f hm-p-lr-20 hm-m-t-20">
<view v-if="flavorList" class="hm-p-tb-20 hm-border-b">
<view v-for="(item,index) in flavorList" :key="index" @click="setFlavor(index)" :class="item.checked?'flavor-checked':'flavor'">
{{item.name}}
</view>
</view>
<view class="hm-p-tb-20">
<u--input v-model="message" placeholder="订单备注:" maxlength="50" clearable></u--input>
</view>
</view>
<!-- 商品列表 -->
<view class="hm-p-lr-20 hm-m-t-20 hm-bg-f">
<view class="hm-p-tb-20 hm-font-30">
共<text class="hm-col-warning hm-font-30 hm-font-b">{{order_total_num}}</text>件商品
</view>
<view class="hm-p-tb-20 hm-font-28 hm-col-content hm-border-t">
<view v-for="(item, index) in goods_list" :key="index">
{{index+1}}.
<text class="hm-m-l-10">{{item.goods_name}}</text>
<text v-if="item.goods_sku.goods_attr" class="hm-font-26 hm-col-tips hm-p-l-10">
{{item.goods_sku.goods_attr}}
</text>
<view class="hm-dis-block-inline hm-m-l-10">
<u-tag v-if="item.active" :text="item.active" type="error" size="mini" plain />
</view>
<view class="hm-dis-block-inline hm-fr" style="width: 200rpx;">
×{{item.total_num}}
<text class="hm-fr">¥{{item.goods_price * item.total_num}}</text>
</view>
</view>
<view v-if="gift">
{{goods_list.length + 1}}.{{gift.name}}
<view class="hm-dis-block-inline hm-m-l-10">
<u-tag v-if="item.active" :text="item.active" type="success" size="mini" plain />
</view>
<view class="hm-dis-block-inline hm-fr" style="width: 200rpx;">
×1 <text class="hm-fr">¥0.00</text>
</view>
</view>
</view>
<view class="hm-p-tb-20 hm-font-28 hm-border-t hm-text-right">
合计:<text class="hm-col-error">¥{{order_total_price}}</text>
</view>
</view>
<!-- 费用清单 -->
<view class="hm-p-lr-20 hm-m-t-20 hm-font-28 hm-bg-f">
<view v-if="pack_price > 0" class="hm-p-tb-20 hm-border-t">
包装费用:<text class="hm-col-error hm-fr">+¥{{pack_price}}</text>
</view>
<view v-if="delivery_price > 0" class="hm-p-tb-20 hm-border-t">
配送费用:<text class="hm-col-error hm-fr">+¥{{delivery_price}}</text>
</view>
<view v-if="ware_price > 0" @click="peopleShow = true" class="hm-p-tb-20 hm-border-t">
餐具费用:
<view class="hm-dis-block-inline hm-fr">
<text class="hm-col-tips">{{people}}人就餐)</text>
<text class="hm-col-error">+¥{{ware_price}}</text>
<view class="hm-dis-block-inline hm-m-l-10">
<u-icon name="arrow-right" color="#909193"></u-icon>
</view>
</view>
</view>
<view v-if="vip_price > 0" class="hm-p-tb-20 hm-border-t">
会员优惠:<text class="hm-col-error hm-fr"><text v-if="free_delivery">(免配送费)</text>-¥{{vip_price}}</text>
</view>
<view @click="coupon_list ? coupon_show = true : ''" class="hm-p-tb-20 hm-border-t">
券卡优惠:<view class="hm-dis-block-inline hm-fr">
<text :class="coupon_list?'hm-col-error':'hm-col-tips'">
<text v-if="coupon_user_id">-¥{{activity_price}}</text>
<text v-else>{{coupon_list?coupon_list.length + '张':'暂无'}}可用</text>
</text>
<view class="hm-dis-block-inline hm-m-l-10">
<u-icon name="arrow-right" color="#909193"></u-icon>
</view>
</view>
</view>
</view>
<!-- 技术支持 -->
<view class="hm">
{{applet.copyright}} <text class="v">V{{applet.version}}</text>
</view>
<!-- 提交订单 -->
<view class="hm-footer-fixed">
<view class="bottom-cart">
<view class="pay">
待支付:<text class="hm-col-error hm-font-b">¥{{order_pay_price}}</text>
<text v-show="foodMode == 20 && min_price != 0"
class="hm-m-l-10 hm-col-tips hm-font-22">外卖起送差{{min_price}}元</text>
</view>
<div class="hm-dis-block-inline hm-fr">
<u-button @click="cashier_show = true" :customStyle="{height:'100rpx',width:'200rpx'}" type="warning"
:disabled="foodMode == 20 && min_price != 0" text="确认结算">
</u-button>
</div>
</view>
</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="applet.other.postpaid[foodMode] == 1" 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>
<text v-if="foodMode == 10">餐后付</text>
<text v-if="foodMode == 20">骑手代收</text>
<text v-if="foodMode == 30">取餐付</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="coupon_show" @close="coupon_show = false" round="8" closeable>
<view class="hm-p-20">
<view class="hm-p-b-20">选择优惠券</view>
<view class="coupon" v-for="(item, index) in coupon_list" :key="index">
<view class="item">
<view class="use">
<u-button @click="useCoupon(index)" size="small" :customStyle="{color:'#999'}" text="使用">
</u-button>
</view>
<view class="hm-col-main">{{item.coupon.name}}</view>
<view class="hm-m-t-10 hm-font-22">时间{{item.expiretime.text}}后失效</view>
<view class="hm-font-22">规则{{item.coupon.explain}}</view>
</view>
</view>
</view>
</u-popup>
<u-picker :show="arriveShow" @cancel="arriveShow = false" keyName="text" :columns="arriveList" title="选择时间"
ref="uPicker" @confirm="arrive" @change="changeArrive"></u-picker>
<u-popup :show="peopleShow" zIndex="900000" mode="center" round="10">
<view class="hm-popup">
<view class="hm-p-b-20 hm-border-b">就餐人数</view>
<view class="hm-p-20">
<u--input v-model="people" type="number" placeholder="请输入就餐人数" inputAlign="center" focus clearable></u--input>
</view>
<view class="hm-p-lr-b25">
<u-button type="success" @click="setPeople" text="确认下单"></u-button>
</view>
</view>
</u-popup>
</view>
</template>
<script>
let App = getApp();
export default {
data() {
return {
applet: {},
shop: {}, //门店详情
foodMode: '10', //点单模式
peopleShow: false,//就餐人数输入
people:'',//就餐人数
flavorList: null,
flavor:'',//口味
is_order: 1, //1点单 0加单
table_name: '',
table_id: '',
//约定时间
arriveShow: false,
arriveTitle: '',
arriveList: [
[{
value: '0',
text: '今天'
},
{
value: '1',
text: '明天'
},
{
value: '2',
text: '后天'
}
],
],
arriveListData: [],
arriveTime: ['0', '0'],
userInfo: {}, //用户详情
tpl: [], //模板消息
cashier_show: false,//收银台
pay_mode: 0, //支付模式 0微信1余额 2后付 3支付宝
message: '', //用户留言
//优惠券
coupon_user_id: 0,
coupon_show: false,
goods_list: [], //购物车商品列表
coupon_list:null,
gift:null,
address: null, // 默认收货地址
order_pay_price: "0.00", //实际支付金额
order_total_num: 0, //商品总数
order_total_price: "0.00", //商品实际金额
min_price: "0.00", //最低起送价
activity_price: "0.00", //活动金额
delivery_price: "0.00", //配送费用
vip_price:"0.00",
pack_price: "0.00", //餐盒费
ware_price: "0.00",//茶位费
free_delivery: false, //免配送费
intra_region: false, //是否在配送范围
has_error: false,
error_msg: "", //错误信息
};
},
components: {},
props: {},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
let _this = this;
_this.shop = App.getShop();
_this.getOptions(options);
_this.applet = uni.getStorageSync('applet');
// #ifdef MP-ALIPAY
_this.pay_mode = 3;
//#endif
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
let _this = this;
_this.getCartOrder(); // 获取当前订单信息
_this.getUserDetail(); //获取当前用户详情
},
methods: {
/**
* 传递数据操作
*/
getOptions: function(options) {
let _this = this;
_this.foodMode = options.food_mode;
if (options.food_mode == 10) {
_this.arriveTitle = '立即起菜';
_this.table_id = options.table_id || '';
}
if (options.food_mode == 20) {
_this.arriveTitle = '立即送出';
}
if (options.food_mode == 30) {
_this.arriveTitle = '立即取餐';
}
let timestamp = Number(new Date()); //获取当前时间戳
let now = new Date(timestamp); //时间戳转换成日期
let str = now.toTimeString().substr(0, 8); // 获取时分秒09:30:55
let hour = Number(str.substr(0, 2)); //09
let minute = Number(str.substr(3, 2)); //获取分钟
let today = [{
value: '0',
text: _this.arriveTitle
}];
let tomorrow = []; //明天时间列表
for (let n = hour; n < 24; n++) {
let hourStr = n < 10 ? '0' + String(n) : String(n);
if (n == hour) {
if (minute < 20) {
today.push({
value: (n * 3600) + (20 * 60),
text: hourStr + ":20"
}, {
value: (n * 3600) + (40 * 60),
text: hourStr + ":40"
});
} else if (minute < 40) {
today.push({
value: (n * 3600) + (40 * 60),
text: hourStr + ":40"
});
}
} else {
today.push({
value: (n * 3600),
text: hourStr + ":00"
}, {
value: (n * 3600) + (20 * 60),
text: hourStr + ":20"
}, {
value: (n * 3600) + (40 * 60),
text: hourStr + ":40"
});
}
}
_this.arriveList[1] = today;
_this.arriveListData[0] = today;
for (let n = 0; n < 24; n++) {
let hourStr = n < 10 ? '0' + String(n) : String(n);
tomorrow.push({
value: (n * 3600),
text: hourStr + ":00"
}, {
value: (n * 3600) + (20 * 60),
text: hourStr + ":20"
}, {
value: (n * 3600) + (40 * 60),
text: hourStr + ":40"
});
}
_this.arriveListData[1] = tomorrow;
_this.arriveListData[2] = tomorrow;
//判断是否开启口味选项
if(_this.shop.is_flavor == 1){
_this.getFlavor();
}
// #ifdef MP-WEIXIN
_this.getTpl(); //获取模板消息
// #endif
},
/**
* 设置就餐人数
*/
setPeople(){
let _this = this;
if(_this.people == '' || _this.people < 1){
App.showError('请输入正确的就餐人数');
return false;
}
_this.peopleShow = false;
_this.getCartOrder();//重新加载数据
},
/**
* 设置口味选项
*/
setFlavor(index){
let _this = this,
flavorList = _this.flavorList,
flavor = '';
flavorList[index].checked = !flavorList[index].checked;
for(let i=0;i<flavorList.length;i++){
if(flavorList[i].checked){
if(flavor == ''){
flavor = flavorList[i].name;
}else{
flavor = flavor + ',' + flavorList[i].name;
}
}
}
_this.flavor = flavor;
},
/**
* 获取购物车订单列表
*/
getCartOrder: function() {
let _this = this;
// 获取订单信息回调方法
let callback = function(result) {
let goods_list = result.data.goods_list;
if (goods_list.length == 0) {
uni.navigateBack();
}
if (result.code !== 1) {
App.showError(result.msg);
return false;
}
// 显示错误信息
if (result.data.has_error) {
App.showError(result.data.error_msg);
}
_this.setData(result.data);
//如果是堂食扫码
if(_this.foodMode == 10 && _this.table_id != ''){
//判断是否要求输入堂食人数
if(result.data.is_order == 1 && _this.shop.is_people == 1 && !_this.people){
_this.peopleShow = true;
}
}
};
let formData = {
order_mode: _this.foodMode,
coupon_user_id: _this.coupon_user_id
}
if(_this.foodMode == 10 && _this.table_id != ''){
formData.table_id = _this.table_id || '';
formData.people = _this.people || '';
}
// 购物车结算
App._get('order/cart', formData, function(result) {
callback(result);
});
},
/**
* 订单提交
*/
payment: function() {
let _this = this;
// 订单创建成功后回调
let callback = function(result) {
_this.cashier_show = false;
if (result.code === -10) {
App.showError(result.msg, function() {
App.goTo('order/index'); // 跳转到订单列表
});
return false;
}
if (_this.pay_mode == 1 || _this.pay_mode == 2) {
App.goTo('order/detail?id=' + result.data.order_id); // 跳转到订单详情
return true;
}
// 发起微信支付
// #ifdef MP-WEIXIN
//开启订阅消息
uni.requestSubscribeMessage({
tmplIds: _this.tpl,
complete(res) {
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) {
App.goTo('order/detail?id=' + result.data.order_id); // 跳转到订单详情
},
fail: function(res) {
let msg = '支付失败';
if(res.errMsg == 'requestPayment:fail cancel'){
msg = '用户取消支付';
}
App.showError(msg, function() {
App.goTo(
'order/index'); // 跳转到订单列表
});
}
});
}
});
//#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;
}
App.goTo('order/detail?id=' + result.data.order_id); // 跳转到订单详情
}
});
//#endif
};
if (_this.pay_mode == 1) {
if (Number(_this.userInfo.money) < Number(_this.order_pay_price)) {
App.showError('余额不足');
return false;
}
}
//判断是否为空订单
if (_this.order_total_num == 0) {
App.showError('订单商品不可为空');
return false;
}
//如果是外卖
if (_this.foodMode == 20 && _this.intra_region) {
App.showError('当前地址超出配送范围');
return false;
}
//判断支付金额是否为0
if (_this.order_pay_price == 0) {
_this.pay_mode = 1; //余额支付
}
let formData = {
order_mode: _this.foodMode,
pay_mode: _this.pay_mode,
arrive_time: String(_this.arriveTime[0]) + ',' + _this.arriveTime[1],
message: _this.message,
coupon_user_id: _this.coupon_user_id,
flavor: _this.flavor
};
//堂食扫码
if(_this.foodMode == 10 && _this.table_id != ''){
formData.table_id = _this.table_id || '';
formData.people = _this.people || '';
}
// 创建订单-购物车结算
App._post_form('order/cart', formData, function(result) {
callback(result);
}, function(result) {
// fail
}, function() {
// complete
});
},
/**
* 使用优惠券
*/
useCoupon: function(index) {
let _this = this;
_this.coupon_user_id = _this.coupon_list[index].coupon_user_id;
_this.coupon_show = false;
_this.getCartOrder();
},
/**
* 选择预约时间
*/
arrive: function(e) {
let _this = this;
if (e.indexs.length == 1) {
e.indexs[1] = 0;
}
if(e.indexs[0] == 0 && e.indexs[1] == 0 ){
if (_this.foodMode == 10) {
_this.arriveTitle = '立即起菜';
}
if (_this.foodMode == 20) {
_this.arriveTitle = '立即送出';
}
if (_this.foodMode == 30) {
_this.arriveTitle = '立即取餐';
}
}else{
_this.arriveTitle = _this.arriveList[0][e.indexs[0]].text + _this.arriveListData[e.indexs[0]][e.indexs[1]].text;
}
_this.arriveTime[0] = e.indexs[0];
_this.arriveTime[1] = _this.arriveListData[e.indexs[0]][e.indexs[1]].value;
_this.arriveShow = false
},
/**
* 选择预约时间 - 当选择值变化时触发
*/
changeArrive(e) {
const {
columnIndex,
value,
values, // values为当前变化列的数组内容
index,
// 微信小程序无法将picker实例传出来只能通过ref操作
picker = this.$refs.uPicker
} = e
// 当第一列值发生变化时变化第二列(后一列)对应的选项
if (columnIndex === 0) {
// picker为选择器this实例变化第二列对应的选项
picker.setColumnValues(1, this.arriveListData[index])
}
},
/**
* 获取当前用户信息
*/
getUserDetail: function() {
let _this = this;
App._get('user/detail', {}, result => {
_this.userInfo = result.data.detail;
});
},
/**
* 获取订阅消息配置
*/
getTpl: function() {
let _this = this;
App._get('setting/tpl', {
order_mode: _this.foodMode,
table_id: _this.table_id
}, function(result) {
_this.setData(result.data);
});
},
/**
* 获取口味选项配置
*/
getFlavor: function() {
let _this = this;
App._get('order/flavor', {}, function(result) {
_this.flavorList = result.data.data;
});
},
/**
* 页面跳转
*/
goTo: function(url) {
App.goTo(url);
}
}
};
</script>
<style lang="scss" scoped>
.flavor{
font-size: 26rpx;
display: inline-block;
padding: 15rpx;
border-radius: 8rpx;
margin-right: 10rpx;
margin-top: 10rpx;
border: 1rpx solid #f3f4f6;
color: #909193;
}
.flavor-checked{
font-size: 26rpx;
display: inline-block;
padding: 15rpx;
border-radius: 8rpx;
margin-right: 10rpx;
margin-top: 10rpx;
border: 1rpx solid #19be6b;
color: #19be6b;
}
.bottom-cart{
width: 100%;
height: 100rpx;
border-top: 1rpx solid #f3f4f6;
background-color: #fff;
.pay{
display: inline-block;
padding-left: 20rpx;
height: 100rpx;
float: left;
}
}
.coupon {
padding: 20rpx;
border-top: 1rpx solid #f3f4f6;
.item {
padding: 20rpx 30rpx;
border-radius: 15rpx;
border: 1rpx dashed #ff9900;
color: #999;
font-size: 28rpx;
.use {
display: inline-block;
float: right;
margin-top: 30rpx;
}
}
}
</style>