封装axios+添加早上好弹窗

src/components/user-info.vue

@@ -68,25 +68,42 @@ const validatePassword = (rule: any, value: any, callback: any) => {
     }
 }
 
+//自定义校验规则函数
+const validatorPassword = (rule: any, value: any, callback: any) => {
+  if (value.length >= 6) {
+    callback();
+  } else {
+    callback(new Error('密码长度至少6位'));
+  }
+}
+
+const validatorPhone = (rule: any, value: any, callback: any) => {
+  if (value.length == 11) {
+    callback();
+  } else {
+    callback(new Error('手机号码长度为11位'));
+  }
+}
+
 const rules = reactive({
     phone: [
-        { required: true, message: '请输入手机号', trigger: 'blur' },
+        { required: true, validator:validatorPhone, trigger: 'change' },
     ],
     name: [
-        { required: true, message: '请输入用户名', trigger: 'blur' },
+        { required: true, message: '请输入姓名', trigger: 'blur' },
     ],
     mailbox: [
         { type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change'] },
     ],
     password: [
-        { required: true, message: '请输入密码', trigger: 'blur' },
+        { required: true, validator: validatorPassword, trigger: 'change' },
     ],
     newPassword: [
-        { required: true, message: '请选择新密码', trigger: 'blur' },
-        { validator: validatePassword, trigger: 'blur' }
+        { required: true, validator: validatorPassword, trigger: 'change' },
+        //{ validator: validatePassword, trigger: 'blur' }
     ],
     confirmPassword: [
-        { required: true, message: '请选择新密码', trigger: 'blur' },
+        { required: true, message: '请输入密码', trigger: 'change' },
         { validator: validatePassword, trigger: 'blur' }
     ]
 })

src/static-data/core.ts

@@ -1,4 +1,4 @@
-import { getData, postData } from '@/axios/index'
+import { getData, postData } from '@/utils/request'
 
 export const getHospitalsData = () => {
   const hospitals = [] as any

src/stores/index.ts

@@ -0,0 +1,6 @@
+//仓库大仓库
+import { createPinia } from 'pinia'
+//创建大仓库
+const pinia = createPinia()
+//对外暴露：入口文件需要安装仓库
+export default pinia

src/utils/request.ts

@@ -5,12 +5,12 @@ const BASE_URL = import.meta.env.BASE_URL
 
 export const get = (url: any, params: any, success: any) => {
     axios.get(HOST + url, params)
-    .then(res => {
-        success(res);
-    })
-    .catch(err => {
-        success(err);
-    });
+        .then(res => {
+            success(res);
+        })
+        .catch(err => {
+            success(err);
+        });
 };
 export const post = (url: any, params: any, success: any) => {
     axios.post(HOST + url, params)

src/utils/time.ts

@@ -0,0 +1,17 @@
+//封装一个函数:获取一个结果:当前早上|上午|下午|晚上
+export const getTime = () => {
+    let message = ''
+    //通过内置构造函数Date
+    const hours = new Date().getHours()
+    //情况的判断
+    if (hours <= 9) {
+        message = '早上'
+    } else if (hours <= 12) {
+        message = '上午'
+    } else if (hours <= 18) {
+        message = '下午'
+    } else {
+        message = '晚上'
+    }
+    return message
+}

src/utils/token.ts

@@ -0,0 +1,13 @@
+//封装本地存储存储数据与读取数据方法
+//存储数据
+export const SET_TOKEN = (token: string) => {
+    localStorage.setItem('TOKEN', token)
+}
+//本地存储获取数据
+export const GET_TOKEN = () => {
+    return localStorage.getItem('TOKEN')
+}
+//本地存储删除数据方法
+export const REMOVE_TOKEN = () => {
+    localStorage.removeItem('TOKEN')
+}

src/views/index.vue

@@ -65,7 +65,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { useLoginStore } from '@/stores/user-info-store'
 import { getHospitalsData } from '@/static-data/core'
 import userInfoForm from '@/components/user-info.vue'
-import {wsApi} from "@/axios/ws";
+import {wsApi} from "@/api/ws";
 
 const router = useRouter()
 const route = useRoute()

src/views/login/login.vue

@@ -34,7 +34,7 @@
                 </template>
               </el-input>
             </el-form-item>
-            <el-button class="login-btn" type="primary" @click="login('password')">登录</el-button>
+            <el-button :loading="loading" class="login-btn" type="primary" @click="login('password')">登录</el-button>
             <span class="register-btn" @click="getCaptchaCode()">注册账号</span>
           </div>
           <div class="login-form code-login" v-else>
@@ -124,13 +124,19 @@
 
 <script lang='ts' setup>
 import {onMounted, reactive, ref, toRefs, watch} from 'vue'
-import {useRouter} from 'vue-router'
+import {useRouter,useRoute} from 'vue-router'
 import {ElMessage, ElMessageBox} from 'element-plus'
 import {useLoginStore} from '@/stores/user-info-store'
 import {getHospitalsData, getPhoneAreasData} from '@/static-data/core'
 import {v4} from "uuid";
-import {HOST} from "@/axios";
+import {HOST} from "@/utils/request";
 import SliderVerify from "@/components/SliderVerify/index.vue";
+import { ElNotification } from 'element-plus';
+//引入获取当前时间的函数
+import { getTime } from '@/utils/time';
+//引入用户相关的小仓库
+//import useUserStore from "@/stores/user-info-store";
+//let useStore = useUserStore();
 
 const router = useRouter()
 
@@ -140,7 +146,8 @@ getHospitalsData().then((res: any) => {
 })
 const phoneAreas: any = getPhoneAreasData()
 
-
+//定义变量控制按钮加载效果
+let loading = ref(false);
 
 //自定义校验规则函数
 const validatorUserName = (rule: any, value: any, callback: any) => {
@@ -151,7 +158,7 @@ const validatorUserName = (rule: any, value: any, callback: any) => {
   if (value.length >= 4) {
     callback();
   } else {
-    callback(new Error('账号长度至少五位'));
+    callback(new Error('账号长度至少4位'));
   }
 }
 
@@ -159,7 +166,7 @@ const validatorPassword = (rule: any, value: any, callback: any) => {
   if (value.length >= 6) {
     callback();
   } else {
-    callback(new Error('密码长度至少六位'));
+    callback(new Error('密码长度至少6位'));
   }
 }
 
@@ -171,8 +178,6 @@ const validatorPhone = (rule: any, value: any, callback: any) => {
   }
 }
 
-
-
 const loginRules = reactive({
     account: [
         { required: true, validator: validatorUserName, trigger: 'change' },
@@ -208,6 +213,10 @@ const registerRules = reactive({
     ]
 })
 
+//获取路由器
+let $router = useRouter();
+//路由对象
+let $route = useRoute();
 const loginFormRef = ref()
 const registerFormRef = ref()
 const slideVerifyRef = ref()
@@ -302,6 +311,36 @@ const login = async (type: string) => {
         } else {
             // console.log('error submit!', fields)
         }
+      //加载效果:开始加载
+      loading.value = true;
+
+      /*try {
+        //保证登录成功
+        await useStore.userLogin(loginFormRef);
+
+      }*/
+
+      //编程式导航跳转到展示数据首页
+      //判断登录的时候,路由路径当中是否有query参数，如果有就往query参数挑战，没有跳转到首页
+      let redirect: any = $route.query.redirect;
+      $router.push({ path: redirect || '/' });
+      //登录成功提示信息
+      ElNotification({
+        type: 'success',
+        message: '欢迎回来',
+        title: `HI,${getTime()}好`
+      });
+      //登录成功加载效果也消失
+      loading.value = false;
+    /*} catch (error) {
+    //登录失败加载效果消息
+    loading.value = false;
+    //登录失败的提示信息
+    ElNotification({
+      type: 'error',
+      message: (error as Error).message
+    })*/
+
     })
 }
 

src/views/remote-manage/remote-control.vue

@@ -136,7 +136,7 @@ import { useRouter, useRoute } from 'vue-router'
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { useRemoteStore } from '@/stores/remote-info-store'
 import { dateFormater } from '@/utils/date-util';
-import { post } from "@/axios/index";
+import { post } from "@/utils/request";
 import chartLine from './chart/chart-line.vue';
 import chartEcg from './chart/chart-ecg.vue';
 import PatientsForm from '@/views/patients-manage/form/patients-form.vue'

src/views/system-manage/chart/city-map-chart.vue

@@ -6,7 +6,7 @@
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import * as echarts from 'echarts'
-import { getMapJson } from '@/axios/index'
+import { getMapJson } from '@/utils/request'
 
 const router = useRouter()