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">
							连击 × 0
						</view>
						<view class="text">
							0 <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;">概率0.21%</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="">
			<button>
				抽一发
			</button>
			<button>
				抽三发
			</button>
			<button>
				抽五发
			</button>
			<button>
				抽十发
			</button>
		</view>
		<paymentPopup ref="paymentPopup" @callBack="paymentSuccess" />
	</view>
</template>

<script>
	import {
		rewardType,
	} from "@/utils/commonConfig.js"
	import {
		raffleDetailApi,
		prizeListApi,
		prizeUserListApi
	} from "@/api/drawCard.js"
	
	import {
		cardType,
		formatSeconds
	} from "@/utils/utils.js"
	
	import paymentPopup from "@/component/paymentPopup.vue"
	
	export default {
		components: {
			paymentPopup
		},
		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: [],
			}
		},
		methods: {
			init() {
				// 获取卡包详情
				this.getDetail()
				this.tabClick(1)
			},
			clickDrawCard() {
				this.$refs.paymentPopup.show(this.params.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 => {
					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
				})
			},
		}
	}
</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: 30px;
					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: 50%;
									top: 50%;
									transform: translateX(-46%) 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;
								}
							}
							
						}
					}
				}
			}
		}
	}
</style>