<template>
|
<div class="watch-history-simple">
|
<!-- 统计卡片 -->
|
<Row :gutter="16" class="stats-row">
|
<Col :span="12">
|
<Card dis-hover>
|
<p slot="title">总观看时长</p>
|
<h1 style="color: #2d8cf0;">{{ stats.totalDuration || '0'}} 小时</h1>
|
</Card>
|
</Col>
|
<Col :span="12">
|
<Card dis-hover>
|
<p slot="title">平均完成率</p>
|
<h1 style="color: #19be6b;">{{ stats.avgProgress || 0}}%</h1>
|
</Card>
|
</Col>
|
</Row>
|
|
<!-- 数据表格 -->
|
<Card dis-hover class="table-card">
|
<Table
|
:columns="columns"
|
:data="tableData"
|
:loading="loading"
|
@on-row-click="handleRowClick"
|
style="height: 600px"
|
>
|
<template slot-scope="{ row }" slot="video">
|
<div class="video-cell">
|
<img
|
:src="row.coverCOSUrl"
|
class="video-cover"
|
@click.stop="previewImage(row.coverCOSUrl)"
|
alt="">
|
<span class="video-title">{{ row.title }}</span>
|
</div>
|
</template>
|
|
<template slot-scope="{ row }" slot="progress">
|
<Tooltip :content="getPercent(row)" style="width: 100%">
|
<Progress :percent="getPercent(row)"
|
:status="getPercent(row) >= 100 ? 'success' : 'active'"
|
/>
|
</Tooltip>
|
</template>
|
|
<!-- <template slot-scope="{ row }" slot="action" >-->
|
<!-- <Button-->
|
<!-- type="primary"-->
|
<!-- size="small"-->
|
<!-- @click.stop="showDetail(row)"-->
|
<!-- >-->
|
<!-- 详情-->
|
<!-- </Button>-->
|
<!-- </template>-->
|
</Table>
|
|
<!-- 分页 -->
|
<Page
|
:current="searchForm.pageNumber"
|
:total="total"
|
:page-size="searchForm.pageSize"
|
@on-change="handlePageChange"
|
show-total
|
class="pagination"
|
/>
|
</Card>
|
|
<!-- 图片预览 -->
|
<Modal
|
v-model="previewVisible"
|
title="视频封面"
|
footer-hide
|
width="60%"
|
>
|
<img :src="previewImageUrl" class="preview-image" alt="">
|
</Modal>
|
</div>
|
</template>
|
|
<script>
|
import { getFootVideoPage } from '@/api/customer.js'
|
import { Progress, Tooltip } from 'view-design';
|
export default {
|
props: ['memberId'],
|
watch: {
|
memberId(newVal) {
|
if (newVal) {
|
this.loadData();
|
}
|
}
|
},
|
components: {
|
Progress,
|
Tooltip,
|
},
|
data() {
|
|
return {
|
stats: {
|
totalDuration: '',
|
avgProgress: 0
|
},
|
loading: false,
|
tableData: [],
|
columns: [
|
{
|
title: '视频内容',
|
slot: 'video',
|
minWidth: 300
|
},
|
{
|
title: '观看时间',
|
key: 'viewDuration',
|
width: 180,
|
render: (h, { row }) => {
|
return h('span', row.viewDuration /1000 +"秒")
|
}
|
},
|
{
|
title: '观看进度',
|
slot: 'progress',
|
width: 150
|
},
|
// {
|
// title: '操作',
|
// slot: 'action',
|
// minWidth: 120, // 改为最小宽度
|
// align: 'center'
|
// }
|
],
|
searchForm:{
|
memberId: '', //id
|
pageNumber: 1, // 当前页数
|
pageSize: 10, // 页面大小
|
},
|
total:0,
|
previewVisible: false,
|
previewImageUrl: '',
|
}
|
},
|
methods: {
|
async loadData() {
|
this.loading = true
|
this.searchForm.memberId = this.memberId;
|
getFootVideoPage(this.searchForm).then(res =>{
|
this.loading = false;
|
if (res.code === 200){
|
this.tableData = res.data.data;
|
this.total = res.data.total;
|
this.stats.avgProgress = res.data.avgProgress;
|
this.stats.totalDuration = (res.data.totalDuration / 1000/ 60/60).toFixed(2);
|
}else {
|
this.$Message.error(res.msg)
|
}
|
})
|
|
},
|
handlePageChange(page) {
|
this.searchForm.pageNumber = page
|
this.loadData()
|
},
|
handleRowClick(row) {
|
console.log('Row clicked:', row)
|
},
|
showDetail(row) {
|
this.$Modal.info({
|
title: '观看详情',
|
content: `
|
<p><strong>视频ID：</strong>${row.id}</p>
|
<p><strong>完整进度：</strong>${row.progress}%</p>
|
<p><strong>设备信息：</strong>${row.device}</p>
|
`,
|
width: 500
|
})
|
},
|
previewImage(url) {
|
this.previewImageUrl = url
|
this.previewVisible = true
|
},
|
getPercent(row) {
|
return Number((row.playProgress * 100).toFixed(0));
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
.watch-history-simple {
|
padding: 16px;
|
}
|
|
.stats-row {
|
margin-bottom: 16px;
|
}
|
|
.table-card {
|
margin-top: 16px;
|
}
|
|
.video-cell {
|
display: flex;
|
align-items: center;
|
}
|
|
.video-cover {
|
width: 80px;
|
height: 45px;
|
object-fit: cover;
|
margin-right: 10px;
|
cursor: pointer;
|
border-radius: 4px;
|
}
|
|
.video-title {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.pagination {
|
margin-top: 16px;
|
text-align: right;
|
}
|
|
.preview-image {
|
width: 100%;
|
border-radius: 4px;
|
}
|
</style>
|
