mp-ui-user/src/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="toPromoters" v-if="promoterNum > 0">
					<view class="flex coupon-left">
						<image src="../../static/public/promoter.png" mode="scaleToFill"></image>
						<view class="txt">盲票天使</view>
					</view>
					<view class="coupon-right flex">
						<view class="txt coupon-right-color" v-if="promoters && promoters.name">
							{{`${ promoters.name } ( ${promoters.workNo} ) `}}
						</view>
						<view class="txt" v-else>选择盲票天使，运气更好哦</view>
						<image src="../../static/public/public_right_arrow.png" mode="scaleToFill"></image>
					</view>
				</view>
				<!-- 优惠券信息 -->
				<view class="flex coupon" @click="toCoupon">
					<view class="flex coupon-left">
						<image src="../../static/public/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="total != 0">{{ total }}张可用</view>
						<view class="txt" v-else>暂无可用优惠券</view>
						<image src="../../static/public/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>
		<auth :auth-show="authShow" @close="authShow = false" />
	</view>
</template>

<script>
	import $http from '@/utils/request.js'
	import appId from '@/config/appId.js'
	import Auth from '../../components/auth/auth.vue'
	export default {
		name: "pay-popup",
		components: {
			Auth,
		},
		props: {
			payShow: {
				type: [Boolean],
				default: false
			},
			payInfo: {
				type: [Object],
				default: {}
			},
		},
		data() {
			return {
				checked: true,
				authShow: false,
				total: 0,
				promoters: {
					channelId: "", //id
					name: "", //名字
					workNo: "" //工号
				},
				promoterNum: 0, //推广员
			};
		},
		created() {
			if (this.payInfo.promoter) {
				this.promoters = this.payInfo.promoter
			}
			this.getTotal()
			if (this.payInfo.channelId) {
				this.getPromoterNum()
			}
		},
		mounted() {
			let that = this
			uni.$on('promoters', function(data) {
				that.promoters = data
				that.payInfo.promoter = data
			})
		},
		methods: {
			getTotal() {
				$http.post(`/api/v1/mp/user/ticket/order/coupon/listPage`, {}).then(
					res => {
						if (res.code == 0) {
							this.total = res.total
						}
					}).catch(() => {})
			},
			getPromoterNum() {
				$http.post(`/api/v1/mp/channel/promoter/list?pageNum=1&pageSize=20`, {
					channelId: this.payInfo.channelId,
				}).then(res => {
					if (res.code == 0) {
						this.promoterNum = res.total
					}
				}).catch(() => {})
			},
			changeChecked(e) {
				this.checked = e
			},

			toPromoters() {
				let index = ''
				if (this.payInfo.promoter) {
					index = this.payInfo.promoter.channelId
				} else {
					index = 0
				}
				uni.navigateTo({
					url: `/packageGoods/promoters/index?channelId=${ this.payInfo.channelId }&index=${ index }`
				})
			},

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

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

			close() {
				this.$emit('close')
			},

			success(id) {
				this.$emit('success', id)
			},
			pay() {
				let _this = this
				let payIng = false
				if (!this.checked) {
					uni.$u.toast('请同意《盲票产品规则》');
					return
				}
				uni.showLoading({
					title: '支付中'
				});
				if (payIng) return
				let suid = uni.getStorageSync('shareUid')
				$http.post('/api/v1/mp/user/ticket/order/submit', {
					promoterId: this.promoters && this.promoters.channelId ? this.promoters.channelId : null,
					suid: suid !== 'undefined' && suid !== undefined ? suid : null,
					type: uni.getStorageSync('shareType')
				}).then(res => {
					uni.hideLoading();
					payIng = true
					if (res.code == 0) {
						if (res.data.needPay == 1) {
							// #ifdef MP-ALIPAY
							let data = {
								orderId: res.data.orderId,
								payType: 1,
								appSource: appId
							}
							// #endif
							// #ifdef MP-WEIXIN
							let data = {
								orderId: res.data.orderId,
								payType: 2,
								appSource: appId
							}
							// #endif
							// #ifdef H5
							let data = {
								orderId: res.data.orderId,
								payType: 3,
								appSource: appId
							}
							// #endif
							$http.post('/api/v1/mp/user/ticket/order/pay', data).then(ele => {
								if (ele.code == 0) {
									// #ifdef MP-ALIPAY
									my.tradePay({
										tradeNO: ele.data.pay_info,
										success: (resu) => {
											if (resu.resultCode == '9000') {
												uni.showToast({
													title: '支付成功',
													icon: 'success',
													duration: 2000
												})
												_this.success(res.data.orderId) //跳转抽奖详情页
											} else {
												payIng = false
												_this.close()
											}
										},
										fail: (resu) => {
											payIng = false
											_this.close()
										}
									})
									// #endif
									// #ifdef MP-WEIXIN
									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()
										}
									})
									// #endif
									// #ifdef H5
									// localStorage.removeItem('callbackHTML');
									// localStorage.setItem('callbackHTML',ele.data.payUrl);
									let data = ele.data
									uni.navigateTo({
										url: `/pages/index/payExternal?viewUrl=${ encodeURIComponent(JSON.stringify(data)) }`
									})
									// let formData = new FormData()
									// Object.keys(ele.data).forEach(key => {
									// 	formData.append(key,ele.data[key])
									// })
									// uni.request({
									// 	url: 'https://openapi.ysepay.com/gateway.do',
									// 	header: {
									// 		'Content-Type': 'application/x-www-form-urlencoded',
									// 	},
									// 	data: ele.data,
									// 	method: 'GET',
									// 	success: (_res) => {
									// 		console.log(_res);
									// 	},
									// 	fail: (err) => {
									// 		console.log(err);
									// 	}
									// 	})
									// #endif

								} else if (ele.code == 1005) {
									_this.authShow = true
								} else if (ele.code == 1026) {
									_this.authShow = true
								} 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: 414rpx;
					height: 88rpx;
					line-height: 88rpx;
					background: #FA822C;
					border-radius: 44rpx;
					font-size: 36rpx;
					color: #fff;
					text-align: center;
				}

			}
		}
	}
</style>