[抖火申请支付]
This commit is contained in:
344
pages/sheet/payment.vue
Normal file
344
pages/sheet/payment.vue
Normal file
@@ -0,0 +1,344 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="paymentTop">
|
||||
<view class="paymentTop-name">
|
||||
订单支付
|
||||
<text>与人方便,与己方便,珍惜时间,请先付款</text>
|
||||
</view>
|
||||
<img class="paymentTop-img" src="@/static/imgs/payment.png">
|
||||
</view>
|
||||
<view class="paymentShow">
|
||||
<img class="paymentShow-img" src="@/static/imgs/payment_back.png">
|
||||
<view class="paymentShow-text">
|
||||
<view class="paymentShow-top">
|
||||
<view class="paymentShow-top-name">订单名称：<text>{{style == 'chajia' ? '补差价' : '咨询服务费'}}</text></view>
|
||||
<view class="paymentShow-top-price">￥{{price}}</view>
|
||||
</view>
|
||||
<view class="paymentShow-tips">
|
||||
订单描述：{{remark ? remark : '暂无描述'}}
|
||||
</view>
|
||||
<view class="paymentShow-top-name" style="margin-bottom: 10px; color: #9a9a9a;">支付方式：</view>
|
||||
<!-- <view @click="payTypeVal = 'wxpay'" class="paymentList-label">
|
||||
<image class="paymentList-icon" src="@/static/imgs/payWechat.png" mode="widthFix"></image>
|
||||
<image class="paymentList-img" :src="payTypeVal == 'wxpay' ? '/static/imgs/payCheck_active.png' : '/static/imgs/payCheck.png'" mode="widthFix"></image>
|
||||
微信
|
||||
</view> -->
|
||||
<view @click="onUmsPay('mp')" class="paymentList-label">
|
||||
<!-- <image class="paymentList-icon" src="@/static/imgs/minPay.png" mode="widthFix"></image> -->
|
||||
<image class="paymentList-img" :src="payTypeVal == 'umsWx' ? '/static/imgs/payCheck_active.png' : '/static/imgs/payCheck.png'" mode="widthFix"></image>微信支付（银联商务）
|
||||
</view>
|
||||
<view @click="payTypeVal = 'alipay'" class="paymentList-label">
|
||||
<!-- <image class="paymentList-icon" src="@/static/imgs/aliPay.png" mode="widthFix"></image> -->
|
||||
<image class="paymentList-img" :src="payTypeVal == 'alipay' ? '/static/imgs/payCheck_active.png' : '/static/imgs/payCheck.png'" mode="widthFix"></image>
|
||||
支付宝（银联商务）
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="paymentBtn" v-if="payTypeVal != 'umsWx'">
|
||||
<button type="default" class="paymentBtn-go" :disabled="disabled" @click="payChick">
|
||||
立即支付
|
||||
</button>
|
||||
</view>
|
||||
<view class="paymentBtn" v-else>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const jweixin = require('jweixin-module');
|
||||
import { applyPay, diffPay, authFollow } from '@/apis/interfaces/index'
|
||||
import { umsDiff, umsOrder, umsState } from '@/apis/interfaces/pay.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
payTypeVal : '', // 支付方式
|
||||
tradeId : '', // 查询id
|
||||
getState : false, // 查询支付结果
|
||||
token : '', // 用户token
|
||||
style : '', // 支付类型
|
||||
price : '', // 价格
|
||||
disabled : false // 按钮状态
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
onShow() {
|
||||
if(this.getState && this.tradeId != ''){
|
||||
this.getUmsState(this.tradeId)
|
||||
}
|
||||
this.token = this.$store.getters.getToken
|
||||
this.style = this.$Route.query.style
|
||||
this.price = this.$Route.query.price
|
||||
this.remark = this.$Route.query.remark
|
||||
},
|
||||
methods: {
|
||||
// 查询支付结果
|
||||
getUmsState(){
|
||||
uni.showLoading({
|
||||
title: '查询支付结果...',
|
||||
mask : true
|
||||
})
|
||||
let outTime;
|
||||
let resNumb = 0;
|
||||
outTime = setInterval(() => {
|
||||
if(resNumb >= 3){
|
||||
clearInterval(outTime)
|
||||
return
|
||||
}
|
||||
umsState(tradeId).then(res => {
|
||||
resNumb++
|
||||
if(res.state === 'success'){
|
||||
clearInterval(outTime)
|
||||
uni.hideLoading()
|
||||
this.$Router.replace({name: 'sheetPoint'})
|
||||
}
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}, 2000)
|
||||
},
|
||||
// 支付
|
||||
payChick(){
|
||||
switch(this.payTypeVal){
|
||||
case '':
|
||||
uni.showToast({
|
||||
title: '请选择支付方式',
|
||||
icon : 'none'
|
||||
})
|
||||
break;
|
||||
case 'wxpay':
|
||||
this.payClick()
|
||||
break;
|
||||
case 'alipay':
|
||||
this.onUmsPay('mp_alipay')
|
||||
break;
|
||||
}
|
||||
this.showPayMenu = false
|
||||
},
|
||||
// 第三方差价支付
|
||||
onUmsPay(type){
|
||||
let umsFun = this.style == 'chajia' ? umsDiff : umsOrder
|
||||
umsFun(this.$Route.query.id, {type}).then(res => {
|
||||
this.getState = true
|
||||
switch (type){
|
||||
case 'mp':
|
||||
this.tradeId = res.trade_id
|
||||
this.payTypeVal = 'umsWx'
|
||||
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() {
|
||||
console.log('ee')
|
||||
let NewUrl = ''
|
||||
if(this.$Route.query.style == 'daijiao') {
|
||||
NewUrl = applyPay
|
||||
} else {
|
||||
NewUrl = diffPay
|
||||
}
|
||||
NewUrl(this.$Route.query.id, {
|
||||
openid : this.$store.getters.getOpenId
|
||||
}).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
|
||||
setTimeout(()=>{
|
||||
this.$Router.replace({name: 'sheetPoint'})
|
||||
},3000)
|
||||
},
|
||||
cancel: payCancel => {
|
||||
// 跳到咨询单
|
||||
this.$Router.replace({name: 'sheetIndex'})
|
||||
},
|
||||
fail: payfail => {
|
||||
// 取消支付
|
||||
uni.showToast({
|
||||
title: '取消支付',
|
||||
icon: 'none'
|
||||
})
|
||||
this.disabled = true
|
||||
setTimeout(()=>{
|
||||
this.$Router.replace({name: 'User'})
|
||||
},1000)
|
||||
}
|
||||
});
|
||||
});
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.paymentTop {
|
||||
background-color: #dc7f8b;
|
||||
padding: $padding * 2 $padding * 2 $padding * 4;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
color: #ffffff;
|
||||
.paymentTop-name {
|
||||
flex: 1;
|
||||
font-size: $title-size + 10;
|
||||
text {
|
||||
margin-top: 20rpx;
|
||||
display: block;
|
||||
font-size: $title-size-sm;
|
||||
}
|
||||
}
|
||||
.paymentTop-img {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
}
|
||||
.paymentShow {
|
||||
position: relative;
|
||||
top: -80rpx;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
.paymentShow-img,
|
||||
.paymentShow-text{
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
top: 0;
|
||||
width: calc(100% - 60rpx);
|
||||
}
|
||||
.paymentShow-text {
|
||||
padding: $padding $padding * 2 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.paymentShow-top {
|
||||
display: flex;
|
||||
font-size: $title-size + 2;
|
||||
line-height: 130rpx;
|
||||
.paymentShow-top-name {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
color: #9a9a9a;
|
||||
text {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
.paymentShow-top-price {
|
||||
color: $mian-color;
|
||||
}
|
||||
}
|
||||
.paymentShow-tips {
|
||||
margin-bottom: $margin + 10;
|
||||
color: #9a9a9a;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
.paymentShow-coupon {
|
||||
display: flex;
|
||||
.paymentTop-icon {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
.paymentTop-usable {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
text {
|
||||
display: block;
|
||||
color: #9a9a9a;
|
||||
font-size: $title-size-sm;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.paymentList-label {
|
||||
line-height: 80rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.paymentList-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: $margin - 10;
|
||||
}
|
||||
.paymentList-img {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-top: 22rpx;
|
||||
margin-right: $margin - 10;
|
||||
}
|
||||
|
||||
.paymentBtn {
|
||||
position: fixed;
|
||||
bottom: $margin * 2;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
padding: 0 $padding;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
.paymentBtn-go {
|
||||
width: 70% !important;
|
||||
background-color: $mian-color;
|
||||
color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
line-height: 94rpx;
|
||||
font-size: $title-size + 2;
|
||||
&[disabled] {
|
||||
background-color: #eba5a5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user