dvcp_v2_wxcp_app/src/project/activeAnalysis/AppLuckyDraw/AppLuckyDraw.vue

<template>
  <div class="AppLuckyDraw">
    <div class="header-bg">
      <img src="./img/header-bg.png" alt="" class="header-bg-img">
      <!-- <img src="./img/share-btn.png" alt="" class="share-bg-img"> -->
      <div class="share-btn" @click="share">分享活动</div>
    </div>
    <div class="box-content">
      <div class="title">
        <img src="./img/title-bg.png" alt="">
        <p>打卡活动</p>
      </div>
      <p class=" text-line mar-b0">新年伊始，企业微信团队为创建安全和谐的网络办公环境，诚邀大家使用企业微信参与打卡活动！活动详情如下：</p>
    </div>
    <div class="box-content pad-lf18">
      <div class="title">
        <img src="./img/title-bg.png" alt="">
        <p>打卡进度</p>
      </div>
      <p class="count-text">当前已打卡<span>{{activeInfo.clockCount}}</span>天</p>
      <div class="flex-img">
        <div class="flex-img-item">
          <div>抽奖<br/>次数</div>
        </div>
        <div class="flex-img-item">
          <div>抽奖<br/>次数</div>
        </div>
        <div class="flex-img-item">
          <div>抽奖<br/>次数</div>
        </div>
        <div class="flex-img-item">
          <div>抽奖<br/>次数</div>
        </div>
        <div class="flex-img-item">
          <div>抽奖<br/>次数</div>
        </div>
      </div>
      <div class="count-line">
        <div class="line-item" v-for="(item, index) in 20" :key="index" :class="activeInfo.clockCount > index ? 'active' : ''"></div>
      </div>
      <div class="flex-day">
        <div>1天</div>
        <div>5天</div>
        <div>10天</div>
        <div>15天</div>
        <div>20天</div>
      </div>
    </div>
    <div class="box-content" :class="awardedList.length ? 'pad-b120' : 'pad-b48'">
      <div class="title">
        <img src="./img/title-bg.png" alt="">
        <p>大转盘</p>
      </div>
      <div class="turntable-content">
        <view :animation="animationData" class="turntable">
          <view v-for="(item, index) in activeInfo.prizes" :key="index" class="sector-item">
            <view class="sector" :style=" 'transform: rotate(' + (index * (360 / activeInfo.prizes.length) - 0.5 * (360 / activeInfo.prizes.length)) + 'deg)'">
              <view class="inner" :style=" 'transform: rotate(' + 360 / activeInfo.prizes.length +'deg)'"></view>
            </view>
            <div :style=" 'transform: rotate(' + index * (360 / activeInfo.prizes.length) + 'deg) ;' " class="cell">
              <p>{{ item.name }}</p>
              <p v-if="item.belongRound > activeInfo.roundNumber">未开启</p>
              <img :src="item.picture" alt="" class="cell-img" :class="item.belongRound > activeInfo.roundNumber ? 'clock-active' : ''" />
              <img src="https://cdn.cunwuyun.cn/xlgl/lock.png" alt="" class="clock-img" v-if="item.belongRound > activeInfo.roundNumber">
            </div>
          </view>
        </view>
        <img src="./img/pointer.png" alt="" class="point-img">
        <div class="turntable-btn" @click="raffle">立即抽奖</div>
      </div>
      <div class="lucky-list" v-if="awardedList.length">
        <u-notice-bar mode="vertical" :is-circular="false" :list="luckyList" :volume-icon="false" bg-color="#FFDEAC" padding="0rpx 0rpx" border-radius="60rpx"></u-notice-bar>
        <u-notice-bar mode="vertical" :is-circular="false" :list="luckyList2" :volume-icon="false" bg-color="#FFDEAC" padding="0rpx 0rpx" border-radius="60rpx"></u-notice-bar>
        <u-notice-bar mode="vertical" :is-circular="false" :list="luckyList3" :volume-icon="false" bg-color="#FFDEAC" padding="0rpx 0rpx" border-radius="60rpx"></u-notice-bar>
      </div>
    </div>
    <div class="box-content">
      <div class="title">
        <img src="./img/title-bg.png" alt="">
        <p>活动时间</p>
      </div>
      <div class="text-line mar-b0">
        <p>活动时间：2023年2月7日~2023年3月8日 </p>
        <p>兑换时间：预计3月9日起</p>
      </div>
    </div>
    <div class="box-content">
      <div class="title">
        <img src="./img/title-bg.png" alt="">
        <p>活动规则</p>
      </div>
      <div class="title-text">奖品内容</div>
      <div class="text-line">
        <p>企业微信笔记本礼盒，腾讯Q宠公仔，腾讯Q宠手办盲盒，终极大奖(华为P50手机，华为matePad11平板电脑，华为watch GT3智能手表)。</p>
      </div>
      <div class="title-text">参与方式</div>
      <div class="text-line">
        <p>打开企业微信工作台“抽奖活动”应用，进入活动主页点击右侧立即参与，选择多样打卡方 式(每日至少3种)，获取抽奖机会，
          抽取公仔，记事本，平板电脑，手机等多重好礼盲盒 ipad 多重好礼。每天的打卡状态在次日16:30通知。
        </p>
      </div>
      <div class="title-text">打卡方式</div>
      <div class="text-line">
        <p>①至少与3位同事互相发消息并至少在1个群聊中发言;</p>
        <p>②点击工作台中任意应用如会议，汇报，审批等进入使用;</p>
        <p>③点击工作台上方宣传栏任意模块进入，浏览超过10分钟；</p>
        <p>④阅读行业资讯中任意文章，超过10分钟。</p>
      </div>
      <div class="title-text">抽奖规则</div>
      <div class="text-line">
        <img src="./img/content-img.png" alt="">
      </div>
      <div class="title-text">领取方式</div>
      <div class="text-line mar-b0">
        <p>2023年3月9日起根据各旗县网信办通知地点领取，一切解释权属企业微信团队，有任何疑问请联系“锡林郭勒盟党政云平台”内“技术支持”分组的工作人员。</p>
      </div>
    </div>
    <div class="box-content mar-b48">
      <div class="title">
        <img src="./img/title-bg.png" alt="">
        <p>助攻小插件</p>
      </div>
      <img :src="activeInfo.wxQrcode" alt="" class="qrcode-img">
      <div class="text-line mar-b0">
        <p class="text-center">关注微信插件，以免忘记打卡，仅用于接收提醒，<br/>不计入打卡。</p>
      </div>
    </div>
    <div class="share-bottom-btn" @click="share">分享活动</div>
    <img src="./img/sign-btn.png" alt="" class="sign-btn" v-if="!activeInfo.signupTime" @click="signUp">
    
    <u-modal v-model="showPhoneMask" ref="uModal" :show-cancel-button="true" :async-close="true" @confirm="bindPhoneConfirm" @cancel="cancel" class="phone-mask">
      <div class="item">
        <span class="label"><span class="tips">*</span>手机号</span>
        <div class="value">
          <u-input type="tel" placeholder="请填写手机号" v-model="phone" input-align="right" placeholder-style="color:#999;font-size:15px;" height="42"  :maxlength="11" :clearable="false" />
        </div>
      </div>
    </u-modal>
  </div>
