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

<template>
	<view class="common">
		<view class="body">
			<view class="top-class"></view>
			<view class="title">
				梅山古镇
			</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.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>
                  </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-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="">
							你比我大，
							为什么我出生那天你没来看我！
						</view>
					</view>
				</view>
				<view class="popup-footer">
					<view class="save-button unWin" @click="close()">我知道了</view>
				</view>
			</view>
		</u-popup>
		<CustomTabbar />
	</view>
</template>

<script>
	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,
			}
		},
		onLoad() {
			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: {
			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 == 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.css');

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

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