uniAppXCX/component/paymentPopup.vue

<template>
	<view class="content">
		<uni-popup class="popup" ref="popup" type="bottom" background-color="#F8F8F8">
			<view class="popupContent">
				<view class="title">
					购买卡牌
					<uni-icons class="close" @click="close()" type="closeempty" size="20"></uni-icons>
				</view>
				<view class="row">
					<view class="label">单价</view>
					<view class="value price">
						￥{{ info.price || 0}}
					</view>
				</view>

				<view class="row">
					<view class="label">选中卡牌号码</view>
					<view class="value number">
						<view class="item" v-for="(item, index) in params.raffleNumList">
							{{item}}
						</view>
					</view>
				</view>

				<view class="row">
					<view class="label">优惠卷</view>
					<view class="value">
						<view v-if="!selestCouponId && couponList.length > 0" class="hasCoupon" @click="showPopup3">
							选择优惠券
							<uni-icons type="right" color="#FF2C43" size="20"></uni-icons>
						</view>
						<view v-if="!selestCouponId && couponList.length == 0" class="noCoupon">
							暂无可用优惠券
						</view>
						<view class="coupon price" v-if="selestCouponId">
							-￥{{selestCoupon.discount}}
						</view>
					</view>
				</view>

				<view class="row">
					<view class="label">抵扣（余额 <span class="price">0</span> ）</view>
					<view class="value price">
						￥0
					</view>
				</view>

				<view class="row">
					<view class="label"></view>
					<view class="value">
						小计： <span class="price">￥{{ priceAll }}</span>
					</view>
				</view>

				<view class="tip">
					<radio class="radio" :checked="checkbox1" @click="checkbox1 = !checkbox1" />
					<span>我已阅读并同意 <span style="color: #FF8E21;">《用户协议》</span></span>
				</view>

				<view class="tip">
					<radio class="radio" :checked="checkbox2" @click="checkbox2 = !checkbox2" />
					<span>本人已满18岁且具备完全行为能力</span>
				</view>

				<image @click="submit" class="button" src="https://mall.rongtongh.cn/storage/img/first/button5.png" mode="widthFix"></image>
			</view>
		</uni-popup>
		<!-- 抽赏结果 -->
		<uni-popup class="popup" ref="popup2" type="center">
			<view class="lotteryResults">
				<view class="title">
					恭喜你抽中奖品
					<uni-icons class="close" @click="close2()" type="closeempty" size="20"></uni-icons>
				</view>
				<view class="prizes" v-if="prizes.length > 0">
					<view class="item" v-for="(item, index) in prizes">
						<view class="type">
							{{ $selectDictLabel(rewardType, item.prizeType) }}
						</view>
						<image class="img" :src="item.prizeIcon" mode="widthFix"></image>
						<view class="name">
							{{ item.prizeName }} × {{item.prizeNum}}
						</view>
					</view>
				</view>
				<Mloading text="抽奖中..." v-else />
			</view>
		</uni-popup>
		<!-- 选则优惠券 -->
		<uni-popup class="popup" ref="popup3" type="bottom" background-color="#F8F8F8">
			<view class="popupContent">
				<view class="title">
					<!-- 选择优惠券 -->
					<uni-icons class="close" @click="close3()" type="closeempty" size="20"></uni-icons>
				</view>
			</view>
			<view class="popupList">
				<view class="card" v-for="(item, index) in couponList" @click="clickSelestCoupon(item)">
					<view class="leftIcon"></view>
					<view class="left">
						￥<span style="font-size: 18px;">{{item.discount}}</span>
					</view>
					<view class="right">
						<view class="row title">
							{{item.name}}
						</view>
						<view class="row endTime">
							{{item.endTime}}到期
						</view>
						<view class="row desc">
							{{item.desc}}
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	import {
		rewardType
	} from "@/utils/commonConfig.js"
	import {
		couponListApi
	} from "@/api/coupon.js"
	import {
		drawCardSubmitApi,
		submittResultApi
	} from "@/api/drawCard.js"

	import Mloading from "@/component/Mloading.vue"
	export default {
		components: {
			Mloading
		},
		emits: ['callBack'],
		props: {
			value: {
				type: Object,
				default: {}
			},
		},
		computed: {
			priceAll() {
				let num = this.params.raffleNumList.length * this.info.price
				if (this.selestCoupon.discount) {
					num = num - this.selestCoupon.discount
				}
				if (num <= 0) {
					num = 0
				}
				return num
			}
		},
		data() {
			return {
				rewardType: rewardType,
				checkbox1: false,
				checkbox2: false,
				params: {
					raffleNumList: [],
					raffleId: null
				},
				orderId: null,
				prizes: [],
				getApiNum: 0,
				info: {},
				// 优惠券
				couponList: [],
				// 选中的优惠券
				selestCouponId: null,
				selestCoupon: {}
			}
		},
		mounted() {
			// this.$refs.popup2.open('center')
			// this.getLotteryResults()
		},
		methods: {
			show(id, list, info) {
				this.refresh()
				console.log(list, 'list')
				this.params.raffleId = id
				this.params.raffleNumList = list
				this.info = info
				this.$refs.popup.open('bottom')
				// 获取优惠券列表
				this.getCoupon()
			},
			refresh() {
				// 刷新组件状态
				this.selestCouponId = null,
				this.selestCoupon = {}
				this.prizes = []
				this.checkbox1 = false
				this.checkbox2 = false
				this.orderId = null
			},
			close() {
				this.$refs.popup.close()
			},
			close2() {
				this.$refs.popup2.close()
			},
			showPopup3() {
				// if (this.couponList.length > 0) {
					this.$refs.popup3.open()
				// }
			},
			close3() {
				this.$refs.popup3.close()
			},
			// 获取优惠券
			getCoupon() {
				let params = {
					limit: 999,
					page: 1,
					status: 0,
					raffleId: this.params.raffleId
				}
				couponListApi(params).then(res => {
					this.couponList = res.data.list
				})
			},
			// 选择优惠券
			clickSelestCoupon(item) {
				this.selestCoupon = item
				this.selestCouponId = item.id
				this.close3()
			},
			submit() {
				let _this = this
				if (this.selestCouponId) {
					this.params.couponId = this.selestCouponId
				}
				drawCardSubmitApi(this.params).then(res => {
					console.log(res, '提交购买卡牌')
					this.orderId = res.data.orderId
					// 如果不需要付钱，直接进入抽卡结果
					if (res.data.orderStatus == 201) {
						_this.close()
						_this.$refs.popup2.open('center')
						_this.getLotteryResults(res)
						_this.$emit('callBack')
						return
					}
					// 唤起支付
					this.wxPayment(res.data)
				})
			},
			getLotteryResults() {
				let params = {
					orderId: this.orderId,
					raffleId: this.params.raffleId,
				}
				submittResultApi(params).then(res => {
					console.log(res, 'res抽奖结果')
					this.prizes = res.data
				})
			},
			wxPayment(data) {
				let _this = this
				wx.requestPayment({
					'timeStamp': data.timeStamp,
					'nonceStr': data.nonceStr,
					'package': data.packageValue,
					'signType': data.signType,
					'paySign': data.paySign,
					'success': function(res) {
						console.log(res, "支付过程成功");
						_this.close()
						_this.$refs.popup2.open('center')
						_this.getLotteryResults(res)
						_this.$emit('callBack')
					},
					'fail': function(res) {
						console.log("支付过程失败");
						util.showErrorToast('支付失败');
					},
					'complete': function(res) {
						console.log("支付过程结束")
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.popupContent {
		background-color: #F8F8F8;
		border-radius: 10px 10px 0 0;

		>.row {
			margin: 10px 20px 0 20px;
			display: flex;
			justify-content: space-between;
			padding: 12px;
			background: #fff;
			border-radius: 6px;
			font-size: 14px;
			color: #666666;

			.price {
				color: #FF2C43;
				font-weight: 600;
			}

			.label {
				margin-right: 10px;
			}

			.number {
				display: flex;
				flex: 1;
				overflow: auto;
				max-width: 60%;

				// justify-content: flex-end;
				.item {
					width: 48px;
					height: 24px;
					background: #DDDDDD;
					border-radius: 51px;
					color: #000000;
					line-height: 24px;
					text-align: center;
					font-size: 12px;
					margin-right: 5px;

					flex-grow: 0;
					flex-shrink: 0;
				}
			}
			.value {
				.hasCoupon {
					display: flex;
					align-items: center;
					color: #FF2C43;
					font-size: 12px;
				}
				.noCoupon {
					display: flex;
					align-items: center;
					color: #8c8c8c;
					font-size: 12px;
				}
			}
		}
		> .title {
			text-align: center;
			padding: 15px;
			font-weight: 600;
		
			.close {
				position: absolute;
				right: 15px;
				top: 15px;
			}
		}
	}

	



	.tip {
		margin: 10px 20px 0 20px;
		color: #000000;
		font-size: 12px;
		display: flex;
		align-items: center;

		.radio {
			transform: scale(0.7);
		}
	}

	.button {
		margin: 10px auto;
		width: 210px;
	}

	.lotteryResults {
		width: 90vw;
		background: #fff;
		border-radius: 10px;
		> .title {
			text-align: center;
			padding: 15px;
			font-weight: 600;
		
			.close {
				position: absolute;
				right: 15px;
				top: 15px;
			}
		}
		.prizes {
			padding: 10px;

			.item {
				display: inline-flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				text-align: center;
				margin-right: 5px;

				.img {
					width: 70px;
					border-radius: 5px;
				}
			}
		}
	}

	.popupList {
		max-height: 50vh;
		min-height: 30vh;
		overflow: auto;
		background: #F8F8F8;
		padding: 10px;


		.card {
			background: #fff;
			border-radius: 8px;
			overflow: hidden;
			display: flex;

			.leftIcon {
				height: auto;
				width: 8px;
				background: #FF2C43;
			}

			.left {
				width: 80px;
				display: inline-flex;
				justify-content: center;
				align-items: center;
				color: #FF2C43;
				font-weight: 600;
			}

			.right {
				padding: 10px;

				.row {
					margin-bottom: 4px;
					font-size: 12px;
				}

				.title {
					font-size: 14px;
					font-weight: 600;
				}

				.endTime {
					color: #FF2C43;
				}

				.desc {
					margin-top: 5px;
					color: #8c8c8c;
				}
			}
		}
	}
</style>
<style scoped>

</style>