first commit
This commit is contained in:
zoujiandong
@@ -0,0 +1,561 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user