幸运抽奖

src/project/activeAnalysis/AppLuckyDraw/AppLuckyDraw.vue

@@ -1,41 +1,122 @@
 <template>
-  <div class="box">
+  <div class="AppLuckyDraw">
+    <!-- <div @click="showPhoneMask=true">绑定手机号</div> -->
+
+    <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">分享活动</div>
+    </div>
+    <div class="box-content">
+      <div class="title">
+        <img src="./img/title-bg.png" alt="">
+        <p>打卡活动</p>
+      </div>
+      <p class=" text-line">新年伊始，企业微信团队为创建安全和谐的网络办公环境，诚邀大家使用企业微信参与打卡活动！活动详情如下：</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>
+      <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>20天</div>
+      </div>
+    </div>
+
+    <div class="box-content">
+      <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 reword" :key="index">
-        <view
-          class="sector"
-          :style="
-            'transform: rotate(' +
-            (index * (360 / reword.length) - 0.5 * (360 / reword.length)) +
-            'deg)'
-          "
-        >
-          <view
-            class="inner"
-            :style="
-              'transform: rotate(' +
-              360 / reword.length +
-              'deg);background-color:' +
-              item.color
-            "
-          >
+          <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>
-        </view>
-        <div
-          :style="
-            'transform: rotate(' + index * (360 / reword.length) + 'deg) ;'
-          "
-          class="cell"
-        >
-          {{ item.content }}
-          <img :src="item.img" alt="" class="cell-img" />
+            <div :style=" 'transform: rotate(' + index * (360 / activeInfo.prizes.length) + 'deg) ;' " class="cell">
+              {{ item.name }}
+              <img :src="item.picture" alt="" class="cell-img" />
             </div>
           </view>
         </view>
