zhwl-miniapp/pages/my/payment.vue
2025-06-26 12:38:35 +08:00

188 lines
6.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="uni-container">
<u-navbar :autoBack="true" :placeholder="true" bgColor="#FFF">
<view slot='center' style="font-size: 36rpx; font-weight: bold;">
订单支付
</view>
</u-navbar>
<view class="con">
<view class="name">{{parmas.orderItemList[0].ticketName}}</view>
<view class="price"><text class="unit">¥</text>{{parmas.orderItemList[0].totalPrice}}</view>
</view>
<view class="pay">
<view class="label">选择支付方式</view>
<view class="list">
<view class="item" v-for="(item, index) in payList" :key="index" v-if="getiPass(item)" @click="changePay(item.dictValue)">
<view class="left">
<image class="img" :src="'../../static/image/mine/pay' + item.dictValue + '.png'" mode=""></image>
<view class="title">{{item.dictLabel}}
<text class="balance" v-if="item.dictValue == 7">(可用¥{{cardInfo.balance}}</text>
</view>
</view>
<view class="right">
<view class="unselected" v-if="payType != item.dictValue"></view>
<view class="selected" v-if="payType == item.dictValue">
<u-icon name="checkmark" color="#fff" size="32rpx"></u-icon>
</view>
</view>
</view>
</view>
</view>
<view class="btn" @click="submitOrder">确认支付</view>
</view>
</template>
<script>
export default {
data () {
return {
configData: null,
payList: [],
payType: null,
cardInfo: null,
parmas: null
}
},
async onLoad (options) {
console.log('options', options)
this.parmas = JSON.parse(options.parmas);
console.log('this.parmas', this.parmas)
this.configData = uni.getStorageSync('configData');
this.payList = this.configData.payConfig;
if (this.payList.length) {
this.payType = this.payList[0].dictValue;
}
let cardInfo = await this.$http.getPrepaidCard();
this.cardInfo = cardInfo.data;
},
methods: {
changePay(e) {
this.payType = e;
},
getiPass(e) {
if (e.dictValue != 7) {
return true;
} else {
if (this.cardInfo) {
return true;
} else {
return false;
}
}
},
async submitOrder() {
uni.showLoading({ mask: true });
let parmas = this.parmas;
parmas.paymentMethod = this.payType;
if (parmas.orderItemList[0].totalPrice <= 0) {
parmas.paymentMethod = '4';
}
parmas.paymentScene = null;
let f = this.payList.find(m => m.dictValue == parmas.paymentMethod);
if (f) parmas.paymentScene = f.paymentScene;
if (parmas.paymentMethod == '7') parmas.payCode = this.cardInfo.accountNo;
let info = null;
if (parmas.id) {
info = await this.$http.continuePayment(parmas)
} else info = await this.$http.createTicketOrderPrepay(parmas);
if (parmas.paymentMethod == '7') {
uni.hideLoading();
if (info.data.errorMessage) {
uni.showToast({ mask: true, title: info.data.errorMessage, icon: 'none' })
setTimeout(() => {
if (parmas.id) {
uni.navigateBack()
} else uni.redirectTo({ url: `/pages/my/unpaid?id=` + info.data.id });
}, 1500)
} else {
uni.showToast({ mask: true, title: '支付成功', icon: 'success' })
setTimeout(() => {
if (parmas.id) {
uni.navigateBack()
} else uni.redirectTo({ url: `/pages/my/unpaid?id=` + info.data.id });
}, 1500)
}
return false;
}
if (info.data.payUrl) {
uni.hideLoading();
let str = info.data.payUrl;
let newStr = str.replace("?", "&");
uni.navigateTo({
url: `/pages/my/ABCpay?url=${newStr}`
})
} else if (info.data.tradeSession) {
const prepayId = JSON.parse(info.data.tradeSession);
uni.requestPayment({
provider: 'wxpay',
timeStamp: prepayId.timeStamp,
nonceStr: prepayId.nonceStr,
package: prepayId.packageValue,
signType: prepayId.signType,
paySign: prepayId.paySign,
success: (res) => {
uni.hideLoading();
uni.showToast({ mask: true, title: '支付成功', icon: 'success' })
setTimeout(() => {
if (parmas.id) {
uni.navigateBack()
} else uni.redirectTo({ url: `/pages/my/unpaid?id=` + info.data.id });
}, 1500)
},
fail: (err) => {
uni.hideLoading();
uni.showToast({ mask: true, title: '支付取消', icon: 'none' })
setTimeout(() => {
if (parmas.id) {
uni.navigateBack()
} else uni.redirectTo({ url: `/pages/my/unpaid?id=` + info.data.id });
}, 1500)
}
});
} else {
uni.showToast({ mask: true, title: '支付失败', icon: 'none' });
}
}
}
}
</script>
<style lang="scss">
.con {
padding: 48rpx 0 72rpx; text-align: center;
.name { font-size: 28rpx; color: rgba(0,0,0,0.65); line-height: 33rpx; }
.price {
font-size: 72rpx; color: rgba(0,0,0,0.85); line-height: 84rpx; font-weight: 500;
.unit { font-size: 28rpx; font-weight: 400; }
}
}
.pay {
margin: 0 24rpx;
.label { font-size: 24rpx; color: rgba(0,0,0,0.65); }
.list {
background: #FFFFFF; border-radius: 10rpx; margin-top: 20rpx; padding: 0 24rpx;
.item {
display: flex; align-items: center; justify-content: space-between; padding: 32rpx 0; border-bottom: 1rpx solid #E8E8E8;
&:last-child { border-bottom: none; }
.left {
display: flex; align-items: center;
.img { width: 48rpx; height: 48rpx; margin-right: 16rpx; }
.title {
font-size: 30rpx; color: rgba(0,0,0,0.85);
.balance { font-size: 28rpx; color: rgba(0,0,0,0.45); }
}
}
.right {
.unselected { width: 40rpx; height: 40rpx; border-radius: 50%; border: 1rpx solid rgba(0,0,0,0.2); }
.selected {
width: 42rpx; height: 42rpx; border-radius: 50%; background-color: #03AE80; position: relative;
/deep/.uicon-checkmark {
position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important;
}
}
}
}
}
}
.btn { margin: 72rpx 24rpx 0; width: 702rpx; height: 96rpx; line-height: 96rpx; text-align: center; background: #03AE80; border-radius: 64rpx; font-size: 32rpx; color: #FFFFFF; }
</style>