mp-ui-user/components/pay-popup/pay-popup.vue

<template>
	<view>
		<u-popup :show="payShow" mode="bottom" @close="close" :closeable="true">
			<view class="choiceShow-wrap">
				<view class="flex goods">
					<view class="flex image-wrap">
						<image :src="payInfo.picUrl" mode="aspectFill"></image>
					</view>
					<view class="info">
						<view class="info-title">{{ payInfo.title }}</view>
						<view class="info-stock">￥{{ $numberFormat( payInfo.salePrice ) }}</view>
					</view>
				</view>
				<view class="flex coupon" @click="toCoupon">
					<view class="flex coupon-left">
						<u-icon name="coupon" size="26" color="#333"></u-icon>
						<view class="txt">代金券</view>
					</view>
					<view class="flex coupon-right">
						<view class="txt">暂无可用代金券</view>
						<u-icon name="arrow-right" size="16" color="#333"></u-icon>
					</view>
				</view>
				<view class="flex agreement">
					<view class="txt">同意<text>《盲票购买须知》</text></view>
					<view class="checked">
						<u-checkbox-group>
							<u-checkbox :value="checked" :checked="checked" shape="circle" activeColor="#E96737"
								@change="changeChecked"></u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
				<view class="flex btn">
					<view class="flex btn-left">
						<view class="title">应付：</view>
						<view class="flex coin">￥{{ $numberFormat(payInfo.payAmt) }}</view>
					</view>
					<view class="btn-right">
						<view class="confirm" @click="pay">立即支付</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $http from '@/utils/request.js'
	export default {
		name: "pay-popup",
		props: {
			payShow: {
				type: [Boolean],
				default: false
			},
			payInfo: {
				type: [Object],
				default: {}
			}
		},
		data() {
			return {
				checked: false,
				couponIds: [],
				autoCoupon: 1,
			};
		},
		methods: {
			changeChecked(e) {
				console.log(e);
				this.checked = e
			},

			toCoupon() {
				uni.navigateTo({
					url: '/pages/coupon/index'
				})
			},

			close() {
				this.checked = false
				this.$emit('close')
			},
			
			pay(){
				if(!this.checked){
					uni.$u.toast('请同意《盲票购买须知》!');
					return
				}
				$http.post('/api/v1/mp/user/ticket/order/submit', {}).then(res=>{
					console.log(res);
					if(res.code == 0){
						if(res.data.needPay == 1){
							$http.post('/api/v1/mp/user/ticket/order/pay', {
								orderId: res.data.orderId,
								payType: 2
							}).then(res=>{
								if(res.code == 0){
									uni.$u.toast('支付成功');
								}else{
									uni.$u.toast('支付失败!');
								}
							}).catch(()=>{
								uni.$u.toast('支付失败!');
							})
						} else{
							uni.$u.toast('支付成功');
						}
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.choiceShow-wrap {
		min-height: 400rpx;
		padding: 80rpx 0 60rpx;

		.goods {
			padding: 0 20rpx;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.image-wrap {
				width: 220rpx;
				height: 220rpx;
				border: 1px solid rgba(236, 236, 236, 100);
				border-radius: 10rpx;

				image {
					width: 174rpx;
					height: 174rpx;
				}
			}

			.info {
				flex: 1;
				display: flex;
				height: 220rpx;
				flex-direction: column;
				justify-content: space-between;
				padding-left: 26rpx;

				&-title {
					font-size: 32rpx;
					line-height: 44rpx;
					font-weight: bold;
				}

				&-coin {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					line-height: 44rpx;
					color: rgba(235, 112, 9, 100);
					font-weight: bold;

					image {
						width: 42rpx;
						height: 42rpx;
						margin-right: 20rpx;
					}
				}

				&-stock {
					line-height: 44rpx;
				}
			}
		}

		.coupon {
			justify-content: space-between;
			padding: 30rpx 40rpx;
			border-top: 1px solid rgba(187, 187, 187, 100);
			border-bottom: 1px solid rgba(187, 187, 187, 100);

			.txt {
				margin: 0 24rpx;
			}
		}

		.agreement {
			justify-content: space-between;
			padding: 50rpx 40rpx;
			border-bottom: 1px solid rgba(187, 187, 187, 100);

			.txt text {
				color: #007aff;
			}
		}

		.btn {
			justify-content: space-between;
			padding: 20rpx 20rpx;

			&-left {
				.coin {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					line-height: 44rpx;
					color: rgba(235, 112, 9, 100);
					margin-left: 20rpx;
				}
			}

			&-right {
				.confirm {
					width: 250rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 8px;
					background-color: rgba(235, 112, 9, 100);
					color: rgba(255, 255, 255, 100);
					font-size: 28rpx;
					text-align: center;
				}
			}
		}
	}
</style>