绑定微信页面布局

src/router/router.ts

@@ -53,6 +53,13 @@ const routes: RouteRecordRaw[] = [
       title:'注册 Travel Design'
     }
   },
+  {
+    path: '/BindToWechat',
+    component: () => import('@/views/Auth/BindToWechat.vue'),
+    meta:{
+      title:'绑定微信'
+    }
+  },
   {
     path: '/forgot',
     component: () => import('@/views/Auth/Forgot.vue'),

src/views/Auth/BindToWechat.vue

@@ -3,10 +3,9 @@
         <div class="column flex-center items-center rounded light-shadow q-pa-xl bg-white" style="margin: 60px 0;">
             <div class="text-center">
                 <div style="font-size: 1.88vw; line-height: 1;" class="text-dark text-weight-bolder row items-end flex-center">
-                    <span>Welcome to </span>
-                    <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1715138194000_864.png" style="width:3.18vw;margin-left: 1.67vw;" alt="">
+                    <span>立即绑定</span>
                 </div>
-                <div class="text-small" style="color:#404B5B;margin-top:0.99vw">创建账户，开启行程设计第一步</div>
+                <div class="text-small" style="color:#404B5B;margin-top:0.99vw">绑定账号，登录更轻松</div>
             </div>
             <div style="width:400px;padding:0 50px;">
                 <el-form ref="registFormRef" :model="model" :rules="rules" label-width="0px" size="large" class="full-width q-mt-lg" :disabled="loading"> 
@@ -29,26 +28,27 @@
                     <el-form-item label="" prop="code">
                         <el-input v-model="model.code" placeholder="验证码" />
                     </el-form-item>
-                    <el-form-item label="" prop="password">
-                        <el-input v-model="model.password" type="password" placeholder="设置密码" autocomplete="new-password" show-password/>
+                    <el-form-item label="" prop="phone">
+                        <el-input v-model="model.phone" type="tel" placeholder="输入手机号"/>
                     </el-form-item>
-                    <el-form-item label="" prop="confirmPwd">
-                        <el-input v-model="model.confirmPwd" type="password" placeholder="确认密码" autocomplete="new-password" show-password/>
+                    <el-form-item label="" prop="">
+                        
                     </el-form-item>
                     <el-form-item label="">
-                        <vue-hcaptcha ref="invisibleHcaptcha" sitekey="46e00e53-ddb2-4e7b-9c51-621534c2f1f5" @verify="verifyHandler"></vue-hcaptcha>
+                        <div style="height: 78px;">&nbsp;</div>
+                        <!-- <vue-hcaptcha ref="invisibleHcaptcha" sitekey="46e00e53-ddb2-4e7b-9c51-621534c2f1f5" @verify="verifyHandler"></vue-hcaptcha> -->
                     </el-form-item>
                     <el-form-item>
-                        <el-button type="primary" class="full-width q-mb-lg" @click="submitForm(registFormRef)" :loading="loading">立即注册</el-button>
+                        <el-button type="primary" class="full-width q-mb-lg" @click="submitForm(registFormRef)" :loading="loading">立即绑定</el-button>
                     </el-form-item>
-                    
-                    <div class="text-info text-small row flex-center">
-                        <span>已有账号？</span>
-                        <el-button link type="primary" class="q-mb-lg"  @click="redicetToLogin">立即登录</el-button>
-                    </div>
                 </el-form>
+                <div class="text-info text-small row flex-center">
+                    <span>&nbsp;</span>
+                    <el-button link type="primary" class="q-mb-lg" >&nbsp;</el-button>
+                </div>
             </div>
         </div>
+    
         <div class="text-small text-info q-mb-lg">@2012-2024 成都微途科技有限公司 版权所有 <a class="q-pl-md" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"
         style="color: rgb(155, 153, 188);text-decoration: none;">蜀ICP备13024891号-9</a></div>
     </div>
@@ -74,7 +74,8 @@ const model = ref<{password:string,confirmPwd:string,mail:string,code:string}>({
     //nickname:'',
     confirmPwd:'',
     mail:'',
-    code:''
+    code:'',
+    phone: ''
 })
 const validateToken = ref('')
 const registFormRef = ref<FormInstance>()