修改登录 注册 修改密码 页面布局

src/views/authentication/LoginView.vue

@@ -17,14 +17,17 @@
           <p class="polog"><span class="font-size-18-dhc" style="padding: 2% 0%;font-weight: 600;">登录</span> </p>
         </van-col>
         <van-col span="24"><span class="font-size-12-dhc" style="font-weight: 400; font-family: 'Arial Normal', 'Arial';
-}">请使用手机号登录</span></van-col>
+}">请使用手机号或身份证号登录</span></van-col>
       </van-row>
       <van-form>
         <div class="logindiv">
-          <span class="sopan">手机号</span>
-          <van-field v-model="phone" label="+86   |" :border="true" placeholder="请输入手机号"
-            :rules="[{ validator: verifyPhone, message: '请输入正确的手机号码' }]" />
+          <span class="sopan">账号</span>
+          <van-field v-model="loginNo"  :border="true" placeholder="请输入手机号或身份证号"
+             />
+              
+             <!-- :rules="[{ validator: verifyPhone, message: '请输入正确的手机号码' }]" -->
         </div>
+        <van-divider :style="{ margin: 0 }"></van-divider>
 
         <!-- <div class="logindiv"> -->
         <span class="sopan">密码</span>
@@ -36,9 +39,11 @@
             </span>
           </template>
         </van-field>
+        <!-- <van-divider :style="{ margin: 0 }"></van-divider> -->
+
         <!-- <van-divider /> -->
         <!-- </div> -->
-        <div class="d-flex ">
+        <!-- <div class="d-flex ">
           <div class="p-2 mr-auto ">
             <span class="sopan">验证码</span>
             <van-field center clearable v-model="imageSrcValue" placeholder="请输入验证码" />
@@ -46,7 +51,7 @@
           <div class="p-2 ">
             <img :src="imageSrc" style="max-width: 100px; max-height: 200px;" @click="_updatePicCode()" />
           </div>
-        </div>
+        </div> -->
 
         <!-- <template >
            <img :src="imageSrc" style="max-width: 100px; max-height: 200px;" /> 
@@ -56,11 +61,13 @@
         <van-row class="">
           <van-col span="16">
             <van-field v-model="sms" center clearable placeholder="请输入短信验证码">
-              <!-- <van-divider /> -->
+             
             </van-field>
           </van-col>
-          <van-col span="8"><a style="color:#3672F1" @click="getPhonePost()">{{ getCmstotal }}</a></van-col>
+          <van-col span="8"><a style="  color:#3672F1; display:inline-block;font-size:12px;line-height:44px; margin-left: 25%;" @click="getPhonePost()">{{ getCmstotal }}</a></van-col>
         </van-row>
+            <van-divider :style="{ margin: 0 }"></van-divider>
+
         <div style="margin: 16px;">
           <van-button square block type="info" native-type="submit" @click="loginSystem()">登录</van-button>
         </div>
