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

<template>
	<view class="common">
		<view class="body">
			<view class="top-class"></view>
			<view class="title">
				超级炫
			</view>
			<view class="head">
				<u-row class="row-class">
					<u-col span="4">
						<image class="logo-img" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/logo.png" mode="aspectFit" />
					</u-col>
					<u-col span="4">
						<image class="commodity-img" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/commodity.png" mode="aspectFit" />
					</u-col>
					<u-col span="4">
						 <image class="logo-rules" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/rules.png"  />	
					</u-col>
				</u-row>
			</view>
			<view class="topImg">
				 <image class="img_1" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/topImg.png" mode="heightFix" />	
			</view>
			<view class="topImg">
				 <image class="img_2" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/topImg_2.png" mode="heightFix" />	
			</view>
			<view class="content">
				<view class="chouka" style="width: 100%;">
					<view class="cardTop" >
						
					</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.back"
											mode="scaleToFill"></image>
										<view class="card-back-text">
											<view v-show="item.prizeType == 0" class="card-text-1">很遗憾</view>
                      <view v-show="item.prizeType == 0" class="card-img-item" >
                        <image style="height:100rpx"  src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/regret.png" mode="heightFix"></image>
                      </view>
											<view v-show="item.prizeType == 0" class="card-text-2">下次继续</view>
                      <view v-show="item.prizeType == 1" class="card-text-1">现金红包</view>
                      <view v-show="item.prizeType == 1" class="card-money">￥{{item.money/100}}</view>
                      <view v-show="item.prizeType == 1" class="card-text-2">已存入您的微信零钱</view>
                      <view v-show="item.prizeType == 2" class="card-text-1">再来一包</view>
                      <view v-show="item.prizeType == 2" class="card-img-item" >
                         <image style="height:100rpx"  :src="item.img" mode="heightFix"></image>
                      </view>
                      <view v-show="item.prizeType == 2" class="card-text-2">凭包装兑换</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</template>

				</view>

			</view>
		</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-title">恭喜您，中奖啦</view>
          <view class="card-logo-popup">
            <image class="card_logo" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/logo_2.png" mode="heightFix" />
          </view>
          <view v-show="prizeJson.prizeType == 1 || prizeJson.prize_type == 1" class="popup_text1">现金红包</view>
          <view v-show="prizeJson.prizeType == 2 || prizeJson.prize_type == 2"  class="popup_text1">再来一包</view>
          <view class="center">
            <image v-show="prizeJson.prizeType == 1 || prizeJson.prize_type == 1"  class="popup_img" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/money.png" mode="heightFix" />
            <image v-show="prizeJson.prizeType == 2 || prizeJson.prize_type == 2"  class="popup_img" :src="prizeJson.img" mode="heightFix" />
          </view>
          <view v-show="prizeJson.prizeType == 1 || prizeJson.prize_type == 1" class="center pupup_textMoney">￥{{prizeJson.money/100}}</view>
          <view v-show="prizeJson.prizeType == 1 || prizeJson.prize_type == 1" class="center pupup_text2">已存入您的微信零钱！</view>
          <view v-show="prizeJson.prizeType == 2 || prizeJson.prize_type == 2" class="center pupup_text2">请凭包装袋到购买门店兑换！</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-title">很遗憾，未中奖</view>
          <view class="card-logo-popup">
            <image class="card_logo" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/logo_2.png" mode="heightFix" />
          </view>
          <view class="popup_text1"></view>
          <view class="center">
            <image class="popup_img" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/regret.png" mode="heightFix" />
          </view>
          <view class="center pupup_text2">本次抽卡未中奖，下次继续！</view>
				</view>

			</view>
		</u-popup>
		<CustomTabbar />
	</view>
</template>