-    <view class="line"></view>
-    <div @click="onStart">点击旋转</div>
-    <div @click="showPhoneMask=true">绑定手机号</div>
-    <u-modal v-model="showPhoneMask" :show-cancel-button="true" :mask-click-able="false" @confirm="bindPhoneConfirm" @cancel="cancel" class="phone-mask">
+        <img src="./img/pointer.png" alt="" class="point-img">
+        <div class="turntable-btn" v-if="!activeInfo.signupTime" @click="signUp">活动报名</div>
+        <div class="turntable-btn" v-else @click="raffle">立即抽奖</div>
+      </div>
+      <div class="lucky-list">
+        <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>
+      <p class="text-line">活动时间：2023年2月7日~2023年3月8日 </p>
+      <p class="text-line">兑换时间：预计3月9日起</p>
+    </div>
+
+    <div class="box-content">
+      <div class="title">
+        <img src="./img/title-bg.png" alt="">
+        <p>活动规则</p>
+      </div>
+      <div class="title-text">报名方式</div>
+      <p class="text-line">打开企业微信，点击工作台，找到村微的应用，打开活动列表，点击参与。</p>
+
+      <div class="title-text">打卡方式</div>
+      <p class="text-line">①企微内至少3个同事发消息或在至少1个群聊中发言，保持日常工作沟通习惯即可。</p>
+      <p class="text-line">②使用企微工作台中任意应用，有操作上的疑问请联系技术支持。</p>
+      <p class="text-line">③使用企微工作台点击进入宣传栏任意海报，停留进行浏览至少5分钟。</p>
+      <p class="text-line">④使用工作台会议进行内部办公沟通。</p>
+
+      <div class="title-text">抽奖规则</div>
+      <p class="text-line">第一批2月8日，抽奖条件第一次报名即可参与抽奖，将活动分享三位给同事即可额外获得一次抽奖机会。</p>
+      <p class="text-line">第二批2月15日，抽奖条件要求2月7日至2月14日打卡成功5天或以上。
+      <p class="text-line">第三批2月23日，抽奖条件要求2月7日至2月22日打卡成功10天或以上。
+      <p class="text-line">第四批终极大奖3月9日，抽奖条件要求2月7日至3月8日打卡成功20天或以上。</p>
+
+      <div class="title-text">奖品内容</div>
+      <p class="text-line">企业微信笔记本礼盒，腾讯Q宠公仔，腾讯Q宠手办，终极大奖（华为P50手机，华为meatpad平板电脑，华为watch GT3智能手表）。</p>
+
+      <div class="title-text">联系方式</div>
+      <p class="text-line">①联系企业微信“锡林郭勒盟党政云平台”内“技术支持”分组的工作人员；</p>
+      <p class="text-line">②企业微信扫下方二维码联系技术支持人员。</p>
+      <img src="./img/qrcode-img.png" alt="" class="qrcode-img">
+
+      <div class="title-text">领取地点</div>
+      <p class="text-line">2023年2月20日起根据各旗县网信办通知地点领取，一切解释权属企业微信团队，有任何疑问请联系“锡林郭勒盟党政云平台”内“技术支持”分组的工作人员。</p>
+    </div>
+    <div class="share-bottom-btn">活动报名</div>
+    
+    <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">
@@ -52,56 +133,25 @@ export default {
   data() {
     return {
       deg: 0, // 初始化角度
-      duration: 1000, //动画时长
+      duration: 2000, //动画时长
       awardNumber: 2, // 中奖区域 从1开始
       isStart: false, //防止多次触发动画
       animationData: {}, //动画对象
-      reword: [
-        {
-          content: "111",
-          color: "#456484",
-          img: "https://cdn.cunwuyun.cn/img/circle-check.png",
-        },
-        {
-          content: "222",
-          color: "#456544",
-          img: "https://cdn.cunwuyun.cn/img/circle-check.png",
-        },
-        {
-          content: "333",
-          color: "#784654",
-          img: "https://cdn.cunwuyun.cn/img/circle-check.png",
-        },
-        {
-          content: "444",
-          color: "#527484",
-          img: "https://cdn.cunwuyun.cn/img/circle-check.png",
-        },
-        {
-          content: "555",
-          color: "#527484",
-          img: "https://cdn.cunwuyun.cn/img/circle-check.png",
-        },
-        {
-          content: "666",
-          color: "#527484",
-          img: "https://cdn.cunwuyun.cn/img/circle-check.png",
-        },
-      ], //设置的奖项
-
-
-
       showPhoneMask: false,
       phone: '',
       activityId: '',
       friendId: '',
-      activeInfo: {}
+      activeInfo: {},
+      luckyList:  ['1用户获得限量版公仔一个', '2用户获得限量版公仔一个', '3用户获得限量版公仔一个'],
+      luckyList2:  ['4用户获得限量版公仔一个', '5用户获得限量版公仔一个', '6用户获得限量版公仔一个'],
+      luckyList3:  ['7用户获得限量版公仔一个', '8用户获得限量版公仔一个', '9用户获得限量版公仔一个'],
     };
   },
   onLoad(option) {
     // this.activityId = option.activityId
     // this.friendId = option.friendId || ''
-    // this.getDetail()
+    this.activityId = '75a4c4493de54f9fb63868817079c89c'
+    this.getDetail()
   },
   onShow() {
     //创建对象，并将对象存放在data中以挂载在需要进行动画的元素之上
@@ -141,6 +191,7 @@ export default {
 
 
     bindPhoneConfirm() {
+      this.$refs.uModal.clearLoading()
       if(!this.phone) {
         return this.$u.toast('请输入手机号')
       }
@@ -149,9 +200,9 @@ export default {
         return this.$u.toast('请输入正确的手机号')
       }
 
-      this.$http.post(`/appactivityinfo/bindPhone?phone=${this.phone}`).then((res) => {
+      this.$http.post(`/app/appmarketingactivityinfo/bindPhone?phone=${this.phone}`).then((res) => {
         if (res.code == 0) {
-          // this.getUserInfo()
+          this.getDetail()
           this.$u.toast('绑定成功')
         }
       })
@@ -164,18 +215,31 @@ export default {
       this.$http.post(`/app/appmarketingactivityinfo/queryDetailByIdWXCP?activityId=${this.activityId}&friendId=${this.friendId}`).then((res) => {
         if (res.code == 0) {
           this.activeInfo = {...res.data}
+          // arr = arr.slice(0,4)
         }
       })
     },
     //抽奖
     raffle() {
-      this.$http.post(`/app/appmarketingactivityinfo/raffle?activityId=${this.activityId}}`).then((res) => {
+      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.awardNumber
+          this.awardNumber = res.data
           this.onStart()
         }
       })
     },
+    //活动报名
+    signUp() {
+      this.$http.post(`/app/appmarketingactivityinfo/signup?activityId=${this.activityId}`).then((res) => {
+        if (res.code == 0) {
+          this.$u.toast('活动报名成功！')
+          this.getDetail()
+        }
+      })
+    },
   },
   onShareAppMessage() {
     return {
@@ -188,62 +252,316 @@ export default {
 </script>
 
 <style lang='scss'>
-.box {
-  position: relative;
+.AppLuckyDraw {
+  // position: relative;
+  width: 100%;
+  background-color: #F30000;
+  padding-bottom: 64px;
+  // overflow: hidden;
+  .header-bg {
     width: 100%;
-  height: 1000px;
-  //background-color: blue;
-  overflow: hidden;
-}
-.turntable {
     position: relative;
-  margin: 200px auto;
+    margin-bottom: 44px;
+    .header-bg-img {
+      max-width: 100%;
+    }
+    .share-bg-img {
+      width: 182px;
+      position: absolute;
+      top: 30px;
+      right: 0;
+    }
+    .share-btn {
+      width: 182px;
+      padding-left: 58px;
+      box-sizing: border-box;
+      height: 52px;
+      line-height: 52px;
+      font-family: PingFangSC-SNaNpxibold;
+      font-size: 28rpx;
+      color: #FFE6C3;
+      text-shadow: 0 2px 4px rgba(173,0,0,0.80);
+      position: absolute;
+      top: 30px;
+      right: 0;
+    }
+    .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: 250px;
+      height: 96px;
+      position: absolute;
+      top: -48px;
+      left: 50%;
+      margin-left: -125px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+      p {
+        width: 250px;
+        line-height: 74px;
+        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-size: 28px;
+      color: #E55500;
+      line-height: 44px;
+    }
+    .text-content {
+      text-indent: 2em;
+    }
+    .title-text {
+      font-family: PingFangSC-SNaNpxibold;
+      font-weight: 600;
+      font-size: 32px;
+      color: #DC0000;
+      line-height: 44px;
+      margin: 30px 0 14px 0;
+    }
+    .qrcode-img {
+      width: 174px;
+      height: 174px;
+      margin-top: 30px;
+    }
+    .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;
+      }
+    }
+    .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;
+      }
+      .flex-img-item:nth-of-type(2) {
+        flex: 2.5;
+        text-align: right;
+      }
+      .flex-img-item:nth-of-type(3) {
+        flex: 4;
+        text-align: right;
+      }
+      .flex-img-item:nth-of-type(4) {
+        flex: 7;
+        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;
+      }
+      div:nth-of-type(2) {
+        flex: 2.5;
+        text-align: right;
+      }
+      div:nth-of-type(3) {
+        flex: 4;
+        text-align: right;
+      }
+      div:nth-of-type(4) {
+        flex: 7;
+        text-align: right;
+      }
+    }
+    .turntable-content {
+      width: 640px;
+      height: 888px;
+      background-image: url('./img/turntable-bg.png');
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      margin: 0 auto;
+      position: relative;
+      .turntable-btn {
+        width: 268px;
+        height: 84px;
+        line-height: 84px;
+        text-align: center;
+        margin-left: 28px;
+        color: #F30000;
+        background-color: #FFCF75;
+        border-radius: 42px;
+        font-size: 34px;
+        font-weight: 600;
+        position: absolute;
+        bottom: 176px;
+        left: 50%;
+        margin-left: -134px;
+      }
+      .turntable {
+        position: relative;
+        top: 68px;
+        margin: 0 auto;
         background: #fff;
         height: 500px;
         width: 500px;
         border-radius: 50%;
         text-align: center;
         overflow: hidden;
-}
-.line {
-  position: fixed;
-  top: 35%;
-  left: 50%;
-  background-color: #000;
-  height: 80px;
-  width: 1px;
-}
-.cell {
+        .cell {
           position: absolute;
-  width: 50px;
+          width: 120px;
+          text-align: center;
           height: 50px;
           top: 0;
           left: 50%;
-  margin-left: -25px;
-  background-color: yellow;
-  transform-origin: 25px 250px;
-}
-.cell-img {
-  width: 80px;
-  height: 80px;
+          margin: 0 0 0 -60px;
+          transform-origin: 60px 250px;
+          font-size: 20px;
+          padding-top: 40px;
+          box-sizing: border-box;
+        }
+        .cell-img {
+          width: 50px;
+          height: 50px;
           margin-top: 32px;
-}
-.sector {
+        }
+        .sector {
           width: 500px;
           height: 500px;
           position: absolute;
           clip: rect(0 500px 500px 250px);
           overflow: hidden;
-}
-.inner {
+        }
+        .inner {
           width: 100%;
           height: 100%;
           position: absolute;
           clip: rect(0 250px 500px 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: 112px;
+        height: 160px;
+        top: 228px;
+        left: 50%;
+        margin-left: -56px;
+      }
+    }
+    .lucky-list {
+      width: 100%;
+      background: #FFDEAC;
+      border: 2px solid #FFAE32;
+      border-radius: 28px;
+      padding: 22px;
+      box-sizing: border-box;
+    }
+  }
+  .pad-lf18 {
+    padding: 64px 18px 48px;
+  }
+  .share-bottom-btn {
+    width: calc(100% - 56px);
+    height: 84px;
+    line-height: 84px;
+    text-align: center;
+    margin-left: 28px;
+    color: #F30000;
+    background-color: #FFCF75;
+    border-radius: 42px;
+    font-size: 34px;
+    font-weight: 600;
+  }
 }
 
+
+
 .phone-mask {
   .item{
     width: calc(100% - 32px);