scancode-miro/pages/lgz/index/index.vue

<template>
	<view class="common">
		<view class="body">
			<view class="top-class"></view>
			<view class="title">
				梅山古镇
			</view>
			<view>
				<image class="logo-img" src="/static/images/common/logo.png" mode="aspectFit" />
			</view>
			<view class="head">
				<u-swiper :list="list1"></u-swiper>
			</view>
			<view class="text">
				<image src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/text.png"
					class="textImage"></image>
			</view>
			<view class="content">
				<view class="chouka" style="width: 100%;">
					<view class="" style="margin-bottom: 10px;">
						<u-row justify="space-between"
							customStyle="margin-bottom: 5px;display: flex; align-items: center;">
							<u-col span="4">
							</u-col>
							<u-col span="4" class="center-col">
								<view class="text-1">翻卡抽盲盒</view>
							</u-col>
							<u-col span="4" class="right-col">
								<view class="text-2" @click="openDetail()">活动规则</view>
							</u-col>
						</u-row>
					</view>

					<template>
						<!-- 卡片区 -->
						<view class="cards">
							<view class="card" v-for="(item, idx) in cards" :key="idx" @click="flipCard(idx)"
								:class="{ 'flipping': item.isFlipping, 'flipped': item.flipped }">
								<view v-if="item.checkStauts" class="select-tag">
									已选
								</view>
								<view class="card-inner">
									<view class="card-front">
										<image class="card-img" :src="item.front" mode="scaleToFill"></image>
									</view>
									<view class="card-back">
										<image class="card-img"
											:src="item.prizeType == 2  && item.img ? item.img : item.back"
											mode="scaleToFill"></image>
										<view class="card-back-text">
											<view v-show="item.prizeType == 0" class="card-text">很遗憾</view>
											<view v-show="item.prizeType == 1" class="card-text">{{item.money/100}}元红包
											</view>
											<view v-show="item.prizeType == 0" class="card-text">下次继续</view>

											<view v-show="item.prizeType == 2 && !item.img " class="card-text">恭喜您中奖了
											</view>
											<view v-show="item.prizeType == 2 && !item.img" class="card-text">
												{{item.prizeName}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</template>

				</view>
				<u-popup :show="showWin" :round="10" mode="center" @close="close" @open="open" closeable="true">
					<view class="popup-flex">
						<view class="popup-content-scroll">
							<!-- 这里放原来的内容部分（除返回按钮） -->
							<view class="popup-view">
								<image
									src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/win.png"
									class="winImgClss"></image>
							</view>
							<view class="popup-content">
								<u-row customStyle="margin-bottom: 5px">
									<u-col span="6">
										<image :src="prizeJson.img" class="prize"></image>
									</u-col>
									<u-col span="6">
										<view>{{prizeJson.prize_name}}</view>
									</u-col>
								</u-row>
								<view class="popup-text">
									请留下联系方式，稍后工作人员会联系您！
								</view>
								<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
									<u-form-item label="姓名" prop="userInfo.name" ref="item1">
										<u--input v-model="model1.userInfo.name" border="none"></u--input>
									</u-form-item>
									<u-form-item label="电话" prop="userInfo.tel" ref="item1">
										<u--input v-model="model1.userInfo.tel" border="none"></u--input>
									</u-form-item>
								</u--form>
							</view>
						</view>
						<view class="popup-footer">
							<view class="save-button" @click="addWinDetail()">领取</view>
						</view>
					</view>
				</u-popup>

				<u-popup :show="showUnWin" :round="10" mode="center" @close="close" @open="open" closeable="true">
					<view class="popup-flex">
						<view class="popup-content-scroll">
							<!-- 这里放原来的内容部分（除返回按钮） -->
							<view class="popup-view">
								<image
									src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/unWin.png"
									class="winImgClss"></image>
							</view>
							<view class="popup-content">
								<view class="">
									<image class="productImg" mode="widthFix"
										src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/product.png  ">
									</image>
								</view>
								<view class="">
									{{ randomText }}
								</view>
							</view>
						</view>
						<view class="popup-footer">
							<view class="save-button unWin" @click="close()">我知道了</view>
						</view>
					</view>
				</u-popup>

			</view>
		</view>

		<CustomTabbar />
	</view>
</template>

<script>
	import {
		randomTexts
	} from '../../../utils/randomTexts.js';
	import CustomTabbar from '@/components/tabbar.vue';
	import {
		addWinDetail,
		saveCardData
	} from '@/api/scan'
	export default {
		components: {
			CustomTabbar
		},
		data() {
			return {

				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.tel': {
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					},
				},
				model1: {
					userInfo: {
						name: '',
						tel: '',
						qrcodeId: ''
					},
				},
				showUnWin: false,
				showWin: false,
				list1: [
					"https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/commodity/1.jpg",
					"https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/commodity/2.jpg",
					"https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/commodity/3.jpg",
					"https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/commodity/4.jpg",
					"https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/commodity/5.jpg",
				],
				cards: [{
						front: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/one.png',
						back: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/bgiCard.png',
						flipped: false,
						prizeName: '',
						title: '',
						checkStauts: false,
						img: '',
						money: '',
						prizeType: '',
						isFlipping: false
					},
					{
						front: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/two.png',
						back: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/bgiCard.png',
						flipped: false,
						prizeName: '',
						title: '',
						checkStauts: false,
						img: '',
						money: '',
						prizeType: '',
						isFlipping: false
					},
					{
						front: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/three.png',
						back: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/bgiCard.png',
						flipped: false,
						prizeName: '',
						title: '',
						checkStauts: false,
						img: '',
						money: '',
						prizeType: '',
						isFlipping: false
					},
					{
						front: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/four.png',
						back: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/bgiCard.png',
						flipped: false,
						prizeName: '',
						title: '',
						checkStauts: false,
						img: '',
						money: '',
						prizeType: '',
						isFlipping: false
					},
					{
						front: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/five.png',
						back: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/bgiCard.png',
						flipped: false,
						prizeName: '',
						title: '',
						checkStauts: false,
						img: '',
						money: '',
						prizeType: '',
						isFlipping: false
					},
					{
						front: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/six.png',
						back: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/bgiCard.png',
						flipped: false,
						prizeName: '',
						title: '',
						checkStauts: false,
						img: '',
						money: '',
						prizeType: '',
						isFlipping: false

					}
				],
				totalDetail: '',
				prizeJson: {},
				saveData: {},
				scanCode: '',
				saveStatus: true,
				fankaStatu: false,
				randomText: ""
			}
		},
		onLoad() {
			this.setRandomText();
			let scanDetail = uni.getStorageSync('scanDetail');
			this.scanCode = uni.getStorageSync('scanCode');
			this.model1.userInfo.qrcodeId = this.scanCode;

			this.prizeJson = scanDetail.prizeJson;
			let planDetail = JSON.parse(scanDetail.planDetail);
			while (planDetail.length < 5) {
				planDetail.push({
					'prizeType': 0,
					'money': 0
				})
			}
			this.totalDetail = planDetail;
			console.log(planDetail);
			if (scanDetail.result.click) {
				this.initCardData(scanDetail.clickJson);
			}
		},
		methods: {
			setRandomText() {
				const randomIndex = Math.floor(Math.random() * randomTexts.length);
				this.randomText = randomTexts[randomIndex];
			},
			initCardData(clickJson) {
				let list = JSON.parse(clickJson);
				for (let i = 0; i < this.cards.length; i++) {
					if (i == list.index) {
						this.cards[i].checkStauts = true
					}

					this.cards[i].img = list['card' + i].img;
					this.cards[i].flipped = true;
					this.cards[i].prizeType = list['card' + i].prize_type == undefined ? list['card' + i].prizeType : list[
						'card' + i].prize_type;
					this.cards[i].money = list['card' + i].money;
					this.cards[i].prizeName = list['card' + i].prizeName == undefined ? list['card' + i].prize_name : list[
						'card' + i].prizeName;
				}
				this.$forceUpdate();

			},
			addWinDetail() {
				let that = this;
				this.$refs.uForm.validate().then(res => {
					addWinDetail(that.model1.userInfo).then(data => {
						this.showWin = false;
						if (data.code == 0) {
							that.saveStatus = false;
							// uni.redirectTo({
							// 	url: '/pages/lgz/index/claim' // 目标页面路径
							// })
							let params = {
								type: "success",
								title: "成功主题(带图标)",
								message: "提交成功",
								iconUrl: "https://uviewui.com/demo/toast/success.png",
							}
							that.$refs.uToast.show({
								...params
							});
						} else {

						}
					})
				}).catch(errors => {

				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.showUnWin = false;
				this.showWin = false
			},
			flipCard(idx) {
				if (this.fankaStatu) {
					return;
				}
				if (this.cards[idx].flipped) {
					return;
				}
				this.fankaStatu = true;
				setTimeout(() => {
					if (this.prizeJson.prizeType == 0 || this.prizeJson.prize_type == 0) {
						this.showUnWin = true;
					}

					if ((this.prizeJson.prizeType == 2 || this.prizeJson.prize_type == 2) && this.saveStatus) {
						this.showWin = true;
					}
				}, 2500); //弹框延迟3.5秒后显示弹框

				// 标记被点击的卡牌正在翻转
				this.cards[idx].isFlipping = true;
				this.cards[idx].checkStauts = true;

				let that = this;
				// 延迟翻转其他卡牌
				setTimeout(() => {
					that.cards[idx].flipped = true;
					that.cards[idx].isFlipping = false;

					// 其他未翻转的卡牌延迟2秒后同时翻转
					setTimeout(() => {
						that.cards.forEach((card, index) => {
							if (index !== idx && !card.flipped) {
								card.isFlipping = true;
								that.$forceUpdate();
							}
						});

						// 所有其他卡牌同时翻转
						setTimeout(() => {
							that.cards.forEach((card, index) => {
								if (index !== idx && !card.flipped) {
									card.flipped = true;
									card.isFlipping = false;
									that.$forceUpdate();
								}
							});
						}, 300); // 与其他卡牌翻转动画保持一致
					}, 1000); // 延迟2秒翻转其他卡牌


					// 处理数据逻辑
					that.totalDetail.splice(idx, 0, this.prizeJson);
					that.saveData.index = idx;

					for (let i = 0; i < that.totalDetail.length; i++) {
						if (that.cards[i]) {
							that.saveData['card' + i] = that.totalDetail[i];

							that.cards[i].prizeType = that.totalDetail[i].prize_type == undefined ?
								that.totalDetail[i].prizeType :
								that.totalDetail[i].prize_type;
							that.cards[i].img = that.totalDetail[i].img;
							that.cards[i].money = that.totalDetail[i].money;
							that.cards[i].prizeName = that.totalDetail[i].prizeName == undefined ?
								that.totalDetail[i].prize_name :
								that.totalDetail[i].prizeName;

						}
					}

					that.saveAllCardData();
				}, 100);
			},
			saveAllCardData() {
				let jsonStr = JSON.stringify(this.saveData);
				saveCardData(this.scanCode, jsonStr).then(res => {
					console.log(res)
				})
			},
			openDetail() {
				uni.navigateTo({
					url: '/pages/lgz/index/rules'
				});
			}

		}
	}
</script>

<style>
	@import url('../../../static/scss/common.css');

	.common {
		background-image:
			url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/bgi-two.png");
	}

	.title {
		height: 4vh;
		line-height: 5vh;
	}

	.head {
		background-image:
			url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/zhanshi.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height: 23vh;
		margin: 0px 40rpx;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */

	}

	.text {
		height: 10vh;
		text-align: center;
		line-height: 13vh;
		margin-bottom: 10rpx;
	}

	.textImage {
		height: 80rpx;
		width: 400rpx;
	}

	.content {
		height: 42vh;
		background: rgba(131, 100, 71, 0.5);
		border-radius: 10rpx;
		margin: 0rpx 40rpx;
		padding: 10rpx 24rpx;
		overflow: auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.text-1 {
		text-align: center;
		font-size: 24rpx;
		font-weight: 600;
		color: white;
		background-color: #9A1712;
		width: 160rpx;
		border-radius: 4rpx;
		height: 40rpx;
		line-height: 40rpx;
	}

	.text-2 {
		text-align: center;
		font-size: 24rpx;
		font-weight: 600;
		color: #F9D395;
		background-color: #9A1712;
		width: 120rpx;
		border-radius: 4rpx;
		height: 40rpx;
		line-height: 40rpx;
		margin-left: 80rpx;
	}

	.cards {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30rpx;
		width: 100%;
	}

	.card {
		width: 100%;
		height: 250rpx;
		position: relative;
		background: none;
		border-radius: 16rpx;
		margin: 0;
		perspective: 1000px;
	}

	.card-inner {
		position: relative;
		width: 100%;
		height: 100%;
		transition: transform 0.8s cubic-bezier(0.5, 1.5, 0.5, 1);
		transform-style: preserve-3d;
	}

	.card.flipping .card-inner {
		transform: rotateY(180deg);
	}

	.card.flipped .card-inner {
		transform: rotateY(180deg);
	}

	.card-front,
	.card-back {
		position: absolute;
		width: 100%;
		height: 100%;
		backface-visibility: hidden;
	}

	.card-back {
		transform: rotateY(180deg);
	}

	.card-back-text {
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		text-align: center;
		color: #9A1712;
		font-weight: bold;
		font-size: 28rpx;
		transform: translateY(-50%);
		z-index: 2;
		pointer-events: none;
	}


	.card-img {
		width: 100%;
		height: 100%;
		display: block;
	}


	::v-deep .content .u-popup__content {
		height: 720rpx;
		width: 600rpx;
		background-color: rgba(0, 0, 0, 0) !important;
		background-image:
			url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/bgiPopup.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	::v-deep .u-popup__content__close--top-right {
		top: 720rpx !important;
		right: 288rpx !important;
	}

	.winImgClss {
		height: 60rpx;
		width: 320rpx;
	}

	.popup-view {
		text-align: center;
		margin-top: 100rpx;
	}

	.popup-content {
		margin: 15px 54px;
		overflow: auto;
	}

	.popup-text {
		font-weight: 400;
		font-size: 20rpx;
		color: #9B0000;
	}

	.prize {
		height: 130rpx;
		width: 130rpx;
	}

	::v-deep .u-form-item__body {
		padding: 8rpx;
	}

	::v-deep uni-view.u-form-item__body__left {
		background: #AD7F55;
		border-radius: 5px 0px 0px 5px;
		border: 2px solid #63462B;
		border-right: none;
	}

	::v-deep .u-form-item__body__right {
		background-color: #fff;
		border-radius: 0px 5px 5px 0px;
		border: 2px solid #63462B;
	}

	::v-deep uni-text.u-form-item__body__left__content__label {
		color: #fff !important;
		padding-left: 4px;
		letter-spacing: 2px;
	}

	.popup-flex {
		display: flex;
		flex-direction: column;
		height: 100%;
		/* 或具体高度如340px，确保撑满弹窗 */
		min-width: 600rpx;
	}

	.popup-content-scroll {
		flex: 1;
	}

	.popup-footer {
		flex-shrink: 0;
		padding: 0rpx 0 60rpx 0px;
		text-align: center;
		background: transparent;
		/* 可选，确保无背景遮挡 */
	}

	.save-button {
		width: 90rpx;
		margin: 0 auto;
		background: #b22222;
		color: #F9D395;
		border-radius: 12rpx;
		padding: 18rpx 0;
		font-size: 24rpx;
		font-weight: bold;
		height: 16rpx;
		line-height: 16rpx;
		letter-spacing: 4rpx;
	}

	.unWin {
		width: 130rpx !important;
	}

	.productImg {
		width: 400rpx;
	}

	::v-deep .u-swiper {
		background-color: rgba(0, 0, 0, 0) !important;
		padding: 0px 20rpx !important;
		width: 90%;
	}

	::v-deep .u-col-4 {
		display: flex !important;
		justify-content: center !important;
		/* 水平居中 */
		align-items: center !important;
		/* 垂直居中 */
	}

	::v-deep .right-col .u-col-4 {
		display: flex !important;
		justify-content: flex-end !important;
		/* 水平居中 */
		align-items: center !important;
		/* 垂直居中 */
	}

	.card-img-f {
		height: 100rpx;
		width: 100rpx;
	}

	.card-text {
		font-size: 26rpx;
		padding: 0rpx 10rpx;
	}

	.select-tag {
		position: absolute;
		right: 0px;

		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
		width: 40px;
		text-align: center;
		background-color: #11BC64;
		height: 15px;
		border-radius: 3px;
		line-height: 15px;
		z-index: 5;
	}

	.logo-img {
		background-size: cover;
		/* 确保背景图片自适应填充整个容器 */
		background-position: center;
		/* 背景图片居中显示 */
		background-repeat: no-repeat;
		/* 防止背景图重复 */
		height: 42rpx;
		width: 180rpx
	}
</style>