188 lines
6.8 KiB
Vue
188 lines
6.8 KiB
Vue
<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> |