身份跳转后台

src/components/webGetCode/index.vue

@@ -14,11 +14,23 @@
 </template>
 
 <script setup>
+import { getCodeNum } from "@/api/login";
+
+const props = defineProps({
+  mobile: String,
+});
+
 const disabled = ref(true);
 const buttonName = ref("获取验证码");
 const isDisabled = ref(false);
 const time = ref(60);
+
+const { proxy } = getCurrentInstance();
+
 function getCode() {
+  const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
+  if (!reg.test(props.mobile))
+    return proxy.$modal.msgError("请输入正确的手机号码");
   isDisabled.value = true;
   let interval = setInterval(function () {
     buttonName.value = time.value + "后重新发送";
@@ -30,15 +42,12 @@ function getCode() {
       clearInterval(interval);
     }
   }, 1000);
-  console.log(66666);
-  // getCodeImg().then((res) => {
-  //   captchaOnOff.value =
-  //     res.captchaOnOff === undefined ? true : res.captchaOnOff;
-  //   if (captchaOnOff.value) {
-  //     codeUrl.value = "data:image/gif;base64," + res.img;
-  //     loginForm.value.mode = res.mode;
-  //   }
-  // });
+  getCodeNum({ mobile: props.mobile })
+    .then((res) => {})
+    .catch(() => {
+      isDisabled.value = false;
+      clearInterval(interval);
+    });
 }
 </script>
 

src/components/webHead/index.vue

@@ -9,7 +9,7 @@
           <li class="menu-item1">
             <div
               class="menu-item-tit"
-              :class="pagePath == '/'  ? 'active' : ''"
+              :class="pagePath == '/' ? 'active' : ''"
               @click="handlePath('/')"
             >
               首页
@@ -84,14 +84,37 @@
               关于我们
             </div>
           </li>
-          <li class="menu-item1">
+          <li class="menu-item1" style="display: flex; justify-content: center">
             <div
+              v-if="!getters.avatar"
               class="menu-item-tit"
               :class="pagePath == '/login' ? 'active' : ''"
               @click="handlePath('/login')"
             >
               登录注册
             </div>
+
+            <el-dropdown
+              v-else
+              style="margin-top: 20px"
+              class="avatar-container right-menu-item hover-effect"
+              trigger="click"
+            >
+              <div class="avatar-wrapper">
+                <img :src="getters.avatar" class="user-avatar" />
+                <i class="el-icon-caret-bottom" />
+              </div>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <router-link to="/identity/index">
+                    <el-dropdown-item>个人中心</el-dropdown-item>
+                  </router-link>
+                  <el-dropdown-item divided @click="logout">
+                    <span>退出登录</span>
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
           </li>
         </ul>
       </el-col>
@@ -100,8 +123,13 @@
 </template>
 
 <script setup>
+import { ElMessageBox } from "element-plus";
 import { defineComponent, onMounted, reactive, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
+
+const store = useStore();
+const getters = computed(() => store.getters);
+
 let state = reactive({});
 let pagePath = ref("");
 const route = useRoute();
@@ -114,10 +142,27 @@ watch(
 );
 pagePath.value = route.path;
 
+function handlePage() {
+  router.push("/identity/index");
+}
+
 function handlePath(path) {
   pagePath.value = path;
   router.push(path);
 }
+function logout() {
+  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      store.dispatch("LogOut").then(() => {
+        location.href = "/";
+      });
+    })
+    .catch(() => {});
+}
 </script>
 
 <style lang="scss">
@@ -202,3 +247,12 @@ dt {
   }
 }
 </style>
+
+<style lang="scss" scoped>
+.user-avatar {
+  cursor: pointer;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+</style>