Update 登录页面优化

UI/XYH.APP/src/pages/account/login.vue

@@ -7,6 +7,7 @@ const codeUrl = ref("")
 const code = ref("")
 const captchaEnabled = ref(true)
 const register = ref(true)
+const authType = ref(0)
 const ready = ref(false)
 const pageParams = route.getRouteParams("login")
 
@@ -39,11 +40,12 @@ function getCode() {
     loginForm.uuid = res.uuid
   })
 }
+
 function handleLogin() {
-  if (!loginForm.openid) {
+  if (authType.value == 1 && !loginForm.openid) {
     message.confirm("微信需要重新授权").then((res: any) => {
       if (res.confirm) {
-        handleWechatLogin()
+        handleWechatAuth()
       }
     })
     return
@@ -58,6 +60,9 @@ function handleLogin() {
     message.msgError("验证码错误")
   } else {
     message.loading("登录中，请耐心等待...")
+    if (authType.value != 1) {
+      loginForm.openid = ""
+    }
     store.login(loginForm).then(() => {
       message.closeLoading()
       store.loadUserInfo().then(() => {
@@ -72,8 +77,10 @@ function handleUserRegister() {
 function handleForgetPwd() {
   route.navigate("forgetPwd")
 }
-
-function handleWechatLogin() {
+function handleManuleAuth() {
+  authType.value = 2
+}
+function handleWechatAuth() {
   appStore.authStore
     .xcxLogin()
     .then((res: any) => {
@@ -82,12 +89,17 @@ function handleWechatLogin() {
       } else {
         getCode()
         loginForm.openid = appStore.authStore.getOpenId()
+        authType.value = 1
         ready.value = true
-        //message.msgSuccess("获取到openid: " + loginForm.openid)
       }
     })
     .catch((err: any) => {
-      message.msgError(err)
+      authType.value = 0
+      if (err) {
+        message.msgError(err)
+      } else {
+        message.msgError("微信登录失败")
+      }
       getCode()
     })
 }
@@ -109,131 +121,54 @@ loginForm.openid = appStore.authStore.getOpenId()
 onLoad(() => {
   if (pageParams && pageParams.loginType == "logout") {
     ready.value = true
-    console.log("退出登录", loginForm)
+    //console.log("退出登录", loginForm)
     return
   }
-  handleWechatLogin()
 })
 </script>
 <template>
-  <view class="normal-login-container">
-    <view class="logo-content flex-center d-flex">
-      <image style="width: 100rpx; height: 100rpx" :src="config.appInfo.logo" mode="widthFix"></image>
-      <text class="title text-xyh">盐城中学校友会</text>
+  <view class="">
+    <view class="d-fc flex-column mt-100 mb-30">
+      <image class="w-100px h-100px" :src="config.appInfo.logo" mode="widthFix"></image>
+      <text class="text-vb mt-10 fw">盐城中学校友会</text>
     </view>
-    <view class="login-form-content">
-      <view class="input-item d-flex flex-center-v">
-        <view class="iconfont icon-user icon"></view>
-        <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
-      </view>
-      <view class="input-item d-flex flex-center-v">
-        <view class="iconfont icon-password icon"></view>
-        <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
-      </view>
-      <view class="input-item d-flex flex-center-v" style="width: 60%; margin: 0px" v-if="captchaEnabled">
-        <view class="iconfont icon-code icon"></view>
-        <input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
-        <view class="login-code">
-          <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
+    <view class="m-15 p-15">
+      <view v-if="authType != 0" class="flex-column">
+        <view class="mb-20 h-45px border border-vb d-fcv br-25">
+          <view class="iconfont icon-user text-vb fs-30 ms-15"></view>
+          <input class="ps-10" v-model="loginForm.username" type="text" placeholder="请输入账号" maxlength="30" />
+        </view>
+        <view class="mb-20 h-45px border border-vb d-fcv br-25">
+          <view class="iconfont icon-password text-vb fs-28 ms-15"></view>
+          <input class="ps-10" v-model="loginForm.password" type="password" placeholder="请输入密码" maxlength="30" />
+        </view>
+        <view class="d-flex h-45px mb-20" v-if="captchaEnabled">
+          <view class="me-10 h-100 border border-vb d-fcv br-25 flex-row-auto">
+            <view class="iconfont icon-code text-vb fs-28 ms-15"></view>
+            <input class="ps-10" v-model="loginForm.code" type="number" placeholder="请输入验证码" maxlength="4" />
+          </view>
+          <view class="flex-row-fluid h-100 w-50px">
+            <image class="w-100 h-100 br-5" :src="codeUrl" @click="getCode"></image>
+          </view>
+        </view>
+        <view class="mb-5 d-flex">
+          <view @click="authType = 0" class="btn btn-vb btn-round btn-block btn-plain me-15">返回</view>
+          <view @click="handleLogin" class="btn btn-vb btn-round btn-block">
+            {{ authType == 1 ? "绑定账号" : "登录" }}
+          </view>
+        </view>
+        <view class="d-flex justify-between px-20">
+          <view @click="handleForgetPwd" class="text-vb">忘记密码？</view>
+          <view v-if="register">
+            <text class="text-grey">没有账号？</text>
+            <text @click="handleUserRegister" class="text-vb">立即注册</text>
+          </view>
         </view>
       </view>
-      <vb-cell-group isTran>
-        <vb-button @click="handleLogin" round block size="large">登录</vb-button>
-      </vb-cell-group>
-      <view class="reg text-center" style="">
-        <text @click="handleForgetPwd" class="text-vb">忘记密码？</text>
-        <span v-if="register">
-          <text class="text-grey">没有账号？</text>
-          <text @click="handleUserRegister" class="text-vb">立即注册</text>
-        </span>
+      <view v-else class="">
+        <vb-button @click="handleWechatAuth" round block size="large">微信授权</vb-button>
+        <vb-button @click="handleManuleAuth" plain round block size="large" custom-class="mt-20">手动登录</vb-button>
       </view>
-      <!-- <view class="footer text-center">
-        <text class="text-grey1">登录即代表同意</text>
-        <text @click="handleUserAgreement" class="text-blue">《用户协议》</text>
-        <text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
-      </view> -->
     </view>
   </view>
 </template>
-
-<style lang="scss">
-page {
-  background-color: #f5f5f5;
-}
-
-.normal-login-container {
-  width: 100%;
-
-  .logo-content {
-    width: 100%;
-    font-size: 21px;
-    text-align: center;
-    padding-top: 15%;
-
-    image {
-      border-radius: 4px;
-    }
-
-    .title {
-      margin-left: 10px;
-    }
-  }
-
-  .login-form-content {
-    text-align: center;
-    margin: 20px auto;
-    margin-top: 15%;
-    width: 80%;
-
-    .input-item {
-      margin: 20px auto;
-      background-color: var(--vb-white);
-      height: 45px;
-      border-radius: 20px;
-      border: 1px solid var(--vb-color);
-      .icon {
-        font-size: 38rpx;
-        margin-left: 10px;
-        color: var(--vb-color);
-      }
-
-      .input {
-        width: 100%;
-        font-size: 14px;
-        line-height: 20px;
-        text-align: left;
-        padding-left: 15px;
-      }
-    }
-
-    .login-btn {
-      margin-top: 40px;
-      height: 45px;
-    }
-
-    .reg {
-      display: flex;
-      justify-content: space-between;
-      margin-top: 15px;
-      padding: 0 15px;
-    }
-
-    .footer {
-      color: #333;
-      margin-top: 20px;
-    }
-
-    .login-code {
-      height: 38px;
-      float: right;
-
-      .login-code-img {
-        height: 38px;
-        position: absolute;
-        margin-left: 10px;
-        width: 200rpx;
-      }
-    }
-  }
-}
-</style>

UI/XYH.APP/src/static/scss/vb-component/_button.scss

@@ -6,6 +6,7 @@ view {
   --vb-button-small-height: 32px;
   --vb-button-small-padding: 0 var(--vb-padding-xs);
   --vb-button-small-font-size: var(--vb-font-size-sm);
+  --vb-button-normal-height: 40px;
   --vb-button-normal-padding: 0 15px;
   --vb-button-normal-font-size: var(--vb-font-size-md);
   --vb-button-large-height: 50px;