|
|
@@ -1,71 +1,84 @@
|
|
|
<template>
|
|
|
- <el-container>
|
|
|
- <el-header height="120">
|
|
|
- <!--搜索结果面包屑-->
|
|
|
- <el-breadcrumb
|
|
|
- v-if="this.$route.path.indexOf('history') > -1"
|
|
|
- class="bread"
|
|
|
- separator-class="el-icon-arrow-right"
|
|
|
- >
|
|
|
- <el-breadcrumb-item :to="{ path: '' }"><a href="/">返回首页</a></el-breadcrumb-item>
|
|
|
- <el-breadcrumb-item>播放历史记录：共<span class="reslut">({{ totalSize }}}</span>条</el-breadcrumb-item>
|
|
|
- </el-breadcrumb>
|
|
|
- <el-button style="margin-top: 5px" type="text" icon="el-icon-delete" @click="removeAll">清空历史记录</el-button>
|
|
|
- </el-header>
|
|
|
- <el-main>
|
|
|
- <div id="history-list">
|
|
|
- <el-row v-if="visitList.length !== 0" class="movie-list">
|
|
|
- <el-col :md="8">
|
|
|
- <div style="height: 60vh;">
|
|
|
- <el-scrollbar ref="myScrollbar" style="width: 100%; height: 100%;">
|
|
|
- <div style="display: flex; justify-content: center;">
|
|
|
- <el-timeline
|
|
|
- :reverse="reverse"
|
|
|
- style="overflow: auto"
|
|
|
- >
|
|
|
- <el-timeline-item
|
|
|
- v-for="(record, index) in visitList"
|
|
|
- :key="index"
|
|
|
- :timestamp="record.createAt"
|
|
|
- placement="top"
|
|
|
- style="overflow: auto"
|
|
|
- >
|
|
|
- <history-video-card :video="record" />
|
|
|
- <el-button
|
|
|
- type="danger"
|
|
|
- icon="el-icon-delete"
|
|
|
- circle
|
|
|
- size="small"
|
|
|
- title="移除该历史记录"
|
|
|
- @click.stop="removeHistory(record.videoId)"
|
|
|
- />
|
|
|
- </el-timeline-item>
|
|
|
- </el-timeline>
|
|
|
- </div>
|
|
|
- <div style="display: flex; justify-content: center;" v-if="hasMore">
|
|
|
- <el-button link type="plain" icon="el-icon-bottom" @click="loadMore">
|
|
|
- 加载更多
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- <div style="display: flex; justify-content: center;" v-else>
|
|
|
- <span>已经到底啦~</span>
|
|
|
- </div>
|
|
|
- </el-scrollbar>
|
|
|
+ <div class="history-page-container">
|
|
|
+ <header class="history-header">
|
|
|
+ <div class="header-content">
|
|
|
+ <div class="title-section">
|
|
|
+ <h2 class="page-title">观看历史</h2>
|
|
|
+ <span class="history-count">共 {{ totalSize }} 条记录</span>
|
|
|
+ </div>
|
|
|
+ <div class="action-section">
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ plain
|
|
|
+ size="mini"
|
|
|
+ class="clear-btn"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="removeAll"
|
|
|
+ >
|
|
|
+ <span class="hidden-xs-only">清空记录</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <main class="history-main">
|
|
|
+ <div v-if="visitList.length !== 0" class="timeline-wrapper">
|
|
|
+ <el-timeline class="mobile-timeline">
|
|
|
+ <el-timeline-item
|
|
|
+ v-for="(record, index) in visitList"
|
|
|
+ :key="index"
|
|
|
+ :timestamp="record.createAt"
|
|
|
+ placement="top"
|
|
|
+ color="#409EFF"
|
|
|
+ >
|
|
|
+ <div class="history-item-card">
|
|
|
+ <div class="card-content">
|
|
|
+ <history-video-card :video="record" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card-actions">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-close"
|
|
|
+ class="delete-btn"
|
|
|
+ @click.stop="removeHistory(record.videoId)"
|
|
|
+ >
|
|
|
+ <span class="hidden-sm-and-up">移除</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row v-else class="not-result">
|
|
|
- <el-col :span="12" :offset="6">
|
|
|
- <img src="@/assets/img/not-history.png">
|
|
|
- <div>你还没有看过任何东西呢</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </el-timeline-item>
|
|
|
+ </el-timeline>
|
|
|
+
|
|
|
+ <div class="load-more-section">
|
|
|
+ <el-button
|
|
|
+ v-if="hasMore"
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ round
|
|
|
+ size="small"
|
|
|
+ :loading="loading"
|
|
|
+ @click="loadMore"
|
|
|
+ >
|
|
|
+ 加载更多
|
|
|
+ </el-button>
|
|
|
+ <p v-else class="no-more-tips">已经到底了 ~</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </el-main>
|
|
|
- </el-container>
|
|
|
+
|
|
|
+ <div v-else class="empty-wrapper">
|
|
|
+ <el-empty description="没有历史记录" :image-size="120">
|
|
|
+ <el-button type="primary" size="small" @click="$router.push('/')">去逛逛</el-button>
|
|
|
+ </el-empty>
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+
|
|
|
+ <el-backtop target=".admin-main" :bottom="20" :right="20"></el-backtop>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+// ... 保持原有 script 逻辑不变 ...
|
|
|
import HistoryVideoCard from '@/components/card/HistoryVideoCard'
|
|
|
import { getVisitRecord } from '@/api/visit'
|
|
|
|
|
|
@@ -74,139 +87,197 @@ export default {
|
|
|
components: { HistoryVideoCard },
|
|
|
data() {
|
|
|
return {
|
|
|
- reverse: false,
|
|
|
totalSize: 0,
|
|
|
nextId: 0,
|
|
|
- nextId1: 0,
|
|
|
visitList: [],
|
|
|
- showEmpty: false,
|
|
|
- hasMore: true
|
|
|
+ hasMore: true,
|
|
|
+ loading: false
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
document.title = '我的历史记录'
|
|
|
- this.getVisitRecordWrapper(this.nextId)
|
|
|
+ this.fetchData(0)
|
|
|
},
|
|
|
methods: {
|
|
|
- loadMore() {
|
|
|
- if (this.nextId1 !== this.nextId) {
|
|
|
- this.nextId1 = this.nextId
|
|
|
- this.getVisitRecordWrapper(this.nextId)
|
|
|
- }
|
|
|
- },
|
|
|
- getVisitRecordWrapper(nextId) {
|
|
|
- getVisitRecord(nextId).then(res => {
|
|
|
- const resData = res.data
|
|
|
+ fetchData(id) {
|
|
|
+ this.loading = true
|
|
|
+ getVisitRecord(id).then(res => {
|
|
|
if (res.code === 0) {
|
|
|
- if (resData.list.length === 0) {
|
|
|
+ const { list, totalSize, nextId } = res.data
|
|
|
+ if (!list || list.length === 0) {
|
|
|
this.hasMore = false
|
|
|
return
|
|
|
}
|
|
|
-
|
|
|
- this.totalSize = resData.totalSize
|
|
|
- for (const item of resData.list) {
|
|
|
- this.visitList.push(item)
|
|
|
- }
|
|
|
-
|
|
|
- this.nextId = resData.nextId
|
|
|
- } else {
|
|
|
- this.$message.error(resData.msg)
|
|
|
+ this.visitList = [...this.visitList, ...list]
|
|
|
+ this.totalSize = totalSize
|
|
|
+ this.nextId = nextId
|
|
|
}
|
|
|
}).finally(() => {
|
|
|
+ this.loading = false
|
|
|
})
|
|
|
},
|
|
|
- // 清除某条历史记录
|
|
|
+ loadMore() {
|
|
|
+ if (!this.loading && this.hasMore) {
|
|
|
+ this.fetchData(this.nextId)
|
|
|
+ }
|
|
|
+ },
|
|
|
removeHistory(videoId) {
|
|
|
- this.$confirm('确认移除吗？', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
+ this.$confirm('确认移除？', '提示', {
|
|
|
+ type: 'warning',
|
|
|
+ confirmButtonClass: 'el-button--danger'
|
|
|
}).then(() => {
|
|
|
- console.log('删除 ' + videoId + ' 这条记录')
|
|
|
- // 确认
|
|
|
- /* deleteHistory(this.uid, video.vid).then(res => {
|
|
|
- // 将要删除的当前video对象移除数组
|
|
|
- // 获取下标
|
|
|
- const index = this.videos.indexOf(video)
|
|
|
- if (index > -1) {
|
|
|
- this.videos.splice(index, 1)
|
|
|
- }
|
|
|
- })*/
|
|
|
-
|
|
|
- this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '移除成功!'
|
|
|
- })
|
|
|
- }).catch(() => {
|
|
|
- this.$message({
|
|
|
- type: 'info',
|
|
|
- message: '已取消'
|
|
|
- })
|
|
|
- })
|
|
|
+ this.$message.success('已移除')
|
|
|
+ }).catch(() => {})
|
|
|
},
|
|
|
- // 清除所有历史记录
|
|
|
removeAll() {
|
|
|
- // 移除所有收藏
|
|
|
- this.$confirm('确认移除所有播放历史记录吗？', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
+ this.$confirm('确定清空？', '警告', {
|
|
|
+ type: 'error'
|
|
|
}).then(() => {
|
|
|
- console.log('删除全部记录')
|
|
|
-
|
|
|
- /* const arr = []
|
|
|
- for (const i of this.videos) {
|
|
|
- arr.push(i.vid)
|
|
|
- }*/
|
|
|
- // const vidStr = arr.join(',')
|
|
|
- // 确认
|
|
|
- /* deleteHistory(this.uid, vidStr).then(res => {
|
|
|
- this.videos = []
|
|
|
- })*/
|
|
|
-
|
|
|
- this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '移除成功!'
|
|
|
- })
|
|
|
- }).catch(() => {
|
|
|
- this.$message({
|
|
|
- type: 'info',
|
|
|
- message: '已取消'
|
|
|
- })
|
|
|
- })
|
|
|
+ this.visitList = []
|
|
|
+ this.totalSize = 0
|
|
|
+ this.$message.success('已清空')
|
|
|
+ }).catch(() => {})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-#history-list {
|
|
|
- padding-left: 6%;
|
|
|
- padding-right: 6%;
|
|
|
- padding-top: 30px;
|
|
|
+.history-page-container {
|
|
|
+ min-height: 100%;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+/* 顶部固定 Header */
|
|
|
+.history-header {
|
|
|
+ background: #fff;
|
|
|
+ padding: 16px 24px;
|
|
|
+ position: sticky;
|
|
|
+ top: -24px;
|
|
|
+ margin: -24px -24px 0 -24px;
|
|
|
+ z-index: 100;
|
|
|
+ border-bottom: 1px solid #e6e6e6;
|
|
|
}
|
|
|
|
|
|
-.bread {
|
|
|
- font-size: 15px;
|
|
|
+.header-content {
|
|
|
+ max-width: 1100px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
-.movie-list {
|
|
|
- padding-top: 15px;
|
|
|
+.page-title {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
}
|
|
|
|
|
|
-.reslut {
|
|
|
- color: red;
|
|
|
+.history-count {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #9499a0;
|
|
|
}
|
|
|
|
|
|
-.not-result {
|
|
|
- padding-top: 100px;
|
|
|
- padding-bottom: 100px;
|
|
|
+/* 列表区 */
|
|
|
+.history-main {
|
|
|
+ max-width: 1100px;
|
|
|
+ margin: 20px auto 0;
|
|
|
+}
|
|
|
+
|
|
|
+.timeline-wrapper {
|
|
|
+ background: #fff;
|
|
|
+ padding: 30px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.history-item-card {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8px;
|
|
|
+ border-radius: 8px;
|
|
|
+ transition: all 0.2s;
|
|
|
+}
|
|
|
+
|
|
|
+.history-item-card:hover {
|
|
|
+ background-color: #f6f7f8;
|
|
|
+}
|
|
|
+
|
|
|
+.card-content {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.card-actions {
|
|
|
+ margin-left: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 移动端适配核心代码 */
|
|
|
+@media screen and (max-width: 768px) {
|
|
|
+ /* 调整 Header 间距 */
|
|
|
+ .history-header {
|
|
|
+ padding: 12px 16px;
|
|
|
+ top: -24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .history-main {
|
|
|
+ margin: 0; /* 移动端取消上边距 */
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 核心：减少时间轴左边距，给卡片腾位置 */
|
|
|
+ ::v-deep .el-timeline {
|
|
|
+ padding-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeline-wrapper {
|
|
|
+ padding: 15px 10px;
|
|
|
+ border-radius: 0; /* 撑满屏幕 */
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 调整卡片布局为垂直，删除按钮放在底部或调整边距 */
|
|
|
+ .history-item-card {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-end; /* 删除按钮靠右 */
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-content {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-actions {
|
|
|
+ margin: 5px 0 0 0;
|
|
|
+ opacity: 1; /* 移动端不依赖 hover，直接显示 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .delete-btn {
|
|
|
+ padding: 5px;
|
|
|
+ background: #fdf2f2;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #f56c6c;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 深度样式 */
|
|
|
+::v-deep .el-timeline-item__timestamp {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1f1f1f;
|
|
|
+}
|
|
|
+
|
|
|
+.load-more-section {
|
|
|
text-align: center;
|
|
|
+ padding: 20px 0;
|
|
|
}
|
|
|
|
|
|
-.remove-slot {
|
|
|
- position: absolute;
|
|
|
- right: 5px;
|
|
|
- bottom: 2px;
|
|
|
+.no-more-tips {
|
|
|
+ color: #bdc1c6;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+
|
|
|
+/* Element 自带响应式类名辅助 */
|
|
|
+.hidden-xs-only {
|
|
|
+ @media (max-width: 767px) { display: none !important; }
|
|
|
+}
|
|
|
+.hidden-sm-and-up {
|
|
|
+ @media (min-width: 768px) { display: none !important; }
|
|
|
}
|
|
|
</style>
|
