uniAppXCX/pages/drawCard_first/drawCard_first.vue

<template>
	<view class="container">
		<view class="head">
			<image class="img" src="@/static/img/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">/张明信片</span>
					</view>
					<image class="button" src="@/static/img/invite/button1.png" mode="widthFix"></image>
				</view>
				<view class="row">
					<view class="users">
						<image class="photo" :style="'left:' + index * 11 + 'px'" src="@/static/img/Frame1.png"
							v-for="(item, index) in userList" mode="widthFix"></image>
					</view>
					<view class="hot">
						<image src="@/static/img/first/hot.png" mode="widthFix"></image>
						{{ detail.hotNum }}
					</view>
				</view>
			</view>
		</view>

		<view class="cardList">
			<image class="bk" src="@/static/img/first/bk1.png" mode="widthFix"></image>
			<view class="leftButton" @click="left"></view>
			<view class="rightButton" @click="right"></view>
			<view class="list">
				<view :class="['item', item.check ? 'active' : '']" v-for="(item,index) in cardList"
					@click="clickCard(item)">
					<image class="kaBk" :src="'../../static/img/ka/kabk' + cardType(item) + '.png' " mode="widthFix">
					</image>
					<numImg class="num" :value="item" />
				</view>
			</view>
		</view>
		<view class="buttons">
			<image class="button1" src="@/static/img/first/button6.png" mode="widthFix"></image>
			<view class="">
				<image class="button2" @click="submit" src="@/static/img/first/button4.png" mode="widthFix"></image>
				<!-- <image class="button2" src="@/static/img/first/button1.png" mode="widthFix"></image> -->
			</view>
			<image @click="toWinningRecord" class="button1" src="@/static/img/first/button3.png" mode="widthFix"></image>
		</view>

		<view class="prizes">
			<image class="title" src="@/static/img/first/title.png" mode="widthFix"></image>
			<view class="prizesList">
				<image class="bk" src="@/static/img/first/bk2.png" mode="widthFix"></image>
				<view class="prizes">
					<image src="@/static/img/ka.jpeg" mode="aspectFill"></image>
					<image src="@/static/img/ka.jpeg" mode="aspectFill"></image>
					<image src="@/static/img/ka.jpeg" mode="aspectFill"></image>
				</view>
			</view>

			<view class="prizesList">
				<image class="bk" src="@/static/img/first/bk2.png" mode="widthFix"></image>
				<view class="prizes">
					<image src="@/static/img/ka.jpeg" mode="aspectFill"></image>
					<image src="@/static/img/ka.jpeg" mode="aspectFill"></image>
					<image src="@/static/img/ka.jpeg" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<image class="refresh" @click="refresh" src="@/static/img/first/refresh.png" mode="widthFix"></image>
		<paymentPopup ref="paymentPopup" @callBack="paymentSuccess" />
	</view>
</template>

<script>
	import {
		prizePoolStatusApi,
		drawCardSubmitApi,
		raffleDetailApi,
		prizeListApi
	} from "@/api/drawCard.js"
	import {
		cardType
	} from "@/utils/utils.js"

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

	export default {
		components: {
			numImg,
			paymentPopup
		},
		data() {
			return {
				cardType: cardType,
				params: {
					raffleId: '',
					limit: 12,
					page: 1
				},
				detail: {},
				total: 0,
				userList: 8,
				cardList: [],
				selectIndex: [],
			}
		},
		onLoad(query) {
			console.log(query, 'query')
			if (query.id) {
				this.params.raffleId = query.id
				this.init()
			}
			this.paymentSuccess()
		},
		methods: {
			init() {
				// 获取卡牌商品列表
				this.getCardList()
				// 获取卡包详情
				this.getDetail()
				//获取奖池
				this.getPrizeList()
			},
			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
				}
			},
			getPrizeList() {
				let params = {
					raffleId: this.params.raffleId
				}
				prizeListApi(params).then(res => {
					console.log(res, '奖池预览')
				})
			},
			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
				})
			},
			submit() {
				if (this.selectIndex.length == 0) {
					wx.showToast({
						title: '请选则要购买的卡牌。',
						icon: 'none',
					})
					return
				}
				this.$refs.paymentPopup.show(this.params.raffleId, this.selectIndex)
			},
			// 支付成功后回调
			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">
	.container {
		background: #9EC8F9;
		padding-top: 15px;
		overflow: auto;
		
		.refresh {
			position: fixed;
			right: 8px;
			top: 50%;
			width: 45px;
		}
		
		.head {
			background: #fff;
			border: 10px;
			padding: 15px;
			border-radius: 10px 10px 0 0;
			display: flex;
			justify-content: space-between;

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

			.info {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				flex: 1;
				.row {
					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: 14px;
					font-weight: 600;
					color: #FF2C43;

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

		}

		.cardList {
			margin: 10px 0;
			position: relative;

			.bk {
				width: 100%;
			}

			.leftButton {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 20px;
				height: 40px;
				width: 20px;
				z-index: 5;
			}

			.rightButton {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 20px;
				height: 40px;
				width: 20px;
				z-index: 5;
			}

			.list {
				padding: 35px 40px;
				width: calc(100% - 80px);
				height: calc(100% - 70px);
				position: absolute;
				top: 0;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr;

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

					.kaBk {
						width: 70%;
						border-radius: 4px;
					}

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

				.active {
					.kaBk {
						box-shadow: 0px 1px 4px 2px #0417ff;
					}

				}
			}
		}

		.buttons {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;

			.button1 {
				width: 25vw;
			}

			.button2 {
				width: 35vw;
				margin-bottom: 5px;
			}
		}

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

			.prizesList {
				margin: 20px;
				position: relative;

				.bk {
					width: 100%;
				}

				.prizes {
					top: 0;
					position: absolute;
					width: calc(100% - 40px);
					height: calc(100% - 50px);
					display: inline-block;
					margin: 50px 20px 0 20px;
					white-space: nowrap;
					overflow: auto;

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