抽奖

src/project/activeAnalysis/AppLuckyDraw/AppLuckyDraw.vue

@@ -2,7 +2,7 @@
   <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">
+      <!-- <img src="./img/share-btn.png" alt="" class="share-bg-img"> -->
       <div class="share-btn" @click="share">分享活动</div>
     </div>
     <div class="box-content">
@@ -10,7 +10,7 @@
         <img src="./img/title-bg.png" alt="">
         <p>打卡活动</p>
       </div>
-      <p class=" text-line mar-b0">新年伊始，企业微信团队为创建安全和谐的网络办公环境,诚邀大家使用企业微信参与打卡活动！活动详情如下：</p>
+      <p class=" text-line mar-b0">新年伊始，企业微信团队为创建安全和谐的网络办公环境，诚邀大家使用企业微信参与打卡活动！活动详情如下：</p>
     </div>
     <div class="box-content pad-lf18">
       <div class="title">
@@ -159,9 +159,9 @@ export default {
     };
   },
   onLoad(option) {
-    // this.activityId = option.activityId
-    // this.friendId = option.friendId || ''
-    this.activityId = '75a4c4493de54f9fb63868817079c89c'
+    this.activityId = option.activityId
+    this.friendId = option.friendId || ''
+    // this.activityId = '75a4c4493de54f9fb63868817079c89c'
     this.getDetail()
     this.getAwardedList()
   },
@@ -187,14 +187,11 @@ export default {
         }.bind(this),
         duration
       ); //此时用的普通函数，存在this指向问题，需要改变this指向
-      this.animation
-        .rotate(deg)
-        .step()
-        .rotate((this.awardNumber - 1) * -(360 / this.reword.length))
-        .step({
+      this.animation.rotate(deg).step().rotate((this.awardNumber - 1) * -(360 / this.reword.length)).step({
         duration: 0,
         timingFunction: "linear",
       });
+      this.$u.toast(`恭喜抽中${this.activeInfo.prizes[this.awardNumber].name}!`)
       this.animationData = this.animation.export();
     },
     //开始旋转
@@ -305,25 +302,23 @@ export default {
     .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;
+      width: 200px;
+      padding-left: 64px;
+      height: 56px;
+      line-height: 56px;
       font-family: PingFangSC-SNaNpxibold;
-      font-size: 28rpx;
+      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: 30px;
+      top: 32px;
       right: 0;
+      background-image: url('./img/share-btn.png');
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
     }
     .box-content {
       width: 706px;
@@ -348,19 +343,19 @@ export default {
     box-sizing: border-box;
     background: #FFE9C7;
     .title {
-      width: 250px;
-      height: 96px;
+      width: 240px;
+      height: 100px;
       position: absolute;
-      top: -48px;
+      top: -50px;
       left: 50%;
-      margin-left: -125px;
+      margin-left: -120px;
       img {
         width: 100%;
         height: 100%;
       }
       p {
-        width: 250px;
-        line-height: 74px;
+        width: 240px;
+        line-height: 80px;
         text-align: center;
         position: absolute;
         top: 0;