|
|
@@ -0,0 +1,215 @@
|
|
|
+<script setup>
|
|
|
+import { reactive, ref } from 'vue'
|
|
|
+import { videoInterface } from '@/api/api.js'
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
+import { Search } from "@element-plus/icons-vue";
|
|
|
+
|
|
|
+function formatSeconds(e) {
|
|
|
+ let tem = parseInt(e)
|
|
|
+ let min = parseInt(tem / 60)
|
|
|
+ let sen = parseInt(tem % 60)
|
|
|
+ if (min > 1) {
|
|
|
+ return `${min}分${sen}秒`
|
|
|
+ } else {
|
|
|
+ return `${sen}秒`
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const pageState = reactive({
|
|
|
+ source: '',
|
|
|
+ sourceOpt: [{ label: '视频社区', val: 1 }, { label: '线上路演', val: 2 }],
|
|
|
+ keyWord: '',
|
|
|
+
|
|
|
+ showDataLoading: false,
|
|
|
+ tableData: [],
|
|
|
+ page: 1,
|
|
|
+ pageSize: 15,
|
|
|
+ total: 0,
|
|
|
+ tableColums: [
|
|
|
+ {
|
|
|
+ label: '弹幕内容',
|
|
|
+ key: 'Content',
|
|
|
+ minwidthsty: '200px',
|
|
|
+ toolTip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '视频标题',
|
|
|
+ key: 'Title',
|
|
|
+ minwidthsty: '150px'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '所属模块',
|
|
|
+ key: 'Source',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '时间点',
|
|
|
+ key: 'Seconds',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '发送时间',
|
|
|
+ key: 'CreateTime',
|
|
|
+ minwidthsty: '120px'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '发送人',
|
|
|
+ key: 'UserName',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '弹幕来源',
|
|
|
+ key: 'SourceAgent',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '操作',
|
|
|
+ key: 'opt',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+
|
|
|
+
|
|
|
+})
|
|
|
+
|
|
|
+async function getList() {
|
|
|
+ pageState.showDataLoading = true
|
|
|
+ const res = await videoInterface.bulletChatList({
|
|
|
+ PageSize: pageState.pageSize,
|
|
|
+ CurrentIndex: pageState.page,
|
|
|
+ Source: pageState.source,
|
|
|
+ Keywords: pageState.keyWord
|
|
|
+ })
|
|
|
+ pageState.showDataLoading = false
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ pageState.total = res.Data.Paging.Totals
|
|
|
+ pageState.tableData = res.Data.List || []
|
|
|
+ }
|
|
|
+}
|
|
|
+getList()
|
|
|
+
|
|
|
+function search() {
|
|
|
+ pageState.page = 1
|
|
|
+ pageState.source = ''
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+function handlePageChange(e) {
|
|
|
+ pageState.page = e
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+function typeChange() {
|
|
|
+ pageState.keyWord = ''
|
|
|
+ pageState.page = 1
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+// 删除弹幕
|
|
|
+function handleDel(item) {
|
|
|
+ ElMessageBox.confirm('是否确认删除该条弹幕，删除后不可恢复!', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ videoInterface.bulletChatDel({ Id: item.Id }).then(res => {
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ ElMessage.success('删除成功')
|
|
|
+ pageState.page = 1
|
|
|
+ pageState.source = ''
|
|
|
+ getList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="bullet-chat-page">
|
|
|
+ <div class="top-box">
|
|
|
+ <el-select
|
|
|
+ v-model="pageState.source"
|
|
|
+ clearable
|
|
|
+ placeholder="请选择所属模块"
|
|
|
+ @change="typeChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in pageState.sourceOpt"
|
|
|
+ :key="item.val"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.val"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-input
|
|
|
+ v-model="pageState.keyWord"
|
|
|
+ placeholder="请输入弹幕内容或视频标题"
|
|
|
+ @input="search"
|
|
|
+ clearable
|
|
|
+ style="width: 400px; float: right"
|
|
|
+ :prefix-icon="Search"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="main">
|
|
|
+ <el-table
|
|
|
+ ref="table"
|
|
|
+ border
|
|
|
+ :data="pageState.tableData"
|
|
|
+ v-loading="pageState.showDataLoading"
|
|
|
+ element-loading-text="加载中..."
|
|
|
+ style="margin-top: 20px"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ v-for="item in pageState.tableColums"
|
|
|
+ :key="item.label"
|
|
|
+ :label="item.label"
|
|
|
+ :width="item.widthsty"
|
|
|
+ :min-width="item.minwidthsty"
|
|
|
+ :show-overflow-tooltip="item.toolTip"
|
|
|
+ align="center"
|
|
|
+ :prop="item.key"
|
|
|
+ >
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span v-if="item.key == 'Source'">{{
|
|
|
+ row.Source === 1 ? "视频社区" : "线上路演"
|
|
|
+ }}</span>
|
|
|
+ <span v-else-if="item.key === 'Seconds'">{{
|
|
|
+ formatSeconds(row.Seconds)
|
|
|
+ }}</span>
|
|
|
+ <span v-else-if="item.key === 'SourceAgent'">{{
|
|
|
+ row.SourceAgent == "1" ? "小程序" : "pc端"
|
|
|
+ }}</span>
|
|
|
+ <span
|
|
|
+ v-else-if="item.key === 'opt'"
|
|
|
+ style="color: #ff0000; cursor: pointer"
|
|
|
+ @click="handleDel(row)"
|
|
|
+ >删除</span
|
|
|
+ >
|
|
|
+ <span v-else>{{ row[item.key] || "——" }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div>
|
|
|
+ <el-pagination
|
|
|
+ layout="total,prev,pager,next"
|
|
|
+ background
|
|
|
+ :current-page="pageState.page"
|
|
|
+ @current-change="handlePageChange"
|
|
|
+ :page-size="pageState.pageSize"
|
|
|
+ :total="pageState.total"
|
|
|
+ style="float: right; margin-top: 20px"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.bullet-chat-page {
|
|
|
+ min-height: 70vh;
|
|
|
+ padding: 20px 30px;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #ececec;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
|
|
|
+}
|
|
|
+</style>
|
