deming/pageC/cart/cashier.vue

<template>
	<view class="cashier">
		<view class="top">
			<view class="title">支付金额</view>
			<view class="price">￥{{ price }}</view>
		</view>
		<view class="pay-view">
			<u-radio-group v-model="pay_way" size="16">
				<view v-for="(item, index) in payLiat" :key="index" class="pay-item">
					<view class="pay-way">
						<image :src="item.icon"></image>
						<text class="name">{{ item.pay_way }}</text>
					</view>
					<view class="" :class="pay_way == item.name ? 'active' : 'default'">
                        <u-radio class="radio-view" shape="circle" :name="item.name" active-color="#FF780F" :disabled="item.disabled"></u-radio>
					</view>
				</view>
			</u-radio-group>
		</view>
		<view class="pay-btn" @click="sendPay">去支付</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			payLiat: [
				{
					name: 'wxpay_app',
					icon: '/static/image/common/14.png',
					pay_way: '微信支付',
					disabled: false,
				},
				{
					name: 'alipay_app',
					icon: '/static/image/common/13.png',
					pay_way: '支付宝',
					disabled: false,
				}
			],
			pay_way: 'wxpay_app',
			price: '',
			pay_sn: '',
            ifcart: '',
            order_id: '',
		}
	},
	onLoad(option) {
        console.log(option);
        this.ifcart = option.ifcart;
		this.price = option.price;
		this.pay_sn = option.pay_sn;
        this.order_id = option.order_id;
	},
	methods: {
		payOrder(provider, orderInfo) {
            let me = this;
			uni.requestPayment({
				provider: provider,
				orderInfo: orderInfo, //订单数据
				success: (res) => {
					console.log('success:' + JSON.stringify(res));
                    this.$u.toast("支付成功！");
                    setTimeout(function(){
                        if (Boolean(parseInt(me.ifcart))) {
                            me.$u.route({
                                type: 'redirect',
                                url: '/pageE/order/Index',
                            })
                        } else {
                            me.$u.route({
                                type: 'redirect',
                                url: '/pageE/order/Details?oid=' + me.order_id,
                            })
                        }
                    },2000)
				},
				fail: (err) => {
					console.log('fail:' + JSON.stringify(err));
                    this.$u.toast("支付失败，支付已取消！");
                    setTimeout(function(){
                        if (Boolean(parseInt(me.ifcart))) {
                            me.$u.route({
                                type: 'redirect',
                                url: '/pageE/order/Index',
                            })
                        } else {
                            me.$u.route({
                                type: 'redirect',
                                url: '/pageE/order/Details?oid=' + me.order_id,
                            })
                        }
                    },2000)
				}
			});
		},
		sendPay() {
			this.$u.api.sendPay({
				pay_sn: this.pay_sn, 
				payment_code: this.pay_way,
			}).then(res => {
				if(res.errCode == 0) {
					let orderInfo, provider;
					if(res.data.payment_code == 'wxpay_app') {
						provider = 'wxpay';
						orderInfo = JSON.parse(res.data.content);
					} else if(res.data.payment_code == 'alipay_app') {
						provider = 'alipay';
						orderInfo = res.data.content;
					}
					this.payOrder(provider, orderInfo);
				}
			})
		}
	}
};
</script>
<style lang="scss" scoped>
.cashier {
	min-height: calc(100vh - var(--window-top));
	background-color: #ECECEC;
	padding-top: 1rpx;
	.top {
		margin-bottom: 20rpx;
		height: 240rpx;
		background:rgba(255,255,255,1);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.title {
			font-size: 32rpx;
			color: rgba(51,51,51,1);
			margin-bottom: 50rpx;
		}
		.price {
			font-size: 42rpx;
			font-weight: 500;
			color: rgba(243,13,13,1);
		}
	}
	.pay-view {
		/deep/ .u-radio-group {
			width: 100%;
			flex-direction: column;
            .u-radio__icon-wrap {
                width: 30rpx !important;
                height: 30rpx !important;
                padding: 4rpx;
                border: 1px solid #FF780F;
            }
            .active {
            }
            .default {
            }
			.radio-view {
                
			}
			.u-radio {
				.u-icon {
					border-color: rgba(219,219,219,1);
					background-color: rgba(219,219,219,1);
					.u-icon__icon::before {
						display: none;						
					}
				}
			}
			.pay-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 98rpx;
				padding: 24rpx 30rpx;
				margin-bottom: 2rpx;
				background: rgba(255,255,255,1);
				.pay-way {
					display: flex;
					align-items: center;
					> image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 20rpx;
					}
					.name {
						font-size: 30rpx;
						color: rgba(51,51,51,1);
					}
				}
			}
		}
	}
	.pay-btn {
		z-index: 9;
		position: fixed;
		bottom: 200rpx;
		left: 30rpx;
		width: 690rpx;
		height: 98rpx;
		background: rgba(255,120,15,1);
		border-radius: 49rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: rgba(255,255,255,1);
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>