bugfix：修复bug

components/lottie/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <lottie-animation :options="defaultOptions"  v-on:animCreated="handleAnimation" />
+  <lottie-animation :options="defaultOptions" />
 </template>
 
 <script>
@@ -10,19 +10,19 @@ export default {
   data() {
     return {
       defaultOptions: {},
-      key: +new Date()
     };
   },
   created() {
-    if (this.data.default) {
-      this.data.default.assets.forEach((item) => {
+    if (this.data?.default) {
+      this.data?.default.assets.forEach((item) => {
         item.u = '';
         if (item.w && item.h) {
+          if(item.p.includes('assets/lottie/images')) return 
           item.p = require(`@/assets/lottie/images/${item.p}`);
         }
       });
       this.defaultOptions = {
-        animationData: this.data.default,
+        animationData: this.data?.default,
         renderer: 'svg', //渲染方式，svg、canvas、html（轻量版仅svg渲染）
         loop: true, //是否循环播放，true表示循环，false表示不循环
         autoplay: true, //是否自动播放，true表示自动播放
@@ -33,9 +33,6 @@ export default {
     LottieAnimation,
   },
   methods: {
-    handleAnimation(anim) {
-      console.log(anim)
-    }
   }
 };
 </script>

pages/claimCloudPhone/chooseCloudPhone.vue

@@ -37,7 +37,7 @@
         <van-search
           v-model="keyWord"
           placeholder="请输入云机名称"
-          style="padding: 0; width: 170px"
+          class="search"
           @input="search"
         />
       </cloudMobilePhonePopup>
@@ -105,7 +105,7 @@ export default {
         this.leaveFun();
       });
     }
-    
+
     if (+sessionStorage.getItem('activityEmd')) {
       this.dialogVisible = false;
       this.$toast('活动已到期');
@@ -265,4 +265,9 @@ export default {
     }
   }
 }
+
+.search {
+  padding: 0;
+  width: 170px;
+}
 </style>

pages/claimCloudPhone/components/bargainingAssistance.vue

@@ -49,8 +49,7 @@
           </div>
         </div>
         <div
-          :class="['package-btn', { end: +type === 7 }]"
-          :style="!+type ? 'margin-bottom: 24px;' : ''"
+          :class="['package-btn', { end: +type === 7, 'mb-24': !+type }]"
           @click="btnFun"
         >
           {{ btnName }}
@@ -165,20 +164,13 @@
           <img
             src="@/assets/image/claimCloudPhone/red-packet-title.png"
             alt=""
-            style="
-              width: 90%;
-              height: 146px;
-              position: absolute;
-              top: 0;
-              left: 50%;
-              transform: translateX(-50%);
-            "
+            class="red-packet-title"
           />
-          <lottie class="glory" :data="glory" key="'glory'" />
+          <lottie class="glory" :data="glory" :key="'glory'" />
           <lottie
             :key="'red-packet'"
             class="red-packet"
-            :data="!bargainingTipsBool ? redPacket : {}"
+            :data="redPacket"
             @click.native="bargainingFun(true)"
           />
         </div>
@@ -188,7 +180,12 @@
           <div class="bargaining-amount-text">
             恭喜您，砍价成功<span>{{ bargainingAmount }}元</span>
           </div>
-          <lottie class="species" :data="species" :key="'species'" />
+          <lottie
+            class="species"
+            :data="species"
+            v-if="species"
+            :key="'species'"
+          />
         </div>
       </template>
     </van-dialog>
@@ -304,8 +301,7 @@
       <img
         src="@/assets/image/claimCloudPhone/end-visible-img.png"
         @click="endConfirm"
-        t=""
-        style="width: 289px; height: 264px; margin: 0 auto; display: block"
+        class="end-visible-img"
       />
       <!-- <div style="text-align: center; padding: 10px; color: #999">
         感谢您对我们应用的支持和参与。<br />
@@ -325,6 +321,9 @@
 </template>
 
 <script>
+import * as species from '@/assets/lottie/species/data.json';
+import * as redPacket from '@/assets/lottie/redPacket/data.json';
+import * as glory from '@/assets/lottie/glory/data.json';
 import { sha256 } from 'js-sha256';
 import customProgress from './customProgress.vue';
 import loadList from '@/components/loadList';
@@ -332,10 +331,6 @@ import { fileKeyToUrl } from '@/plugins/file-center.js';
 import Verify from '@/components/verifition/Verify';
 import { writeToClipboard } from '@/plugins/plugins.js';
 import lottie from '@/components/lottie';
-import * as species from '@/assets/lottie/species/data.json';
-import * as redPacket from '@/assets/lottie/redPacket/data.json';
-import * as glory from '@/assets/lottie/glory/data.json';
-
 export default {
   props: {
     operateActivityId: {
@@ -1658,4 +1653,24 @@ export default {
   height: 318px !important;
   transform: translate(-50%, -90%);
 }
+
+.red-packet-title {
+  width: 90%;
+  height: 146px;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.end-visible-img {
+  width: 289px;
+  height: 264px;
+  margin: 0 auto;
+  display: block;
+}
+
+.mb-24 {
+  margin-bottom: 24px !important;
+}
 </style>

pages/claimCloudPhone/components/layout.vue

@@ -111,7 +111,7 @@ export default {
   }
 
   .van-nav-bar {
-    z-index: 1000;
+    z-index: 0;
   }
 }
 </style>

pages/claimCloudPhone/confirmation.vue

@@ -16,7 +16,11 @@
     </div>
     <div class="confirmation-container">
       <div class="jump">
-        <img src="@/assets/image/claimCloudPhone/confirmation-btn.png" style="height: 46px;width: 100%;" @click="download">
+        <img
+          src="@/assets/image/claimCloudPhone/confirmation-btn.png"
+          class="jump-btn"
+          @click="download"
+        />
         <div @click="toH5">暂不下载，使用网页版</div>
       </div>
 
@@ -176,6 +180,10 @@ export default {
         text-align: center;
         font-style: normal;
       }
+      .jump-btn {
+        height: 46px;
+        width: 100%;
+      }
     }
     .confirmation-guide {
       background: #ffffff;

pages/claimCloudPhone/purchase.vue

@@ -99,27 +99,12 @@
         @cancel="confirm(false)"
         @confirm="confirm(true)"
         show-cancel-button
-        confirmButtonText="“已完成支付"
+        confirmButtonText="已完成支付"
         confirmButtonColor="#3367d1"
       >
+        <div class="payment-tips">如果您已支付成功</div>
         <div
-          style="
-            font-size: 18px;
-            font-weight: bold;
-            text-align: center;
-            padding-top: 10px;
-          "
-        >
-          如果您已支付成功
-        </div>
-        <div
-          style="
-            font-size: 18px;
-            font-weight: bold;
-            text-align: center;
-            padding-bottom: 10px;
-          "
-        >
+          class="payment-tips">
           请点击"已完成支付"按钮
         </div>
       </van-dialog>
@@ -539,6 +524,16 @@ export default {
   }
 }
 
+.payment-tips {
+  font-size: 18px;
+  font-weight: bold;
+  text-align: center;
+  padding-top: 10px;
+  &:last-of-type{
+    padding-bottom: 10px;
+  }
+}
+
 .disabled {
   opacity: 0.3;
 }

pages/claimCloudPhone/secondReward.vue

@@ -30,12 +30,7 @@
           }.png`)
         "
         alt=""
-        style="
-          height: 130px;
-          width: 95%;
-          display: block;
-          margin: 24px auto 20px;
-        "
+        class="install-apps-img"
       />
       <img
         :src="
@@ -85,7 +80,7 @@ export default {
       this.imgName = name;
     },
     toPurchase() {
-      if(!this.imgName) return 
+      if (!this.imgName) return;
       // 埋点
       this.$axios
         .$post('public/v5/User/selects/addApplication', {
@@ -151,5 +146,12 @@ export default {
     margin: 0 auto;
     height: 56px;
   }
+
+  .install-apps-img {
+    height: 130px;
+    width: 95%;
+    display: block;
+    margin: 24px auto 20px;
+  }
 }
 </style>

pages/claimCloudPhone/zeroYuanClaim.vue

@@ -23,7 +23,7 @@
       close-on-click-overlay
       @confirm="$router.go(-1)"
     >
-      <div style="text-align: center; padding: 10px; color: #999">
+      <div class="dialog-tips">
         很抱歉<br />
         您的套餐不支持此活动进行续费
       </div>
@@ -71,4 +71,10 @@ export default {
   
   }
 }
+
+.dialog-tips{
+  text-align: center; 
+  padding: 15px; 
+  color: #999
+}
 </style>