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

<template>
	<view>
		<u-popup :show="payShow" mode="bottom" round="17" @close="close" :closeable="true" overlayOpacity="0.5" @touchmove.prevent.stop>
			<view class="choiceShow-wrap">
				<!-- 盲票信息 -->
				<view class="flex goods">
					<view class="flex image-wrap">
						<image :src="payInfo.picUrl" mode="aspectFit"></image>
					</view>
					<view class="info">
						<view class="info-title">{{ payInfo.title }}</view>
						<view class="info-stock">￥{{ $numberFormat( payInfo.orderAmt ) }}</view>
					</view>
				</view>
				<!-- 优惠券信息 -->
				<view class="flex coupon" @click="toCoupon">
					<view class="flex coupon-left">
						<image src="../../static/icon/public_coupon.png" mode="scaleToFill"></image>
						<view class="txt">优惠券</view>
					</view>
					<view class="coupon-right flex">
						<view class="txt coupon-right-color" v-if="$numberFormat(payInfo.discountAmt) != 0">-￥{{ $numberFormat(payInfo.discountAmt)}}</view>
						<view class="txt" v-else-if="payInfo.listNum != undefined">{{payInfo.listNum}}张可用</view>
						<view class="txt" v-else>暂无可用优惠券</view>
						<image src="../../static/icon/public_right_arrow.png" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="flex agreement">
					<view class="checked">
						<u-checkbox-group>
							<u-checkbox :value="checked" :checked="checked" shape="circle"
								activeColor="#F9822C" @change="changeChecked"></u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="txt" @click="toRule">同意《盲票购买协议》</text></view>
				</view>
				<view class="flex btn">
					<view class="flex btn-left">
						<view class="title">应付：</view>
						<view class="flex price">￥{{ $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,
			};
		},
		
		methods: {
			changeChecked(e) {
				this.checked = e
			},

			toCoupon() {
				uni.navigateTo({
					url: `/packageGoods/coupon/index?couponId=${ this.payInfo.couponId }&boxId=${ this.payInfo.boxId }&ticketId=${ this.payInfo.ticketId }`
				})
			},

			toRule() {
				uni.navigateTo({
					url: '/packageOther/rule/index'
				})
			},

			close() {
				this.checked = false
				this.$emit('close')
			},

			success(id) {
				this.checked = false
				this.$emit('success', id)
			},

			pay() {
				let _this = this
				let payIng = false
				if (!this.checked) {
					uni.$u.toast('请同意《盲票产品规则》');
					return
				}
				uni.showLoading({
					title: '支付中'
				});
				if (payIng) return
				$http.post('/api/v1/mp/user/ticket/order/submit', {
					suid: uni.getStorageSync('shareUid'),
					type: uni.getStorageSync('shareType')
				}).then(res => {
					uni.hideLoading();
					payIng = true
					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(ele => {
								if (ele.code == 0) {
									uni.requestPayment({
										timeStamp: ele.data.timeStamp,
										nonceStr: ele.data.nonceStr,
										package: ele.data.package,
										signType: ele.data.signType,
										paySign: ele.data.paySign,
										success() {
											uni.showToast({
												title: '支付成功',
												icon: 'success',
												duration: 2000
											})
											_this.success(res.data.orderId)
										},
										fail() {
											payIng = false
											_this.close()
										}
									})
								} else {
									payIng = false
									_this.close()
									uni.$u.toast('支付失败!');
								}
							}).catch(() => {
								payIng = false
								_this.close()
								uni.$u.toast('支付失败!');
							})
						} else {
							uni.showToast({
								title: '支付成功',
								icon: 'success',
								duration: 2000
							})
							_this.success(res.data.orderId)
						}
					} else if (res.code == 1020) {
						payIng = false
						_this.close()
						uni.$u.toast(res.msg);
					} else {
						payIng = false
						_this.close()
						uni.$u.toast(res.msg);
					}
				}).catch(() => {
					uni.hideLoading();
					payIng = false
					uni.$u.toast('支付失败!');
				})
			},

		},
	}
</script>

<style lang="scss" scoped>
	.coupon-right-color{
		font-size: 32rpx;
		line-height: 44rpx;
		color: rgba(235, 112, 9, 100);
	}
</style>
<style lang="scss" scoped>
	.choiceShow-wrap {
		min-height: 400rpx;
		padding: 34rpx;

		// 盲票信息
		.goods {
			justify-content: flex-start;
			margin-bottom: 60rpx;

			.image-wrap {
				width: 220rpx;
				height: 220rpx;
				border-radius: 10rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

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

				&-title {
					font-size: 36rpx;
					line-height: 36rpx;
					font-weight: bold;
				}
				
				&-stock {
					font-size: 26rpx;
					color: #FF4208;
				}
			}
		}

		// 优惠券
		.coupon {
			justify-content: space-between;
			height: 40rpx;
			margin-bottom: 46rpx;

			&-left {
				image {
					width: 48rpx;
					height: 40rpx;
					margin-right: 18rpx;
				}
				
				.txt {
					font-size: 30rpx;
					font-weight: bold;
				}
			}
			
			&-right {
				height: 40rpx;
				
				image {
					width: 12rpx;
					height: 22rpx;
					margin-left: 14rpx;
				}
				
				.txt {
					line-height: 26rpx;
					font-size: 26rpx;
					color: #666666;
				}
			}
		}

		// 同意协议
		.agreement {
			justify-content: flex-start;
			margin-bottom: 56rpx;

			.txt {
				font-size: 26rpx;
				color: #666666;
			}
		}

		// 支付按钮
		.btn {
			justify-content: space-between;

			&-left {
				.title {
					font-size: 13px;
					font-weight: 500;
				}
				
				.price {
					font-size: 30rpx;
					font-weight: bold;
					color: #FF4208;
				}
			}

			&-right {
				.confirm {
					width: 200rpx;
					height: 72rpx;
					line-height: 72rpx;
					background: #F9822C;
					border-radius: 36rpx;
					font-size: 26rpx;
					color: #fff;
					text-align: center;
				}
				
			}
		}
	}
</style>