You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
400 lines
10 KiB
400 lines
10 KiB
7 months ago
|
<template>
|
||
|
|
<view class="bg">
|
||
|
|
<view class="title">支付剩余时间</view>
|
||
|
|
<view class="time-box">
|
||
|
|
<uni-countdown :font-size="40" :show-day="false" :hour="times.hours" :minute="times.minutes"
|
||
|
|
:second="times.seconds" @timeup="timeup"></uni-countdown>
|
||
|
|
</view>
|
||
|
|
<view class="money-box" style="padding-bottom: 30rpx;">
|
||
|
|
<view>应付金额</view>
|
||
|
|
<view style="color: red;">￥{{detail.paid_money / 100}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="money-box" style="border-bottom: none;">
|
||
|
|
<view>支付方式:</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 优惠券 -->
|
||
|
|
<view v-if="coupon_activity">
|
||
|
|
<view class="pay-box" @click="payType = 1" v-if="pay_type.includes('WEIXIN')">
|
||
|
|
<view style="display: flex; align-items: center;">
|
||
|
|
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/wxPay.png" mode="widthFix"></image>
|
||
|
|
微信支付
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="select-box">
|
||
|
|
<view class="select" v-if="payType == 1"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view v-if="walletList.length > 0 && pay_type.includes('SUBWALLET')">
|
||
|
|
<view class="pay-box">
|
||
|
|
<view style="display: flex; align-items: center;">
|
||
|
|
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/numLogo.png" mode="widthFix">
|
||
|
|
</image>
|
||
|
|
数字人民币子钱包支付
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/selectB.png" class="select-img"
|
||
|
|
mode="widthFix" :style="{'transform': showMore ? 'rotate(180deg)' : ''}"
|
||
|
|
@click="showMore = !showMore"></image>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view v-show="showMore" style="padding-left: 40rpx;">
|
||
|
|
<view class="pay-box" v-for="(item,index) in walletList" :key="index" @click="payType = 2;walletIndex = index">
|
||
|
|
<view style="display: flex; align-items: center;">
|
||
|
|
<image :src="item.bank_logo" mode="widthFix"></image>
|
||
|
|
{{item.bank_name}}
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="select-box">
|
||
|
|
<view class="select" v-if="payType == 2 && walletIndex === index"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="" v-else>
|
||
|
|
<view class="pay-box" @click="payType = 1">
|
||
|
|
<view style="display: flex; align-items: center;">
|
||
|
|
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/wxPay.png" mode="widthFix"></image>
|
||
|
|
微信支付
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="select-box">
|
||
|
|
<view class="select" v-if="payType == 1"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view v-if="walletList.length > 0">
|
||
|
|
<view class="pay-box">
|
||
|
|
<view style="display: flex; align-items: center;">
|
||
|
|
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/numLogo.png" mode="widthFix">
|
||
|
|
</image>
|
||
|
|
数字人民币子钱包支付
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/selectB.png" class="select-img"
|
||
|
|
mode="widthFix" :style="{'transform': showMore ? 'rotate(180deg)' : ''}"
|
||
|
|
@click="showMore = !showMore"></image>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view v-show="showMore" style="padding-left: 40rpx;">
|
||
|
|
<view class="pay-box" v-for="(item,index) in walletList" :key="index" @click="payType = 2;walletIndex = index">
|
||
|
|
<view style="display: flex; align-items: center;">
|
||
|
|
<image :src="item.bank_logo" mode="widthFix"></image>
|
||
|
|
{{item.bank_name}}
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="select-box">
|
||
|
|
<view class="select" v-if="payType == 2 && walletIndex === index"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="btn" @click="pay">
|
||
|
|
立即付款
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
id: '',
|
||
|
|
token: {},
|
||
|
|
detail: {},
|
||
|
|
closeTime: 1000 * 60 * 30,
|
||
|
|
times: {},
|
||
|
|
showMore: true,
|
||
|
|
walletList: [],
|
||
|
|
walletIndex: 0,
|
||
|
|
payType: null,
|
||
|
|
coupon_activity: false,
|
||
|
|
pay_type: "",
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onReady() {
|
||
|
|
|
||
|
|
},
|
||
|
|
onLoad(option) {
|
||
|
|
this.id = option.orderId
|
||
|
|
this.token = option.token
|
||
|
|
uni.request({
|
||
|
|
method: 'POST',
|
||
|
|
url: this.JDSZAPIURL + '/api/subwallet.ermb/wallet',
|
||
|
|
header: {
|
||
|
|
'content-type': 'application/json',
|
||
|
|
'token': option.token
|
||
|
|
},
|
||
|
|
data: {},
|
||
|
|
success: res => {
|
||
|
|
this.walletList = res.data.data
|
||
|
|
uni.request({
|
||
|
|
method: 'POST',
|
||
|
|
url: this.JDSZAPIURL + '/api/order/query',
|
||
|
|
header: {
|
||
|
|
'content-type': 'application/json',
|
||
|
|
'token': option.token
|
||
|
|
},
|
||
|
|
data: {
|
||
|
|
order_id: option.orderId
|
||
|
|
},
|
||
|
|
success: res => {
|
||
|
|
// 选择优惠券需要判断优惠券支付方式
|
||
|
|
if(res.data.data.coupon_activity && res.data.data.coupon_activity.pay_type) {
|
||
|
|
this.coupon_activity = true
|
||
|
|
this.pay_type = res.data.data.coupon_activity.pay_type
|
||
|
|
}
|
||
|
|
|
||
|
|
if(res.data.data.paid_money == 0) {
|
||
|
|
uni.redirectTo({
|
||
|
|
url: '/subPackages/order/trades'
|
||
|
|
})
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.detail = res.data.data
|
||
|
|
let createTime = new Date(
|
||
|
|
(this.detail.create_time + "").replace(/-/g, "/")
|
||
|
|
).getTime();
|
||
|
|
createTime += this.detail.auto_close_time * 1000;
|
||
|
|
this.closeTime = createTime - new Date().getTime();
|
||
|
|
const hours = parseInt((this.closeTime % (1000 * 60 * 60 * 24)) / (
|
||
|
|
1000 * 60 * 60));
|
||
|
|
const minutes = parseInt((this.closeTime % (1000 * 60 * 60)) / (
|
||
|
|
1000 * 60));
|
||
|
|
const seconds = (this.closeTime % (1000 * 60)) / 1000;
|
||
|
|
this.times = {
|
||
|
|
hours: hours,
|
||
|
|
minutes: minutes,
|
||
|
|
seconds: seconds
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 倒计时时间到触发事件
|
||
|
|
timeup() {
|
||
|
|
let flag = false
|
||
|
|
setTimeout(() => {
|
||
|
|
flag = true
|
||
|
|
}, 2000)
|
||
|
|
if (flag) {
|
||
|
|
console.log('倒计时结束')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 支付
|
||
|
|
pay() {
|
||
|
|
if(this.payType == null) {
|
||
|
|
uni.showToast({
|
||
|
|
title: '请选择支付方式',
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
uni.showLoading({
|
||
|
|
title: '加载中'
|
||
|
|
})
|
||
|
|
if(this.payType == 1) {
|
||
|
|
// 微信支付
|
||
|
|
uni.request({
|
||
|
|
method: 'POST',
|
||
|
|
url: this.JDSZAPIURL + '/api/order/pay',
|
||
|
|
header: {
|
||
|
|
'content-type': 'application/json',
|
||
|
|
'token': this.token
|
||
|
|
},
|
||
|
|
data: {
|
||
|
|
order_id: this.id,
|
||
|
|
pay_method: "WEIXIN",
|
||
|
|
pay_platform: "MINI",
|
||
|
|
app_name: "WxXcxConfig"
|
||
|
|
},
|
||
|
|
success: res => {
|
||
|
|
uni.hideLoading()
|
||
|
|
if (res.data.code == 1) {
|
||
|
|
let data = JSON.parse(res.data.data)
|
||
|
|
uni.requestPayment({
|
||
|
|
nonceStr: data.nonceStr || data.noncestr,
|
||
|
|
package: data.package,
|
||
|
|
paySign: data.paySign || data.sign,
|
||
|
|
signType: data.signType,
|
||
|
|
timeStamp: "" + (data.timeStamp || data.timestamp),
|
||
|
|
complete: function(res) {
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.redirectTo({
|
||
|
|
url: '/subPackages/order/trades'
|
||
|
|
})
|
||
|
|
}, 1000)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title:res.data.msg,
|
||
|
|
icon:'none'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}else if(this.payType == 2) {
|
||
|
|
// 数币支付
|
||
|
|
uni.request({
|
||
|
|
method: 'POST',
|
||
|
|
url: this.JDSZAPIURL + '/api/subwallet.ermb/wallet',
|
||
|
|
header: {
|
||
|
|
'content-type': 'application/json',
|
||
|
|
'token': this.token
|
||
|
|
},
|
||
|
|
data: {
|
||
|
|
order_id: this.id,
|
||
|
|
pay_method: "SUBWALLET",
|
||
|
|
pay_platform: "MWEB",
|
||
|
|
ins_no: this.walletList[this.walletIndex].ins_no,
|
||
|
|
return_url: "https://m.cloud.sz-trip.com/OrderWaiting",
|
||
|
|
},
|
||
|
|
success: res => {
|
||
|
|
uni.request({
|
||
|
|
method: 'POST',
|
||
|
|
url: this.JDSZAPIURL + '/api/order/pay',
|
||
|
|
header: {
|
||
|
|
'content-type': 'application/json',
|
||
|
|
'token': this.token
|
||
|
|
},
|
||
|
|
data: {
|
||
|
|
order_id: this.id,
|
||
|
|
pay_method: "SUBWALLET",
|
||
|
|
pay_platform: "MWEB",
|
||
|
|
ins_no: this.walletList[this.walletIndex].ins_no,
|
||
|
|
return_url: "https://https://m.cloud.sz-trip.com/OrderWaiting",
|
||
|
|
},
|
||
|
|
success: res => {
|
||
|
|
let data = JSON.parse(res.data.data);
|
||
|
|
if(data && data.RESULT && data.RESULT=='Y'){
|
||
|
|
uni.request({
|
||
|
|
method: 'POST',
|
||
|
|
url: this.JDSZAPIURL + '/api/order/query',
|
||
|
|
header: {
|
||
|
|
'content-type': 'application/json',
|
||
|
|
'token': this.token
|
||
|
|
},
|
||
|
|
data: {
|
||
|
|
order_id: this.id,
|
||
|
|
},
|
||
|
|
success: res => {
|
||
|
|
uni.hideLoading()
|
||
|
|
if (res.data.data.state != "UNPAID") {
|
||
|
|
uni.redirectTo({
|
||
|
|
url: '/subPackages/order/trades'
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: '未查询到支付结果！',
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
complete: (res) => {uni.hideLoading()}
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
uni.hideLoading()
|
||
|
|
if (res.data.code!=1 && res.data.msg) {
|
||
|
|
uni.showToast({
|
||
|
|
title: res.data.msg,
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
})
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.bg {
|
||
|
|
padding-top: 40rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
text-align: center;
|
||
|
|
font-size: 35rpx;
|
||
|
|
line-height: 60rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.time-box {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.money-box {
|
||
|
|
width: 670rpx;
|
||
|
|
margin: 30rpx auto 0;
|
||
|
|
font-size: 35rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
border-bottom: 1rpx solid #000;
|
||
|
|
height: 60rpx;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pay-box {
|
||
|
|
padding: 0 40rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 35rpx;
|
||
|
|
margin-top: 40rpx;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 70rpx;
|
||
|
|
margin-right: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.select-box {
|
||
|
|
width: 35rpx;
|
||
|
|
height: 35rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
border: 1rpx solid #000;
|
||
|
|
border-radius: 50%;
|
||
|
|
|
||
|
|
.select {
|
||
|
|
width: 15rpx;
|
||
|
|
height: 15rpx;
|
||
|
|
background: #000;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.select-img {
|
||
|
|
width: 50rpx;
|
||
|
|
height: 50rpx;
|
||
|
|
margin-right: 0rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
margin: 80rpx auto 0;
|
||
|
|
width: 670rpx;
|
||
|
|
line-height: 80rpx;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 40rpx;
|
||
|
|
background: #d62828;
|
||
|
|
color: #fff;
|
||
|
|
border-radius: 40rpx;
|
||
|
|
}
|
||
|
|
</style>
|