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

<template>
	<view class="common">
		<view class="body">
      <view class="top-class"></view>
      <view class="title">
        <view class="logo-container">
          <image class="logo-text"  src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/logo.png"  />
        </view>
        <view class="title-1">
          <view class="title-image"></view>
        </view>
      </view>
      <view class="head">
        <image class="logo-rules" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/rules.png"  />
      </view>
      <view class="head-ttile">
        <view class="head-ttile-img">
          <image class="ttile-img" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/bgi_3.png" mode="heightFix"/>
        </view>
        <view class="head-ttile-text">
          正宗海南·醇香浓郁
        </view>
      </view>

			<view class="content">
				<view class="chouka" style="width: 100%;">

					<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-img-item">
                        <image style="height:100rpx"
                               src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/money.png"
                               mode="heightFix"></image>
                      </view>
                      <view v-show="item.prizeType == 0" class="card-money" style="left: 90rpx;color: #3B3638">空
                      </view>
                      <view v-show="item.prizeType == 0" class="card-text-2">很遗憾！
                      </view>
                      <view v-show="item.prizeType == 1" class="card-img-item">
                        <image style="height:100rpx"
                          src=""
                          mode="heightFix"></image>
                      </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 && item.img !== '' " 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 v-show="item.prizeType == 4" class="card-text-1">谢谢惠顾</view>
											<view v-show="item.prizeType == 4" class="card-point">积分+{{item.point}}</view>
											<view v-show="item.prizeType == 4" class="card-text-2">积分已累计</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</template>

				</view>
        <view class="popup-win">
          <u-popup :show="showWin" :round="10" mode="center" @close="close" @open="open" >
            <view class="popup-flex">
              <view class="popup-content-scroll">


                <view v-show="prizeJson.prizeType == 2 || prizeJson.prize_type == 2" class="popup_text1">
                  凭外袋，赠本品槟榔一袋</view>
                <view v-show="prizeJson.prizeType == 4 || prizeJson.prize_type == 4" class="popup_text1">
                  活动积分奖励</view>
                <view class="center">
                  <image v-show="(prizeJson.prizeType == 2 || prizeJson.prize_type == 2) &&  prizeJson.img != '' " 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 == 1 || prizeJson.prize_type == 1"
                      class="center pupup_text2">
                  微信零钱！</view>
                <view class="popup_text1_2" v-show="prizeJson.prizeType == 1 || prizeJson.prize_type == 1" >
                  现金红包</view>
                <view v-show="prizeJson.prizeType == 2 || prizeJson.prize_type == 2"
                      class="center pupup_text3">
                  请凭包装袋到购买门店兑换！</view>
                <view style="text-align: center;margin: 18% 0px 10% 0px;;color: #FF9800;" v-show="prizeJson.prizeType == 2 || prizeJson.prize_type == 2" >
                  再来一包</view>
                <view v-show="prizeJson.prizeType == 4 || prizeJson.prize_type == 4">
                  <view class="center jf_text">+ {{prizeJson.point}}积分</view>
                  <view class="center">

                  </view>
                  <view class="center pupup_text3">
                    所获积分可前往积分商城兑换商品
                  </view>
                </view>
                <view class="confirm-btn-container">
                  <view class="confirm-btn" @click="close">我知道了</view>
                </view>
              </view>


            </view>
          </u-popup>
        </view>
				<view class="popup-unWin">
          <u-popup :show="showUnWin" :round="10" mode="center" @close="close" @open="open" >
            <view class="popup-flex">
              <view class="popup-content-scroll">
                <view class="popup_text1"></view>
                <view class="center" >
                  <view class="card-money" style="left: 235rpx;top:90px;color: #3B3638">空 </view>
                  <image class="popup_img"
                         src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/money.png"
                         mode="heightFix" />
                </view>

                <view class="center">
                 本次抽卡未中奖
                </view>
                <view class="center">
                  下次继续
                </view>
                <view class="center pupup_text3">很遗憾！</view>
                <view class="confirm-btn-container">
                  <view class="confirm-btn" @click="close">我知道了</view>
                </view>
              </view>

            </view>
          </u-popup>
				</view>


			</view>
		</view>

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

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

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

					}
				],
				totalDetail: '',
				prizeJson: {},
				saveData: {},
				scanCode: '',
				saveStatus: true,
				fankaStatu: false,
			}
		},
		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: {

			openDetail() {
				uni.navigateTo({
					url: '/pages/xhc/index/rules'
				});
			},
			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].price = list['card' + i].price;
					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.cards[i].point = list['card' + i].point;
				}
				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 == 1 || this.prizeJson.prize_type == 1 ||
							this.prizeJson.prizeType == 2 || this.prizeJson.prize_type == 2 ||
							this.prizeJson.prizeType == 4 || this.prizeJson.prize_type == 4) &&
						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++) {
            // 确保 cards 数组在索引 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].price = that.totalDetail[i].price;
              that.cards[i].money = that.totalDetail[i].money;
              that.cards[i].point = that.totalDetail[i].point;
              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)
				})
			},
			// 图片加载错误处理
			onImageError(e) {
				console.log('图片加载失败', e);
				// 可以在这里添加加载失败后的处理逻辑
			},
			// 图片加载成功处理
			onImageLoad(e) {
				console.log('图片加载成功', e);
			}
		}
	}
