抽奖

src/project/activeAnalysis/AppLuckyDraw/AppLuckyDraw.vue

@@ -31,6 +31,9 @@
         <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>
@@ -39,6 +42,7 @@
         <div>1天</div>
         <div>5天</div>
         <div>10天</div>
+        <div>15天</div>
         <div>20天</div>
       </div>
     </div>
@@ -55,7 +59,9 @@
             </view>
             <div :style=" 'transform: rotate(' + index * (360 / activeInfo.prizes.length) + 'deg) ;' " class="cell">
               <p>{{ item.name }}</p>
-              <img :src="item.picture" alt="" class="cell-img" />
+              <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>
@@ -114,7 +120,7 @@
         <img src="./img/title-bg.png" alt="">
         <p>助攻小插件</p>
       </div>
-      <img src="./img/qrcode-img.png" alt="" class="qrcode-img">
+      <img :src="activeInfo.wxQrcode" alt="" class="qrcode-img">
       <div class="text-line mar-b0">
         <p class="text-center">关注微信插件，以免忘记打卡，仅用于接收提醒，<br/>不计入打卡。</p>
       </div>
@@ -143,7 +149,7 @@ export default {
   data() {
     return {
       deg: 0, // 初始化角度
-      duration: 2000, //动画时长
+      duration: 4000, //动画时长
       awardNumber: 2, // 中奖区域 从1开始
       isStart: false, //防止多次触发动画
       animationData: {}, //动画对象
@@ -192,6 +198,7 @@ export default {
         timingFunction: "linear",
       });
       this.$u.toast(`恭喜抽中${this.activeInfo.prizes[this.awardNumber].name}!`)
+      this.getDetail()
       this.animationData = this.animation.export();
     },
     //开始旋转
@@ -286,9 +293,7 @@ export default {
           this.wxInvoke(['shareAppMessage', {
             title: '幸运抽奖',
             desc: '新年伊始，企业微信团队为创建安全和谐的网络办公环境，诚邀大家使用企业微信参与打卡活动！',
-            // link: `/pages/AppLuckyDraw/AppLuckyDraw?activityId=${this.activityId}&friendId=${this.user.id}`,
+            link: `./AppLuckyDraw/AppLuckyDraw?activityId=${this.activityId}&friendId=${this.user.id}`,
-            link: 'https://www.baidu.com/',
-            imgUrl: 'https://cdn.cunwuyun.cn/xlgl/lock.png'
           }]).catch((err) => {
             console.log(123, err)
           })
@@ -448,18 +453,24 @@ export default {
         }
       }
       .flex-img-item:nth-of-type(1) {
-        flex: 1;
+        // flex: 1;
+        width: 110px;
+        text-align: left;
       }
       .flex-img-item:nth-of-type(2) {
-        flex: 2.5;
+        flex: 1.5;
         text-align: right;
       }
       .flex-img-item:nth-of-type(3) {
-        flex: 4;
+        flex: 3.5;
         text-align: right;
       }
       .flex-img-item:nth-of-type(4) {
-        flex: 7;
+        flex: 4.5;
+        text-align: right;
+      }
+      .flex-img-item:nth-of-type(5) {
+        flex: 3.5;
         text-align: right;
       }
     }
@@ -495,18 +506,23 @@ export default {
         color: #E55500;
       }
       div:nth-of-type(1) {
-        flex: 1;
+        // flex: 1;
+        width: 110px;
+        text-align: left;
       }
       div:nth-of-type(2) {
-        flex: 2.5;
+        flex: 1.5;
-        text-align: right;
       }
       div:nth-of-type(3) {
-        flex: 4;
+        flex: 3.5;
         text-align: right;
       }
       div:nth-of-type(4) {
-        flex: 7;
+        flex: 4.5;
+        text-align: right;
+      }
+      div:nth-of-type(5) {
+        flex: 3.5;
         text-align: right;
       }
     }
@@ -556,15 +572,24 @@ export default {
           margin: 0 0 0 -60px;
           transform-origin: 60px 269px;
           font-size: 20px;
-          padding-top: 40px;
+          padding-top: 22px;
           box-sizing: border-box;
           color: #E55500;
         }
         .cell-img {
           width: 80px;
-          // height: 80px;
           margin-top: 10px;
         }
+        .clock-active {
+          opacity: .3;
+        }
+        .clock-img {
+          width: 80px;
+          position: absolute;
+          top: 70px;
+          left: 50%;
+          margin-left: -40px;
+        }
         .sector {
           width: 538px;
           height: 538px;