|
|
@@ -0,0 +1,556 @@
|
|
|
+<script setup>
|
|
|
+import { reactive, ref } from 'vue'
|
|
|
+import { interactiveInterface } from '@/api/api.js';
|
|
|
+import mPage from '@/components/mPage.vue'
|
|
|
+
|
|
|
+const pageState = reactive({
|
|
|
+ page_no: 1,
|
|
|
+ totals: 0,
|
|
|
+ tableData: [],
|
|
|
+ tableColums: [
|
|
|
+ {
|
|
|
+ label: '报告标题',
|
|
|
+ key: 'Title',
|
|
|
+ minwidthsty: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '发布时间',
|
|
|
+ key: 'PublishTime',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '点赞数量',
|
|
|
+ key: 'LikeNum',
|
|
|
+ sortable: 'custom'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '最近一次点赞时间',
|
|
|
+ key: 'ModifyTime'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ sort_obj: {},
|
|
|
+
|
|
|
+ openDetailDia: false,
|
|
|
+ likeprops: {
|
|
|
+ title: '点赞详情',
|
|
|
+ like_num: 0
|
|
|
+ },
|
|
|
+ likeList: [],
|
|
|
+ like_page_no: 1,
|
|
|
+ like_totals: 0,
|
|
|
+ likeTableColums: [
|
|
|
+ {
|
|
|
+ label: '用户姓名',
|
|
|
+ key: 'RealName',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '公司名称',
|
|
|
+ key: 'CompanyName',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '客户状态',
|
|
|
+ key: 'CompanyStatus',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '点赞来源',
|
|
|
+ key: 'SourceAgent',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '点赞时间',
|
|
|
+ key: 'ModifyTime',
|
|
|
+ minwidthsty: 200
|
|
|
+ },
|
|
|
+ ],
|
|
|
+
|
|
|
+ /* */
|
|
|
+ showDataLoading: false,
|
|
|
+ default_datatype: 1,
|
|
|
+ tabsOptions: [
|
|
|
+ { label: '报告点赞', key: 1 },
|
|
|
+ { label: '问答点赞', key: 2 },
|
|
|
+ { label: '视频点赞', key: 4 },
|
|
|
+ { label: '问答吐槽', key: 3 },
|
|
|
+ { label: '视频吐槽', key: 5 },
|
|
|
+ ],
|
|
|
+ subTabsOptions: [
|
|
|
+ { label: '线上路演', key: 3 },
|
|
|
+ { label: '视频社区', key: 2 }
|
|
|
+ ],
|
|
|
+ default_subtype: 3,//3 路演视频 2视频社区
|
|
|
+})
|
|
|
+
|
|
|
+/* 列表 */
|
|
|
+async function getTableList() {
|
|
|
+ pageState.showDataLoading = true;
|
|
|
+ const { type, param } = pageState.sort_obj;
|
|
|
+
|
|
|
+ let params = {
|
|
|
+ SortParam: param || '',
|
|
|
+ SortType: type || '',
|
|
|
+ PageSize: 10,
|
|
|
+ CurrentIndex: pageState.page_no
|
|
|
+ }
|
|
|
+
|
|
|
+ if ([2, 4].includes(pageState.default_datatype)) {
|
|
|
+ params.DataType = 'like'
|
|
|
+ }
|
|
|
+ if ([3, 5].includes(pageState.default_datatype)) {
|
|
|
+ params.DataType = 'tease'
|
|
|
+ }
|
|
|
+ if ([2, 3].includes(pageState.default_datatype)) {
|
|
|
+ params.Source = 1
|
|
|
+ }
|
|
|
+ if ([4, 5].includes(pageState.default_datatype)) {
|
|
|
+ params.Source = pageState.default_subtype
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ const { Ret, Data } = pageState.default_datatype === 1
|
|
|
+ ? await interactiveInterface.likelist(params)
|
|
|
+ : await interactiveInterface.questionLikeList(params)
|
|
|
+
|
|
|
+ if (Ret !== 200) return
|
|
|
+
|
|
|
+ const { List, Paging } = Data;
|
|
|
+ pageState.tableData = List || [];
|
|
|
+ pageState.totals = Paging.Totals;
|
|
|
+
|
|
|
+ pageState.showDataLoading = false;
|
|
|
+}
|
|
|
+
|
|
|
+function likePageChange(page) {
|
|
|
+ pageState.page_no = page;
|
|
|
+ getTableList();
|
|
|
+}
|
|
|
+
|
|
|
+function likeDetailPageChange(page) {
|
|
|
+ pageState.like_page_no = page;
|
|
|
+ getDetailList()
|
|
|
+}
|
|
|
+
|
|
|
+/* 获取点赞/吐槽详情列表 */
|
|
|
+async function getDetailList() {
|
|
|
+
|
|
|
+ const { ReportId, ReportChapterId, CommunityQuestionId } = pageState.detailParams;
|
|
|
+
|
|
|
+ const { Ret, Data } = pageState.default_datatype === 1
|
|
|
+ ? await interactiveInterface.likeDetail({
|
|
|
+ PageSize: 10,
|
|
|
+ CurrentIndex: pageState.like_page_no,
|
|
|
+ ReportId: ReportId || '',
|
|
|
+ ReportChapterId: ReportChapterId || ''
|
|
|
+ })
|
|
|
+ : await interactiveInterface.questionLikeDetail({
|
|
|
+ PageSize: 10,
|
|
|
+ CurrentIndex: pageState.like_page_no,
|
|
|
+ CommunityQuestionId: CommunityQuestionId || '',
|
|
|
+ DataType: [2, 4].includes(pageState.default_datatype) ? 'like' : 'tease',
|
|
|
+ Source: [2, 3].includes(pageState.default_datatype) ? 1 : pageState.default_subtype
|
|
|
+ })
|
|
|
+
|
|
|
+ if (Ret !== 200) return
|
|
|
+
|
|
|
+ const { List, Paging } = Data;
|
|
|
+
|
|
|
+ pageState.likeList = List || [];
|
|
|
+ pageState.like_totals = Paging.Totals;
|
|
|
+}
|
|
|
+getTableList()
|
|
|
+
|
|
|
+/* 查看详情 */
|
|
|
+function toDetail({ ReportId, ReportChapterId, LikeNum, Title, CommunityQuestionId, Num, QuestionContent }) {
|
|
|
+ pageState.detailParams = { ReportId, ReportChapterId, CommunityQuestionId };
|
|
|
+ getDetailList()
|
|
|
+
|
|
|
+ pageState.likeprops = {
|
|
|
+ title: [1, 2, 4].includes(pageState.default_datatype) ? '点赞详情' : '吐槽详情',
|
|
|
+ like_num: LikeNum || Num,
|
|
|
+ sub_title: Title || QuestionContent
|
|
|
+ }
|
|
|
+ pageState.openDetailDia = true;
|
|
|
+}
|
|
|
+
|
|
|
+function closeDialog() {
|
|
|
+ pageState.openDetailDia = false;
|
|
|
+ pageState.like_page_no = 1;
|
|
|
+}
|
|
|
+
|
|
|
+/* 排序变化时 */
|
|
|
+function sortChangeHandle({ prop, order }) {
|
|
|
+ pageState.page_no = 1;
|
|
|
+
|
|
|
+ pageState.sort_obj = {
|
|
|
+ type: order === 'ascending' ? 'asc' : order === 'descending' ? 'desc' : '',
|
|
|
+ param: prop
|
|
|
+ }
|
|
|
+ getTableList();
|
|
|
+}
|
|
|
+
|
|
|
+/* 改变表格类型 */
|
|
|
+const table = ref(null)
|
|
|
+function changeTabHandle({ key }) {
|
|
|
+ pageState.default_datatype = key;
|
|
|
+ pageState.default_subtype = pageState.subTabsOptions[0].key
|
|
|
+ pageState.page_no = 1;
|
|
|
+ pageState.sort_obj = {};
|
|
|
+ table.value.clearSort();
|
|
|
+ setColumns();
|
|
|
+ getTableList();
|
|
|
+}
|
|
|
+
|
|
|
+// 二级类型切换
|
|
|
+function changeSubTabHandle(item) {
|
|
|
+ pageState.default_subtype = item.key
|
|
|
+ pageState.page_no = 1;
|
|
|
+ pageState.sort_obj = {};
|
|
|
+ table.value.clearSort();
|
|
|
+ setColumns();
|
|
|
+ getTableList();
|
|
|
+}
|
|
|
+
|
|
|
+function setColumns() {
|
|
|
+ let tag = [1, 2, 4].includes(pageState.default_datatype) ? '点赞' : '吐槽';
|
|
|
+ if (pageState.default_datatype === 1) {
|
|
|
+ pageState.tableColums = [
|
|
|
+ {
|
|
|
+ label: '报告标题',
|
|
|
+ key: 'Title',
|
|
|
+ minwidthsty: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '发布时间',
|
|
|
+ key: 'PublishTime',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: `${tag}数量`,
|
|
|
+ key: 'LikeNum',
|
|
|
+ sortable: 'custom'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: `最近一次${tag}时间`,
|
|
|
+ key: 'ModifyTime'
|
|
|
+ },
|
|
|
+ ]
|
|
|
+
|
|
|
+ pageState.likeTableColums = [
|
|
|
+ {
|
|
|
+ label: '用户姓名',
|
|
|
+ key: 'RealName',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '公司名称',
|
|
|
+ key: 'CompanyName',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '客户状态',
|
|
|
+ key: 'CompanyStatus',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '点赞来源',
|
|
|
+ key: 'SourceAgent',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '点赞时间',
|
|
|
+ key: 'ModifyTime',
|
|
|
+ minwidthsty: 200
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ } else if ([2, 3].includes(pageState.default_datatype)) {//问答
|
|
|
+ pageState.tableColums = [
|
|
|
+ {
|
|
|
+ label: '提问内容',
|
|
|
+ key: 'QuestionContent',
|
|
|
+ minwidthsty: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '提问时间',
|
|
|
+ key: 'CreateTime',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: `${tag}数量`,
|
|
|
+ key: 'Num',
|
|
|
+ sortable: 'custom'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: `${tag}时间`,
|
|
|
+ key: 'ModifyTime'
|
|
|
+ },
|
|
|
+ ]
|
|
|
+
|
|
|
+ pageState.likeTableColums = [
|
|
|
+ {
|
|
|
+ label: '用户姓名',
|
|
|
+ key: 'RealName',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '公司名称',
|
|
|
+ key: 'CompanyName',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '客户状态',
|
|
|
+ key: 'CompanyFiccStatus',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: `${tag}来源`,
|
|
|
+ key: 'SourceAgent',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: `${tag}时间`,
|
|
|
+ key: 'ModifyTime',
|
|
|
+ minwidthsty: 200
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ } else if ([4, 5].includes(pageState.default_datatype)) {//视频
|
|
|
+ pageState.tableColums = [
|
|
|
+ {
|
|
|
+ label: '视频标题',
|
|
|
+ key: 'QuestionContent',
|
|
|
+ minwidthsty: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: `所属${pageState.default_subtype == 2 ? '标签' : '品种'}`,
|
|
|
+ key: 'VarietyClassifyTag',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '发布时间',
|
|
|
+ key: 'CreateTime',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: `${tag}数量`,
|
|
|
+ key: 'Num',
|
|
|
+ sortable: 'custom'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: `${tag}时间`,
|
|
|
+ key: 'ModifyTime'
|
|
|
+ },
|
|
|
+ ]
|
|
|
+
|
|
|
+ pageState.likeTableColums = [
|
|
|
+ {
|
|
|
+ label: '用户姓名',
|
|
|
+ key: 'RealName',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '公司名称',
|
|
|
+ key: 'CompanyName',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '客户状态',
|
|
|
+ key: 'CompanyFiccStatus',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: `${tag}来源`,
|
|
|
+ key: 'SourceAgent',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: `${tag}时间`,
|
|
|
+ key: 'ModifyTime',
|
|
|
+ minwidthsty: 200
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="like-container">
|
|
|
+ <div class="main">
|
|
|
+ <ul class="tabs-cont">
|
|
|
+ <li
|
|
|
+ :class="['tab-item', { act: pageState.default_datatype === tab.key }]"
|
|
|
+ v-for="tab in pageState.tabsOptions"
|
|
|
+ :key="tab.key"
|
|
|
+ @click="changeTabHandle(tab)"
|
|
|
+ >
|
|
|
+ {{ tab.label }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div v-if="[4, 5].includes(pageState.default_datatype)" class="sub-tabs">
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+ 'sub-tab-item',
|
|
|
+ pageState.default_subtype == item.key && 'active',
|
|
|
+ ]"
|
|
|
+ v-for="item in pageState.subTabsOptions"
|
|
|
+ :key="item.key"
|
|
|
+ @click="changeSubTabHandle(item)"
|
|
|
+ >{{ item.label }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ ref="table"
|
|
|
+ border
|
|
|
+ :data="pageState.tableData"
|
|
|
+ v-loading="pageState.showDataLoading"
|
|
|
+ element-loading-text="加载中..."
|
|
|
+ style="margin-top: 20px"
|
|
|
+ @sort-change="sortChangeHandle"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ v-for="item in pageState.tableColums"
|
|
|
+ :key="item.label"
|
|
|
+ :label="item.label"
|
|
|
+ :width="item.widthsty"
|
|
|
+ :min-width="item.minwidthsty"
|
|
|
+ :sortable="item.sortable"
|
|
|
+ align="center"
|
|
|
+ :prop="item.key"
|
|
|
+ >
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span
|
|
|
+ v-if="['LikeNum', 'Num'].includes(item.key)"
|
|
|
+ class="editsty"
|
|
|
+ @click="toDetail(row)"
|
|
|
+ >{{ row[item.key] || "——" }}</span
|
|
|
+ >
|
|
|
+
|
|
|
+ <span v-else-if="item.key === 'Title'">
|
|
|
+ {{ row.ClassifyNameFirst ? `${row.ClassifyNameFirst}/` : "" }}
|
|
|
+ {{ row[item.key] }}
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <span v-else>{{ row[item.key] || "——" }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <template #empty>
|
|
|
+ <div style="padding: 100px 0">
|
|
|
+ <img
|
|
|
+ src="~@/assets/img/cus_m/nodata.png"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ display: block;
|
|
|
+ width: 128px;
|
|
|
+ height: 128px;
|
|
|
+ margin: 0 auto;
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <span>暂无数据</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ <div style="height: 40px; margin-top: 10px; padding: 0 20px">
|
|
|
+ <m-page
|
|
|
+ :page_no="pageState.page_no"
|
|
|
+ :pageSize="10"
|
|
|
+ :total="pageState.totals"
|
|
|
+ @handleCurrentChange="likePageChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 详情弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ :model-value="pageState.openDetailDia"
|
|
|
+ width="700px"
|
|
|
+ :title="pageState.likeprops.title"
|
|
|
+ @close="closeDialog"
|
|
|
+ >
|
|
|
+ <div class="dialog-cont">
|
|
|
+ <h4 style="margin-bottom: 10px">{{ pageState.likeprops.sub_title }}</h4>
|
|
|
+ <span>点赞数量：{{ pageState.likeprops.like_num }} </span>
|
|
|
+ <el-table
|
|
|
+ border
|
|
|
+ :data="pageState.likeList"
|
|
|
+ style="margin-top: 20px"
|
|
|
+ max-height="350"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ v-for="item in pageState.likeTableColums"
|
|
|
+ :key="item.label"
|
|
|
+ :label="item.label"
|
|
|
+ :width="item.widthsty"
|
|
|
+ :min-width="item.minwidthsty"
|
|
|
+ align="center"
|
|
|
+ :prop="item.key"
|
|
|
+ >
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span v-if="item.key === 'SourceAgent'">{{
|
|
|
+ row[item.key] === 1 ? "小程序" : "PC"
|
|
|
+ }}</span>
|
|
|
+ <span v-else>{{ row[item.key] || "——" }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <template #empty>
|
|
|
+ <div style="padding: 20px 0">
|
|
|
+ <img
|
|
|
+ src="~@/assets/img/cus_m/nodata.png"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ display: block;
|
|
|
+ width: 128px;
|
|
|
+ height: 128px;
|
|
|
+ margin: 0 auto;
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <span>暂无数据</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ <div style="height: 40px; margin-top: 10px; padding: 0 20px">
|
|
|
+ <m-page
|
|
|
+ :page_no="pageState.like_page_no"
|
|
|
+ :pageSize="10"
|
|
|
+ :total="pageState.like_totals"
|
|
|
+ @handleCurrentChange="likeDetailPageChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang='scss' scoped>
|
|
|
+* {
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.like-container {
|
|
|
+ .main {
|
|
|
+ min-height: calc(100vh - 120px);
|
|
|
+ padding: 20px 30px;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #ececec;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
|
|
|
+
|
|
|
+ .tabs-cont {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 15px;
|
|
|
+ .tab-item {
|
|
|
+ margin-right: 30px;
|
|
|
+ // border-bottom: 3px solid transparent;
|
|
|
+ min-width: 100px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px 0;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #606266;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ border-radius: 4px;
|
|
|
+ &.act {
|
|
|
+ background: #409eff;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sub-tabs {
|
|
|
+ margin-top: 30px;
|
|
|
+ .sub-tab-item {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #999;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 30px;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ &.active {
|
|
|
+ border-bottom: 4px solid #58aaff;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
