增加注册功能

src/views/common/login.vue

@@ -6,25 +6,62 @@
           <h3 class="login-title">{{ entryName }}</h3>
           <el-form
             :model="dataForm"
-            :rules="dataRule"
+            :rules="dataRule1"
             ref="dataForm"
             @keyup.enter.native="dataFormSubmit()"
             status-icon
           >
-            <el-form-item prop="userName">
+            <div v-if="!isLogin">
+              <el-form-item prop="mobile" >
+                <div class="flex" style="display: flex">
+                  <el-input v-model="dataForm.mobile" placeholder="手机号">
+                  </el-input>
+                  <el-button
+                    style="margin-left: 20px"
+                    type="primary"
+                    size="medium"
+                    @click="sendMsg()"
+                  >
+                    {{ msgTime >= 60 ? "发送验证码" : msgTime }}</el-button
+                  >
+                </div>
+              </el-form-item>
+              <el-form-item prop="code" >
+                <el-input
+                  v-model="dataForm.code"
+                  placeholder="验证码"
+                ></el-input>
+              </el-form-item>
+              <el-form-item prop="email" >
+                <el-input
+                  v-model="dataForm.email"
+                  placeholder="邮箱"
+                ></el-input>
+              </el-form-item>
+            </div>
+
+            <el-form-item prop="userName" >
               <el-input
                 v-model="dataForm.userName"
                 placeholder="帐号"
               ></el-input>
             </el-form-item>
-            <el-form-item prop="password">
+
+            <el-form-item prop="password" >
               <el-input
+                type="password"
                 v-model="dataForm.password"
+                placeholder="密码"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="password1" v-if="!isLogin" >
+              <el-input
+                v-model="dataForm.password1"
                 type="password"
                 placeholder="密码"
               ></el-input>
             </el-form-item>
-            <el-form-item prop="captcha">
+            <el-form-item prop="captcha" v-if="isLogin" >
               <el-row :gutter="20">
                 <el-col :span="14">
                   <el-input v-model="dataForm.captcha" placeholder="验证码">
@@ -35,7 +72,8 @@
                 </el-col>
               </el-row>
             </el-form-item>
-            <el-form-item>
+
+            <el-form-item v-if="isLogin">
               <div class="btn-box">
                 <div class="" style="margin-top: 38px">
                   <el-button
@@ -45,15 +83,36 @@
                     >登录</el-button
                   >
                 </div>
-                <!-- <div>
+                <div>
                   <el-button
                     class="login-btn-submit"
                     plain
-                    type="primary"
+                    type="text"
-                    @click="dataFormSubmit()"
+                    @click="isLogin = false"
                     >注册</el-button
                   >
-                </div> -->
+                </div>
+              </div>
+            </el-form-item>
+            <el-form-item v-if="!isLogin">
+              <div class="btn-box">
+                <div class="" style="margin-top: 38px">
+                  <el-button
+                    class="login-btn-submit"
+                    type="primary"
+                    @click="register()"
+                    >立即注册</el-button
+                  >
+                </div>
+                <div>
+                  <el-button
+                    class="login-btn-submit"
+                    plain
+                    type="text"
+                    @click="isLogin = true"
+                    >返回登录</el-button
+                  >
+                </div>
               </div>
             </el-form-item>
           </el-form>
