activeDetail.vue

<template>
  <div id="active-detail">
    <img class="bg" src="../../../public/img/activeDetail_bg.jpg" alt="bg" />
    <template v-if="active_type === 'coupon'">
      <div class="coupon">
        <div class="user-icon">
          <img :src="userIcon" alt="icon">
        </div>
        <p class="slogan">送你限量优惠券，手慢无～</p>
        <div class="coupon-content">
          <img src="../../../public/img/coupon.png" alt="coupon_bg" />
          <div class="content">
            <div class="money">{{ couponDetail.unit }}元</div>
            <div class="split">
              <img src="../../../public/img/split.png" alt="split" />
            </div>
            <div class="other">
              <p>满{{couponDetail.salesUnit}}元可用</p>
              <p>
                有效期至：
                <span style="font-size: 12px;">{{ couponDetail.end_date }}</span>
              </p>
              <p>{{ couponDetail.deptId }}号店通用</p>
            </div>
          </div>
        </div>
        <div class="btn" @click="handleGet">立即领取</div>
      </div>
    </template>
    <template v-if="active_type === 'wheel'">
      <div class="wheel-container">
        <p class="title">{{ activityName }}</p>
        <div class="wheel">
          <div class="wheel-point" @click="Start_Game"></div>
          <img src="../../../public/img/wheel.png" alt="wheel" />
          <!-- <div class="circle"></div> -->
          <div
            class="wheel-bg"
            :class="{freeze: freeze}"
            :style="`transform: rotate(${wheelDeg}deg)`"
          >
            <div class="prize-list">
              <div class="prize-item-wrapper" v-for="(item,index) in prizeList" :key="index">
                <div
                  class="prize-item"
                  :style="`transform: rotate(${(360/ prizeList.length) * index }deg)`"
                >
                  <div class="prize-name">{{ item.name }}</div>
                  <div class="prize-icon">
                    <img src="/img/counter.png" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="awards">
          <van-field
            class="area"
            v-model="prizeDesc"
            rows="2"
            autosize
            type="textarea"
            show-word-limit
            :disabled="true"
          />
        </div>
        <div class="time-line">
          距离结束仅剩
          <span id="timer"></span>
        </div>
        <div class="description">
          <div class="t">活动介绍</div>
          <div class="content">{{ des }}</div>
        </div>
      </div>
    </template>
    <div
      class="btn-share"
      :style="active_type === 'coupon'? 'bottom: 0': ''"
      @click="handleShare"
    >立即分享</div>
    <van-overlay :show="showAward && !res_error" @click="showAward = false">
      <div class="wrapper" @click.stop>
        <div v-if="isAward" class="block">
          <div class="award-coupon">
            <img class="bg_img" src="/img/coupon.png" alt="coupon" />
            <div class="other">
              <p>{{ awardGood.coupon.type }}</p>
              <div class="split">
                <img src="../../../public/img/split.png" alt="split" />
              </div>
              <p>{{ awardGood.coupon.unit }}元</p>
            </div>
          </div>
          <p style="font-size: 20px;font-weight: bold;">OLAY全场通用抵扣券</p>
          <p style="font-size: 20px;font-weight: bold;">{{ awardGood.prizeName }}！</p>
          <p style="font-size: 20px;font-weight: bold;">恭喜您中奖！</p>
          <van-button style="background: #f00;color: #fff;" @click="handleGet">领取奖品</van-button>
          <van-button style="border-color: #7f7777;" @click="showAward = false">继续抽奖</van-button>
        </div>
        <div v-if="!isAward" class="block" style="background: #413d3de0;color: #fff;">
          <p style="font-size: 22px;">谢谢惠顾！</p>
          <p style="font-size: 14px;">很遗憾，此次未能中奖，再接再厉！</p>
        </div>
      </div>
    </van-overlay>
    <wx-auth :show-auth="showAuthDialog" @confirm="handleCheckAuth"></wx-auth>
  </div>
