update views/admin

src/api/admin.js

@@ -0,0 +1,29 @@
+import { get, post } from '@/utils/request'
+
+const adminApi = {
+  getUsersApi: '/api/user/admin/user/all',
+  getUserAvatarsApi: '/api/user/admin/user/avatar',
+  getVideosApi: '/api/content/admin/video/all',
+  getAlbumsApi: '/api/content/admin/video/all',
+  getArticlesApi: '/api/content/admin/video/all',
+}
+
+export function getUserList(nextId) {
+  return get(adminApi.getUsersApi + '?nextId=' + nextId)
+}
+
+export function getUserAvatarList() {
+  return get(adminApi.getUserAvatarsApi)
+}
+
+export function getVideoList(nextId) {
+  return get(adminApi.getVideosApi + '?nextId=' + nextId)
+}
+
+export function getAlbumList(nextId) {
+  return get(adminApi.getAlbumsApi + '?nextId=' + nextId)
+}
+
+export function getArticleList(nextId) {
+  return get(adminApi.getArticlesApi + '?nextId=' + nextId)
+}

src/router/admin.js

@@ -1,5 +1,9 @@
 const Admin = () => import('views/admin/Admin')
 const AdminBackendLog = () => import('views/admin/AdminBackendLog')
+const AdminUserList = () => import('views/admin/AdminUserList')
+const AdminVideoList = () => import('views/admin/AdminVideoList')
+const AdminAvatarList = () => import('views/admin/AdminAvatarList')
+
 // ********************************************************************************************************************
 // 用户后台主页
 const MyIndex = () => import('views/my/MyIndex')
@@ -18,7 +22,6 @@ const PostAnalysis = () => import('views/post/PostAnalysis')
 const History = () => import('views/post/History')
 const PostAlbum = () => import('views/post/PostAlbum')
 // 稿件后台管理
-const AdminUserList = () => import('views/user/AdminUserList')
 const VideoPost = () => import('views/post/VideoPost')
 const VideoPostEdit = () => import('views/post/VideoPostEdit')
 const ImagePost = () => import('views/post/ImagePost')
@@ -172,20 +175,14 @@ export default {
         },
         {
           path: '/background/admin/video',
-          name: 'VideoPost',
-          component: VideoPost,
-          meta: { needAuth: true }
-        },
-        {
-          path: '/background/admin/image',
-          name: 'ImagePost',
-          component: ImagePost,
+          name: 'AdminVideoList',
+          component: AdminVideoList,
           meta: { needAuth: true }
         },
         {
-          path: '/background/admin/article',
-          name: 'ArticlePost',
-          component: ArticlePost,
+          path: '/background/admin/avatar',
+          name: 'AdminAvatarList',
+          component: AdminAvatarList,
           meta: { needAuth: true }
         }
       ]

src/views/admin/AdminAvatarList.vue

