feat: 完善请求日志过滤

2024-10-21 23:07:44 +08:00
parent 998d97b669
commit 57ad7ae1a3
6 changed files with 164 additions and 21 deletions
--- a/Yi.Bbs.Vue3/src/views/login/forgotPassword.vue
+++ b/Yi.Bbs.Vue3/src/views/login/forgotPassword.vue
@@ -1,15 +1,20 @@
 <script setup>

 // 注册逻辑
-import {reactive, ref} from "vue";
+import {computed, reactive, ref} from "vue";
 import {getCodePhoneForRetrievePassword} from "@/apis/accountApi";
 import useAuths from "@/hooks/useAuths";
 import { useRouter} from "vue-router";
 const { retrievePasswordFun } = useAuths();
 const router = useRouter();
+import useUserStore from "@/stores/user";
 const retrievePasswordFormRef = ref();
+//验证码弹窗
+const codeDialogVisible=ref(false);

-
+// 获取图片验证码
+const codeImageURL = computed(() => useUserStore().codeImageURL);
+const codeUUid = computed(() => useUserStore().codeUUid);
 // 确认密码
 const passwordConfirm = ref("");
 const registerForm = reactive({
@@ -18,6 +23,11 @@ const registerForm = reactive({
  uuid: "",
  code: ""
 });
+const phoneForm=reactive({
+  code:"",
+  phone:"",
+  uuid:codeUUid
+});
 const registerRules = reactive({
  phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
  code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
@@ -56,14 +66,38 @@ const retrievePassword = async (formEl) => {
 const codeInfo = ref("发送短信");
 const isDisabledCode = ref(false);

+//点击验证码
+const  handleGetCodeImage=()=>{
+  useUserStore().updateCodeImage();
+}
+
+//点击手机发送短信
+const  clickPhoneCaptcha=()=>{
+  if (registerForm.phone !== "")
+  {
+    handleGetCodeImage();
+    codeDialogVisible.value=true;
+  }
+  else {
+    ElMessage({
+      message: `请先输入手机号`,
+      type: "warning",
+    });
+  }
+}
+
+
 //前往登录
 const  handleSignInNow=()=>{
  router.push("/login");
 }
 const captcha = async () => {
-  if (registerForm.phone !== "") {
-    const { data } = await getCodePhoneForRetrievePassword(registerForm.phone);
+  if (registerForm.phone!==""&&phoneForm.code!=="")
+  {
+    phoneForm.phone=registerForm.phone;
+    const { data } = await getCodePhoneForRetrievePassword(phoneForm);
    registerForm.uuid = data.uuid;
+    codeDialogVisible.value=false;
    ElMessage({
      message: `已向${registerForm.phone}发送验证码，请注意查收`,
      type: "success",
@@ -113,7 +147,7 @@ const captcha = async () => {
                <el-form-item prop="phone">
                  <div class="phone-code">
                    <input class="phone-code-input" type="text" v-model.trim="registerForm.phone">
-                    <button type="button" class="phone-code-btn" @click="captcha()">{{codeInfo}}</button>
+                    <button type="button" class="phone-code-btn" @click="clickPhoneCaptcha()">{{codeInfo}}</button>
                  </div>
                </el-form-item>
              </div>
@@ -146,8 +180,41 @@ const captcha = async () => {
      </div>

    </div>
+    <el-dialog
+        v-model="codeDialogVisible"
+        title="发送短信"
+        width="500"
+        center
+    >
+      <div class="dialog-body">
+        <img class="code-img" alt="加载中" @click="handleGetCodeImage"  :src="codeImageURL">
+
+        <div class="input">
+          <p>*图片验证码</p>
+          <el-form-item prop="code" >
+            <input type="text" v-model.trim="phoneForm.code">
+          </el-form-item>
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <button @click="captcha" style="width:80% " type="button" class="phone-code-btn">确认发送</button>
+        </div>
+      </template>
+    </el-dialog>
  </div>
 </template>

 <style src="@/assets/styles/login.css" scoped>
+</style>
+<style scoped>
+.dialog-body
+{
+  display: flex  !important;
+  justify-content: center !important;
+  padding: 0 !important;
+}
+.code-img{
+  margin: 25px !important;
+}
 </style>
--- a/Yi.Bbs.Vue3/src/views/login/register.vue
+++ b/Yi.Bbs.Vue3/src/views/login/register.vue
@@ -1,16 +1,21 @@
 <script setup>

 // 注册逻辑
-import {reactive, ref} from "vue";
+import {computed, reactive, ref} from "vue";
 import {getCodePhone} from "@/apis/accountApi";
 import useAuths from "@/hooks/useAuths";
 import {useRoute, useRouter} from "vue-router";
+import useUserStore from "@/stores/user";
 const { registerFun } = useAuths();
 const router = useRouter();
 const route = useRoute();
 const registerFormRef = ref();
+//验证码弹窗
+const codeDialogVisible=ref(false);

-
+// 获取图片验证码
+const codeImageURL = computed(() => useUserStore().codeImageURL);
+const codeUUid = computed(() => useUserStore().codeUUid);
 // 确认密码
 const passwordConfirm = ref("");
 const registerForm = reactive({
@@ -21,6 +26,11 @@ const registerForm = reactive({
  code: "",
  nick:""
 });
+const phoneForm=reactive({
+  code:"",
+  phone:"",
+  uuid:codeUUid
+});
 const registerRules = reactive({
  nick: [
    { min: 2, message: "昵称需大于两位", trigger: "blur" },
@@ -65,14 +75,37 @@ const register = async (formEl) => {
 const codeInfo = ref("发送短信");
 const isDisabledCode = ref(false);

+//点击验证码
+const  handleGetCodeImage=()=>{
+  useUserStore().updateCodeImage();
+}
+
+//点击手机发送短信
+const  clickPhoneCaptcha=()=>{
+  if (registerForm.phone !== "")
+  {
+    handleGetCodeImage();
+    codeDialogVisible.value=true;
+  }
+  else {
+    ElMessage({
+      message: `请先输入手机号`,
+      type: "warning",
+    });
+  }
+}
+
 //前往登录
 const  handleSignInNow=()=>{
    router.push("/login");
 }
 const captcha = async () => {
-  if (registerForm.phone !== "") {
-    const { data } = await getCodePhone(registerForm.phone);
+  if (registerForm.phone!==""&&phoneForm.code!=="")
+  {
+    phoneForm.phone=registerForm.phone;
+    const { data } = await getCodePhone(phoneForm);
    registerForm.uuid = data.uuid;
+    codeDialogVisible.value=false;
    ElMessage({
      message: `已向${registerForm.phone}发送验证码，请注意查收`,
      type: "success",
@@ -90,12 +123,15 @@ const captcha = async () => {
        time--;
      }
    }, 1000);
-  } else {
+  }
+  else
+  {
    ElMessage({
      message: `请先输入手机号`,
      type: "warning",
    });
  }
+  
 };
 </script>

@@ -138,7 +174,7 @@ const captcha = async () => {
              <el-form-item prop="phone">
                <div class="phone-code">
                  <input class="phone-code-input" type="text" v-model.trim="registerForm.phone">
-                  <button type="button" class="phone-code-btn" @click="captcha()">{{codeInfo}}</button>
+                  <button type="button" class="phone-code-btn" @click="clickPhoneCaptcha()">{{codeInfo}}</button>
                </div>
              </el-form-item>
            </div>
@@ -171,8 +207,43 @@ const captcha = async () => {
    </div>

  </div>
+
+    <el-dialog
+        v-model="codeDialogVisible"
+        title="发送短信"
+        width="500"
+        center
+    >
+      <div class="dialog-body">
+      <img class="code-img" alt="加载中" @click="handleGetCodeImage"  :src="codeImageURL">
+
+      <div class="input">
+        <p>*图片验证码</p>
+        <el-form-item prop="code" >
+          <input type="text" v-model.trim="phoneForm.code">
+        </el-form-item>
+      </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <button @click="captcha" style="width:80% " type="button" class="phone-code-btn">确认发送</button>
+        </div>
+      </template>
+    </el-dialog>
  </div>
 </template>

 <style src="@/assets/styles/login.css" scoped>
+
+</style>
+<style scoped>
+.dialog-body
+{
+  display: flex  !important;
+  justify-content: center !important;
+  padding: 0 !important;
+}
+.code-img{
+  margin: 25px !important;
+}
 </style>