</template>

<script>
import axios from "axios";
import wxAuth from "@/components/wxAuth";
import * as APi_Active from "@/api/active";
import { CoutDown } from "@/utils/Foundation";
export default {
  name: "active-detail",
  components: { wxAuth },
  data() {
    return {
      userIcon: '/img/photo.png',
      couponDetail: {},
      game_end: false,
      res_error: false,
      error_message: "",
      timer: null,
      timeLine: "",
      isAward: false,
      showAward: false,
      userBaseInfo: {},
      isMember: false,
      openid: "",
      unionid: "",
      userIds: [],
      currentUrl: "",
      showAuthDialog: false,
      nowUrl: "",
      userId: "",
      code: "",
      active_id: "",
      active_type: "coupon",
      freeze: false,
      rolling: false,
      wheelDeg: 0,
      prizeNumber: 6,
      prizeListOrigin: [
        {
          name: "奖0",
          icon:
            "http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
        },
        {
          name: "奖1",
          icon:
            "http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
        },
        {
          name: "奖2",
          icon:
            "http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
        },
        {
          name: "奖3",
          icon:
            "http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
        },
        {
          name: "奖4",
          icon:
            "http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
        },
        {
          name: "奖5",
          icon:
            "http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
        }
      ],
      activityName: "",
      prizeDesc: "",
      des: "",
      awardGood: {
        prizeName: ""
      }
    };
  },
  async created() {
    this.currentUrl = location.href;
    this.active_id = this.$route.query.id;
    this.active_type = this.$route.query.active_type;
    this.userIcon = this.$route.query.headurl ? decodeURIComponent(this.$route.query.headurl) : '';
    // 验证用户是否登录
    if (!sessionStorage.getItem("userId")) {
      // 1.获取code
      if (this.$route.query.unionid === undefined) {
        console.log('query', this.$route.query);
        this.getUnionid();
      } else {
        this.userBaseInfo.unionid = JSON.stringify(this.$route.query.unionid);
        this.userBaseInfo.openid = JSON.stringify(this.$route.query.openid);
        let params = {
          number: 7,
          unionId: this.$route.query.unionid
        };
        console.log("params", params);
        APi_Active.isMember(params).then(res => {
          this.isMember = res.data.vipId !== "";
          this.userBaseInfo.vipId = res.data.vipId;
          this.userBaseInfo.mobile = res.data.mobile;
          this.userBaseInfo.name = res.data.name;
        });
      }
    }
  },
  mounted() {
    this.getAgentAuth();
    this.GET_DetailById(this.active_id);
  },
  watch: {
    prizeNumber() {
      this.freeze = true;
      this.wheelDeg = 0;

      setTimeout(() => {
        this.freeze = false;
      }, 0);
    }
  },
  computed: {
    prizeList() {
      return this.prizeListOrigin.slice(0, this.prizeNumber);
    }
  },
  methods: {
    // 领取(
    handleGet() {
      if (this.$route.query.unionid === undefined) {
        this.$toast("企业微信端不能领取");
        return;
      }
      let params = {
        couponId: this.awardGood.activityPrize
          ? this.awardGood.coupon.id
          : this.couponDetail.id,
        unionId: this.userBaseInfo.unionid,
        vipId: this.userBaseInfo.vipId
      };
      console.log("领取", params);
      APi_Active.collectMyCoupon(params).then(res => {
        this.showAward = false;
        this.$toast(
          "领取成功！奖品已经发送到您的会员账户，请进入欧亚小程序查看。"
        );
      });
    },
    GET_DetailById(id) {
      APi_Active.getActiveDetailById(id).then(res => {
        this.activityName = res.data.activityInfo.activityName;
        this.des = res.data.activityInfo.des;
        this.prizeDesc = res.data.activityInfo.prizeDesc;
        let time = res.data.activityInfo.endTime;
        this.timeLine =
          `${time.substring(0, 4)}-${time.substring(4, 6)}-${time.substring(
            6,
            8
          )}` + time.substring(8);
        this.prizeListOrigin = res.data.list;
        this.prizeNumber = res.data.list.length;
        if (this.active_type === "coupon") {
          let time2 = res.data.coupon.end_date;
          res.data.coupon.end_date =
            `${time2.substring(0, 4)}-${time2.substring(
              4,
              6
            )}-${time2.substring(6, 8)}` + time2.substring(8);
          this.couponDetail = res.data.coupon;
        }
        if (this.active_type === "wheel") {
          let cur_date = new Date();
          let end_time = new Date(this.timeLine.replace(/-/g, '/'));
          console.log('ios date', this.timeLine.replace(/-/g, '/'));
          if (end_time > cur_date) {
            this.timer = setInterval(() => {
              CoutDown(this.timeLine);
            }, 1000);
          } else {
            document.getElementById("timer").innerHTML = "已结束";
            this.game_end = true;
          }
        }
      });
    },
    handleCheckAuth() {
      this.showAuthDialog = false;
    },
    getUnionid() {
      let redirect_uri = encodeURIComponent(
        `oysales.oywanhao.com:8087/activeDetail?id=${this.active_id}&active_type=${this.active_type}`
      );
      window.location.href = `http://wxsyls.oysd.cn/getwxuserinfo.aspx?jump=${redirect_uri}`;
    },
    Start_Game() {
      // 在微信端打开 会有身份验证 路径中会带上 unionid
      if (this.$route.query.unionid === undefined) {
        this.$toast("企业微信端不能参与抽奖活动");
        return;
      }
      if (this.game_end) {
        this.$toast("活动已结束");
        return;
      }
      if (!this.userBaseInfo.vipId) {
        this.$toast("非会员,");
        let url = "http://oysales.oywanhao.com/register";
        window.location.href = url;
        return;
      }
      let params = {
        activityId: this.active_id,
        openId: this.userBaseInfo.openid,
        phone: this.userBaseInfo.phone,
        unionId: this.userBaseInfo.unionid,
        userName: this.userBaseInfo.name
      };
      if (this.rolling) {
        this.$toast("抽奖中，请勿多次点击！");
        return;
      }
      APi_Active.play(params)
        .then(res => {
          if (!res.data.prizedId) {
            this.res_error = true;
            this.$toast(res.data.message);
            return;
          }
          const { wheelDeg, prizeList } = this;
          this.rolling = true;
          const random = prizeList.map(item => item.id).indexOf(res.data.prizedId);
          this.wheelDeg =
            wheelDeg -
            (wheelDeg % 360) +
            6 * 360 -
            (360 / prizeList.length) * random;
          setTimeout(() => {
            this.awardGood = prizeList[random];
            this.awardGood.coupon = JSON.parse(this.awardGood.coupon);
            this.rolling = false;
            this.showAward = true;
            this.isAward = res.data.prizeName !== "谢谢惠顾";
          }, 4500);
        })
        .catch(err => {
          console.log("err", err);
        });
    },
    // 分享
    handleShare() {
      let url = `http://oysales.oywanhao.com:8087/activeDetail?id=${this.active_id}&active_type=${this.active_type}`;
      wx.invoke(
        "shareToExternalContact",
        {
          title: `${this.activityName}`, // 分享标题
          desc: `${this.des}`, // 分享描述
          link: url, // 分享链接
          imgUrl: "" // 分享封面
        },
        function(res) {
          if (res.err_msg == "shareToExternalContact:ok") {
            console.log("分享成功");
          } else {
            console.log(res.err_msg, "错误信息");
          }
        }
      );
    }
  },
  destroyed() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="scss">
#active-detail {
  height: 100%;
  .bg {
    position: fixed;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -10;
  }
  .coupon {
    position: relative;
    top: 15%;
    width: 90%;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #000;

    .user-icon {
      position: absolute;
      top: -54px;
      left: 0;
      right: 0;
      display: block;
      width: 100px;
      height: 100px;
      margin: 0 auto;
      text-align: center;
      line-height: 100px;
      font-size: 18px;
      border: 1px solid;
      border-radius: 50%;
      background: #fff;
      // filter: blur(2px);
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .slogan {
      height: 80px;
      padding-top: 25px;
      line-height: 80px;
      font-size: 16px;
      text-align: center;
    }

    .coupon-content {
      position: relative;
      width: 90%;
      margin: 10px auto;
      img {
        width: 100%;
      }
      .content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 85%;
        height: 92%;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .money {
          text-align: center;
          font-size: 32px;
          font-weight: bold;
        }
        .split > img {
          height: 70px;
        }
        .other {
          padding-left: 15px;
          font-size: 14px;
          font-weight: 400;
          p {
            margin-bottom: 5%;
          }
        }
      }
    }

    .btn {
      width: 85%;
      height: 50px;
      margin: 10px auto 30px;
      line-height: 50px;
      text-align: center;
      font-size: 0.5625rem;
      background-color: #fc0;
      border-radius: 4px;
    }
  }

  .wheel-container {
    .title {
      padding-top: 15%;
      font-size: 40px;
      text-align: center;
      color: #fff;
    }

    .wheel {
      position: relative;
      width: 100%;
      img {
        width: 100%;
      }

      .wheel-point {
        width: 20%;
        height: 32px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        font-size: 32px;
        text-align: center;
        line-height: 32px;
        z-index: 10;
      }

      .wheel-bg {
        width: 74%;
        height: 74%;
        border-radius: 1000px;
        overflow: hidden;
        // background: #fff;
        transition: transform 4s ease-in-out;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        &.freeze {
          transition: none;
          background: red;
        }
      }

      .prize-list {
        width: 90%;
        height: 90%;
        margin: auto;
        position: relative;
        text-align: center;
      }

      .prize-item-wrapper {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 62%;
      }

      .prize-item {
        width: 90%;
        height: 90%;
        margin: 0 auto;
        transform-origin: bottom;

        .prize-name {
          padding: 16px 0 0;
          font-size: 14px;
        }

        .prize-icon {
          width: 100%;
          img {
            min-width: 32px;
            min-height: 32px;
            width: 50%;
          }
        }
      }
    }

    .awards {
      width: 80%;
      margin: 0 auto 10px;
      .van-cell {
        background: #ff9;
        border-radius: 10px;
        font-weight: bold;
      }
    }

    .time-line {
      width: 80%;
      text-align: center;
      font-size: 16px;
      margin: 0 auto 20px;
      border-radius: 4px;
      background: #fff;
      span {
        color: #f00;
        font-size: 18px;
      }
    }

    .description {
      width: 100%;
      padding: 5px 1px;
      background: #fff;
      .t {
        position: relative;
        font-size: 16px;
        font-weight: bold;
        padding-left: 20px;
        &::before {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 8px;
          height: 21px;
          background: #fc0;
        }
      }
      .content {
        padding: 10px;
        font-size: 14px;
      }
    }
  }

  .btn-share {
    position: absolute;
    display: block;
    width: 100%;
    height: 45px;
    margin: 0.3125rem auto;
    text-align: center;
    font-size: 18px;
    line-height: 45px;
    background-color: #169bd5;
  }

  .van-overlay {
    z-index: 100;
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 70%;
    padding: 10px 0;
    background-color: #fff;
    .award-coupon {
      position: relative;
      width: 80%;
      .bg_img {
        width: 100%;
        height: 100%;
      }
      .other {
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 90%;
        height: 60%;
        margin: auto;
        color: #f00;
        p {
          margin: 0;
        }
      }
    }
    p {
      margin-bottom: 8px;
    }
    .van-button {
      width: 80%;
      border-radius: 5px;
      margin: 5px 0;
    }
  }
}
</style>