在 My.vue 页面中实现用户后台管理

src/router/index.js

@@ -2,6 +2,8 @@ import VueRouter from 'vue-router'
 import Vue from 'vue'
 
 // 懒加载引入页面组件，es6语法
+// ********************************************************************************************************************
+// 应用主页
 const Home = () => import('views/home/Index')
 const TimelineIndex = () => import('views/home/Timeline')
 const StatusPage = () => import('views/home/Status')
@@ -18,37 +20,51 @@ const ArticleIndex = () => import('views/home/Article')
 const ArticlePage = () => import('views/home/ArticlePage')
 const MessageStream = () => import('views/home/MessageStream1')
 const Search = () => import('views/home/Search')
+const DiscoverIndex = () => import('views/home/Discover')
+const BdMap = () => import('views/home/BdMap')
+const AMap = () => import('views/home/AMap')
+const Vip = () => import('views/vip/Vip')
 
 // ********************************************************************************************************************
-const My = () => import('views/user/My')
+// 用户前台主页
 const UserHome = () => import('views/user/Home')
 const UserVideo = () => import('views/user/Home')
 const UserImage = () => import('views/user/Home')
 const UserAudio = () => import('views/user/Home')
 const UserArticle = () => import('views/user/Home')
 const UserRelation = () => import('views/user/UserRelation')
-const CollectionIndex = () => import('views/user/Collection')
-const HistoryIndex = () => import('views/user/History')
-const PostPublish = () => import('views/post/PostPublish')
-const PostPublishVideo = () => import('views/post/PostPublish')
+
+// ********************************************************************************************************************
+// 用户后台主页
+const My = () => import('views/my/My')
+const MyProfile = () => import('views/my/MyProfile')
+const MyVip = () => import('views/my/MyVip')
+// 收藏夹
+const CollectionIndex = () => import('views/my/Collection')
+// 浏览记录
+const HistoryIndex = () => import('views/my/History')
+
+// 发布稿件
+const PostPublishVideo = () => import('components/upload/PublishVideo')
+const PostPublishAudio = () => import('components/upload/PublishAudio')
+const PostPublishAlbum = () => import('components/upload/PublishImage')
+const PostPublishArticle = () => import('components/upload/PublishArticle')
+const PostPublishFile = () => import('components/upload/PublishFile')
+
+// 稿件列表
+const UserPostVideo = () => import('views/post/VideoPost')
 const PostEditVideo = () => import('components/upload/EditVideo')
-const PostPublishAudio = () => import('views/post/PostPublish')
+const UserPostAudio = () => import('views/post/AudioPost')
 const PostEditAudio = () => import('components/upload/EditAudio')
-const PostPublishAlbum = () => import('views/post/PostPublish')
+const UserPostImage = () => import('views/post/ImagePost')
 const PostEditAlbum = () => import('components/upload/EditImage')
-const PostPublishArticle = () => import('views/post/PostPublish')
+const UserPostArticle = () => import('views/post/ArticlePost')
 const PostEditArticle = () => import('components/upload/EditArticle')
+
+const PostPublish = () => import('views/post/PostPublish')
 const PostList = () => import('views/post/PostList')
-const UserPostVideo = () => import('views/post/PostList')
-const UserPostAudio = () => import('views/post/PostList')
-const UserPostImage = () => import('views/post/PostList')
-const UserPostArticle = () => import('views/post/PostList')
 const PostAnalysis = () => import('views/post/PostAnalysis')
 const MessageIndex = () => import('views/message/Message')
-const DiscoverIndex = () => import('views/home/Discover')
-const BdMap = () => import('views/home/BdMap')
-const AMap = () => import('views/home/AMap')
-const Vip = () => import('views/vip/Vip')
 
 const Admin = () => import('views/admin/AdminUser')
 const AdminUser = () => import('views/admin/AdminUser')
@@ -102,6 +118,116 @@ const routes = [
       }
     ]
   },