</script>

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


	.content {
		height: 60vh;
		border-radius: 10rpx;
    padding: 10rpx 24rpx;
		overflow: auto;
		display: flex;
		align-items: center;
		justify-content: center;
  }


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

	.card {
		width: 100%;
		height: 310rpx;
		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 .popup-win .u-popup__content {
		height: 600rpx;
		width: 500rpx;
		background-color: rgba(0, 0, 0, 0) !important;
		background-image:
			url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/card_img.png");
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}
  ::v-deep .popup-unWin .u-popup__content {
    height: 600rpx;
    width: 500rpx;
    background-color: rgba(0, 0, 0, 0) !important;
    background-image:
        url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/card_img.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

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


	::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;
    height: 100%;
	}



	::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;
		/* 垂直居中 */
	}


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



	.card-img-item {
		height: 100rpx;
		display: flex;
		justify-content: center;
	}

	.card-money {
		font-weight: 500;
		font-size: 36rpx;
		color: #FF31C2;
    position: absolute;
    top: 10rpx;
    left: 24px;
	}

	.card-point {
		font-weight: 500;
		font-size: 36rpx;
		color: yellow;
	}

	.card-text-1 {
		font-weight: 500;
		font-size: 30rpx;
		color: #000000;
    margin: 10rpx;
	}

	.card-text-2 {
		font-weight: 500;
		font-size: 22rpx;
		color: #FB911B;
	}

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


	.jf_text {
		font-weight: bold;
		font-size: 50rpx;
		color: #F94C28 ;
    margin-top: 10rpx;
	}

	.card-logo-popup {
		display: flex;
		justify-content: flex-end;
	}

	.popup_text1 {
		font-weight: bold;
		font-size: 36rpx;
		color: #FB911B;
		text-align: center;
    margin-top: 36%;
	}
  .popup_text1_2 {
    font-weight: bold;
    font-size: 36rpx;
    color: #FB911B;
    text-align: center;
    margin: 14%;
  }

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

	.popup_img {
		height: 120rpx;
		margin-top: -32rpx;
	}

	.pupup_text2 {
		font-weight: bold;
		font-size: 30rpx;
    color: #FF6B6B;
    margin-top: 3%;

	}

	.pupup_text3 {
		font-weight: bold;
		font-size: 30rpx;
		color: #FF6B6B;
		margin-top: 5%;
	}

	.pupup_textMoney {
		font-weight: 500;
		font-size: 46rpx;
		color: #FF6B6B;
    margin-top: 30%;
	}

  .confirm-btn-container {
    display: flex;
    justify-content: center;

  }
  .popup-unWin .confirm-btn-container{
    margin-top: 50rpx;
  }

  .confirm-btn {
    width: 200rpx;
    height: 70rpx;
    background-color: #FF982F;
    color: #4C2003;
    border-radius: 35rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    font-weight: bold;
  }

  .card-title {
    display: flex;
    justify-content: center;
  }
  .red-title-box {
    background-color: #FF982F;
    color: #FFFFFF;
    text-align: center;
    padding: 20rpx;
    border-radius: 10rpx;
    font-weight: bold;
    font-size: 28rpx;
    width: auto;
    height: 16rpx;
    line-height: 16rpx;
    margin: 0rpx 0 15rpx;
  }



</style>