add mobile and email filed for user

web/src/components/BindMobile.vue

@@ -6,14 +6,12 @@
       :before-close="close"
       :title="title"
   >
-    <div class="form" id="bind-mobile-form">
-      <el-alert v-if="username !== ''" type="info" show-icon :closable="false" style="margin-bottom: 20px;">
-        <p>当前绑定账号：{{ username }}，只允许使绑定有效的手机号或者邮箱地址作为登录账号。</p>
-      </el-alert>
+    <div class="form">
+      <div class="text-center">当前已绑手机号：{{ mobile }}</div>
 
       <el-form :model="form" label-width="120px">
-        <el-form-item label="新账号">
-          <el-input v-model="form.username"/>
+        <el-form-item label="手机号">
+          <el-input v-model="form.mobile"/>
         </el-form-item>
         <el-form-item label="验证码">
           <el-row :gutter="20">
@@ -21,7 +19,7 @@
               <el-input v-model="form.code" maxlength="6"/>
             </el-col>
             <el-col :span="8">
-              <send-msg size="" :receiver="form.username"/>
+              <send-msg size="" :receiver="form.username" type="mobile"/>
             </el-col>
           </el-row>
         </el-form-item>
@@ -44,26 +42,31 @@ import SendMsg from "@/components/SendMsg.vue";
 import {ElMessage} from "element-plus";
 import {httpPost} from "@/utils/http";
 import {validateEmail, validateMobile} from "@/utils/validate";
+import {checkSession} from "@/store/cache";
 
 const props = defineProps({
   show: Boolean,
-  username: String
 });
 
 const showDialog = computed(() => {
   return props.show
 })
 
-const title = ref('重置登录账号')
+const title = ref('绑定手机')
+const mobile = ref('')
 const form = ref({
-  username: '',
+  mobile: '',
   code: ''
 })
 
