|
|
@@ -0,0 +1,1114 @@
|
|
|
+<script setup>
|
|
|
+import { reactive, ref } from 'vue'
|
|
|
+import { videoENInterface, PVDetailList } from '@/api/modules/reportEnApi'
|
|
|
+import * as reportEnInterface from '@/api/modules/reportEnApi';
|
|
|
+import { customInterence, videoInterface, reportVarietyENInterence } from '@/api/api.js'
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus';
|
|
|
+import { Search } from "@element-plus/icons-vue";
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+
|
|
|
+function formatDuration(e) {
|
|
|
+ let tem = parseInt(e)
|
|
|
+ let min = parseInt(tem / 60)
|
|
|
+ let sen = parseInt(tem % 60)
|
|
|
+ if (min > 0) {
|
|
|
+ return `${min}分${sen}秒`
|
|
|
+ } else {
|
|
|
+ return `${sen}秒`
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const pageState = reactive({
|
|
|
+ keyword: '',
|
|
|
+ list: [],
|
|
|
+ page: 1,
|
|
|
+ pageSize: 15,
|
|
|
+ total: 0,
|
|
|
+ options: [],
|
|
|
+ perList: [],
|
|
|
+ SortParam: '',
|
|
|
+ SortType: '',
|
|
|
+
|
|
|
+ navType: 3,// 2视频封面库 3线上路演
|
|
|
+ showImgPop: false,
|
|
|
+ imgList: [],
|
|
|
+ imgType: '',
|
|
|
+ imgPopData: {
|
|
|
+ type: '添加封面',
|
|
|
+ coverId: 0,
|
|
|
+ imgUrl: '',
|
|
|
+ name: ''
|
|
|
+ },
|
|
|
+
|
|
|
+ imgrules: {
|
|
|
+ name: [{ required: true, message: '请输入封面名称', trigger: 'blur' }],
|
|
|
+ imgUrl: [{ required: true, message: '请上传视频封面', trigger: 'change' }]
|
|
|
+ },
|
|
|
+
|
|
|
+ showClick: false,
|
|
|
+ logVideoId: 0,
|
|
|
+ logVideoName: '',
|
|
|
+ logPage: 1,
|
|
|
+ logPageSize: 10,
|
|
|
+ logTotal: 0,
|
|
|
+ logList: [],
|
|
|
+ logSortType: '',
|
|
|
+
|
|
|
+ // ---------------预览视频弹窗
|
|
|
+ previewPop: false,
|
|
|
+ previewPopTitle: "",
|
|
|
+ previewVideoUrl: "",
|
|
|
+
|
|
|
+ popEmailData: {
|
|
|
+ show: false,
|
|
|
+ radio: '1',
|
|
|
+ checkUser: false,//是否选择指定人员
|
|
|
+ options: [],
|
|
|
+ value: [],
|
|
|
+ customOptions: [],
|
|
|
+ customValue: [],
|
|
|
+ theme: '',
|
|
|
+ videoId: 0,
|
|
|
+ varietyOpt: [],
|
|
|
+ varietyVal: [],
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+function initPage() {
|
|
|
+ getVideoList()
|
|
|
+}
|
|
|
+initPage()
|
|
|
+
|
|
|
+function handleNavChange(type) {
|
|
|
+ pageState.page = 1
|
|
|
+ pageState.total = 0
|
|
|
+ pageState.navType = type
|
|
|
+ pageState.keyword = ''
|
|
|
+ if (type == 2) {
|
|
|
+ handleGetVideoCoverImgList()
|
|
|
+ } else {
|
|
|
+ getVideoList()
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+function searchHandle() {
|
|
|
+ pageState.page = 1
|
|
|
+ getVideoList()
|
|
|
+}
|
|
|
+
|
|
|
+function handlePageChange(page) {
|
|
|
+ pageState.page = page
|
|
|
+ if (pageState.navType !== 2) {
|
|
|
+ getVideoList()
|
|
|
+ } else {
|
|
|
+ handleGetVideoCoverImgList()
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+async function getVideoList() {
|
|
|
+ const params = {
|
|
|
+ KeyWord: pageState.keyword,
|
|
|
+ PageSize: pageState.pageSize,
|
|
|
+ CurrentIndex: pageState.page,
|
|
|
+ }
|
|
|
+ const res = await videoENInterface.roadVideoList(params)
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ pageState.total = res.Data.Paging.Totals
|
|
|
+ pageState.list = res.Data.List || []
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//新增\编辑视频
|
|
|
+function handleShowPop(item) {
|
|
|
+ console.log(item);
|
|
|
+ sessionStorage.setItem('videoENItem', JSON.stringify(item))
|
|
|
+ router.push({
|
|
|
+ path: !item ? '/videoManageENAdd' : 'videoManageENEdit'
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+//上传封面
|
|
|
+async function handleUploadImg(e) {
|
|
|
+ console.log(e);
|
|
|
+ let form = new FormData()
|
|
|
+ form.append("file", e.file)
|
|
|
+ const res = await customInterence.upload(form)
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ pageState.imgPopData.imgUrl = res.Data.ResourceUrl
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//发布
|
|
|
+async function handlePublished({ Id }) {
|
|
|
+ let res = await videoENInterface.roadVideoPublished({ Id })
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ ElMessage.success('发布成功')
|
|
|
+ getVideoList()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//取消发布
|
|
|
+async function handleCancelPublish({ Id }) {
|
|
|
+ let res = await videoENInterface.roadVideoPublishedCancel({ Id })
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ ElMessage.success('取消发布成功')
|
|
|
+ getVideoList()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 删除
|
|
|
+async function handelDel(item) {
|
|
|
+ const res = await videoENInterface.roadDelVideo({ Id: item.Id })
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ ElMessage.success('删除成功')
|
|
|
+ getVideoList()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function handleOpt(item, type) {
|
|
|
+ if (type === '发布') {
|
|
|
+ handlePublished(item)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if (type === '编辑') {
|
|
|
+ handleShowPop(item)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if (type === '删除') {
|
|
|
+ ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ handelDel(item)
|
|
|
+ }).catch(() => {
|
|
|
+
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if (type === '取消发布') {
|
|
|
+ handleCancelPublish(item)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if (type === '群发邮件') {
|
|
|
+ pageState.popEmailData.videoId = item.Id
|
|
|
+ pageState.popEmailData.theme = 'Online Presentation: ' + item.Abstract
|
|
|
+ pageState.popEmailData.checkUser = false
|
|
|
+ pageState.popEmailData.varietyOpt = []
|
|
|
+ pageState.popEmailData.varietyVal = []
|
|
|
+ pageState.popEmailData.show = true
|
|
|
+
|
|
|
+ getAllCustomEmail()
|
|
|
+ getReportVarietyOpts()
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if (type === '群发日志') {
|
|
|
+ router.push({
|
|
|
+ path: '/sendlog',
|
|
|
+ query: { id: item.Id, type: 1 },//类型：0英文研报，1英文线上路演
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+function sortChangeHandle({ prop, order }) {
|
|
|
+ console.log(prop, order)
|
|
|
+ pageState.SortType = order === 'ascending' ? 'asc' : order === 'descending' ? 'desc' : ''
|
|
|
+ if (pageState.SortType.length) {
|
|
|
+ pageState.SortParam = prop
|
|
|
+ } else {
|
|
|
+ pageState.SortParam = ''
|
|
|
+ }
|
|
|
+ getVideoList()
|
|
|
+}
|
|
|
+
|
|
|
+const clickNumberRef = ref(null)
|
|
|
+function handleShowClickNum(item) {
|
|
|
+ if (!item.PvEmail) return
|
|
|
+ pageState.logVideoId = item.Id
|
|
|
+ pageState.logVideoName = item.Title
|
|
|
+ pageState.showClick = true
|
|
|
+ pageState.logPage = 1
|
|
|
+ pageState.logList = []
|
|
|
+ pageState.logTotal = 0
|
|
|
+ pageState.logSortType = ''
|
|
|
+ clickNumberRef.value?.clearSort()
|
|
|
+ getVideoLogslist()
|
|
|
+}
|
|
|
+
|
|
|
+// 获取点击量详情
|
|
|
+async function getVideoLogslist() {
|
|
|
+ const params = {
|
|
|
+ CurrentIndex: pageState.logPage,
|
|
|
+ PageSize: pageState.logPageSize,
|
|
|
+ ReportId: Number(pageState.logVideoId),
|
|
|
+ ReportType: 1
|
|
|
+ }
|
|
|
+ const res = await PVDetailList(params)
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ pageState.logTotal = res.Data.Paging.Totals
|
|
|
+ // pageState.logCount=res.Data.Count
|
|
|
+ pageState.logList = res.Data.List || []
|
|
|
+ }
|
|
|
+}
|
|
|
+// 点击量详情 - 表格排序
|
|
|
+function detailSortChange({ order }) {
|
|
|
+ pageState.logSortType = order === 'ascending' ? '2' : order === 'descending' ? '1' : ''
|
|
|
+ getVideoLogslist()
|
|
|
+}
|
|
|
+function handleLogPageChange(e) {
|
|
|
+ pageState.logPage = e
|
|
|
+ getVideoLogslist()
|
|
|
+}
|
|
|
+//获取视频封面列表
|
|
|
+async function handleGetVideoCoverImgList() {
|
|
|
+ const res = await videoENInterface.videoCoverImgList({
|
|
|
+ PageSize: pageState.pageSize,
|
|
|
+ CurrentIndex: pageState.page
|
|
|
+ })
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ pageState.total = res.Data.Paging.Totals
|
|
|
+ pageState.imgList = res.Data.List || []
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//显示添加视频封面弹窗
|
|
|
+const imgform = ref(null)
|
|
|
+function handleShowImgPop(item) {
|
|
|
+ pageState.imgPopData.name = ''
|
|
|
+ pageState.imgPopData.imgUrl = ''
|
|
|
+ pageState.imgPopData.coverId = 0
|
|
|
+ if (!item) {
|
|
|
+ pageState.imgPopData.type = '添加封面'
|
|
|
+ } else {
|
|
|
+ pageState.imgPopData.type = '编辑封面'
|
|
|
+ pageState.imgPopData.name = item.CoverName
|
|
|
+ pageState.imgPopData.imgUrl = item.CoverUrl
|
|
|
+ pageState.imgPopData.coverId = item.Id
|
|
|
+ }
|
|
|
+ pageState.showImgPop = true
|
|
|
+ nextTick(() => {
|
|
|
+ imgform.value?.clearValidate();
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+//保存视频封面
|
|
|
+function handleSaveImg() {
|
|
|
+ imgform.value.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ let params = {
|
|
|
+ Id: Number(pageState.imgPopData.coverId),
|
|
|
+ CoverName: pageState.imgPopData.name,
|
|
|
+ CoverUrl: pageState.imgPopData.imgUrl
|
|
|
+ }
|
|
|
+ videoENInterface.videoCoverImgSave(params).then(res => {
|
|
|
+ if (res.Ret == 200) {
|
|
|
+ handleGetVideoCoverImgList()
|
|
|
+ if (pageState.imgPopData.type == '添加封面') {
|
|
|
+ ElMessage.success('添加成功')
|
|
|
+ } else {
|
|
|
+ ElMessage.success('编辑成功')
|
|
|
+ }
|
|
|
+ pageState.showImgPop = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+//删除视频封面
|
|
|
+function handleDelVideoCoverImg(item) {
|
|
|
+ ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ videoENInterface.videoCoverImgDel({
|
|
|
+ Id: Number(item.Id)
|
|
|
+ }).then(res => {
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ ElMessage.success('删除成功')
|
|
|
+ handleGetVideoCoverImgList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 预览视频
|
|
|
+const previewVideo = ref(null)
|
|
|
+function handlePreviewVideo({ Title, VideoUrl }) {
|
|
|
+ previewVideo.value?.play()
|
|
|
+ pageState.previewPopTitle = Title
|
|
|
+ pageState.previewVideoUrl = VideoUrl
|
|
|
+ pageState.previewPop = true
|
|
|
+}
|
|
|
+// 结束预览弹窗关闭回调 -- 暂停视频
|
|
|
+function endingPreview() {
|
|
|
+ previewVideo.value?.pause()
|
|
|
+}
|
|
|
+
|
|
|
+// 获取该报告对应的品种权限数据
|
|
|
+function getReportVarietyOpts() {
|
|
|
+ reportVarietyENInterence.varietyList({
|
|
|
+ VideoId: pageState.popEmailData.videoId
|
|
|
+ }).then(res => {
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ const arr = res.Data || []
|
|
|
+ pageState.popEmailData.varietyOpt = arr.filter(e => {
|
|
|
+ e.Child && e.Child.forEach(_e => delete _e.Child)
|
|
|
+ return e.Child && e.Child.length > 0
|
|
|
+ })
|
|
|
+ // 设置全部选中
|
|
|
+ pageState.popEmailData.varietyOpt.forEach(e => {
|
|
|
+ e.Child.forEach(_e => {
|
|
|
+ pageState.popEmailData.varietyVal.push([e.EnPermissionId, _e.EnPermissionId])
|
|
|
+ })
|
|
|
+ })
|
|
|
+ getCustomListEnFun()
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 获取所有邮件客户
|
|
|
+async function getAllCustomEmail() {
|
|
|
+ const res = await reportEnInterface.customEmailList({
|
|
|
+ CurrentIndex: pageState.page,
|
|
|
+ PageSize: 10000,
|
|
|
+ })
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ const arr = res.Data.List || []
|
|
|
+ pageState.popEmailData.options = arr
|
|
|
+ }
|
|
|
+}
|
|
|
+// 获取英文客户列表
|
|
|
+function getCustomListEnFun() {
|
|
|
+ let arr = []
|
|
|
+ pageState.popEmailData.varietyVal && pageState.popEmailData.varietyVal.forEach(_e => {
|
|
|
+ arr.push(_e[1])
|
|
|
+ });
|
|
|
+ if (!(arr.length > 0)) {
|
|
|
+ pageState.popEmailData.customOptions = []
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ customInterence.getCustomListEn({
|
|
|
+ PageSize: 100000,
|
|
|
+ CurrentIndex: 1,
|
|
|
+ EnPermissionIds: arr.join(',')
|
|
|
+ }).then(res => {
|
|
|
+ if (res.Ret !== 200) return
|
|
|
+ pageState.popEmailData.customOptions = res.Data.List || []
|
|
|
+ })
|
|
|
+}
|
|
|
+//删除选中的群发客户
|
|
|
+function handleDelSelectCustom(item, index) {
|
|
|
+ pageState.popEmailData.value.splice(index, 1)
|
|
|
+}
|
|
|
+//删除选中的英文客户
|
|
|
+function handleDelSelectCompany(item, index) {
|
|
|
+ pageState.popEmailData.customValue.splice(index, 1)
|
|
|
+}
|
|
|
+//发送邮件
|
|
|
+function handleConfirmSendEmail() {
|
|
|
+ let ids = []
|
|
|
+ pageState.popEmailData.value.forEach(item => {
|
|
|
+ ids.push(item.Id)
|
|
|
+ })
|
|
|
+ let customIds = []
|
|
|
+ pageState.popEmailData.customValue.forEach(item => {
|
|
|
+ customIds.push(item.CompanyId)
|
|
|
+ })
|
|
|
+
|
|
|
+ if (pageState.popEmailData.checkUser && ids.length === 0) {//指定人员
|
|
|
+ ElMessage.warning('请选择需要发送邮件的人员')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!pageState.popEmailData.checkUser) {
|
|
|
+ ids = []
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!pageState.popEmailData.theme) {
|
|
|
+ ElMessage.warning('请填写邮件主题')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (pageState.popEmailData.theme.length > 100) {
|
|
|
+ ElMessage.warning('邮件主题请控制在100个字符以内')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const arr = []
|
|
|
+ pageState.popEmailData.varietyVal && pageState.popEmailData.varietyVal.forEach(_e => {
|
|
|
+ arr.push(_e[1])
|
|
|
+ });
|
|
|
+ videoENInterface.videoEmailSend({
|
|
|
+ ReportId: pageState.popEmailData.videoId,
|
|
|
+ EmailIds: ids.join(','),
|
|
|
+ Theme: pageState.popEmailData.theme,
|
|
|
+ EnPermissions: arr,
|
|
|
+ NoCompanyIds: customIds,
|
|
|
+ }).then(res => {
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ ElMessage.success('发送成功')
|
|
|
+ pageState.popEmailData.show = false
|
|
|
+ getVideoList();
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="video-manage-page">
|
|
|
+ <div class="top-wrap">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="handleShowPop('')"
|
|
|
+ v-if="pageState.navType !== 2"
|
|
|
+ >添加视频</el-button
|
|
|
+ >
|
|
|
+ <div v-if="pageState.navType == 2">
|
|
|
+ <el-button type="primary" @click="handleShowImgPop('')"
|
|
|
+ >添加视频封面</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <el-input
|
|
|
+ placeholder="关键词搜索"
|
|
|
+ v-model="pageState.keyword"
|
|
|
+ style="max-width: 520px"
|
|
|
+ @input="searchHandle"
|
|
|
+ clearable
|
|
|
+ :prefix-icon="Search"
|
|
|
+ v-if="pageState.navType !== 2"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="list-wrap">
|
|
|
+ <div class="nav-box">
|
|
|
+ <span
|
|
|
+ :class="pageState.navType == 3 ? 'active' : ''"
|
|
|
+ @click="handleNavChange(3)"
|
|
|
+ >线上路演</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :class="pageState.navType == 2 ? 'active' : ''"
|
|
|
+ @click="handleNavChange(2)"
|
|
|
+ >视频封面库</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="pageState.list"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ @sort-change="sortChangeHandle"
|
|
|
+ v-if="pageState.navType !== 2"
|
|
|
+ >
|
|
|
+ <el-table-column prop="Title" label="视频标题" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span
|
|
|
+ style="cursor: pointer; color: #409eff"
|
|
|
+ @click="handlePreviewVideo(row)"
|
|
|
+ >{{ row.Title }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="Abstract" label="摘要" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="ClassifyNameFirst" label="分类" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span>{{ row.ClassifyNameRoot }}</span>
|
|
|
+ <span v-if="row.ClassifyNameFirst"
|
|
|
+ >/{{ row.ClassifyNameFirst }}</span
|
|
|
+ >
|
|
|
+ <span v-if="row.ClassifyNameSecond"
|
|
|
+ >/{{ row.ClassifyNameSecond }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="AdminRealName" label="创建人" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="ModifyTime" label="更新时间" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="VideoSeconds" label="时长" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span>{{ formatDuration(row.VideoSeconds) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="PublishState" label="状态" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span :style="{ color: row.State == 2 ? '#1dd411' : '' }">{{
|
|
|
+ row.State == 2 ? "已发布" : "未发布"
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="Pv"
|
|
|
+ label="点击量"
|
|
|
+ sortable="custom"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ color: row.PvEmail ? '#409eff' : '',
|
|
|
+ cursor: 'pointer',
|
|
|
+ }"
|
|
|
+ @click="handleShowClickNum(row)"
|
|
|
+ >{{ row.PvEmail || "--" }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="opt" label="操作" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <!-- 未发布 -->
|
|
|
+ <div v-if="row.State == 1">
|
|
|
+ <span
|
|
|
+ style="
|
|
|
+ cursor: pointer;
|
|
|
+ color: #409eff;
|
|
|
+ margin: 0 5px;
|
|
|
+ display: inline-block;
|
|
|
+ "
|
|
|
+ @click="handleOpt(row, '发布')"
|
|
|
+ >发布</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ style="
|
|
|
+ cursor: pointer;
|
|
|
+ color: #409eff;
|
|
|
+ margin: 0 5px;
|
|
|
+ display: inline-block;
|
|
|
+ "
|
|
|
+ @click="handleOpt(row, '编辑')"
|
|
|
+ >编辑</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ style="
|
|
|
+ cursor: pointer;
|
|
|
+ color: #ff0000;
|
|
|
+ margin: 0 5px;
|
|
|
+ display: inline-block;
|
|
|
+ "
|
|
|
+ @click="handleOpt(row, '删除')"
|
|
|
+ >删除</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <span
|
|
|
+ style="
|
|
|
+ cursor: pointer;
|
|
|
+ color: #ff0000;
|
|
|
+ margin: 0 5px;
|
|
|
+ display: inline-block;
|
|
|
+ "
|
|
|
+ @click="handleOpt(row, '取消发布')"
|
|
|
+ >取消发布</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ v-if="row.EmailState == 1"
|
|
|
+ style="
|
|
|
+ cursor: pointer;
|
|
|
+ color: #1dd411;
|
|
|
+ margin: 0 5px;
|
|
|
+ display: inline-block;
|
|
|
+ "
|
|
|
+ @click="handleOpt(row, '群发日志')"
|
|
|
+ >群发日志 <span class="warn-tag" v-if="row.EmailHasFail"></span
|
|
|
+ ></span>
|
|
|
+ <span
|
|
|
+ v-if="row.EmailState === 0 && row.EmailAuth"
|
|
|
+ style="
|
|
|
+ cursor: pointer;
|
|
|
+ color: #409eff;
|
|
|
+ margin: 0 5px;
|
|
|
+ display: inline-block;
|
|
|
+ "
|
|
|
+ @click="handleOpt(row, '群发邮件')"
|
|
|
+ >群发邮件</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-table
|
|
|
+ :data="pageState.imgList"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ v-if="pageState.navType == 2"
|
|
|
+ >
|
|
|
+ <el-table-column prop="CoverUrl" label="封面图" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-image
|
|
|
+ style="width: 100px; height: 100px"
|
|
|
+ :src="row.CoverUrl"
|
|
|
+ :preview-src-list="[row.CoverUrl]"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="CoverName" label="封面名称" align="center" />
|
|
|
+ <el-table-column prop="ModifyTime" label="更新时间" align="center" />
|
|
|
+ <el-table-column prop="opt" label="操作" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span
|
|
|
+ style="
|
|
|
+ cursor: pointer;
|
|
|
+ color: #409eff;
|
|
|
+ margin: 0 5px;
|
|
|
+ display: inline-block;
|
|
|
+ "
|
|
|
+ @click="handleShowImgPop(row)"
|
|
|
+ >编辑</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ style="
|
|
|
+ cursor: pointer;
|
|
|
+ color: #ff0000;
|
|
|
+ margin: 0 5px;
|
|
|
+ display: inline-block;
|
|
|
+ "
|
|
|
+ @click="handleDelVideoCoverImg(row)"
|
|
|
+ >删除</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <!-- 点击量详情 -->
|
|
|
+ <el-dialog
|
|
|
+ v-model="pageState.showClick"
|
|
|
+ :modal-append-to-body="false"
|
|
|
+ draggable
|
|
|
+ width="65vw"
|
|
|
+ title="点击量详情"
|
|
|
+ >
|
|
|
+ <div style="margin-bottom: 118px">
|
|
|
+ <!-- <div style="margin-bottom:10px">{{logVideoName}}</div> -->
|
|
|
+ <el-table
|
|
|
+ :data="pageState.logList"
|
|
|
+ style="width: 100%; margin: 20px 0 30px"
|
|
|
+ ref="clickNumberRef"
|
|
|
+ border
|
|
|
+ @sort-change="detailSortChange"
|
|
|
+ >
|
|
|
+ <el-table-column prop="Name" label="客户姓名" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ scope.row.Name || "--" }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="Email" label="邮箱地址" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="RecentClickTime"
|
|
|
+ label="最近点击时间"
|
|
|
+ align="center"
|
|
|
+ min-width="140"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="ClickNum"
|
|
|
+ label="点击量"
|
|
|
+ align="center"
|
|
|
+ min-width="140"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div>
|
|
|
+ <el-pagination
|
|
|
+ layout="total,prev,pager,next"
|
|
|
+ background
|
|
|
+ :current-page="pageState.logPage"
|
|
|
+ @current-change="handleLogPageChange"
|
|
|
+ :page-size="pageState.logPageSize"
|
|
|
+ :total="pageState.logTotal"
|
|
|
+ style="float: right; margin-top: 20px"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 上传视频封面弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ v-model="pageState.showImgPop"
|
|
|
+ :modal-append-to-body="false"
|
|
|
+ draggable
|
|
|
+ width="50vw"
|
|
|
+ >
|
|
|
+ <template #header>
|
|
|
+ <div>{{ pageState.imgPopData.type }}</div>
|
|
|
+ </template>
|
|
|
+ <div class="pop-wrap">
|
|
|
+ <el-form
|
|
|
+ ref="imgform"
|
|
|
+ :model="pageState.imgPopData"
|
|
|
+ label-width="100px"
|
|
|
+ :rules="pageState.imgrules"
|
|
|
+ >
|
|
|
+ <el-form-item label="封面名称" prop="name">
|
|
|
+ <el-input
|
|
|
+ v-model="pageState.imgPopData.name"
|
|
|
+ placeholder="请填写封面名称"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="封面图"
|
|
|
+ prop="imgUrl"
|
|
|
+ :disabled="pageState.imgPopData.coverId != 0"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ :disabled="pageState.imgPopData.coverId != 0"
|
|
|
+ readonly
|
|
|
+ v-model="pageState.imgPopData.imgUrl"
|
|
|
+ placeholder="请上传视频封面"
|
|
|
+ ></el-input>
|
|
|
+ <el-upload
|
|
|
+ style="display: inline-block"
|
|
|
+ action=""
|
|
|
+ accept="image/*"
|
|
|
+ :http-request="handleUploadImg"
|
|
|
+ :show-file-list="false"
|
|
|
+ :disabled="pageState.imgPopData.coverId != 0"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ :disabled="pageState.imgPopData.coverId != 0"
|
|
|
+ >选择封面</el-button
|
|
|
+ >
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <div style="text-align: center; margin: 50px 0">
|
|
|
+ <el-button @click="pageState.showImgPop = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="handleSaveImg">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 预览视频弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ v-model="pageState.previewPop"
|
|
|
+ :modal-append-to-body="false"
|
|
|
+ draggable
|
|
|
+ width="60vw"
|
|
|
+ :title="pageState.previewPopTitle"
|
|
|
+ @close="endingPreview"
|
|
|
+ >
|
|
|
+ <video
|
|
|
+ style="width: 100%; height: 100%; max-height: 70vh; outline: none"
|
|
|
+ controls
|
|
|
+ :src="pageState.previewVideoUrl"
|
|
|
+ autoplay
|
|
|
+ ref="previewVideo"
|
|
|
+ >
|
|
|
+ 您的浏览器暂不支持,请更换浏览器
|
|
|
+ </video>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 群发邮件弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ draggable
|
|
|
+ :append-to-body="true"
|
|
|
+ v-model="pageState.popEmailData.show"
|
|
|
+ width="900px"
|
|
|
+ title="群发邮件"
|
|
|
+ >
|
|
|
+ <div class="send-email-wrap">
|
|
|
+ <el-form ref="form" :model="pageState.popEmailData" label-width="100px">
|
|
|
+ <el-form-item label="邮件主题：">
|
|
|
+ <div style="flex: 1">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入邮件主题"
|
|
|
+ v-model="pageState.popEmailData.theme"
|
|
|
+ type="textarea"
|
|
|
+ maxlength="100"
|
|
|
+ show-word-limit
|
|
|
+ :autosize="{ minRows: 3, maxRows: 5 }"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="收件人：">
|
|
|
+ <div class="addressee-box" style="flex: 1">
|
|
|
+ <div class="addressee-cancel-box">
|
|
|
+ <!-- <el-radio v-model="popEmailData.radio" label="1">默认全部</el-radio> -->
|
|
|
+ <el-cascader
|
|
|
+ v-if="pageState.popEmailData.show"
|
|
|
+ v-model="pageState.popEmailData.varietyVal"
|
|
|
+ :options="pageState.popEmailData.varietyOpt"
|
|
|
+ collapse-tags
|
|
|
+ clearable
|
|
|
+ :props="{
|
|
|
+ multiple: true,
|
|
|
+ value: 'EnPermissionId',
|
|
|
+ label: 'EnPermissionName',
|
|
|
+ children: 'Child',
|
|
|
+ }"
|
|
|
+ placeholder="请选择品种权限"
|
|
|
+ style="margin-bottom: 10px"
|
|
|
+ />
|
|
|
+ <div class="user-box-hint">取消发送客户信息：</div>
|
|
|
+ <el-select
|
|
|
+ v-model="pageState.popEmailData.customValue"
|
|
|
+ multiple
|
|
|
+ filterable
|
|
|
+ collapse-tags
|
|
|
+ placeholder="请选择客户"
|
|
|
+ value-key="CompanyId"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in pageState.popEmailData.customOptions"
|
|
|
+ :key="item.CompanyId"
|
|
|
+ :label="item.CompanyName"
|
|
|
+ :value="item"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <div class="user-box">
|
|
|
+ <div style="margin-top: 10px" class="box">
|
|
|
+ <!-- <el-tooltip
|
|
|
+ effect="dark"
|
|
|
+ :content="item.CompanyName"
|
|
|
+ placement="top"
|
|
|
+ v-for="(item,index) in popEmailData.customValue"
|
|
|
+ :key="item.CompanyId"
|
|
|
+ > -->
|
|
|
+ <el-tag
|
|
|
+ closable
|
|
|
+ v-for="(item, index) in pageState.popEmailData
|
|
|
+ .customValue"
|
|
|
+ :key="item.CompanyId"
|
|
|
+ style="margin: 0 10px 10px 0"
|
|
|
+ @close="handleDelSelectCompany(item, index)"
|
|
|
+ >
|
|
|
+ {{ item.CompanyName }}
|
|
|
+ </el-tag>
|
|
|
+ <!-- </el-tooltip> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="addressee-append-box">
|
|
|
+ <el-checkbox
|
|
|
+ v-model="pageState.popEmailData.checkUser"
|
|
|
+ style="margin: 0 0 10px 20px; width: 100px"
|
|
|
+ >指定人员</el-checkbox
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="user-box-hint"
|
|
|
+ v-show="pageState.popEmailData.checkUser"
|
|
|
+ >
|
|
|
+ 指定发送人员信息：
|
|
|
+ </div>
|
|
|
+ <el-select
|
|
|
+ v-show="pageState.popEmailData.checkUser"
|
|
|
+ v-model="pageState.popEmailData.value"
|
|
|
+ multiple
|
|
|
+ filterable
|
|
|
+ collapse-tags
|
|
|
+ placeholder="请选择人员"
|
|
|
+ value-key="Id"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in pageState.popEmailData.options"
|
|
|
+ :key="item.Id"
|
|
|
+ :label="item.Name"
|
|
|
+ :value="item"
|
|
|
+ :disabled="item.Enabled === 0"
|
|
|
+ >
|
|
|
+ <span>{{ item.Name }} <{{ item.Email }}></span>
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <div class="user-box" v-show="pageState.popEmailData.checkUser">
|
|
|
+ <div style="margin-top: 10px" class="box">
|
|
|
+ <el-tooltip
|
|
|
+ effect="dark"
|
|
|
+ :content="item.Email"
|
|
|
+ placement="top"
|
|
|
+ v-for="(item, index) in pageState.popEmailData.value"
|
|
|
+ :key="item.Id"
|
|
|
+ >
|
|
|
+ <el-tag
|
|
|
+ closable
|
|
|
+ style="margin: 0 10px 10px 0"
|
|
|
+ @close="handleDelSelectCustom(item, index)"
|
|
|
+ >
|
|
|
+ {{ item.Name }}
|
|
|
+ </el-tag>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <div
|
|
|
+ style="text-align: center; margin-bottom: 30px; margin-top: 40px"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ style="margin-right: 10px"
|
|
|
+ @click="pageState.popEmailData.show = false"
|
|
|
+ >取消</el-button
|
|
|
+ >
|
|
|
+ <el-button type="primary" @click="handleConfirmSendEmail"
|
|
|
+ >确定</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.video-manage-page {
|
|
|
+ .list-wrap {
|
|
|
+ .el-image:hover {
|
|
|
+ border: 1px solid #409eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.send-email-wrap {
|
|
|
+ .el-input {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.video-manage-page {
|
|
|
+ .top-wrap {
|
|
|
+ height: 80px;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 30px;
|
|
|
+ }
|
|
|
+ .list-wrap {
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-top: 30px;
|
|
|
+ padding: 30px;
|
|
|
+ padding-bottom: 80px;
|
|
|
+ .nav-box {
|
|
|
+ margin-bottom: 30px;
|
|
|
+ span {
|
|
|
+ padding-bottom: 5px;
|
|
|
+ font-size: 16px;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ color: #409eff;
|
|
|
+ border-bottom: 2px solid #409eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .warn-tag {
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #f00;
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ right: -10px;
|
|
|
+ top: 30%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // .pop-wrap{
|
|
|
+
|
|
|
+ // }
|
|
|
+ .choose-img-wrap {
|
|
|
+ padding-bottom: 80px;
|
|
|
+ .list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ flex-shrink: 0;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border: 1px solid rgb(199, 198, 198);
|
|
|
+ padding: 5px;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pre-img-box {
|
|
|
+ position: relative;
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ .del {
|
|
|
+ display: none;
|
|
|
+ color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 24px;
|
|
|
+ background-color: rgba($color: #000000, $alpha: 0.8);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ .del {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.send-email-wrap {
|
|
|
+ .addressee-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ .addressee-cancel-box,
|
|
|
+ .addressee-append-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-start;
|
|
|
+ width: calc(50% - 12px);
|
|
|
+ }
|
|
|
+ .user-box-hint {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .user-box {
|
|
|
+ border: 1px dashed #dcdfe6;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 20px;
|
|
|
+ margin-top: 20px;
|
|
|
+ .box {
|
|
|
+ max-height: 200px;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
