优化受邀页面静态逻辑

pages/activity/invite-user/invite-passive-user.vue

@@ -4,44 +4,89 @@
     <WxPopTpis v-if="isWeChatBrowser" />
     
     <div class="padssive">
-      <div>
-        <div class="bright-wrap">
-          <div class="bright-item mb-6"></div>
-          <div class="bright-item mb-6"></div>
-          <div class="bright-item"></div>
-          <div class="bright-item"></div>
+      <div class="bg-top-img-wrap" align="right">
+        <img class="bg-top-img" src="~assets/image/activity/invite-user/invite-passive-user/bg.png" />
+      </div>
+
+      <div class="bright-wrap">
+        <div class="bright-item mb-6">
+          <div class="img-wrap">
+            <img class="label-img" src="~assets/image/activity/invite-user/invite-passive-user/hosting.png" />
+          </div>
+          <div class="text-wrap">
+            <p class="title-text">游戏托管</p>
+            <p class="tips-text">自动刷资源</p>
+            <p class="tips-text">秒升角色战力</p>
+          </div>
+        </div>
+        <div class="bright-item mb-6">
+          <div class="img-wrap">
+            <img class="label-img" src="~assets/image/activity/invite-user/invite-passive-user/clone.png" />
+          </div>
+          <div class="text-wrap">
+            <p class="title-text">应用分身</p>
+            <p class="tips-text">无限多开群控</p>
+            <p class="tips-text">小号多不用愁</p>
+          </div>
+        </div>
+        <div class="bright-item">
+          <div class="img-wrap">
+            <img class="label-img" src="~assets/image/activity/invite-user/invite-passive-user/location.png" />
+          </div>
+          <div class="text-wrap">
+            <p class="title-text">位置服务</p>
+            <p class="tips-text">想去哪</p>
+            <p class="tips-text">就去哪</p>
+          </div>
         </div>
+        <div class="bright-item">
+          <div class="img-wrap">
+            <img class="label-img" style="bottom:8px" src="~assets/image/activity/invite-user/invite-passive-user/multi.png" />
+          </div>
+          <div class="text-wrap">
+            <p class="title-text">功能全面</p>
+            <p class="tips-text">三端互通</p>
+            <p class="tips-text">应有尽有</p>
+          </div>
+        </div>
+      </div>
 
-        <div class="input-wrap">
-          <div class="input-cell">
-            <div class="input-cell-label">
-              <span class="required">*</span><span class="label-name">手机号</span>
-            </div>
-            <div class="input-cell-value">
-              <input class="input" v-model.trim="value" type="number" placeholder="请输入11位手机号" />
-            </div>
-            <div class="input-error-msg">手机号码不正确，请重新输入!</div>
+      <div class="input-wrap">
+        <div class="input-cell">
+          <div class="input-cell-label">
+            <span class="required">*</span><span class="label-name">手机号</span>
+          </div>
+          <div class="input-cell-value">
+            <input class="input" v-model.trim="value" type="number" placeholder="请输入11位手机号" />
           </div>
+          <div class="input-error-msg">手机号码不正确，请重新输入!</div>
+        </div>
 
-          <div class="input-cell">
-            <div class="input-cell-label">
-              <span class="required">*</span><span class="label-name">短信验证</span>
+        <div class="input-cell">
+          <div class="input-cell-label">
+            <span class="required">*</span><span class="label-name">短信验证</span>
+          </div>
+          <div class="code-cell">
+            <div class="input-cell-value">
+              <input class="input" v-model.trim="value" type="number" placeholder="请输入验证码" />
             </div>
-            <div class="code-cell">
-              <div class="input-cell-value">
-                <input class="input" v-model.trim="value" type="number" placeholder="请输入验证码" />
-              </div>
-              <div class="get-code ml-2">获取验证码</div>
+            <div class="get-code ml-2">
+              <span v-if="!codeObj.isDisable" @click="getCodeHandle">获取验证码</span>
+              <van-count-down ref="countDown" @finish="codeObj.isDisable = false" :time="60000">
+                <template #default="timeData">
+                  <span><span v-if="codeObj.isDisable" style="color: #999">{{ timeData.seconds }}秒后重试</span></span>
+                </template>
+              </van-count-down>
             </div>
-            <div class="input-error-msg">手机号码不正确，请重新输入!</div>
-          </div>
-          <div class="req-btn-wrap">
-            <van-button class="mb-3" type="primary" round block color="#435EFB" text="注册并下载APP" />
           </div>
+          <div class="input-error-msg">手机号码不正确，请重新输入!</div>
+        </div>
+        <div class="req-btn-wrap">
+          <van-button class="mb-3" type="primary" round block color="#435EFB" text="注册并下载APP" />
+        </div>
 
-          <div class="tips">
-            通过登录即可完成注册，成为我们的新用户，登录后表示同意双子星云手机服务协议
-          </div>
+        <div class="tips">
+          通过登录即可完成注册，成为我们的新用户，登录后表示同意双子星云手机服务协议
         </div>
       </div>
     </div>
@@ -60,7 +105,12 @@ export default {
   components: { WxPopTpis },
   data() {
     return {
-      value: ''
+      value: '',
+      codeObj: {
+        tips: '获取验证码',
+        isDisable: false,
+        time: 60,
+      }
     }
   },
   computed: {
@@ -69,25 +119,83 @@ export default {
       return this.$userAgent.isWx;
     }
   },
+  methods: {
+    // 获取验证码
+    getCodeHandle() {
+      if (!this.value) {
+        this.$toast('请输入手机号');
+        return;
+      }
+
+      this.$refs.countDown.reset();
+      this.codeObj.isDisable = true;
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 .padssive{
-  padding: 80px 16px 16px 16px;
+  padding: 0 16px 16px 16px;
+  height: 100vh;
+  overflow: auto;
+  background: linear-gradient(#D3E0FF, #F5F5F5);
+}
+
+.bg-top-img-wrap{
+
+  .bg-top-img{
+    width: 119px;
+    height: 119px;
+  }
 }
+
 .bright-wrap{
   display: flex;
   justify-content: space-around;
   align-items: center;
   flex-wrap: wrap;
   align-content: space-around;
+  margin-bottom: 16px;
   
   .bright-item{
     width: 155px;
     height: 82px;
     background: linear-gradient( 160deg, #62A9FF 0%, #3370FF 100%);
     border-radius: 8px;
+    display: flex;
+
+    .img-wrap{
+      position: relative;
+      padding-left: 10px;
+
+     .label-img{
+        width: 48px;
+        height: 53px;
+        position: relative;
+        left: 0;
+        bottom: 5px;
+      }
+    }
+
+   .text-wrap{
+      margin-left: 15px;
+      font-size: 12px;
+      color: #c6c6c6;
+      line-height: 18px;
+      text-align: left;
+
+      &>p{
+        margin-bottom: 0;
+      }
+    
+    .title-text{
+      font-size: 16px;
+      color: #fff;
+      line-height: 35px;
+      font-weight: 600;
+    }
+   }
   }
 }
 
@@ -145,6 +253,8 @@ export default {
       display: flex;
       
       .get-code{
+       width: 80px;
+       flex-shrink: 0;
        font-weight: 400;
        font-size: 14px;
        color: #3370FF;

plugins/axios.js

@@ -15,7 +15,7 @@ export default function ({ $axios, $auth, $userAgent, query, redirect }) {
     } else {
       config.headers.client = 7;
     }
-    config.headers.versionname = '5.9.0';
+    config.headers.versionname = '5.9.2';
     return config;
   });
   $axios.onResponse(async (response) => {