MedSmartApp/pages/category/disease.vue

<template>
  <view class="category-container">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <text class="iconfont icon-search"></text>
        <input 
          v-model="searchKeyword" 
          placeholder="搜索疾病" 
          placeholder-class="search-placeholder" 
          @confirm="searchDisease"
        />
      </view>
    </view>
    
    <!-- 疾病分类标签 -->
    <view class="disease-categories">
      <view 
        class="category-item" 
        v-for="(category, index) in diseaseCategories" 
        :key="index"
        @click="selectCategory(category)"
      >
        {{ category.name }}
      </view>
    </view>
    
    <!-- 疾病列表 -->
    <view class="disease-list">
      <view 
        class="disease-item" 
        v-for="(disease, index) in diseaseList" 
        :key="index"
        @click="viewDiseaseDetail(disease)"
      >
        <view class="disease-info">
          <text class="disease-name">{{ disease.name }}</text>
          <text class="disease-desc">{{ disease.desc }}</text>
        </view>
        <text class="disease-risk" :class="disease.riskClass">{{ disease.risk }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      selectedCategory: null,
      diseaseCategories: [
        { id: 1, name: '内科疾病' },
        { id: 2, name: '外科疾病' },
        { id: 3, name: '儿科疾病' },
        { id: 4, name: '妇产科疾病' },
        { id: 5, name: '皮肤科疾病' },
        { id: 6, name: '五官科疾病' }
      ],
      diseaseList: [
        { id: 1, name: '感冒', desc: '常见呼吸道感染疾病', category: 1, risk: '低危', riskClass: 'low-risk' },
        { id: 2, name: '高血压', desc: '常见心血管疾病', category: 1, risk: '中危', riskClass: 'medium-risk' },
        { id: 3, name: '糖尿病', desc: '代谢性疾病', category: 1, risk: '中危', riskClass: 'medium-risk' },
        { id: 4, name: '胃炎', desc: '胃黏膜炎症', category: 1, risk: '低危', riskClass: 'low-risk' },
        { id: 5, name: '冠心病', desc: '冠状动脉粥样硬化性心脏病', category: 1, risk: '高危', riskClass: 'high-risk' },
        { id: 6, name: '肺炎', desc: '肺部感染性疾病', category: 1, risk: '中危', riskClass: 'medium-risk' },
        { id: 7, name: '胆囊炎', desc: '胆囊炎症', category: 1, risk: '中危', riskClass: 'medium-risk' },
        { id: 8, name: '关节炎', desc: '关节炎症', category: 1, risk: '低危', riskClass: 'low-risk' }
      ]
    }
  },
  computed: {
    filteredDiseases() {
      // 根据搜索关键词和选择的分类筛选疾病
      return this.diseaseList.filter(disease => {
        const matchesSearch = this.searchKeyword ? 
          disease.name.includes(this.searchKeyword) || 
          disease.desc.includes(this.searchKeyword) : true;
        
        const matchesCategory = !this.selectedCategory || 
          disease.category === this.selectedCategory.id;
        
        return matchesSearch && matchesCategory;
      });
    }
  },
  methods: {
    searchDisease() {
      // 搜索疾病
      console.log('搜索疾病:', this.searchKeyword);
      // 实际应用中这里应该调用API进行搜索
    },
    selectCategory(category) {
      // 选择疾病分类
      this.selectedCategory = category;
    },
    viewDiseaseDetail(disease) {
      // 查看疾病详情
      uni.navigateTo({
        url: `/pages/disease/detail?id=${disease.id}`
      });
    }
  }
}
</script>

<style scoped>
.category-container {
  max-width: 800px;
  margin: 0 auto;
  background: #f5f5f5;
  min-height: 100vh;
}

.search-bar {
  padding: 15px;
  background-color: #fff;
}

.search-input {
  background-color: #f5f5f5;
  border-radius: 25px;
  padding: 8px 15px;
  display: flex;
  align-items: center;
}

.search-input .iconfont {
  color: #999;
  margin-right: 8px;
}

.search-placeholder {
  color: #999;
  font-size: 14px;
}

.disease-categories {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 15px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.category-item {
  padding: 8px 15px;
  margin: 5px;
  background-color: #f5f5f5;
  border-radius: 20px;
  font-size: 13px;
  color: #666;
}

.category-item.active {
  background-color: #4CAF50;
  color: #fff;
}

.disease-list {
  padding: 15px;
  background-color: #fff;
}

.disease-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.disease-item:last-child {
  border-bottom: none;
}

.disease-info {
  flex: 1;
}

.disease-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.disease-desc {
  font-size: 13px;
  color: #666;
}

.disease-risk {
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 12px;
  margin-left: 10px;
}

.low-risk {
  background-color: #E8F5E9;
  color: #4CAF50;
}

.medium-risk {
  background-color: #FFF3E0;
  color: #FF9800;
}

.high-risk {
  background-color: #FFEBEE;
  color: #F44336;
}
</style>