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" v-if="params.raffleNumList.length > 0">
					<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" v-if="params.raffleNum">
					<view class="label">数量</view>
					<view class="value number">
						<view :class="['item', params.raffleNum == 1?'numBerActive':'']" @click="numChange(1)">
							一发
						</view>
						<view :class="['item', params.raffleNum == 3?'numBerActive':'']" @click="numChange(3)">
							三发
						</view>
						<view :class="['item', params.raffleNum == 5?'numBerActive':'']" @click="numChange(5)">
							五发
						</view>
						<view :class="['item', params.raffleNum == 10?'numBerActive':'']" @click="numChange(10)">
							十发
						</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: [],
					raffleNum: null,
					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 || this.params.raffleNum,
					orderThirdId: this.params.raffleId,
					orderType: 1,
					userCouponId: this.selestCouponId || '',
				}
				orderPriceApi(params).then(res => {
					console.log(res, '订单价格')
					this.priceAll = res.data
				})
			},
			numChange(num) {
				this.params.raffleNum = num
				//计算订单价格
				this.getPrice()
			},
			show(id, list, info) {
				this.refresh()
				console.log(list, 'list')
				this.params.raffleId = id
				console.log(toString.call(list), 'toString')
				if (toString.call(list) == '[object Array]') {
					this.params.raffleNumList = list
				} else if (toString.call(list) == '[object Number]') {
					this.params.raffleNum = 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: 70%;

				// 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;
				}
				.numBerActive {
					background: linear-gradient(180deg, #FFAD3D 0%, #FF740A 100%);
					color: #fff;
				}
			}

			.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: 15vw;
					height: 15vw;
					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>