562 lines
12 KiB
Vue
562 lines
12 KiB
Vue
<template>
|
||
<uni-nav-bar title="患教学堂" fixed color="#8B2316" height="140rpx" :border="false" backgroundColor="#eeeeee"></uni-nav-bar>
|
||
<view class="page">
|
||
<!-- 顶部标题栏 -->
|
||
|
||
<view class="top">
|
||
|
||
<!-- 选项卡 -->
|
||
<view class="tabs">
|
||
<view class="tab-item" :class="{ active: activeTab === 0 }" @click="switchTab(0)">
|
||
患教文库
|
||
</view>
|
||
<view class="tab-item" :class="{ active: activeTab === 1 }" @click="switchTab(1)">
|
||
患教视频
|
||
</view>
|
||
<view class="tab-item" :class="{ active: activeTab === 2 }" @click="switchTab(2)">
|
||
常见问题
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 筛选栏 -->
|
||
<view class="filter-bar">
|
||
<view class="search-box">
|
||
<uni-icons type="search" size="16" color="#999"></uni-icons>
|
||
<text class="search-text">搜索</text>
|
||
</view>
|
||
<view class="divider"></view>
|
||
<view class="filter-item">
|
||
<text>最新</text>
|
||
<up-image :src="upImg" width="20rpx" height="26rpx" ></up-image>
|
||
</view>
|
||
<view class="divider"></view>
|
||
<view class="filter-item" @click="showFilterPopup">
|
||
<text>筛选</text>
|
||
<up-image :src="isFilterActive ? filterOn : filter" width="30rpx" height="30rpx" ></up-image>
|
||
</view>
|
||
</view>
|
||
|
||
</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>
|
||
|
||
<!-- 文章列表 -->
|
||
<scroll-view class="article-list" scroll-y>
|
||
<view class="article-item" v-for="(article, index) in articleList" :key="index" @click="goToDetail(article)">
|
||
<image class="article-image" :src="article.image" mode="aspectFill"></image>
|
||
<view class="article-content">
|
||
<view class="article-title">{{ article.title }}</view>
|
||
<view class="article-meta">
|
||
<view class="date-tag" v-if="article.isToday">今日</view>
|
||
<view class="date" v-else>{{ article.date }}</view>
|
||
<view class="stats">
|
||
<view class="stat-item">
|
||
<uni-icons type="eye" size="12" color="#999"></uni-icons>
|
||
<text>{{ article.views }}</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<uni-icons type="heart" size="12" color="#999"></uni-icons>
|
||
<text>{{ article.likes }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 底部导航栏 -->
|
||
|
||
</view>
|
||
<CustomTabbar></CustomTabbar>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import { onShow } from "@dcloudio/uni-app";
|
||
import CustomTabbar from '@/compoents/tabBar/tabBar.vue';
|
||
import upImg from "@/static/cb_up.png"
|
||
import downImg from "@/static/cb_up.png"
|
||
import filter from "@/static/cb_screen_no.png"
|
||
import filterOn from "@/static/cb_screen_yes.png"
|
||
|
||
// 响应式数据
|
||
const activeTab = ref(0);
|
||
const showFilter = ref(false);
|
||
const isFilterActive = 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 },
|
||
{ 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 },
|
||
{ 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 },
|
||
{ 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 articleList = ref([
|
||
{
|
||
id: 1,
|
||
image: '/static/liver_knowledge.png',
|
||
title: '甩掉"乙肝大国"的帽子后，中国第一大肝病变成了它，正在侵...',
|
||
date: '今日',
|
||
isToday: true,
|
||
views: 185,
|
||
likes: 0
|
||
},
|
||
{
|
||
id: 2,
|
||
image: '/static/doctor_liver.png',
|
||
title: '从你我做起，让肝炎止步',
|
||
date: '08-01',
|
||
isToday: false,
|
||
views: 315,
|
||
likes: 0
|
||
},
|
||
{
|
||
id: 3,
|
||
image: '/static/liver_health.png',
|
||
title: '这6个指标正常，说明你肝脏健康',
|
||
date: '07-25',
|
||
isToday: false,
|
||
views: 1033,
|
||
likes: 0
|
||
},
|
||
{
|
||
id: 4,
|
||
image: '/static/diet_liver.png',
|
||
title: '无需节食！吃饭一个改变，脂肪肝好转了！4个月肝脏脂肪减...',
|
||
date: '07-18',
|
||
isToday: false,
|
||
views: 1829,
|
||
likes: 1
|
||
},
|
||
{
|
||
id: 5,
|
||
image: '/static/cooking_spices.png',
|
||
title: '这种家家都有的调料，吃太多会增加肝癌风险？很多人已超标！',
|
||
date: '07-11',
|
||
isToday: false,
|
||
views: 2992,
|
||
likes: 0
|
||
},
|
||
{
|
||
id: 6,
|
||
image: '/static/liver_protection.png',
|
||
title: '肝炎拖成肝硬化，下一步就是肝癌，养肝护肝，记住这3点',
|
||
date: '07-04',
|
||
isToday: false,
|
||
views: 1993,
|
||
likes: 1
|
||
}
|
||
]);
|
||
|
||
// 方法
|
||
const switchTab = (index) => {
|
||
activeTab.value = index;
|
||
};
|
||
|
||
const goToDetail = (article) => {
|
||
console.log('查看文章详情:', article);
|
||
// 跳转到详情页
|
||
};
|
||
|
||
const goToPage = (page) => {
|
||
console.log('跳转到页面:', page);
|
||
// 根据页面名称进行跳转
|
||
if (page === 'index') {
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
});
|
||
}
|
||
};
|
||
|
||
// 筛选相关方法
|
||
const showFilterPopup = () => {
|
||
showFilter.value = true;
|
||
};
|
||
|
||
const hideFilterPopup = () => {
|
||
showFilter.value = false;
|
||
};
|
||
|
||
const toggleTag = (index) => {
|
||
filterTags.value[index].selected = !filterTags.value[index].selected;
|
||
};
|
||
|
||
const resetFilter = () => {
|
||
filterTags.value.forEach(tag => {
|
||
tag.selected = false;
|
||
});
|
||
isFilterActive.value = false;
|
||
};
|
||
|
||
const confirmFilter = () => {
|
||
// 检查是否有选中的标签
|
||
const hasSelected = filterTags.value.some(tag => tag.selected);
|
||
isFilterActive.value = hasSelected;
|
||
|
||
// 执行筛选逻辑
|
||
if (hasSelected) {
|
||
const selectedTags = filterTags.value.filter(tag => tag.selected).map(tag => tag.name);
|
||
console.log('选中的标签:', selectedTags);
|
||
// 这里可以添加实际的筛选逻辑
|
||
}
|
||
|
||
showFilter.value = false;
|
||
};
|
||
|
||
onShow(() => {
|
||
console.log('患教学堂页面显示');
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 颜色变量
|
||
$primary-color: #ff6b6b;
|
||
$theme-color: #8B2316;
|
||
$white: #fff;
|
||
$gray-bg: #f5f5f5;
|
||
$gray-light: #eee;
|
||
$gray-medium: #999;
|
||
$gray-dark: #666;
|
||
$text-color: #333;
|
||
|
||
// 尺寸变量
|
||
$border-radius: 8px;
|
||
$border-radius-small: 6px;
|
||
$padding: 15px;
|
||
$padding-small: 10px;
|
||
|
||
.page {
|
||
background-color: $gray-bg;
|
||
height: calc(100vh - 140rpx);
|
||
display: flex;
|
||
overflow-y: hidden;
|
||
flex-direction: column;
|
||
// 为固定导航栏留出空间
|
||
}
|
||
.top{
|
||
width:100%;
|
||
position: fixed;
|
||
top:140rpx;
|
||
}
|
||
// 选项卡
|
||
.tabs {
|
||
background-color: $white;
|
||
display: flex;
|
||
border-bottom: 1px solid $gray-light;
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: $padding 0;
|
||
font-size: 16px;
|
||
color: $gray-dark;
|
||
position: relative;
|
||
|
||
&.active {
|
||
color: $theme-color;
|
||
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 30px;
|
||
height: 2px;
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 筛选栏
|
||
.filter-bar {
|
||
background-color: $white;
|
||
padding: $padding-small $padding;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid $gray-light;
|
||
|
||
.search-box {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 5px;
|
||
|
||
.search-text {
|
||
font-size: 14px;
|
||
color: $gray-medium;
|
||
}
|
||
}
|
||
|
||
.divider {
|
||
width: 1px;
|
||
height: 16px;
|
||
background-color: $gray-medium;
|
||
margin: 0 $padding;
|
||
}
|
||
|
||
.filter-item {
|
||
flex:1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 3px;
|
||
font-size: 14px;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
// 文章列表
|
||
.article-list {
|
||
position: fixed;
|
||
height:calc(100vh - 450rpx);
|
||
top: 342rpx;
|
||
|
||
padding-bottom: 130rpx;
|
||
.article-item {
|
||
background-color: $white;
|
||
margin-bottom: $padding-small;
|
||
border-radius: $border-radius;
|
||
padding: $padding;
|
||
display: flex;
|
||
gap: 12px;
|
||
|
||
.article-image {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: $border-radius-small;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.article-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.article-title {
|
||
font-size: 16px;
|
||
color: $text-color;
|
||
line-height: 1.4;
|
||
margin-bottom: $padding-small;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.article-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.date-tag {
|
||
background-color: $primary-color;
|
||
color: $white;
|
||
font-size: 12px;
|
||
padding: 2px 6px;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.date {
|
||
font-size: 12px;
|
||
color: $gray-medium;
|
||
}
|
||
|
||
.stats {
|
||
display: flex;
|
||
gap: $padding;
|
||
|
||
.stat-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
font-size: 12px;
|
||
color: $gray-medium;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 底部导航栏
|
||
.bottom-nav {
|
||
background-color: $white;
|
||
display: flex;
|
||
border-top: 1px solid $gray-light;
|
||
padding: 8px 0;
|
||
|
||
.nav-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 2px;
|
||
font-size: 12px;
|
||
color: $gray-medium;
|
||
|
||
&.active {
|
||
color: $primary-color;
|
||
}
|
||
|
||
text {
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 筛选弹窗样式
|
||
.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:329rpx;
|
||
|
||
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: $gray-dark;
|
||
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>
|