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="$fileUrl() + '/first/button5.png'" mode="widthFix"></image>
			</view>
		</uni-popup>
		<!-- 抽赏结果 -->
		<uni-popup class="popup2" ref="popup2" type="center">
			<image class="bk" :src="$fileUrl() + '/winningLottery/bk.png'" mode="widthFix"></image>
			<view class="lotteryResults">
				<view class="title">
					中奖详情
					<!-- <uni-icons class="close" @click="close2()" type="closeempty" size="20"></uni-icons> -->
				</view>
				<view class="prizes" >
					<view class="item" v-for="(item, index) in prizes">
						<image class="img" :src="item.prizeIcon" mode="aspectFill"></image>
						<view class="info">
							<view class="row name">
								<span style="margin-right: 10px;">{{ item.prizeName }}</span>
								<span v-if="item.prizeType == 4">随机</span>
								<span>{{item.prizeNum}}张</span>
							</view>
							<view class="row type">
								{{ $selectDictLabel(rewardType, item.prizeType) }}
							</view>
						</view>
					</view>
					<Mloading class="loading" text="抽奖中..." v-if="prizes.length == 0" />
				</view>
				<image class="Rectangle" :src="$fileUrl() + '/winningLottery/Rectangle.png'" mode="widthFix"></image>
				<view class="text">
					已放入背包，可前往背包查看~
				</view>
				<image class="close" @click="close2" :src="$fileUrl() + '/winningLottery/icon.png'" mode="widthFix"></image>
			</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,
		orderPriceApi
	} from "@/api/drawCard.js"

	import Mloading from "@/component/Mloading.vue"
	export default {
		components: {
			Mloading
		},
		emits: ['callBack'],
		props: {
			value: {
				type: Object,
				default: {}
			},
		},
		computed: {
		},
		data() {
			return {
				priceAll: 0,
				rewardType: rewardType,
				checkbox1: false,
				checkbox2: false,
				params: {
					raffleNumList: [],
					raffleId: null
				},
				orderId: null,
				prizes: [],
				// prizes: [
				// 	{
				// 		prizeType: 1,
				// 		prizeIcon: 'https://mall.rongtongh.cn/storage/raffle1.jpg',
				// 		prizeName: 'S赏',
				// 		prizeNum: 12
				// 	},
				// 	{
				// 		prizeType: 4,
				// 		prizeIcon: 'https://mall.rongtongh.cn/storage/raffle1.jpg',
				// 		prizeName: 'S赏',
				// 		prizeNum: 12
				// 	},
				// 	{
				// 		prizeType: 1,
				// 		prizeIcon: 'https://mall.rongtongh.cn/storage/raffle1.jpg',
				// 		prizeName: 'S赏',
				// 		prizeNum: 12
				// 	}
				// ],
				getApiNum: 0,
				info: {},
				// 优惠券
				couponList: [],
				// 选中的优惠券
				selestCouponId: null,
				selestCoupon: {}
			}
		},
		mounted() {
			// this.$refs.popup2.open('center')
			// this.getLotteryResults()
		},
		methods: {
			getPrice() {
				let params = {
					orderNum: this.params.raffleNumList.length,
					orderThirdId: this.params.raffleId,
					orderType: 1,
					userCouponId: this.selestCouponId || ''
				}
				orderPriceApi(params).then(res => {
					console.log(res, '订单价格')
					this.priceAll = res.data
				})
			},
			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.getPrice()
				// 获取优惠券列表
				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.getPrice()
				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()
						if (_this.info.type == 3) {
							wx.showModal({
								title: '抽奖成功',
								content: '请耐心等待开奖结果。'
							})
						} else {
							_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;
	}
	.popup2 {
		.bk {
			position: relative;
			top: -10vh;
			width: 100vw;
		}
	}
	.lotteryResults {
		width: 76vw;
		padding-top: 62px;
		// background: #fff;
		border-radius: 10px;
		position: absolute;
		top: -10vh;
		left: 50%;
		transform: translateX(-50%);
		
		> .title {
			text-align: center;
			padding: 16px;
			height: 20px;
			font-weight: 600;
			color: #fff;
			
			.close {
				position: absolute;
				right: 15px;
				top: 15px;
			}
		}
		.Rectangle {
			width: calc(100% - 1px);
			position: absolute;
			bottom: 45px;
			left: 3px;
		}
		.text {
			width: calc(100% - 1px);
			height: 50px;
			line-height: 50px;
			position: absolute;
			bottom: 45px;
			left: 3px;
			text-align: center;
			color: #fff;
			text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
			font-size: 12px;
		}
		.close {
			width: 30px;
			height: 30px;
			margin-top: 50px;
			position: relative;
			z-index: 4;
			left: 50%;
			transform: translateX(-50%);
		}
		.prizes {
			margin: 30px 15px 10px 19px;
			position: relative;
			height: calc(85vw - 30px);
			background: linear-gradient(180deg, #F77D4D 0%, #FEAE81 100%);
			border-radius: 8px;
			padding: 10px 15px;
			overflow: auto;
			
			.loading {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateY(-50%) translateX(-50%);
			}
			
			.item {
				display: flex;
				// flex-direction: column;
				align-items: center;
				justify-content: center;
				text-align: center;
				// margin-right: 5px;
				background: #fff;
				padding: 13px 15px;
				margin-bottom: 10px;
				border-radius: 8px;
				
				.img {
					width: 70px;
					height: 70px;
					border-radius: 5px;
				}
				.info {
					display: flex;
					flex-direction: column;
					// align-items: center;
					justify-content: center;
					flex: 1;
					
					.row {
						// width: 100%;
					}
					.name {
						font-size: 14px;
					}
				}
			}
		}
	}

	.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;
				color: #8E4A21;

				.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>
	.popup2 >>> .uni-popup__wrapper {
		top: -8vh;
	}
</style>