个人中心，我创建的角色编辑删除

src/main.js

@@ -3,6 +3,10 @@ import Vue from "vue";
 import Cookies from "js-cookie";
 
 import Element from "element-ui";
+import Vant from 'vant';
+
+
+import 'vant/lib/index.css';
 import "./assets/styles/element-variables.scss";
 
 import "@/assets/styles/tailwindcss.css"
@@ -80,6 +84,7 @@ Vue.component("FileUpload", FileUpload);
 Vue.component("ImageUpload", ImageUpload);
 Vue.component("ImagePreview", ImagePreview);
 
+Vue.use(Vant);
 Vue.use(directive);
 Vue.use(plugins);
 Vue.use(VueMeta);

src/router/index.js

@@ -72,6 +72,12 @@ export const constantRoutes = [
         component: () => import("@/views/user/index"),
         name: "user",
       },
+      // 移动端用户详情二级页面
+      {
+        path: "/userComponentH5",
+        component: () => import("@/views/user/componentH5"),
+        name: "componentH5",
+      },
     ],
   },
   // 隐私政策

src/views/create/createH5.vue

@@ -109,6 +109,7 @@
 
 <script>
 import TitleH5 from "@/views/components/titleH5.vue"
+import { detailApi } from "@/api/detail.js"
 import { addCharacterApi, personalityListApi, updateCharacterApi } from "@/api/create.js"
 import {
   getModelListApi,
@@ -168,6 +169,12 @@ export default {
     this.getPersonalityList()
     this.getModelList()
     // console.log(this.$route.params.searchValue, 'this.$route.params.searchValue');
+    if (this.$route.query.id) {
+      detailApi(this.$route.query.id).then(res => {
+        console.log(res, '详情');
+        this.form = res.data
+      })
+    }
   },
   methods: {
     // 下一步

src/views/create/createSceneH5.vue

@@ -1,10 +1,8 @@
 <template>
   <div class=" w-full h-full app-pageContainer" style="overflow: hidden;">
-    <div class=" w-full py-3 px-10 border-b border-gray-200">
-      创建场景
-    </div>
+    <TitleH5 titleName="创建场景" />
     <!-- 第一步场景基本信息 -->
-    <div v-show="active == 1" class="px-6 py-8 mx-auto overflow-y-auto w-full"
+    <div v-show="active == 1" class="px-6 pb-8 mx-auto overflow-y-auto w-full"
       style="height: calc(100% - 49px - 80px - 60px);">
       <div>
         <div class="py-4 flex flex-col">
@@ -132,6 +130,7 @@
 </template>
 
 <script>
+import TitleH5 from "@/views/components/titleH5.vue"
 import { getToken } from "@/utils/auth";
 import {
   getModelListApi,
@@ -141,6 +140,9 @@ import { addSceneApi, getSceneDetailApi, editSceneApi } from "@/api/create.js"
 import { detailApi } from "@/api/detail.js"
 import { queryCharactersApi } from "@/api/profile.js"
 export default {
+  components: {
+    TitleH5
+  },
   data() {
     return {
       active: 1,

src/views/profile/profileH5.vue

@@ -4,13 +4,13 @@
       <div>我的</div>
     </div>
     <el-tabs v-model="query.type" @tab-click="tabChange" class="tabs w-full">
-      <el-tab-pane label="公开" :name="0"></el-tab-pane>
-      <el-tab-pane label="非公开" :name="1"></el-tab-pane>
+      <el-tab-pane label="公开" name="0"></el-tab-pane>
+      <el-tab-pane label="非公开" name="1"></el-tab-pane>
     </el-tabs>
     <div class="lietRom flex-1 overflow-auto" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
       <div class="list mt-4">
         <div v-for="(item, index) in characterList" :key="index"
-          class="box2 relative rounded-lg overflow-hidden shadow-lg cursor-pointer" @click="toDetail(item)">
+          class="box2 relative rounded-lg overflow-hidden shadow-lg cursor-pointer" @click="clickShowPopup(item)">
           <div class="w-full overflow-hidden">
             <img :src="baseApi + item.picture" class="w-full img" />
           </div>
@@ -43,14 +43,35 @@
       <p class="w-full py-4 text-gray-400 text-center" v-if="loading">加载中...</p>
       <p class="w-full py-4 text-gray-400 text-center" v-if="noMore">没有更多了</p>
     </div>
+    <van-action-sheet v-model="showPopup">
+      <div class="buttons mb-6">
+        <van-cell v-if="selectObj.scene == 1" title="场景名称" :value="selectObj.name" />
+        <van-cell title="查看资料" is-link @click="toDetail" />
+        <van-cell title="删除" is-link @click="deleteData" />
+        <div class="flex justify-around p-4">
+          <van-button class="textButton w-28 rounded-full" size="small" @click="toChat">开始对话</van-button>
+          <van-button class="buttonBg1 w-28 rounded-full" size="small" @click="toCreate">编辑</van-button>
+        </div>
+      </div>
+
+    </van-action-sheet>
   </div>
 </template>
 
 <script>
+import { Dialog } from 'vant';
 import { queryCharacterAndSceneApi } from "@/api/profile.js"
+import {
+  deleteSceneApi,
+  deleteCharacterApi,
+  setCharacterShowApi,
+  editSceneApi
+} from "@/api/create.js"
 export default {
   data() {
     return {
+      showPopup: false,
+      selectObj: {},
       query: {
         pageSize: 10,
         pageNum: 2,
@@ -104,11 +125,24 @@ export default {
         this.loading = false
       })
     },
-    toDetail(item) {
+    clickShowPopup(item) {
       console.log(item, 'item');
       this.selectObj = item
-      this.toChat()
-      // this.dialogVisible = true
+      this.showPopup = true
+    },
+    toDetail() {
+      let query = {}
+      if (this.selectObj.scene == 0) {
+        // 点击是角色
+        query.id = this.selectObj.id
+      } else if (this.selectObj.scene == 1) {
+        // 点击是场景
+        query.id = this.selectObj.characterId
+      }
+      this.$router.push({
+        path: '/detailH5',
+        query: query
+      })
     },
     // 前往聊天页面
     toChat() {
@@ -131,6 +165,68 @@ export default {
       }
 
     },
+    // 前往编辑页面
+    toCreate() {
+      if (this.selectObj.scene == 0) {
+        // 点击是角色
+        this.$router.push({
+          path: '/create',
+          query: {
+            id: this.selectObj.id
+          }
+        })
+      } else if (this.selectObj.scene == 1) {
+        // 点击是场景
+        this.$router.push({
+          path: '/createScene',
+          query: {
+            sceneId: this.selectObj.id,
+            characterId: this.selectObj.characterId
+          }
+        })
+      }
+    },
+    // 删除
+    deleteData() {
+      if (this.selectObj.scene == 0) {
+        // 删除角色
+        Dialog.confirm({
+          title: '提示',
+          message: '此操作将永久删除该角色及其所有聊天记录, 是否继续?',
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          deleteCharacterApi(this.selectObj.id).then(res => {
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+            this.showPopup = false
+            this.characterList = []
+            this.getCharacterList()
+          })
+        })
+      } else if (this.selectObj.scene == 1) {
+        // 删除场景
+        this.$confirm('此操作将永久删除该场景及其所有聊天记录, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          deleteSceneApi(this.selectObj.id).then(res => {
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+            this.showPopup = false
+            this.characterList = []
+            this.getCharacterList()
+          })
+        })
+
+      }
+    },
   }
 }
 </script>

src/views/profile/profilePC.vue

@@ -203,7 +203,6 @@ export default {
           }
         })
       }
-
     },
     // 前往聊天页面
     toChat() {

src/views/user/componentH5.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class=" w-full h-full ">
+    <TitleH5 :titleName="title" />
+    <div class="content">
+      <UserInfo v-if="type == 'userInfo'" />
+      <Consume v-if="type == 'consume'" />
+      <Opinion v-if="type == 'opinion'" />
+      <Invite v-if="type == 'invite'" />
+      <SignIn v-if="type == 'signIn'" />
+    </div>
+  </div>
+</template>
+
+<script>
+import TitleH5 from "@/views/components/titleH5.vue"
+import UserInfo from "./components/userInfo.vue"
+import Consume from "./components/consume.vue"
+import Opinion from "./components/opinion.vue"
+import Invite from "./components/invite.vue"
+import SignIn from "./components/signIn.vue"
+export default {
+  components: {
+    TitleH5,
+    UserInfo,
+    Consume,
+    Opinion,
+    Invite,
+    SignIn
+  },
+  data() {
+    return {
+      title: 'title',
+      active: '1'
+    }
+  },
+  mounted() {
+    console.log(this.$route.query, 'this.$route');
+    this.type = this.$route.query.type
+    this.titleText()
+  },
+  methods: {
+    titleText() {
+      switch (this.type) {
+        case 'userInfo':
+          this.title = '用户信息'
+          break
+        case 'consume':
+          this.title = '消费明细'
+          break
+        case 'invite':
+          this.title = '邀请有礼'
+          break
+        case 'signIn':
+          this.title = '签到'
+          break
+        case 'opinion':
+          this.title = '意见反馈'
+          break
+        case '5':
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: calc(100% - 30px - 40px - 5px);
+  padding: 10px 15px;
+
+  >div {
+    padding: 10px !important;
+    border: solid 1px #ccc;
+    border-radius: 20px;
+    height: calc(100% - 20px);
+    overflow-y: auto;
+  }
+}
+</style>
+<style scoped>
+.content>>>.h-52 {
+  height: 160px;
+}
+
+.content>>>.row {
+  flex-direction: column;
+}
+</style>

src/views/user/components/opinion.vue

@@ -4,9 +4,10 @@
       <div class=" text-xl mb-4 mt-10">意见反馈</div>
       <div class=" w-full rounded-xl w-full overflow-hidden">
         <div class="px-6 bg-white form">
-          <div class="flex justify-between items-start py-6">
+          <div class="row flex justify-between items-start py-6">
             <div class="w-40">反馈内容</div>
-            <el-input type="textarea" resize="none" :autosize="{ minRows: 5, maxRows: 5}" v-model="form.content" placeholder="请输入内容"></el-input>
+            <el-input type="textarea" resize="none" :autosize="{ minRows: 5, maxRows: 5 }" v-model="form.content"
+              placeholder="请输入内容"></el-input>
           </div>
           <div class="flex justify-between items-center py-6">
             <div class="w-52"></div>
@@ -48,6 +49,4 @@ export default {
 }
 </script>
 
-<style>
-
-</style>
+<style></style>

src/views/user/index.vue

@@ -1,117 +1,32 @@
 <template>
-  <div class="w-full h-full flex">
-    <div class="p-5 flex flex-col h-full border-r border-gray-200" style="width: 300px;">
-      <div class=" text-xl py-3">
-        账户
-      </div>
-      <div class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
-        :class="active === 'userInfo' ? 'bg-gray-100' : ''" @click="menuClick('userInfo')">
-        <i class="el-icon-user text-xl mr-2"></i>
-        用户信息
-      </div>
-      <div class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
-        :class="active === 'consume' ? 'bg-gray-100' : ''" @click="menuClick('consume')">
-        <i class="el-icon-setting text-xl mr-2"></i>
-        消费明细
-      </div>
-      <!-- <div 
-        class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
-        :class="active === '3' ? 'bg-gray-100' : ''"
-        @click="menuClick('3')"
-      >
-        <i class="el-icon-setting text-xl mr-2"></i>
-        用户偏好
-      </div> -->
-      <!-- <div 
-        class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
-        :class="active === '4' ? 'bg-gray-100' : ''"
-        @click="menuClick('4')"
-      >
-        <i class="el-icon-medal text-xl mr-2"></i>
-        会员
-      </div> -->
-      <div class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
-        :class="active === 'invite' ? 'bg-gray-100' : ''" @click="menuClick('invite')">
-        <i class="el-icon-present text-xl mr-2"></i>
-        邀请有礼
-      </div>
-      <div class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
-        :class="active === 'signIn' ? 'bg-gray-100' : ''" @click="menuClick('signIn')">
-        <i class="el-icon-present text-xl mr-2"></i>
-        签到
-      </div>
-      <div class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
-        :class="active === 'opinion' ? 'bg-gray-100' : ''" @click="menuClick('opinion')">
-        <i class="el-icon-message text-xl mr-2"></i>
-        意见反馈
-      </div>
-      <div class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
-        :class="active === 'logOut' ? 'bg-gray-100' : ''" @click="menuClick('logOut')">
-        <i class="fa-solid fa-arrow-right-from-bracket text-xl mr-2"></i>
-        退出登录
-      </div>
-      <div class=" text-gray-500 mt-2 text-sm">
-        © 2024 Xchat
-        <a :href="`${baseURL}/#/termOfUse`" target="_blank" class="underline mx-1">用户协议</a>
-        &amp;
-        <a :href="`${baseURL}/#/privacyPolicy`" target="_blank" class="underline mx-1">隐私政策</a>
-        v1.8.1
-      </div>
-    </div>
-    <div class=" flex-1 h-full bg-gray-50">
-      <UserInfo v-if="active == 'userInfo'" />
-      <Consume v-if="active == 'consume'" />
-      <Invite v-if="active == 'invite'" />
-      <Opinion v-if="active == 'opinion'" />
-      <SignIn v-if="active == 'signIn'" />
-    </div>
+  <div class="app-pageContainer">
+    <UserPC v-if="!$store.state.app.isMobile" />
+    <UserH5 v-else />
   </div>
 </template>
 
 <script>
-import UserInfo from "./components/userInfo.vue"
-import Consume from "./components/consume.vue"
-import Opinion from "./components/opinion.vue"
-import Invite from "./components/invite.vue"
-import SignIn from "./components/signIn.vue"
+import UserH5 from "./userH5.vue"
+import UserPC from "./userPC.vue"
 
 export default {
+  name: "home",
   components: {
-    UserInfo,
-    Consume,
-    Opinion,
-    Invite,
-    SignIn
+    UserH5,
+    UserPC
   },
   data() {
     return {
-      baseURL: process.env.VUE_APP_BASE_URL,
-      active: 'userInfo',
-      userInfo: {
-        name: '张三',
-        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
-      }
+
     }
   },
   mounted() {
-    console.log(process.env.VUE_APP_BASE_API, 'process.env.VUE_APP_BASE_API');
+
   },
   methods: {
-    menuClick(i) {
-      this.active = i
-      switch (i) {
-        case '1':
-          // this.$router.push('/')
-          break
-        case 'logOut':
-          this.$store.dispatch('FedLogOut').then(() => {
-            this.$router.push('/')
-          })
-          break
-      }
-    }
-  }
-}
+
+  },
+};
 </script>
 
-<style></style>
+<style scoped lang="scss"></style>

src/views/user/userH5.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="w-full h-full relative" style="padding-bottom: 60px;">
+    <div class="flex justify-between w-full px-4 py-6 text-white top" @click="toPage('userInfo')">
+      <div class="flex">
+        <div class="w-14 h-14 border-2 border-gray-50 rounded-full bg-gray-300">
+          <img class="w-full h-full rounded-full" :src="baseURL + userInfo.profilePicture" alt="">
+        </div>
+        <div class="flex flex-col ml-4">
+          <div>{{ userInfo.userName }}</div>
+        </div>
+      </div>
+      <i class="el-icon-arrow-right"></i>
+    </div>
+    <div class="boxs p-5 border-gray-200 shadow-md rounded-md">
+      <!-- <div class="box px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
+        :class="active === 'userInfo' ? '' : ''" @click="menuClick('userInfo')">
+        <i class="el-icon-user text-xl"></i>
+        用户信息
+      </div> -->
+      <div class="box px-2 py-2 flex items-center rounded-md cursor-pointer " @click="toPage('consume')">
+        <i class="el-icon-setting text-xl"></i>
+        消费明细
+      </div>
+      <div class="box px-2 py-2 flex items-center rounded-md cursor-pointer " @click="toPage('invite')">
+        <i class="el-icon-present text-xl"></i>
+        邀请有礼
+      </div>
+      <!-- <div class="box px-2 py-2 flex items-center rounded-md cursor-pointer " @click="toPage('signIn')">
+        <i class="el-icon-present text-xl"></i>
+        签到
+      </div> -->
+      <div class="box px-2 py-2 flex items-center rounded-md cursor-pointer " @click="toPage('opinion')">
+        <i class="el-icon-message text-xl"></i>
+        意见反馈
+      </div>
+      <div class="box px-2 py-2 flex items-center rounded-md cursor-pointer " @click="toPage('logOut')">
+        <i class="fa-solid fa-arrow-right-from-bracket text-xl"></i>
+        退出登录
+      </div>
+
+    </div>
+    <div class="w-full text-gray-500 mb-4 px-4 text-sm absolute" style="bottom: 60px;">
+      © 2024 Xchat
+      <a :href="`${baseURL}/#/termOfUse`" target="_blank" class="underline mx-1">用户协议</a>
+      &amp;
+      <a :href="`${baseURL}/#/privacyPolicy`" target="_blank" class="underline mx-1">隐私政策</a>
+      v1.8.1
+    </div>
+  </div>
+</template>
+
+<script>
+import { getInfo } from '@/api/login'
+
+export default {
+
+  data() {
+    return {
+      baseURL: process.env.VUE_APP_BASE_URL,
+      active: 'userInfo',
+      userInfo: {}
+    }
+  },
+  mounted() {
+    console.log(process.env.VUE_APP_BASE_API, 'process.env.VUE_APP_BASE_API');
+    this.getUserInfo()
+  },
+  methods: {
+    toPage(type) {
+      this.$router.push({
+        path: '/userComponentH5',
+        query: { type }
+      })
+    },
+    getUserInfo() {
+      console.log(this.$store, 'this.$store');
+      let params = {
+        userId: this.$store.state.user.userId
+      }
+      getInfo(params).then(res => {
+        console.log(res, 'resUserInfo')
+        this.userInfo = res.data
+      })
+    },
+    menuClick(i) {
+      this.active = i
+      switch (i) {
+        case '1':
+          // this.$router.push('/')
+          break
+        case 'logOut':
+          this.$store.dispatch('FedLogOut').then(() => {
+            this.$router.push('/')
+          })
+          break
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.UserInfo {
+  padding: 10px 10px;
+}
+
+.top {
+  background: linear-gradient(var(--bg-color1) 20%, #fff);
+}
+
+.boxs {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 22vw 22vw;
+  gap: 10px;
+  margin: 15px;
+  width: calc(100% - 30px);
+  padding: 10px;
+}
+
+.box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: var(--bg-color4);
+  color: #fff;
+  font-size: 14px;
+}
+</style>

src/views/user/userPC.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="w-full h-full flex">
+    <div class="p-5 flex flex-col h-full border-r border-gray-200" style="width: 300px;">
+      <div class=" text-xl py-3">
+        账户
+      </div>
+      <div class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
+        :class="active === 'userInfo' ? 'bg-gray-100' : ''" @click="menuClick('userInfo')">
+        <i class="el-icon-user text-xl mr-2"></i>
+        用户信息
+      </div>
+      <div class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
+        :class="active === 'consume' ? 'bg-gray-100' : ''" @click="menuClick('consume')">
+        <i class="el-icon-setting text-xl mr-2"></i>
+        消费明细
+      </div>
+      <!-- <div 
+        class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
+        :class="active === '3' ? 'bg-gray-100' : ''"
+        @click="menuClick('3')"
+      >
+        <i class="el-icon-setting text-xl mr-2"></i>
+        用户偏好
+      </div> -->
+      <!-- <div 
+        class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
+        :class="active === '4' ? 'bg-gray-100' : ''"
+        @click="menuClick('4')"
+      >
+        <i class="el-icon-medal text-xl mr-2"></i>
+        会员
+      </div> -->
+      <div class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
+        :class="active === 'invite' ? 'bg-gray-100' : ''" @click="menuClick('invite')">
+        <i class="el-icon-present text-xl mr-2"></i>
+        邀请有礼
+      </div>
+      <div class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
+        :class="active === 'signIn' ? 'bg-gray-100' : ''" @click="menuClick('signIn')">
+        <i class="el-icon-present text-xl mr-2"></i>
+        签到
+      </div>
+      <div class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
+        :class="active === 'opinion' ? 'bg-gray-100' : ''" @click="menuClick('opinion')">
+        <i class="el-icon-message text-xl mr-2"></i>
+        意见反馈
+      </div>
+      <div class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
+        :class="active === 'logOut' ? 'bg-gray-100' : ''" @click="menuClick('logOut')">
+        <i class="fa-solid fa-arrow-right-from-bracket text-xl mr-2"></i>
+        退出登录
+      </div>
+      <div class=" text-gray-500 mt-2 text-sm">
+        © 2024 Xchat
+        <a :href="`${baseURL}/#/termOfUse`" target="_blank" class="underline mx-1">用户协议</a>
+        &amp;
+        <a :href="`${baseURL}/#/privacyPolicy`" target="_blank" class="underline mx-1">隐私政策</a>
+        v1.8.1
+      </div>
+    </div>
+    <div class=" flex-1 h-full bg-gray-50">
+      <UserInfo v-if="active == 'userInfo'" />
+      <Consume v-if="active == 'consume'" />
+      <Invite v-if="active == 'invite'" />
+      <Opinion v-if="active == 'opinion'" />
+      <SignIn v-if="active == 'signIn'" />
+    </div>
+  </div>
+</template>
+
+<script>
+import UserInfo from "./components/userInfo.vue"
+import Consume from "./components/consume.vue"
+import Opinion from "./components/opinion.vue"
+import Invite from "./components/invite.vue"
+import SignIn from "./components/signIn.vue"
+
+export default {
+  components: {
+    UserInfo,
+    Consume,
+    Opinion,
+    Invite,
+    SignIn
+  },
+  data() {
+    return {
+      baseURL: process.env.VUE_APP_BASE_URL,
+      active: 'userInfo',
+      userInfo: {
+        name: '张三',
+        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
+      }
+    }
+  },
+  mounted() {
+    console.log(process.env.VUE_APP_BASE_API, 'process.env.VUE_APP_BASE_API');
+  },
+  methods: {
+    menuClick(i) {
+      this.active = i
+      switch (i) {
+        case '1':
+          // this.$router.push('/')
+          break
+        case 'logOut':
+          this.$store.dispatch('FedLogOut').then(() => {
+            this.$router.push('/')
+          })
+          break
+      }
+    }
+  }
+}
+</script>
+
+<style></style>