637 lines
13 KiB
Vue
637 lines
13 KiB
Vue
<template>
|
|
<!-- 头部导航栏 -->
|
|
<uni-nav-bar
|
|
left-icon="left"
|
|
title="肝胆课件"
|
|
@clickLeft="goBack"
|
|
fixed
|
|
color="#8B2316"
|
|
height="140rpx"
|
|
:border="false"
|
|
backgroundColor="#eeeeee"
|
|
></uni-nav-bar>
|
|
|
|
<view class="courseware-container">
|
|
|
|
<!-- 排序和筛选栏 -->
|
|
<view class="filter-bar">
|
|
<view class="filter-item" @click="toggleSort">
|
|
<text class="filter-text">最新</text>
|
|
<view class="newbox">
|
|
<up-image :src="upImg" width="20rpx" height="26rpx" ></up-image>
|
|
</view>
|
|
</view>
|
|
<view class="divider"></view>
|
|
<view class="filter-item" @click="showFilterPopup">
|
|
<text class="filter-text">筛选</text>
|
|
<view class="filterbox">
|
|
<up-image :src="isFilterActive ? filterOn : filter" width="30rpx" height="30rpx" ></up-image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 课件列表 -->
|
|
<scroll-view class="courseware-list" scroll-y="true"
|
|
refresher-enabled="true"
|
|
:refresher-triggered="refreshing"
|
|
@refresherrefresh="onRefresh"
|
|
@scrolltolower="onLoadMore"
|
|
:show-scrollbar="false">
|
|
<view
|
|
class="courseware-item"
|
|
v-for="(item, index) in coursewareList"
|
|
:key="index"
|
|
@click="viewCourseware(item)"
|
|
>
|
|
<view class="item-left">
|
|
<view class="pdf-icon">📄</view>
|
|
</view>
|
|
<view class="item-content">
|
|
<view class="item-title">{{ item.title }}</view>
|
|
<view class="item-author">{{ item.author }}</view>
|
|
<view class="item-stats">
|
|
<view class="views">
|
|
<uni-icons type="eye" size="30rpx" color="#999"></uni-icons>
|
|
<text class="view-count">{{ item.views }}人阅读</text>
|
|
</view>
|
|
|
|
<view class="price">
|
|
<up-image :src="downLoadImg" width="32rpx" height="32rpx" ></up-image>
|
|
<text class="price-value">{{ item.price }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<!-- 筛选弹窗 -->
|
|
<view class="filter-popup" v-if="showFilter" @click="hideFilterPopup">
|
|
<view class="filter-content" @click.stop>
|
|
<!-- 筛选标签网格 -->
|
|
<view class="filter-tags">
|
|
<view
|
|
class="tag-item"
|
|
v-for="(tag, index) in filterTags"
|
|
:key="index"
|
|
:class="{ active: tag.selected }"
|
|
@click="toggleTag(index)"
|
|
>
|
|
{{ tag.name }}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部按钮 -->
|
|
<view class="filter-buttons">
|
|
<view class="btn-reset" @click="resetFilter">重置</view>
|
|
<view class="btn-confirm" @click="confirmFilter">确定</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 投稿按钮 -->
|
|
<view class="submit-btn" @click="submitCourseware">
|
|
<up-image :src="tougaoImg" width="152rpx" height="80rpx" ></up-image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { onShow } from "@dcloudio/uni-app";
|
|
import filter from "@/static/cb_screen_no.png"
|
|
import filterOn from "@/static/cb_screen_yes.png"
|
|
import upImg from "@/static/cb_up.png"
|
|
import downImg from "@/static/cb_up.png"
|
|
import tougaoImg from "@/static/kejiantougao.png"
|
|
import downLoadImg from "@/static/wdxz.png"
|
|
const isFilterActive=ref(false)
|
|
// 响应式数据
|
|
const refreshing = ref(false);
|
|
const loading = ref(false);
|
|
const noMore = ref(false);
|
|
const page = ref(1);
|
|
const pageSize = ref(10);
|
|
|
|
// 响应式数据
|
|
const coursewareList = ref([
|
|
{
|
|
title: "颜学兵: 广东省基孔肯雅热诊疗指引",
|
|
author: "颜学兵 徐州医科大学附属医院",
|
|
views: 179,
|
|
price: "10.0"
|
|
},
|
|
{
|
|
title: "颜学兵: 佛山市基孔肯雅热中医诊治推荐用方",
|
|
author: "颜学兵 徐州医科大学附属医院",
|
|
views: 122,
|
|
price: "10.0"
|
|
},
|
|
{
|
|
title: "抗菌药物的临床应用",
|
|
author: "肝胆相照官方账号 北京肝胆相照公益基金会",
|
|
views: 656,
|
|
price: "15.0"
|
|
},
|
|
{
|
|
title: "中国肝癌多学科综合治疗专家共识 (2025)",
|
|
author: "肝胆相照官方账号 北京肝胆相照公益基金会",
|
|
views: 208,
|
|
price: "15.0"
|
|
},
|
|
{
|
|
title: "耐药结核病全口服短程治疗专家共识 (2025)",
|
|
author: "肝胆相照官方账号 北京肝胆相照公益基金会",
|
|
views: 256,
|
|
price: "15.0"
|
|
},
|
|
{
|
|
title: "结核分枝杆菌合并乙型肝炎病毒治专家共识",
|
|
author: "肝胆相照官方账号 北京肝胆相照公益基金会",
|
|
views: 358,
|
|
price: "15.0"
|
|
}
|
|
]);
|
|
|
|
// 方法
|
|
const goBack = () => {
|
|
uni.navigateBack({
|
|
fail(){
|
|
uni.redirectTo({
|
|
url: '/pages/index/index'
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
const showSearch = () => {
|
|
uni.showToast({
|
|
title: '搜索功能',
|
|
icon: 'none'
|
|
});
|
|
};
|
|
|
|
const toggleSort = () => {
|
|
uni.showToast({
|
|
title: '排序功能',
|
|
icon: 'none'
|
|
});
|
|
};
|
|
|
|
|
|
|
|
const viewCourseware = (item) => {
|
|
uni.showToast({
|
|
title: `查看课件: ${item.title}`,
|
|
icon: 'none'
|
|
});
|
|
};
|
|
|
|
const submitCourseware = () => {
|
|
uni.showToast({
|
|
title: '课件投稿功能',
|
|
icon: 'none'
|
|
});
|
|
};
|
|
// 模拟API数据
|
|
const mockApiData = [
|
|
{
|
|
id: 7,
|
|
title: "肝胆疾病影像学诊断指南",
|
|
author: "影像科专家团队 北京协和医院",
|
|
views: 445,
|
|
price: "20.0"
|
|
},
|
|
{
|
|
id: 8,
|
|
title: "肝硬化并发症治疗新进展",
|
|
author: "消化内科专家 上海交通大学医学院",
|
|
views: 332,
|
|
price: "18.0"
|
|
},
|
|
{
|
|
id: 9,
|
|
title: "肝胆外科手术技巧精要",
|
|
author: "外科专家 中山大学附属第一医院",
|
|
views: 567,
|
|
price: "25.0"
|
|
},
|
|
{
|
|
id: 10,
|
|
title: "肝胆疾病护理规范",
|
|
author: "护理专家团队 中国护理学会",
|
|
views: 289,
|
|
price: "12.0"
|
|
}
|
|
];
|
|
|
|
// 下拉刷新
|
|
const onRefresh = async () => {
|
|
refreshing.value = true;
|
|
|
|
try {
|
|
// 模拟API调用延迟
|
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
|
|
// 重置数据
|
|
page.value = 1;
|
|
noMore.value = false;
|
|
|
|
// 重新加载第一页数据
|
|
await loadData(true);
|
|
|
|
uni.showToast({
|
|
title: '刷新成功',
|
|
icon: 'success'
|
|
});
|
|
} catch (error) {
|
|
uni.showToast({
|
|
title: '刷新失败',
|
|
icon: 'error'
|
|
});
|
|
} finally {
|
|
refreshing.value = false;
|
|
}
|
|
};
|
|
|
|
// 上拉加载更多
|
|
const onLoadMore = async () => {
|
|
console.log('加载更多')
|
|
if (loading.value || noMore.value) return;
|
|
|
|
loading.value = true;
|
|
|
|
try {
|
|
// 模拟API调用延迟
|
|
await new Promise(resolve => setTimeout(resolve, 800));
|
|
|
|
// 加载下一页数据
|
|
await loadData(false);
|
|
} catch (error) {
|
|
uni.showToast({
|
|
title: '加载失败',
|
|
icon: 'error'
|
|
});
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
// 加载数据
|
|
const loadData = async (isRefresh = false) => {
|
|
// 模拟API分页逻辑
|
|
const startIndex = (page.value - 1) * pageSize.value;
|
|
const endIndex = startIndex + pageSize.value;
|
|
const newData = mockApiData.slice(startIndex, endIndex);
|
|
|
|
if (isRefresh) {
|
|
// 刷新时替换所有数据
|
|
coursewareList.value = coursewareList.value.slice(0, 6); // 保留原有6条数据
|
|
} else {
|
|
// 加载更多时追加数据
|
|
if (newData.length > 0) {
|
|
coursewareList.value.push(...newData);
|
|
page.value++;
|
|
} else {
|
|
noMore.value = true;
|
|
}
|
|
}
|
|
};
|
|
const showFilter = ref(false)
|
|
|
|
// 筛选弹窗相关数据
|
|
const filterTags = ref([
|
|
{ name: '指南解读', selected: false },
|
|
{ name: '病例分析', selected: false },
|
|
{ name: '学术讲座', selected: false },
|
|
{ name: '手术视频', selected: false },
|
|
{ name: '研究进展', selected: false },
|
|
{ name: '肝病治疗', selected: false },
|
|
{ name: '肝癌诊断', selected: false },
|
|
{ name: '肝移植', selected: false },
|
|
{ name: '微创手术', selected: false },
|
|
{ name: '免疫治疗', selected: false },
|
|
{ name: '靶向治疗', selected: false },
|
|
{ name: '化疗方案', selected: false }
|
|
]);
|
|
|
|
// 筛选弹窗相关方法
|
|
const showFilterPopup = () => {
|
|
showFilter.value = true;
|
|
};
|
|
|
|
const hideFilterPopup = () => {
|
|
showFilter.value = false;
|
|
};
|
|
|
|
const toggleTag = (index) => {
|
|
filterTags.value[index].selected = !filterTags.value[index].selected;
|
|
isFilterActive.value = filterTags.value.some(tag => tag.selected);
|
|
};
|
|
|
|
const resetFilter = () => {
|
|
filterTags.value.forEach(tag => tag.selected = false);
|
|
isFilterActive.value = false;
|
|
};
|
|
|
|
const confirmFilter = () => {
|
|
const selectedTags = filterTags.value.filter(tag => tag.selected);
|
|
console.log('选中的筛选标签:', selectedTags);
|
|
hideFilterPopup();
|
|
// 这里可以根据选中的标签进行数据筛选
|
|
};
|
|
onShow(() => {
|
|
// 页面显示时的逻辑
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
// 变量定义
|
|
$primary-color: #e74c3c;
|
|
$text-primary: #333333;
|
|
$text-secondary: #666666;
|
|
$text-light: #999999;
|
|
$border-color: #e5e5e5;
|
|
$background-color: #f8f9fa;
|
|
$white: #ffffff;
|
|
$submit-btn-color: #20b2aa;
|
|
$theme-color: #8B2316;
|
|
$white: #fff;
|
|
// 混合器
|
|
@mixin flex-center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@mixin flex-between {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
@mixin shadow {
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.courseware-container {
|
|
height: calc(100vh - 140rpx);
|
|
background-color: $background-color;
|
|
}
|
|
|
|
.status-bar {
|
|
height: 44rpx;
|
|
background-color: $white;
|
|
@include flex-between;
|
|
padding: 0 30rpx;
|
|
font-size: 24rpx;
|
|
color: $text-primary;
|
|
|
|
.status-left {
|
|
.time {
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.status-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
|
|
.network-info,
|
|
.signal,
|
|
.wifi,
|
|
.battery {
|
|
font-size: 22rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header {
|
|
height: 88rpx;
|
|
background-color: $white;
|
|
@include flex-between;
|
|
padding: 0 30rpx;
|
|
border-bottom: 1rpx solid $border-color;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.filter-bar {
|
|
height: 100rpx;
|
|
background-color: $white;
|
|
@include flex-center;
|
|
gap: 100rpx;
|
|
border-bottom: 1rpx solid $border-color;
|
|
position: sticky;
|
|
top: 140rpx;
|
|
z-index: 99;
|
|
.divider{
|
|
width: 2rpx;
|
|
height: 30rpx;
|
|
background-color: #999;
|
|
}
|
|
.filter-item{
|
|
display:flex;
|
|
.filterbox{
|
|
margin-top: 5rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.courseware-list {
|
|
position: fixed;
|
|
top:240rpx;
|
|
flex: 1;
|
|
bottom:0;
|
|
width:100%;
|
|
padding-top: 20rpx;
|
|
margin: 0 30rpx;
|
|
box-sizing: border-box;
|
|
width:auto;
|
|
.courseware-item {
|
|
background-color: $white;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
@include shadow;
|
|
display: flex;
|
|
gap: 20rpx;
|
|
|
|
.item-left {
|
|
.pdf-icon {
|
|
font-size: 60rpx;
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
|
|
.item-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16rpx;
|
|
|
|
.item-title {
|
|
font-size: 32rpx;
|
|
color: $text-primary;
|
|
font-weight: 500;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.item-author {
|
|
font-size: 28rpx;
|
|
color: $text-secondary;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.item-stats {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
|
|
.views {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
|
|
.eye-icon {
|
|
font-size: 24rpx;
|
|
color: $text-light;
|
|
}
|
|
|
|
.view-count {
|
|
font-size: 26rpx;
|
|
color: $text-light;
|
|
}
|
|
}
|
|
|
|
.download {
|
|
.download-icon {
|
|
font-size: 32rpx;
|
|
color: $text-light;
|
|
}
|
|
}
|
|
|
|
.price {
|
|
display: flex;
|
|
margin-left: 30rpx;
|
|
align-items: baseline;
|
|
gap: 4rpx;
|
|
|
|
.price-symbol {
|
|
font-size: 24rpx;
|
|
color: $primary-color;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.price-value {
|
|
font-size: 32rpx;
|
|
color: $primary-color;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.submit-btn {
|
|
position: fixed;
|
|
right: 0rpx;
|
|
bottom: 100rpx;
|
|
|
|
width: 152rpx;
|
|
height: 80rpx;
|
|
z-index: 100;
|
|
|
|
.submit-icon {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.submit-text {
|
|
font-size: 28rpx;
|
|
color: $white;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
// 筛选弹窗样式
|
|
.filter-popup {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
// background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
z-index: 9999;
|
|
|
|
.filter-content {
|
|
margin-top:245rpx;
|
|
|
|
background-color: $white;
|
|
// border-radius: 20rpx 20rpx 0 0;
|
|
padding: 20rpx 30rpx 60rpx;
|
|
width: 100%;
|
|
max-height: 80vh;
|
|
|
|
.filter-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
margin-bottom: 60rpx;
|
|
max-height: 65vh;
|
|
overflow-y: auto;
|
|
|
|
.tag-item {
|
|
background-color: #f8f8f8;
|
|
color: #666;
|
|
padding: 8rpx 24rpx;
|
|
border-radius: 30rpx;
|
|
font-size: 26rpx;
|
|
border: 2rpx solid #efefef;
|
|
transition: all 0.3s ease;
|
|
|
|
&.active {
|
|
background-color: #fff;
|
|
color: $theme-color;
|
|
border-color: $theme-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.filter-buttons {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
position: fixed;
|
|
bottom: 30rpx;
|
|
left: 30rpx;
|
|
right: 30rpx;
|
|
|
|
.btn-reset,
|
|
.btn-confirm {
|
|
flex: 1;
|
|
height: 70rpx;
|
|
border-radius: 14rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.btn-reset {
|
|
background-color: $white;
|
|
color: $theme-color;
|
|
border: 2rpx solid $theme-color;
|
|
}
|
|
|
|
.btn-confirm {
|
|
border: 2rpx solid $theme-color;
|
|
background-color: $theme-color;
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |