幸运抽奖

src/project/activeAnalysis/AppLuckyDraw/AppLuckyDraw.vue

@@ -1,20 +1,17 @@
 <template>
   <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 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">新年伊始，企业微信团队为创建安全和谐的网络办公环境，诚邀大家使用企业微信参与打卡活动！活动详情如下：</p>
+      <p class=" text-line mar-b0">新年伊始，企业微信团队为创建安全和谐的网络办公环境,诚邀大家使用企业微信参与打卡活动！活动详情如下：</p>
     </div>
-
     <div class="box-content pad-lf18">
       <div class="title">
         <img src="./img/title-bg.png" alt="">
@@ -32,7 +29,7 @@
           <div>抽奖<br/>次数</div>
         </div>
         <div class="flex-img-item">
-          <div>解锁<br/>奖励</div>
+          <div>抽奖<br/>次数</div>
         </div>
       </div>
       <div class="count-line">
@@ -45,8 +42,7 @@
         <div>20天</div>
       </div>
     </div>
-
-    <div class="box-content">
+    <div class="box-content" :class="awardedList.length ? 'pad-b120' : 'pad-b48'">
       <div class="title">
         <img src="./img/title-bg.png" alt="">
         <p>大转盘</p>
@@ -58,63 +54,73 @@
               <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">
-              {{ item.name }}
+              <p>{{ item.name }}</p>
               <img :src="item.picture" alt="" class="cell-img" />
             </div>
           </view>
         </view>
         <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 class="turntable-btn" @click="raffle">立即抽奖</div>
       </div>
-      <div class="lucky-list">
+      <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>
-      <p class="text-line">活动时间：2023年2月7日~2023年3月8日 </p>
-      <p class="text-line">兑换时间：预计3月9日起</p>
+      <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>
-      <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 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="share-bottom-btn">活动报名</div>
+    <div class="box-content mar-b48">
+      <div class="title">
+        <img src="./img/title-bg.png" alt="">
+        <p>助攻小插件</p>
+      </div>
+      <img src="./img/qrcode-img.png" 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">
@@ -127,9 +133,13 @@
   </div>
 </template>
 <script>
+import {mapState, mapActions} from 'vuex'
 export default {
   name: "AppLuckyDraw",
   appName: "幸运抽奖",
+  computed: {
+    ...mapState(['user']),
+  },
   data() {
     return {
       deg: 0, // 初始化角度
@@ -142,9 +152,10 @@ export default {
       activityId: '',
       friendId: '',
       activeInfo: {},
-      luckyList:  ['1用户获得限量版公仔一个', '2用户获得限量版公仔一个', '3用户获得限量版公仔一个'],
-      luckyList2:  ['4用户获得限量版公仔一个', '5用户获得限量版公仔一个', '6用户获得限量版公仔一个'],
-      luckyList3:  ['7用户获得限量版公仔一个', '8用户获得限量版公仔一个', '9用户获得限量版公仔一个'],
+      awardedList: [],
+      luckyList: [],
+      luckyList2: [],
+      luckyList3: [],
     };
   },
   onLoad(option) {
@@ -152,8 +163,10 @@ export default {
     // this.friendId = option.friendId || ''
     this.activityId = '75a4c4493de54f9fb63868817079c89c'
     this.getDetail()
+    this.getAwardedList()
   },
   onShow() {
+    wx.hideOptionMenu();
     //创建对象，并将对象存放在data中以挂载在需要进行动画的元素之上
     var animation = uni.createAnimation({
       duration: this.duration,
@@ -162,6 +175,7 @@ export default {
     this.animation = animation; //挂载在vue实例上以便渲染
   },
   methods: {
+    ...mapActions(['injectJWeixin', 'wxInvoke', 'agentSign']),
     //封装动画旋转整数圈的方法，只需接受（角度，时间）即可开始旋转动画
     rotate(deg, duration) {
       if (this.isStart) return; //防止用户多次点击动画
@@ -188,8 +202,6 @@ export default {
       //提前将要转的角度算好，再传入要转的时长即可转到自己想要的角度
       this.rotate( 360 + (360 - (this.awardNumber - 1) * (360 / this.reword.length)),this.duration);
     },
-
-
     bindPhoneConfirm() {
       this.$refs.uModal.clearLoading()
       if(!this.phone) {
@@ -215,7 +227,6 @@ 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)
         }
       })
     },
@@ -233,6 +244,9 @@ export default {
     },
     //活动报名
     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('活动报名成功！')
@@ -240,14 +254,40 @@ export default {
         }
       })
     },
+    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(() => {
+        this.injectJWeixin(['shareAppMessage', 'shareWechatMessage']).then(() => {
+          this.wxInvoke(['shareAppMessage', {
+            // title: this.params.title,
+            // desc: this.params.tableExplain,
+            link: `/pages/AppLuckyDraw/AppLuckyDraw?activityId=${this.activityId}&friendId=${this.user.id}`,
+            // imgUrl: this.params.headPicture
+          }])
+        })
+      })
+    },
   },
