activity/src/view/SilkRoadSpringFestivalGala/pages/eight.vue

<template>
  <div class="eight">
    <img
      src="https://cxzx.smcic.net/topic/tool/img/ffk.png"
      style="width: 60vw; display: block; margin: 0 auto 6px auto"
    />
    <div class="headText">
      <p>2023丝路嘉年华暨丝路春晚</p>
      <p>携手秦农银行、长安花小榨菜籽油、长武苹果</p>
      <p>向你花式拜年，奖品丰厚，福利多多</p>
      <p>更多周边奖品欢迎你来拿！快来新年冲好运鸭！</p>
    </div>
    <van-row class="luckDraw">
      <van-col
        span="8"
        v-for="i in 12"
        :key="i + 'll'"
        :class="{ shakeSlow: show[i - 1] }"
      >
        <div v-if="show[i - 1]" class="click">点我</div>
        <van-image
          @click="draw"
          :width="img.width"
          :height="img.height"
          :class="{ img: true }"
          fit="contain"
          :src="'https://cxzx.smcic.net/topic/tool/img/silugift/' + i + '.png'"
        >
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
      </van-col>
    </van-row>
    <van-row style="background: #fff">
      <van-col span="8">
        <van-button
          class="btns"
          color="#eeb562"
          round
          plain
          hairline
          size="small"
          type="primary"
          url="https://shop97096255.m.youzan.com/v2/showcase/homepage?kdt_id=96904087&sf=qq_sm&is_share=1&shopAutoEnter=1&share_cmpt=native_wechat&from_uuid=756e1ce7-fafe-b14e-ba29-ab4dd9223ac8&is_silence_auth=1"
        >
          进店逛逛
        </van-button>
      </van-col>
      <van-col span="8">
        <van-button
          color="#eeb562"
          class="btns"
          round
          type="primary"
          size="small"
          @click="mygift"
        >
          我的奖品
        </van-button>
      </van-col>
      <van-col span="8">
        <van-button
          class="btns"
          color="#eeb562"
          round
          plain
          hairline
          size="small"
          type="primary"
          @click="addressObjshow"
        >
          我的地址
        </van-button>
      </van-col>
    </van-row>
    <van-notice-bar
      color="#000000"
      background="#ffffff"
      wrapable
      :scrollable="false"
      text="点击下方小视频，给手气充能，增加一次抽奖机会！"
    />
    <div class="vieoPlay">
      <van-icon
        name="play-circle-o"
        @click="() => playVideo()"
        color="#ffffff"
        class="play"
        size="40"
      />
      <img
        style="width: 100%"
        src="https://cxzx.smcic.net/topic/tool/img/videoImg.jpg"
      />
    </div>

    <van-dialog
      v-model:show="addressObj.show"
      :before-close="upaddress"
      title="我的地址"
      teleport="#app"
    >
      <van-cell-group inset>
        <van-field v-model="nickName" label="昵称" />
        <van-field disabled v-model="phone" type="tel" label="手机号" />
        <van-field
          v-model="address"
          rows="1"
          autosize
          label="地址"
          type="textarea"
          placeholder="请输入地址"
        />
      </van-cell-group>
    </van-dialog>

    <van-dialog
      :before-close="before"
      v-model:show="gift.show"
      :title="gift.name"
      teleport="#app"
      show-cancel-button
    >
      <img
        :src="gift.url"
        style="width: 10em; display: block; margin: 1em auto"
      />
      <p
        style="
          padding: 0 1em 1em 1em;
          font-size: 14px;
          text-align: center;
          color: #646566;
        "
      >
        恭喜你中奖，请于1月4日前，在右下角“我的地址”中上传收货地址哦~
      </p>
    </van-dialog>
  </div>
</template>
<script setup>
import { reactive, ref, defineEmits, defineExpose } from "vue";
import { showDialog, showToast, showConfirmDialog } from "vant";
import {
  getDrawOri,
  getUpdateOri,
  getGiftList,
} from "@/api/SilkRoadSpringGala.js";
// import { onMounted, reactive } from "vue";
// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
/**
 * window.$originData.orginParames.title 页面标题
 * window.$originData.orginParames.parameters 固定参数值
 * window.$originData.urlParames url参数
 */
let w = window.$originData.orginParames.availWidth || 0;
const show = ref(Array(12).fill(false));
const address = ref(localStorage.getItem("silkRoadAddress") || "");
const nickName = ref(localStorage.getItem("silkRoadName") || "");
const phone = ref(localStorage.getItem("silkRoadPhone") || "");
const next = false;
const emits = defineEmits(["showVideo", "showTitleFunc"]);
let t = setInterval(() => {
  let index = Math.ceil(Math.random() * 12) - 1;
  if (index < 0) index = 0;
  for (let i = 0; i < show.value.length; i++) {
    show.value[i] = i == index;
  }
  if (next) clearInterval(t);
}, 5000);

w = (w / 3) * 0.8;
const img = reactive({
  width: w,
  height: w,
});