@@ -0,0 +1,46 @@
+<template>
+  <el-row id="movie-list">
+    <el-col v-for="(user, index) in userList" :key="index" :md="1" :sm="3" :xs="3">
+      <router-link target="_blank" :to="`/user/` + user.userIdStr">
+        <el-avatar>
+          <el-image :src="user.avatarUrl" />
+        </el-avatar>
+      </router-link>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { getUserAvatarList } from '@/api/admin'
+
+export default {
+  name: 'Discover',
+  data() {
+    return {
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      userList: [],
+      showEmpty: true
+    }
+  },
+  created() {
+    document.title = '已发布稿件的用户'
+    getUserAvatarList().then(resp => {
+      if (resp.code === 0) {
+        this.userList = resp.data
+      }
+    })
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+#movie-list {
+  padding-top: 10px;
+  padding-left: 3%;
+  padding-right: 3%;
+}
+</style>

src/views/admin/AdminUserList.vue

@@ -0,0 +1,234 @@
+<template>
+  <el-container>
+    <el-header height="220">
+      <el-row style="margin-top: 10px">
+        <el-select
+          v-model="queryInfo.scope"
+          clearable
+          placeholder="查询条件"
+          style="margin-left: 5px"
+          @change="onSelectChange"
+        />
+        <el-button type="plain" icon="el-icon-refresh" style="margin-left: 5px" @click="onRefresh">刷新</el-button>
+      </el-row>
+    </el-header>
+    <el-main>
+      <el-table
+        :data="dataList"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          fixed="left"
+          label="No"
+          type="index"
+        />
+        <el-table-column
+          prop="avatarUrl"
+          label="头像"
+          width="90"
+        >
+          <template slot-scope="scope">
+            <el-image :src="scope.row.avatarUrl" min-width="30" height="20" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="userId"
+          label="用户 ID"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="username"
+          label="用户名"
+        />
+        <el-table-column
+          prop="screenName"
+          label="显示名"
+        >
+          <template slot-scope="scope">
+            <router-link target="_blank" :to="`/user/${scope.row.userId}`">
+              <span>{{ scope.row.screenName }}</span>
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="signature"
+          label="签名"
+          :show-overflow-tooltip="true"
+        >
+          <template slot-scope="scope">
+            <el-tooltip
+              v-if="scope.row.signature"
+              :content="scope.row.signature"
+              raw-content
+              placement="top-start"
+            >
+              <span v-if="scope.row.signature && scope.row.signature.length <= 15">
+                {{ scope.row.signature }}
+              </span>
+              <span v-if="scope.row.signature && scope.row.signature.length > 15">
+                {{ scope.row.signature.substr(0, 15) + "..." }}
+              </span>
+            </el-tooltip>
+            <span v-else-if="scope.row.signature === null">-</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="pubDate"
+          label="注册时间"
+          width="150"
+        />
+        <el-table-column
+          prop="scope"
+          label="帐号状态"
+          width="120"
+        >
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.status === 1" :type="'warning'" disable-transitions>
+              正常
+            </el-tag>
+            <el-tag v-else-if="scope.row.status === 2" :type="'success'" disable-transitions>
+              封禁中
+            </el-tag>
+            <el-tag v-else :type="'danger'" disable-transitions>
+              已注销
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          label="操作"
+          width="280"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)"
+            >编辑</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        background
+        :small="screenWidth <= 768"
+        layout="prev, pager, next"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        :total="totalSize"
+        @current-change="handleCurrentChange"
+        @prev-click="handleCurrentChange"
+        @next-click="handleCurrentChange"
+      />
+    </el-main>
+
+    <!-- 修改视频可见范围对话框 -->
+    <el-dialog
+      append-to-body
+      :visible.sync="showEditScopeDialog"
+      width="30%"
+      center
+    >
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>修改视频可见范围</span>
+          <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateScope">更新</el-button>
+        </div>
+        <div class="text item">
+          <el-select v-model="form.scope" placeholder="选择可见范围">
+            <el-option label="本人可见" value="1" />
+            <el-option label="所有人可见" value="2" />
+            <el-option label="VIP 可见" value="3" />
+            <el-option label="验证码可见" value="4" />
+          </el-select>
+        </div>
+      </el-card>
+    </el-dialog>
+  </el-container>
+</template>
+
+<script>
+import { getUserList } from '@/api/admin'
+
+export default {
+  name: 'AdminUserList',
+  data() {
+    return {
+      queryInfo: {
+        scope: null,
+        pn: 1
+      },
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 12,
+      totalSize: 0,
+      dataList: [],
+      nextId: 0,
+      // **********************************************************************
+      showEditScopeDialog: false,
+      form: {
+        videoId: null,
+        scope: 1
+      }
+    }
+  },
+  created() {
+    document.title = 'AdminUserList'
+    this.getData()
+  },
+  methods: {
+    getData() {
+      this.dataList = []
+      getUserList(this.nextId).then(resp => {
+        if (resp.code === 0) {
+          const respData = resp.data
+          this.dataList = respData.list
+          this.nextId = respData.nextId
+        }
+      })
+    },
+    onRefresh() {
+      this.getData()
+    },
+    handleCurrentChange(pageNumber) {
+      this.currentPage = pageNumber
+      this.getData()
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    handleEdit(index, row) {
+      this.$message.info('handleEdit')
+    },
+    handleDelete(index, row) {
+      this.$confirm('确定要删除 ' + row.title + '?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message.info('handleDelete')
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
+      })
+    },
+    onUpdateScope() {
+      this.showEditScopeDialog = false
+    },
+    onSelectChange() {
+      this.$message.info(this.queryInfo)
+    },
+    handleClose() {
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/admin/AdminVideoList.vue

@@ -0,0 +1,352 @@
+<template>
+  <el-container>
+    <el-header height="220">
+      <el-row style="margin-top: 10px">
+        <el-select
+          v-model="queryInfo.scope"
+          clearable
+          placeholder="查询条件"
+          style="margin-left: 5px"
+          @change="onSelectChange"
+        />
+        <el-button type="plain" icon="el-icon-refresh" style="margin-left: 5px" @click="onRefresh">刷新</el-button>
+      </el-row>
+    </el-header>
+    <el-main>
+      <el-table
+        :data="dataList"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          fixed="left"
+          label="No"
+          type="index"
+        />
+        <el-table-column
+          prop="publishAt"
+          label="发布时间"
+          width="150"
+        />
+        <el-table-column
+          prop="coverUrl"
+          label="封面"
+          width="90"
+        >
+          <template slot-scope="scope">
+            <el-image :src="scope.row.coverUrl" min-width="30" height="20" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="videoId"
+          label="视频 ID"
+          width="120"
+        >
+          <template slot-scope="scope">
+            <router-link target="_blank" :to="`/video/${scope.row.videoId}`">
+              <span>{{ scope.row.videoId }}</span>
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="title"
+          label="标题"
+          :show-overflow-tooltip="true"
+        >
+          <template slot-scope="scope">
+            <el-tooltip
+              v-if="scope.row.title"
+              :content="scope.row.title"
+              raw-content
+              placement="top-start"
+            >
+              <span v-if="scope.row.title.length <= 15">
+                {{ scope.row.title }}
+              </span>
+              <span v-else>
+                {{ scope.row.title.substr(0, 15) + "..." }}
+              </span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="description"
+          label="描述"
+          :show-overflow-tooltip="true"
+        >
+          <template slot-scope="scope">
+            <el-tooltip
+              v-if="scope.row.description"
+              :content="scope.row.description"
+              raw-content
+              placement="top-start"
+            >
+              <span v-if="scope.row.description && scope.row.description.length <= 15">
+                {{ scope.row.description }}
+              </span>
+              <span v-if="scope.row.description && scope.row.description.length > 15">
+                {{ scope.row.description.substr(0, 15) + "..." }}
+              </span>
+            </el-tooltip>
+            <span v-else-if="scope.row.description === null">-</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="duration"
+          label="时长"
+        />
+        <el-table-column
+          prop="horizontal"
+          label="方向"
+        >
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.horizontal" :type="'warning'" disable-transitions>
+              <span icon="el-icon-monitor">横屏</span>
+            </el-tag>
+            <el-tag v-else :type="'success'" disable-transitions>
+              <span icon="el-icon-mobile-phone">竖屏</span>
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="scope"
+          label="可见范围"
+          width="120"
+        >
+          <template slot-scope="scope">
+            <el-tooltip class="item" effect="dark" content="点击修改可见范围" placement="top-end">
+              <el-button
+                v-if="scope.row.scope === 1"
+                size="mini"
+                @click="handleScope(scope.$index, scope.row)"
+              >本人可见</el-button>
+              <el-button
+                v-else-if="scope.row.scope === 2"
+                size="mini"
+                type="success"
+                @click="handleScope(scope.$index, scope.row)"
+              >所有人可见</el-button>
+              <el-button
+                v-else-if="scope.row.scope === 3"
+                size="mini"
+                type="warning"
+                @click="handleScope(scope.$index, scope.row)"
+              >VIP 可见</el-button>
+              <el-button
+                v-else
+                size="mini"
+                type="danger"
+                @click="handleScope(scope.$index, scope.row)"
+              >验证码可见</el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="scope"
+          label="审核状态"
+          width="120"
+        >
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.status === 1" :type="'warning'" disable-transitions>
+              审核中
+            </el-tag>
+            <el-tag v-else-if="scope.row.status === 2" :type="'success'" disable-transitions>
+              审核通过
+            </el-tag>
+            <el-tag v-else-if="scope.row.status === 3" :type="'danger'" disable-transitions>
+              审核未通过
+            </el-tag>
+            <el-tag v-else-if="scope.row.status === 4" :type="'danger'" disable-transitions>
+              下架
+            </el-tag>
+            <el-tag v-else :type="'danger'" disable-transitions>
+              状态值: {{ scope.row.status }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          label="操作"
+          width="280"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handlePreview(scope.$index, scope.row)"
+            >预览</el-button>
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)"
+            >编辑</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        background
+        :small="screenWidth <= 768"
+        layout="prev, pager, next"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        :total="totalSize"
+        @current-change="handleCurrentChange"
+        @prev-click="handleCurrentChange"
+        @next-click="handleCurrentChange"
+      />
+    </el-main>
+
+    <!-- 修改视频可见范围对话框 -->
+    <el-dialog
+      append-to-body
+      :visible.sync="showEditScopeDialog"
+      width="30%"
+      center
+    >
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>修改视频可见范围</span>
+          <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateScope">更新</el-button>
+        </div>
+        <div class="text item">
+          <el-select v-model="form.scope" placeholder="选择可见范围">
+            <el-option label="本人可见" value="1" />
+            <el-option label="所有人可见" value="2" />
+            <el-option label="VIP 可见" value="3" />
+            <el-option label="验证码可见" value="4" />
+          </el-select>
+        </div>
+      </el-card>
+    </el-dialog>
+    <!-- 视频预览对话框 -->
+    <el-dialog
+      title="预览视频"
+      append-to-body
+      :visible.sync="showPreviewDialog"
+      :before-close="handleDialogClose"
+      width="70%"
+      center
+    >
+      <template>
+        <video-preview-player :video-prop.sync="videoProp" />
+      </template>
+    </el-dialog>
+  </el-container>
+</template>
+
+<script>
+import VideoPreviewPlayer from 'components/VideoPreviewPlayer'
+import VideoPostPublish from '@/views/post/VideoPostPublish'
+import { updateVideoScope, videoInfo, deleteVideoPost, getVideoPosts, addVideoPost } from '@/api/video'
+import {getVideoList} from "@/api/admin";
+
+export default {
+  name: 'VideoPost',
+  components: { VideoPreviewPlayer, VideoPostPublish },
+  data() {
+    return {
+      queryInfo: {
+        scope: null,
+        pn: 1
+      },
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 12,
+      totalSize: 0,
+      dataList: [],
+      nextId: 0,
+      // **********************************************************************
+      videoProp: null,
+      showVideoResourceDialog: false,
+      showEditScopeDialog: false,
+      showPreviewDialog: false,
+      form: {
+        videoId: null,
+        scope: 1
+      },
+      videoResources: [],
+      publishVideoDiaglog: false
+    }
+  },
+  created() {
+    document.title = 'AdminVideoList'
+    this.getData()
+  },
+  methods: {
+    handleCurrentChange(pageNumber) {
+      this.currentPage = pageNumber
+      this.getData()
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    getData() {
+      this.dataList = []
+      getVideoList(0).then(resp => {
+        if (resp.code === 0) {
+          const respData = resp.data
+          this.dataList = respData.list
+          this.nextId = respData.nextId
+        }
+      })
+    },
+    onRefresh() {
+      this.getData()
+    },
+    handleScope(index, row) {
+      this.form.videoId = row.videoId
+      this.form.scope = '' + row.scope
+      this.showEditScopeDialog = true
+    },
+    handleDialogClose(done) {
+      this.showPreviewDialog = false
+      this.videoProp = {
+        videoId: null,
+        play: false
+      }
+      done()
+    },
+    handlePreview(index, row) {
+      videoInfo(row.videoId).then(res => {
+        if (res.code === 0) {
+          this.showPreviewDialog = true
+          this.videoProp = {
+            videoId: res.data.videoId,
+            play: true
+          }
+        }
+      })
+    },
+    handleEdit(index, row) {
+      const path = '/post/video/edit/' + row.videoId
+      this.$router.push(path)
+    },
+    onUpdateScope() {
+      this.showEditScopeDialog = false
+      updateVideoScope(this.form).then(res => {
+        if (res.code === 0) {
+          this.$notify({
+            title: '提示',
+            message: '视频可见范围已更新',
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'warning',
+          duration: 3000
+        })
+      })
+    },
+    onSelectChange() {
+      this.$message.info(this.queryInfo)
+    },
+    handleClose() {
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/admin/LeftAside.vue

@@ -105,13 +105,9 @@
           <i class="el-icon-film" />
           <span slot="title">管理视频</span>
         </el-menu-item>
-        <el-menu-item index="/background/admin/image">
+        <el-menu-item index="/background/admin/avatar">
           <i class="el-icon-picture" />
-          <span slot="title">管理相册</span>
-        </el-menu-item>
-        <el-menu-item index="/background/admin/article">
-          <i class="el-icon-document" />
-          <span slot="title">管理文章</span>
+          <span slot="title">用户头像</span>
         </el-menu-item>
       </el-menu-item-group>
     </el-submenu>

src/views/user/AdminUserList.vue

@@ -178,15 +178,15 @@ export default {
     this.getData()
   },
   methods: {
+    getData() {
+      this.dataList = []
+    },
     handleCurrentChange(pageNumber) {
       this.currentPage = pageNumber
       this.getData()
       // 回到顶部
       scrollTo(0, 0)
     },
-    getData() {
-      this.dataList = []
-    },
     handleEdit(index, row) {
       this.$message.info('handleEdit')
     },