bugfix：修复已知bug

pages/claimCloudPhone/chooseCloudPhone.vue

@@ -1,6 +1,14 @@
 <template>
   <layout @goBack="leaveFun" :isNavBar="isNavBar" :bgHeight="350">
     <div class="choose-cloud-phone">
+      <div
+        class="choose-cloud-phone_title"
+        v-if="
+          ($userAgent.isSzx || $userAgent.isSzxBrowser) && $userAgent.isAndroid
+        "
+      >
+        0元购机，尽情享受
+      </div>
       <div class="choose-cloud-phone_info">
         <div class="choose-cloud-phone_info-name">
           亲爱的{{ info.phoneNumber || '用户' }}
@@ -95,9 +103,11 @@ export default {
       this.$toast('活动已到期');
       return;
     }
-    setTimeout(() => {
-      this.dialogVisible = true;
-    })
+    if (!+sessionStorage.getItem('dialogVisible')) {
+      setTimeout(() => {
+        this.dialogVisible = true;
+      });
+    }
     this.isNavBar = !+localStorage.getItem('auth.inviteeNum');
     _self = this;
     // 用来监听微信返回上一页的
@@ -164,6 +174,7 @@ export default {
     beforeClose(action, done) {
       this.$refs.dialogImg.className += ' dialog-img-animation';
       this.$refs.dialogImg.addEventListener('animationend', () => {
+        sessionStorage.setItem('dialogVisible', 1);
         done ? done() : (this.dialogVisible = false);
       });
     },
@@ -174,6 +185,16 @@ export default {
 <style lang="scss" scoped>
 .choose-cloud-phone {
   height: 100%;
+  .choose-cloud-phone_title {
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 500;
+    font-size: 17px;
+    color: #ffffff;
+    line-height: 24px;
+    text-align: center;
+    font-style: normal;
+    margin-bottom: 18px;
+  }
   .choose-cloud-phone_info {
     .choose-cloud-phone_info-name {
       display: inline-block;

pages/claimCloudPhone/components/bargainingAssistance.vue

@@ -8,13 +8,28 @@
     <!-- 被邀请人提示 -->
     <div v-else class="invitee-tips">
       <div class="invitee-tips-text">
-        亲，我在用双子星云手机，可以<span>24小时运行游戏/聊天/看视频</span>，双子星云手机已经帮我节省<span>10086小时</span>，我得任务全做完了，游戏升级哇哇快，现在官方活动领云机，麻烦帮我助力！
+        <div>亲，我在用<span>双子星云手机</span>，它可以帮我：</div>
+        <div>
+          <div style="animation-delay: 0.5s">
+            <van-icon name="success" /> <span>24小时</span>运行游戏 / 聊天 /
+            看视频
+          </div>
+          <div style="animation-delay: 1s">
+            <van-icon name="success" /> 双子星云手机已经帮我节省<span>
+              10086 </span
+            >小时
+          </div>
+          <div style="animation-delay: 1.5s">
+            <van-icon name="success" />
+            我得任务全做完了，游戏升级哇哇快，现在官方活动领云机，麻烦帮我助力！
+          </div>
+        </div>
       </div>
     </div>
     <!-- 砍价进度 -->
-    <div class="bargaining-assistance-main">
+    <div class="bargaining-assistance-main" :class="{'bargaining-assistance-main-animation': !+type}">
       <!-- 被邀请人助力、邀请人砍价 -->
-      <template v-if="!assistanceBool">
+      <template>
         <div class="package-name">
           <span> {{ info.phoneType }}{{ info.validityPeriod }}天</span>
         </div>
@@ -41,14 +56,13 @@
           免单失效时间：<van-count-down :time="time" />
         </div>
       </template>
-      <!-- 被邀请人点击助力之后领取手机的页面 -->
-      <template v-else>
+      <van-dialog v-model="assistanceVisible" :showConfirmButton="false">
         <div class="invitee-to-claim">
           <div class="invitee-to-claim_btn" @click="loginVisible = true">
             免费领取
           </div>
         </div>
-      </template>
+      </van-dialog>
     </div>
     <!-- 邀请人显示 -->
     <template v-if="+type">
@@ -125,14 +139,7 @@
       <div class="barrage"></div>
     </template>
 
-    <div
-      class="rule"
-      @click="ruleVisible = true"
-      v-if="+type"
-      :style="ruleStyle"
-    >
-      规则
-    </div>
+    <div class="rule" @click="ruleVisible = true" v-if="+type">规则</div>
     <!-- 规则弹窗 -->
     <van-dialog v-model="ruleVisible" :showConfirmButton="false">
       <div class="rule-title">活动规则</div>
@@ -346,7 +353,7 @@ export default {
       info: {}, // 砍价相关信息
       bargainingAmount: '', // 砍价金额
       systemTime: '', // 系统时间
-      assistanceBool: false, // 是否触发助力
+      assistanceVisible: false, // 是否触发助力
       laoginData: {
         // 被邀请人登录信息
         phone: '',
@@ -364,7 +371,6 @@ export default {
   },
   mounted() {
     if (sessionStorage.getItem('isAgreementBool')) {
-      this.assistanceBool = true;
       this.loginVisible = true;
       this.laoginData.phone = sessionStorage.getItem('invitedPhone');
       this.laoginData.code = sessionStorage.getItem('invitedCode');
@@ -404,19 +410,6 @@ export default {
       }
       return name;
     },
-    ruleStyle() {
-      let obj = {};
-      const isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser;
-      const isAndroid = this.$userAgent.isAndroid;
-      const isWx = this.$userAgent.isWx;
-
-      if ((isApp && isAndroid) || isWx) {
-        obj.top = '10%';
-      } else {
-        obj.top = '18%';
-      }
-      return obj;
-    },
   },
   methods: {
     // 轮播活动参加的人的信息
@@ -686,11 +679,14 @@ export default {
           setTimeout(() => {
             this.$toast.clear();
           }, 500);
+        })
+        .finally(() => {
+          this.$toast.clear();
         });
     },
     btnFun() {
       if (+this.type === 7) return;
-      if (!+this.type) this.assistanceBool = true;
+      if (!+this.type) this.assistanceVisible = true;
       if (+this.type) {
         switch (this.info.bargainingStatus) {
           case 1:
@@ -894,7 +890,16 @@ export default {
 
 <style lang="less" scoped>
 .bargaining-assistance {
+  @keyframes invitee-tips-text {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
   height: 100%;
+  position: relative;
   /deep/ .van-overlay {
     z-index: 0 !important;
   }
@@ -935,16 +940,49 @@ export default {
     }
 
     .invitee-tips-text {
-      font-weight: 400;
-      font-size: 14px;
+      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+      font-weight: 500;
+      font-size: 18px;
       color: #ffffff;
       line-height: 22px;
-      text-align: left;
       font-style: normal;
+      & > div:first-of-type {
+        opacity: 0;
+        animation: invitee-tips-text 0.5s linear forwards;
+      }
+      & > div:last-of-type {
+        font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+        font-weight: 400;
+        font-size: 14px;
+        color: #fff;
+        line-height: 22px;
+        text-align: left;
+        font-style: normal;
+        margin-top: 15px;
+        margin-bottom: 14px;
+        & > div {
+          opacity: 0;
+          animation: invitee-tips-text 0.5s linear forwards;
+          margin-bottom: 14px;
+          .van-icon-success {
+            margin-right: 13px;
+          }
+        }
+      }
       span {
-        color: #fceba9;
+        color: #ffe7a1;
       }
-      margin-bottom: 24px;
+
+      // font-weight: 400;
+      // font-size: 14px;
+      // color: #ffffff;
+      // line-height: 22px;
+      // text-align: left;
+      // font-style: normal;
+      // span {
+      //   color: #fceba9;
+      // }
+      // margin-bottom: 24px;
     }
   }
   .bargaining-assistance-main {
@@ -952,6 +990,11 @@ export default {
     border-radius: 20px;
     margin-bottom: 24px;
     overflow: hidden;
+    &.bargaining-assistance-main-animation{
+      opacity: 0;
+      animation: invitee-tips-text 0.5s linear forwards;
+      animation-delay: 2s;
+    }
     .package-name {
       display: flex;
       justify-content: center;
@@ -1049,7 +1092,8 @@ export default {
       }
     }
     .invitee-to-claim {
-      height: 339px;
+      width: 330px;
+      height: 406px;
       border-radius: 20px;
       background: url('~/assets/image/claimCloudPhone/Invitee-to-claim.png')
         no-repeat 0 0;
@@ -1265,9 +1309,10 @@ export default {
   }
 
   .rule {
-    position: fixed;
+    position: absolute;
     z-index: 0;
-    right: 0;
+    right: -16px;
+    top: 5.5%;
     width: 40px;
     height: 20px;
     line-height: 20px;
@@ -1372,18 +1417,18 @@ export default {
       width: 200px;
       transform: translateX(-50%);
       font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
-      font-weight: bold;
-      font-size: 16px;
       color: #171815;
       line-height: 24px;
       text-align: center;
       font-style: normal;
+      font-weight: bold;
+      font-size: 16px;
       & > div span {
         color: #f04646;
       }
 
       .exit-content-progress {
-        margin: 50px 0 80px;
+        margin: 50px 10px 80px;
       }
 
       .exit-content-btn {

pages/claimCloudPhone/firstReward.vue

@@ -1,15 +1,27 @@
 <template>
-  <layout bgImgName="" bgColor="" bgHeight="">
+  <layout bgImgName="first-reward-img" bgColor="#f64d5d" bgHeight="188">
     <div class="first-reward">
-      <img :src="`${IMG_URL}/assistFirstReward.png`" alt="" />
-      <div class="btn-box">
+      <img src="@/assets/image/claimCloudPhone/first-reward-1.png" alt="" />
+      <img
+        src="@/assets/image/claimCloudPhone/first-reward-2.png"
+        alt=""
+        style="animation-delay: 1s"
+      />
+      <img
+        src="@/assets/image/claimCloudPhone/first-reward-3.png"
+        alt=""
+        style="animation-delay: 1.5s"
+      />
+      <!-- <img :src="`${IMG_URL}/assistFirstReward.png`" alt="" /> -->
+      <div class="btn-box" style="animation-delay: 2s">
+        <div>以上权益已开通至您的账户</div>
         <img
           src="@/assets/image/claimCloudPhone/first-reward-container-privilege.png"
           alt=""
           class="btn"
           @click="$router.push('/claimCloudPhone/secondReward')"
         />
-      </div> 
+      </div>
     </div>
   </layout>
 </template>
@@ -24,8 +36,8 @@ export default {
   },
   data() {
     return {
-      IMG_URL: process.env.IMG_URL
-    }
+      IMG_URL: process.env.IMG_URL,
+    };
   },
   components: { layout },
 };
@@ -38,11 +50,10 @@ export default {
   padding-top: 188px;
   position: relative;
   & > img {
-    position: absolute;
-    top: -16px;
-    left: -16px;
-    height: calc(100% + 32px);
-    width: calc(100% + 32px);
+    height: 80px;
+    width: 100%;
+    animation: first-reward 0.5s forwards linear;
+    opacity: 0;
   }
 
   .first-reward-container_privilege-tips {
@@ -56,15 +67,34 @@ export default {
     font-style: normal;
   }
   .btn-box {
+    opacity: 0;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     bottom: 20px;
     display: flex;
+    flex-direction: column;
     justify-content: center;
+    animation: first-reward 0.5s forwards linear;
+    & > div {
+      text-align: center;
+      font-size: 12px;
+      color: #fff;
+      margin-bottom: 20px;
+    }
     .btn {
       height: 56px;
     }
   }
+
+  @keyframes first-reward {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
 }
 </style>