uniAppXCX/pages/drawCard_infinite/drawCard_infinite.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="box">
			<view class="boxContent">
				<view class="boxLeft">
					<view class="row1">
						<view class="text">连击 × {{combos}}</view>
						<view class="text">
							{{combos}}
							<span class="text1">/300</span>
						</view>
					</view>
					<view class="row2">
						<view class="row2content">
							<p>每连击300发未出传说赏，可获得一个宝箱。</p>
							<p>如果中间抽出传说赏，则清空连击次数。</p>
						</view>
					</view>
				</view>
				<view class="boxRiaht">
					<image class="icon" :src="$fileUrl() + '/drawCard_infinite/icon1.png'" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="buttons1">
			<image class="button" @click="tabClick(1)" style="margin-right: 20px"
				:src="$fileUrl() + `/drawCard_infinite/button1${active1 == 1 ? 'A' : ''}.png`" mode="widthFix"></image>
			<image class="button" @click="tabClick(2)"
				:src="$fileUrl() + `/drawCard_infinite/button2${active1 == 2 ? 'A' : ''}.png`" mode="widthFix"></image>
		</view>
		<view class="prizeList" v-if="active1 == 1">
			<view class="prizeRow" v-for="(item, index) in prizeList">
				<image class="bk" :src="$fileUrl() + '/drawCard_infinite/bk.png'" mode="scaleToFill"></image>
				<view class="prizeRowContent">
					<view class="prizesTitle">
						<span>
							<span style="font-size: 18px; margin-right: 5px; font-weight: 600">
								{{ $selectDictLabel(rewardType, item.type) }}
							</span>
							<span style="font-weight: 600">概率 {{item.probability}}%</span>
						</span>
						<span class="sp">各类别赏中赏概率不代表具体产品中赏概率</span>
					</view>
					<view class="prizesItems">
						<view class="prize" v-for="(item2, index2) in item.prizeList">
							<view class="kaImg">
								<image class="kabk" :src="$fileUrl() + '/drawCard_infinite/kaBk.png'" mode="widthFix">
								</image>
								<image class="img" :src="item2.icon" mode="aspectFit"></image>
							</view>
							<view class="kaName">
								{{ item2.name }}
							</view>
							<view class="price">
								<span class="priceText">￥{{ detail.price }}</span>
								参考价
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="winningRecord" v-if="active1 == 2">
			<view class="card" v-for="(item, index) in winningRecordList" :key="index">
				<view class="row">
					<view class="left">
						<image class="photo" :src="item.userAvtar" mode="aspectFill"></image>
						<span class="name">{{ item.userName }}</span>
					</view>
					<view class="right text1">
						<span style="margin-right: 5px">{{ item.creatTime }}</span>
						<span>No.{{ item.id }}</span>
					</view>
				</view>
				<view class="row" style="margin-top: 10px">
					<view class="left">
						<image class="img" :src="item.prizeIcon" mode="aspectFill"></image>
						<span class="name">{{ item.prizeName }}</span>
					</view>
					<view class="right" style="font-size: 14px">{{ $selectDictLabel(rewardType, item.prizeType) }} × 1
					</view>
				</view>
			</view>
			<noData v-if="winningRecordList.length == 0" />
		</view>
		<view class="buttons2">
			<view class="button" @click="submit(1)">
				<p>一发</p>
			</view>
			<view class="button" @click="submit(3)">
				<p>三发</p>
			</view>
			<view class="button" @click="submit(5)">
				<p>五发</p>
			</view>
			<view class="button" @click="submit(10)">
				<p>十发</p>
			</view>
		</view>
		<paymentPopup ref="paymentPopup" @callBack="paymentSuccess" />
		<view style="width: 100%; height: 100px;"></view>
	</view>
</template>

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

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

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

	export default {
		components: {
			paymentPopup,
			noData
		},
		onLoad(query) {
			console.log(query, 'query')
			if (query.id) {
				this.raffleId = query.id
				this.init()
			}
			this.paymentSuccess()
		},
		data() {
			return {
				rewardType: rewardType,
				active1: 1,
				detail: {},
				raffleId: null,
				prizeList: [],
				userIds: [],
				prizeUserList: [],
				winningRecordList: [],
				combos: 0
			}
		},
		methods: {
			init() {
				// 获取卡包详情
				this.getDetail()
				this.tabClick(1)
				this.getCombos()
			},
			// 支付成功后回调
			paymentSuccess() {
				let _this = this
				this.getCombos()
			},
			clickDrawCard() {
				this.$refs.paymentPopup.show(this.raffleId, this.selectIndex, this.detail)
			},
			tabClick(index) {
				this.active1 = index
				if (index == 1) {
					//获取奖池
					this.getPrizeList()
				} else if (index == 2) {
					// 获取中奖记录
					this.getPrizeUserList()
				}
			},
			getDetail() {
				let params = {
					raffleId: this.raffleId,
				}
				raffleDetailApi(params).then(res => {
					console.log(res, '详情')
					this.detail = res.data
				})
			},
			getPrizeList() {
				let params = {
					raffleId: this.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
				})
			},
			getPrizeUserList() {
				let params = {
					limit: 999,
					page: 1,
					raffleId: this.raffleId,
				}
				prizeUserListApi(params).then(res => {
					this.winningRecordList = res.data
				})
			},
			getCombos() {
				let params = {
					raffleId: this.raffleId,
				}
				combosApi(params).then(res => {
					console.log(res, '连击数')
					this.combos = res.data.combos
				})
			},
			submit(number) {
				this.$refs.paymentPopup.show(this.raffleId, number, this.detail)
			},
		},
	}
