zhwl-miniapp/pages/my/payment.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>