uniAppXCX/pages/drawCard_fullSet/drawCard_fullSet.vue

<template>
	<view class="container">
		<view class="head">
			<image class="img" :src="$fileUrl() + '/ka.jpeg'" mode="aspectFill"></image>
			<view class="info">
				<view class="title row">
					{{ detail.name }}
				</view>
				<view class="row">
					<view class="price">
						￥{{ detail.price }}
						<span class="text fontPFR">/张明信片</span>
					</view>
					<image @click="$navigateTo('/pages/rule/rule', { type: 3 })" class="button"
						:src="$fileUrl() + '/invite/button1.png'" mode="widthFix"></image>
				</view>
				<view class="row">
					<!-- <view class="users">
						<image class="photo" :style="'left:' + index * 11 + 'px'" :src="$fileUrl() + '/Frame1.png'"
							v-for="(item, index) in userList" mode="widthFix"></image>
					</view> -->
					<!-- <view class="hot">
						<image :src="$fileUrl() + /first/hot.png" mode="widthFix"></image>
						{{ detail.hotNum }}
					</view> -->
				</view>
			</view>
		</view>

		<view class="cardList">
			<image class="itemHead" :src="$fileUrl() + '/drawCard_fullSet/headBk.png'" mode="widthFix"></image>
			<view class="countdown textColor5">
				{{ countdown }}
			</view>
			<view class="title">
				<view class="left">
					<image class="text1" :src="$fileUrl() + '/drawCard_fullSet/icon1.png'" mode="widthFix"></image>
					<view class="row text2" style="font-size: 14px">已选择 {{ selectIndex.length }} 个</view>
				</view>
				<view class="right">
					<view class="text">
						分享福袋有几率提高
						<span style="color: #63fff6">S赏</span>
						概率
					</view>
					<!-- <image class="button" :src="$fileUrl() + '/drawCard_fullSet/button1.png'" mode="widthFix"></image> -->
					<button open-type="share" class="share_btn">
						<image class="button" :src="$fileUrl() + '/drawCard_fullSet/button1.png'" mode="widthFix">
						</image>
					</button>
				</view>
			</view>
			<view class="list">
				<view :class="['item', item.check ? 'active' : '']" v-for="(item, index) in cardList"
					@click="clickCard(item)">
					<image v-if="item.check" class="kaBkActive"
						:src="$fileUrl() + '/ka/kabk' + cardType(3, item) + 'Active.png'" mode="heightFix"></image>
					<image class="kaBk" :src="$fileUrl() + '/ka/kabk' + cardType(3, item) + '.png'" mode="widthFix">
					</image>
					<numImg class="num" :value="item" :type="3" />
				</view>
			</view>
			<image class="buyButton" @click="submit" :src="$fileUrl() + '/drawCard_fullSet/button2.png'"
				mode="widthFix"></image>
		</view>
		<view class="buttons">
			<image class="button1" @click="toKnapsack" :src="$fileUrl() + '/drawCard_fullSet/button3.png'"
				mode="heightFix"></image>
			<!-- <image class="button1" :src="$fileUrl() + '/drawCard_fullSet/button4.png'" mode="heightFix"></image> -->
			<image class="button1" @click="$navigateTo('/pages/drawCard_fullSet/goods', { raffleId: params.raffleId })"
				:src="$fileUrl() + '/drawCard_fullSet/button5.png'" mode="heightFix"></image>
		</view>
		<view class="winningList" v-if="prizeUserList.length > 0"
			@click="$navigateTo('/pages/drawCard_fullSet/winningList', { raffleId: params.raffleId })">
			<image class="winningListTitle" :src="$fileUrl() + '/drawCard_fullSet/icon2.png'" mode="widthFix"></image>
			<view class="list">
				<view class="item" v-for="(item, index) in prizeUserList.slice(0, 5)">
					<image class="photo" :src="item.userAvtar" mode="aspectFill"></image>
					<view class="name">
						{{ item.userName }}
					</view>
				</view>
				<view class="item" v-if="prizeUserList.length > 5">
					<image class="photo" :src="$fileUrl() + '/drawCard_fullSet/icon3.png'" mode="aspectFill"></image>
					<view class="name" style="color: #6478fd">查看更多</view>
				</view>
			</view>
		</view>
		<view class="prizes" style="display: none">
			<image class="title" :src="$fileUrl() + '/first/title.png'" mode="widthFix"></image>
			<view class="prizesList" v-for="(item, index) in prizeList">
				<image class="bk" :src="$fileUrl() + '/first/bk2.png'" mode="scaleToFill"></image>
				<view class="prizesTitle">
					{{ $selectDictLabel(rewardType, item.type) }}
				</view>
				<view class="prizesImgOne" v-if="item.type == 22">
					<view class="image" v-for="(item2, index2) in item.prizeList">
						<image :class="item2.leftNum == 0 ? 'grey' : ''" :src="item2.icon" mode="aspectFill"></image>
					</view>
				</view>
				<view class="prizesImg" v-else>
					<view class="image" v-for="(item2, index2) in item.prizeList">
						<image :class="item2.leftNum == 0 ? 'grey' : ''" :src="item2.icon" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<image class="refresh" @click="refresh" :src="$fileUrl() + '/first/refresh.png'" mode="widthFix"></image>
		<paymentPopup ref="paymentPopup" @callBack="paymentSuccess" />
	</view>
