新增综合收银台
This commit is contained in:
唐明明
408
pages/pay/pay.vue
Normal file
408
pages/pay/pay.vue
Normal file
@@ -0,0 +1,408 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="paymentTop">
|
||||
<view class="paymentTop-name">
|
||||
需支付金额（元）
|
||||
</view>
|
||||
<view class="paymentTop-price">
|
||||
<text>￥</text>{{payPrice}}
|
||||
</view>
|
||||
<view class="paymentTop-text">订单号：{{orderNo}}</view>
|
||||
</view>
|
||||
<view class="paymentList">
|
||||
<view class="paymentList-label" @click="payType('wechat')">
|
||||
<view class="paymentList-left">
|
||||
<image class="paymentList-icon" src="@/static/imgs/payWechat.png" mode="widthFix"></image>微信支付
|
||||
</view>
|
||||
<view class="paymentList-right">
|
||||
<image class="paymentList-img" :src="Payment == 'wechat' ? '/static/imgs/payCheck_active.png' : '/static/imgs/payCheck.png'" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="paymentList-label" @click="payType('umsMp')">
|
||||
<view class="paymentList-left">
|
||||
<image class="paymentList-icon" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/2a4ea8f9f714e39088648383d5c52f32.png" mode="widthFix"></image>微信（银联商务）
|
||||
</view>
|
||||
<view class="paymentList-right">
|
||||
<image class="paymentList-img" :src="Payment == 'umsMp' ? '/static/imgs/payCheck_active.png' : '/static/imgs/payCheck.png'" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="paymentList-label" @click="payType('umsAli')">
|
||||
<view class="paymentList-left">
|
||||
<image class="paymentList-icon" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/4aaf302e9d8a90c21c39b3d2f39cebc2.png" mode="widthFix"></image>支付宝（银联商务）
|
||||
</view>
|
||||
<view class="paymentList-right">
|
||||
<image class="paymentList-img" :src="Payment == 'umsAli' ? '/static/imgs/payCheck_active.png' : '/static/imgs/payCheck.png'" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="paymentBtn" v-if="Payment == 'umsMp'">
|
||||
<!-- web.douhuotest.douhuofalv dev=0是线上 dev=1是线下 -->
|
||||
<wx-open-launch-weapp
|
||||
username="gh_918c81628d6f"
|
||||
:path="'pages/pay/pay?type=h5&dev=0&trade_id=' + tradeId + '&token=' + token"
|
||||
>
|
||||
<script type="text/wxtag-template">
|
||||
<style>
|
||||
.gobtn {
|
||||
width: 280px;
|
||||
background-color: #da2b56;
|
||||
color: #ffffff;
|
||||
border-radius: 5px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 18px;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
<button type="default" class="gobtn">打开小程序收银台</button>
|
||||
</script>
|
||||
</wx-open-launch-weapp>
|
||||
</view>
|
||||
|
||||
<view class="paymentBtn" v-else-if="Payment == 'dgwx'">
|
||||
<button type="default" class="paymentBtn-go" :disabled="disabled" @click="payChickDg">
|
||||
打开小程序收银台
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view class="paymentBtn" v-else>
|
||||
<button class="paymentBtn-go" type="default" @click="payClick" :disabled="disabled">立即支付</button>
|
||||
</view>
|
||||
|
||||
<!-- 支付成功弹出 -->
|
||||
<view class="payMakeBack" :class="{active: payMakePop}" catchtouchmove='true'></view>
|
||||
<view class="payMakeCont" :class="{active: payMakePop}" catchtouchmove='true'>
|
||||
<image class="payMakeCont-img" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/5be61f2fb4f14736867078de48e09355.png" mode="widthFix"></image>
|
||||
<view class="payMakeCont-title">
|
||||
支付成功
|
||||
</view>
|
||||
<view class="payMakeCont-price">
|
||||
<text>￥</text>{{payPrice}}
|
||||
</view>
|
||||
<view class="payMakeCont-tips">
|
||||
微信支付
|
||||
</view>
|
||||
<view class="payMakeCont-btn">
|
||||
<view class="payMakeCont-go" @click="payMakeSkip">完成</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const jweixin = require('jweixin-module');
|
||||
import { Apply, Wechat, authFollow } from '@/apis/interfaces/index'
|
||||
import { payInfo, payWechat, payUms } from '@/apis/interfaces/pay'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tradeId : '',
|
||||
token : this.$store.getters.getToken,
|
||||
orderNo : '',
|
||||
orderId : '',
|
||||
orderType : '',
|
||||
payPrice : '0.00',
|
||||
Payment : 'wechat',
|
||||
payMakePop : false,
|
||||
disabled : false
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
let { orderId, orderType } = this.$Route.query
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask : true
|
||||
})
|
||||
payInfo({
|
||||
order_type : orderType,
|
||||
order_id : orderId
|
||||
}).then(res => {
|
||||
let { price, order_no, order_id } = res;
|
||||
this.orderId = order_id
|
||||
this.orderNo = order_no
|
||||
this.orderType = orderType
|
||||
this.payPrice = price
|
||||
uni.hideLoading()
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 选择支付方式
|
||||
payType(type) {
|
||||
if(this.Payment === type) return
|
||||
this.Payment = type
|
||||
if(type === 'umsMp') this.umsPay()
|
||||
},
|
||||
// 微信支付
|
||||
wechatPay(){
|
||||
let openId = uni.getStorageSync('openId')
|
||||
if(openId){
|
||||
payWechat({
|
||||
order_type: this.orderType,
|
||||
order_id : this.orderId,
|
||||
openid : openId,
|
||||
use_fire : 0,
|
||||
fire : 0,
|
||||
type : payType
|
||||
}).then(res => {
|
||||
let wxConfig = JSON.parse(res.wechat)
|
||||
jweixin.config({
|
||||
appId : wxConfig.appId,
|
||||
debug : false,
|
||||
jsApiList : ['chooseWXPay'],
|
||||
signature : wxConfig.signature,
|
||||
nonceStr : wxConfig.nonceStr,
|
||||
timestamp : wxConfig.timestamp,
|
||||
})
|
||||
jweixin.ready(() => {
|
||||
jweixin.chooseWXPay({
|
||||
timestamp : wxConfig.timeStamp,
|
||||
nonceStr : wxConfig.nonceStr,
|
||||
package : wxConfig.package,
|
||||
signType : wxConfig.signType,
|
||||
paySign : wxConfig.paySign,
|
||||
success : payRes => {
|
||||
this.payMakePop = true
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '取消支付',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
})
|
||||
}
|
||||
// 获取微信授权信息-获取oppid
|
||||
authFollow({
|
||||
url: 'https://web.douhuofalv.com/webWechat/index'
|
||||
// url: 'https://web.douhuotest.douhuofalv.com/webWechat/index'
|
||||
}).then(res => {
|
||||
window.location.href = res
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
// 银联支付
|
||||
umsPay(){
|
||||
let payType = this.Payment === 'umsMp' ? 'mp' : 'mp_alipay'
|
||||
payUms({
|
||||
order_type: this.orderType,
|
||||
order_id : this.orderId,
|
||||
use_fire : 0,
|
||||
fire : 0,
|
||||
type : payType
|
||||
}).then(res => {
|
||||
let { trade_id } = res;
|
||||
this.tradeId = trade_id
|
||||
switch (payType){
|
||||
case 'mp':
|
||||
this.tradeId = res.trade_id
|
||||
break;
|
||||
case 'mp_alipay':
|
||||
this.tradeId = res.trade_id
|
||||
window.location.href = res.alipay
|
||||
break;
|
||||
}
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
// 提交支付
|
||||
payClick(){
|
||||
switch(this.Payment){
|
||||
case 'umsAli':
|
||||
this.umsPay()
|
||||
break;
|
||||
case 'wechat':
|
||||
this.wechatPay()
|
||||
break;
|
||||
}
|
||||
},
|
||||
// 支付成功弹出
|
||||
payMakeSkip() {
|
||||
this.payMakePop = false
|
||||
this.$Router.back()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
background: #f4f4f4;
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.paymentTop {
|
||||
padding: $padding * 4 $padding;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
color: #666666;
|
||||
.paymentTop-name {
|
||||
padding-left: $padding;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.paymentTop-price {
|
||||
color: $mian-color;
|
||||
font-size: $title-size + 40;
|
||||
font-weight: 600;
|
||||
margin: $margin - 10 0;
|
||||
text {
|
||||
font-size: $title-size + 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.paymentList {
|
||||
padding: 0 $padding;
|
||||
box-sizing: border-box;
|
||||
.paymentList-label {
|
||||
background-color: #ffffff;
|
||||
border-radius: $radius;
|
||||
padding: $padding + 10 $padding;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: $margin + 10;
|
||||
display: flex;
|
||||
.paymentList-left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
line-height: 40rpx;
|
||||
.paymentList-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: $margin - 10;
|
||||
}
|
||||
}
|
||||
.paymentList-right {
|
||||
display: flex;
|
||||
.paymentList-price {
|
||||
color: $mian-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
.paymentList-tips {
|
||||
background-image: linear-gradient(to left, #FF4646, #FF7676);
|
||||
height: 44rpx;
|
||||
line-height: 44rpx;
|
||||
font-size: $title-size-sm;
|
||||
color: #ffffff;
|
||||
opacity: .9;
|
||||
border-radius: $radius * 2;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
.paymentList-arrow {
|
||||
width: 14rpx;
|
||||
margin: 10rpx 0 0 20rpx;
|
||||
}
|
||||
.paymentList-img {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-top: 4rpx;
|
||||
margin-left: $margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.paymentBtn {
|
||||
text-align: center;
|
||||
padding: 0 $padding 100rpx;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
.paymentBtn-go {
|
||||
position: relative;
|
||||
width: 280px;
|
||||
background-color: #da2b56;
|
||||
color: #ffffff;
|
||||
border-radius: 5px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 18px;
|
||||
&[disabled] {
|
||||
background-color: #eba5a5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 支付成功弹出
|
||||
.payMakeBack {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
display: none;
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.payMakeCont {
|
||||
position: fixed;
|
||||
z-index: 1001;
|
||||
left: 0;
|
||||
bottom: -10000%;
|
||||
height: 70vh;
|
||||
width: 100vw;
|
||||
background-color: #f7f7f7;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
padding-top: 100rpx;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
transition: .2;
|
||||
&.active {
|
||||
bottom: 0;
|
||||
}
|
||||
.payMakeCont-img {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
.payMakeCont-title {
|
||||
margin: 5rpx 0 30rpx 40rpx;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.payMakeCont-price {
|
||||
font-size: 78rpx;
|
||||
font-weight: 600;
|
||||
text {
|
||||
font-size: 36rpx;
|
||||
width: 40rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.payMakeCont-tips {
|
||||
font-size: 28rpx;
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
.payMakeCont-btn {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
padding: 80rpx 30rpx 100rpx;
|
||||
box-sizing: border-box;
|
||||
.payMakeCont-go {
|
||||
background-color: #da2b56;
|
||||
line-height: 98rpx;
|
||||
border-radius: 20rpx;
|
||||
color: #ffffff;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user