微信 登录

src/router/index.ts

@@ -10,7 +10,7 @@ const router = createRouter({
 })
 
 
-const whiteList = ['/autoLogin','/login','/notfound','/regist','/','/forgot','/newpass','/notsupported']
+const whiteList = ['/autoLogin','/login','/notfound','/regist','/','/forgot','/newpass','/notsupported','/BindToWechat']
 const managerMenu = ['/market','/editor_admin']
 
 let loadingInstance:any = null 

src/views/Auth/BindToWechat.vue

 <template>
-    <div class="window-height regist-box column flex-center items-center">
+    <div class="window-height bind-box column flex-center items-center">
         <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">
+                <div style="font-size: 1.88vw; line-height: 1;padding-top: 40px;" class="text-dark text-weight-bolder row items-end flex-center">
                     <span>立即绑定</span>
                 </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"> 
-                    <!-- <el-form-item label="" prop="nickname">
-                        <el-input v-model="model.nickname" placeholder="昵称" class="q-mt-lg" />
-                    </el-form-item> -->
-                    <!-- <el-form-item label="" prop="account">
-                        <el-input v-model="model.account" placeholder="账号" />
-                    </el-form-item> -->
+                <el-form ref="bindFormRef" :model="model" :rules="rules" label-width="0px" size="large" class="full-width q-mt-lg" :disabled="loading"> 
                     <el-form-item label="" prop="mail">
                         <el-input v-model="model.mail" placeholder="邮箱">
                             <template #suffix>
@@ -39,12 +33,12 @@
                         <!-- <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(bindFormRef)" :loading="loading">立即绑定</el-button>
                     </el-form-item>
                 </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>
+                    <span>密码登录？</span>
+                    <el-button link type="primary" class="q-mb-lg"  @click="redicetToLogin">立即登录</el-button>
                 </div>
             </div>
         </div>
@@ -78,7 +72,7 @@ const model = ref<{password:string,confirmPwd:string,mail:string,code:string}>({
     phone: ''
 })
 const validateToken = ref('')
-const registFormRef = ref<FormInstance>()
+const bindFormRef = ref<FormInstance>()
 const invisibleHcaptcha = ref<VueHcaptcha|null>(null)
 const loading = ref(false)
 const sending = ref(false)
@@ -142,16 +136,16 @@ const submitForm = async (formEl: FormInstance | undefined) => {
                 loading.value=false
                 return
             }
-            await registHandler()
+            await bindHandler()
         }
         loading.value=false
     })
 }
 
-const registHandler = async () =>{
+const bindHandler = async () =>{
     const response = await UserServices.RegistUserAsync(model.value.mail,model.value.password,model.value.code,validateToken.value)
     if(response.data.resultCode == ApiResult.SUCCESS){
-        ElMessage.success({message:'注册成功，正在跳转'})
+        ElMessage.success({message:'绑定成功，正在跳转'})
         setTimeout(() => {
             redicetToLogin()
         }, 1000);
@@ -185,7 +179,7 @@ const sendVerifyCode = async () => {
 }
 </script>
 <style>
-.regist-box{
+.bind-box{
     background-image: url('../../assets/img/regist.png'),linear-gradient(0deg, #E3ECFF, #FFFFFF);
     background-size: 100% auto;
     background-repeat: no-repeat;

src/views/Auth/Login.vue

@@ -61,6 +61,9 @@
                         <span>还没有账号？</span>
                         <el-button link type="primary" class="q-mb-lg" @click="redicetToRegist">立即注册</el-button>
                     </div>
+                    <div class="text-info text-small row flex-center">
+                        <img class="cursor-pointer" src="../../assets/img/wechatLogin.png" style="width:1.67vw;" alt="" @click="redicetToWechat">
+                    </div>
                 </el-form>
             </template>
             <template v-if="multipleUsers && multipleUsers.length>0">
@@ -185,6 +188,9 @@ const userLoginHandler = async ()=>{
     }
 }
 
+const redicetToWechat = () => {
+    location.href='/BindToWechat'
+}
 const forwardWorkspaceHandler = ()=>{
     location.href='/space';
 }