-  onShareAppMessage() {
-    return {
-      // title: this.info.title,
-      // imageUrl: this.info.coverFile.url,
-      path: `/pages/AppLuckyDraw/AppLuckyDraw?id=${''}&areaId=${''}`
-    }
-  }
 };
 </script>
 
@@ -335,25 +375,34 @@ export default {
     .text-line {
       width: 100%;
       font-family: PingFangSC-Regular;
+      font-weight: 400;
       font-size: 28px;
       color: #E55500;
-      line-height: 44px;
-    }
-    .text-content {
-      text-indent: 2em;
+      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: 32px;
+      font-size: 34px;
       color: #DC0000;
-      line-height: 44px;
-      margin: 30px 0 14px 0;
+      margin-bottom: 16px;
     }
     .qrcode-img {
-      width: 174px;
-      height: 174px;
-      margin-top: 30px;
+      display: inherit;
+      width: 240px;
+      height: 240px;
+      margin: 0 auto 32px;
     }
     .count-text {
       line-height: 40px;
@@ -452,36 +501,37 @@ export default {
       }
     }
     .turntable-content {
-      width: 640px;
-      height: 888px;
+      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: 268px;
-        height: 84px;
-        line-height: 84px;
+        width: 296px;
+        height: 118px;
+        line-height: 100px;
         text-align: center;
-        margin-left: 28px;
-        color: #F30000;
-        background-color: #FFCF75;
-        border-radius: 42px;
-        font-size: 34px;
+        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: 176px;
+        bottom: 164px;
         left: 50%;
-        margin-left: -134px;
+        margin-left: -148px;
       }
       .turntable {
         position: relative;
-        top: 68px;
+        top: 74px;
         margin: 0 auto;
         background: #fff;
-        height: 500px;
-        width: 500px;
+        height: 538px;
+        width: 538px;
         border-radius: 50%;
         text-align: center;
         overflow: hidden;
@@ -493,28 +543,29 @@ export default {
           top: 0;
           left: 50%;
           margin: 0 0 0 -60px;
-          transform-origin: 60px 250px;
+          transform-origin: 60px 269px;
           font-size: 20px;
           padding-top: 40px;
           box-sizing: border-box;
+          color: #E55500;
         }
         .cell-img {
-          width: 50px;
-          height: 50px;
-          margin-top: 32px;
+          width: 80px;
+          // height: 80px;
+          margin-top: 10px;
         }
         .sector {
-          width: 500px;
-          height: 500px;
+          width: 538px;
+          height: 538px;
           position: absolute;
-          clip: rect(0 500px 500px 250px);
+          clip: rect(0 538px 538px 269px);
           overflow: hidden;
         }
         .inner {
           width: 100%;
           height: 100%;
           position: absolute;
-          clip: rect(0 250px 500px 0);
+          clip: rect(0 269px 538px 0);
           transform: rotate(60deg);
           border-radius: 50%;
           background-color: #FFE3B8;
@@ -527,36 +578,60 @@ export default {
       }
       .point-img {
         position: absolute;
-        width: 112px;
-        height: 160px;
-        top: 228px;
+        width: 120px;
+        top: 250px;
         left: 50%;
         margin-left: -56px;
       }
     }
     .lucky-list {
-      width: 100%;
+      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% - 56px);
-    height: 84px;
-    line-height: 84px;
+    width: calc(100% - 24px);
+    margin-left: 12px;
+    height: 120px;
+    line-height: 100px;
     text-align: center;
-    margin-left: 28px;
-    color: #F30000;
-    background-color: #FFCF75;
-    border-radius: 42px;
-    font-size: 34px;
+    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;
+  }
+
+  .sign-btn {
+    position: fixed;
+    bottom: 200px;
+    right: 24px;
+    width: 160px;
   }
 }