我的页面

This commit is contained in:
haomingming
2025-09-01 16:20:16 +08:00
parent c9dcab1e36
commit 1f4c0834fa
21 changed files with 3904 additions and 327 deletions
+381
View File
@@ -0,0 +1,381 @@
<template>
<view class="english-journal-page">
<!-- 顶部导航栏 -->
<uni-nav-bar
left-icon="left"
:title="isEditMode ? '选择期刊' : '英文期刊'"
@clickLeft="goBack"
fixed
color="#8B2316"
height="140rpx"
:border="false"
backgroundColor="#eeeeee"
>
<template v-slot:right>
<text class="edit-btn" @click="onEdit">{{ isEditMode ? '取消' : '编辑' }}</text>
</template>
</uni-nav-bar>
<!-- 期刊列表 -->
<scroll-view
scroll-y
class="journal-list"
refresher-enabled
@refresherrefresh="onRefresh"
:refresher-triggered="refreshing"
@scrolltolower="onLoadMore"
:lower-threshold="100"
>
<view class="journal-item" v-for="(item, index) in journalList" :key="item.id" @click="onItemClick(item)">
<!-- 选择框 -->
<view v-if="isEditMode" class="checkbox-wrapper" @click.stop="toggleSelect(item)">
<view class="checkbox" :class="{ 'checked': selectedItems.includes(item.id) }">
<text v-if="selectedItems.includes(item.id)" class="check-icon">✓</text>
</view>
</view>
<view class="content">
<view class="title">{{ item.title }}</view>
<view class="subtitle">{{ item.subtitle }}</view>
</view>
</view>
<!-- 加载更多提示 -->
<view v-if="loading" class="loading-more">
<text>加载中...</text>
</view>
<!-- 空数据状态 -->
<view v-if="!loading && journalList.length === 0" class="empty-state">
<text>暂无英文期刊</text>
</view>
<!-- 没有更多数据提示 -->
<view v-if="noMore && journalList.length > 0" class="no-more">
<text>没有更多数据了</text>
</view>
</scroll-view>
<!-- 底部操作栏 -->
<view v-if="isEditMode" class="bottom-action-bar">
<view class="action-left">
<text class="select-all-btn" @click="toggleSelectAll">全选</text>
</view>
<view class="action-right">
<text class="delete-btn" @click="deleteSelected" :class="{ 'disabled': selectedItems.length === 0 }">删除</text>
</view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import api from '@/api/api.js';
const refreshing = ref(false);
const loading = ref(false);
const noMore = ref(false);
const page = ref(1);
const pageSize = ref(10);
const isEditMode = ref(false);
const selectedItems = ref([]);
// 期刊数据列表
const journalList = ref([]);
const goBack = () => {
uni.navigateBack();
};
const onEdit = () => {
if (isEditMode.value) {
// 退出编辑模式
isEditMode.value = false;
selectedItems.value = [];
} else {
// 进入编辑模式
isEditMode.value = true;
}
};
const onItemClick = (item) => {
// 编辑模式下不跳转
if (isEditMode.value) {
return;
}
// 跳转到期刊详情页面
uni.navigateTo({
url: `/pages_app/qikan?id=${item.id}&title=${encodeURIComponent(item.title)}&subtitle=${encodeURIComponent(item.subtitle)}&path=${encodeURIComponent(item.path)}&libraryUuid=${encodeURIComponent(item.libraryUuid)}`
});
};
// 切换选择状态
const toggleSelect = (item) => {
const index = selectedItems.value.indexOf(item.id);
if (index > -1) {
selectedItems.value.splice(index, 1);
} else {
selectedItems.value.push(item.id);
}
};
// 全选/取消全选
const toggleSelectAll = () => {
if (selectedItems.value.length === journalList.value.length) {
// 取消全选
selectedItems.value = [];
} else {
// 全选
selectedItems.value = journalList.value.map(item => item.id);
}
};
// 删除选中的期刊
const deleteSelected = () => {
if (selectedItems.value.length === 0) {
uni.showToast({ title: '请选择要删除的期刊', icon: 'none' });
return;
}
uni.showModal({
title: '确认删除',
content: `确定要删除选中的 ${selectedItems.value.length} 个期刊吗?`,
success: (res) => {
if (res.confirm) {
// 调用删除API
api.deleteCollect({
uuid: selectedItems.value.join(',')
}).then(res => {
if (res.code === 200) {
// 从本地列表中移除
journalList.value = journalList.value.filter(item => !selectedItems.value.includes(item.id));
selectedItems.value = [];
isEditMode.value = false;
uni.showToast({
title: '删除成功',
icon: 'success'
});
} else {
uni.showToast({
title: res.message || '删除失败',
icon: 'none'
});
}
}).catch(err => {
console.error('删除失败:', err);
uni.showToast({
title: '删除失败,请重试',
icon: 'none'
});
});
}
}
});
};
// 获取期刊列表
const getJournalList = () => {
api.getCollectList({
page: page.value,
pageSize: pageSize.value,
type: 3
}).then(res => {
console.log(res);
if (res.code === 200 && res.data) {
const { list, totalRow, totalPage, pageNumber } = res.data;
// 如果是第一页,清空列表
if (page.value === 1) {
journalList.value = [];
}
// 处理期刊数据
const processedList = list.map(item => ({
id: item.uuid,
title: item.title || '未知标题',
subtitle: item.secondTitle || '未知副标题',
libraryUuid: item.libraryUuid,
path: item.path,
createDate: item.createDate,
isCollect: item.isCollect,
status: item.status
}));
// 添加到列表
journalList.value.push(...processedList);
// 更新分页状态
noMore.value = pageNumber >= totalPage;
// 如果是第一页且有数据,显示总数
if (page.value === 1 && totalRow > 0) {
uni.showToast({
title: `共找到 ${totalRow} 条记录`,
icon: 'none',
duration: 2000
});
}
} else {
uni.showToast({
title: res.message || '获取数据失败',
icon: 'none'
});
}
}).catch(err => {
console.error('获取期刊列表失败:', err);
uni.showToast({
title: '网络错误,请重试',
icon: 'none'
});
}).finally(() => {
loading.value = false;
refreshing.value = false;
});
};
const onRefresh = () => {
refreshing.value = true;
page.value = 1;
noMore.value = false;
// 调用API刷新数据
getJournalList();
};
const onLoadMore = () => {
if (loading.value || noMore.value) return;
loading.value = true;
page.value++;
// 调用API加载更多数据
getJournalList();
};
onMounted(() => {
getJournalList();
});
</script>
<style lang="scss" scoped>
.english-journal-page {
min-height: 100vh;
background: #ffffff;
}
.journal-list {
height: calc(100vh - 140rpx);
position: fixed;
top: 140rpx;
bottom: 0;
width: 100%;
padding-bottom: 100rpx; /* 为底部操作栏留出空间 */
}
.edit-btn {
color: #8B2316;
font-size: 28rpx;
padding: 10rpx;
}
.journal-item {
display: flex;
align-items: center;
padding: 30rpx;
background: #ffffff;
border-bottom: 1rpx solid #f0f0f0;
.checkbox-wrapper {
margin-right: 20rpx;
.checkbox {
width: 40rpx;
height: 40rpx;
border: 2rpx solid #ddd;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
&.checked {
background: #8B2316;
border-color: #8B2316;
}
.check-icon {
color: #fff;
font-size: 24rpx;
font-weight: bold;
}
}
}
.content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.title {
font-size: 28rpx;
color: #333333;
line-height: 1.4;
margin-bottom: 8rpx;
}
.subtitle {
font-size: 24rpx;
color: #666666;
}
}
}
.loading-more, .no-more, .empty-state {
text-align: center;
padding: 30rpx;
color: #999999;
font-size: 26rpx;
}
.empty-state {
padding: 100rpx 30rpx;
color: #999999;
}
.bottom-action-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100rpx;
background: #fff;
border-top: 1rpx solid #eee;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30rpx;
z-index: 100;
.action-left {
.select-all-btn {
color: #333;
font-size: 28rpx;
padding: 20rpx;
}
}
.action-right {
.delete-btn {
color: #ff4757;
font-size: 28rpx;
padding: 20rpx;
&.disabled {
color: #ccc;
}
}
}
}
</style>
+214
View File
@@ -0,0 +1,214 @@
<template>
<view class="courseware-page">
<!-- 顶部导航栏 -->
<uni-nav-bar
left-icon="left"
title="课件文档"
@clickLeft="goBack"
fixed
color="#8B2316"
height="140rpx"
:border="false"
backgroundColor="#eeeeee"
>
</uni-nav-bar>
<!-- 文档列表 -->
<scroll-view
scroll-y
class="document-list"
refresher-enabled
@refresherrefresh="onRefresh"
:refresher-triggered="refreshing"
@scrolltolower="onLoadMore"
:lower-threshold="100"
>
<view class="document-item" v-for="(item, index) in documentList" :key="item.id" @click="onItemClick(item)">
<view class="content">
<view class="title">{{ item.title }}</view>
<view class="subtitle">{{ item.subtitle }}</view>
</view>
</view>
<!-- 加载更多提示 -->
<view v-if="loading" class="loading-more">
<text>加载中...</text>
</view>
<!-- 空数据状态 -->
<view v-if="!loading && documentList.length === 0" class="empty-state">
<text>暂无课件文档</text>
</view>
<!-- 没有更多数据提示 -->
<view v-if="noMore && documentList.length > 0" class="no-more">
<text>没有更多数据了</text>
</view>
</scroll-view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import api from '@/api/api.js';
const refreshing = ref(false);
const loading = ref(false);
const noMore = ref(false);
const page = ref(1);
const pageSize = ref(10);
// 文档数据列表
const documentList = ref([]);
const goBack = () => {
uni.navigateBack();
};
const onItemClick = (item) => {
// 跳转到文档详情页面
uni.navigateTo({
url: `/pages_app/myCourseware?id=${item.id}&title=${encodeURIComponent(item.title)}&subtitle=${encodeURIComponent(item.subtitle)}&path=${encodeURIComponent(item.path)}&userUuid=${encodeURIComponent(item.userUuid)}`
});
};
// 获取文档列表
const getDocumentList = () => {
api.getCollectionList({
page: page.value,
type: 6,
title: ""
}).then(res => {
console.log(res);
if (res.code === 200 && res.data) {
const { list, totalRow, totalPage, pageNumber } = res.data;
// 如果是第一页,清空列表
if (page.value === 1) {
documentList.value = [];
}
// 处理文档数据
const processedList = list.map(item => ({
id: item.other_uuid,
title: item.title || '未知标题',
subtitle: item.public_name || '未知作者',
userUuid: item.user_uuid,
path: item.path,
type: item.type,
agreenum: item.agreenum,
readnum: item.readnum,
videoType: item.video_type,
imgpath: item.imgpath
}));
// 添加到列表
documentList.value.push(...processedList);
console.log(documentList.value);
// 更新分页状态
noMore.value = pageNumber >= totalPage;
// 如果是第一页且有数据,显示总数
if (page.value === 1 && totalRow > 0) {
uni.showToast({
title: `共找到 ${totalRow} 条记录`,
icon: 'none',
duration: 2000
});
}
} else {
uni.showToast({
title: res.message || '获取数据失败',
icon: 'none'
});
}
}).catch(err => {
console.error('获取文档列表失败:', err);
uni.showToast({
title: '网络错误,请重试',
icon: 'none'
});
}).finally(() => {
loading.value = false;
refreshing.value = false;
});
};
const onRefresh = () => {
refreshing.value = true;
page.value = 1;
noMore.value = false;
// 调用API刷新数据
getDocumentList();
};
const onLoadMore = () => {
if (loading.value || noMore.value) return;
loading.value = true;
page.value++;
// 调用API加载更多数据
getDocumentList();
};
onMounted(() => {
getDocumentList();
});
</script>
<style lang="scss" scoped>
.courseware-page {
min-height: 100vh;
background: #ffffff;
}
.document-list {
height: calc(100vh - 140rpx);
position: fixed;
top: 140rpx;
bottom: 0;
width: 100%;
}
.document-item {
display: flex;
align-items: center;
padding: 30rpx;
background: #ffffff;
border-bottom: 1rpx solid #f0f0f0;
.content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.title {
font-size: 28rpx;
color: #333333;
line-height: 1.4;
margin-bottom: 8rpx;
}
.subtitle {
font-size: 24rpx;
color: #666666;
}
}
}
.loading-more, .no-more, .empty-state {
text-align: center;
padding: 30rpx;
color: #999999;
font-size: 26rpx;
}
.empty-state {
padding: 100rpx 30rpx;
color: #999999;
}
</style>
+246
View File
@@ -0,0 +1,246 @@
<template>
<view class="video-history-page">
<!-- 顶部导航栏 -->
<uni-nav-bar
left-icon="left"
title="收藏视频"
@clickLeft="goBack"
fixed
color="#8B2316"
height="140rpx"
:border="false"
backgroundColor="#eeeeee"
>
</uni-nav-bar>
<!-- 观看历史列表 -->
<scroll-view
scroll-y
class="history-list"
refresher-enabled
@refresherrefresh="onRefresh"
:refresher-triggered="refreshing"
@scrolltolower="onLoadMore"
:lower-threshold="100"
>
<view class="history-item" v-for="(item, index) in historyList" :key="item.id" @click="onItemClick(item)">
<view class="thumbnail">
<image :src="item.thumbnail" width="200rpx" height="120rpx" mode="aspectFill" class="thumb-img"></image>
</view>
<view class="content">
<view class="title">{{ item.title }}</view>
<view class="author">{{ item.author }}</view>
</view>
</view>
<!-- 加载更多提示 -->
<view v-if="loading" class="loading-more">
<text>加载中...</text>
</view>
<!-- 空数据状态 -->
<view v-if="!loading && historyList.length === 0" class="empty-state">
<text>暂无收藏视频</text>
</view>
<!-- 没有更多数据提示 -->
<view v-if="noMore && historyList.length > 0" class="no-more">
<text>没有更多数据了</text>
</view>
</scroll-view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import api from '@/api/api.js';
import docUrl from "@/utils/docUrl.js";
const refreshing = ref(false);
const loading = ref(false);
const noMore = ref(false);
const page = ref(1);
const pageSize = ref(10);
const historyList = ref([]);
const goBack = () => {
uni.navigateBack();
};
const onItemClick = (item) => {
// 跳转到视频详情页面
uni.navigateTo({
url: `/pages_app/videoDetail/videoDetail?id=${item.id}&title=${encodeURIComponent(item.title)}&author=${encodeURIComponent(item.author)}&videoPath=${encodeURIComponent(item.videoPath)}&userUuid=${encodeURIComponent(item.userUuid)}`
});
};
onMounted(() => {
getVideoHistoryList();
});
const getVideoHistoryList = () => {
api.getCollectionList({
page: page.value,
type: 2,
title: ""
}).then(res => {
console.log(res);
if (res.code === 200 && res.data) {
const { list, totalRow, totalPage, pageNumber } = res.data;
// 如果是第一页,清空列表
if (page.value === 1) {
historyList.value = [];
}
// 处理视频数据
const processedList = list.map(item => ({
id: item.other_uuid,
thumbnail: item.imgpath || '/static/bo_bg.png',
title: item.title || '未知标题',
author: item.public_name || '未知作者',
videoPath: item.path,
userUuid: item.user_uuid,
videoType: item.video_type,
agreenum: item.agreenum,
readnum: item.readnum,
type: item.type
}));
// 添加到列表
historyList.value.push(...processedList);
console.log(historyList.value);
// 更新分页状态
noMore.value = pageNumber >= totalPage;
// 如果是第一页且有数据,显示总数
if (page.value === 1 && totalRow > 0) {
uni.showToast({
title: `共找到 ${totalRow} 条记录`,
icon: 'none',
duration: 2000
});
}
} else {
uni.showToast({
title: res.message || '获取数据失败',
icon: 'none'
});
}
}).catch(err => {
console.error('获取收藏视频失败:', err);
uni.showToast({
title: '网络错误,请重试',
icon: 'none'
});
}).finally(() => {
loading.value = false;
refreshing.value = false;
});
};
const onRefresh = () => {
refreshing.value = true;
page.value = 1;
noMore.value = false;
// 调用API刷新数据
getVideoHistoryList();
};
const onLoadMore = () => {
if (loading.value || noMore.value) return;
loading.value = true;
page.value++;
// 调用API加载更多数据
getVideoHistoryList();
};
</script>
<style lang="scss" scoped>
.video-history-page {
min-height: 100vh;
background: #f9f9f9;
}
.history-list {
height: calc(100vh - 140rpx);
position: fixed;
top:140rpx;
bottom:0;
width:100%;
}
.edit-btn {
color: #8B2316;
font-size: 28rpx;
padding: 10rpx;
}
.history-item {
display: flex;
align-items: center;
padding: 30rpx;
background: #ffffff;
margin-bottom: 2rpx;
.thumbnail {
margin-right: 20rpx;
border-radius: 8rpx;
overflow: hidden;
.thumb-img {
width: 200rpx;
height: 120rpx;
border-radius: 8rpx;
}
}
.content {
flex: 1;
display: flex;
height: 120rpx;
flex-direction: column;
justify-content: space-between;
margin-right: 20rpx;
.title {
font-size: 28rpx;
color: #333333;
line-height: 1.4;
margin-bottom: 10rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.author {
font-size: 24rpx;
color: #666666;
}
}
}
.loading-more, .no-more, .empty-state {
text-align: center;
padding: 30rpx;
color: #999999;
font-size: 26rpx;
}
.empty-state {
padding: 100rpx 30rpx;
color: #999999;
}
</style>
+38 -21
View File
@@ -5,7 +5,7 @@
<uni-nav-bar
left-icon="left"
title="我的收藏"
@cviewckLeft="goBack"
@clickLeft="goBack()"
fixed
color="#8B2316"
height="140rpx"
@@ -18,42 +18,28 @@
<!-- 内容区域 -->
<view class="content-area">
<!-- 观看历史 -->
<view class="list-item" @click="goToHistory">
<view class="list-item" @click="goToEnglish">
<text class="item-text">英文期刊</text>
<uni-icons type="right" color="#999999" size="16"></uni-icons>
</view>
<!-- 分隔线 -->
<view class="divider"></view>
<!-- 离线缓存 -->
<view class="list-item" @click="goToCache">
<text class="item-text">病例荟萃</text>
<uni-icons type="right" color="#999999" size="16"></uni-icons>
</view>
<!-- 分隔线 -->
<view class="divider"></view>
<view class="list-item" @click="goToCache">
<text class="item-text">病例讨论</text>
<uni-icons type="right" color="#999999" size="16"></uni-icons>
</view>
<view class="divider"></view>
<view class="list-item" @click="goToCache">
<view class="list-item" @click="goToVideo">
<text class="item-text">肝胆视频</text>
<uni-icons type="right" color="#999999" size="16"></uni-icons>
</view>
<view class="divider"></view>
<view class="list-item" @click="goToCache">
<view class="list-item" @click="goToFile">
<text class="item-text">课件文档</text>
<uni-icons type="right" color="#999999" size="16"></uni-icons>
</view>
<view class="divider"></view>
<view class="list-item" @click="goToCache">
<view class="list-item" @click="goToNews">
<text class="item-text">肝胆新闻</text>
<uni-icons type="right" color="#999999" size="16"></uni-icons>
</view>
<view class="divider"></view>
<view class="list-item" @click="goToCache">
<view class="list-item" @click="goToHuanjiao">
<text class="item-text">患教学堂</text>
<uni-icons type="right" color="#999999" size="16"></uni-icons>
</view>
@@ -64,11 +50,42 @@
<script setup>
import { ref } from 'vue';
import navTo from "@/utils/navTo.js";
const goBack = () => {
uni.navigateBack();
};
const goToVideo = () => {
navTo({
url:'/pages_app/myCollect/video'
})
};
const goToEnglish = () => {
navTo({
url:'/pages_app/myCollect/english'
})
};
const goToFile = () => {
navTo({
url:'/pages_app/myCollect/file'
})
};
const goToNews = () => {
navTo({
url:'/pages_app/myCollect/news'
})
};
const goToHuanjiao = () => {
navTo({
url:'/pages_app/myCollect/huanjiao'
})
};
const goToHistory = () => {
uni.showToast({ title: '观看历史', icon: 'none' });
};
+276
View File
@@ -0,0 +1,276 @@
<template>
<view class="news-page">
<!-- 顶部导航栏 -->
<uni-nav-bar
left-icon="left"
title="肝胆新闻"
@clickLeft="goBack"
fixed
color="#8B2316"
height="140rpx"
:border="false"
backgroundColor="#eeeeee"
>
</uni-nav-bar>
<!-- 新闻列表 -->
<scroll-view
scroll-y
class="news-list"
refresher-enabled
@refresherrefresh="onRefresh"
:refresher-triggered="refreshing"
@scrolltolower="onLoadMore"
:lower-threshold="100"
>
<view class="news-item" v-for="(item, index) in newsList" :key="item.id" @click="onItemClick(item)">
<view class="thumbnail">
<image :src="item.thumbnail" width="200rpx" height="120rpx" mode="aspectFill" class="thumb-img"></image>
<!-- 重要通知标识 -->
<view v-if="item.isImportant" class="important-badge">
<text class="important-text">重要通知</text>
<text class="click-text">点击查看</text>
<view class="red-dot"></view>
</view>
</view>
<view class="content">
<view class="title">{{ item.title }}</view>
<view class="subtitle">{{ item.subtitle }}</view>
</view>
</view>
<!-- 加载更多提示 -->
<view v-if="loading" class="loading-more">
<text>加载中...</text>
</view>
<!-- 空数据状态 -->
<view v-if="!loading && newsList.length === 0" class="empty-state">
<text>暂无新闻</text>
</view>
<!-- 没有更多数据提示 -->
<view v-if="noMore && newsList.length > 0" class="no-more">
<text>没有更多数据了</text>
</view>
</scroll-view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import api from '@/api/api.js';
const refreshing = ref(false);
const loading = ref(false);
const noMore = ref(false);
const page = ref(1);
const pageSize = ref(10);
// 新闻数据列表
const newsList = ref([]);
const goBack = () => {
uni.navigateBack();
};
const onItemClick = (item) => {
// 跳转到新闻详情页面
uni.navigateTo({
url: `/pages_app/news?id=${item.id}&title=${encodeURIComponent(item.title)}&subtitle=${encodeURIComponent(item.subtitle)}&path=${encodeURIComponent(item.path)}&userUuid=${encodeURIComponent(item.userUuid)}`
});
};
// 获取新闻列表
const getNewsList = () => {
api.getCollectionList({
page: page.value,
type: 1,
title: ""
}).then(res => {
console.log(res);
if (res.code === 200 && res.data) {
const { list, totalRow, totalPage, pageNumber } = res.data;
// 如果是第一页,清空列表
if (page.value === 1) {
newsList.value = [];
}
// 处理新闻数据
const processedList = list.map(item => ({
id: item.other_uuid,
title: item.title || '未知标题',
subtitle: item.public_name || '未知来源',
thumbnail: item.imgpath || '/static/news1.png',
userUuid: item.user_uuid,
path: item.path,
type: item.type,
agreenum: item.agreenum,
readnum: item.readnum,
videoType: item.video_type,
// 判断是否为重要通知(根据标题关键词)
isImportant: item.title && (item.title.includes('卫健委') || item.title.includes('重要') || item.title.includes('通知'))
}));
// 添加到列表
newsList.value.push(...processedList);
console.log(newsList.value);
// 更新分页状态
noMore.value = pageNumber >= totalPage;
// 如果是第一页且有数据,显示总数
if (page.value === 1 && totalRow > 0) {
uni.showToast({
title: `共找到 ${totalRow} 条记录`,
icon: 'none',
duration: 2000
});
}
} else {
uni.showToast({
title: res.message || '获取数据失败',
icon: 'none'
});
}
}).catch(err => {
console.error('获取新闻列表失败:', err);
uni.showToast({
title: '网络错误,请重试',
icon: 'none'
});
}).finally(() => {
loading.value = false;
refreshing.value = false;
});
};
const onRefresh = () => {
refreshing.value = true;
page.value = 1;
noMore.value = false;
// 调用API刷新数据
getNewsList();
};
const onLoadMore = () => {
if (loading.value || noMore.value) return;
loading.value = true;
page.value++;
// 调用API加载更多数据
getNewsList();
};
onMounted(() => {
getNewsList();
});
</script>
<style lang="scss" scoped>
.news-page {
min-height: 100vh;
background: #ffffff;
}
.news-list {
height: calc(100vh - 140rpx);
position: fixed;
top: 140rpx;
bottom: 0;
width: 100%;
}
.news-item {
display: flex;
align-items: center;
padding: 30rpx;
background: #ffffff;
border-bottom: 1rpx solid #f0f0f0;
.thumbnail {
position: relative;
margin-right: 20rpx;
border-radius: 8rpx;
overflow: hidden;
.thumb-img {
width: 200rpx;
height: 120rpx;
border-radius: 8rpx;
}
.important-badge {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #ff4757, #ff3742);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 8rpx;
.important-text {
color: #ffffff;
font-size: 24rpx;
font-weight: bold;
margin-bottom: 8rpx;
}
.click-text {
color: #ffffff;
font-size: 20rpx;
margin-bottom: 8rpx;
}
.red-dot {
width: 8rpx;
height: 8rpx;
background: #ffffff;
border-radius: 50%;
}
}
}
.content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.title {
font-size: 28rpx;
color: #333333;
line-height: 1.4;
margin-bottom: 8rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.subtitle {
font-size: 24rpx;
color: #666666;
}
}
}
.loading-more, .no-more, .empty-state {
text-align: center;
padding: 30rpx;
color: #999999;
font-size: 26rpx;
}
.empty-state {
padding: 100rpx 30rpx;
color: #999999;
}
</style>
+246
View File
@@ -0,0 +1,246 @@
<template>
<view class="video-history-page">
<!-- 顶部导航栏 -->
<uni-nav-bar
left-icon="left"
title="收藏视频"
@clickLeft="goBack"
fixed
color="#8B2316"
height="140rpx"
:border="false"
backgroundColor="#eeeeee"
>
</uni-nav-bar>
<!-- 观看历史列表 -->
<scroll-view
scroll-y
class="history-list"
refresher-enabled
@refresherrefresh="onRefresh"
:refresher-triggered="refreshing"
@scrolltolower="onLoadMore"
:lower-threshold="100"
>
<view class="history-item" v-for="(item, index) in historyList" :key="item.id" @click="onItemClick(item)">
<view class="thumbnail">
<image :src="item.thumbnail" width="200rpx" height="120rpx" mode="aspectFill" class="thumb-img"></image>
</view>
<view class="content">
<view class="title">{{ item.title }}</view>
<view class="author">{{ item.author }}</view>
</view>
</view>
<!-- 加载更多提示 -->
<view v-if="loading" class="loading-more">
<text>加载中...</text>
</view>
<!-- 空数据状态 -->
<view v-if="!loading && historyList.length === 0" class="empty-state">
<text>暂无收藏视频</text>
</view>
<!-- 没有更多数据提示 -->
<view v-if="noMore && historyList.length > 0" class="no-more">
<text>没有更多数据了</text>
</view>
</scroll-view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import api from '@/api/api.js';
import docUrl from "@/utils/docUrl.js";
const refreshing = ref(false);
const loading = ref(false);
const noMore = ref(false);
const page = ref(1);
const pageSize = ref(10);
const historyList = ref([]);
const goBack = () => {
uni.navigateBack();
};
const onItemClick = (item) => {
// 跳转到视频详情页面
uni.navigateTo({
url: `/pages_app/videoDetail/videoDetail?id=${item.id}&title=${encodeURIComponent(item.title)}&author=${encodeURIComponent(item.author)}&videoPath=${encodeURIComponent(item.videoPath)}&userUuid=${encodeURIComponent(item.userUuid)}`
});
};
onMounted(() => {
getVideoHistoryList();
});
const getVideoHistoryList = () => {
api.getCollectionList({
page: page.value,
type: 5,
title: ""
}).then(res => {
console.log(res);
if (res.code === 200 && res.data) {
const { list, totalRow, totalPage, pageNumber } = res.data;
// 如果是第一页,清空列表
if (page.value === 1) {
historyList.value = [];
}
// 处理视频数据
const processedList = list.map(item => ({
id: item.other_uuid,
thumbnail: docUrl + item.imgpath || '/static/bo_bg.png',
title: item.title || '未知标题',
author: item.public_name || '未知作者',
videoPath: item.path,
userUuid: item.user_uuid,
videoType: item.video_type,
agreenum: item.agreenum,
readnum: item.readnum,
type: item.type
}));
// 添加到列表
historyList.value.push(...processedList);
console.log(historyList.value);
// 更新分页状态
noMore.value = pageNumber >= totalPage;
// 如果是第一页且有数据,显示总数
if (page.value === 1 && totalRow > 0) {
uni.showToast({
title: `共找到 ${totalRow} 条记录`,
icon: 'none',
duration: 2000
});
}
} else {
uni.showToast({
title: res.message || '获取数据失败',
icon: 'none'
});
}
}).catch(err => {
console.error('获取收藏视频失败:', err);
uni.showToast({
title: '网络错误,请重试',
icon: 'none'
});
}).finally(() => {
loading.value = false;
refreshing.value = false;
});
};
const onRefresh = () => {
refreshing.value = true;
page.value = 1;
noMore.value = false;
// 调用API刷新数据
getVideoHistoryList();
};
const onLoadMore = () => {
if (loading.value || noMore.value) return;
loading.value = true;
page.value++;
// 调用API加载更多数据
getVideoHistoryList();
};
</script>
<style lang="scss" scoped>
.video-history-page {
min-height: 100vh;
background: #f9f9f9;
}
.history-list {
height: calc(100vh - 140rpx);
position: fixed;
top:140rpx;
bottom:0;
width:100%;
}
.edit-btn {
color: #8B2316;
font-size: 28rpx;
padding: 10rpx;
}
.history-item {
display: flex;
align-items: center;
padding: 30rpx;
background: #ffffff;
margin-bottom: 2rpx;
.thumbnail {
margin-right: 20rpx;
border-radius: 8rpx;
overflow: hidden;
.thumb-img {
width: 200rpx;
height: 120rpx;
border-radius: 8rpx;
}
}
.content {
flex: 1;
display: flex;
height: 120rpx;
flex-direction: column;
justify-content: space-between;
margin-right: 20rpx;
.title {
font-size: 28rpx;
color: #333333;
line-height: 1.4;
margin-bottom: 10rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.author {
font-size: 24rpx;
color: #666666;
}
}
}
.loading-more, .no-more, .empty-state {
text-align: center;
padding: 30rpx;
color: #999999;
font-size: 26rpx;
}
.empty-state {
padding: 100rpx 30rpx;
color: #999999;
}
</style>