250 lines
6.5 KiB
Vue
250 lines
6.5 KiB
Vue
<template>
|
||
<view>
|
||
<view class="shop">
|
||
<image :src="shop.logo"></image>
|
||
<view class="hm-col-0 hm-font-b hm-font-32">付款给商家</view>
|
||
<view class="hm-col-tips hm-font-26 hm-p-t-10">名称：{{shop.shop_name}}</view>
|
||
</view>
|
||
<view class="pay">
|
||
<view class="hm-font-28 hm-col-tips">
|
||
金额<text class="hm-fr">请询问服务员后输入</text>
|
||
</view>
|
||
<view class="hm-p-tb-50">
|
||
<u--input :customStyle="{height:'80rpx',padding:'0rpx'}"
|
||
fontSize="24" prefixIcon="rmb"
|
||
placeholder="请输入金额" border="bottom"
|
||
v-model="money" type="digit"
|
||
clearable
|
||
:prefixIconStyle="{color:'#000',fontSize:'80rpx',fontWeight:'bold'}">
|
||
</u--input>
|
||
</view>
|
||
<view class="hm-p-tb-20">
|
||
<text class="hm-col-0 hm-font-28 hm-font-b">买单备注</text>
|
||
<view class="notes">
|
||
<u--input placeholder="添加备注(20个汉字以内)"
|
||
border="bottom"
|
||
v-model="notes"
|
||
clearable>
|
||
</u--input>
|
||
</view>
|
||
</view>
|
||
<view class="hm-p-tb-20 hm-col-0 hm-font-28 hm-font-b">
|
||
实际应付 <text v-if="money" class="hm-fr">合计 <text class="hm-col-error">￥{{money}}</text></text>
|
||
</view>
|
||
<view class="hm-p-tb-50">
|
||
<view class="hm-p-lr-b25">
|
||
<!-- #ifndef H5 -->
|
||
<u-button type="success" text="确认买单" @click="payment">
|
||
</u-button>
|
||
<!-- #endif -->
|
||
<!-- #ifdef H5 -->
|
||
<u-button type="success" text="确认去买单" @click="cashier">
|
||
</u-button>
|
||
<!-- #endif -->
|
||
</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">{{money}}</text>
|
||
</view>
|
||
<view class="hm-font-28 hm-col-content">线上买单</view>
|
||
</view>
|
||
<view class="hm-p-20 hm-border-t" @click="type = 30">
|
||
<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="type==30" size="25" color="#fa3534"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="hm-p-20 hm-border-t hm-border-b" @click="type = 40">
|
||
<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="type==40" size="25" color="#fa3534"></u-icon>
|
||
</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>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
let App = getApp();
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
applet: {},
|
||
shop:null,
|
||
shop_id:'',
|
||
type: 30,//默认30微信支付 40支付宝支付
|
||
cashier_show: false,//收银台
|
||
money: '', //金额
|
||
notes:'',
|
||
};
|
||
},
|
||
|
||
components: {},
|
||
props: {},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad(options) {
|
||
let _this = this;
|
||
_this.shop_id = options.shop_id;
|
||
// #ifdef MP-ALIPAY
|
||
_this.type = 40;
|
||
//#endif
|
||
_this.applet = uni.getStorageSync('applet');
|
||
_this.getShop();
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面显示
|
||
*/
|
||
onShow: function() {},
|
||
methods: {
|
||
/**
|
||
* 打开收银台
|
||
*/
|
||
cashier:function(){
|
||
let _this = this;
|
||
let money = Number(_this.money);
|
||
if (money <= 0) {
|
||
App.showError('买单金额必须大于0');
|
||
return false;
|
||
}
|
||
_this.cashier_show = true;
|
||
},
|
||
/**
|
||
* 发起充值付款
|
||
*/
|
||
payment: function() {
|
||
let _this = this;
|
||
let money = Number(_this.money);
|
||
if (money <= 0) {
|
||
App.showError('买单金额必须大于0');
|
||
return false;
|
||
}
|
||
// 订单创建成功后回调
|
||
let callback = function(result) {
|
||
_this.cashier_show = false;
|
||
if (result.code === -10) {
|
||
App.showError(result.msg);
|
||
return false;
|
||
}
|
||
// 发起微信支付
|
||
// #ifdef MP-WEIXIN
|
||
uni.requestPayment({
|
||
timeStamp: result.data.timeStamp,
|
||
nonceStr: result.data.nonceStr,
|
||
package: result.data.package,
|
||
signType: result.data.signType,
|
||
paySign: result.data.paySign,
|
||
success: function(res) {
|
||
App.showSuccess('买单成功');
|
||
},
|
||
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.h5_url;
|
||
//#endif
|
||
//#endif
|
||
// #ifdef MP-ALIPAY
|
||
uni.requestPayment({
|
||
orderInfo: result.data.trade_no,
|
||
success: function(res) {
|
||
if(res.resultCode != '9000'){
|
||
App.showError(res.memo);
|
||
return false;
|
||
}
|
||
App.showSuccess('买单成功');
|
||
}
|
||
});
|
||
//#endif
|
||
};
|
||
// 显示loading
|
||
uni.showLoading({
|
||
title: '正在处理...'
|
||
});
|
||
App._post_form('user.order/paybill', {
|
||
shop_id: _this.shop_id,
|
||
money: money,
|
||
type: _this.type,
|
||
notes: _this.notes
|
||
}, function(result) {
|
||
callback(result);
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 获取当前用户信息
|
||
*/
|
||
getShop() {
|
||
let _this = this;
|
||
App._get('shop/detail', {
|
||
shop_id: _this.shop_id
|
||
}, result => {
|
||
_this.shop = result.data.detail;
|
||
uni.setStorageSync('shop', result.data.detail);
|
||
});
|
||
},
|
||
/**
|
||
* 转跳指定的页面
|
||
*/
|
||
goTo(url) {
|
||
App.goTo(url); // 转跳指定的页面
|
||
}
|
||
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.shop{
|
||
padding: 50rpx;
|
||
image{
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
float: right;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.pay{
|
||
padding: 20rpx 50rpx;
|
||
background-color: #fff;
|
||
border-top-left-radius: 50rpx;
|
||
border-top-right-radius: 50rpx;
|
||
.notes{
|
||
display: inline-block;
|
||
width: 525rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
</style>
|