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" @click="toRule">同意<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) {
				this.checked = e
			},

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

			toNotice() {
				uni.navigateTo({
					url: '/pages/about/notice'
				})
			},
			
			toRule(){
				uni.navigateTo({
					url: '/pages/about/rule'
				})
			},

			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', {}).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.close()
						}
					} else {
						payIng = false
						_this.close()
						uni.$u.toast('支付失败!');
					}
				}).catch(() => {
					uni.hideLoading();
					payIng = false
					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 #F8F8F8;
				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 {
			box-sizing: border-box;
			height: 110rpx;
			line-height: 110rpx;
			justify-content: space-between;
			padding: 0 40rpx;
			border-top: 1px solid #F8F8F8;
			border-bottom: 1px solid #F8F8F8;

			.txt {
				margin: 0 24rpx;
			}
		}

		.agreement {
			box-sizing: border-box;
			height: 110rpx;
			line-height: 110rpx;
			justify-content: space-between;
			padding: 0 40rpx;
			border-bottom: 1px solid #F8F8F8;

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

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

			&-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: 280rpx;
					height: 90rpx;
					font-size: 36rpx;
					line-height: 90rpx;
					border-radius: 10rpx;
					background-color: rgba(235, 112, 9, 100);
					color: rgba(255, 255, 255, 100);
					text-align: center;
				}
			}
		}
	}
</style>