<script>
	import CustomTabbar from '@/components/tabbar_cjx.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: true,

				cards: [{
						front: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/one.png',
						back: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/card_img.png',
						flipped: false,
						prizeName: '',
						title: '',
						checkStauts: false,
						img: '',
						money: '',
						prizeType: '',
						isFlipping: false
					},
					{
						front: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/two.png',
						back: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/card_img.png',
						flipped: false,
						prizeName: '',
						title: '',
						checkStauts: false,
						img: '',
						money: '',
						prizeType: '',
						isFlipping: false
					},
					{
						front: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/three.png',
						back: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/card_img.png',
						flipped: false,
						prizeName: '',
						title: '',
						checkStauts: false,
						img: '',
						money: '',
						prizeType: '',
						isFlipping: false
					},
					{
						front: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/four.png',
						back: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/card_img.png',
						flipped: false,
						prizeName: '',
						title: '',
						checkStauts: false,
						img: '',
						money: '',
						prizeType: '',
						isFlipping: false
					},
					{
						front: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/five.png',
						back: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/card_img.png',
						flipped: false,
						prizeName: '',
						title: '',
						checkStauts: false,
						img: '',
						money: '',
						prizeType: '',
						isFlipping: false
					},
					{
						front: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/six.png',
						back: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/card_img.png',
						flipped: false,
						prizeName: '',
						title: '',
						checkStauts: false,
						img: '',
						money: '',
						prizeType: '',
						isFlipping: false

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

			this.prizeJson = scanDetail.prizeJson;
      console.log("----------------------------");
      console.log(this.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: {
			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.cards[idx].flipped) {
					return;
				}
				setTimeout(() => {

          if (this.prizeJson.prizeType == 0 || this.prizeJson.prize_type == 0) {
            this.showUnWin = true;
          }

          if ((this.prizeJson.prizeType == 1 || this.prizeJson.prize_type == 1 || 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++) {
						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_cjx.css');


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

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

	.content {
		height: 50vh;
		border-radius: 10rpx;
		margin: 20rpx 40rpx;
		padding: 10rpx 24rpx;
		overflow: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		background-image:
			url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/cardBgi.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.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: #ffffff;
		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 .u-popup__content {
		height: 500rpx;
		width: 500rpx;
		background-color: rgba(0, 0, 0, 0) !important;
		background-image:
			url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/card_img_2.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	::v-deep .u-popup__content__close--top-right {
		top: 510rpx !important;
		right: 245rpx !important;
    color: #ffffff;
	}

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

	}

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


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

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

	.cardTop{
		margin-bottom: 20rpx;
		background-image:
			url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/title_bgi.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	    height: 80rpx;
	    margin-top: 20rpx;
	}
	.card-img-item{
		height: 100rpx;
		display: flex;
		justify-content: center;
	}
  .card-money{
    font-weight: 500;
    font-size: 36rpx;
    color: #FF31C2;
  }
  .card-text-1{
    font-weight: 500;
    font-size: 30rpx;
    color: #FFFFFF;
  }
  .card-text-2{
    font-weight: 500;
    font-size: 22rpx;
    color: #FFFFFF;
  }
  .popup-title{
    width: 320rpx;
    height: 60rpx;
    background: linear-gradient(45deg, #A767DF, #E7CFFF, #6B51D5, #F6ECFC);
    border-radius: 30rpx;
    text-align: center;
    margin-top: -20px;
    margin-left: 96rpx;
    line-height: 60rpx;
    font-weight: bold;
    font-size: 36rpx;
    color: #000000;
  }
  .card_logo{
    height: 80rpx;
  }
  .card-logo-popup{
    display: flex;
    justify-content: flex-end;
  }
.popup_text1{
  font-weight: bold;
  font-size: 36rpx;
  color: #F6F6F9;
  text-align: center;
  margin-top: -40rpx;
}
.center{
  display: flex;
  justify-content: center;
}
.popup_img{
  height: 200rpx;
  margin-top: 20rpx;
}
.pupup_text2{
  font-weight: bold;
  font-size: 30rpx;
  color: #F6F6F9;
  margin-top: 150rpx;

}
.pupup_textMoney{
  font-weight: 500;
  font-size: 46rpx;
  color: #FF6B6B;
  margin-top: -170rpx;
}
</style>