394 lines
7.6 KiB
Vue
394 lines
7.6 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="zhinan-page">
|
||
<!-- 导航栏 -->
|
||
|
||
|
||
<!-- 固定搜索栏 -->
|
||
<view class="search-container-fixed 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" @click="showFilterPopup">
|
||
<text>筛选</text>
|
||
<up-image :src="isFilterActive ? filterOn : filter" width="30rpx" height="30rpx" ></up-image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 指南分类网格 -->
|
||
<view class="guidelines-grid">
|
||
<view
|
||
class="guideline-item"
|
||
v-for="(item, index) in guidelineCategories"
|
||
:key="index"
|
||
@click="enterCategory(item)"
|
||
>
|
||
<view class="item-image" :style="{ backgroundColor: item.bgColor }">
|
||
<image :src="item.icon" mode="aspectFit" class="category-icon"></image>
|
||
</view>
|
||
<view class="item-content">
|
||
<text class="category-title">{{ item.title }}</text>
|
||
<text class="category-count">(共{{ item.count }}份)</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部导航 -->
|
||
<view class="bottom-tabbar">
|
||
<view class="tab-item active" @click="switchTab('zhinan')">
|
||
<text class="tab-text active">诊疗指南</text>
|
||
</view>
|
||
<view class="tab-item" @click="switchTab('qikan')">
|
||
<text class="tab-text">期刊杂志</text>
|
||
</view>
|
||
<view class="tab-item" @click="switchTab('tools')">
|
||
<text class="tab-text">常用工具</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue';
|
||
import { onShow } from "@dcloudio/uni-app";
|
||
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 searchText = ref('');
|
||
const guidelineCategories = ref([]);
|
||
|
||
// 页面加载
|
||
onMounted(() => {
|
||
initGuidelineData();
|
||
});
|
||
|
||
onShow(() => {
|
||
// 页面显示时可以刷新数据
|
||
});
|
||
|
||
// 初始化指南数据
|
||
const initGuidelineData = () => {
|
||
guidelineCategories.value = [
|
||
{
|
||
title: '肝肿瘤相关',
|
||
count: 0,
|
||
bgColor: '#2C2C2C',
|
||
icon: '/static/liver_icon.png',
|
||
category: 'liver'
|
||
},
|
||
{
|
||
title: '感染相关',
|
||
count: 0,
|
||
bgColor: '#9C6BCF',
|
||
icon: '/static/infection_icon.png',
|
||
category: 'infection'
|
||
},
|
||
{
|
||
title: '消化相关',
|
||
count: 0,
|
||
bgColor: '#5CB3E8',
|
||
icon: '/static/digestion_icon.png',
|
||
category: 'digestion'
|
||
},
|
||
{
|
||
title: '中医/中西医结合',
|
||
count: 192,
|
||
bgColor: '#4A90E2',
|
||
icon: '/static/tcm_icon.png',
|
||
category: 'tcm'
|
||
},
|
||
{
|
||
title: '新型冠状病毒肺炎',
|
||
count: 450,
|
||
bgColor: '#1C1C1C',
|
||
icon: '/static/covid_icon.png',
|
||
category: 'covid'
|
||
},
|
||
{
|
||
title: 'AASLD',
|
||
count: 63,
|
||
bgColor: '#FF6B35',
|
||
icon: '/static/aasld_icon.png',
|
||
category: 'aasld'
|
||
},
|
||
{
|
||
title: 'EASL',
|
||
count: 75,
|
||
bgColor: '#1E88E5',
|
||
icon: '/static/easl_icon.png',
|
||
category: 'easl'
|
||
},
|
||
{
|
||
title: '其他指南',
|
||
count: 928,
|
||
bgColor: '#26C6DA',
|
||
icon: '/static/other_icon.png',
|
||
category: 'other'
|
||
},
|
||
{
|
||
title: '国内指南',
|
||
count: 375,
|
||
bgColor: '#42A5F5',
|
||
icon: '/static/domestic_icon.png',
|
||
category: 'domestic'
|
||
},
|
||
{
|
||
title: '共识指导',
|
||
count: 0,
|
||
bgColor: '#66BB6A',
|
||
icon: '/static/consensus_icon.png',
|
||
category: 'consensus'
|
||
},
|
||
{
|
||
title: '专家解读',
|
||
count: 0,
|
||
bgColor: '#FFA726',
|
||
icon: '/static/expert_icon.png',
|
||
category: 'expert'
|
||
}
|
||
];
|
||
};
|
||
|
||
// 进入指南分类
|
||
const enterCategory = (item) => {
|
||
console.log('进入分类:', item.category);
|
||
uni.navigateTo({
|
||
url: `/pages/guidelineList/guidelineList?category=${item.category}&title=${item.title}`
|
||
});
|
||
};
|
||
|
||
// 显示筛选对话框
|
||
const showFilterDialog = () => {
|
||
console.log('显示筛选');
|
||
// 可以实现筛选弹窗
|
||
};
|
||
|
||
// 切换底部标签
|
||
const switchTab = (tabName) => {
|
||
console.log('切换到:', tabName);
|
||
switch(tabName) {
|
||
case 'qikan':
|
||
uni.switchTab({
|
||
url: '/pages/qikan/qikan'
|
||
});
|
||
break;
|
||
case 'tools':
|
||
uni.switchTab({
|
||
url: '/pages/tools/tools'
|
||
});
|
||
break;
|
||
}
|
||
};
|
||
|
||
// 返回
|
||
const goBack = () => {
|
||
uni.navigateBack({
|
||
fail() {
|
||
uni.redirectTo({
|
||
url: '/pages/index/index'
|
||
});
|
||
}
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// SCSS Variables
|
||
$primary-color: #8B2316;
|
||
$bg-color: #f5f5f5;
|
||
$white: #fff;
|
||
$text-primary: #333;
|
||
$text-secondary: #666;
|
||
$text-light: #999;
|
||
$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;
|
||
.zhinan-page {
|
||
background-color: $bg-color;
|
||
min-height: 100vh;
|
||
padding-top: 140rpx; // 导航栏高度
|
||
}
|
||
|
||
// 固定搜索容器
|
||
.search-container-fixed {
|
||
position: fixed;
|
||
top: 140rpx; // 导航栏高度
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 90;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 30rpx 30rpx;
|
||
background-color: $white;
|
||
gap: 20rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
// 筛选栏
|
||
.filter-bar {
|
||
background-color: $white;
|
||
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;
|
||
}
|
||
}
|
||
|
||
// 指南网格
|
||
.guidelines-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 0 30rpx;
|
||
gap: 20rpx;
|
||
margin-top: 100rpx; // 为固定搜索栏留出空间 (搜索栏高度约80rpx + 边距)
|
||
|
||
.guideline-item {
|
||
width: calc(33.333% - 14rpx);
|
||
background-color: $white;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||
transition: transform 0.2s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.item-image {
|
||
height: 160rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
|
||
.category-icon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
}
|
||
|
||
.item-content {
|
||
padding: 20rpx 16rpx;
|
||
text-align: center;
|
||
|
||
.category-title {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: $text-primary;
|
||
line-height: 1.4;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.category-count {
|
||
font-size: 22rpx;
|
||
color: $text-light;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 底部导航
|
||
.bottom-tabbar {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 100rpx;
|
||
background-color: $white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
border-top: 1rpx solid #f0f0f0;
|
||
z-index: 100;
|
||
|
||
.tab-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: 1;
|
||
height: 100rpx;
|
||
gap: 8rpx;
|
||
&.active {
|
||
color: #fff;
|
||
background-color: #8B2316;
|
||
}
|
||
.tab-icon {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
}
|
||
|
||
.tab-text {
|
||
font-size: 32rpx;
|
||
color: $text-secondary;
|
||
&.active {
|
||
color: #fff;
|
||
|
||
}
|
||
}
|
||
}
|
||
.tab-item:nth-child(2){
|
||
border-right: 2rpx solid #eee;
|
||
border-left: 2rpx solid #eee;
|
||
}
|
||
}
|
||
|
||
// 为网格添加底部边距，避免被tabbar遮挡
|
||
.guidelines-grid {
|
||
padding-bottom: 140rpx;
|
||
}
|
||
</style>
|