@@ -99,9 +106,9 @@ import { log } from "mathjs";
   [VanImage.name]: VanImage,
 })
 export default class LoginView extends Vue {
-  getCmstotal = "获取短信验证码";
+  getCmstotal = "获取验证码";
   tatleName = "用户登录";
-  phone: string = "";//电话
+  loginNo: string = "";//登录账号
   password: string = "";//密码
   imageSrc: any = "";//图形
   imageSrcValue: string = "";//图形验证码
@@ -122,9 +129,9 @@ export default class LoginView extends Vue {
 
   }
   //手机号
-  verifyPhone() {
-    return /^1\d{10}$/.test(this.phone) // 返回true或false
-  }
+  // verifyPhone() {
+  //   return /^1\d{10}$/.test(this.phone) // 返回true或false
+  // }
   //获取图形验证码
   _updatePicCode() {
     //请求图形验证码
@@ -151,7 +158,7 @@ export default class LoginView extends Vue {
   //获取短信验证码
   getPhonePost() {
     let param = {
-      phoneCode: this.phone
+      phoneCode: this.loginNo
     }
     apiService.general(commonApi.getPicCode, param, undefined, undefined).then((response: RestfulResponse) => {
 
@@ -169,7 +176,7 @@ export default class LoginView extends Vue {
     //验证码失败刷新
     //this._updatePicCode();
     let param = {
-      phone: this.phone,
+      phone: this.loginNo,
       //图形验证码
       imageVerifyKey: this.imageSrcValue,
       //渠道
@@ -202,7 +209,7 @@ export default class LoginView extends Vue {
     this.$router.push({
       name: `ForgetPass`,
       params: {
-        phone: this.phone
+        phone: this.loginNo
       }
     });
   }

src/views/login/ForgetPassView.vue

@@ -28,21 +28,22 @@
             class="font-size-12-dhc"
             style="font-weight: 400; font-family: 'Arial Normal', 'Arial';
 }"
-            >请使用注册手机号进行密码重置</span
+            >请使用注册手机号或身份证号进行密码重置</span
           ></van-col
         >
       </van-row>
       <van-form @submit="onSubmit">
         <div class="logindiv">
-          <span class="sopan">手机号码</span>
+          <span class="sopan">账号</span>
           <van-field
-            v-model="phone"
-            label="+86   |"
+            v-model="loginNo"
             :border="true"
-            placeholder="请输入手机号"
+            placeholder="请输入手机号或身份证号"
           />
-          <van-divider />
+          
         </div>
+        <van-divider :style="{ margin: 0 }"></van-divider>
+        
 
         <div class="logindiv">
           <span class="sopan">新密码</span>
@@ -64,8 +65,9 @@
           </van-field>
           <!-- <van-divider /> -->
         </div>
+        <van-divider :style="{ margin: 0 }"></van-divider>
         <div class="logindiv">
-          <span class="sopan">新密码</span>
+          <span class="sopan">确认密码</span>
           <van-field
             v-model="restpassword"
             :type="password"
@@ -84,6 +86,7 @@
           </van-field>
           <!-- <van-divider /> -->
         </div>
+        <van-divider :style="{ margin: 0 }"></van-divider>
         <span class="sopan">短信验证码</span>
         <div>
           <van-row>
@@ -98,10 +101,11 @@
               </van-field>
             </van-col>
             <van-col span="8"
-              ><a href="#" @click="getPhonePost()">获取短信验证码</a></van-col
+              ><a href="#" style="  color:#3672F1; display:inline-block;font-size:12px;line-height:44px; margin-left: 25%;" @click="getPhonePost()">获取验证码</a></van-col
             >
           </van-row>
         </div>
+        <van-divider :style="{ margin: 0 }"></van-divider>
         <div style="margin: 16px">
           <van-button square block type="info" native-type="submit"
             >登录</van-button
@@ -128,7 +132,7 @@ export default class ForgetPassView extends Vue {
   passwordType="password"
   getCmstotal = "获取短信验证码";
   tatleName = "密码重置";
-  phone: string = ""; //电话
+  loginNo: string = ""; //登录账号
   newpassword: string = ""; //密码
   restpassword: string = ""; //密码
   imageSrc: string = ""; //图形
@@ -160,7 +164,7 @@ export default class ForgetPassView extends Vue {
   }
   getPhonePost() {
     let param = {
-      phoneCode: this.phone,
+      phoneCode: this.loginNo,
     };
     apiService
       .general(commonApi.getPicCode, param, undefined, undefined)

src/views/login/Register.vue

@@ -15,28 +15,30 @@
     <div class="login">
       <van-row style="padding: 10% 0%;">
         <van-col span="24">
-          <p class="polog"><span class="font-size-18-dhc" style="padding: 2% 0%;font-weight: 600;">用户注册</span> </p>
+          <p class="polog"><span class="font-size-18-dhc" style="padding: 2% 0%;font-weight: 600;">注册</span> </p>
         </van-col>
         <van-col span="24"><span class="font-size-12-dhc" style="font-weight: 400; font-family: 'Arial Normal', 'Arial';
-}">请使用机号码进行注册</span></van-col>
+}">请使用机号码或身份证号码进行注册</span></van-col>
       </van-row>
       <van-form>
         <div class="logindiv">
-          <span class="sopan">手机号码</span>
-          <van-field v-model="phone" label="+86   |" :border="true" placeholder="请输入手机号"
-            :rules="[{ validator: verifyPhone, message: '请输入正确的手机号码' }]" />
-
+          <span class="sopan">账号</span>
+          <van-field v-model="phone"   :border="true" placeholder="请输入手机号码/身份证号码"
+              />
+              <van-divider :style="{ margin: 0 }"></van-divider>
+              <!-- error-message="请输入手机号码或身份证号码" -->
+        <!-- :rules="[{ validator: verifyPhone, message: '请输入正确的手机号码/身份证号码' }]" -->
         </div>
 
-        <div class="logindiv">
-          <span class="sopan">身份证号</span>
+        <!-- <div class="logindiv">
+          <span class="sopan">身份证号</span> -->
 
 
-          <van-field v-model="idCard" :border="true" placeholder="请输入身份证号"
-            :rules="[{ validator: verifyid, message: '请输入正确的身份证号码' }]" />
+          <!-- <van-field v-model="idCard" :border="true" placeholder="请输入身份证号"
+            :rules="[{ validator: verifyid, message: '请输入正确的身份证号码' }]" /> -->
           <!-- <van-divider /> -->
-          <van-divider :style="{ margin: 0 }"></van-divider>
-        </div>
+          <!-- <van-divider :style="{ margin: 0 }"></van-divider>
+        </div> -->
 
 
         <div class="logindiv"><span class="sopan">短信验证码</span>
@@ -46,7 +48,8 @@
                 <!-- <van-divider /> -->
               </van-field>
             </van-col>
-            <van-col span="8"><span style="color:blue" @click="getPhonePost()">{{ getCmstotal }}</span></van-col>
+            <van-col span="8"><span style="  color:#3672F1; display:inline-block;font-size:12px;line-height:44px; margin-left: 25%;"
+                   @click="getPhonePost()">{{ getCmstotal }}</span></van-col>
 
           </van-row>
           <van-divider :style="{ margin: 0 }"></van-divider>
@@ -170,7 +173,7 @@ export default class ForgetPassView extends Vue {
       this.getCmstotal = this.time + "s重发验证码";
       if (this.time < 0) {
         clearInterval(this.time)
-        this.getCmstotal = "获取短信验证码";
+        this.getCmstotal = "获取验证码";
       }
     }, 1000)