</template>
<script>
import {mapActions, mapState} from 'vuex'
export default {
  name: "AppLuckyDraw",
  appName: "幸运抽奖",
  computed: {
    ...mapState(['user']),
  },
  data() {
    return {
      deg: 0, // 初始化角度
      duration: 4000, //动画时长
      awardNumber: 0, // 中奖区域 从1开始
      isStart: false, //防止多次触发动画
      animationData: {}, //动画对象
      showPhoneMask: false,
      phone: '',
      activityId: '',
      friendId: '',
      activeInfo: {},
      awardedList: [],
      luckyList: [],
      luckyList2: [],
      luckyList3: [],
    };
  },
  onLoad(option) {
    this.animation = uni.createAnimation({
      duration: this.duration,
      timingFunction: "ease-in-out", //旋转模式
    });
    this.activityId = option.activityId
    this.friendId = option.friendId || ''
    // this.activityId = '75a4c4493de54f9fb63868817079c89c'
    this.getDetail()
    this.getAwardedList()
  },
  onShow() {
    wx.hideOptionMenu();
  },
  methods: {
    ...mapActions(['injectJWeixin', 'wxInvoke', 'agentSign']),
    //封装动画旋转整数圈的方法，只需接受（角度，时间）即可开始旋转动画
    rotate(deg, duration) {
      if (this.isStart) return; //防止用户多次点击动画
      this.isStart = true; //此时旋转开始，动画无法再次触发
      setTimeout(
        function () {
          //设置定时器在动画时间后方可再次触发转盘动画
          this.isStart = false;
        }.bind(this), duration); //此时用的普通函数，存在this指向问题，需要改变this指向
      this.animation.rotate(deg).step().rotate((this.awardNumber - 1) * -(360 / this.activeInfo.prizes.length)).step({
        duration: 0,
        timingFunction: "linear",
      });
      this.animationData = this.animation.export();
    },
    //开始旋转
    onStart() {
      //提前将要转的角度算好，再传入要转的时长即可转到自己想要的角度
      this.rotate( 360 + (360 - (this.awardNumber - 1) * (360 / this.activeInfo.prizes.length)),this.duration);
    },
    bindPhoneConfirm() {
      this.$refs.uModal.clearLoading()
      if(!this.phone) {
        return this.$u.toast('请输入手机号')
      }
      let regTel = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
      if (!regTel.test(this.phone)) {
        return this.$u.toast('请输入正确的手机号')
      }

      this.$http.post(`/app/appmarketingactivityinfo/bindPhone?phone=${this.phone}`).then((res) => {
        if (res.code == 0) {
          this.showPhoneMask = false
          this.getDetail()
          this.$u.toast('绑定成功')
        }
      })
    },
    cancel() {
      this.phone = ''
      this.showPhoneMask = false 
    },
    getDetail() {
      this.$http.post(`/app/appmarketingactivityinfo/queryDetailByIdWXCP?activityId=${this.activityId}&friendId=${this.friendId}`).then((res) => {
        if (res.code == 0) {
          this.activeInfo = {...res.data}
        }
      }).catch((err) => {
        this.$u.toast(err)
      })
    },
    //抽奖
    raffle() {
      if(!this.activeInfo.vaildPhone) {
        return this.showPhoneMask = true
      }
      this.$http.post(`/app/appmarketingactivityinfo/raffle?activityId=${this.activityId}`).then((res) => {
        if (res.code == 0) {
          this.awardNumber = res.data
          this.onStart()
          setTimeout(() => {
            this.$u.toast(`恭喜抽中${this.activeInfo.prizes[this.awardNumber].name}!`)
            this.getDetail()
          }, 4000)}
      }).catch((err) => {
        this.$u.toast(err)
      })
    },
    //活动报名
    signUp() {
      if(!this.activeInfo.vaildPhone) {
        return this.showPhoneMask = true
      }
      this.$http.post(`/app/appmarketingactivityinfo/signup?activityId=${this.activityId}`).then((res) => {
        if (res.code == 0) {
          this.$u.toast('活动报名成功！')
          this.getDetail()
        }
      }).catch((err) => {
        this.$u.toast(err)
      })
    },
    getAwardedList() {
      this.$http.post(`/app/appmarketingactivityinfo/awardedList?activityId=${this.activityId}`).then((res) => {
        if (res.code == 0) {
          if(res.data.length) {
            var textList = []
            res.data.map((item, index) => {
              textList[index] = `${this.geTel(res.data[index].phone)}用户获得${res.data[index].prizeName}`
            })
            var num = Math.floor(textList.length/3)
            this.luckyList = textList.slice(0, num)
            this.luckyList2 = textList.slice(num, num*2)
            this.luckyList3 = textList.slice(num*2, num*3)
            this.awardedList = textList
          }
        }
      })
    },
    geTel(tel){
      var reg = /^(\d{3})\d{4}(\d{4})$/;  
      return tel.replace(reg, "$1****$2");
    },
    share() {
      this.agentSign().then((res) => {
        console.log(999, res)
        this.injectJWeixin(['shareAppMessage', 'shareWechatMessage']).then(() => {
          this.wxInvoke(['shareAppMessage', {
            title: '幸运抽奖',
            desc: '新年伊始，企业微信团队为创建安全和谐的网络办公环境，诚邀大家使用企业微信参与打卡活动！',
            link: `./AppLuckyDraw/AppLuckyDraw?activityId=${this.activityId}&friendId=${this.user.id}`,
          }])
        })
      })
    },
  },
};
</script>

