feat: 新增验证码功能

.env.development

@@ -7,6 +7,6 @@ NODE_ENV = 'development'
 
 # 本地环境接口地址
 # 如果没有跨域问题，直接在这里配置即可
-# VITE_APP_BASE_API = 'http://192.168.1.116:8080'
+VITE_APP_BASE_API = 'http://192.168.1.135:8080'
 # VITE_APP_BASE_API = 'http://121.41.36.72:8080'
-VITE_APP_BASE_API = 'http://www.cvlip.com:9003'
+# VITE_APP_BASE_API = 'http://www.cvlip.com:9003'

src/api/System/user.ts

@@ -13,6 +13,7 @@ const api = {
   userPassword: '/admin/user/password', // 用户修改密码
   userGet: '/admin/user/get', // 用户详情
   userInfo: '/admin/user/info', // 用户信息
+  sendMail: '/admin/sms/send', // 发送短信
 };
 
 /**
@@ -53,3 +54,12 @@ export function getUserGetAPI(data: { id: number | string }) {
 export function getUserInfoAPI() {
   return http.postParams<userInfoType>(api.userInfo);
 }
+
+/**
+ * 发送短信
+ * @param {string} data 手机号
+ * @return 返回请求发送短信接口的结果
+ */
+export function sendMailAPI(data: { phone: string }) {
+  return http.postParams<string>(api.sendMail, data);
+}

src/store/modules/user.ts

@@ -36,10 +36,14 @@ export const useUserStore = defineStore({
      * 用户登录
      */
     login(userInfo: loginDataType) {
-      const { username, password } = userInfo;
+      const { username, password, verifyCode } = userInfo;
       return new Promise<void>(async (resolve, reject) => {
         try {
-          const { data } = await postLoginAPI({ username: username.trim(), password: password });
+          const { data } = await postLoginAPI({
+            username: username.trim(),
+            password: password,
+            verifyCode,
+          });
           this.setToken(data.accessToken); // 保存用户token
           const { data: userInfoData } = await getUserInfoAPI();
           this.setUserInfo(userInfoData);

src/types/user.ts

@@ -6,6 +6,7 @@ import { PageRowsType } from './index';
 export type loginDataType = {
   username: string;
   password: string;
+  verifyCode?: string;
 };
 
 /**

src/views/Login/index.vue

@@ -37,14 +37,17 @@
               <input type="password" placeholder="请填写密码" v-model="loginForm.password" />
             </el-form-item>
 
-            <el-form-item prop="code">
+            <el-form-item prop="verifyCode">
               <input
-                type="code"
+                type="text"
                 placeholder="请填写验证码"
-                v-model="loginForm.code"
+                v-model="loginForm.verifyCode"
                 class="code-input"
               />
-              <div class="code-btn">发送短信</div>
+              <!-- <div class="code-btn" @click="getVerifyCode">发送短信</div> -->
+              <div class="code-btn" @click="getVerifyCode" :disabled="countdown > 0">
+                {{ countdown > 0 ? `${countdown} 秒后重试` : '发送短信' }}
+              </div>
             </el-form-item>
 
             <div class="login-btn" @click="onClickSubmit(loginFormRef)">登录</div>
@@ -207,6 +210,7 @@ import { reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { postEnterpriseRegAPI } from '@/api/Enterprise/company';
 import { postPortListAPI } from '@/api/Port';
+import { sendMailAPI } from '@/api/System/user';
 import RemoteSelect from '@/components/RemoteSelect/index.vue';
 import { useUserStore } from '@/store/modules/user';
 import { getTimeStateStr } from '@/utils';
@@ -234,7 +238,7 @@ const loginRules = reactive<FormRules>({
 const loginForm = reactive({
   username: '', // 用户名
   password: '', // 密码
-  code: '',
+  verifyCode: '',
 });
 
 // 按钮加载状态
@@ -246,6 +250,30 @@ const router = useRouter();
 // store
 const userStore = useUserStore();
 
+// 短信验证码倒计时
+const countdown = ref(0);
+const countdownInterval = ref();
+
+// 获取短信验证码
+const getVerifyCode = async () => {
+  if (!validPhone(loginForm.username)) {
+    ElMessage.error('请输入正确的手机号码');
+    return;
+  }
+  if (countdown.value > 0) {
+    ElMessage.error(`请${countdown.value}秒后重试`);
+    return;
+  }
+  await sendMailAPI({ phone: loginForm.username });
+  countdown.value = 60;
+  countdownInterval.value = setInterval(() => {
+    countdown.value -= 1;
+    if (countdown.value === 0) {
+      clearInterval(countdownInterval.value);
+    }
+  }, 1000);
+};
+
 // 用户登录
 const onClickSubmit = (formEl: FormInstance | undefined) => {
   // 进行表单校验

src/views/Notice/index.vue

@@ -39,7 +39,8 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
-import { noticeGetAPI, noticePageAPI } from '@/api/Notice';
+import { noticeCountAPI, noticeGetAPI, noticePageAPI } from '@/api/Notice';
+import { useSettingStore } from '@/store/modules/setting';
 import { NoticeType } from '@/types/notice';
 
 const router = useRouter();
@@ -83,10 +84,17 @@ const noticeListLoad = async () => {
 // 当前选中的公告
 const currentNotice = ref(0);
 
+// 获取设置store
+const settingStore = useSettingStore();
+
 const onClickOpenDialog = async (row: NoticeType) => {
   currentNotice.value = row.id;
   const { data } = await noticeGetAPI({ id: row.id });
   noticeViewData.value = data;
+
+  // 获取未查看公告数量
+  const { data: count } = await noticeCountAPI();
+  settingStore.setNoticeCount(Number(count));
 };
 </script>