555 lines
15 KiB
Vue
555 lines
15 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="paymentTop">
|
||
<view class="paymentTop-name">
|
||
需支付金额（元）
|
||
</view>
|
||
<view class="paymentTop-price">
|
||
<text>￥</text>{{payPrice}}
|
||
</view>
|
||
<view class="paymentTop-text">
|
||
与人方便,与己方便,珍惜时间,请先付款
|
||
</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('umsAli')">
|
||
<view class="paymentList-left">
|
||
<image class="paymentList-icon" src="@/static/imgs/aliPay.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 class="paymentList-label" @click="payType('umsMp')">
|
||
<view class="paymentList-left">
|
||
<image class="paymentList-icon" src="@/static/imgs/minPay.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('dgAli')">
|
||
<view class="paymentList-left">
|
||
<image class="paymentList-icon" src="@/static/imgs/aliPay.png" mode="widthFix"></image>支付宝（汇付）
|
||
</view>
|
||
<view class="paymentList-right">
|
||
<image class="paymentList-img" :src="Payment == 'dgAli' ? '/static/imgs/payCheck_active.png' : '/static/imgs/payCheck.png'" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="paymentList-label" @click="payType('dgwx')" >
|
||
<view class="paymentList-left">
|
||
<image class="paymentList-icon" src="@/static/imgs/minPay.png" mode="widthFix"></image>微信（汇付）
|
||
</view>
|
||
<view class="paymentList-right">
|
||
<image class="paymentList-img" :src="Payment == 'dgwx' ? '/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=1&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="@/static/imgs/payMakeCont_icon.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 { ums, umsState } from '@/apis/interfaces/pay'
|
||
import { servicePay, serviceUms, serviceDg, expandPay, expandUms, expandDg, entrustPay, entrustUms, entrustDg, synDiffPay, synDiffUms, synDiffDg } from '@/apis/interfaces/pay'
|
||
export default {
|
||
data() {
|
||
return {
|
||
token : '', // 登录token
|
||
orderId : '', // 微信支付id
|
||
jumpUrlDg : '', // 抖巩支付
|
||
tradeId : '', // 微信支付id
|
||
Payment : 'wechat', // 支付类型
|
||
applyData : '', // 支付数据
|
||
disabled : false, // 按钮状态
|
||
getState : false, // 获取订单状态
|
||
payMakePop : false, // 支付成功弹框
|
||
payPrice : '', // 支付金额
|
||
payForm : '', // 支付类型
|
||
}
|
||
},
|
||
onShow() {
|
||
console.log(this.$Route.query)
|
||
this.token = this.$store.getters.getToken
|
||
this.payPrice = this.$Route.query.price
|
||
this.payForm = this.$Route.query.payForm
|
||
<<<<<<< HEAD
|
||
this.orderId = this.$Route.query.id ?this.$Route.query.id : this.$Route.query.orderId
|
||
=======
|
||
this.orderId = this.$Route.query.id ?this.$Route.query.id: this.$Route.query.orderId
|
||
>>>>>>> b84a866a4e455f2f8d98cc3b564298c15253ed6d
|
||
},
|
||
methods: {
|
||
// 选择支付方式
|
||
payType(type) {
|
||
|
||
if(this.Payment === type) return
|
||
this.Payment = type
|
||
if(type === 'umsMp'){
|
||
uni.showLoading({
|
||
title: '加载中...',
|
||
mask : true
|
||
})
|
||
this.UMSPay()
|
||
} else if(type === 'dgwx') {
|
||
uni.showLoading({
|
||
title: '加载中...',
|
||
mask : true
|
||
})
|
||
this.dgwxPay()
|
||
}
|
||
},
|
||
|
||
// 斗拱支付
|
||
dgwxPay(){
|
||
let payType = this.Payment == 'dgwx' ? 'mp' : 'mp_alipay'
|
||
|
||
let NewUrl = ''
|
||
// 是否是补差价订单
|
||
if(this.$Route.query.style == 'diff') {
|
||
NewUrl = synDiffDg
|
||
} else {
|
||
let apiUrl = ''
|
||
if(this.payForm == 'service') {
|
||
apiUrl = serviceDg
|
||
} else if (this.payForm == 'expand') {
|
||
apiUrl = expandDg
|
||
} else if (this.payForm == 'entrust') {
|
||
apiUrl = entrustDg
|
||
}
|
||
NewUrl = apiUrl
|
||
}
|
||
NewUrl(this.orderId, {type: payType, app_schema: 'weixin://'}).then(res => {
|
||
let { params, trade_id } = res;
|
||
this.getState = true
|
||
switch (payType){
|
||
case 'mp':
|
||
this.tradeId = trade_id
|
||
this.jumpUrlDg = JSON.parse(params.miniapp_data)
|
||
this.Payment = 'dgwx'
|
||
break;
|
||
case 'mp_alipay':
|
||
this.tradeId = trade_id
|
||
window.location.href = `https://ds.alipay.com/?scheme=` + encodeURIComponent(params.jump_url)
|
||
this.Payment = 'dgwxalipay'
|
||
break;
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
|
||
// 新银联商务支付
|
||
UMSPay(){
|
||
let payType = this.Payment == 'umsMp' ? 'mp' : 'mp_alipay'
|
||
let NewUrl = ''
|
||
// 是否是补差价订单
|
||
if(this.$Route.query.style == 'diff') {
|
||
NewUrl = synDiffUms
|
||
} else {
|
||
let apiUrl = ''
|
||
if(this.payForm == 'service') {
|
||
apiUrl = serviceUms
|
||
} else if (this.payForm == 'expand') {
|
||
apiUrl = expandUms
|
||
} else {
|
||
apiUrl = entrustUms
|
||
}
|
||
NewUrl = apiUrl
|
||
}
|
||
|
||
NewUrl(this.orderId, {type: payType}).then(res => {
|
||
this.getState = true
|
||
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'
|
||
})
|
||
})
|
||
},
|
||
|
||
// 抖供支付
|
||
payChickDg() {
|
||
window.location.href = this.jumpUrlDg.scheme_code
|
||
},
|
||
|
||
// 微信支付
|
||
payClick() {
|
||
let newOpenId = uni.getStorageSync('openId')
|
||
if(this.Payment === 'umsMp' || this.Payment === 'umsAli'){
|
||
this.UMSPay()
|
||
return
|
||
} else if (this.Payment === 'dgwx' || this.Payment === 'dgAli') {
|
||
this.dgwxPay()
|
||
return
|
||
}
|
||
|
||
if(newOpenId) {
|
||
let NewUrl = ''
|
||
// 是否是补差价订单
|
||
if(this.$Route.query.style == 'diff') {
|
||
NewUrl = synDiffPay
|
||
} else {
|
||
let apiUrl = ''
|
||
if(this.payForm == 'service') {
|
||
apiUrl = servicePay
|
||
} else if (this.payForm == 'expand') {
|
||
apiUrl = expandPay
|
||
} else {
|
||
apiUrl = entrustPay
|
||
}
|
||
NewUrl = apiUrl
|
||
}
|
||
|
||
NewUrl(this.$Route.query.id, {
|
||
openid : newOpenId
|
||
}).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 => {
|
||
// 先跳支付成功
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
icon: "none"
|
||
})
|
||
this.disabled = true
|
||
|
||
this.payMakePop = true
|
||
},
|
||
cancel: payCancel => {
|
||
if(this.payForm == 'service') {
|
||
// 跳到年费单
|
||
this.$Router.replace({name: 'YearOrder'})
|
||
} else if (this.payForm == 'expand') {
|
||
// 跳到拓展单
|
||
this.$Router.replace({name: 'ExpandOrder'})
|
||
} else {
|
||
// 跳到委托单
|
||
this.$Router.replace({name: 'EntrustOrder'})
|
||
}
|
||
},
|
||
fail: payfail => {
|
||
// 取消支付
|
||
uni.showToast({
|
||
title: '取消支付',
|
||
icon: 'none'
|
||
})
|
||
this.disabled = true
|
||
if(this.payForm == 'service') {
|
||
// 跳到年费单
|
||
setTimeout(()=>{
|
||
this.$Router.replace({name: 'YearOrder'})
|
||
},1000)
|
||
} else if (this.payForm == 'expand') {
|
||
// 跳到拓展单
|
||
setTimeout(()=>{
|
||
this.$Router.replace({name: 'ExpandOrder'})
|
||
},1000)
|
||
} else {
|
||
// 跳到委托单
|
||
setTimeout(()=>{
|
||
this.$Router.replace({name: 'EntrustOrder'})
|
||
},1000)
|
||
}
|
||
}
|
||
});
|
||
});
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
return
|
||
}
|
||
|
||
// 获取微信授权信息-获取oppid
|
||
authFollow({
|
||
// url: 'https://web.douhuofalv.com/webWechat/index?id=' + this.$Route.query.id + '&style=' + this.$Route.query.style + '&price=' + this.$Route.query.price
|
||
url: 'https://web.douhuotest.douhuofalv.com/webWechat/index?id=' + this.orderId + '&style=' + this.$Route.query.style + '&price=' + this.$Route.query.price
|
||
}).then(res => {
|
||
window.location.href = res
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
|
||
// 支付成功弹出
|
||
payMakeSkip() {
|
||
this.payMakePop = false
|
||
if(this.payForm == 'service') {
|
||
// 跳到年费单
|
||
this.$Router.replace({name: 'YearOrder'})
|
||
} else if (this.payForm == 'expand') {
|
||
// 跳到拓展单
|
||
this.$Router.replace({name: 'ExpandOrder'})
|
||
} else {
|
||
// 跳到委托单
|
||
this.$Router.replace({name: 'EntrustOrder'})
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</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> |