|
|
@@ -1,234 +1,151 @@
|
|
|
<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-plus" style="margin-left: 5px" @click="publishVideoDiaglog = true">发布稿件</el-button>
|
|
|
- </el-row>
|
|
|
+ <el-container class="video-post-container">
|
|
|
+ <el-header height="auto" class="post-header">
|
|
|
+ <div class="header-wrapper">
|
|
|
+ <h3 class="page-title">
|
|
|
+ <i class="el-icon-collection"></i> 稿件管理
|
|
|
+ </h3>
|
|
|
+ <div class="filter-controls">
|
|
|
+ <el-select
|
|
|
+ v-model="queryInfo.scope"
|
|
|
+ clearable
|
|
|
+ placeholder="可见范围筛选"
|
|
|
+ size="small"
|
|
|
+ class="filter-select"
|
|
|
+ @change="handleFilterChange"
|
|
|
+ >
|
|
|
+ <el-option label="全部范围" :value="null" />
|
|
|
+ <el-option label="本人可见" :value="1" />
|
|
|
+ <el-option label="所有人可见" :value="2" />
|
|
|
+ <el-option label="VIP 可见" :value="3" />
|
|
|
+ </el-select>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ size="small"
|
|
|
+ class="publish-btn"
|
|
|
+ @click="publishVideoDiaglog = true"
|
|
|
+ >发布稿件</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</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="pubDate"
|
|
|
- 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 style="text-decoration-line: none" 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="false"
|
|
|
- >
|
|
|
- <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"
|
|
|
+
|
|
|
+ <el-main class="post-main">
|
|
|
+ <div class="table-card">
|
|
|
+ <el-table
|
|
|
+ :data="dataList"
|
|
|
+ style="width: 100%"
|
|
|
+ header-cell-class-name="table-header-cell"
|
|
|
+ v-loading="loading"
|
|
|
>
|
|
|
- <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) + "..." }}
|
|
|
+ <el-table-column label="No" type="index" width="60" align="center" />
|
|
|
+
|
|
|
+ <el-table-column label="封面" width="120" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-image
|
|
|
+ class="video-cover"
|
|
|
+ :src="scope.row.coverUrl"
|
|
|
+ fit="cover"
|
|
|
+ :preview-src-list="[scope.row.coverUrl]"
|
|
|
+ >
|
|
|
+ <div slot="error" class="image-slot">
|
|
|
+ <i class="el-icon-picture-outline"></i>
|
|
|
+ </div>
|
|
|
+ </el-image>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="title" label="视频信息" min-width="200">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="video-info-cell">
|
|
|
+ <router-link :to="`/video/${scope.row.videoId}`" class="video-title-link">
|
|
|
+ {{ scope.row.title }}
|
|
|
+ </router-link>
|
|
|
+ <div class="video-meta">
|
|
|
+ <span class="vid-tag">ID: {{ scope.row.videoId }}</span>
|
|
|
+ <span class="duration-tag"><i class="el-icon-time"></i> {{ scope.row.duration }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="pubDate" label="发布时间" width="160" align="center" />
|
|
|
+
|
|
|
+ <el-table-column label="可见范围" width="130" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tooltip content="点击修改可见范围" placement="top">
|
|
|
+ <div @click="handleScope(scope.$index, scope.row)" class="scope-pointer">
|
|
|
+ <el-tag v-if="scope.row.scope === 1" size="medium" type="info" effect="plain">本人可见</el-tag>
|
|
|
+ <el-tag v-else-if="scope.row.scope === 2" size="medium" type="success" effect="plain">所有人可见</el-tag>
|
|
|
+ <el-tag v-else-if="scope.row.scope === 3" size="medium" type="warning" effect="plain">VIP 可见</el-tag>
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="稿件状态" width="120" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span :class="['status-dot', getStatusClass(scope.row.status)]">
|
|
|
+ {{ getStatusText(scope.row.status) }}
|
|
|
</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="direction"
|
|
|
- label="方向"
|
|
|
- />
|
|
|
- <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"
|
|
|
- type="success"
|
|
|
- @click="handleScope(scope.$index, scope.row)"
|
|
|
- >本人可见</el-button>
|
|
|
- <el-button
|
|
|
- v-else-if="scope.row.scope === 2"
|
|
|
- size="mini"
|
|
|
- type="danger"
|
|
|
- @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-tooltip>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="status"
|
|
|
- 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>
|
|
|
- <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"
|
|
|
- />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="操作" width="220" fixed="right" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" size="small" icon="el-icon-view" @click="handlePreview(scope.$index, scope.row)">预览</el-button>
|
|
|
+ <el-button type="text" size="small" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
|
|
+ <el-button type="text" size="small" icon="el-icon-delete" class="danger-text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <div class="pagination-container">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ :small="screenWidth <= 768"
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :page-size="pageSize"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :total="totalSize"
|
|
|
+ @current-change="handlePageChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-main>
|
|
|
|
|
|
- <!-- 发布视频稿件对话框 -->
|
|
|
- <el-dialog
|
|
|
- :visible.sync="publishVideoDiaglog"
|
|
|
- :before-close="handleClose"
|
|
|
- width="70%"
|
|
|
- center
|
|
|
- >
|
|
|
+ <el-dialog :visible.sync="publishVideoDiaglog" width="70%" custom-class="custom-glass-dialog" append-to-body destroy-on-close>
|
|
|
+ <div slot="title" class="dialog-header-custom">
|
|
|
+ <i class="el-icon-circle-plus-outline"></i><span>发布新视频稿件</span>
|
|
|
+ </div>
|
|
|
<video-post-publish @video-publish="onVideoPublish" />
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-dialog :visible.sync="showEditScopeDialog" width="400px" custom-class="custom-glass-dialog compact-dialog" append-to-body center>
|
|
|
+ <div slot="title" class="dialog-header-custom">
|
|
|
+ <i class="el-icon-lock"></i><span>权限设置</span>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-body-padding">
|
|
|
+ <p class="input-label-tip">请选择该视频的可见范围：</p>
|
|
|
+ <el-select v-model="form.scope" placeholder="选择可见范围" style="width: 100%">
|
|
|
+ <el-option label="本人可见" value="1" />
|
|
|
+ <el-option label="所有人可见" value="2" />
|
|
|
+ <el-option label="VIP 可见" value="3" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
- <el-button type="text" @click="publishVideoDiaglog = false">取 消</el-button>
|
|
|
+ <el-button size="small" round @click="showEditScopeDialog = false">取 消</el-button>
|
|
|
+ <el-button size="small" type="primary" round @click="onUpdateScope">确认更新</el-button>
|
|
|
</span>
|
|
|
</el-dialog>
|
|
|
- <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-select>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-dialog>
|
|
|
- <!-- 视频预览对话框 -->
|
|
|
- <el-dialog
|
|
|
- title="预览视频"
|
|
|
- append-to-body
|
|
|
- :visible.sync="showPreviewDialog"
|
|
|
- :before-close="handleDialogClose"
|
|
|
- width="70%"
|
|
|
- center
|
|
|
- >
|
|
|
- <template>
|
|
|
+
|
|
|
+ <el-dialog :visible.sync="showPreviewDialog" width="900px" top="8vh" custom-class="custom-glass-dialog preview-dialog" append-to-body @close="handleDialogClose(()=> { showPreviewDialog = false })">
|
|
|
+ <div slot="title" class="dialog-header-custom">
|
|
|
+ <i class="el-icon-video-play"></i><span>内容预览</span>
|
|
|
+ </div>
|
|
|
+ <div class="preview-wrapper">
|
|
|
<video-preview-player :video-prop.sync="videoProp" />
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
</el-dialog>
|
|
|
</el-container>
|
|
|
</template>
|
|
|
@@ -243,175 +160,178 @@ export default {
|
|
|
components: { VideoPreviewPlayer, VideoPostPublish },
|
|
|
data() {
|
|
|
return {
|
|
|
+ loading: false,
|
|
|
queryInfo: {
|
|
|
- scope: null,
|
|
|
- pn: 1
|
|
|
+ scope: null, // 从 URL 获取
|
|
|
+ pn: 1 // 从 URL 获取
|
|
|
},
|
|
|
- // 屏幕宽度, 为了控制分页条的大小
|
|
|
screenWidth: document.body.clientWidth,
|
|
|
- currentPage: 1,
|
|
|
pageSize: 12,
|
|
|
totalSize: 0,
|
|
|
dataList: [],
|
|
|
- // **********************************************************************
|
|
|
- videoProp: null,
|
|
|
- showVideoResourceDialog: false,
|
|
|
+ videoProp: { videoId: null, play: false },
|
|
|
showEditScopeDialog: false,
|
|
|
showPreviewDialog: false,
|
|
|
- form: {
|
|
|
- videoId: null,
|
|
|
- scope: 1
|
|
|
- },
|
|
|
- videoResources: [],
|
|
|
+ form: { videoId: null, scope: 1 },
|
|
|
publishVideoDiaglog: false
|
|
|
}
|
|
|
},
|
|
|
- created() {
|
|
|
- document.title = '我的视频稿件'
|
|
|
- this.getData()
|
|
|
+ computed: {
|
|
|
+ // 映射当前页码给 el-pagination 使用
|
|
|
+ currentPage() {
|
|
|
+ return parseInt(this.queryInfo.pn) || 1;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // 核心优化：监听路由变化，一旦 URL 参数变了，就重新抓取数据
|
|
|
+ '$route': {
|
|
|
+ handler: 'syncParamsAndLoad',
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
- handleCurrentChange(pageNumber) {
|
|
|
- this.currentPage = pageNumber
|
|
|
- this.getData()
|
|
|
- // 回到顶部
|
|
|
- scrollTo(0, 0)
|
|
|
+ // 1. 同步 URL 参数到 data，并执行请求
|
|
|
+ syncParamsAndLoad() {
|
|
|
+ const { pn, scope } = this.$route.query;
|
|
|
+ this.queryInfo.pn = pn ? parseInt(pn) : 1;
|
|
|
+ this.queryInfo.scope = scope ? (isNaN(scope) ? scope : parseInt(scope)) : null;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 2. 更新 URL 的通用方法
|
|
|
+ updateRouter() {
|
|
|
+ this.$router.push({
|
|
|
+ path: this.$route.path,
|
|
|
+ query: {
|
|
|
+ pn: this.queryInfo.pn,
|
|
|
+ scope: this.queryInfo.scope || undefined // 为 null 时不显示在 URL 中
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ // 捕获冗余导航错误（点击同一页时）
|
|
|
+ if (err.name !== 'NavigationDuplicated') throw err;
|
|
|
+ });
|
|
|
},
|
|
|
+
|
|
|
+ // 3. 交互触发：切换分页
|
|
|
+ handlePageChange(pageNumber) {
|
|
|
+ this.queryInfo.pn = pageNumber;
|
|
|
+ this.updateRouter();
|
|
|
+ window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 4. 交互触发：切换筛选
|
|
|
+ handleFilterChange() {
|
|
|
+ this.queryInfo.pn = 1; // 筛选条件变了，重置回第一页
|
|
|
+ this.updateRouter();
|
|
|
+ },
|
|
|
+
|
|
|
getData() {
|
|
|
- this.dataList = []
|
|
|
- getVideoPosts(this.currentPage).then(resp => {
|
|
|
+ this.loading = true;
|
|
|
+ // 注意：这里建议给后端接口也加上 scope 参数，此处假设你原有接口支持
|
|
|
+ getVideoPosts(this.queryInfo.pn, this.queryInfo.scope).then(resp => {
|
|
|
if (resp.code === 0) {
|
|
|
- this.dataList = resp.data.list
|
|
|
- this.totalSize = resp.data.totalSize
|
|
|
- } else {
|
|
|
- this.$notify({
|
|
|
- title: '提示',
|
|
|
- message: resp.msg,
|
|
|
- type: 'warning',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
+ this.dataList = resp.data.list;
|
|
|
+ this.totalSize = resp.data.totalSize;
|
|
|
}
|
|
|
- }).catch(error => {
|
|
|
- this.$notify({
|
|
|
- title: '提示',
|
|
|
- message: error.message,
|
|
|
- type: 'error',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
- })
|
|
|
+ }).finally(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /* --- 其余 UI 逻辑保持不变 --- */
|
|
|
+ getStatusClass(status) {
|
|
|
+ const map = { 1: 'warning', 2: 'success', 3: 'danger', 4: 'info' };
|
|
|
+ return map[status] || 'info';
|
|
|
+ },
|
|
|
+ getStatusText(status) {
|
|
|
+ const map = { 1: '审核中', 2: '已发布', 3: '审核失败', 4: '已下架' };
|
|
|
+ return map[status] || `未知(${status})`;
|
|
|
},
|
|
|
handleScope(index, row) {
|
|
|
- this.form.videoId = row.videoId
|
|
|
- this.form.scope = '' + row.scope
|
|
|
- this.showEditScopeDialog = true
|
|
|
+ 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()
|
|
|
+ this.videoProp = { videoId: null, play: false };
|
|
|
+ if(typeof done === 'function') done();
|
|
|
},
|
|
|
handlePreview(index, row) {
|
|
|
videoInfo(row.videoId).then(res => {
|
|
|
if (res.code === 0) {
|
|
|
- this.showPreviewDialog = true
|
|
|
- this.videoProp = {
|
|
|
- videoId: res.data.videoId,
|
|
|
- play: true
|
|
|
- }
|
|
|
+ this.showPreviewDialog = true;
|
|
|
+ this.videoProp = { videoId: res.data.videoId, play: true };
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
handleEdit(index, row) {
|
|
|
- const path = '/bg/post/video/edit/' + row.videoId
|
|
|
- this.$router.push(path)
|
|
|
+ this.$router.push('/bg/post/video/edit/' + row.videoId);
|
|
|
},
|
|
|
handleDelete(index, row) {
|
|
|
- this.$confirm('确定要删除 ' + row.title + '?', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
+ this.$confirm(`确定要删除《${row.title}》?`, '警告', {
|
|
|
+ type: 'warning',
|
|
|
+ confirmButtonClass: 'el-button--danger'
|
|
|
}).then(() => {
|
|
|
deleteVideoPost(row.videoId).then(res => {
|
|
|
if (res.code === 0) {
|
|
|
- this.$notify({
|
|
|
- title: '提示',
|
|
|
- message: '稿件已删除',
|
|
|
- type: 'warning',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
- this.$router.go(0)
|
|
|
+ this.$message.success('稿件已删除');
|
|
|
+ this.getData();
|
|
|
}
|
|
|
- })
|
|
|
- }).catch(() => {
|
|
|
- this.$message({
|
|
|
- type: 'info',
|
|
|
- message: '已取消'
|
|
|
- })
|
|
|
- })
|
|
|
+ });
|
|
|
+ }).catch(() => {});
|
|
|
},
|
|
|
onUpdateScope() {
|
|
|
- this.showEditScopeDialog = false
|
|
|
updateVideoScope(this.form).then(res => {
|
|
|
if (res.code === 0) {
|
|
|
- this.getData()
|
|
|
- } else {
|
|
|
- this.$notify({
|
|
|
- title: '提示',
|
|
|
- message: '可见范围更新失败',
|
|
|
- type: 'warning',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
+ this.showEditScopeDialog = false;
|
|
|
+ this.getData();
|
|
|
+ this.$message.success('可见范围已更新');
|
|
|
}
|
|
|
- }).catch(error => {
|
|
|
- this.$notify({
|
|
|
- title: '提示',
|
|
|
- message: error.message,
|
|
|
- type: 'warning',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- onSelectChange() {
|
|
|
- this.$message.info(this.queryInfo)
|
|
|
- },
|
|
|
- handleClose() {
|
|
|
- // this.publishVideoDiaglog = false
|
|
|
- this.$message.info('点击底部取消按钮关闭')
|
|
|
+ });
|
|
|
},
|
|
|
onVideoPublish(videoForm) {
|
|
|
- this.publishVideoDiaglog = false
|
|
|
addVideoPost(videoForm).then(res => {
|
|
|
if (res.code === 0) {
|
|
|
- this.$notify({
|
|
|
- title: '提示',
|
|
|
- message: '投稿成功,等待审核通过后其他人就可以看到你的视频了',
|
|
|
- type: 'warning',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
- this.getData()
|
|
|
- } else {
|
|
|
- this.$notify({
|
|
|
- title: '提示',
|
|
|
- message: res.msg,
|
|
|
- type: 'warning',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
+ this.publishVideoDiaglog = false;
|
|
|
+ this.$message.success('投稿成功，请等待审核');
|
|
|
+ this.getData();
|
|
|
}
|
|
|
- }).catch(error => {
|
|
|
- this.$notify({
|
|
|
- title: '提示',
|
|
|
- message: error.message,
|
|
|
- type: 'warning',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style scoped>
|
|
|
+/* 样式部分同上一版，保持“三层”视觉感 */
|
|
|
+.video-post-container { padding: 24px; background-color: #f5f7fa; min-height: 100%; }
|
|
|
+.post-header { background: white; padding: 20px 24px; border-radius: 12px 12px 0 0; box-shadow: 0 4px 12px 0 rgba(0,0,0,0.03); }
|
|
|
+.header-wrapper { display: flex; justify-content: space-between; align-items: center; }
|
|
|
+.page-title { margin: 0; font-size: 20px; color: #303133; display: flex; align-items: center; gap: 8px; }
|
|
|
+.filter-controls { display: flex; gap: 16px; }
|
|
|
+.publish-btn { box-shadow: 0 4px 10px rgba(64, 158, 255, 0.3); }
|
|
|
+.post-main { padding: 0; }
|
|
|
+.table-card { background: white; border-radius: 0 0 12px 12px; padding: 10px 24px 24px; box-shadow: 0 8px 24px 0 rgba(0,0,0,0.04); min-height: 400px; }
|
|
|
+.video-cover { width: 90px; height: 50px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); transition: transform 0.3s; }
|
|
|
+.video-cover:hover { transform: scale(1.08); }
|
|
|
+.video-title-link { color: #303133; text-decoration: none; font-weight: 600; font-size: 14px; }
|
|
|
+.video-title-link:hover { color: #409EFF; }
|
|
|
+.video-meta { margin-top: 6px; font-size: 12px; color: #909399; }
|
|
|
+.vid-tag { background: #f0f2f5; padding: 2px 6px; border-radius: 4px; margin-right: 10px; }
|
|
|
+.status-dot { position: relative; padding-left: 16px; font-size: 13px; color: #606266; }
|
|
|
+.status-dot::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; }
|
|
|
+.status-dot.success::before { background-color: #67C23A; box-shadow: 0 0 6px #67C23A; }
|
|
|
+.status-dot.warning::before { background-color: #E6A23C; box-shadow: 0 0 6px #E6A23C; }
|
|
|
+.status-dot.danger::before { background-color: #F56C6C; box-shadow: 0 0 6px #F56C6C; }
|
|
|
+.danger-text { color: #F56C6C; }
|
|
|
+.pagination-container { margin-top: 30px; display: flex; justify-content: center; }
|
|
|
+
|
|
|
+::v-deep .custom-glass-dialog { border-radius: 16px !important; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.15) !important; }
|
|
|
+::v-deep .custom-glass-dialog .el-dialog__header { padding: 20px 24px; background: #fcfcfd; border-bottom: 1px solid #f0f0f0; }
|
|
|
+.dialog-header-custom { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; color: #303133; }
|
|
|
+.dialog-header-custom i { color: #409EFF; font-size: 20px; }
|
|
|
+::v-deep .custom-glass-dialog .el-dialog__body { padding: 24px; }
|
|
|
+.input-label-tip { font-size: 13px; color: #909399; margin-bottom: 12px; }
|
|
|
+.preview-wrapper { background: #1a1a1a; border-radius: 12px; overflow: hidden; line-height: 0; }
|
|
|
+::v-deep .table-header-cell { background-color: #f8f9fb !important; color: #303133; font-weight: 600; padding: 12px 0; }
|
|
|
</style>
|