let T = undefined;
const gift = ref({});
let isdraw = false;
function draw() {
  phone.value = localStorage.getItem("silkRoadPhone") || "";
  if (!phone.value) return emits("showTitleFunc");
  if (T) clearTimeout(T);
  T = setTimeout(() => {
    getDrawOri({
      phone: phone.value,
      code: window.$shanshipin && window.$shanshipin.UserId ? 76767676 : "",
    }).then(res => {
      const r = res || {};
      isdraw = r.prizeId !== 1; // 接入接口后直接由接口提供是否中将
      if (!isdraw)
        return showDialog({
          title: r.name,
          message:
            "很遗憾哟，新年礼物擦肩而过啦！点击下方刷个小视频吧，给手气充能，获取额外抽奖机会！",
        });
      console.log(r);
      gift.value.url = r.url;
      gift.value.name = r.name;
      gift.value.show = true;
    });
  }, 200);
}

function before(type) {
  if (type !== "confirm" || !isdraw) return true;
  showToast("奖品已打包，静等您收货哦！");
  return true;
}

const addressObj = ref({ show: false });

function upaddress() {
  if (!address.value) return;
  getUpdateOri({
    phone: phone.value,
    userName: nickName.value,
    addr: address.value,
  })
    .then(() => {
      localStorage.setItem("silkRoadAddress", address.value);
      localStorage.setItem("silkRoadName", nickName.value);
      addressObj.value.show = false;
    })
    .catch(() => {
      addressObj.value.show = false;
    });
}
function addressObjshow() {
  if (!phone.value) return showToast("请登录后在查看");
  addressObj.value.show = true;
}

function mygift() {
  getGiftList({
    phone: phone.value,
  }).then(r => {
    const giftList = r || [];
    const cardList = [];
    for (let i = 0; i < giftList.length; i++) {
      const v = giftList[i];
      cardList.push(
        <van-card
          num={v.winNum || 1}
          title={v.name || ""}
          thumb={v.url || ""}
        />
      );
    }
    showConfirmDialog({
      title: "我的奖品",
      confirmButtonText: "关闭",
      message: () => {
        return <div>{cardList}</div>;
      },
      showCancelButton: false,
    });
  });
}

function playVideo() {
  let url = "https://cxzx.smcic.net/topic/tool/media/ad.mp4";
  const random = Math.random();
  if (random >= 0.3 && random < 0.6)
    url = "https://cxzx.smcic.net/topic/tool/media/changanhua.M4V";
  else if (random >= 0.3)
    url = "https://cxzx.smcic.net/topic/tool/media/qinnongbank.mp4";
  emits("showVideo", url);
}

defineExpose({
  draw,
});
</script>
<style lang="scss" scoped>
.eight {
  width: 100%;
  height: 100%;
  padding: 0.5em 0;
  background-color: #fff;
  position: relative;

  .btns {
    margin: 0 auto;
    display: block;
    width: 8em;
  }
  .headText {
    text-align: center;
    font-size: 14px;
    width: 100vw;
    line-height: 2em;
  }
  .luckDraw {
    $background: #00000040;
    background-color: #eeeeee80;
    border-radius: 5px;
    padding: 0.5em;
    margin: 0.5em auto;
    width: 96%;

    .img {
      border-radius: 5px;
      display: block;
      margin: auto;
      border: 3px solid #ffffff;
    }

    .click {
      background-color: $background;
      position: absolute;
      border-radius: 3px;
      text-align: center;
      padding: 2px 3px;
      color: #fff;
      font-size: 14px;
      right: -0.5em;
      top: -0.5em;
      width: 4em;
      z-index: 1;
    }

    .click:before {
      position: absolute;
      display: block;
      content: " ";
      height: 0px;
      width: 0px;
      border: 3px solid $background;
      border-top-color: rgba($color: #000000, $alpha: 0);
      border-left-color: rgba($color: #000000, $alpha: 0);
      bottom: -3px;
      left: 9px;
      transform: rotate(45deg);
    }
  }
}

.shakeSlow {
  animation: shake-slow 1s ease-in-out;
}

@keyframes shake-slow {
  0% {
    transform: rotate(0) scale(1);
  }

  20% {
    transform: rotate(2.5deg);
  }

  40% {
    transform: rotate(-2.5deg);
  }

  60% {
    transform: rotate(2.5deg) scale(1.1);
  }

  80% {
    transform: rotate(-2.5deg);
  }

  100% {
    transform: rotate(0);
  }
}
</style>
<style lang="scss">
.van-card__title {
  font-size: 14px;
  height: 50px;
  line-height: 50px;
}
.van-card__bottom {
  height: 40px;
  line-height: 40px;
}
.eight {
  .van-col {
    padding: 0.2em 0;
    position: relative;
  }
  .van-notice-bar__wrap {
    background: #ffffff;
    color: #000000;
  }
  .vieoPlay {
    position: relative;
    font-size: 0;

    .play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

.dialogImg {
  width: 5em;
  display: block;
  margin: auto;
}
</style>