|
|
@@ -0,0 +1,575 @@
|
|
|
+<template>
|
|
|
+ <el-row>
|
|
|
+ <el-col :md="2">
|
|
|
+ <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="22">
|
|
|
+ <el-row>
|
|
|
+ <el-tabs v-model="activeName" @tab-click='tabClick'>
|
|
|
+ <el-tab-pane label="视频" name="video">
|
|
|
+ <el-row :md="6" :sm="12" :xs="12">
|
|
|
+ <el-table
|
|
|
+ :data="dataList"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="index">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="pubDate"
|
|
|
+ label="发布时间">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="coverUrl"
|
|
|
+ label="封面"
|
|
|
+ width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-image :src="scope.row.coverUrl" min-width="40" height="30" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="videoId"
|
|
|
+ label="视频 ID">
|
|
|
+ <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="标题">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="description"
|
|
|
+ label="描述">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="scope"
|
|
|
+ label="可见范围">
|
|
|
+ <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)">VIP 可见</el-button>
|
|
|
+ <el-button
|
|
|
+ v-else-if="scope.row.scope === 3"
|
|
|
+ size="mini"
|
|
|
+ type="warning"
|
|
|
+ @click="handleScope(scope.$index, scope.row)">验证码可见</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="审核状态">
|
|
|
+ <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 :type="'danger'" disable-transitions>
|
|
|
+ 下架
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="210">
|
|
|
+ <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>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="danger"
|
|
|
+ @click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-row>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="相册" name="image">
|
|
|
+ <el-row :md="6" :sm="12" :xs="12">
|
|
|
+ <el-table
|
|
|
+ :data="dataList"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="index">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="coverUrl"
|
|
|
+ label="相册封面"
|
|
|
+ width="150">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-image :src="scope.row.coverUrl" min-width="40" height="30" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="pubDate"
|
|
|
+ label="发布时间">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="albumName"
|
|
|
+ label="相册名字"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="total"
|
|
|
+ label="图片数量">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="scope"
|
|
|
+ label="可见范围">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag v-if="scope.row.scope === 1" disable-transitions>
|
|
|
+ 全部可见
|
|
|
+ </el-tag>
|
|
|
+ <el-tag v-else-if="scope.row.scope === 2" :type="'success'" disable-transitions>
|
|
|
+ VIP 可见
|
|
|
+ </el-tag>
|
|
|
+ <el-tag v-else-if="scope.row.scope === 3" :type="'warning'" disable-transitions>
|
|
|
+ 验证码可见
|
|
|
+ </el-tag>
|
|
|
+ <el-tag v-else :type="'danger'" disable-transitions>
|
|
|
+ 本人可见
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ @click="handleEditImage(scope.$index, scope.row)">编辑</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="danger"
|
|
|
+ @click="handleDeleteImage(scope.$index, scope.row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-row>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="音频" name="audio">
|
|
|
+ <el-row :md="6" :sm="12" :xs="12">
|
|
|
+ <el-table
|
|
|
+ :data="dataList"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="index">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="coverUrl"
|
|
|
+ label="音频封面"
|
|
|
+ width="150">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-image :src="scope.row.coverUrl" min-width="40" height="30" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="pubDate"
|
|
|
+ label="发布时间">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="title"
|
|
|
+ label="音频名字">
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column
|
|
|
+ prop="description"
|
|
|
+ label="音频简介">
|
|
|
+ </el-table-column>-->
|
|
|
+ <el-table-column
|
|
|
+ prop="scope"
|
|
|
+ label="可见范围">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag v-if="scope.row.scope === 1" disable-transitions>
|
|
|
+ 全部可见
|
|
|
+ </el-tag>
|
|
|
+ <el-tag v-else-if="scope.row.scope === 2" :type="'success'" disable-transitions>
|
|
|
+ VIP 可见
|
|
|
+ </el-tag>
|
|
|
+ <el-tag v-else-if="scope.row.scope === 3" :type="'warning'" disable-transitions>
|
|
|
+ 验证码可见
|
|
|
+ </el-tag>
|
|
|
+ <el-tag v-else :type="'danger'" disable-transitions>
|
|
|
+ 本人可见
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ @click="handleEditAudio(scope.$index, scope.row)">编辑</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="danger"
|
|
|
+ @click="handleDeleteAudio(scope.$index, scope.row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-row>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="文章" name="article">
|
|
|
+ <span>
|
|
|
+ <h4>文章稿件</h4>
|
|
|
+ </span>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="22" class="pagination">
|
|
|
+ <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-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <!-- 修改视频可见范围对话框 -->
|
|
|
+ <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="onUpdateVideoScope">更新</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="text item">
|
|
|
+ <el-form ref="form" :model="form" label-width="80px">
|
|
|
+ <el-form-item label="可见范围">
|
|
|
+ <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>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </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="this.videoProp"/>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </el-row>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import VideoPreviewPlayer from 'components/VideoPreviewPlayer'
|
|
|
+
|
|
|
+import {userVideoPost, updateVideoScope, videoInfo, deleteVideo} from "@/api/video";
|
|
|
+import {getUserAlbums} from "@/api/image";
|
|
|
+import { getUserAudio } from "@/api/audio";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'AdminPost',
|
|
|
+ components: { VideoPreviewPlayer },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 屏幕宽度, 为了控制分页条的大小
|
|
|
+ screenWidth: document.body.clientWidth,
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 12,
|
|
|
+ totalSize: 0,
|
|
|
+ dataList: [],
|
|
|
+ /*************************************************************************/
|
|
|
+ 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' }
|
|
|
+ ],
|
|
|
+ activeName: 'video',
|
|
|
+ userId: 10001,
|
|
|
+ showPreviewDialog: false,
|
|
|
+ videoProp: null,
|
|
|
+ showEditScopeDialog: false,
|
|
|
+ form: {
|
|
|
+ videoId: null,
|
|
|
+ scope: null
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ document.title = "稿件列表"
|
|
|
+
|
|
|
+ const path = this.$route.path
|
|
|
+ if (path.endsWith("video")) {
|
|
|
+ this.activeName = 'video'
|
|
|
+ document.title = '视频稿件'
|
|
|
+ } else if (path.endsWith("image")) {
|
|
|
+ this.activeName = 'image'
|
|
|
+ document.title = '图片稿件'
|
|
|
+ } else if (path.endsWith("audio")) {
|
|
|
+ this.activeName = 'audio'
|
|
|
+ document.title = '音频稿件'
|
|
|
+ } else if (path.endsWith("article")) {
|
|
|
+ this.activeName = 'article'
|
|
|
+ document.title = '文章稿件'
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route(){
|
|
|
+ this.$router.go()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleCurrentChange(pageNumber) {
|
|
|
+ this.currentPage = pageNumber
|
|
|
+ this.getData()
|
|
|
+ // 回到顶部
|
|
|
+ scrollTo(0, 0)
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log('预览 ' + row.videoId);
|
|
|
+ },
|
|
|
+ handleEdit(index, row) {
|
|
|
+ console.log(row.videoId);
|
|
|
+ const path = '/post/edit/video/' + row.videoId
|
|
|
+ this.$router.push(path)
|
|
|
+ },
|
|
|
+ handleDelete(index, row) {
|
|
|
+ deleteVideo(row.videoId).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.$notify({
|
|
|
+ title: '提示',
|
|
|
+ message: '视频稿件已删除',
|
|
|
+ type: 'warning',
|
|
|
+ duration: 3000
|
|
|
+ })
|
|
|
+ this.$router.go(0)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleEditImage(index, row) {
|
|
|
+ console.log(row.videoId);
|
|
|
+ const path = '/post/edit/album/' + row.albumId
|
|
|
+ this.$router.push(path)
|
|
|
+ },
|
|
|
+ handleDeleteImage(index, row) {
|
|
|
+ console.log(row.videoId);
|
|
|
+ },
|
|
|
+ handleEditAudio(index, row) {
|
|
|
+ console.log(row.videoId);
|
|
|
+ const path = '/post/edit/audio/' + row.audioId
|
|
|
+ this.$router.push(path)
|
|
|
+ },
|
|
|
+ handleDeleteAudio(index, row) {
|
|
|
+ console.log(row.videoId);
|
|
|
+ },
|
|
|
+ tabClick(tab) {
|
|
|
+ this.activeName = tab.name
|
|
|
+ this.goToTab(this.activeName)
|
|
|
+ },
|
|
|
+ goToTab(activeName) {
|
|
|
+ const path = '/post/' + activeName
|
|
|
+ if (this.$route.path === path) {
|
|
|
+ this.$router.go(0)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$router.push(path)
|
|
|
+ },
|
|
|
+ getData() {
|
|
|
+ this.dataList = []
|
|
|
+ if (this.activeName === 'video') {
|
|
|
+ userVideoPost(this.currentPage).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ const resData = res.data
|
|
|
+ this.dataList = resData.list
|
|
|
+ this.totalSize = resData.totalSize
|
|
|
+
|
|
|
+ if (this.totalSize !== 0) {
|
|
|
+ this.showEmpty = false
|
|
|
+ } else {
|
|
|
+ this.showEmpty = true
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$notify({
|
|
|
+ title: '提示',
|
|
|
+ message: res.msg,
|
|
|
+ type: 'warning',
|
|
|
+ duration: 3000
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.$notify({
|
|
|
+ title: '提示',
|
|
|
+ message: error.message,
|
|
|
+ type: 'error',
|
|
|
+ duration: 3000
|
|
|
+ })
|
|
|
+ })
|
|
|
+ } else if (this.activeName === 'image') {
|
|
|
+ getUserAlbums(this.userId).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ const resData = res.data
|
|
|
+ if (resData.length !== 0) {
|
|
|
+ this.showEmpty = false
|
|
|
+ for (const item of resData) {
|
|
|
+ this.dataList.push(item)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.showEmpty = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else if (this.activeName === 'audio') {
|
|
|
+ this.currentPage = 1
|
|
|
+ this.lastId = 0
|
|
|
+ getUserAudio(this.userId).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ const resData = res.data.list
|
|
|
+ if (resData.length !== 0) {
|
|
|
+ this.showEmpty = false
|
|
|
+ for (const item of resData) {
|
|
|
+ this.dataList.push(item)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.showEmpty = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else if (this.activeName === 'article') {
|
|
|
+ this.currentPage = 1
|
|
|
+ this.lastId = 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onUpdateVideoScope() {
|
|
|
+ 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
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.uploader-example {
|
|
|
+ width: 500px;
|
|
|
+ padding: 15px;
|
|
|
+ margin: 40px auto 0;
|
|
|
+ font-size: 12px;
|
|
|
+ box-shadow: 0 0 10px rgba(0, 0, 0, .4);
|
|
|
+}
|
|
|
+.uploader-example .uploader-btn {
|
|
|
+ margin-right: 4px;
|
|
|
+}
|
|
|
+.uploader-example .uploader-list {
|
|
|
+ max-height: 440px;
|
|
|
+ overflow: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.avatar-uploader .el-upload {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.avatar-uploader .el-upload:hover {
|
|
|
+ border-color: #409EFF;
|
|
|
+}
|
|
|
+.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 320px;
|
|
|
+ height: 240px;
|
|
|
+ line-height: 178px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.avatar {
|
|
|
+ width: 320px;
|
|
|
+ height: 240px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+</style>
|
