优化邮箱判断

src/operation/moduleNormal/depManage/detail/modules/edit.vue

@@ -140,8 +140,8 @@ const form = ref({
 const Provinces = ref([])
 const formRef = ref()
 const validatorEmail = async (rule, value)=> {
-  const phoneNumberPattern = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
-  if (value == '' || phoneNumberPattern.test(value)) {
+  const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+  if (value == '' || emailPattern.test(value)) {
     return Promise.resolve();
   }
   return Promise.reject('请输入有效的邮箱');

src/operation/moduleNormal/depManage/modules/addWorker.vue

@@ -120,8 +120,8 @@ const form = ref({
 const Provinces = ref([])
 const formRef = ref()
 const validatorEmail = async (rule, value)=> {
-  const phoneNumberPattern = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
-  if (value == '' || phoneNumberPattern.test(value)) {
+  const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+  if (value == '' || emailPattern.test(value)) {
     return Promise.resolve();
   }
   return Promise.reject('请输入有效的邮箱');

src/views/login/login.vue

@@ -10,21 +10,12 @@
           </p>
         </div>
       </div>
-      <a-form
-        :model="formState"
-        name="basic"
-        layout="vertical"
-        autocomplete="off"
-        @finish="onFinish"
-        @finishFailed="onFinishFailed"
-      >
+      <a-form :model="formState" name="basic" layout="vertical" autocomplete="off" @finish="onFinish"
+        @finishFailed="onFinishFailed">
         <!--账号登录-->
         <div v-if="loginWrp == 'account'">
-          <a-form-item
-            name="phonenumber"
-            :rules="[{ required: true, message: '请输入账号',trigger:'onChange'}]"
-            style="margin-bottom: 32px;"
-          >
+          <a-form-item name="phonenumber" :rules="[{ required: true, message: '请输入账号', trigger: 'onChange' }]"
+            style="margin-bottom: 32px;">
             <a-input v-model:value="formState.phonenumber" size="large" placeholder="请输入账号">
               <template #prefix>
                 <i class="iconfont" style="margin-right: 4px;">&#xe6a5;</i>
@@ -32,15 +23,12 @@
             </a-input>
           </a-form-item>
 
-          <a-form-item
-            name="password"
-            :rules="[{ required: true, message: '请输入密码!',trigger:'onChange' }]"
-          >
+          <a-form-item name="password" :rules="[{ required: true, message: '请输入密码!', trigger: 'onChange' }]">
             <a-input-password v-model:value="formState.password" size="large" placeholder="请输入密码">
-            <template #prefix>
-              <i class="iconfont" style="margin-right: 4px;">&#xe6a4;</i>
-            </template>
-          </a-input-password>
+              <template #prefix>
+                <i class="iconfont" style="margin-right: 4px;">&#xe6a4;</i>
+              </template>
+            </a-input-password>
           </a-form-item>
 
           <a-form-item name="remember">
@@ -51,16 +39,15 @@
           </a-form-item>
 
           <a-form-item>
-            <a-button :loading="loading" type="primary" style="background: #143B88 !important;border: none;" html-type="submit" size="large" block>登录</a-button>
+            <a-button :loading="loading" type="primary" style="background: #143B88 !important;border: none;"
+              html-type="submit" size="large" block>登录</a-button>
           </a-form-item>
         </div>
         <!--手机号登录-->
         <div v-else>
-          <a-form-item
-            name="phonenumber"
-            :rules="[{ required: true, message: '请输入手机号' },{ validator: validatePhoneNumber }]"
-            style="margin-bottom: 32px;"
-          >
+          <a-form-item name="phonenumber"
+            :rules="[{ required: true, message: '请输入手机号' }, { validator: validatePhoneNumber }]"
+            style="margin-bottom: 32px;">
             <a-input v-model:value="formState.phonenumber" size="large" placeholder="请输入手机号">
               <template #prefix>
                 <i class="iconfont" style="margin-right: 4px;">&#xe6a0;</i>
@@ -68,10 +55,7 @@
             </a-input>
           </a-form-item>
 
-          <a-form-item
-            name="password"
-            :rules="[{ required: true, message: '请输入验证码!' }]"
-          >
+          <a-form-item name="password" :rules="[{ required: true, message: '请输入验证码!' }]">
             <div style="display:flex">
               <a-input v-model:value="formState.password" size="large" placeholder="请输入验证码">
                 <template #prefix>
@@ -80,25 +64,30 @@
                 <template #enterButton>
                 </template>
               </a-input>
-              <a-button v-if="count == 0" @click="countDown" type="primary" style="background: #143B88 !important;border: none;width: 120px;margin-left: 10px;" size="large" block>
-                {{count === 0?'获取验证码':count+ 's'}}
+              <a-button v-if="count == 0" @click="countDown" type="primary"
+                style="background: #143B88 !important;border: none;width: 120px;margin-left: 10px;" size="large" block>
+                {{ count === 0 ? '获取验证码' : count + 's' }}
               </a-button>
-              <a-button v-else type="primary" style="background: #143B88 !important;border: none;width: 120px;margin-left: 10px;" size="large" block>
-                {{count === 0?'获取验证码':count+ 's'}}
+              <a-button v-else type="primary"
+                style="background: #143B88 !important;border: none;width: 120px;margin-left: 10px;" size="large" block>
+                {{ count === 0 ? '获取验证码' : count + 's' }}
               </a-button>
             </div>
-            
+
           </a-form-item>
 
           <a-form-item>
-            <a-button :loading="loading" type="primary" style="background: #143B88 !important;border: none;" html-type="submit" size="large" block>登录</a-button>
+            <a-button :loading="loading" type="primary" style="background: #143B88 !important;border: none;"
+              html-type="submit" size="large" block>登录</a-button>
           </a-form-item>
         </div>
       </a-form>
       <a-divider style="color: #ffffff;border-color: #ffffff;">其他登录方式</a-divider>
       <div class="login-item">
-        <img src="@/assets/loginIcon.png" alt="" style="cursor: pointer;" v-if="loginWrp == 'phone'" @click="loginWrp = 'account';formState.password='';formState.phonenumber=''">
-        <img src="@/assets/phone.png" alt="" style="cursor: pointer;" v-else  @click="loginWrp = 'phone';formState.password='';formState.phonenumber=''">
+        <img src="@/assets/loginIcon.png" alt="" style="cursor: pointer;" v-if="loginWrp == 'phone'"
+          @click="loginWrp = 'account'; formState.password = ''; formState.phonenumber = ''">
+        <img src="@/assets/phone.png" alt="" style="cursor: pointer;" v-else
+          @click="loginWrp = 'phone'; formState.password = ''; formState.phonenumber = ''">
         <!-- <img src="@/assets/wechat.png" alt="" style="cursor: pointer;"> -->
       </div>
       <!-- <a-divider><span style="color:#999;font-weight:300">其他登录方式</span></a-divider>
@@ -110,14 +99,15 @@
       </div>
     </div>
     <a-layout-footer class="footer" style="background: #143B88 !important;">
-      浙CP备2023011622号-1
+      <a style="color:#ffffff;font-weight: normal;" target="_blank"
+        href="https://beian.miit.gov.cn">浙ICP备2023011622号-1</a>
     </a-layout-footer>
   </div>
 </template>
 <script>
-import { defineComponent, reactive,ref } from 'vue'
+import { defineComponent, reactive, ref } from 'vue'
 import { useRouter } from "vue-router"
-import Api  from '@/api/api'
+import Api from '@/api/api'
 import md5 from 'js-md5'
 import { message, notification } from 'ant-design-vue'
 import { useAuthStore } from '@/stores/modules/auth'
@@ -125,7 +115,7 @@ import { useRouteTabsStore } from '@/stores/modules/Htabs'
 import { storeToRefs } from 'pinia'
 const rotTabs = useRouteTabsStore()
 const store = useAuthStore()
-let { accountList,isRefresh,refreshText } = storeToRefs(store)
+let { accountList, isRefresh, refreshText } = storeToRefs(store)
 let { historyRoutes } = storeToRefs(rotTabs)
 export default defineComponent({
   setup() {
@@ -142,7 +132,7 @@ export default defineComponent({
       login()
     };
 
-    const validatePhoneNumber = async (rule, value)=> {
+    const validatePhoneNumber = async (rule, value) => {
       const phoneNumberPattern = /^1\d{10}$/;
       if (phoneNumberPattern.test(value)) {
         return Promise.resolve();
@@ -157,15 +147,15 @@ export default defineComponent({
     //验证码请求
     const loginCode = async () => {
       Api.loginCode({
-        "phonenumber":formState.phonenumber,
+        "phonenumber": formState.phonenumber,
         "systemclient": "web"
       }).then(res => {
         console.log(res)
         res.code === 1 ? notification.open({
-          message:'获取验证码成功',
+          message: '获取验证码成功',
           description: res.msg
         }) : notification.open({
-          message:'获取验证码失败',
+          message: '获取验证码失败',
           description: res.msg,
         })
       })
@@ -178,17 +168,17 @@ export default defineComponent({
       }
       await loginCode()
       count.value = 5
-      var down = setInterval(()=>{
-        count.value --
-        count.value === 0? clearInterval(down):''
-      },1000)
+      var down = setInterval(() => {
+        count.value--
+        count.value === 0 ? clearInterval(down) : ''
+      }, 1000)
     }
 
-    const login = async ()=>{
+    const login = async () => {
       loading.value = true
       const res = await Api.loginbyaccount({
-        "accountno":formState.phonenumber,
-        "password":md5(formState.password),
+        "accountno": formState.phonenumber,
+        "password": md5(formState.password),
         "systemclient": "web"
       })
       if (res.code === 1) {
@@ -196,8 +186,8 @@ export default defineComponent({
           return message.error('当前账号已停用!')
         loading.value = false
         accountList.value = res.account_list
-        store.defaultAccount(res.account_list[0],()=>{
-          router.replace({path:'/home'})
+        store.defaultAccount(res.account_list[0], () => {
+          router.replace({ path: '/home' })
           isRefresh.value = false
           refreshText.value = '身份验证中...'
         })
@@ -220,7 +210,7 @@ export default defineComponent({
       validatePhoneNumber
     };
   },
-  mounted () {
+  mounted() {
     sessionStorage.clear()
     localStorage.clear();
     historyRoutes.value = []
@@ -229,45 +219,49 @@ export default defineComponent({
 </script>
 
 <style scoped>
-
-
-.conatiner{
+.conatiner {
   background: url('@/assets/bg.jpg');
   background-size: cover;
 }
-.title{
+
+.title {
   height: 33px;
   margin: 0 0 48px;
   color: #ffffff;
   font-size: 2rem;
   font-weight: 500;
-  animation: showup 3s forwards ;
+  animation: showup 3s forwards;
   display: flex;
   align-items: center;
 }
-.login-wrap{
+
+.login-wrap {
   overflow: hidden;
 }
-.login-wrap .top{
-  width:100%;
+
+.login-wrap .top {
+  width: 100%;
   /* background:#f3f4f591 */
 }
-.login-wrap .top{
-  height:calc(100vh - 70px);
-  width:100%;
+
+.login-wrap .top {
+  height: calc(100vh - 70px);
+  width: 100%;
 }
-.login-wrap svg{
+
+.login-wrap svg {
   height: 70%;
 }
-.login-form{
+
+.login-form {
   position: absolute;
   right: 50%;
-  top:50vh;
+  top: 50vh;
   width: 500px;
   margin-right: -250px;
   margin-top: -244px;
   padding: 50px 80px;
-  background-color: rgba(0,0,0,.3);
+  background-color: rgba(0, 0, 0, .3);
   border-radius: 5px;
   box-shadow: 0 0 12px rgb(0 0 0 / 10%);
   z-index: 9999;
@@ -277,30 +271,37 @@ export default defineComponent({
   text-align: center;
 }
 
-.input-wrap{
+.input-wrap {
   width: 100%;
 }
-.color-info{
-  color:#999;
-  font-weight:300
+
+.color-info {
+  color: #999;
+  font-weight: 300
 }
-.introduce{
+
+.introduce {
   position: absolute;
   left: 10%;
-  top:10vh;
+  top: 10vh;
   font-size: 20px;
-  color:#fff;
+  color: #fff;
   text-indent: 3rem;
   line-height: 3rem;
   text-shadow: 0 0px 5px #666;
 }
+
 .introduce {
-  white-space: pre-wrap; /* 允许换行 */
-  overflow: hidden; /* 隐藏超出部分 */
-  max-width: 700px; /* 固定宽度为 200 像素 */
+  white-space: pre-wrap;
+  /* 允许换行 */
+  overflow: hidden;
+  /* 隐藏超出部分 */
+  max-width: 700px;
+  /* 固定宽度为 200 像素 */
   animation: typingH 5s forwards;
 
-  display: inline-block; /* 让行内元素可以自适应宽度、允许换行 */
+  display: inline-block;
+  /* 让行内元素可以自适应宽度、允许换行 */
 }
 
 /deep/.ant-input {
@@ -322,13 +323,13 @@ export default defineComponent({
 }
 
 /deep/input::-webkit-input-placeholder {
-  color:#ffffff !important;
+  color: #ffffff !important;
 }
 
-/deep/input:-webkit-autofill{  
-  -webkit-text-fill-color: #ededed !important; 
+/deep/input:-webkit-autofill {
+  -webkit-text-fill-color: #ededed !important;
   transition: background-color 5000s ease-in-out 0s;
-}  
+}
 
 /* 伪元素来实现光标 */
 .introduce::after {
@@ -336,24 +337,27 @@ export default defineComponent({
   display: inline-block;
   width: 5px;
   height: 1.2em;
-  margin-left: 5px; /* 调整光标与文本的距离 */
+  margin-left: 5px;
+  /* 调整光标与文本的距离 */
 }
+
 @keyframes typingH {
   0% {
     height: 0px;
   }
+
   100% {
     height: 300px;
   }
 }
 
 @media(max-width: 1600px) {
-  .login-form{
+  .login-form {
     transform: scale(.8);
   }
-  .introduce{
+
+  .introduce {
     font-size: 15px;
   }
 }
-</style>
-  
+</style>