前端登录逻辑对接

2022-10-13 11:05:43 +08:00
parent de28fd4ca4
commit edde5f8a88
11 changed files with 421 additions and 470 deletions
--- a/Yi.Framework.Net6/Yi.Framework.ApiMicroservice/Properties/launchSettings.json
+++ b/Yi.Framework.Net6/Yi.Framework.ApiMicroservice/Properties/launchSettings.json
@@ -2,7 +2,8 @@
  "profiles": {
    "Yi.Framework.ApiMicroservice": {
      "commandName": "Project",
-      "launchBrowser": true,
+      //<2F><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ƿ<EFBFBD><C7B7>Զ<EFBFBD><D4B6><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>˸о<CBB8><D0BE><EFBFBD><EFBFBD><EFBFBD><EFBFBD>عرȽ<D8B1><C8BD>鷳
+      "launchBrowser": false,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
--- a/Yi.Framework.Net6/Yi.Framework.ApiMicroservice/yi-sqlsugar-dev.db
+++ b/Yi.Framework.Net6/Yi.Framework.ApiMicroservice/yi-sqlsugar-dev.db
--- a/Yi.Vue3.x.Vant/src/main.ts
+++ b/Yi.Vue3.x.Vant/src/main.ts
@@ -1,6 +1,8 @@
 import { createApp } from 'vue'
 import './style.css'
 import 'vant/es/image-preview/style';
+import 'vant/es/toast/style';
+import 'vant/es/dialog/style';
 import router from './router'
 import store from './store'
 import './permission'
--- a/Yi.Vue3.x.Vant/src/permission.ts
+++ b/Yi.Vue3.x.Vant/src/permission.ts
@@ -4,59 +4,44 @@ import router from './router'
 // import 'nprogress/nprogress.css'
 import { getToken } from '@/utils/auth'
 // import { isHttp } from '@/utils/validate'
-// import { isRelogin } from '@/utils/request'
 import useUserStore from '@/store/modules/user'
+import { isRelogin } from '@/utils/myaxios'
 // import useSettingsStore from '@/store/modules/settings'
 // import usePermissionStore from '@/store/modules/permission'

 // NProgress.configure({ showSpinner: false });

-const whiteList = ['/square', '/auth-redirect', '/bind', '/register'];
+const whiteList = ['/login', '/auth-redirect', '/bind', '/register'];

 router.beforeEach((to, from, next) => {
  // NProgress.start()
  if (getToken()) {
    // to.meta.title && useSettingsStore().setTitle(to.meta.title)
    /* has token*/
-    if (to.path === '/square') {
+    if (to.path === '/login') {
      next({ path: '/' })
      // NProgress.done()
    } else {
-      useUserStore().getInfo();
-      next()
-      // if (useUserStore().roles.length === 0)
-      //  {
-      //   // isRelogin.show = true
-      //   // 判断当前用户是否已拉取完user_info信息
-      //   useUserStore().getInfo().then(() => {
-      //     // isRelogin.show = false
-      //     next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
-      //     // usePermissionStore().generateRoutes().then(accessRoutes => {
-      //     //   // 根据roles权限生成可访问的路由表
-      //     //   accessRoutes.forEach(route => {
-      //     //     if (!isHttp(route.path)) {
-      //     //       router.addRoute(route) // 动态添加可访问路由表
-      //     //     }
-      //     //   })
-          
-      //     // })
-      //   }).catch(err => {
-      //     useUserStore().logOut().then(() => {
-      //       // ElMessage.error(err)
-      //       next({ path: '/' })
-      //     })
-      //   })
-      // } else {
-      //   next()
-      // }
+      if (useUserStore().roles.length === 0) {
+        isRelogin.show = true
+        useUserStore().getInfo().then((response: any) => {
+          next()
+        });
+
+      }
+      else
+      {
+        next()
+      }
    }
  } else {
+
    // 没有token
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单，直接进入
      next()
    } else {
-      next(`/square?redirect=${to.fullPath}`) // 否则全部重定向到登录页
+      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
      // NProgress.done()
    }
  }
--- a/Yi.Vue3.x.Vant/src/router/index.ts
+++ b/Yi.Vue3.x.Vant/src/router/index.ts
@@ -2,6 +2,7 @@ import { createWebHistory, createRouter } from 'vue-router';
 import Layout from '@/layout/index.vue';

 export const constantRoutes = [
+  
    {
      name:'Layout',
      path: '/',
@@ -45,7 +46,7 @@ export const constantRoutes = [
    },
    {
      path: '/login',
-      component: () => import('@/view/Login.vue'),
+      component: () => import('@/view/login.vue'),
      name: 'Login',
    },
  ];
--- a/Yi.Vue3.x.Vant/src/store/modules/user.ts
+++ b/Yi.Vue3.x.Vant/src/store/modules/user.ts
@@ -24,7 +24,7 @@ const useUserStore = defineStore(
          login(username, password, code, uuid).then(res => {
            setToken(res.data.token);
            this.token = res.data.token;
-            resolve();
+            resolve(res);
          }).catch(error => {
            reject(error)
          })
@@ -37,7 +37,7 @@ const useUserStore = defineStore(
            const res=response.data;
            const user = res.user
            // const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import.meta.env.VITE_APP_BASE_API + user.avatar;
-    
+            const avatar=""
            if (res.roleCodes && res.roleCodes.length > 0) { // 验证返回的roles是否是一个非空数组
              this.roles = res.roleCodes
              this.permissions = res.permissionCodes
@@ -63,12 +63,12 @@ const useUserStore = defineStore(
      // 退出系统
      logOut() {
        return new Promise((resolve, reject) => {
-          logout(this.token).then(() => {
+          logout(this.token).then((response) => {
            this.token = ''
            this.roles = []
            this.permissions = []
            removeToken()
-            resolve()
+            resolve(response)
          }).catch(error => {
            reject(error)
          })
--- a/Yi.Vue3.x.Vant/src/utils/myaxios.ts
+++ b/Yi.Vue3.x.Vant/src/utils/myaxios.ts
@@ -3,7 +3,10 @@ import axios from 'axios'
 // import vm from '../main'
 import JsonBig from 'json-bigint'
 import { getToken } from '@/utils/auth'
+import { useRouter } from "vue-router";
+import useUserStore from '@/store/modules/user'
 // import VuetifyDialogPlugin from 'vuetify-dialog/nuxt/index';
+export let isRelogin = { show: false };
 const myaxios = axios.create({
        // baseURL:'/'// 
        baseURL: import.meta.env.VITE_APP_BASE_API, // /dev-apis
@@ -35,64 +38,88 @@ myaxios.interceptors.request.use(function(config) {

 // 响应拦截器
 myaxios.interceptors.response.use(async function(response) {
+//成功
    const resp = response.data
-    if (resp.code == undefined && resp.message == undefined) {
-        // vm.$dialog.notify.error("错误代码：无，原因：与服务器失去连接", {
-        //     position: "top-right",
-        //     timeout: 5000,
-        // });
-    } else if (resp.code == 401) {
-        // const res = await vm.$dialog.error({
-        //     text: `错误代码：${resp.code}，原因：${resp.message}<br>是否重新进行登录？`,
-        //     title: '错误',
-        //     actions: {
-        //         'false': '取消',
-        //         'true': '跳转'
-        //     }
-        // });
-        // if (res) {
-        //     vm.$router.push({ path: "/login" });
-        // }
+    // if (resp.code == undefined && resp.message == undefined) {
+    //     alert("直接爆炸")
+    //     // vm.$dialog.notify.error("错误代码：无，原因：与服务器失去连接", {
+    //     //     position: "top-right",
+    //     //     timeout: 5000,
+    //     // });
+    // } else if (resp.code == 401) {
+    //     alert("登录过期！重新登录");

-    } else if (resp.code !== 200) {
-        // vm.$dialog.notify.error(`错误代码：${resp.code}，原因：${resp.message}`, {
-        //     position: "top-right",
-        //     timeout: 5000,
-        // });
-    }
+    //     const router = useRouter();
+    //     router.push({ path:"/login" });
+
+    //     // const res = await vm.$dialog.error({
+    //     //     text: `错误代码：${resp.code}，原因：${resp.message}<br>是否重新进行登录？`,
+    //     //     title: '错误',
+    //     //     actions: {
+    //     //         'false': '取消',
+    //     //         'true': '跳转'
+    //     //     }
+    //     // });
+    //     // if (res) {
+    //     //     vm.$router.push({ path: "/login" });
+    //     // }
+
+    // } else if (resp.code !== 200) {
+    //     // vm.$dialog.notify.error(`错误代码：${resp.code}，原因：${resp.message}`, {
+    //     //     position: "top-right",
+    //     //     timeout: 5000,
+    //     // });
+    // }

    // store.dispatch("closeLoad");
    return resp;
 }, async function(error) {
-    // const resp = error.response.data
-    // if (resp.code == undefined && resp.message == undefined) {
-    //     vm.$dialog.notify.error("错误代码：无，原因：与服务器失去连接", {
-    //         position: "top-right",
-    //         timeout: 5000,
-    //     });
-    // } else if (resp.code == 401) {
-    //     const res = await vm.$dialog.error({
-    //         text: `错误代码：${resp.code}，原因：${resp.message}<br>是否重新进行登录？`,
-    //         title: '错误',
-    //         actions: {
-    //             'false': '取消',
-    //             'true': '跳转'
-    //         }
-    //     });
-    //     if (res) {
-    //         vm.$store.dispatch("Logout").then((resp) => {
-    //             vm.$router.push({ path: "/login" });
-    //         });
-    //     }
+//未授权、失败
+const resp = error.response.data

-    // } else if (resp.code !== 200) {
-    //     vm.$dialog.notify.error(`错误代码：${resp.code}，原因：${resp.message}`, {
-    //         position: "top-right",
-    //         timeout: 5000,
-    //     });
+
+if (resp.code == undefined && resp.message == undefined) {
+    alert("直接爆炸")
+    // vm.$dialog.notify.error("错误代码：无，原因：与服务器失去连接", {
+    //     position: "top-right",
+    //     timeout: 5000,
+    // });
+} else if (resp.code == 401) {
+    if (!isRelogin.show) {
+
+     
+
+    alert("登录过期！重新登录");
+    //登出
+    useUserStore().logOut().then(() => {
+        location.href = '/';
+      })
+
+      isRelogin.show = false;
+    }
+    // const router = useRouter();
+    // router.push({ path:"/login" });
+
+    // const res = await vm.$dialog.error({
+    //     text: `错误代码：${resp.code}，原因：${resp.message}<br>是否重新进行登录？`,
+    //     title: '错误',
+    //     actions: {
+    //         'false': '取消',
+    //         'true': '跳转'
+    //     }
+    // });
+    // if (res) {
+    //     vm.$router.push({ path: "/login" });
    // }

-    // store.dispatch("closeLoad");
+} else if (resp.code !== 200) {
+    alert("服务器内部错误")
+    // vm.$dialog.notify.error(`错误代码：${resp.code}，原因：${resp.message}`, {
+    //     position: "top-right",
+    //     timeout: 5000,
+    // });
+}
+
    return Promise.reject(error);
 });
 export default myaxios
--- a/Yi.Vue3.x.Vant/src/view/login.vue
+++ b/Yi.Vue3.x.Vant/src/view/login.vue
@@ -1,100 +1,129 @@
 <template>
-
-   <div class="div-top">
- 
-     <span class="title">农夫山泉</span>
-     <br>
-     <span class="subtitle">农夫山泉有点甜</span>
+  <div class="div-top">
+    <span class="title">农夫山泉</span>
+    <br />
+    <span class="subtitle">农夫山泉有点甜</span>
  </div>
  <div class="div-bottom">
-   <h5>密码登录</h5>
-     <van-field class="van-field-username" v-model="value" label="用户" placeholder="请输入用户名" />
-     <van-field class="van-field-password" v-model="value" label="密码" placeholder="请输入密码" />
-     <van-button type="primary">进入农夫山泉</van-button>
-     <p>其他方式登录<van-icon name="arrow" /></p>
- 
-     <van-row style="margin-top: 6rem;" >
-       <van-col span="24"><p> 第三方登录</p></van-col>
-       <van-col span="3"></van-col>
-       <van-col span="6"><van-icon name="like" size="2rem" /></van-col>
-       <van-col span="6"><van-icon name="like" size="2rem" /></van-col>
-       <van-col span="6"><van-icon name="like" size="2rem"/></van-col>
-       <van-col span="3"></van-col>
-     </van-row>
- 
+    <h5>密码登录</h5>
+    <van-field
+      class="van-field-username"
+      v-model="loginForm.username"
+      label="用户"
+      placeholder="请输入用户名"
+    />
+    <van-field
+      class="van-field-password"
+      v-model="loginForm.password"
+      label="密码"
+      placeholder="请输入密码"
+    />
+    <van-button type="primary" @click="login">进入农夫山泉</van-button>
+    <p>其他方式登录<van-icon name="arrow" /></p>
+
+    <van-row style="margin-top: 6rem">
+      <van-col span="24"><p>第三方登录</p></van-col>
+      <van-col span="3"></van-col>
+      <van-col span="6"><van-icon name="like" size="2rem" /></van-col>
+      <van-col span="6"><van-icon name="like" size="2rem" /></van-col>
+      <van-col span="6"><van-icon name="like" size="2rem" /></van-col>
+      <van-col span="3"></van-col>
+    </van-row>
  </div>
- 
- 
- 
- 
- 
- </template>
- <script setup lang="ts">
- import {ref} from 'vue';
- const value=ref("")
- 
- </script>
- <style scoped>
- .div-top{
-   background-color: aqua;
-   position:absolute;
-   top: 0;
-   left: 0;
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import useUserStore from "@/store/modules/user";
+import { Toast } from "vant";
+
+const router = useRouter();
+const redirect = ref(undefined);
+const loginForm = ref({
+  username: "cc",
+  password: "123456",
+  rememberMe: false,
+  code: "",
+  uuid: "",
+});
+const userStore = useUserStore();
+const login = () => {
+  // 调用action的登录方法
+  userStore
+    .login(loginForm.value)
+    .then((response: any) => {
+      Toast({
+        message: response.message,
+        position: "bottom",
+      });
+      router.push({ path: redirect.value || "/" });
+    })
+    .catch((response:any) => {
+      Toast({
+        message: response.message,
+        position: "bottom",
+      });
+      // loading.value = false;
+      // // 重新获取验证码
+      // if (captchaEnabled.value) {
+      //   getCode();
+      // }
+    });
+};
+</script>
+<style scoped>
+.div-top {
+  background-color: aqua;
+  position: absolute;
+  top: 0;
+  left: 0;
  right: 0;
  bottom: 60%;
- 
- }
- .div-bottom{
+}
+.div-bottom {
  background-color: bisque;
-  position:absolute;
-   top: 25%;
-   left: 0;
+  position: absolute;
+  top: 25%;
+  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 3rem 3rem 0rem 0rem;
  padding: 1rem 2rem 2rem 2rem;
- 
+
  /* min-height: 70%; */
- }
- .title{
-   position: absolute;
-   top: 15%;
-   transform: translateX(-50%);
-   font-size: 1.8rem;
-   font-weight: bolder;
- }
- .subtitle
- {
-   transform: translateX(-50%);
-   position: absolute;
-   top: 30%;
-   font-weight:lighter;
- }
- .van-field-username
- {
-   margin-top:2rem;
- }
- .van-field-password
- {
-   margin-top: 1rem;
- }
- h5{
-   text-align: left;
-   font-size: 1.2rem;
-   font-weight: bolder;
- }
- .div-bottom .van-button
- {
-   margin-top: 1rem;
-   width: 100%;
-   border-radius: 0.4rem;
- }
- .div-bottom p{
-   text-align: center;
- 
- };
- .row-bottom{
- 
- 
- }
- </style>
+}
+.title {
+  position: absolute;
+  top: 15%;
+  transform: translateX(-50%);
+  font-size: 1.8rem;
+  font-weight: bolder;
+}
+.subtitle {
+  transform: translateX(-50%);
+  position: absolute;
+  top: 30%;
+  font-weight: lighter;
+}
+.van-field-username {
+  margin-top: 2rem;
+}
+.van-field-password {
+  margin-top: 1rem;
+}
+h5 {
+  text-align: left;
+  font-size: 1.2rem;
+  font-weight: bolder;
+}
+.div-bottom .van-button {
+  margin-top: 1rem;
+  width: 100%;
+  border-radius: 0.4rem;
+}
+.div-bottom p {
+  text-align: center;
+}
+.row-bottom {
+}
+</style>
--- a/Yi.Vue3.x.Vant/src/view/main/recommend.vue
+++ b/Yi.Vue3.x.Vant/src/view/main/recommend.vue
@@ -30,7 +30,7 @@

        <van-col class="rowBody" span="24">{{ item.content }}</van-col>

-        <van-col
+        <!-- <van-col
          span="8"
          v-for="(image, imageIndex) in item.images"
          :key="imageIndex"
@@ -42,7 +42,7 @@
            :src="url + image"
            radius="5"
          />
-        </van-col>
+        </van-col> -->

        <van-col span="24" class="bottomRow">
          <van-grid direction="horizontal" :column-num="3">
--- a/Yi.Vue3.x.Vant/src/view/main/square.vue
+++ b/Yi.Vue3.x.Vant/src/view/main/square.vue
@@ -1,123 +1 @@
-<template>
-  <div class="div-top">
-    <span class="title">农夫山泉</span>
-    <br />
-    <span class="subtitle">农夫山泉有点甜</span>
-  </div>
-  <div class="div-bottom">
-    <h5>密码登录</h5>
-    <van-field
-      class="van-field-username"
-      v-model="loginForm.username"
-      label="用户"
-      placeholder="请输入用户名"
-    />
-    <van-field
-      class="van-field-password"
-      v-model="loginForm.password"
-      label="密码"
-      placeholder="请输入密码"
-    />
-    <van-button type="primary" @click="login">进入农夫山泉</van-button>
-    <p>其他方式登录<van-icon name="arrow" /></p>
-
-    <van-row style="margin-top: 6rem">
-      <van-col span="24"><p>第三方登录</p></van-col>
-      <van-col span="3"></van-col>
-      <van-col span="6"><van-icon name="like" size="2rem" /></van-col>
-      <van-col span="6"><van-icon name="like" size="2rem" /></van-col>
-      <van-col span="6"><van-icon name="like" size="2rem" /></van-col>
-      <van-col span="3"></van-col>
-    </van-row>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref } from "vue";
-import { useRouter } from "vue-router";
-import useUserStore from "@/store/modules/user";
-const router = useRouter();
-const redirect = ref(undefined);
-const loginForm = ref({
-  username: "cc",
-  password: "123456",
-  rememberMe: false,
-  code: "",
-  uuid: "",
-});
-const userStore = useUserStore();
-const login=()=>{
-
- // 调用action的登录方法
-userStore
-  .login(loginForm.value)
-  .then(() => {
-    alert("登录成功");
-    router.push({ path: redirect.value || "/" });
-  })
-  .catch(() => {
-    alert("登录失败");
-    // loading.value = false;
-    // // 重新获取验证码
-    // if (captchaEnabled.value) {
-    //   getCode();
-    // }
-  }); 
-}
-
-</script>
-<style scoped>
-.div-top {
-  background-color: aqua;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 60%;
-}
-.div-bottom {
-  background-color: bisque;
-  position: absolute;
-  top: 25%;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 3rem 3rem 0rem 0rem;
-  padding: 1rem 2rem 2rem 2rem;
-
-  /* min-height: 70%; */
-}
-.title {
-  position: absolute;
-  top: 15%;
-  transform: translateX(-50%);
-  font-size: 1.8rem;
-  font-weight: bolder;
-}
-.subtitle {
-  transform: translateX(-50%);
-  position: absolute;
-  top: 30%;
-  font-weight: lighter;
-}
-.van-field-username {
-  margin-top: 2rem;
-}
-.van-field-password {
-  margin-top: 1rem;
-}
-h5 {
-  text-align: left;
-  font-size: 1.2rem;
-  font-weight: bolder;
-}
-.div-bottom .van-button {
-  margin-top: 1rem;
-  width: 100%;
-  border-radius: 0.4rem;
-}
-.div-bottom p {
-  text-align: center;
-}
-.row-bottom {
-}
-</style>
+<template>这里是广场</template>
--- a/Yi.Vue3.x.Vant/src/view/my.vue
+++ b/Yi.Vue3.x.Vant/src/view/my.vue
@@ -1,211 +1,239 @@
 <template>
+  <van-row class="headRow">
+    <van-col span="2"><van-icon name="scan" size="1.5rem" /></van-col>
+    <van-col span="20"></van-col>
+    <van-col span="2"
+      ><van-icon name="setting-o" size="1.5rem" @click="show = true"
+    /></van-col>
+  </van-row>

+  <van-row class="bodyRow">
+    <van-col span="6" class="leftCol">
+      <van-image
+        round
+        width="4rem"
+        height="4rem"
+        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+      />
+    </van-col>
+    <van-col span="12" class="title"><span>大白不在家</span></van-col>
+    <van-col span="6" class="subtitle"
+      ><span>个人主页<van-icon name="arrow" /></span
+    ></van-col>

+    <van-col span="6" class="bodyCol"
+      ><div><span>6</span><br />关注</div></van-col
+    >
+    <van-col span="6" class="bodyCol"
+      ><div><span>3</span><br />粉丝</div></van-col
+    >
+    <van-col span="6" class="bodyCol"
+      ><div><span>0</span><br />人气</div></van-col
+    >
+    <van-col span="6" class="bodyCol"
+      ><div><span>3</span><br />钱钱</div></van-col
+    >

-    <van-row class="headRow">
-        <van-col span="2"><van-icon name="scan" size="1.5rem"/></van-col>
-        <van-col span="20"></van-col>
-        <van-col span="2"><van-icon name="setting-o" size="1.5rem" @click="show=true"/></van-col>
-    </van-row>   
+    <van-col span="24">
+      <van-row class="btnRow">
+        <van-col span="12">
+          <van-button class="btn">
+            <van-icon name="bag" size="1.8rem" /> 我的购物<van-icon
+              name="arrow"
+              size="1.2rem" /></van-button
+        ></van-col>

-    <van-row class="bodyRow">
-        <van-col span="6" class="leftCol">
-          <van-image
-            round
-            width="4rem"
-            height="4rem"
-            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
-          />
-          </van-col>
-          <van-col span="12" class="title"><span >大白不在家</span></van-col>
-          <van-col span="6" class="subtitle"><span >个人主页<van-icon name="arrow" /></span></van-col>
+        <van-col span="12">
+          <van-button class="btn"
+            ><van-icon name="send-gift" size="1.8rem" />我的签到<van-icon
+              name="arrow"
+              size="1.2rem" /></van-button
+        ></van-col>
+      </van-row>
+    </van-col>

+    <AppGrid class="grid" :data="data1"></AppGrid>
+    <AppGrid class="grid" :data="data2"></AppGrid>
+    <AppGrid class="grid" :data="data3"></AppGrid>
+  </van-row>

-          <van-col span="6" class="bodyCol"><div><span>6</span><br>关注</div></van-col>
-          <van-col span="6" class="bodyCol"><div><span>3</span><br>粉丝</div></van-col>
-          <van-col span="6" class="bodyCol"><div><span>0</span><br>人气</div></van-col>
-          <van-col span="6" class="bodyCol"><div><span>3</span><br>钱钱</div></van-col>
+  <van-popup
+    v-model:show="show"
+    position="right"
+    :style="{ height: '100%', width: '100%', backgroundColor: '#F8F8F8' }"
+  >
+    <van-nav-bar
+      title="设置"
+      left-text="返回"
+      left-arrow
+      @click-left="show = false"
+    />
+    <van-cell-group>
+      <van-cell title="账户与安全" is-link />
+      <van-cell title="黑名单" is-link />
+      <van-cell title="推送设置" is-link />
+      <van-cell title="隐私管理" is-link />
+      <van-cell title="通用设置" is-link />
+    </van-cell-group>
+    <van-cell-group class="group">
+      <van-cell title="家庭入驻" is-link />
+      <van-cell title="社区入驻" is-link />
+    </van-cell-group>

-          <van-col span="24">
-        <van-row class="btnRow">
-            <van-col span="12" >   <van-button class="btn"  > <van-icon name="bag"  size="1.8rem"/> 我的购物<van-icon name="arrow" size="1.2rem" /></van-button></van-col>
+    <van-cell-group class="group">
+      <van-cell title="清理缓存" is-link />
+      <van-cell title="检测更新" is-link />
+      <van-cell title="关于我们" is-link />
+      <van-cell title="给个好评" is-link />
+    </van-cell-group>

-            <van-col span="12">   <van-button class="btn"><van-icon name="send-gift" size="1.8rem" />我的签到<van-icon name="arrow" size="1.2rem"/></van-button></van-col>
-        </van-row>
-          </van-col >
-
-
-          <AppGrid class="grid" :data='data1'></AppGrid>
-          <AppGrid class="grid" :data='data2'></AppGrid>
-          <AppGrid class="grid" :data='data3'></AppGrid>
-    </van-row>
-
-    <van-popup v-model:show="show" position="right" :style="{ height:'100%',width:'100%',backgroundColor:'#F8F8F8' }" >
-
-      <van-nav-bar
-  title="设置"
-  left-text="返回"
-  left-arrow
-  @click-left="show=false"
-/>
-      <van-cell-group>
-        <van-cell title="账户与安全" is-link />
-        <van-cell title="黑名单" is-link />
-        <van-cell title="推送设置" is-link />
-        <van-cell title="隐私管理" is-link />
-        <van-cell title="通用设置" is-link />
-      </van-cell-group>
-      <van-cell-group class="group">
-        <van-cell title="家庭入驻" is-link />
-        <van-cell title="社区入驻" is-link />
-      </van-cell-group>
-
-      <van-cell-group class="group">
-        <van-cell title="清理缓存" is-link />
-        <van-cell title="检测更新" is-link />
-        <van-cell title="关于我们" is-link />
-        <van-cell title="给个好评" is-link />
-      </van-cell-group>
-
-      <van-button type="danger">退出登录</van-button>
-    </van-popup>
-    <!-- <van-popup v-model:show="show" position="right">
+    <van-button type="danger" @click="outLog">退出登录</van-button>
+  </van-popup>
+  <!-- <van-popup v-model:show="show" position="right">
     <div class="body-div"> 内容</div>
      </van-popup> -->
 </template>
 <script setup lang="ts">
-import AppGrid from '@/components/AppGrid.vue'
-import {AppGridData} from '@/type/class/AppGridData.ts'
-import {ref} from 'vue'
-const show=ref<boolean>(false);
-let data1 :AppGridData={
-  head:"个人中心",
-  body:[
-  {
-    title:"我的消息",
-    icon:"comment-o"
-  },
-  {
-    title:"我的聊天",
-    icon:"chat-o"
-  },
-  {
-    title:"我的喜欢",
-    icon:"like-o"
-  },
-  {
-    title:"我的关注",
-    icon:"user-o"
-  },
-]
+import AppGrid from "@/components/AppGrid.vue";
+import { AppGridData } from "@/type/class/AppGridData.ts";
+import { ref } from "vue";
+import { Dialog } from "vant";
+import useUserStore from "@/store/modules/user";
+const show = ref<boolean>(false);
+let data1: AppGridData = {
+  head: "个人中心",
+  body: [
+    {
+      title: "我的消息",
+      icon: "comment-o",
+    },
+    {
+      title: "我的聊天",
+      icon: "chat-o",
+    },
+    {
+      title: "我的喜欢",
+      icon: "like-o",
+    },
+    {
+      title: "我的关注",
+      icon: "user-o",
+    },
+  ],
 };
-let data2 :AppGridData={
-  head:"功能",
-  body:[
-  {
-    title:"排行榜",
-    icon:"medal-o"
-  },
-  {
-    title:"活动报名",
-    icon:"balance-list-o"
-  },
-  {
-    title:"钱钱兑换",
-    icon:"gem-o"
-  },
-  {
-    title:"全网上新",
-    icon:"gift-card-o"
-  },
-]
+let data2: AppGridData = {
+  head: "功能",
+  body: [
+    {
+      title: "排行榜",
+      icon: "medal-o",
+    },
+    {
+      title: "活动报名",
+      icon: "balance-list-o",
+    },
+    {
+      title: "钱钱兑换",
+      icon: "gem-o",
+    },
+    {
+      title: "全网上新",
+      icon: "gift-card-o",
+    },
+  ],
 };
-let data3 :AppGridData={
-  head:"服务",
-  body:[
-  {
-    title:"客服",
-    icon:"service-o"
-  },
-  {
-    title:"小黑屋",
-    icon:"wap-home-o"
-  },
-  {
-    title:"邀请好友",
-    icon:"friends-o"
-  }
-]
+let data3: AppGridData = {
+  head: "服务",
+  body: [
+    {
+      title: "客服",
+      icon: "service-o",
+    },
+    {
+      title: "小黑屋",
+      icon: "wap-home-o",
+    },
+    {
+      title: "邀请好友",
+      icon: "friends-o",
+    },
+  ],
+};
+const outLog = () => {
+  Dialog.confirm({
+    title: "提示",
+    message: "确定退出当前用户吗？",
+  })
+    .then(() => {
+      useUserStore()
+        .logOut()
+        .then((response: any) => {
+          location.href = "/";
+        });
+    })
+    .catch(() => {
+      // on cancel
+    });
 };
 </script>
 <style scoped>
-.grid{
-    width: 100%;
-    margin-top: 1rem;
+.grid {
+  width: 100%;
+  margin-top: 1rem;
 }
-.headRow{
-    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
+.headRow {
+  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
 }
-.bodyRow
-{
-    text-align: left;
-    margin-top: 1.5rem;
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;;
-    padding-bottom: 4rem;
+.bodyRow {
+  text-align: left;
+  margin-top: 1.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-bottom: 4rem;
 }

-.title
-{
-    font-size: 1.5rem;
-    line-height: 4rem;
-}
-.subtitle
-{
+.title {
+  font-size: 1.5rem;
  line-height: 4rem;
-    color:#CBCBCB ;
 }
-.bodyCol{
-    text-align: center;
-    font-size: 1.2rem;
-    margin-top: 1rem;
+.subtitle {
+  line-height: 4rem;
+  color: #cbcbcb;
 }
-.btn{
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    background-color: #FFFFFF;
-    border:none;
-    color: black;
+.bodyCol {
+  text-align: center;
+  font-size: 1.2rem;
+  margin-top: 1rem;
 }
-.btnRow{
-    margin-top: 1.5rem;
-    box-shadow: 0rem 0rem 0.2rem 0.2rem #f3f3f3;
+.btn {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: #ffffff;
+  border: none;
+  color: black;
 }
-.btnRow .van-button
-{
+.btnRow {
+  margin-top: 1.5rem;
+  box-shadow: 0rem 0rem 0.2rem 0.2rem #f3f3f3;
+}
+.btnRow .van-button {
  font-size: 1.2rem;
 }
-.van-icon-send-gift
-{
+.van-icon-send-gift {
  margin-right: 0.5rem;
 }
-.btnRow .van-icon-arrow
-{
+.btnRow .van-icon-arrow {
  margin-left: 0.45rem;
 }
-.van-cell
-{
+.van-cell {
  text-align: left;
 }
-.group
-{
-margin-top: 1rem;
+.group {
+  margin-top: 1rem;
 }
-.van-popup .van-button
-{
+.van-popup .van-button {
  width: 90%;
  margin-top: 2rem;
 }
-
 </style>