jiazhipeng
6 days ago
18 changed files with 557 additions and 32 deletions
@ -0,0 +1,421 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<uni-page-head uni-page-head-type="default"> |
|||
<div class="uni-page-head" style="background-color: rgb(248, 248, 248); color: rgb(0, 0, 0);"> |
|||
<div class="uni-page-head-hd"> |
|||
<div class="uni-page-head-btn" @click="clickBack()"> |
|||
<uni-icons type="left" size="27"></uni-icons> |
|||
</div> |
|||
<div class="uni-page-head-ft"></div> |
|||
</div> |
|||
<div class="uni-page-head-bd"> |
|||
<div class="uni-page-head__title" style="font-size: 16px; opacity: 1;"> |
|||
支付 |
|||
</div> |
|||
</div> |
|||
<div class="uni-page-head-ft"></div> |
|||
</div> |
|||
<div class="uni-placeholder"></div> |
|||
</uni-page-head> |
|||
|
|||
<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: "", |
|||
JDSZAPIURL: 'https://api.cloud.sz-trip.com' |
|||
} |
|||
}, |
|||
onReady() { |
|||
|
|||
}, |
|||
onLoad(option) { |
|||
this.id = option.orderId |
|||
// this.Post({}, '/api/subwallet.ermb/wallet').then(res => { |
|||
// this.walletList = res.data |
|||
// }) |
|||
this.Post({order_id: option.orderId}, "/api/order/query").then(res => { |
|||
// 选择优惠券需要判断优惠券支付方式 |
|||
if(res.data.coupon_activity && res.data.coupon_activity.pay_type) { |
|||
this.coupon_activity = true |
|||
this.pay_type = res.data.coupon_activity.pay_type |
|||
} |
|||
|
|||
if(res.data.paid_money == 0) { |
|||
uni.redirectTo({ |
|||
url: '/subPackages/order/trades' |
|||
}) |
|||
return; |
|||
} |
|||
this.detail = res.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() { |
|||
|
|||
}, |
|||
onBackPress() { |
|||
return true; // 返回 true 表示阻止默认返回行为 |
|||
}, |
|||
methods: { |
|||
// 返回 |
|||
clickBack () { |
|||
let pages = getCurrentPages() |
|||
let prePage = null |
|||
// 看上个页面 |
|||
if (pages.length>=2) { |
|||
prePage = pages[pages.length - 2]; |
|||
} else { |
|||
uni.redirectTo({ |
|||
url: "/subPackages/order/trades" |
|||
}) |
|||
return |
|||
} |
|||
// 有问题 |
|||
if (prePage.$page.fullPath.indexOf('trades')>=0 || prePage.$page.fullPath.indexOf('orderDetail')>=0) { |
|||
uni.navigateBack() |
|||
} else { |
|||
uni.redirectTo({ |
|||
url: "/subPackages/order/trades" |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
// 倒计时时间到触发事件 |
|||
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 { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.title { |
|||
text-align: center; |
|||
font-size: 35rpx; |
|||
line-height: 60rpx; |
|||
padding-top: 100rpx; |
|||
} |
|||
|
|||
.time-box { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-bottom: 100rpx; |
|||
} |
|||
|
|||
.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> |
|||
Loading…
Reference in new issue