+  {
+    path: '/my',
+    name: 'My',
+    component: My
+  },
+  {
+    path: '/my/account',
+    name: 'MyAccount',
+    component: My,
+    children: [
+      {
+        path: '/my/account/profile',
+        name: '个人资料',
+        component: MyProfile
+      },
+      {
+        path: '/my/account/vip',
+        name: '小会员',
+        component: MyVip
+      }
+    ]
+  },
+  {
+    path: '/my/post/publish',
+    name: 'MyPostPublish',
+    component: My,
+    children: [
+      {
+        path: '/my/post/publish/video',
+        name: '发布视频',
+        component: PostPublishVideo
+      },
+      {
+        path: '/my/post/publish/audio',
+        name: '发布音频',
+        component: PostPublishAudio
+      },
+      {
+        path: '/my/post/publish/image',
+        name: '发布相册',
+        component: PostPublishAlbum
+      },
+      {
+        path: '/my/post/publish/article',
+        name: '发布文章',
+        component: PostPublishArticle
+      },
+      {
+        path: '/my/post/publish/file',
+        name: '发布文件',
+        component: PostPublishFile
+      }
+    ]
+  },
+  {
+    path: '/my/post/list',
+    name: 'MyPostList',
+    component: My,
+    children: [
+      {
+        path: '/my/post/list/video',
+        name: '视频稿件',
+        component: UserPostVideo
+      },
+      {
+        path: '/my/post/list/audio',
+        name: '音频稿件',
+        component: UserPostAudio
+      },
+      {
+        path: '/my/post/list/image',
+        name: '相册稿件',
+        component: UserPostImage
+      },
+      {
+        path: '/my/post/list/article',
+        name: '文章稿件',
+        component: UserPostArticle
+      }
+    ]
+  },
+  {
+    path: '/my/favlist',
+    name: 'MyFavlist',
+    component: My,
+    children: [
+      {
+        path: '/my/favlist/video',
+        name: '视频收藏',
+        component: CollectionIndex
+      },
+      {
+        path: '/my/favlist/image',
+        name: '相册收藏',
+        component: CollectionIndex
+      }
+    ]
+  },
+  {
+    path: '/my/visit',
+    name: 'MyVisit',
+    component: My,
+    children: [
+      {
+        path: '/my/visit',
+        name: '浏览记录',
+        component: HistoryIndex
+      }
+    ]
+  },
   {
     path: '/',
     name: 'index',
@@ -192,11 +318,6 @@ const routes = [
     name: 'search',
     component: Search
   },
-  {
-    path: '/my',
-    name: 'My',
-    component: My
-  },
   {
     path: '/user/:id',
     name: 'UserHome',

src/views/my/Collection.vue

@@ -0,0 +1,340 @@
+<template>
+  <el-row>
+<!--    <el-col :md="4">
+      <el-menu
+        :default-active="this.$route.path"
+        router
+        class="el-menu-vertical-demo"
+      >
+        <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.path">
+          <i :class="item.icon" />
+          <span slot="title">{{ item.name }}</span>
+        </el-menu-item>
+      </el-menu>
+    </el-col>-->
+    <el-col :md="20">
+      <div id="collection-list">
+        <!--搜索结果面包屑-->
+        <el-breadcrumb
+          class="bread"
+          separator-class="el-icon-arrow-right"
+        >
+          <el-breadcrumb-item>我的收藏：共 <span class="reslut">{{ totalSize }}</span> 条</el-breadcrumb-item>
+        </el-breadcrumb>
+
+        <el-row v-if="totalSize !== 0" class="movie-list">
+          <el-col style="text-align: right">
+            <el-button
+              type="danger"
+              size="mini"
+              icon="el-icon-delete"
+              @click="removeFavlist"
+            >删除收藏夹</el-button>
+          </el-col>
+          <el-col v-for="(item,index) in dataList" :key="index" :md="6" :sm="8" :xs="12">
+            <div v-if="contentType === 1001">
+              <el-card :body-style="{ padding: '0px' }" class="card">
+                <div class="imgs">
+                  <el-image
+                    lazy
+                    fit="cover"
+                    class="coverImg"
+                    :src="item.thumbnailUrl"
+                    @click="showImages(index)"
+                  />
+                </div>
+              </el-card>
+            </div>
+            <div v-else-if="contentType === 1002">
+              <video-card :video="item" />
+            </div>
+            <div v-else-if="contentType === 1003" />
+            <div v-else-if="contentType === 1004" />
+            <div v-else>
+              <span>未知 {{ contentType }}</span>
+            </div>
+            <el-button
+              type="danger"
+              size="mini"
+              icon="el-icon-delete"
+              title="删除本收藏"
+              @click.stop="removeCollection(item)"
+            />
+          </el-col>
+          <el-col class="pagination">
+            <el-pagination
+              background
+              :small="screenWidth <= 768"
+              hide-on-single-page
+              layout="prev, pager, next"
+              :page-size="pageSize"
+              :current-page="currentPage"
+              :total="totalSize"
+              @current-change="handleCurrentChange"
+              @prev-click="handleCurrentChange"
+              @next-click="handleCurrentChange"
+            />
+          </el-col>
+        </el-row>
+        <el-row v-else class="not-result">
+          <el-col :span="12" :offset="6">
+            <img src="@/assets/img/icon/not-collection.png">
+            <div>你还没有收藏任何东西呢</div>
+          </el-col>
+        </el-row>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import VideoCard from '@/components/card/VideoCard'
+import {
+  deleteFavlist,
+  getUserFavlist,
+  getFavlist,
+  collectItem
+} from '@/api/collect'
+
+export default {
+  name: 'Collection',
+  components: { VideoCard },
+  data() {
+    return {
+      navList: [],
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 12,
+      totalSize: 0,
+      dataList: [],
+      favlist: null,
+      contentType: 1001
+    }
+  },
+  created() {
+    /* const myfavlist = localStorage.getItem('myfavlist')
+    if (myfavlist !== undefined) {
+      const myfavlist1 = JSON.parse(myfavlist)
+      this.navList = []
+      for (const item of myfavlist1) {
+        this.navList.push(item)
+      }
+    } else {
+      this.getUserFavlistWrapper()
+    }*/
+    const page = this.$route.query.page
+    if (page !== undefined) {
+      this.currentPage = parseInt(page)
+    }
+
+    const type = this.$route.query.contentType
+    if (type !== undefined) {
+      this.contentType = parseInt(type)
+    }
+
+    const favlistId1 = this.$route.query.favlistId
+    if (favlistId1 === undefined) {
+      // this.$router.push(this.navList[0].path)
+      this.getUserFavlistWrapper()
+    } else {
+      const myfavlist = localStorage.getItem('myfavlist')
+      const myfavlist1 = JSON.parse(myfavlist)
+      this.navList = []
+      for (const item of myfavlist1) {
+        this.navList.push(item)
+      }
+
+      this.favlistId = favlistId1
+      this.getFavlistWrapper(this.favlistId, this.contentType, this.currentPage)
+    }
+
+    document.title = '我的收藏夹'
+  },
+  methods: {
+    handleCurrentChange(pageNumber) {
+      this.currentPage = pageNumber
+      this.dataList = []
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    getFavlistWrapper(favlistId, conentType, page) {
+      getFavlist(favlistId, conentType, page).then(resp => {
+        if (resp.code === 0) {
+          const respData = resp.data
+          this.dataList = respData.list
+          this.totalSize = respData.totalSize
+        }
+      })
+    },
+    getUserFavlistWrapper() {
+      getUserFavlist().then(resp => {
+        if (resp.code === 0) {
+          const respData = resp.data
+          this.navList = []
+          for (const item of respData) {
+            const contentType = item.contentType
+            if (contentType === 1001) {
+              this.navList.push({
+                path: '/u/favlist?favlistId=' + item.favlistId + '&contentType=' + contentType + '&page=1',
+                name: item.favlistName,
+                icon: 'el-icon-picture' })
+            } else if (contentType === 1002) {
+              this.navList.push({
+                path: '/u/favlist?favlistId=' + item.favlistId + '&contentType=' + contentType + '&page=1',
+                name: item.favlistName,
+                icon: 'el-icon-film' })
+            } else if (contentType === 1003) {
+              this.navList.push({
+                path: '/u/favlist?favlistId=' + item.favlistId + '&contentType=' + contentType + '&page=1',
+                name: item.favlistName,
+                icon: 'el-icon-headset' })
+            } else if (contentType === 1004) {
+              this.navList.push({
+                path: '/u/favlist?favlistId=' + item.favlistId + '&contentType=' + contentType + '&page=1',
+                name: item.favlistName,
+                icon: 'el-icon-document' })
+            }
+          }
+
+          localStorage.setItem('myfavlist', JSON.stringify(this.navList))
+        }
+      })
+    },
+    showImages(index) {
+      const imageUrls = []
+      for (const i of this.dataList) {
+        imageUrls.push(i.originalUrl)
+      }
+
+      this.$viewerApi({
+        images: imageUrls,
+        options: {
+          initialViewIndex: index,
+          movable: true,
+          fullscreen: false,
+          keyboard: true
+        }
+      })
+    },
+    // 移除收藏
+    removeCollection(item) {
+      this.$confirm('确认删除本收藏？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const jsonData = {}
+        jsonData.contentType = 1001
+        jsonData.contentId = item.imageFileId
+        jsonData.collected = false
+        collectItem(jsonData).then(res => {
+          if (res.code === 0) {
+            this.$message({
+              type: 'success',
+              message: '移除成功!'
+            })
+            this.$router.go(0)
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
+      })
+    },
+    // 删除收藏夹
+    removeFavlist() {
+      // 移除所有收藏
+      this.$confirm('确认要删除收藏夹？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteFavlist(this.favlistId).then(res => {
+          if (res.code === 0) {
+            this.$message({
+              type: 'success',
+              message: '收藏夹已清空!'
+            })
+
+            this.$router.go(0)
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px){
+  .movie-list {
+    padding-top: 8px;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+  }
+
+  .coverImg {
+    height: 120px !important;
+  }
+}
+
+.movie-list {
+  padding-top: 15px;
+  padding-left: 6%;
+  padding-right: 6%;
+}
+
+.coverImg {
+  width: 100%;
+  height: 320px;
+  display: block;
+}
+
+.card {
+  margin-bottom: 20px;
+  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
+}
+
+.imgs {
+  position: relative;
+}
+
+#collection-list {
+  padding-left: 6%;
+  padding-right: 6%;
+  padding-top: 30px;
+}
+
+.bread {
+  font-size: 15px;
+}
+
+.movie-list {
+  padding-top: 15px;
+}
+
+.reslut {
+  color: red;
+}
+
+.not-result {
+  padding-top: 100px;
+  padding-bottom: 100px;
+  text-align: center;
+}
+
+.remove-slot {
+  position: absolute;
+  right: 5px;
+  bottom: 2px;
+}
+</style>

src/views/my/History.vue

@@ -0,0 +1,193 @@
+<template>
+  <div id="history-list">
+    <!--搜索结果面包屑-->
+    <el-breadcrumb
+      v-if="this.$route.path.indexOf('history') > -1"
+      class="bread"
+      separator-class="el-icon-arrow-right"
+    >
+      <el-breadcrumb-item :to="{ path: '' }"><a href="/">返回首页</a></el-breadcrumb-item>
+      <el-breadcrumb-item>播放历史记录：共<span class="reslut">({{ totalSize }}}</span>条</el-breadcrumb-item>
+    </el-breadcrumb>
+
+    <el-row v-if="visitList.length !== 0" class="movie-list">
+      <el-col style="text-align: center">
+        <el-button
+          type="danger"
+          icon="el-icon-delete"
+          round
+          title="一键清空历史"
+          @click="removeAll"
+        >一键清空历史</el-button>
+      </el-col>
+      <el-col :md="8">
+        <el-timeline :reverse="reverse">
+          <el-timeline-item
+            v-for="(record, index) in visitList"
+            :key="index"
+            :timestamp="record.createAt"
+            placement="top"
+          >
+            <video-card :video="record"></video-card>
+            <el-button
+              type="danger"
+              icon="el-icon-delete"
+              circle
+              size="small"
+              title="移除该历史记录"
+              @click.stop="removeHistory(record.videoId)"
+            />
+          </el-timeline-item>
+        </el-timeline>
+      </el-col>
+    </el-row>
+    <el-row v-else class="not-result">
+      <el-col :span="12" :offset="6">
+        <img src="@/assets/img/icon/not-history.png">
+        <div>你还没有看过任何东西呢</div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import VideoCard from '@/components/card/VideoCard'
+import { getVisitRecord } from "@/api/visit";
+
+export default {
+  name: 'History',
+  components: { VideoCard },
+  data() {
+    return {
+      reverse: false,
+      totalSize: 0,
+      nextId: 0,
+      nextId1: 0,
+      visitList: [],
+      showEmpty: false
+    }
+  },
+  created() {
+    document.title = '我的历史记录'
+    this.getVisitRecordWrapper(this.nextId)
+  },
+  mounted() {
+    window.addEventListener("scroll", this.handleScrollEvent);
+  },
+  methods: {
+    handleScrollEvent() {
+      if (document.body.scrollHeight <= window.screen.height + document.documentElement.scrollTop) {
+        console.log('滚动条触底, 加载数据')
+        if (this.nextId1 !== this.nextId) {
+          this.nextId1 = this.nextId
+          this.getVisitRecordWrapper(this.nextId)
+        }
+      }
+    },
+    getVisitRecordWrapper(nextId) {
+      getVisitRecord(nextId).then(res => {
+        if (res.code === 0) {
+          const resData = res.data
+          this.totalSize = resData.totalSize
+          this.nextId = resData.nextId
+          for (const item of resData.list) {
+            this.visitList.push(item)
+          }
+        }
+      })
+    },
+    // 清除当前历史记录
+    removeHistory(videoId) {
+      this.$confirm('确认移除吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log('删除 ' + videoId + ' 这条记录')
+        // 确认
+        /* deleteHistory(this.uid, video.vid).then(res => {
+          // 将要删除的当前video对象移除数组
+          // 获取下标
+          const index = this.videos.indexOf(video)
+          if (index > -1) {
+            this.videos.splice(index, 1)
+          }
+        })*/
+
+        this.$message({
+          type: 'success',
+          message: '移除成功!'
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
+      })
+    },
+    // 清空所有历史记录
+    removeAll() {
+      // 移除所有收藏
+      this.$confirm('确认移除所有播放历史记录吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log('删除全部记录')
+
+        /*const arr = []
+        for (const i of this.videos) {
+          arr.push(i.vid)
+        }*/
+        // const vidStr = arr.join(',')
+        // 确认
+        /* deleteHistory(this.uid, vidStr).then(res => {
+          this.videos = []
+        })*/
+
+        this.$message({
+          type: 'success',
+          message: '移除成功!'
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+#history-list {
+  padding-left: 6%;
+  padding-right: 6%;
+  padding-top: 30px;
+}
+
+.bread {
+  font-size: 15px;
+}
+
+.movie-list {
+  padding-top: 15px;
+}
+
+.reslut {
+  color: red;
+}
+
+.not-result {
+  padding-top: 100px;
+  padding-bottom: 100px;
+  text-align: center;
+}
+
+.remove-slot {
+  position: absolute;
+  right: 5px;
+  bottom: 2px;
+}
+</style>

src/views/my/My.vue

@@ -0,0 +1,153 @@
+<template>
+  <el-container>
+    <el-aside>
+      <!--    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
+      <el-radio-button :label="false">展开</el-radio-button>
+      <el-radio-button :label="true">收起</el-radio-button>
+    </el-radio-group>-->
+      <el-menu
+        :default-active="this.$route.path"
+        router
+        class="el-menu-vertical-demo"
+        :collapse="isCollapse"
+        @open="handleOpen"
+        @close="handleClose"
+      >
+        <el-submenu index="/my/account">
+          <template slot="title">
+            <i class="el-icon-user" />
+            <span slot="title">帐号管理</span>
+          </template>
+          <el-menu-item-group>
+            <el-menu-item index="/my/account/profile">
+              <i class="el-icon-film" />
+              <span slot="title">个人资料</span>
+            </el-menu-item>
+            <el-menu-item index="/my/account/vip">
+              <i class="el-icon-film" />
+              <span slot="title">小会员</span>
+            </el-menu-item>
+          </el-menu-item-group>
+        </el-submenu>
+        <el-submenu index="/my/post">
+          <template slot="title">
+            <i class="el-icon-postcard" />
+            <span slot="title">稿件管理</span>
+          </template>
+          <el-submenu index="/my/post/publish">
+            <template slot="title">
+              <i class="el-icon-plus" />
+              <span slot="title">发布</span>
+            </template>
+            <el-menu-item-group>
+              <el-menu-item index="/my/post/publish/video">
+                <i class="el-icon-film" />
+                <span slot="title">视频</span>
+              </el-menu-item>
+              <el-menu-item index="/my/post/publish/audio">
+                <i class="el-icon-headset" />
+                <span slot="title">音频</span>
+              </el-menu-item>
+              <el-menu-item index="/my/post/publish/image">
+                <i class="el-icon-picture" />
+                <span slot="title">相册</span>
+              </el-menu-item>
+              <el-menu-item index="/my/post/publish/article">
+                <i class="el-icon-document" />
+                <span slot="title">文章</span>
+              </el-menu-item>
+              <el-menu-item index="/my/post/publish/file">
+                <i class="el-icon-files" />
+                <span slot="title">文件</span>
+              </el-menu-item>
+            </el-menu-item-group>
+          </el-submenu>
+          <el-submenu index="/my/post/list">
+            <template slot="title">
+              <i class="el-icon-s-data" />
+              <span slot="title">稿件</span>
+            </template>
+            <el-menu-item-group>
+              <el-menu-item index="/my/post/list/video">
+                <i class="el-icon-film" />
+                <span slot="title">视频</span>
+              </el-menu-item>
+              <el-menu-item index="/my/post/list/audio">
+                <i class="el-icon-headset" />
+                <span slot="title">音频</span>
+              </el-menu-item>
+              <el-menu-item index="/my/post/list/image">
+                <i class="el-icon-picture" />
+                <span slot="title">相册</span>
+              </el-menu-item>
+              <el-menu-item index="/my/post/list/article">
+                <i class="el-icon-document" />
+                <span slot="title">文章</span>
+              </el-menu-item>
+            </el-menu-item-group>
+          </el-submenu>
+        </el-submenu>
+        <el-submenu index="/my/post1">
+          <template slot="title">
+            <i class="el-icon-collection" />
+            <span slot="title">收藏夹</span>
+          </template>
+          <el-menu-item-group>
+            <el-menu-item index="/my/favlist/video">
+              <i class="el-icon-film" />
+              <span slot="title">视频</span>
+            </el-menu-item>
+            <el-menu-item index="/my/favlist/image">
+              <i class="el-icon-picture" />
+              <span slot="title">相册</span>
+            </el-menu-item>
+          </el-menu-item-group>
+        </el-submenu>
+        <el-menu-item index="/my/visit">
+          <i class="el-icon-document" />
+          <span slot="title">历史记录</span>
+        </el-menu-item>
+      </el-menu>
+    </el-aside>
+    <el-main>
+      <!--      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
+      </el-breadcrumb>-->
+      <router-view />
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isCollapse: false,
+      navList: [
+        { path: '/post/publish', name: '发布', icon: 'el-icon-upload' },
+        { path: '/post/list', name: '稿件', icon: 'el-icon-files' },
+        { path: '/post/analysis', name: '数据', icon: 'el-icon-data-analysis' }
+      ]
+    }
+  },
+  created() {
+    document.title = '我的主页'
+  },
+  methods: {
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath)
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath)
+    }
+  }
+}
+</script>
+
+<style>
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 200px;
+  min-height: 800px;
+}
+</style>

src/views/my/MyProfile.vue

@@ -0,0 +1,25 @@
+<template>
+  <el-row>
+    <span>我的资料</span>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: 'MyProfile',
+  data() {
+    return {
+    }
+  },
+  created() {
+    document.title = '我的资料'
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/my/MyVip.vue

@@ -0,0 +1,25 @@
+<template>
+  <el-row>
+    <span>我的小会员</span>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: 'MyVip',
+  data() {
+    return {
+    }
+  },
+  created() {
+    document.title = '我的小会员'
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/post/PostList.vue

@@ -14,18 +14,18 @@
     </el-col>
     <el-col :md="22">
       <el-row>
-        <el-tabs v-model="activeName" @tab-click='tabClick'>
+        <el-tabs v-model="activeName" @tab-click="tabClick">
           <el-tab-pane label="视频" name="video">
-            <video-post :data-list="dataList"/>
+            <video-post :data-list="dataList" />
           </el-tab-pane>
           <el-tab-pane label="音频" name="audio">
-            <audio-post :data-list="dataList"/>
+            <audio-post :data-list="dataList" />
           </el-tab-pane>
           <el-tab-pane label="相册" name="image">
-            <image-post :data-list="dataList"/>
+            <image-post :data-list="dataList" />
           </el-tab-pane>
           <el-tab-pane label="文章" name="article">
-            <article-post :data-list="dataList"/>
+            <article-post :data-list="dataList" />
           </el-tab-pane>
         </el-tabs>
       </el-row>
@@ -49,15 +49,15 @@
 </template>
 
 <script>
-import VideoPost from "@/views/post/VideoPost";
-import AudioPost from "@/views/post/AudioPost";
-import ImagePost from "@/views/post/ImagePost";
-import ArticlePost from "@/views/post/ArticlePost";
+import VideoPost from '@/views/post/VideoPost'
+import AudioPost from '@/views/post/AudioPost'
+import ImagePost from '@/views/post/ImagePost'
+import ArticlePost from '@/views/post/ArticlePost'
 
-import { getVideoPosts } from "@/api/video";
-import { getAudioPosts } from "@/api/audio";
-import { getUserAlbums } from "@/api/image";
-import { getArticlePosts } from "@/api/article";
+import { getVideoPosts } from '@/api/video'
+import { getAudioPosts } from '@/api/audio'
+import { getUserAlbums } from '@/api/image'
+import { getArticlePosts } from '@/api/article'
 
 export default {
   name: 'PostList',
@@ -70,7 +70,7 @@ export default {
       pageSize: 12,
       totalSize: 0,
       dataList: [],
-      /*************************************************************************/
+      /** ***********************************************************************/
       navList: [
         { path: '/post/publish', name: '发布', icon: 'el-icon-upload' },
         { path: '/post/list', name: '稿件', icon: 'el-icon-files' },
@@ -80,34 +80,34 @@ export default {
       userId: 10001,
       showPreviewDialog: false,
       videoProp: null,
-      showEditScopeDialog: false,
+      showEditScopeDialog: false
+    }
+  },
+  watch: {
+    $route() {
+      this.$router.go()
     }
   },
   created() {
-    document.title = "稿件列表"
+    document.title = '稿件列表'
 
     const path = this.$route.path
-    if (path.endsWith("video")) {
+    if (path.endsWith('video')) {
       this.activeName = 'video'
       document.title = '视频稿件'
-    } else if (path.endsWith("image")) {
+    } else if (path.endsWith('image')) {
       this.activeName = 'image'
       document.title = '图片稿件'
-    } else if (path.endsWith("audio")) {
+    } else if (path.endsWith('audio')) {
       this.activeName = 'audio'
       document.title = '音频稿件'
-    } else if (path.endsWith("article")) {
+    } else if (path.endsWith('article')) {
       this.activeName = 'article'
       document.title = '文章稿件'
     }
 
     this.getData()
   },
-  watch: {
-    $route(){
-      this.$router.go()
-    }
-  },
   methods: {
     handleCurrentChange(pageNumber) {
       this.currentPage = pageNumber
@@ -204,7 +204,7 @@ export default {
           }
         })
       }
-    },
+    }
   }
 }
 </script>

src/views/user/Collection.vue

@@ -1,6 +1,6 @@
 <template>
   <el-row>
-    <el-col :md="4">
+<!--    <el-col :md="4">
       <el-menu
         :default-active="this.$route.path"
         router
@@ -11,7 +11,7 @@
           <span slot="title">{{ item.name }}</span>
         </el-menu-item>
       </el-menu>
-    </el-col>
+    </el-col>-->
     <el-col :md="20">
       <div id="collection-list">
         <!--搜索结果面包屑-->
@@ -112,11 +112,6 @@ export default {
       contentType: 1001
     }
   },
-  watch: {
-    $route() {
-      this.$router.go()
-    }
-  },
   created() {
     /* const myfavlist = localStorage.getItem('myfavlist')
     if (myfavlist !== undefined) {

src/views/user/My.vue

@@ -1,101 +1,122 @@
 <template>
-  <el-row>
-    <!--    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
+  <el-container>
+    <el-aside>
+      <!--    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
       <el-radio-button :label="false">展开</el-radio-button>
       <el-radio-button :label="true">收起</el-radio-button>
     </el-radio-group>-->
-    <el-menu
-      default-active="1-4-1"
-      class="el-menu-vertical-demo"
-      :collapse="isCollapse"
-      @open="handleOpen"
-      @close="handleClose"
-    >
-      <el-submenu index="1">
-        <template slot="title">
-          <i class="el-icon-user" />
-          <span slot="title">帐号管理</span>
-        </template>
-        <el-menu-item-group>
-          <el-menu-item index="1-1">选项1</el-menu-item>
-          <el-menu-item index="1-2">选项2</el-menu-item>
-        </el-menu-item-group>
-        <el-menu-item-group title="分组2">
-          <el-menu-item index="1-3">选项3</el-menu-item>
-        </el-menu-item-group>
-        <el-submenu index="1-4">
-          <span slot="title">选项4</span>
-          <el-menu-item index="1-4-1">选项1</el-menu-item>
-        </el-submenu>
-      </el-submenu>
-      <el-submenu index="2">
-        <template slot="title">
-          <i class="el-icon-postcard" />
-          <span slot="title">稿件管理</span>
-        </template>
-        <el-submenu index="2-1">
+      <el-menu
+        :default-active="this.$route.path"
+        router
+        class="el-menu-vertical-demo"
+        :collapse="isCollapse"
+        @open="handleOpen"
+        @close="handleClose"
+      >
+        <el-submenu index="/my/account">
           <template slot="title">
-            <i class="el-icon-plus" />
-            <span slot="title">发布</span>
+            <i class="el-icon-user" />
+            <span slot="title">帐号管理</span>
           </template>
           <el-menu-item-group>
-            <el-menu-item index="2-1-1">
+            <el-menu-item index="/my/account/profile">
               <i class="el-icon-film" />
-              <span slot="title">视频</span>
-            </el-menu-item>
-            <el-menu-item index="2-1-2">
-              <i class="el-icon-headset" />
-              <span slot="title">音频</span>
-            </el-menu-item>
-            <el-menu-item index="2-1-3">
-              <i class="el-icon-picture" />
-              <span slot="title">相册</span>
-            </el-menu-item>
-            <el-menu-item index="2-1-4">
-              <i class="el-icon-document" />
-              <span slot="title">文章</span>
+              <span slot="title">个人资料</span>
             </el-menu-item>
-            <el-menu-item index="2-1-5">
-              <i class="el-icon-files" />
-              <span slot="title">文件</span>
+            <el-menu-item index="/my/account/vip">
+              <i class="el-icon-film" />
+              <span slot="title">小会员</span>
             </el-menu-item>
           </el-menu-item-group>
         </el-submenu>
-        <el-submenu index="2-2">
+        <el-submenu index="/my/post">
+          <template slot="title">
+            <i class="el-icon-postcard" />
+            <span slot="title">稿件管理</span>
+          </template>
+          <el-submenu index="/my/post/publish">
+            <template slot="title">
+              <i class="el-icon-plus" />
+              <span slot="title">发布</span>
+            </template>
+            <el-menu-item-group>
+              <el-menu-item index="/my/post/publish/video">
+                <i class="el-icon-film" />
+                <span slot="title">视频</span>
+              </el-menu-item>
+              <el-menu-item index="/my/post/publish/audio">
+                <i class="el-icon-headset" />
+                <span slot="title">音频</span>
+              </el-menu-item>
+              <el-menu-item index="/my/post/publish/image">
+                <i class="el-icon-picture" />
+                <span slot="title">相册</span>
+              </el-menu-item>
+              <el-menu-item index="/my/post/publish/article">
+                <i class="el-icon-document" />
+                <span slot="title">文章</span>
+              </el-menu-item>
+              <el-menu-item index="/my/post/publish/file">
+                <i class="el-icon-files" />
+                <span slot="title">文件</span>
+              </el-menu-item>
+            </el-menu-item-group>
+          </el-submenu>
+          <el-submenu index="/my/post/list">
+            <template slot="title">
+              <i class="el-icon-s-data" />
+              <span slot="title">稿件</span>
+            </template>
+            <el-menu-item-group>
+              <el-menu-item index="/my/post/list/video">
+                <i class="el-icon-film" />
+                <span slot="title">视频</span>
+              </el-menu-item>
+              <el-menu-item index="/my/post/list/audio">
+                <i class="el-icon-headset" />
+                <span slot="title">音频</span>
+              </el-menu-item>
+              <el-menu-item index="/my/post/list/image">
+                <i class="el-icon-picture" />
+                <span slot="title">相册</span>
+              </el-menu-item>
+              <el-menu-item index="/my/post/list/article">
+                <i class="el-icon-document" />
+                <span slot="title">文章</span>
+              </el-menu-item>
+            </el-menu-item-group>
+          </el-submenu>
+        </el-submenu>
+        <el-submenu index="/my/post1">
           <template slot="title">
-            <i class="el-icon-s-data" />
-            <span slot="title">列表</span>
+            <i class="el-icon-collection" />
+            <span slot="title">收藏夹</span>
           </template>
           <el-menu-item-group>
-            <el-menu-item index="2-2-1">
+            <el-menu-item index="/my/favlist/video">
               <i class="el-icon-film" />
               <span slot="title">视频</span>
             </el-menu-item>
-            <el-menu-item index="2-2-2">
-              <i class="el-icon-headset" />
-              <span slot="title">音频</span>
-            </el-menu-item>
-            <el-menu-item index="2-2-3">
+            <el-menu-item index="/my/favlist/image">
               <i class="el-icon-picture" />
               <span slot="title">相册</span>
             </el-menu-item>
-            <el-menu-item index="2-2-4">
-              <i class="el-icon-document" />
-              <span slot="title">文章</span>
-            </el-menu-item>
           </el-menu-item-group>
         </el-submenu>
-      </el-submenu>
-      <el-menu-item index="3">
-        <i class="el-icon-document" />
-        <span slot="title">导航三</span>
-      </el-menu-item>
-      <el-menu-item index="4">
-        <i class="el-icon-setting" />
-        <span slot="title">导航四</span>
-      </el-menu-item>
-    </el-menu>
-  </el-row>
+        <el-menu-item index="/my/visit">
+          <i class="el-icon-document" />
+          <span slot="title">历史记录</span>
+        </el-menu-item>
+      </el-menu>
+    </el-aside>
+    <el-main>
+      <!--      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
+      </el-breadcrumb>-->
+      <router-view />
+    </el-main>
+  </el-container>
 </template>
 
 <script>
@@ -127,6 +148,6 @@ export default {
 <style>
 .el-menu-vertical-demo:not(.el-menu--collapse) {
   width: 200px;
-  min-height: 400px;
+  min-height: 800px;
 }
 </style>