optimize：优化样式、layout组件

assets/style/main.scss

@@ -56,7 +56,7 @@ body {
 }
 
 .van-overlay {
-	background-color: rgba(0, 0, 0, .95) !important;
+	background-color: rgba(0, 0, 0, .9) !important;
 }
 
 [v-cloak] {

components/layout/index.vue

@@ -24,12 +24,12 @@ export default {
   mounted() {
     // 如果是安卓的需要判断一下是否显示h5内置的返回按钮
     // 如果是H5、微信小程序，不需要显示次按钮
-    // 如果是苹果就显示，不需要做任何处理
     this.isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser
     this.isAndroid = this.$userAgent.isAndroid;
     if(!this.isApp) return this.visible = false
     if(this.isApp && this.isAndroid) {
-        this.visible = !!window.native.goneBack
+      this.visible = !!window.native.goneBack 
+      this.visible && window.native.goneBack()
         return
     }
   },

pages/claimCloudPhone/chooseCloudPhone.vue

@@ -1,5 +1,5 @@
 <template>
-  <layout @goBack="leaveFun" :isNavBar="isNavBar" :bgHeight="350">
+  <layout @goBack="leaveFun" :isNavBar="isNavBar" :bgHeight="350" bgImgName="bg">
     <div class="choose-cloud-phone">
       <div
         class="choose-cloud-phone_title"

pages/claimCloudPhone/components/bargainingAssistance.vue

@@ -211,6 +211,7 @@
           </div>
         </div>
         <img src="@/assets/image/claimCloudPhone/inviter-exit.png" alt="" />
+        <lottie class="exit-glory" :data="glory" :key="'exit-glory'" />
       </div>
     </van-dialog>
 
@@ -1434,10 +1435,21 @@ export default {
     height: 520px;
     position: relative;
     & > img {
-      height: 100%;
-      width: 100%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      height: 321px;
+      width: 284px;
+      z-index: -1;
+    }
+    .exit-glory{
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(1.5);
+      z-index: -2
     }
-
     .exit-content {
       position: absolute;
       top: 25%;
@@ -1451,6 +1463,7 @@ export default {
       font-style: normal;
       font-weight: bold;
       font-size: 16px;
+      z-index: 0;
       & > div span {
         color: #f04646;
       }

pages/claimCloudPhone/firstReward.vue

@@ -1,5 +1,5 @@
 <template>
-  <layout bgImgName="first-reward-img" bgColor="#f64d5d" bgHeight="188">
+  <layout bgImgName="first-reward-img" bgColor="#f64d5d" bgHeight="219">
     <div class="first-reward">
       <img src="@/assets/image/claimCloudPhone/first-reward-1.png" alt="" />
       <img
@@ -47,7 +47,7 @@ export default {
 .first-reward {
   height: 100%;
   box-sizing: border-box;
-  padding-top: 188px;
+  padding-top: 210px;
   position: relative;
   & > img {
     height: 95px;

pages/claimCloudPhone/inviteeExits.vue

@@ -1,5 +1,5 @@
 <template>
-  <layout bgImgName="invitee-exits-img" bgColor="#fdf2e3" bgHeight="188">
+  <layout bgImgName="invitee-exits-img" bgColor="#fdf2e3" bgHeight="219">
     <div class="invitee-exits">
       <div class="invitee-exits-privilege">
         <div>三大云机特权</div>
@@ -103,7 +103,7 @@ export default {
 }
 .invitee-exits {
   height: 100%;
-  padding-top: 188px;
+  padding-top: 210px;
   box-sizing: border-box;
   .invitee-exits-privilege,
   .invitee-exits-phone-info {

pages/claimCloudPhone/mixins/common.js

@@ -3,7 +3,8 @@ export default {
     data() {
         return {
             packageList: [], // 邀请人被邀请人选择的套餐
-            visible: false
+            visible: false,
+            currentLoading: false
         }
     },
     mounted() {
@@ -26,7 +27,19 @@ export default {
                         this.visible = true
                         return
                     }
+                    let index = 0
+                    for (let i of res.data) {
+                        if (!i?.mealList?.length) {
+                            index++
+                        }
+                    }
+                    if(index === res.data.length) {
+                        this.visible = true
+                        this.currentLoading = false
+                        return 
+                    }
                     this.packageList = res.data || []
+                    this.currentLoading = true
                 }
             }).finally(() => {
                 this.$toast.clear();

pages/claimCloudPhone/purchase.vue

@@ -1,21 +1,21 @@
 <template>
   <layout
-    bgImgName="purchase-img"
+    :bgImgName="currentLoading ? 'purchase-img' : ''"
     bgColor="#FDF2E3"
-    bgHeight="188"
+    bgHeight="219"
     @goBack="goBack"
   >
-    <div class="purchase">
+    <div class="purchase" v-if="currentLoading">
       <div class="purchase-privilege">
         <div>
           <img src="@/assets/image/claimCloudPhone/privilege-1.png" alt="" />
           应用预装已完成
         </div>
-        <div>
+        <div style="animation-delay: 1s">
           <img src="@/assets/image/claimCloudPhone/privilege-2.png" alt="" />
           任意下单
         </div>
-        <div>
+        <div style="animation-delay: 1.5s">
           <img src="@/assets/image/claimCloudPhone/privilege-3.png" alt="" />
           立即使用云机
         </div>
@@ -88,7 +88,7 @@
           </div>
           <div class="payment-container-agreement">
             购买前阅读<span @click="toAgreement">
-              《双子星云手机类型服务协议》
+              《双子星云手机服务协议》
             </span>
           </div>
         </div>
@@ -103,10 +103,7 @@
         confirmButtonColor="#3367d1"
       >
         <div class="payment-tips">如果您已支付成功</div>
-        <div
-          class="payment-tips">
-          请点击"已完成支付"按钮
-        </div>
+        <div class="payment-tips">请点击"已完成支付"按钮</div>
       </van-dialog>
     </div>
   </layout>
@@ -307,7 +304,7 @@ export default {
 .purchase {
   height: 100%;
   box-sizing: border-box;
-  padding-top: 188px;
+  padding-top: 210px;
   .purchase-privilege {
     padding: 16px;
     height: 102px;
@@ -317,6 +314,8 @@ export default {
     display: flex;
     justify-content: space-between;
     & > div {
+      opacity: 0;
+      animation: purchase 0.5s forwards linear;
       text-align: center;
       font-family: PingFangSC, PingFang SC;
       font-weight: 400;
@@ -529,7 +528,7 @@ export default {
   font-weight: bold;
   text-align: center;
   padding-top: 10px;
-  &:last-of-type{
+  &:last-of-type {
     padding-bottom: 10px;
   }
 }
@@ -537,4 +536,14 @@ export default {
 .disabled {
   opacity: 0.3;
 }
+
+@keyframes purchase {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
 </style>

pages/claimCloudPhone/secondReward.vue

@@ -1,8 +1,11 @@
 <template>
-  <layout bgImgName="second-reward-img" bgColor="#f64d5d" bgHeight="188">
+  <layout bgImgName="second-reward-img" bgColor="#f64d5d" bgHeight="219">
     <div class="second-reward">
       <div class="second-reward-title">
-        请搜索您希望在云机内运行的应用为您安装至云机
+        <img
+          src="@/assets/image/claimCloudPhone/second-reward-title.png"
+          alt=""
+        />
       </div>
       <div>
         <div class="application">
@@ -97,15 +100,12 @@ export default {
 .second-reward {
   height: 100%;
   box-sizing: border-box;
-  padding-top: 188px;
+  padding-top: 210px;
   .second-reward-title {
-    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
-    font-weight: bold;
-    font-size: 15px;
-    color: #fefefe;
-    line-height: 18px;
-    text-align: center;
-    font-style: normal;
+   &>img{
+      height: 15px;
+      width: 100%;
+   }
   }
 
   .application {

pages/claimCloudPhone/zeroYuanClaim.vue

@@ -1,6 +1,6 @@
 <template>
-  <layout :isNavBar="isNavBar" padding="24px 16px 16px">
-    <div class="zero-yuan-claim">
+  <layout :isNavBar="isNavBar" padding="24px 16px 16px" :bgImgName="currentLoading ? 'bg' : ''">
+    <div class="zero-yuan-claim" v-if="currentLoading">
       <img
         class="zero-yuan-claim-title"
         src="@/assets/image/claimCloudPhone/zero-yuan-claim-title.png"
@@ -25,7 +25,7 @@
     >
       <div class="dialog-tips">
         很抱歉<br />
-        您的套餐不支持此活动进行续费
+        {{ $route.query.userCardId ? ' 您的套餐不支持此活动进行续费' : '暂时没有可选择的套餐' }}
       </div>
     </van-dialog>
   </layout>