rootandClaude Opus 5
e282bd23e8
node-sass 4.x cannot build on arm64/Node 16. Use sass with ::v-deep instead of /deep/, and only replace the server dist after the upload is unpacked and verified. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
468 lines
13 KiB
Vue
468 lines
13 KiB
Vue
<template>
|
|
<div class="happinessPlazaTopList">
|
|
<!--操作栏-->
|
|
<div class="action-bar">
|
|
<!-- <el-select v-model.number="topType" placeholder="置顶类型" size="small" @change="getVideoList('status')"
|
|
clearable>
|
|
<el-option label="全部" :value="0"></el-option>
|
|
<el-option label="推荐" :value="1"></el-option>
|
|
<el-option label="最新" :value="2"></el-option>
|
|
</el-select> -->
|
|
<el-input
|
|
v-model="moduleName"
|
|
placeholder="请输入模块名称"
|
|
clearable
|
|
@keyup.enter.native="getVideoList('status')"
|
|
size="small"
|
|
class="param-input"
|
|
></el-input>
|
|
<el-button type="primary" size="small" @click="getVideoList"
|
|
>搜索</el-button
|
|
>
|
|
</div>
|
|
<!--数据表格-->
|
|
<el-table
|
|
:data="tableData"
|
|
style="width: 100%"
|
|
border
|
|
v-loading="loading"
|
|
element-loading-text="拼命加载中"
|
|
element-loading-spinner="el-icon-loading"
|
|
@sort-change="handleSortChange"
|
|
height="580"
|
|
>
|
|
<el-table-column
|
|
prop="id"
|
|
label="帖子ID"
|
|
align="center"
|
|
min-width="220"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="title"
|
|
label="视频标题"
|
|
align="center"
|
|
:show-overflow-tooltip="true"
|
|
min-width="250"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.title || "未知" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="封面图" align="center" min-width="80">
|
|
<template slot-scope="scope">
|
|
<img-load
|
|
:width="'60px'"
|
|
:height="'80px'"
|
|
:src="checkUrl(scope.row.cover)"
|
|
></img-load>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
prop="url"
|
|
label="帖子预览"
|
|
align="center"
|
|
min-width="80"
|
|
>
|
|
<template
|
|
slot-scope="scope"
|
|
v-if="
|
|
scope.row.newsType === 'SP' ||
|
|
scope.row.newsType === 'SHORT' ||
|
|
scope.row.newsType === 'AD_SP'
|
|
"
|
|
>
|
|
<i
|
|
class="el-icon-video-play views"
|
|
title="点击预览"
|
|
@click="checkMedia(scope.row.sourceURL, 'video')"
|
|
></i>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="seriesCover"
|
|
label="图集预览"
|
|
align="center"
|
|
min-width="100"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span v-if="!scope.row.seriesCover || !scope.row.seriesCover.length"
|
|
>未知</span
|
|
>
|
|
<div
|
|
v-else
|
|
class="picturePreview"
|
|
@click="previewPicture(scope.row.seriesCover, scope.row.id, [])"
|
|
>
|
|
<decrypt-img
|
|
style="width: 50px; height: 50px"
|
|
:src="imgUrl + item"
|
|
fit="fill"
|
|
v-for="(item, i) in scope.row.seriesCover"
|
|
:key="i"
|
|
></decrypt-img>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="sort"
|
|
label="置顶排序"
|
|
align="center"
|
|
min-width="80"
|
|
></el-table-column>
|
|
<!-- <el-table-column prop="recommendSort" label="推荐排序" align="center" min-width="80"></el-table-column>
|
|
<el-table-column prop="newSort" label="最新排序" align="center" min-width="80"></el-table-column>
|
|
<el-table-column prop="recommendEndTime" label="推荐置顶结束时间" align="center" min-width="160">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.recommendEndTime | changeDate }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="newEndTime" label="最新置顶结束时间" align="center" min-width="160">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.newEndTime | changeDate }}</span>
|
|
</template>
|
|
</el-table-column> -->
|
|
<el-table-column
|
|
prop="createdAt"
|
|
label="更新时间"
|
|
align="center"
|
|
min-width="160"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.updatedAt | changeDate }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="createdAt"
|
|
label="上传时间"
|
|
align="center"
|
|
min-width="160"
|
|
:sortable="'custom'"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.createdAt | changeDate }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="操作"
|
|
align="center"
|
|
min-width="140"
|
|
fixed="right"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
type="success"
|
|
size="mini"
|
|
icon="el-icon-edit"
|
|
@click="edit(scope.row)"
|
|
></el-button>
|
|
<el-button
|
|
type="danger"
|
|
size="mini"
|
|
icon="el-icon-delete"
|
|
@click="del(scope.row)"
|
|
></el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- 分页组件 -->
|
|
<div class="bottom">
|
|
<div class="page">
|
|
<el-pagination
|
|
:page-sizes="[10, 25, 50, 100]"
|
|
:current-page="pageNumber"
|
|
:page-size="pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total"
|
|
background
|
|
v-if="total > 10"
|
|
@size-change="changeSize"
|
|
@current-change="changeCurrent"
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
<!--封面图、视频弹窗组件-->
|
|
<media-popup ref="mediaPopup"></media-popup>
|
|
<!-- 图集预览窗口 -->
|
|
<preview-picture
|
|
ref="previewPicture"
|
|
@handlerPreviewList="handlerPreviewList"
|
|
></preview-picture>
|
|
<el-dialog
|
|
title="置顶配置"
|
|
align="center"
|
|
:visible.sync="showEdit"
|
|
width="390px"
|
|
@close="close"
|
|
>
|
|
<el-form ref="form" label-width="130px">
|
|
<el-form-item label="置顶排序:" prop="authorID">
|
|
<el-input
|
|
v-model.number="editSort"
|
|
size="small"
|
|
placeholder="请输入推荐置顶排序"
|
|
></el-input>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="推荐置顶排序:" prop="authorID">
|
|
<el-input v-model="editRecommendSort" size="small" placeholder="请输入推荐置顶排序"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="最新置顶排序:" prop="vlogger_user_id">
|
|
<el-input v-model="editNewSort" size="small" placeholder="请输入最新置顶排序"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="推荐置顶结束时间:" prop="editRecommendTime">
|
|
<el-date-picker v-model="editRecommendTime" type="datetime" :editable="false"
|
|
placeholder="请输入推荐置顶结束时间" size="small"></el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="最新置顶结束时间:" prop="editNewTime">
|
|
<el-date-picker v-model="editNewTime" type="datetime" :editable="false" placeholder="请输入最新置顶结束时间"
|
|
size="small"></el-date-picker>
|
|
</el-form-item> -->
|
|
<!-- <div class="form-flex-box">
|
|
<el-form-item label="标签:" prop="tags">
|
|
<tag-selector v-model="tags" :tagList="tagList"></tag-selector>
|
|
</el-form-item>
|
|
</div> -->
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="cancelBtn" size="small">取 消</el-button>
|
|
<el-button @click="confirmBtn" type="primary" size="small"
|
|
>确 认</el-button
|
|
>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import API from "@/api";
|
|
import baseConfig from "@/utils/serverUrlConfig";
|
|
import MediaPopup from "@/components/media-popup";
|
|
import PreviewPicture from "../../videoManagement/videoList/components/previewPicture";
|
|
import { sortEscape } from "@/utils/global";
|
|
export default {
|
|
components: {
|
|
MediaPopup,
|
|
PreviewPicture,
|
|
},
|
|
data() {
|
|
return {
|
|
imgUrl: baseConfig.imgUrl,
|
|
newImgUrl: baseConfig.newImgUrl,
|
|
tableData: [],
|
|
pageNumber: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
showEdit: false,
|
|
topType: 0,
|
|
moduleName: "",
|
|
editNewSort: "",
|
|
editSort: "",
|
|
editRecommendSort: "",
|
|
editNewTime: "",
|
|
editRecommendTime: "",
|
|
editId: "",
|
|
};
|
|
},
|
|
created() {
|
|
this.getVideoList();
|
|
},
|
|
methods: {
|
|
handlerPreviewList() {
|
|
this.getVideoList();
|
|
},
|
|
checkUrl(domain) {
|
|
if (!domain) {
|
|
return "";
|
|
}
|
|
var patt = /^http(s)?:\/\/.+/;
|
|
if (!patt.test(domain)) {
|
|
if (domain[0] == "/") {
|
|
return this.newImgUrl + domain;
|
|
} else {
|
|
return this.imgUrl + domain;
|
|
}
|
|
} else {
|
|
return domain;
|
|
}
|
|
},
|
|
searchList() {
|
|
this.pageNumber = 1;
|
|
this.getVideoList();
|
|
},
|
|
// 获取视频列表
|
|
getVideoList() {
|
|
let req = {
|
|
moduleName: this.moduleName ? this.moduleName : undefined,
|
|
pageSize: this.pageSize,
|
|
pageNumber: this.pageNumber,
|
|
};
|
|
this.loading = true;
|
|
API.queryHappTopList(req)
|
|
.then((res) => {
|
|
if (res.code === 200 && res.data.list) {
|
|
this.tableData = res.data.list;
|
|
console.log(this.tableData);
|
|
this.total = res.data.total;
|
|
} else {
|
|
this.tableData = [];
|
|
this.total = 0;
|
|
}
|
|
this.loading = false;
|
|
})
|
|
.catch(() => {
|
|
this.tableData = [];
|
|
this.loading = false;
|
|
});
|
|
},
|
|
previewPicture(pictureArr, id, tags) {
|
|
let Arr = JSON.parse(JSON.stringify(pictureArr));
|
|
this.$refs.previewPicture.open(Arr, id, tags);
|
|
},
|
|
// 数据排序
|
|
handleSortChange(column) {
|
|
if (column.order) {
|
|
this.params.value = sortEscape(column.order);
|
|
this.params.key = column.prop;
|
|
} else {
|
|
this.params.value = "";
|
|
this.params.key = "";
|
|
}
|
|
this.getVideoList();
|
|
},
|
|
// 查看媒体
|
|
checkMedia(url, type) {
|
|
this.$refs.mediaPopup.open(url, type);
|
|
},
|
|
// 编辑
|
|
edit(row) {
|
|
this.editId = row.id;
|
|
this.editSort = row.sort;
|
|
// this.editNewSort = row.newSort;
|
|
// this.editRecommendSort = row.recommendSort;
|
|
// this.editNewTime = row.newEndTime;
|
|
// this.editRecommendTime = row.recommendEndTime;
|
|
this.showEdit = true;
|
|
},
|
|
close() {
|
|
// this.editNewSort = "";
|
|
// this.editRecommendSort = "";
|
|
// this.editNewTime = "";
|
|
// this.editRecommendTime = "";
|
|
this.editSort = "";
|
|
this.editId = "";
|
|
},
|
|
cancelBtn() {
|
|
this.showEdit = false;
|
|
},
|
|
async confirmBtn() {
|
|
// if (this.editRecommendSort > 0 && !this.editRecommendTime) {
|
|
// this.$message({
|
|
// message: "请输入推荐置顶结束时间",
|
|
// type: "error",
|
|
// });
|
|
// return;
|
|
// }
|
|
// if (this.editNewSort > 0 && !this.editNewTime) {
|
|
// this.$message({
|
|
// message: "请输入最新置顶结束时间",
|
|
// type: "error",
|
|
// });
|
|
// return;
|
|
// }
|
|
// if (!this.editNewSort) {
|
|
// this.$message({
|
|
// message: "请输入置顶排序",
|
|
// type: "error",
|
|
// });
|
|
// return;
|
|
// }
|
|
let req = {
|
|
id: this.editId,
|
|
sort: Number(this.editSort),
|
|
// newSort: Number(this.editNewSort),
|
|
// newEndTime: this.editNewTime,
|
|
// recommendSort: Number(this.editRecommendSort),
|
|
// recommendEndTime: this.editRecommendTime,
|
|
};
|
|
let res = await API.updataHappTopList(req);
|
|
if (res && res.code == 200) {
|
|
this.$message({
|
|
message: "操作成功",
|
|
type: "success",
|
|
});
|
|
this.showEdit = false;
|
|
this.getVideoList();
|
|
return;
|
|
}
|
|
this.$message({
|
|
message: res.tip || "操作失败",
|
|
type: "error",
|
|
});
|
|
},
|
|
async del(row) {
|
|
let req = {
|
|
id: row.id,
|
|
};
|
|
let res = await API.delHappTopList(req);
|
|
if (res && res.code == 200) {
|
|
this.$message({
|
|
message: "操作成功",
|
|
type: "success",
|
|
});
|
|
this.showEdit = false;
|
|
this.getVideoList();
|
|
return;
|
|
}
|
|
this.$message({
|
|
message: res.tip || "操作失败",
|
|
type: "error",
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.picturePreview {
|
|
max-width: 300px;
|
|
display: flex;
|
|
}
|
|
|
|
.videoList-box {
|
|
min-height: 100vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.bottom {
|
|
margin-top: 20px;
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.page {
|
|
display: inline-block;
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.el-pagination {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.dialog-footer {
|
|
left: 0;
|
|
}
|
|
|
|
.tagBox {
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
::v-deep .el-form-item__content {
|
|
display: flex;
|
|
}
|
|
</style>
|