@@ -69,20 +128,35 @@ import { entryName } from "@/utils/httpRequest";
 export default {
   data() {
     return {
+      isLogin: true,
+      timer: null,
+      msgTime: 60,
       dataForm: {
+        mobile: "",
+        email: "",
         userName: "",
         password: "",
+        password1: "",
         uuid: "",
         captcha: "",
         entryName: "",
+        code: "",
       },
-      dataRule: {
+      dataRule1: {
+        mobile: [
+          { required: true, message: "手机号不能为空", trigger: "blur" },
+        ],
+        email: [{ required: true, message: "邮箱不能为空", trigger: "blur" }],
+        code: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
         userName: [
           { required: true, message: "帐号不能为空", trigger: "blur" },
         ],
         password: [
           { required: true, message: "密码不能为空", trigger: "blur" },
         ],
+        password1: [
+          { required: true, message: "密码不能为空", trigger: "blur" },
+        ],
         captcha: [
           { required: true, message: "验证码不能为空", trigger: "blur" },
         ],
@@ -90,11 +164,94 @@ export default {
       captchaPath: "",
     };
   },
+  watch: {
+    isLogin(newval) {
+      this.$refs.dataForm.resetFields();
+      if (newval) {
+        this.getCaptcha();
+      }
+    },
+  },
   created() {
     this.entryName = entryName;
     this.getCaptcha();
   },
   methods: {
+    sendMsg() {
+      if (this.msgTime < 60) {
+        return;
+      }
+      this.$http({
+        // url: this.$http.adornUrl('app/Login/sendMsg/'+this.tableData.mobile+'/regis'),
+        url: this.$http.adornUrl(
+          "app/Login/sendMsg/" + this.dataForm.mobile + "/regis"
+        ),
+        method: "get",
+      }).then((res) => {
+        console.log(res);
+        if (res.data.code == 0) {
+          this.$message({
+            message: "发送成功",
+            type: "success",
+          });
+          this.msgTime--;
+          this.timer = setInterval(() => {
+            this.msgTime--;
+            if (this.msgTime == 0) {
+              clearInterval(this.timer);
+              this.msgTime = 60;
+            }
+          }, 1000);
+        } else {
+          this.$message({
+            message: "发送失败",
+            type: "error",
+          });
+        }
+      });
+    },
+    reset() {
+      this.dataForm.code = "";
+      this.timer = null;
+      cleartimeout(this.timer);
+      this.msgTime = 60;
+    },
+    register() {
+      if (this.dataForm.password != this.dataForm.password1) {
+        this.$notify({
+          title: "提示",
+          duration: 1800,
+          message: "两次密码不一致",
+          type: "warning",
+        });
+        this.$message.error("两次密码不一致");
+        return;
+      }
+      this.$refs["dataForm"].validate((valid) => {
+        if (valid) {
+          this.$http({
+            url: this.$http.adornUrl("sys/registered?msg=" + this.dataForm.code),
+            method: "post",
+            data: this.$http.adornData({
+              mobile: this.dataForm.mobile,
+              username: this.dataForm.userName,
+              password: this.dataForm.password,
+              email: this.dataForm.email,
+            }),
+          }).then(({ data }) => {
+            if (data && data.code === 0) {
+              this.$message.success("注册成功，请登录");
+              this.isLogin=true
+              // this.$cookie.set("token", data.token);
+              // this.$router.replace({ name: "home" });
+            } else {
+              // this.getCaptcha();
+              this.$message.error(data.msg);
+            }
+          });
+        }
+      });
+    },
     // 提交表单
     dataFormSubmit() {
       this.$refs["dataForm"].validate((valid) => {
@@ -103,7 +260,7 @@ export default {
             url: this.$http.adornUrl("sys/login"),
             method: "post",
             data: this.$http.adornData({
-              username: this.dataForm.userName,
+              userName: this.dataForm.userName,
               password: this.dataForm.password,
               uuid: this.dataForm.uuid,
               captcha: this.dataForm.captcha,
@@ -193,8 +350,9 @@ export default {
     position: absolute;
     top: 50%;
     left: 50%;
-    margin-left: -200px;
+    transform: translateX(-50%) translateY(-50%);
-    margin-top: -150px;
+    // margin-left: -200px;
+    // margin-top: -150px;
     padding: 20px 30px;
     width: 400px;
     border-radius: 8px;

src/views/finance/storeincome.vue

@@ -218,7 +218,8 @@
                 type="primary"
                 size="medium"
                 @click="sendMsg()"
-                > {{ msgTime >= 60 ? "发送验证码" : msgTime }}</el-button
+              >
+                {{ msgTime >= 60 ? "发送验证码" : msgTime }}</el-button
               >
             </el-form-item>
             <el-form-item label="验证码" :label-width="formLabelWidth" required>
@@ -939,14 +940,14 @@ export default {
   methods: {
     reset() {
       this.msg = "";
-	  this.timer = null;
+      this.timer = null;
-	  cleartimeout(this.timer);
+      cleartimeout(this.timer);
-	  this.msgTime = 60;
+      this.msgTime = 60;
     },
     sendMsg() {
-		if(this.msgTime<60){
+      if (this.msgTime < 60) {
-			return
+        return;
-		}
+      }
       this.$http({
         // url: this.$http.adornUrl('app/Login/sendMsg/'+this.tableData.mobile+'/regis'),
         url: this.$http.adornUrl(
@@ -960,7 +961,7 @@ export default {
             message: "发送成功",
             type: "success",
           });
-		  this.msgTime--;
+          this.msgTime--;
           this.timer = setInterval(() => {
             this.msgTime--;
             if (this.msgTime == 0) {