</template>

<script>
	import {
		rewardType
	} from '@/utils/commonConfig.js'
	import {
		prizePoolStatusApi,
		raffleDetailApi,
		prizeListApi,
		prizeUserListApi
	} from '@/api/drawCard.js'

	import {
		cardType,
		formatSeconds
	} from '@/utils/utils.js'

	import numImg from '@/component/numImg.vue'
	import paymentPopup from '@/component/paymentPopup.vue'

	export default {
		components: {
			numImg,
			paymentPopup,
		},
		data() {
			return {
				countdown: '',
				countdownInfinity: null,
				cardType: cardType,
				rewardType: rewardType,
				params: {
					raffleId: '',
					limit: 20,
					page: 1,
				},
				detail: {},
				total: 0,
				userList: 8,
				cardList: [],
				selectIndex: [],
				prizeList: [],
				prizeUserList: [],
			}
		},
		onLoad(query) {
			console.log(query, 'query')
			if (query.id) {
				this.params.raffleId = query.id
				this.init()
			}
			this.paymentSuccess()
		},
		onHide() {
			if (!this.countdownInfinity) {
				clearInterval(this.countdownInfinity)
			}
		},
		methods: {
			init() {
				// 获取卡牌商品列表
				this.getCardList()
				// 获取卡包详情
				this.getDetail()
				//获取奖池
				this.getPrizeList()
				// 获取中奖记录
				this.getPrizeUserList()
			},
			toKnapsack() {
				// 跳转背包界面
				wx.navigateTo({
					url: '/pages/knapsack/knapsack',
				})
			},
			refresh() {
				wx.showLoading()
				setTimeout(function() {
					wx.hideLoading()
				}, 1000)
				this.init()
				this.selectIndex = []
				for (var i = 0; i < this.cardList.length; i++) {
					this.cardList[i].check = false
				}
			},
			getPrizeUserList() {
				let params = {
					limit: 999,
					page: 1,
					raffleId: this.params.raffleId,
				}
				prizeUserListApi(params).then(res => {
					console.log(res, '中奖记录')
					let userIds = []
					let list = []
					for (var i = 0; i < res.data.length; i++) {
						let item = res.data[i]
						if (userIds.indexOf(item.userId) == -1) {
							userIds.push(item.userId)
							console.log(userIds.indexOf(item.userId))
							let index = userIds.indexOf(item.userId)
							list[index] = {
								userId: item.userId,
								userAvtar: item.userAvtar,
								userName: item.userName,
								prizes: [],
							}
							list[index].prizes.push(item)
						} else {
							let index = userIds.indexOf(item.userId)
							list[index].prizes.push(item)
						}
					}
					this.userIds = userIds
					this.prizeUserList = list
				})
			},
			getPrizeList() {
				let params = {
					raffleId: this.params.raffleId,
				}
				prizeListApi(params).then(res => {
					console.log(res, '奖池预览')
					let newArray = res.data
					for (var i = 0; i < res.data.length; i++) {
						if (res.data[i].type == 21) {
							newArray = []
							newArray.push(res.data[i])
							res.data.splice(i, 1)
							newArray.push(...res.data)
							break
						}
					}
					this.prizeList = newArray
				})
			},
			toWinningRecord() {
				let params = {
					raffleId: this.params.raffleId,
				}
				this.$navigateTo('/pages/winningRecord/winningRecord', params)
			},
			getDetail() {
				let params = {
					raffleId: this.params.raffleId,
				}
				raffleDetailApi(params).then(res => {
					console.log(res, '详情')
					this.detail = res.data
					this.endTime = new Date(this.detail.endTime).getTime()
					// this.endTime = new Date('2023-11-10 14:48:00').getTime()
					// 初始化倒计时
					this.initCountdown()
					if (this.countdown != '已结束') {
						this.countdownInfinity = setInterval(() => {
							if (this.countdown == '已结束') {
								clearInterval(this.countdownInfinity)
								this.countdownInfinity = null
								return
							}
							this.initCountdown()
						}, 1000)
					}
				})
			},
			initCountdown() {
				let nowTime = new Date().getTime()
				let endTime = this.endTime
				let countdownText = ''
				let countdown = endTime - nowTime
				if (countdown <= 0) {
					countdownText = '已结束'
				} else {
					countdownText = formatSeconds(countdown)
				}
				// console.log(countdownText, 'countdownText')
				this.countdown = countdownText
			},
			submit() {
				if (this.selectIndex.length == 0) {
					wx.showToast({
						title: '请选则要购买的卡牌。',
						icon: 'none',
					})
					return
				}
				this.$refs.paymentPopup.show(this.params.raffleId, this.selectIndex, this.detail)
			},
			// 支付成功后回调
			paymentSuccess() {
				let _this = this
				console.log('刷新抽卡界面')
				// 刷新界面
				_this.refresh()
			},
			// 选中取消选中卡牌
			clickCard(item) {
				if (item.status == 0) {
					item.check = !item.check
				}
				// 如果是选中
				let index = this.selectIndex.indexOf(item.number)
				if (item.check && index == -1) {
					this.selectIndex.push(item.number)
				} else if (!item.check && index != -1) {
					this.selectIndex.splice(index, 1)
				}
			},
			// 标记已经选中卡牌
			selectFormat() {
				for (var i = 0; i < this.cardList.length; i++) {
					if (this.selectIndex.includes(this.cardList[i].number)) {
						this.cardList[i].check = true
					}
				}
			},
			getCardList() {
				prizePoolStatusApi(this.params).then(res => {
					console.log(res, '卡牌分页')
					for (var i = 0; i < res.data.list.length; i++) {
						res.data.list[i].check = false
					}
					this.cardList = res.data.list
					this.selectFormat()
					this.total = res.data.total
				})
			},
			left() {
				console.log('上一页')
				if (this.params.page > 1) {
					this.params.page = this.params.page - 1
				}
				this.getCardList()
			},
			right() {
				console.log('下一页')
				let pages = Math.ceil(this.total / this.params.limit)
				if (this.params.page < pages) {
					this.params.page = this.params.page + 1
				}
				this.getCardList()
			},
		},
	}
