查看缴费单，缴费确认，案件受理

src/views/register.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="register">
+      <div class="leftIcon">
+        <div class="Icon"></div>
+        <div>智慧调解系统</div>
+      </div>
     <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
       <h3 class="title">智慧调解系统注册</h3>
       <el-form-item prop="userName">
@@ -46,9 +50,18 @@
         </el-input>
       </el-form-item>
       <el-form-item prop="email">
-        <el-input v-model="registerForm.email" type="text" auto-complete="off" placeholder="邮箱">
+        <el-input v-model="registerForm.email" type="text" auto-complete="off" placeholder="邮箱" style="width:63%;">
           <svg-icon slot="prefix" icon-class="email" class="el-input__icon input-icon" />
         </el-input>
+        <div class="register-code">
+          <el-button type="primary" :disabled="emailDisabled"  @click="getEmailNumber(registerForm.email)">{{ emailText
+          }}</el-button>
+        </div>
+      </el-form-item>
+      <el-form-item prop="emailVerifyCode">
+        <el-input v-model="registerForm.emailVerifyCode" type="text" auto-complete="off" placeholder="邮箱验证码">
+          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+        </el-input>
       </el-form-item>
       <el-form-item prop="name">
         <el-input v-model="registerForm.name" type="text" auto-complete="off" placeholder="用户名">
@@ -105,7 +118,7 @@
 </template>
 
 <script>
-import { getCodeImg, register, sendCode, wxregister,verifyUserName,getIdType } from "@/api/login";
+import { getCodeImg, register, sendCode, wxregister,verifyUserName,getIdType,sendEmailCode } from "@/api/login";
 import { listRoleNotoken } from "@/api/system/role.js"
 export default {
   name: "Register",
@@ -119,7 +132,9 @@ export default {
     };
     return {
       codeText: "发送验证码",
+      emailText:"发送验证码",
       codeDisabled: false,
+      emailDisabled:false,
       codeUrl: "",
       registerForm: {
         userName: "",
@@ -192,7 +207,10 @@ export default {
           },
         ],
         verifyCode: [
-          { required: true, trigger: "blur", message: "请输入验证码" },
+          { required: true, trigger: "blur", message: "请输入短信验证码" },
+        ],
+        emailVerifyCode:[
+        { required: true, trigger: "blur", message: "请输入邮箱验证码" },
         ],
         idType: [
           { required: true, trigger: "blur", message: "请选择证件类型" },
@@ -295,6 +313,28 @@ export default {
 
       })
     },
+    // 获取邮箱验证码
+    getEmailNumber(emailValue){
+      sendEmailCode({email:emailValue}).then(res=>{
+        if(res.code != 200){
+          this.$modal.msgError(res.msg);
+          return
+        }else{
+          this.$modal.msgSuccess('发送成功');
+          let time = 60;
+          let timer = setInterval(() => {
+            time--;
+            this.emailDisabled = true;
+            this.emailText = time + 's重试'
+            if (time == 0) {
+              clearInterval(timer)
+              this.emailText = '发送验证码'
+              this.emailDisabled = false;
+            }
+          }, 1000)
+        }
+      })
+    }
   }
 };
 </script>
@@ -304,9 +344,25 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  //height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
+  // height: 100%;
+  // background-image: url("../assets/images/login-background.jpg");
+  background-image: url("../assets/images/login.svg");
   background-size: cover;
+  .leftIcon {
+      position: relative;
+      width: 200px;
+      height: 155px;
+      top:-300px;
+      left: -300px;
+
+      .Icon {
+        width: 100px;
+        height: 105px;
+        background-image: url("../assets/images/logos.png");
+        background-size: cover;
+      }
+    }
+  
 }
 
 .title {