<style lang='scss'>
.AppLuckyDraw {
  // position: relative;
  width: 100%;
  background-color: #F30000;
  padding-bottom: 64px;
  // overflow: hidden;
  .header-bg {
    width: 100%;
    position: relative;
    margin-bottom: 44px;
    .header-bg-img {
      max-width: 100%;
    }
    .share-btn {
      width: 200px;
      padding-left: 64px;
      height: 56px;
      line-height: 56px;
      font-family: PingFangSC-SNaNpxibold;
      font-weight: 600;
      font-size: 28px;
      color: #FFE6C3;
      text-shadow: 0 2px 4px rgba(173,0,0,0.80);
      box-sizing: border-box;
      position: absolute;
      top: 32px;
      right: 0;
      background-image: url('./img/share-btn.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      cursor: pointer;
    }
    .box-content {
      width: 706px;
      background: #FFE9C7;
      border: 4px solid #FFEBA0;
      box-shadow: inset 0 0 14px 4px rgba(255,113,20,0.60);
      border-radius: 44px;
      box-sizing: border-box;
      margin: 0 0 44px 22px;
      position: relative;
    }
  }
  .box-content {
    width: calc(100% - 48px);
    padding: 64px 32px 48px;
    background: #FFE9C7;
    border: 4px solid #FFEBA0;
    box-shadow: inset 0 0 16px 4px rgba(255,113,20,0.60);
    border-radius: 48px;
    margin: 0 0 80px 24px;
    position: relative;
    box-sizing: border-box;
    background: #FFE9C7;
    .title {
      width: 240px;
      height: 100px;
      position: absolute;
      top: -50px;
      left: 50%;
      margin-left: -120px;
      img {
        width: 100%;
        height: 100%;
      }
      p {
        width: 240px;
        line-height: 80px;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        font-family: PingFangSC-SNaNpxibold;
        font-weight: 600;
        font-size: 32px;
        color: #FFE6C3;
        text-shadow: 0 2px 4px rgba(173,0,0,0.80);
      }
    }
    .text-line {
      width: 100%;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 28px;
      color: #E55500;
      margin-bottom: 32px;
      p{
        line-height: 44px;
        word-break: break-all;
      }
      img {
        width: 636px;
      }
      .text-center {
        text-align: center;
      }
    }
    .title-text {
      line-height: 48px;
      font-family: PingFangSC-SNaNpxibold;
      font-weight: 600;
      font-size: 34px;
      color: #DC0000;
      margin-bottom: 16px;
    }
    .qrcode-img {
      display: inherit;
      width: 240px;
      height: 240px;
      margin: 0 auto 32px;
    }
    .count-text {
      line-height: 40px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 28px;
      color: #E55500;
      text-align: center;
      margin-bottom: 24px;
      span {
        color: #1BAFB3;
        margin: 0 8px;
      }
    }
    .flex-img {
      display: flex;
      padding: 0 0 20px;
      .flex-img-item {
        div {
          display: inline-block;
          width: 80px;
          height: 88px;
          text-align: center;
          line-height: 28px;
          padding-top: 8px;
          background-image: url('./img/count-bg.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          font-family: PingFangSC-Medium;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 24px;
          color: #FF7311;
        }
      }
      .flex-img-item:nth-of-type(1) {
        // flex: 1;
        width: 110px;
        text-align: left;
      }
      .flex-img-item:nth-of-type(2) {
        flex: 1.5;
        text-align: right;
      }
      .flex-img-item:nth-of-type(3) {
        flex: 3.5;
        text-align: right;
      }
      .flex-img-item:nth-of-type(4) {
        flex: 4.5;
        text-align: right;
      }
      .flex-img-item:nth-of-type(5) {
        flex: 3.5;
        text-align: right;
      }
    }
    .count-line {
      display: flex;
      margin-bottom: 20px;
      .line-item {
        flex: 1;
        height: 24px;
        background-color: #F5BE7B;
        margin-right: 2px;
      }
      .line-item:nth-of-type(1){
        border-radius: 12px 0 0 12px;
      }
      .line-item:nth-last-of-type(1) {
        border-radius: 0 12px 12px 0;
      }
      .active {
        background-image: linear-gradient(179deg, #FF961F 0%, #FF320F 100%);
      }
    }
    .flex-day {
      display: flex;
      justify-content: space-between;
      padding: 0 16px;
      div {
        width: 140px;
        text-align: center;
        line-height: 36px;
        font-family: PingFangSC-Regular;
        font-size: 26px;
        color: #E55500;
      }
      div:nth-of-type(1) {
        // flex: 1;
        width: 110px;
        text-align: left;
      }
      div:nth-of-type(2) {
        flex: 1.5;
      }
      div:nth-of-type(3) {
        flex: 3.5;
        text-align: right;
      }
      div:nth-of-type(4) {
        flex: 4.5;
        text-align: right;
      }
      div:nth-of-type(5) {
        flex: 3.5;
        text-align: right;
      }
    }
    .turntable-content {
      width: 700px;
      height: 960px;
      background-image: url('./img/turntable-bg.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin: 0 auto;
      position: relative;
      .turntable-btn {
        width: 296px;
        height: 118px;
        line-height: 100px;
        text-align: center;
        background-image: url('./img/active-btn-bg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        font-family: PingFangSC-SNaNpxibold;
        font-weight: 600;
        font-size: 40px;
        color: #DC0000;
        position: absolute;
        bottom: 164px;
        left: 50%;
        margin-left: -148px;
        cursor: pointer;
      }
      .turntable {
        position: relative;
        top: 74px;
        margin: 0 auto;
        background: #fff;
        height: 538px;
        width: 538px;
        border-radius: 50%;
        text-align: center;
        overflow: hidden;
        .cell {
          position: absolute;
          width: 120px;
          text-align: center;
          height: 50px;
          top: 0;
          left: 50%;
          margin: 0 0 0 -60px;
          transform-origin: 60px 269px;
          font-size: 20px;
          padding-top: 22px;
          box-sizing: border-box;
          color: #E55500;
        }
        .cell-img {
          width: 80px;
          margin-top: 10px;
        }
        .clock-active {
          opacity: .3;
        }
        .clock-img {
          width: 80px;
          position: absolute;
          top: 80px;
          left: 50%;
          margin-left: -40px;
        }
        .sector {
          width: 538px;
          height: 538px;
          position: absolute;
          clip: rect(0 538px 538px 269px);
          overflow: hidden;
        }
        .inner {
          width: 100%;
          height: 100%;
          position: absolute;
          clip: rect(0 269px 538px 0);
          transform: rotate(60deg);
          border-radius: 50%;
          background-color: #FFE3B8;
          border: 20px solid #FE221A;
        }
        .sector-item:nth-of-type(2n) .inner{
          background-color: #FFF5E2;
          border: 20px solid #F7BB86;
        }
      }
      .point-img {
        position: absolute;
        width: 120px;
        top: 250px;
        left: 50%;
        margin-left: -56px;
      }
    }
    .lucky-list {
      width: calc(100% - 64px);
      background: #FFDEAC;
      border: 2px solid #FFAE32;
      border-radius: 28px;
      padding: 22px;
      box-sizing: border-box;
      position: absolute;
      top: 920px;
      left: 32px;
      z-index: 99;
    }
    .mar-b0 {
      margin-bottom: 0;
    }
  }
  .mar-b48 {
    margin-bottom: 48px;
  }
  .pad-lf18 {
    padding: 64px 18px 48px;
  }
  .pad-b120 {
    padding: 24px 0 134px;
  }
  .pad-b48{
    padding: 24px 0 28px;
  }
  .share-bottom-btn {
    width: calc(100% - 24px);
    margin-left: 12px;
    height: 120px;
    line-height: 100px;
    text-align: center;
    font-family: PingFangSC-SNaNpxibold;
    font-weight: 600;
    font-size: 40px;
    color: #DC0000;
    background-image: url('./img/share-btn-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
  }

  .sign-btn {
    position: fixed;
    bottom: 200px;
    right: 24px;
    width: 160px;
  }
}



.phone-mask {
  .item{
    width: calc(100% - 32px);
    padding: 20px 32px 32px 16px;
    background: #FFFFFF;
    display: flex;
    justify-content: space-between;
    font-size: 30px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666;
    line-height: 48px;
    box-sizing: border-box;
    margin: 0 0 0 16px;
    .label {
      width: 150px;
    }
    .color-999{
      color: #999;
    }
    .value{
      color: #333;
      .u-icon{
        margin-left: 16px;
      }
    }
    .tips{
      display: inline-block;
      width: 16px;
      font-size: 32px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #FF4466;
      line-height: 44px;
      margin-right: 4px;
    }
  }
}
</style>