From 06e67e146023a57e977e7dac56767300a2e9241e Mon Sep 17 00:00:00 2001
From: jjLv <1981429112@qq.com>
Date: Tue, 12 Nov 2024 11:55:57 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E6=B3=A8=E5=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/configure.js  |    6 +-
 src/views/login1.vue    | 1167 +++++++++++++++++++++++----------------
 src/views/register1.vue |  774 +++++++++++++++-----------
 3 files changed, 1162 insertions(+), 785 deletions(-)

diff --git a/src/utils/configure.js b/src/utils/configure.js
index 6e26ee8a..e6274c37 100644
--- a/src/utils/configure.js
+++ b/src/utils/configure.js
@@ -1,8 +1,8 @@
 // SM 配置
 export const SM_CONFIG = {
   SALT: '2cc0c5f9f1749f1632efa9f63e902323', // SM3 盐值（16 字节）
-  SM4_KEY:"78d1295afa99449b99d6f83820e6965c",     // SM4 对称加密密钥
-  SM4_SALT:"f555adf6c01d0ab0761e626a2dae34a2",
+  SM4_KEY: "78d1295afa99449b99d6f83820e6965c",     // SM4 对称加密密钥
+  SM4_SALT: "f555adf6c01d0ab0761e626a2dae34a2",
   SM2_PUBLIC_KEY: 'your-public-key',   // SM2 公钥
   SM2_PRIVATE_KEY: 'your-private-key'  // SM2 私钥
 }