</script>

<style scoped lang="scss">
	.share_btn {
		background-color: transparent;
		border-width: 0 !important;
		border-radius: 0;
		overflow: initial;
		text-align: start;
		padding: 0;
		box-shadow: none !important;
		-webkit-tap-highlight-color: transparent;

		&::after {
			border: none;
		}
	}

	.container {
		background: #9ec8f9;
		padding-top: 15px;
		overflow: auto;

		.refresh {
			position: fixed;
			display: none;
			right: 4px;
			top: 75%;
			width: 40px;
			z-index: 5;
		}

		.head {
			background: #fff;
			border: 10px;
			padding: 15px;
			border-radius: 10px 10px 0 0;
			display: flex;
			justify-content: space-between;
			margin-bottom: 20px;

			.img {
				width: 106px;
				height: 106px;
				border-radius: 5px;
				overflow: hidden;
				margin-right: 10px;
			}

			.info {
				display: flex;
				flex-direction: column;
				justify-content: start;
				flex: 1;

				.row {
					margin: 5px 0;
					display: flex;
					justify-content: space-between;
					color: #999999;

					.button {
						width: 67px;
					}

					.hot {
						display: flex;
						font-size: 12px;
						color: #999999;

						image {
							width: 16px;
						}
					}

					.users {
						position: relative;

						.photo {
							position: absolute;
							width: 20px;
							height: 20px;
							border-radius: 50%;
						}
					}
				}

				.title {
					font-weight: 600;
					color: #000;
				}

				.price {
					font-size: 16px;
					font-weight: 600;
					color: #ff2c43;

					.text {
						font-size: 14px;
						color: #999999;
						font-weight: 500;
					}
				}
			}
		}

		.cardList {
			margin: 10px;
			border-radius: 12px;
			position: relative;
			background: linear-gradient(180deg, #31b7fd 10%, #6478fd 90%);
			// overflow: scroll;
			padding-bottom: 1px;

			.countdown {
				position: absolute;
				top: 1px;
				padding-left: 70px;
				font-size: 15px;
			}

			.itemHead {
				position: relative;
				left: -10px;
				top: -10px;
				width: calc(100% + 10px);
			}

			.title {
				display: flex;
				justify-content: space-between;
				color: #fff;
				padding: 0 15px 6px 15px;

				.left {
					.text1 {
						width: 6.5rem;
						// font-size: 24px;
						// font-weight: 600;
						// text-shadow: 1px 1px 0px #0A57BA;
						// font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
					}

					.text2 {
						font-family:
							Alimama FangYuanTi VF-Medium-Round,
							Alimama FangYuanTi VF-Medium;
					}
				}

				.right {
					display: flex;

					.text {
						width: 100px;
						font-size: 12px;
						text-align: right;
					}

					.button {
						width: 72px;
						height: 30px;
					}
				}
			}

			.bk {
				width: 100%;
			}

			.list {
				background: #fff;
				padding: 15px;
				border-radius: 12px;
				// width: calc(100% - 80px);
				// height: calc(100% - 70px);
				// position: absolute;
				// top: 0;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
				grid-template-rows: 1fr 1fr 1fr;
				grid-gap: 15px;

				.item {
					display: inline-flex;
					justify-content: center;
					align-items: center;
					position: relative;

					.kaBkActive {
						height: 142%;
						width: 100%;
						position: absolute;
						z-index: 1;
					}

					.kaBk {
						width: 100%;
						border-radius: 4px;
						z-index: 2;
					}

					.num {
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						z-index: 2;
					}
				}
			}

			.buyButton {
				width: 40%;
				margin: 10px auto;
			}
		}

		.winningList {
			margin: 20px 10px;
			padding: 15px;
			background: linear-gradient(180deg, #31b7fd 10%, #6478fd 90%);
			border-radius: 12px;

			.winningListTitle {
				width: 92px;
				margin-bottom: 12px;
			}

			.list {
				position: relative;
				padding: 12px 7px 12px 12px;
				border-radius: 12px;
				background: #fff;
				display: flex;

				.item {
					width: calc(100% / 6 - 5px);
					// margin: 0 auto;
					position: relative;
					display: inline-flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-right: 5px;

					.photo {
						width: 40px;
						height: 40px;
						border-radius: 50%;
						background: #b6b6b6;
					}

					.name {
						margin-top: 5px;
						display: inline-block;
						font-size: 11px;
						max-width: 100%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
		}

		.buttons {
			display: flex;
			justify-content: center;
			align-items: flex-start;
			padding: 0 10px;

			.button1 {
				height: 40px;
			}
		}

		.prizes {
			.title {
				width: 103px;
				margin: 0 auto;
			}

			.prizesList {
				margin: 20px;
				position: relative;
				overflow: hidden;
				// z-index: 5;

				.bk {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
				}

				.prizesTitle {
					position: relative;
					height: 30px;
					line-height: 30px;
					width: 100%;
					margin-left: 1px;
					margin-top: 15px;
					padding-left: 15px;
					color: #fff;
					font-weight: 800;
					background: linear-gradient(90deg, rgba(89, 166, 255, 0.8) 0%, rgba(158, 200, 249, 0) 100%);
				}

				.prizesImg {
					position: relative;
					display: grid;
					grid-template-columns: 1fr 1fr;
					margin: 15px;
					white-space: wrap;
					text-align: center;
					// overflow: auto;

					.image {
						text-align: center;

						image {
							display: inline-block;
							width: 36vw;
							height: 36vw;
							border-radius: 10px;
							margin: 0 5px;
						}
					}
				}

				.prizesImgOne {
					position: relative;
					display: flex;
					justify-content: center;
					margin: 15px;

					.image {
						text-align: center;

						image {
							display: inline-block;
							width: 45vw;
							height: 45vw;
							border-radius: 10px;
							margin: 0 5px;
						}
					}
				}
			}
		}
	}
</style>