+checkSession().then(user => {
+  mobile.value = user.mobile
+})
+
 const emits = defineEmits(['hide']);
 
 const save = () => {
-  if (!validateMobile(form.value.username) && !validateEmail(form.value.username)) {
+  if (!validateMobile(form.value.mobile) && !validateEmail(form.value.mobile)) {
     return ElMessage.error("请输入合法的手机号/邮箱地址")
   }
   if (form.value.code === '') {
@@ -87,7 +90,15 @@ const close = function () {
 </script>
 
 <style lang="stylus" scoped>
-#bind-mobile-form {
+.form {
+  .text-center {
+    text-align center
+    padding-bottom 15px
+    font-size 14px
+    color #a1a1a1
+    font-weight 700
+  }
+
   .el-form-item__content {
     .el-row {
       width 100%

web/src/components/LoginDialog.vue

@@ -47,25 +47,29 @@
         </div>
 
         <el-row class="btn-row" :gutter="20">
-          <el-col :span="12">
+          <el-col :span="24">
             <el-button class="login-btn" type="primary" size="large" @click="submitLogin">登录</el-button>
           </el-col>
-          <el-col :span="12">
-            <span class="text">
-              还没有账号？
-              <el-tag @click="login = false">注册</el-tag>
-            </span>
-            <el-button type="info" class="forget" size="small" @click="showResetPass = true">忘记密码？</el-button>
-          </el-col>
         </el-row>
 
-        <el-row v-if="wechatLoginURL !== ''">
-          <div class="c-login">
-            <div class="text">其他登录方式：</div>
-            <div class="login-type">
-              <a class="wechat-login" :href="wechatLoginURL"><i class="iconfont icon-wechat"></i></a>
+        <el-row>
+          <el-col :span="12">
+            <div class="reg">
+              还没有账号？
+              <el-button type="primary" class="forget" size="small" @click="login = false">注册</el-button>
+
+              <el-button type="info" class="forget" size="small" @click="showResetPass = true">忘记密码？</el-button>
             </div>
-          </div>
+          </el-col>
+
+          <el-col :span="12">
+            <div class="c-login" v-if="wechatLoginURL !== ''">
+              <div class="text">其他登录方式：</div>
+              <div class="login-type">
+                <a class="wechat-login" :href="wechatLoginURL"><i class="iconfont icon-wechat"></i></a>
+              </div>
+            </div>
+          </el-col>
         </el-row>
       </el-form>
     </div>
@@ -77,7 +81,7 @@
             <div class="block">
               <el-input placeholder="手机号码"
                         size="large"
-                        v-model="data.username"
+                        v-model="data.mobile"
                         maxlength="11"
                         autocomplete="off">
                 <template #prefix>
@@ -102,7 +106,7 @@
                   </el-input>
                 </el-col>
                 <el-col :span="12">
-                  <send-msg size="large" :receiver="data.username"/>
+                  <send-msg size="large" :receiver="data.mobile" type="mobile"/>
                 </el-col>
               </el-row>
             </div>
@@ -111,7 +115,7 @@
             <div class="block">
               <el-input placeholder="邮箱地址"
                         size="large"
-                        v-model="data.username"
+                        v-model="data.email"
                         autocomplete="off">
                 <template #prefix>
                   <el-icon>
@@ -135,7 +139,7 @@
                   </el-input>
                 </el-col>
                 <el-col :span="12">
-                  <send-msg size="large" :receiver="data.username"/>
+                  <send-msg size="large" :receiver="data.email" type="email"/>
                 </el-col>
               </el-row>
             </div>
@@ -257,8 +261,10 @@ watch(() => props.show, (newValue) => {
 
 const login = ref(true)
 const data = ref({
-  username: process.env.VUE_APP_USER,
-  password: process.env.VUE_APP_PASS,
+  username: "",
+  password: "",
+  mobile: "",
+  email: "",
   repass: "",
   code: "",
   invite_code: ""
@@ -353,15 +359,15 @@ const doLogin = (verifyData) => {
 
 // 注册操作
 const submitRegister = () => {
-  if (data.value.username === '') {
+  if (activeName.value === 'username' && data.value.username === '') {
     return ElMessage.error('请输入用户名');
   }
 
-  if (activeName.value === 'mobile' && !validateMobile(data.value.username)) {
+  if (activeName.value === 'mobile' && !validateMobile(data.value.mobile)) {
     return ElMessage.error('请输入合法的手机号');
   }
 
-  if (activeName.value === 'email' && !validateEmail(data.value.username)) {
+  if (activeName.value === 'email' && !validateEmail(data.value.email)) {
     return ElMessage.error('请输入合法的邮箱地址');
   }
 
@@ -468,8 +474,6 @@ const close = function () {
 
     .c-login {
       display flex
-      padding-top 20px
-
       .text {
         font-size 16px
         color #a1a1a1
@@ -482,7 +486,7 @@ const close = function () {
         justify-content center
 
         .iconfont {
-          font-size 20px
+          font-size 18px
           background: #E9F1F6;
           padding: 8px;
           border-radius: 50%;
@@ -492,6 +496,16 @@ const close = function () {
         }
       }
     }
+
+    .reg {
+      height 50px
+      display flex
+      align-items center
+
+      .el-button {
+        margin-left 10px
+      }
+    }
   }
 
   .register-box {

web/src/components/ResetPass.vue

@@ -10,13 +10,13 @@
       <div class="form">
 
         <el-form :model="form" label-width="80px" label-position="left">
-          <el-form-item label="用户名">
-            <el-input v-model="form.username" placeholder="手机号/邮箱地址"/>
+          <el-form-item label="手机号">
+            <el-input v-model="form.username" placeholder="手机号"/>
           </el-form-item>
           <el-form-item label="验证码">
             <div class="code-box">
               <el-input v-model="form.code" maxlength="6"/>
-              <send-msg size="" :receiver="form.username" style="margin-left: 10px; min-width: 100px"/>
+              <send-msg size="" :receiver="form.username" type="mobile"/>
             </div>
             <el-row :gutter="20">
               <el-col :span="12">

web/src/components/SendMsg.vue

@@ -21,6 +21,10 @@ import {getSystemInfo} from "@/store/cache";
 const props = defineProps({
   receiver: String,
   size: String,
+  type: {
+    type: String,
+    default: 'mobile'
+  }
 });
 const btnText = ref('发送验证码')
 const canSend = ref(true)
@@ -32,9 +36,13 @@ getSystemInfo().then(res => {
 })
 
 const sendMsg = () => {
-  if (!validateMobile(props.receiver) && !validateEmail(props.receiver)) {
-    return showMessageError("请输入合法的手机号/邮箱地址")
+  if (!validateMobile(props.receiver) && props.type === 'mobile') {
+    return showMessageError("请输入合法的手机号")
   }
+  if (!validateEmail(props.receiver) && props.type === 'email') {
+    return showMessageError("请输入合法的邮箱地址")
+  }
+  
   if (enableVerify.value) {
     captchaRef.value.loadCaptcha()
   } else {