@@ -14,7 +14,7 @@ export const AES_CONFIG = {
 
 export function generateUUID() {
   // 使用当前时间戳和随机数生成一个 UUID
-  return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+  return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
     const r = Math.random() * 16 | 0; // 生成随机数
     const v = c === 'x' ? r : (r & 0x3 | 0x8); // 根据 UUID 规范生成相应的值
     return v.toString(16); // 转换为十六进制
diff --git a/src/views/login1.vue b/src/views/login1.vue
index bed5d74e..8e91424e 100644
--- a/src/views/login1.vue
+++ b/src/views/login1.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="container">
-    <div class="bg-cont">
-        <div class="bg">
-        <img src="@/assets/images/dp-bg.png">
+    <div class="container">
+        <div class="bg-cont">
+            <div class="bg">
+                <img src="@/assets/images/dp-bg.png" />
+            </div>
         </div>
-    </div> 
-    <!-- <div class="lef-cont">
+        <!-- <div class="lef-cont">
       <div class="circle1"></div>
       <div class="circle2"></div>
       <div class="tit">
@@ -20,136 +20,228 @@
         <img src="@/assets/images/warn-bg.png">
       </div>
     </div> -->
-    <div class="login">
-      <h3 class="title">输变电工程施工现场安全风险预警系统</h3>
-      <div class="login-form">
-        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" >
-        
-          <template v-if="loginMethod === 'password'">
-            <el-form-item prop="username">
-              <el-input
-                v-model="loginForm.username"
-                type="text"
-                auto-complete="off"
-                :placeholder="`用户名${config.loginConfig.phonePassword ? '/手机号' : ''}${config.loginConfig.emailPassword ? '/邮箱' : ''}`"
-              >
-                <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
-              </el-input>
-            </el-form-item>
-            <el-form-item prop="password">
-              <el-input
-                v-model="loginForm.password"
-                type="password"
-                auto-complete="off"
-                placeholder="密码"
-                @keyup.enter.native="handleLogin"
-              >
-                <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
-              </el-input>
-            </el-form-item>
-            <el-form-item prop="code" v-if="captchaEnabled">
-              <el-input
-                v-model="loginForm.code"
-                auto-complete="off"
-                placeholder="验证码"
-                style="width: 63%"
-                @keyup.enter.native="handleLogin"
-              >
-                <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
-              </el-input>
-              <div class="login-code">
-                <img :src="codeUrl" @click="getCode" class="login-code-img"/>
-              </div>
-            </el-form-item>
-            <el-form-item v-show="isAdmin" prop="verificationCode">
-              <el-input v-model="loginForm.verificationCode" placeholder="请输入验证码">
-                <template slot="append">
-                  <el-button
-                    type="primary"
-                    @click="sendAdminCode"
-                    :disabled="isSendingCode || captchaEnabled?!loginForm.code:false"
-                    class="send-code-button"
-                  >
-                    {{ countdown === 0 ? '获取验证码' : `${countdown}s` }}
-                  </el-button>
-                </template>
-                <svg-icon slot="prefix" icon-class="message" class="el-input__icon input-icon"/>
-              </el-input>
-            </el-form-item>
-          </template>
-          <template v-else>
-            <el-form-item prop="mobile">
-              <el-input
-                v-model="loginForm.mobile"
-                type="text"
-                auto-complete="off"
-                :placeholder="`${config.loginConfig.phoneCode ? '手机号' : '/'}${config.loginConfig.emailCode ? '邮箱' : ''}`"
-              >
-                <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
-              </el-input>
-            </el-form-item>
-            <el-form-item prop="code" v-if="captchaEnabled">
-              <el-input
-                v-model="loginForm.code"
-                auto-complete="off"
-                placeholder="验证码"
-                style="width: 63%"
-                @keyup.enter.native="handleLogin"
-              >
-                <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
-              </el-input>
-              <div class="login-code">
-                <img :src="codeUrl" @click="getCode" class="login-code-img"/>
-              </div>
-            </el-form-item>
-            <el-form-item prop="verificationCode">
-              <el-input v-model="loginForm.verificationCode" placeholder="请输入验证码">
-                <template slot="append">
-                  <el-button
-                    type="primary"
-                    @click="sendCode"
-                    :disabled="isSendingCode || captchaEnabled?!loginForm.code:false"
-                    class="send-code-button"
-                  >
-                    {{ countdown === 0 ? '获取验证码' : `${countdown}s` }}
-                  </el-button>
-                </template>
-                <svg-icon slot="prefix" icon-class="message" class="el-input__icon input-icon"/>
-              </el-input>
-            </el-form-item>
-          </template>
-          <div class="login-form-center">
-            <el-link v-if="config.loginConfig.emailCode ||config.loginConfig.phoneCode " @click="toggleLoginMethod">
-              {{ loginMethod === 'password' ? '短信登录' : '密码登录' }}
-            </el-link>
-            <router-link v-if="config.registersConfig.emailRegisters || config.registersConfig.phoneRegisters" to="/register">
-              <el-link>注册账号</el-link>
-            </router-link>
-            <!-- <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox> -->
-          </div>
-          <el-form-item style="width: 100%;">
-            <el-button v-if="!isAdmin"
-                       :loading="loading"
-                       size="medium"
-                       type="primary"
-                       style="width: 100%;"
-                       @click="loginMethod === 'password' ?IsAdmin():handleLogin()"
-            >
-              <span v-if="!loading">登 录</span>
-              <span v-else>登 录 中...</span>
-            </el-button>
-            <el-button v-if="isAdmin"
-                       :loading="loading"
-                       size="medium"
-                       type="primary"
-                       style="width: 100%;"
-                       @click="handleLogin()"
-            >
-              <span v-if="!loading">登 录</span>
-              <span v-else>登 录 中...</span>
-            </el-button>
-          </el-form-item>
-          <el-form-item>
+        <div class="login">
+            <h3 class="title">输变电工程施工现场安全风险预警系统</h3>
+            <div class="login-form">
+                <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
+                    <!--  -->
+                    <template v-if="loginMethod === 'password'">
+                        <el-form-item prop="username">
+                            <el-input
+                                v-model="loginForm.username"
+                                type="text"
+                                auto-complete="off"
+                                :placeholder="`用户名${
+                                    config.loginConfig.phonePassword
+                                        ? '/手机号'
+                                        : ''
+                                }${
+                                    config.loginConfig.emailPassword
+                                        ? '/邮箱'
+                                        : ''
+                                }`"
+                            >
+                                <svg-icon
+                                    slot="prefix"
+                                    icon-class="user"
+                                    class="el-input__icon input-icon"
+                                />
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item prop="password">
+                            <el-input
+                                v-model="loginForm.password"
+                                type="password"
+                                placeholder="密码"
+                                auto-complete="off"
+                                @keyup.enter.native="handleLogin"
+                            >
+                                <svg-icon
+                                    slot="prefix"
+                                    icon-class="password"
+                                    class="el-input__icon input-icon"
+                                />
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item prop="code" v-if="captchaEnabled">
+                            <el-input
+                                v-model="loginForm.code"
+                                auto-complete="off"
+                                placeholder="验证码"
+                                style="width: 63%"
+                                @keyup.enter.native="handleLogin"
+                            >
+                                <svg-icon
+                                    slot="prefix"
+                                    icon-class="validCode"
+                                    class="el-input__icon input-icon"
+                                />
+                            </el-input>
+                            <div class="login-code">
+                                <img
+                                    :src="codeUrl"
+                                    @click="getCode"
+                                    class="login-code-img"
+                                />
+                            </div>
+                        </el-form-item>
+                        <el-form-item v-show="isAdmin" prop="verificationCode">
+                            <el-input
+                                v-model="loginForm.verificationCode"
+                                placeholder="请输入验证码"
+                            >
+                                <template slot="append">
+                                    <el-button
+                                        type="primary"
+                                        @click="sendAdminCode"
+                                        :disabled="
+                                            isSendingCode || captchaEnabled
+                                                ? !loginForm.code
+                                                : false
+                                        "
+                                        class="send-code-button"
+                                    >
+                                        {{
+                                            countdown === 0
+                                                ? '获取验证码'
+                                                : `${countdown}s`
+                                        }}
+                                    </el-button>
+                                </template>
+                                <svg-icon
+                                    slot="prefix"
+                                    icon-class="message"
+                                    class="el-input__icon input-icon"
+                                />
+                            </el-input>
+                        </el-form-item>
+                    </template>
+                    <template v-else>
+                        <el-form-item prop="mobile">
+                            <el-input
+                                v-model="loginForm.mobile"
+                                type="text"
+                                auto-complete="off"
+                                :placeholder="`${
+                                    config.loginConfig.phoneCode
+                                        ? '手机号'
+                                        : '/'
+                                }${config.loginConfig.emailCode ? '邮箱' : ''}`"
+                            >
+                                <svg-icon
+                                    slot="prefix"
+                                    icon-class="user"
+                                    class="el-input__icon input-icon"
+                                />
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item prop="code" v-if="captchaEnabled">
+                            <el-input
+                                v-model="loginForm.code"
+                                auto-complete="off"
+                                placeholder="验证码"
+                                style="width: 63%"
+                                @keyup.enter.native="handleLogin"
+                            >
+                                <svg-icon
+                                    slot="prefix"
+                                    icon-class="validCode"
+                                    class="el-input__icon input-icon"
+                                />
+                            </el-input>
+                            <div class="login-code">
+                                <img
+                                    :src="codeUrl"
+                                    @click="getCode"
+                                    class="login-code-img"
+                                />
+                            </div>
+                        </el-form-item>
+                        <el-form-item prop="verificationCode">
+                            <el-input
+                                v-model="loginForm.verificationCode"
+                                placeholder="请输入验证码"
+                            >
+                                <template slot="append">
+                                    <el-button
+                                        type="primary"
+                                        @click="sendCode"
+                                        :disabled="
+                                            isSendingCode || captchaEnabled
+                                                ? !loginForm.code
+                                                : false
+                                        "
+                                        class="send-code-button"
+                                    >
+                                        {{
+                                            countdown === 0
+                                                ? '获取验证码'
+                                                : `${countdown}s`
+                                        }}
+                                    </el-button>
+                                </template>
+                                <svg-icon
+                                    slot="prefix"
+                                    icon-class="message"
+                                    class="el-input__icon input-icon"
+                                />
+                            </el-input>
+                        </el-form-item>
+                    </template>
+                    <div class="login-form-center">
+                        <el-link
+                            v-if="
+                                config.loginConfig.emailCode ||
+                                config.loginConfig.phoneCode
+                            "
+                            @click="toggleLoginMethod"
+                        >
+                            {{
+                                loginMethod === 'password'
+                                    ? '短信登录'
+                                    : '密码登录'
+                            }}
+                        </el-link>
+                        <router-link
+                            v-if="
+                                config.registersConfig.emailRegisters ||
+                                config.registersConfig.phoneRegisters
+                            "
+                            to="/register"
+                        >
+                            <el-link>注册账号</el-link>
+                        </router-link>
+                        <!-- <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox> -->
+                    </div>
+                    <el-form-item style="width: 100%">
+                        <el-button
+                            v-if="!isAdmin"
+                            :loading="loading"
+                            size="medium"
+                            type="primary"
+                            style="width: 100%"
+                            @click="
+                                loginMethod === 'password'
+                                    ? IsAdmin()
+                                    : handleLogin()
+                            "
+                        >
+                            <span v-if="!loading">登 录</span>
+                            <span v-else>登 录 中...</span>
+                        </el-button>
+                        <el-button
+                            v-if="isAdmin"
+                            :loading="loading"
+                            size="medium"
+                            type="primary"
+                            style="width: 100%"
+                            @click="handleLogin()"
+                        >
+                            <span v-if="!loading">登 录</span>
+                            <span v-else>登 录 中...</span>
+                        </el-button>
+                    </el-form-item>
+                    <!--          <el-form-item>
             <div class="login-divider">第三方登录</div>
             <div class="login-icons">
               <div class="login-icon">
@@ -162,418 +254,549 @@
                 <img :src="qq" alt="QQ">
               </div>
             </div>
-          </el-form-item>
-        </el-form>
-      </div>
-    </div>
+          </el-form-item>-->
+                </el-form>
+            </div>
+        </div>
 
-    <div class="bottom-info">
-        版权所有权归国网电力工程技术研究院有限公司
+        <div class="bottom-info">
+            版权所有权归国网电力工程技术研究院有限公司
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 import { getCodeImg } from '@/api/login'
 import Cookies from 'js-cookie'
-import { decrypt, encrypt } from '@/utils/jsencrypt'
+import { encrypt, decrypt } from '@/utils/jsencrypt'
 import dingding from '@/assets/images/dingding.svg'
 import wx from '@/assets/images/wx.svg'
 import qq from '@/assets/images/QQ.svg'
 
 export default {
-  name: 'Login',
-  data() {
-    return {
-      dingding: dingding,
-      wx: wx,
-      qq: qq,
-      codeUrl: '',
-      isAdmin: false,
-      loginForm: {
-        username: '',
-        password: '',
-        rememberMe: false,
-        code: '',
-        mobile: '',
-        verificationCode: '',
-        uuid: '',
-        loginType: '',
-        phoneUuid: '',
-        mobileCodeType: 'LOGIN'
-      },
-      passwordLoginRules: {
-        username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
-        password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
-        code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
-      },
-      mobileLoginRules: {
-        mobile: [{ required: true, trigger: 'blur', message: '请输入您的手机号' }],
-        verificationCode: [{ required: true, trigger: 'blur', message: '请输入验证码' }]
-      },
-      loading: false,
-      captchaEnabled: true,
-      redirect: undefined,
-      isSendingCode: false,
-      countdown: 0,
-      loginMethod: 'password', // 'password' or 'mobile'
-      supportsPhoneLogin: false,
-      supportsEmailLogin: false
-    }
-  },
-  computed: {
-    config() {
-      return JSON.parse(localStorage.getItem('systemConfig')) || {loginConfig:{
-        phonePassword: true,
-          emailPassword: true,
-          phoneCode: false,
-          emailCode: false
-      },registersConfig: {
-          phoneRegisters: true,
-          emailRegisters: true
-        }}; // 获取 JSON 对象
-    },
-    loginRules() {
-      return this.loginMethod === 'password' ? this.passwordLoginRules : this.mobileLoginRules
-    }
-  },
-  watch: {
-    $route: {
-      handler(route) {
-        this.redirect = route.query && route.query.redirect
-      },
-      immediate: true
-    }
-  },
-  created() {
-    this.getCode()
-    this.getCookie()
-  },
-  methods: {
-    getCode() {
-      getCodeImg().then(res => {
-        this.captchaEnabled = res.captchaEnabled !== undefined ? res.captchaEnabled : true
-        if (this.captchaEnabled) {
-          this.codeUrl = 'data:image/gif;base64,' + res.img
-          this.loginForm.uuid = res.uuid
+    name: 'Login',
+    data() {
+        return {
+            dingding: dingding,
+            wx: wx,
+            qq: qq,
+            codeUrl: '',
+            isAdmin: false,
+            loginForm: {
+                username: '',
+                password: '',
+                rememberMe: false,
+                code: '',
+                mobile: '',
+                verificationCode: '',
+                uuid: '',
+                loginType: '',
+                phoneUuid: '',
+                mobileCodeType: 'LOGIN',
+            },
+            passwordLoginRules: {
+                username: [
+                    {
+                        required: true,
+                        trigger: 'blur',
+                        message: '请输入您的账号',
+                    },
+                ],
+                password: [
+                    {
+                        required: true,
+                        trigger: 'blur',
+                        message: '请输入您的密码',
+                    },
+                ],
+                code: [
+                    {
+                        required: true,
+                        trigger: 'change',
+                        message: '请输入验证码',
+                    },
+                ],
+            },
+            mobileLoginRules: {
+                mobile: [
+                    {
+                        required: true,
+                        trigger: 'blur',
+                        message: '请输入您的手机号',
+                    },
+                ],
+                verificationCode: [
+                    {
+                        required: true,
+                        trigger: 'blur',
+                        message: '请输入验证码',
+                    },
+                ],
+            },
+            loading: false,
+            captchaEnabled: true,
+            redirect: undefined,
+            isSendingCode: false,
+            countdown: 0,
+            loginMethod: 'password', // 'password' or 'mobile'
+            supportsPhoneLogin: false,
+            supportsEmailLogin: false,
         }
-      })
     },
-    getCookie() {
-      const username = Cookies.get('username')
-      const password = Cookies.get('password')
-      const rememberMe = Cookies.get('rememberMe')
-      this.loginForm.username = username || ''
-      this.loginForm.password = password ? decrypt(password) : ''
-      this.loginForm.rememberMe = rememberMe === 'true'
-    },
-    handleLogin() {
-      this.$refs.loginForm.validate(valid => {
-        if (valid) {
-          this.loading = true
-          if (this.loginForm.rememberMe) {
-            Cookies.set('username', this.loginForm.username, { expires: 30 })
-            Cookies.set('password', encrypt(this.loginForm.password), { expires: 30 })
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 })
-          } else {
-            Cookies.remove('username')
-            Cookies.remove('password')
-            Cookies.remove('rememberMe')
-          }
-          this.loginForm.loginMethod = this.loginMethod
-          this.$store.dispatch('Login', this.loginForm)
-            .then(res => {
-              console.log(res)
-              if (res.code===200){
-                if (res.isLogin){
-                  this.$modal.confirm('账号已在其他地方登录是否继续登录！！！！').then(function() {
-                    return this.$router.push({ path: this.redirect || '/' });
-                  }).then(() => {
-                    this.loading = false
-                  }).catch(() => {
-                    this.loading = false
-                  })
-                }else {
-                  this.$router.push({ path: this.redirect || '/' });
+    computed: {
+        config() {
+            return (
+                JSON.parse(localStorage.getItem('systemConfig')) || {
+                    loginConfig: {
+                        phonePassword: true,
+                        emailPassword: true,
+                        phoneCode: false,
+                        emailCode: false,
+                    },
+                    registersConfig: {
+                        phoneRegisters: true,
+                        emailRegisters: true,
+                    },
                 }
-              }
-            })
-            .catch(() => {
-              this.loading = false
-              if (this.captchaEnabled) this.getCode()
-            })
-        }
-      })
+            ) // 获取 JSON 对象
+        },
+        loginRules() {
+            return this.loginMethod === 'password'
+                ? this.passwordLoginRules
+                : this.mobileLoginRules
+        },
     },
-    IsAdmin() {
-      this.loginForm.loginMethod = this.loginMethod
-      this.$store.dispatch('IsAdmin', this.loginForm).then(res => {
-        if (res.data) {
-          this.isAdmin = res.data
-          this.$message.success('检测到您是超级管理账号,需进行手机检验')
-        } else {
-          this.handleLogin()
-        }
-      })
+    watch: {
+        $route: {
+            handler(route) {
+                this.redirect = route.query && route.query.redirect
+            },
+            immediate: true,
+        },
     },
-    isLogin() {
-      this.$refs.loginForm.validate(valid => {
-        if (valid) {
-          this.loading = true
-          let that = this
-          this.loginForm.loginMethod = this.loginMethod
-          this.$store.dispatch('IsLogin', this.loginForm)
-            .then(res => {
-              if (res.data) {
-                this.$modal.confirm('账号已在其他地方登录是否继续登录！！！！').then(function() {
-                  return that.handleLogin()
-                }).then(() => {
-                  this.loading = false
-                }).catch(() => {
-                  this.loading = false
+    created() {
+        this.getCode()
+        this.getCookie()
+    },
+    methods: {
+        getCode() {
+            getCodeImg().then((res) => {
+                this.captchaEnabled =
+                    res.captchaEnabled !== undefined ? res.captchaEnabled : true
+                console.log(this.captchaEnabled)
+                if (this.captchaEnabled) {
+                    this.codeUrl = 'data:image/gif;base64,' + res.img
+                    this.loginForm.uuid = res.uuid
+                }
+            })
+        },
+        getCookie() {
+            const username = Cookies.get('username')
+            const password = Cookies.get('password')
+            const rememberMe = Cookies.get('rememberMe')
+            this.loginForm.username = username || ''
+            this.loginForm.password = password ? decrypt(password) : ''
+            this.loginForm.rememberMe = rememberMe === 'true'
+        },
+        handleLogin() {
+            this.$refs.loginForm.validate((valid) => {
+                if (valid) {
+                    this.loading = true
+                    if (this.loginForm.rememberMe) {
+                        Cookies.set('username', this.loginForm.username, {
+                            expires: 30,
+                        })
+                        Cookies.set(
+                            'password',
+                            encrypt(this.loginForm.password),
+                            { expires: 30 },
+                        )
+                        Cookies.set('rememberMe', this.loginForm.rememberMe, {
+                            expires: 30,
+                        })
+                    } else {
+                        Cookies.remove('username')
+                        Cookies.remove('password')
+                        Cookies.remove('rememberMe')
+                    }
+                    this.loginForm.loginMethod = this.loginMethod
+                    this.$store
+                        .dispatch('Login', this.loginForm)
+                        .then((res) => {
+                            console.log(res)
+                            if (res.code === 200) {
+                                if (res.isLogin) {
+                                    this.$modal
+                                        .confirm(
+                                            '账号已在其他地方登录是否继续登录！！！！',
+                                        )
+                                        .then(function () {
+                                            return this.$router.push({
+                                                path: this.redirect || '/',
+                                            })
+                                        })
+                                        .then(() => {
+                                            this.loading = false
+                                        })
+                                        .catch(() => {
+                                            this.loading = false
+                                        })
+                                } else {
+                                    this.$router.push({
+                                        path: this.redirect || '/',
+                                    })
+                                }
+                            }
+                        })
+                        .catch(() => {
+                            this.loading = false
+                            if (this.captchaEnabled) this.getCode()
+                        })
+                }
+            })
+        },
+        IsAdmin() {
+            this.loginForm.loginMethod = this.loginMethod
+            this.$store.dispatch('IsAdmin', this.loginForm).then((res) => {
+                if (res.data) {
+                    this.isAdmin = res.data
+                    this.$message.success(
+                        '检测到您是超级管理账号,需进行手机检验',
+                    )
+                } else {
+                    this.handleLogin()
+                }
+            })
+        },
+        isLogin() {
+            this.$refs.loginForm.validate((valid) => {
+                if (valid) {
+                    this.loading = true
+                    let that = this
+                    this.loginForm.loginMethod = this.loginMethod
+                    this.$store
+                        .dispatch('IsLogin', this.loginForm)
+                        .then((res) => {
+                            if (res.data) {
+                                this.$modal
+                                    .confirm(
+                                        '账号已在其他地方登录是否继续登录！！！！',
+                                    )
+                                    .then(function () {
+                                        return that.handleLogin()
+                                    })
+                                    .then(() => {
+                                        this.loading = false
+                                    })
+                                    .catch(() => {
+                                        this.loading = false
+                                    })
+                            } else {
+                                that.handleLogin()
+                            }
+                        })
+                        .catch(() => {
+                            this.loading = false
+                            if (this.captchaEnabled) this.getCode()
+                        })
+                }
+            })
+        },
+        sendAdminCode() {
+            this.loginForm.mobile = this.loginForm.username
+            this.$store
+                .dispatch('GetPhoneCode', this.loginForm)
+                .then((res) => {
+                    if (res.code === 200) {
+                        this.loginForm.phoneUuid = res.data
+                        this.$message.success('验证码发送成功')
+                        this.isSendingCode = true
+                        this.countdown = 60
+                        const timer = setInterval(() => {
+                            this.countdown -= 1
+                            if (this.countdown <= 0) {
+                                clearInterval(timer)
+                                this.isSendingCode = false
+                            }
+                        }, 1000)
+                    }
                 })
-              } else {
-                that.handleLogin()
-              }
-            })
-            .catch(() => {
-              this.loading = false
-              if (this.captchaEnabled) this.getCode()
-            })
-        }
-      })
-    },
-    sendAdminCode() {
-      this.loginForm.mobile = this.loginForm.username
-      this.$store.dispatch('GetPhoneCode', this.loginForm)
-        .then(res => {
-          if (res.code === 200) {
-            this.loginForm.phoneUuid = res.data
-            this.$message.success('验证码发送成功')
-            this.isSendingCode = true
-            this.countdown = 60
-            const timer = setInterval(() => {
-              this.countdown -= 1
-              if (this.countdown <= 0) {
-                clearInterval(timer)
-                this.isSendingCode = false
-              }
-            }, 1000)
-          }
-        })
-        .catch(() => {
-          this.loading = false
-          // 如果启用了验证码，则重新获取验证码
-          if (this.captchaEnabled) {
-            this.getCode()
-          }
-          // 其他失败处理逻辑
-          this.isSendingCode = false
-          this.countdown = 0
-        })
-    },
-    sendCode() {
-      if (this.captchaEnabled ? !this.loginForm.code : false) {
-        this.$message.error('请先填写验证码')
-        return
-      }
-      if (!this.loginForm.mobile) {
-        this.$message.error('请先填写'+this.config.loginConfig.phoneCode ? '手机号' : '/' + this.config.loginConfig.emailCode ? '邮箱' : '')
-        return
-      }
-      this.$store.dispatch('GetPhoneCode', this.loginForm)
-        .then(() => {
-          this.isSendingCode = true
-          this.countdown = 60
-          const timer = setInterval(() => {
-            this.countdown -= 1
-            if (this.countdown <= 0) {
-              clearInterval(timer)
-              this.isSendingCode = false
+                .catch(() => {
+                    this.loading = false
+                    // 如果启用了验证码，则重新获取验证码
+                    if (this.captchaEnabled) {
+                        this.getCode()
+                    }
+                    // 其他失败处理逻辑
+                    this.isSendingCode = false
+                    this.countdown = 0
+                })
+        },
+        sendCode() {
+            if (this.captchaEnabled ? !this.loginForm.code : false) {
+                this.$message.error('请先填写验证码')
+                return
             }
-          }, 1000)
-        })
-        .catch(() => {
-          this.loading = false
-          // 如果启用了验证码，则重新获取验证码
-          if (this.captchaEnabled) {
+            if (!this.loginForm.mobile) {
+                this.$message.error(
+                    '请先填写' + this.config.loginConfig.phoneCode
+                        ? '手机号'
+                        : '/' + this.config.loginConfig.emailCode
+                        ? '邮箱'
+                        : '',
+                )
+                return
+            }
+            this.$store
+                .dispatch('GetPhoneCode', this.loginForm)
+                .then(() => {
+                    this.isSendingCode = true
+                    this.countdown = 60
+                    const timer = setInterval(() => {
+                        this.countdown -= 1
+                        if (this.countdown <= 0) {
+                            clearInterval(timer)
+                            this.isSendingCode = false
+                        }
+                    }, 1000)
+                })
+                .catch(() => {
+                    this.loading = false
+                    // 如果启用了验证码，则重新获取验证码
+                    if (this.captchaEnabled) {
+                        this.getCode()
+                    }
+                    // 其他失败处理逻辑
+                    this.isSendingCode = false
+                    this.countdown = 0
+                })
+        },
+        toggleLoginMethod() {
+            this.loginMethod =
+                this.loginMethod === 'password' ? 'mobile' : 'password'
+            this.loginForm.username = ''
+            this.loginForm.password = ''
+            this.loginForm.code = ''
+            this.loginForm.verificationCode = ''
+            this.loginForm.loginMethod = ''
+            this.isAdmin = false
             this.getCode()
-          }
-          // 其他失败处理逻辑
-          this.isSendingCode = false
-          this.countdown = 0
-        })
+        },
     },
-    toggleLoginMethod() {
-      this.loginMethod = this.loginMethod === 'password' ? 'mobile' : 'password'
-      this.loginForm.username = ''
-      this.loginForm.password = ''
-      this.loginForm.code = ''
-      this.loginForm.verificationCode = ''
-      this.loginForm.loginMethod = ''
-      this.isAdmin = false
-      this.getCode()
-    }
-  }
 }
 </script>
 
 <style lang="scss">
-.container {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  height: 100%;
-  background-image: url("../assets/images/bg.png");
-  background-size: cover;
+@font-face {
+    font-family: 'titleFont';
+    src: url('../assets/iconFont/titleFont.ttf');
 }
 
+.container {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    flex-wrap: wrap;
+    background-color: #eaf0fb;
+    height: 100%;
+}
+.bg-cont {
+    width: 50%;
+    height: 90%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    .bg {
+        width: 90%;
+        height: 70%;
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+.lef-cont {
+    width: 50%;
+    height: 100%;
+    background-color: #7288fa;
+    box-sizing: border-box;
+    padding: 5%;
+    position: relative;
+    .circle1 {
+        position: absolute;
+        top: 8%;
+        left: 8%;
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        background-color: #8ea0fb;
+    }
+    .circle2 {
+        position: absolute;
+        top: calc(8% + 25px);
+        left: calc(8% + 25px);
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+    .tit {
+        margin-top: 10%;
+        margin-bottom: 20px;
+        display: flex;
+        flex-direction: column;
+        font-size: 32px;
+        color: #fff;
+    }
+    .tit-en {
+        display: flex;
+        flex-direction: column;
+        font-size: 20px;
+        color: #fff;
+    }
+    .img-cont {
+        width: 300px;
+        height: 300px;
+        margin: 80px auto;
+        img {
+            width: 100%;
+            height: 95%;
+        }
+    }
+}
+
+.bottom-info {
+    width: 100%;
+    height: 10%;
+    text-align: center;
+    font-size: 18px;
+    font-weight: bold;
+    color: #1e67e7;
+}
 .login {
-  width: 42%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
+    width: 50%;
+    height: 90%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 
 .title {
-
-font-family: 'titleFont', sans-serif;
-
-margin: 0 auto 50px;
-
-text-align: center;
-
-font-size: 32px;
-
-color: #1E67E7;
-
+    font-family: 'titleFont', sans-serif;
+    margin: 0 auto 50px;
+    text-align: center;
+    font-size: 32px;
+    color: #1e67e7;
 }
 
 .login-form {
-  border-radius: 6px;
-  background: #ffffff;
-  width: 400px;
-  padding: 25px;
+    border-radius: 6px;
+    background: #ffffff;
+    width: 60%;
+    padding: 25px;
 
-  .el-input {
-    height: 38px;
+    .el-input {
+        height: 38px;
 
-    input {
-      height: 38px;
+        input {
+            height: 38px;
+        }
     }
-  }
 
-  .input-icon {
-    height: 39px;
-    width: 14px;
-    margin-left: 2px;
-  }
+    .input-icon {
+        height: 39px;
+        width: 14px;
+        margin-left: 2px;
+    }
 
-  .login-form-center {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    padding: 1%;
-    margin-bottom: 5%;
-  }
+    .login-form-center {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        padding: 1%;
+        margin-bottom: 5%;
+    }
 }
 
 .login-tip {
-  font-size: 13px;
-  text-align: center;
-  color: #bfbfbf;
+    font-size: 13px;
+    text-align: center;
+    color: #bfbfbf;
 }
 
 .login-code {
-  width: 33%;
-  float: right;
+    width: 33%;
+    float: right;
 
-  img {
-    cursor: pointer;
-    vertical-align: middle;
-  }
+    img {
+        cursor: pointer;
+        vertical-align: middle;
+    }
 }
 
 .el-login-footer {
-  height: 40px;
-  line-height: 40px;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-  color: #fff;
-  font-family: Arial;
-  font-size: 12px;
-  letter-spacing: 1px;
+    height: 40px;
+    line-height: 40px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    color: #fff;
+    font-family: Arial;
+    font-size: 12px;
+    letter-spacing: 1px;
 }
 
 .login-code-img {
-  height: 38px;
+    height: 38px;
 }
 
 .login-container {
-  text-align: center;
-  margin-top: 50px;
+    text-align: center;
+    margin-top: 50px;
 }
 
 .login-divider {
-  display: flex;
-  align-items: center;
-  text-align: center;
-  margin: 20px 0;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    margin: 20px 0;
 }
 
 .login-divider::before,
 .login-divider::after {
-  content: '';
-  flex: 1;
-  border-bottom: 1px solid #ccc;
+    content: '';
+    flex: 1;
+    border-bottom: 1px solid #ccc;
 }
 
 .login-divider:not(:empty)::before {
-  margin-right: .25em;
+    margin-right: 0.25em;
 }
 
 .login-divider:not(:empty)::after {
-  margin-left: .25em;
+    margin-left: 0.25em;
 }
 
 .login-icons {
-  display: flex;
-  justify-content: center;
-  gap: 20px;
+    display: flex;
+    justify-content: center;
+    gap: 20px;
 }
 
 .login-icon {
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
 }
 
 .login-icon img {
-  width: 50px;
-  height: 50px;
+    width: 50px;
+    height: 50px;
 }
-
-.bottom-info{
-
-width: 100%;
-
-height: 10%;
-
-text-align: center;
-
-font-size: 18px;
-
-font-weight: bold;
-
-color: #1E67E7;
-
-}
-
 </style>
diff --git a/src/views/register1.vue b/src/views/register1.vue
index 1db6ba36..d10834ec 100644
--- a/src/views/register1.vue
+++ b/src/views/register1.vue
@@ -1,116 +1,183 @@
 <template>
-  <div class="container-rg">
-    <div class="lef-cont">
-      <div class="circle1"></div>
-      <div class="circle2"></div>
-      <div class="tit">
-        <span style="padding-bottom: 15px">您好，</span>
-        <span>欢迎来到输变电工程施工现场安全风险预警系统</span>
-      </div>
-      <div class="tit-en">
-        <span style="padding-bottom: 15px">Hello!</span>
-        <span>Welcome to the Safety Construction Warning System</span>
-      </div>
-      <div class="img-cont">
-        <img src="@/assets/images/warn-bg.png">
-      </div>
+    <div class="container-rg">
+        <div class="lef-cont">
+            <div class="circle1"></div>
+            <div class="circle2"></div>
+            <div class="tit">
+                <span style="padding-bottom: 15px">您好，</span>
+                <span>欢迎来到输变电工程施工现场安全风险预警系统</span>
+            </div>
+            <div class="tit-en">
+                <span style="padding-bottom: 15px">Hello!</span>
+                <span>Welcome to the Safety Construction Warning System</span>
+            </div>
+            <div class="img-cont">
+                <img src="@/assets/images/warn-bg.png" />
+            </div>
+        </div>
+        <div class="register">
+            <el-form
+                ref="registerForm"
+                :model="registerForm"
+                :rules="registerRules"
+                class="register-form"
+            >
+                <h3 class="title">输变电工程施工现场安全风险预警系统</h3>
+
+                <el-form-item prop="nickName">
+                    <el-input
+                        v-model="registerForm.nickName"
+                        type="text"
+                        auto-complete="off"
+                        placeholder="请输入姓名"
+                    >
+                        <svg-icon
+                            slot="prefix"
+                            icon-class="user"
+                            class="el-input__icon input-icon"
+                        />
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item prop="mobile">
+                    <el-input
+                        v-model="registerForm.mobile"
+                        type="text"
+                        auto-complete="off"
+                        :placeholder="`请输入${
+                            config.registersConfig.phoneRegisters
+                                ? '手机号'
+                                : ''
+                        }${
+                            config.registersConfig.emailRegisters ? '/邮箱' : ''
+                        }`"
+                    >
+                        <svg-icon
+                            slot="prefix"
+                            icon-class="phone"
+                            class="el-input__icon input-icon"
+                        />
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item prop="password">
+                    <el-input
+                        v-model="registerForm.password"
+                        type="password"
+                        auto-complete="off"
+                        placeholder="密码"
+                        @keyup.enter.native="handleRegister"
+                        show-password
+                    >
+                        <svg-icon
+                            slot="prefix"
+                            icon-class="password"
+                            class="el-input__icon input-icon"
+                        />
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item prop="confirmPassword">
+                    <el-input
+                        v-model="registerForm.confirmPassword"
+                        type="password"
+                        placeholder="确认密码"
+                        auto-complete="off"
+                        @keyup.enter.native="handleRegister"
+                        show-password
+                    >
+                        <svg-icon
+                            slot="prefix"
+                            icon-class="password"
+                            class="el-input__icon input-icon"
+                        />
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item prop="code" v-if="captchaEnabled">
+                    <el-input
+                        v-model="registerForm.code"
+                        auto-complete="off"
+                        placeholder="验证码"
+                        style="width: 63%"
+                        @keyup.enter.native="handleRegister"
+                    >
+                        <svg-icon
+                            slot="prefix"
+                            icon-class="validCode"
+                            class="el-input__icon input-icon"
+                        />
+                    </el-input>
+                    <div class="register-code">
+                        <img
+                            :src="codeUrl"
+                            @click="getCode"
+                            class="register-code-img"
+                        />
+                    </div>
+                </el-form-item>
+
+                <el-form-item
+                    v-show="config.registersConfig.verificationCode"
+                    prop="verificationCode"
+                >
+                    <el-input
+                        v-model="registerForm.verificationCode"
+                        :readonly="!isSendingCode"
+                        placeholder="请输入验证码"
+                    >
+                        <template slot="append">
+                            <el-button
+                                type="primary"
+                                @click="sendCode"
+                                :disabled="
+                                    isSendingCode || captchaEnabled
+                                        ? !registerForm.code
+                                        : false
+                                "
+                                class="send-code-button"
+                            >
+                                {{
+                                    isSendingCode
+                                        ? `${countdown}s`
+                                        : '获取验证码'
+                                }}
+                            </el-button>
+                        </template>
+                        <svg-icon
+                            slot="prefix"
+                            icon-class="message"
+                            class="el-input__icon input-icon"
+                        />
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item style="width: 100%">
+                    <el-button
+                        :loading="loading"
+                        size="medium"
+                        type="primary"
+                        style="width: 100%"
+                        @click.native.prevent="handleRegister"
+                    >
+                        <span v-if="!loading">注 册</span>
+                        <span v-else>注 册 中...</span>
+                    </el-button>
+                    <div style="float: right">
+                        <router-link class="link-type" :to="'/login'"
+                            >使用已有账户登录</router-link
+                        >
+                    </div>
+                </el-form-item>
+            </el-form>
+            <!--  底部  -->
+            <div class="el-register-footer">
+                <span
+                    >Copyright © 2018-2024 bonus.vip All Rights Reserved.</span
+                >
+            </div>
+        </div>
     </div>
-    <div class="register">
-      <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
-        <h3 class="title">输变电工程施工现场安全风险预警系统</h3>
-
-        <el-form-item prop="nickName">
-          <el-input v-model="registerForm.nickName" type="text" auto-complete="off" placeholder="请输入姓名">
-            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
-          </el-input>
-        </el-form-item>
-
-        <el-form-item prop="mobile">
-          <el-input v-model="registerForm.mobile" type="text" auto-complete="off"
-                    :placeholder="`请输入${config.registersConfig.phoneRegisters ? '手机号' : ''}${config.registersConfig.emailRegisters ? '/邮箱' : ''}`">
-          <svg-icon slot="prefix" icon-class="phone" class="el-input__icon input-icon"/>
-          </el-input>
-        </el-form-item>
-
-        <el-form-item prop="password">
-          <el-input
-            v-model="registerForm.password"
-            type="password"
-            auto-complete="off"
-            placeholder="密码"
-            @keyup.enter.native="handleRegister"
-            show-password
-          >
-            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
-          </el-input>
-        </el-form-item>
-
-        <el-form-item prop="confirmPassword">
-          <el-input
-            v-model="registerForm.confirmPassword"
-            type="password"
-            auto-complete="off"
-            placeholder="确认密码"
-            @keyup.enter.native="handleRegister"
-            show-password
-          >
-            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
-          </el-input>
-        </el-form-item>
-
-        <el-form-item prop="code" v-if="captchaEnabled">
-          <el-input
-            v-model="registerForm.code"
-            auto-complete="off"
-            placeholder="验证码"
-            style="width: 63%"
-            @keyup.enter.native="handleRegister"
-          >
-            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
-          </el-input>
-          <div class="register-code">
-            <img :src="codeUrl" @click="getCode" class="register-code-img"/>
-          </div>
-        </el-form-item>
-
-        <el-form-item v-show="config.registersConfig.verificationCode" prop="verificationCode">
-          <el-input v-model="registerForm.verificationCode" :readonly="!isSendingCode" placeholder="请输入验证码">
-            <template slot="append">
-              <el-button
-                type="primary"
-                @click="sendCode"
-                :disabled="isSendingCode || captchaEnabled?!registerForm.code:false"
-                class="send-code-button"
-              >
-                {{ isSendingCode ? `${countdown}s` : '获取验证码' }}
-              </el-button>
-            </template>
-            <svg-icon slot="prefix" icon-class="message" class="el-input__icon input-icon"/>
-          </el-input>
-        </el-form-item>
-
-        <el-form-item style="width:100%;">
-          <el-button
-            :loading="loading"
-            size="medium"
-            type="primary"
-            style="width:100%;"
-            @click.native.prevent="handleRegister"
-          >
-            <span v-if="!loading">注 册</span>
-            <span v-else>注 册 中...</span>
-          </el-button>
-          <div style="float: right;">
-            <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
-          </div>
-        </el-form-item>
-      </el-form>
-      <!--  底部  -->
-      <div class="el-register-footer">
-        <span>Copyright © 2018-2024 bonus.vip All Rights Reserved.</span>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
@@ -119,242 +186,329 @@ import { validateNewPassword } from '@/utils/validate'
 import { decryptCBC } from '@/utils/aescbc'
 
 export default {
-  name: 'Register',
-  computed: {
-    LOGIN() {
-      return LOGIN
+    name: 'Register',
+    computed: {
+        LOGIN() {
+            return LOGIN
+        },
+        config() {
+            return (
+                JSON.parse(localStorage.getItem('systemConfig')) || {
+                    registersConfig: {
+                        phoneRegisters: true,
+                        emailRegisters: true,
+                        verificationCode: true,
+                    },
+                }
+            ) // 获取 JSON 对象
+        },
     },
-    config() {
-      return JSON.parse(localStorage.getItem('systemConfig')) || {registersConfig: {
-          phoneRegisters: true,
-          emailRegisters: true,
-          verificationCode:true
-        }}; // 获取 JSON 对象
-    },
-  },
-  data() {
-    // 验证姓名是否符合要求
-    const validateNickName = (rule, value, callback) => {
-      const regex = /^[\u4e00-\u9fa5]{2,4}$/
-      if (!value) {
-        callback(new Error('请输入姓名'))
-      } else if (!regex.test(value)) {
-        callback(new Error('名字必须是2到4个汉字'))
-      } else {
-        callback()
-      }
-    }
-
-    // 验证密码是否一致
-    const equalToPassword = (rule, value, callback) => {
-      if (this.registerForm.password !== value) {
-        callback(new Error('两次输入的密码不一致'))
-      } else {
-        callback()
-      }
-    }
-
-    return {
-      codeUrl: '',
-      isSendingCode: false,
-      countdown: 0,
-      registerForm: {
-        username: '',
-        password: '',
-        confirmPassword: '',
-        verificationCode: '',
-        mobile: '',
-        nickName: '',
-        code: '',
-        uuid: '',
-        phoneUuid: '',
-        mobileCodeType: 'REGISTER'
-      },
-      registerRules: {
-        nickName: [
-          { required: true, trigger: 'blur', validator: validateNickName }
-        ],
-        mobile: [
-          { required: true, message: '请输入手机号/邮箱', trigger: 'blur' },
-          { validator: this.validateContact, trigger: 'blur' }
-        ],
-        password: [
-          { required: true, trigger: 'blur', message: '请输入您的密码' },
-          { validator: validateNewPassword, trigger: 'blur' }
-        ],
-        confirmPassword: [
-          { required: true, trigger: 'blur', message: '请再次输入您的密码' },
-          { required: true, validator: equalToPassword, trigger: 'blur' }
-        ],
-        code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
-      },
-      loading: false,
-      captchaEnabled: true
-    }
-  },
-
-  created() {
-    this.getCode()
-  },
-  methods: {
-    // 获取验证码图片
-    getCode() {
-      getCodeImg().then(res => {
-        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
-        if (this.captchaEnabled) {
-          this.codeUrl = 'data:image/gif;base64,' + res.img
-          this.registerForm.uuid = res.uuid
+    data() {
+        // 验证姓名是否符合要求
+        const validateNickName = (rule, value, callback) => {
+            const regex = /^[\u4e00-\u9fa5]{2,4}$/
+            if (!value) {
+                callback(new Error('请输入姓名'))
+            } else if (!regex.test(value)) {
+                callback(new Error('名字必须是2到4个汉字'))
+            } else {
+                callback()
+            }
         }
-      })
-    },
 
-    // 处理注册请求
-    handleRegister() {
-      this.$refs.registerForm.validate(valid => {
-        if (valid) {
-          this.loading = true
-          register(this.registerForm).then(res => {
-            const username = this.registerForm.username
-            this.$alert(`<font color="red">恭喜你，您的账号 ${username} 注册成功！</font>`, '系统提示', {
-              dangerouslyUseHTMLString: true,
-              type: 'success'
-            }).then(() => {
-              this.$router.push('/login')
-            }).catch(() => {
+        // 验证密码是否一致
+        const equalToPassword = (rule, value, callback) => {
+            if (this.registerForm.password !== value) {
+                callback(new Error('两次输入的密码不一致'))
+            } else {
+                callback()
+            }
+        }
+
+        return {
+            codeUrl: '',
+            isSendingCode: false,
+            countdown: 0,
+            registerForm: {
+                username: '',
+                password: '',
+                confirmPassword: '',
+                verificationCode: '',
+                mobile: '',
+                nickName: '',
+                code: '',
+                uuid: '',
+                phoneUuid: '',
+                mobileCodeType: 'REGISTER',
+            },
+            registerRules: {
+                nickName: [
+                    {
+                        required: true,
+                        trigger: 'blur',
+                        validator: validateNickName,
+                    },
+                ],
+                mobile: [
+                    {
+                        required: true,
+                        message: '请输入手机号/邮箱',
+                        trigger: 'blur',
+                    },
+                    { validator: this.validateContact, trigger: 'blur' },
+                ],
+                password: [
+                    {
+                        required: true,
+                        trigger: 'blur',
+                        message: '请输入您的密码',
+                    },
+                    { validator: validateNewPassword, trigger: 'blur' },
+                ],
+                confirmPassword: [
+                    {
+                        required: true,
+                        trigger: 'blur',
+                        message: '请再次输入您的密码',
+                    },
+                    {
+                        required: true,
+                        validator: equalToPassword,
+                        trigger: 'blur',
+                    },
+                ],
+                code: [
+                    {
+                        required: true,
+                        trigger: 'change',
+                        message: '请输入验证码',
+                    },
+                ],
+            },
+            loading: false,
+            captchaEnabled: true,
+        }
+    },
+    created() {
+        this.getCode()
+    },
+    methods: {
+        // 获取验证码图片
+        getCode() {
+            getCodeImg().then((res) => {
+                this.captchaEnabled =
+                    res.captchaEnabled === undefined ? true : res.captchaEnabled
+                if (this.captchaEnabled) {
+                    this.codeUrl = 'data:image/gif;base64,' + res.img
+                    this.registerForm.uuid = res.uuid
+                }
             })
-          }).catch(() => {
-            this.loading = false
-            if (this.captchaEnabled) {
-              this.getCode()
+        },
+
+        // 处理注册请求
+        handleRegister() {
+            this.$refs.registerForm.validate((valid) => {
+                if (valid) {
+                    this.loading = true
+                    register(this.registerForm)
+                        .then((res) => {
+                            const username = this.registerForm.username
+                            this.$alert(
+                                `<font color="red">恭喜你，您的账号 ${username} 注册成功！</font>`,
+                                '系统提示',
+                                {
+                                    dangerouslyUseHTMLString: true,
+                                    type: 'success',
+                                },
+                            )
+                                .then(() => {
+                                    this.$router.push('/login')
+                                })
+                                .catch(() => {})
+                        })
+                        .catch(() => {
+                            this.loading = false
+                            if (this.captchaEnabled) {
+                                this.getCode()
+                            }
+                        })
+                }
+            })
+        },
+
+        // 发送验证码
+        sendCode() {
+            if (!this.registerForm.mobile) {
+                this.$message.error('请先填写手机号')
+                return
             }
-          })
-        }
-      })
-    },
+            this.$store
+                .dispatch('GetPhoneCode', this.registerForm)
+                .then((res) => {
+                    console.log(res)
+                    this.isSendingCode = true
+                    this.countdown = 60
+                    const timer = setInterval(() => {
+                        this.countdown -= 1
+                        if (this.countdown <= 0) {
+                            clearInterval(timer)
+                            /*  this.isSendingCode = false */
+                        }
+                    }, 1000)
+                })
+                .catch(() => {
+                    this.loading = false
+                    if (this.captchaEnabled) {
+                        this.getCode()
+                    }
+                    this.isSendingCode = false
+                    this.countdown = 0
+                })
+        },
 
-    // 发送验证码
-    sendCode() {
-      if (!this.registerForm.mobile) {
-        this.$message.error('请先填写手机号')
-        return
-      }
-      this.$store.dispatch('GetPhoneCode', this.registerForm)
-        .then(res => {
-          console.log(res)
-          this.isSendingCode = true
-          this.countdown = 60
-          const timer = setInterval(() => {
-            this.countdown -= 1
-            if (this.countdown <= 0) {
-              clearInterval(timer)
+        // 验证手机号或邮箱格式
+        validateContact(rule, value, callback) {
+            const phoneRegex = /^1[3-9]\d{9}$/
+            const emailRegex =
+                /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
+
+            if (!value) {
+                return callback(new Error('请输入电子邮件或电话号码'))
             }
-          }, 1000)
-        })
-        .catch(() => {
-          this.loading = false
-          if (this.captchaEnabled) {
-            this.getCode()
-          }
-          this.isSendingCode = false
-          this.countdown = 0
-        })
+
+            if (!phoneRegex.test(value) && !emailRegex.test(value)) {
+                return callback(new Error('必须是有效的电子邮件或电话号码'))
+            }
+
+            callback()
+        },
     },
-
-    // 验证手机号或邮箱格式
-    validateContact(rule, value, callback) {
-      const phoneRegex = /^1[3-9]\d{9}$/
-      const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
-
-      if (!value) {
-        return callback(new Error('请输入电子邮件或电话号码'))
-      }
-
-      if (!phoneRegex.test(value) && !emailRegex.test(value)) {
-        return callback(new Error('必须是有效的电子邮件或电话号码'))
-      }
-
-      callback()
-    }
-  }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-.container {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  height: 100%;
-  background-image: url("../assets/images/bg.png");
-  background-size: cover;
+.container-rg {
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+
+.lef-cont {
+    width: 50%;
+    height: 100%;
+    background-color: #7288fa;
+    box-sizing: border-box;
+    padding: 5%;
+    position: relative;
+    .circle1 {
+        position: absolute;
+        top: 8%;
+        left: 8%;
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        background-color: #8ea0fb;
+    }
+    .circle2 {
+        position: absolute;
+        top: calc(8% + 25px);
+        left: calc(8% + 25px);
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+    .tit {
+        margin-top: 10%;
+        margin-bottom: 20px;
+        display: flex;
+        flex-direction: column;
+        font-size: 32px;
+        color: #fff;
+    }
+    .tit-en {
+        display: flex;
+        flex-direction: column;
+        font-size: 20px;
+        color: #fff;
+    }
+    .img-cont {
+        width: 300px;
+        height: 300px;
+        margin: 80px auto;
+        img {
+            width: 100%;
+            height: 95%;
+        }
+    }
 }
 
 .register {
-  width: 42%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
 }
 
 .title {
-  margin: 0px auto 30px auto;
-  text-align: center;
-  color: #707070;
+    margin: 0px auto 30px auto;
+    text-align: center;
+    color: #707070;
 }
 
 .register-form {
-  border-radius: 6px;
-  background: #ffffff;
-  width: 400px;
-  padding: 25px 25px 5px 25px;
+    border-radius: 6px;
+    background: #ffffff;
+    width: 400px;
+    padding: 25px 25px 5px 25px;
 
-  .el-input {
-    height: 38px;
+    .el-input {
+        height: 38px;
 
-    input {
-      height: 38px;
+        input {
+            height: 38px;
+        }
     }
-  }
 
-  .input-icon {
-    height: 39px;
-    width: 14px;
-    margin-left: 2px;
-  }
+    .input-icon {
+        height: 39px;
+        width: 14px;
+        margin-left: 2px;
+    }
 }
 
 .register-tip {
-  font-size: 13px;
-  text-align: center;
-  color: #bfbfbf;
+    font-size: 13px;
+    text-align: center;
+    color: #bfbfbf;
 }
 
 .register-code {
-  width: 33%;
-  height: 38px;
-  float: right;
+    width: 33%;
+    height: 38px;
+    float: right;
 
-  img {
-    cursor: pointer;
-    vertical-align: middle;
-  }
+    img {
+        cursor: pointer;
+        vertical-align: middle;
+    }
 }
 
 .el-register-footer {
-  height: 40px;
-  line-height: 40px;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-  color: #fff;
-  font-family: Arial;
-  font-size: 12px;
-  letter-spacing: 1px;
+    height: 40px;
+    line-height: 40px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    color: #fff;
+    font-family: Arial;
+    font-size: 12px;
+    letter-spacing: 1px;
 }
 
 .register-code-img {
-  height: 38px;
+    height: 38px;
 }
 </style>