329 lines
8.6 KiB
Vue
329 lines
8.6 KiB
Vue
<template>
|
||
<view class="hm-p-b-100">
|
||
<u-sticky offset-top="0">
|
||
<view class="hm-p-20 hm-font-b hm-col-main hm-text-center hm-bg-f hm-border-t">
|
||
{{table_name}}
|
||
</view>
|
||
</u-sticky>
|
||
<view class="hm-p-lr-20">
|
||
<!-- 商品列表 -->
|
||
<view class="goods-list">
|
||
<view v-for="(item, index) in goods_list" :key="index" class="goods-item">
|
||
<image :src="item.goods_sku.image.path?item.goods_sku.image.url:item.image[0].url">
|
||
</image>
|
||
<view class="selectNumber">
|
||
<view @click="down(item.goods_id,item.goods_sku_id)"
|
||
:class="'default left ' + (item.total_num>=1?'':' default-active')">-</view>
|
||
<view class="num">{{item.total_num}}</view>
|
||
<view @click="up(item.goods_id,item.goods_sku_id)"
|
||
class="default right">+</view>
|
||
</view>
|
||
<view class="hm-line-1 hm-font-24">{{item.goods_name}}</view>
|
||
<view class="hm-line-1 hm-font-24 hm-col-tips">{{item.goods_sku.goods_attr}}</view>
|
||
<view class="hm-line-1 hm-font-24 hm-col-error">
|
||
￥{{item.goods_price}}
|
||
<text class="hm-m-l-10 hm-col-tips">× {{item.total_num}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="hm-p-t-20 hm-text-right hm-font-28 hm-col-tips">
|
||
共{{order_total_num}}份商品，合计：<text class="hm-col-error">￥{{order_total_price}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 口味选择 -->
|
||
<view class="menu-title">
|
||
<view class="hm-p-b-20">顾客备注</view>
|
||
<view class="item">
|
||
<u--input v-model="message" border="none" placeholder="选填：订单备注（50字以内）" maxlength="50"></u--input>
|
||
</view>
|
||
</view>
|
||
<!-- 支付方式 -->
|
||
<view class="menu-title">
|
||
<view class="hm-p-b-20">支付方式</view>
|
||
<view class="item" @click="setPay(2)">
|
||
<view class="hm-dis-block-inline hm-m-r-10">
|
||
<u-icon name="rmb-circle-fill" color="#fa3534"></u-icon>
|
||
</view>
|
||
餐后付款
|
||
<view class="hm-dis-block-inline hm-fr" v-if="pay_mode==2">
|
||
<u-icon name="checkbox-mark" color="#fa3534" size="30"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="item" @click="setPay(3)">
|
||
<view class="hm-dis-block-inline hm-m-r-10">
|
||
<u-icon name="checkmark-circle-fill" color="#19be6b"></u-icon>
|
||
</view>
|
||
线下已付
|
||
<view class="hm-dis-block-inline hm-fr" v-if="pay_mode==3">
|
||
<u-icon name="checkbox-mark" color="#fa3534" size="30"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view v-if="userInfo" class="item" @click="setPay(1)">
|
||
<view class="hm-m-r-10 hm-dis-block-inline">
|
||
<u-icon name="red-packet-fill" :color="Number(userInfo.money) < Number(order_pay_price)?'#bbb':'#FF9900'"></u-icon>
|
||
</view>
|
||
<text :class="Number(userInfo.money) < Number(order_pay_price)?'hm-col-tips':''">
|
||
余额支付(<text :class="Number(userInfo.money) < Number(order_pay_price)?'hm-font-24 hm-font-b':'hm-col-error hm-font-b hm-font-24'">￥{{userInfo.money}}</text>)
|
||
</text>
|
||
<text v-if="Number(userInfo.money) < Number(order_pay_price)" class="hm-col-error hm-font-24 hm-font-b hm-m-l-50">余额不足</text>
|
||
<view class="hm-fr hm-dis-block-inline" v-if="pay_mode==1">
|
||
<u-icon name="checkbox-mark" color="#fa3534" size="30"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 技术支持 -->
|
||
<view class="hm">
|
||
{{applet.copyright}} <text class="v">V{{applet.version}}</text>
|
||
</view>
|
||
<!-- 提交订单 -->
|
||
<view class="hm-footer-fixed hm-bg-f hm-border-t">
|
||
<view class="hm-w-b100 hm-p-l-20">
|
||
实付款：<text class="hm-col-error hm-font-b">￥{{order_pay_price}}</text>
|
||
<view class="hm-dis-block-inline hm-fr hm-m-r-20 hm-m-t-10">
|
||
<u-button @click="submitOrder" type="error" text="提交订单"></u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
let App = getApp();
|
||
export default {
|
||
data() {
|
||
return {
|
||
applet:{},
|
||
table_id:'',
|
||
table_name:'',
|
||
user_id:'',
|
||
|
||
userInfo: '', //用户详情
|
||
pay_mode: 2, //支付模式 0微信，1余额
|
||
message: '', //用户留言
|
||
|
||
goods_list: [], //购物车商品列表
|
||
is_order:1,//1点单 0加单
|
||
order_pay_price: "0.00", //实际支付金额
|
||
order_total_num: 0, //商品总数
|
||
order_total_price: "0.00", //商品实际金额
|
||
has_error: false,
|
||
error_msg: "", //错误信息
|
||
|
||
disabled: false
|
||
};
|
||
},
|
||
components: {},
|
||
props: {},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad: function(options) {
|
||
let _this = this;
|
||
_this.user_id = options.user_id || '';
|
||
_this.table_id = options.table_id;
|
||
_this.applet = App.getApplet();
|
||
_this.getCartOrder(); // 获取当前订单信息
|
||
if(_this.user_id){
|
||
_this.getUserDetail(); //获取当前用户详情
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面显示
|
||
*/
|
||
onShow: function() {},
|
||
methods: {
|
||
|
||
/**
|
||
* 获取购物车订单列表
|
||
*/
|
||
getCartOrder: function() {
|
||
let _this = this;
|
||
// 获取订单信息回调方法
|
||
let callback = function(result) {
|
||
if (result.code !== 1) {
|
||
App.showError(result.msg);
|
||
return false;
|
||
}
|
||
// 显示错误信息
|
||
if (result.data.has_error) {
|
||
_this.has_error = true;
|
||
_this.error_msg = result.data.error_msg;
|
||
App.showError(_this.error_msg);
|
||
}
|
||
_this.setData(result.data);
|
||
};
|
||
// 购物车结算
|
||
App._get('order/cart', {
|
||
table_id:_this.table_id,
|
||
}, function(result) {
|
||
callback(result);
|
||
});
|
||
},
|
||
/**
|
||
* 加法
|
||
*/
|
||
mathadd(arg1, arg2) {
|
||
return (Number(arg1) + Number(arg2)).toFixed(2);
|
||
},
|
||
|
||
/**
|
||
* 乘法
|
||
*/
|
||
mathcheng(arg1, arg2) {
|
||
return (Number(arg1) * Number(arg2)).toFixed(2);
|
||
},
|
||
|
||
|
||
/**
|
||
* 设置支付模式
|
||
*/
|
||
setPay(pay_mode) {
|
||
let _this = this;
|
||
if(Number(_this.userInfo.money) < Number(_this.order_pay_price)){
|
||
App.showSuccess('余额不足');
|
||
return false;
|
||
}
|
||
_this.pay_mode = pay_mode;
|
||
},
|
||
|
||
/**
|
||
* 递增 - 多规格
|
||
*/
|
||
up(goods_id,goods_sku_id) {
|
||
let _this = this; // 后端同步更新
|
||
App._post_form('cart/add', {
|
||
goods_id: goods_id,
|
||
goods_num: 1,
|
||
goods_sku_id: goods_sku_id,
|
||
table_id:_this.table_id
|
||
}, () => {
|
||
_this.getCartOrder();
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 递减指定的商品数量
|
||
*/
|
||
down(goods_id,goods_sku_id) {
|
||
let _this = this; // 后端同步更新
|
||
App._post_form('cart/sub', {
|
||
goods_id: goods_id,
|
||
goods_sku_id: goods_sku_id,
|
||
table_id:_this.table_id
|
||
}, () => {
|
||
_this.getCartOrder();
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 订单提交
|
||
*/
|
||
submitOrder: function() {
|
||
let _this = this;
|
||
if (_this.disabled) {
|
||
return false;
|
||
}
|
||
if (_this.has_error) {
|
||
App.showError(_this.error_msg);
|
||
return false;
|
||
}
|
||
//判断是否为空订单
|
||
if (_this.order_total_num == 0) {
|
||
App.showError('订单商品不可为空');
|
||
return false;
|
||
}
|
||
// 订单创建成功后回调--微信支付
|
||
let callback = function(result) {
|
||
if (result.code === -10) {
|
||
App.showError(result.msg, function() {
|
||
App.goTo('order/index'); // 跳转到订单列表
|
||
});
|
||
return false;
|
||
}
|
||
App.showSuccess('下单成功', function() {
|
||
App.goTo('order/index'); // 跳转到订单列表
|
||
});
|
||
return true;
|
||
};
|
||
// 按钮禁用, 防止二次提交
|
||
_this.disabled = true; // 创建订单-购物车结算
|
||
App._post_form('order/cart', {
|
||
pay_mode: _this.pay_mode,
|
||
table_id:_this.table_id,
|
||
user_id: _this.user_id,
|
||
message: _this.message
|
||
}, function(result) {
|
||
// success
|
||
uni.removeStorageSync('table_id'); //清除餐桌号
|
||
callback(result);
|
||
}, function(result) {
|
||
// fail
|
||
}, function() {
|
||
// complete
|
||
// 解除按钮禁用
|
||
_this.disabled = false;
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 获取当前用户信息
|
||
*/
|
||
getUserDetail:function() {
|
||
let _this = this;
|
||
App._get('user/getUserId', {
|
||
user_id:_this.user_id
|
||
}, result => {
|
||
_this.userInfo = result.data.detail;
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 页面跳转
|
||
*/
|
||
goTo: function(url) {
|
||
App.goTo(url);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.goods-list{
|
||
margin-top: 20rpx;
|
||
padding: 20rpx;
|
||
background-color: #fff;
|
||
border-radius: 10rpx;
|
||
.goods-item{
|
||
border-bottom: 1rpx solid #f3f4f6;
|
||
padding: 10rpx 0;
|
||
height: 100rpx;
|
||
image{
|
||
height: 100rpx;
|
||
width: 100rpx;
|
||
border-radius: 10rpx;
|
||
float: left;
|
||
margin-right: 20rpx;
|
||
}
|
||
.selectNumber{
|
||
float: right;
|
||
display: inline-block;
|
||
margin-top: 25rpx;
|
||
}
|
||
}
|
||
}
|
||
.menu-title{
|
||
margin-top: 20rpx;
|
||
padding: 20rpx 20rpx 0rpx 20rpx;
|
||
color: #303133;
|
||
font-size: 28rpx;
|
||
background-color: #fff;
|
||
border-radius: 10rpx;
|
||
.item{
|
||
border-top: 1rpx solid #f3f4f6;
|
||
padding: 20rpx 0;
|
||
}
|
||
}
|
||
|
||
</style>
|