</script>

<style scoped lang="scss">
	.container {
		background: #9ec8f9;
		padding-top: 15px;
		overflow: auto;

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

		.box {
			margin: 0 10px 10px 10px;
			padding: 2px;
			background: linear-gradient(90deg, rgba(211, 252, 111, 1), rgba(61, 248, 255, 1));
			box-shadow: 0px 2px 6px 0px rgba(176, 123, 255, 0.3);
			border-radius: 24px;

			.boxContent {
				background: linear-gradient(90deg, #a4fcff 0%, #d3fc6e 100%);
				border-radius: 24px;
				opacity: 1;
				display: flex;
				padding: 8px 15px;

				.boxLeft {
					position: relative;
					flex: 1;

					.row1 {
						display: flex;
						justify-content: space-between;
						font-size: 18px;
						margin-bottom: 4px;

						.text {
							color: #000000;
							font-weight: 600;
							text-shadow: -2px -1px 0px rgba(255, 255, 255, 1);
							font-family: auto;
						}

						.text1 {
							text-shadow: none;
							font-weight: 500;
						}
					}

					.row2 {
						position: relative;
						top: 3px;
						height: 12vw;
						border-radius: 6vw;
						background: linear-gradient(90deg, #65c3e5 0%, #b1ff29 100%);

						.row2content {
							position: relative;
							top: -3px;
							background: #0d2a2c;
							height: 12vw;
							border-radius: 6vw;
							font-size: 10px;
							color: rgba(255, 255, 255, 0.9);
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: flex-start;
							padding: 0 13px;
						}
					}
				}

				.boxRiaht {
					padding-left: 8vw;
					padding-right: 15px;
					display: flex;
					align-items: center;

					.icon {
						width: 12vw;
						height: 12vw;
					}
				}
			}
		}

		.buttons1 {
			display: flex;
			justify-content: center;

			.button {
				width: 38vw;
				height: 10vw;
			}
		}

		.prizeList {
			.prizeRow {
				position: relative;
				margin: 0 10px 10px 10px;
				padding-bottom: 10px;

				.bk {
					position: relative;
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					z-index: 1;
				}

				.prizeRowContent {
					position: relative;
					width: calc(100% - 30px);
					padding: 10px 15px;
					z-index: 2;

					.prizesTitle {
						font-size: 12px;
						padding-bottom: 5px;
						width: 100%;
						color: #fff;
						display: flex;
						justify-content: space-between;

						.sp {
							color: rgba(255, 255, 255, 0.7);
							padding-top: 8px;
							font-size: 10px;
						}
					}

					.prizesItems {
						background: #fffbe8;
						display: flex;
						width: calc(100% - 16px);
						padding: 8px;
						border-radius: 8px;

						.prize {
							width: 22vw;

							.kaImg {
								position: relative;

								.kabk {
									width: 100%;
									height: 100%;
								}

								.img {
									position: absolute;
									top: 0;
									width: 70%;
									height: 80%;
									left: 52%;
									top: 50%;
									transform: translateX(-50%) translateY(-50%);
								}
							}

							.kaName {
								width: 100%;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								font-size: 12px;
								font-weight: 600;
								text-align: center;
							}

							.price {
								text-align: center;
								font-size: 10px;
								color: #999999;

								.priceText {
									color: #ff2c43;
									font-weight: 600;
									font-size: 12px;
								}
							}
						}
					}
				}
			}
		}

		.buttons2 {
			position: fixed;
			bottom: 10vw;
			display: flex;
			z-index: 4;
			justify-content: space-around;
			width: 100%;

			.button {
				width: 13vw;
				height: 13vw;
				font-size: 16px;
				color: #fff;
				background: linear-gradient(270deg, #531DBB 0%, #6E2FE5 100%);
				text-align: center;
				line-height: 13vw;
				border-radius: 4px;
				box-shadow: inset 0px 2px 3px 0px rgba(255, 255, 255, 0.25);
				position: relative;
				transform: rotate(45deg);
				font-weight: 600;

				p {
					transform: rotate(-45deg);
				}
			}
		}

		.winningRecord {
			.card {
				margin: 10px 10px 0 10px;
				border-radius: 8px;
				background: #fff;
				padding: 10px;

				.row {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						display: flex;
						align-items: center;

						.photo {
							margin-right: 5px;
							width: 30px;
							height: 30px;
							border-radius: 50%;
						}

						.name {
							font-size: 14px;
							font-weight: 600;
						}

						.img {
							width: 40px;
							height: 40px;
							border-radius: 2px;
							margin-right: 5px;
						}
					}

					.text1 {
						color: #666666;
						font-size: 12px;
					}
				}
			}
		}
	}
</style>