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">
						￥9.9
					</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>
				</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">￥9.9</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="@/static/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>
	</view>

</template>

<script>
	import {
		rewardType
	} from "@/utils/commonConfig.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: {}
			},
		},
		data() {
			return {
				rewardType: rewardType,
				checkbox1: false,
				checkbox2: false,
				params: {
					raffleNumList: [],
					raffleId: null
				},
				orderId: null,
				prizes: [],
				getApiNum: 0,
			}
		},
		mounted() {
			// this.$refs.popup2.open('center')
			// this.getLotteryResults()
			
		},
		methods: {
			show(id, list) {
				console.log(list, 'list')
				this.params.raffleId = id
				this.params.raffleNumList = list
				this.$refs.popup.open('bottom')
				
			},
			close() {
				this.$refs.popup.close()
			},
			close2() {
				this.$refs.popup2.close()
			},
			submit() {
				this.params.couponId = 10
				let _this = this
				drawCardSubmitApi(this.params).then(res => {
					console.log(res, '提交购买卡牌')
					// 如果不需要付钱，直接进入抽卡结果
					if (res.data.orderStatus == 201) {
						_this.close()
						_this.$refs.popup2.open('center')
						_this.getLotteryResults(res)
						_this.$emit('callBack')
						return
					}
					this.orderId = res.data.orderId
					// 唤起支付
					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;
	}

	.title {
		text-align: center;
		padding: 15px;
		font-weight: 600;

		.close {
			position: absolute;
			right: 15px;
			top: 15px;
		}
	}

	.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;
			}
		}
	}

	.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;

		.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;
				}
			}
		}
	}
	
</style>
<style scoped>
	
</style>