MedSmartApp/pages/category/symptom.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="handleSearch"
        />
      </view>
    </view>
    
    <!-- 症状分类标签 -->
    <view class="category-tabs">
      <view 
        class="tab-item" 
        :class="{ 'active': activeTab === tab.value }" 
        @click="changeTab(tab)" 
        v-for="tab in tabs" 
        :key="tab.key"
      >
        {{ tab.label }}
      </view>
    </view>
    
    <!-- 症状列表 -->
    <view class="symptom-list" v-if="symptomList.length > 0">
      <view 
        class="symptom-item" 
        v-for="(symptom, index) in filteredSymptoms" 
        :key="symptom.id"
        @click="viewSymptomDetail(symptom.id)"
      >
        <view class="symptom-content">
          <text class="symptom-name">{{ symptom.name }}</text>
          <text class="symptom-desc">{{ symptom.description }}</text>
        </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
    <view v-else class="no-data">
      <image src="/static/images/no-data.png" mode="aspectFit"></image>
      <text>暂无相关症状数据</text>
    </view>
    
    <!-- 加载状态 -->
    <view class="loading-state" v-if="isLoading">
      <text class="iconfont icon-loading"></text>
      <text>加载中...</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      activeTab: 'common', // 默认分类
      symptomList: [], // 症状列表
      tabs: [ // 分类标签配置
        { key: 'common', label: '常见症状', value: 'common' },
        { key: 'body', label: '部位分类', value: 'body' },
        { key: 'disease', label: '疾病相关', value: 'disease' }
      ],
      isLoading: false, // 加载状态
      errorMsg: '' // 错误信息
    };
  },
  computed: {
    filteredSymptoms() {
      // 根据搜索词和分类过滤数据
      return this.symptomList.filter(symptom => {
        const matchSearch = symptom.name.includes(this.searchKeyword) || 
                          symptom.description.includes(this.searchKeyword);
        const matchCategory = this.activeTab === 'all' || 
                            symptom.category === this.activeTab;
        return matchSearch && matchCategory;
      });
    }
  },
  methods: {
    // 切换分类标签
    changeTab(tab) {
      if (this.activeTab === tab.value) return;
      this.activeTab = tab.value;
      this.fetchSymptoms(); // 切换分类时重新获取数据
    },

    // 搜索症状
    handleSearch() {
      this.fetchSymptoms();
    },

    // 使用 uni.request 获取症状数据
    fetchSymptoms() {
      this.isLoading = true;
      this.errorMsg = '';
      
      uni.request({
        url: 'http://localhost:8080/symptoms/findAll',
        method: 'POST',
        data: {
          category: this.activeTab,
          keyword: this.searchKeyword
        },
        success: (res) => {
          if (res.statusCode === 200) {
            this.symptomList = res.data.data || [];
          } else {
            this.errorMsg = '数据获取失败';
            uni.showToast({
              title: '数据获取失败',
              icon: 'none',
              duration: 2000
            });
          }
        },
        fail: (err) => {
          console.error('请求失败:', err);
          this.errorMsg = '网络请求失败，请检查网络';
          uni.showToast({
            title: '网络请求失败',
            icon: 'none',
            duration: 2000
          });
        },
        complete: () => {
          this.isLoading = false;
        }
      });
    },

    // 跳转详情页
    viewSymptomDetail(id) {
      uni.request({
        url: 'http://localhost:8080/symptoms/selectById/${id}',
		method: 'GET',
		data: {
		  id: id
		}
      });
    }
  },
  // 页面加载时初始化数据
  onLoad() {
    this.fetchSymptoms();
  },
  // 页面显示时重新获取数据
  onShow() {
    // 如果需要每次显示都刷新数据，可以取消下面的注释
    // this.fetchSymptoms();
  }
};
</script>

<style lang="scss" scoped>
/* 基础样式 */
page {
  background-color: #f5f7fa;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}

.category-container {
  padding-bottom: 100rpx;
}

/* 搜索栏 */
.search-bar {
  padding: 30rpx 40rpx;
  background-color: #fff;
  
  .search-input {
    display: flex;
    align-items: center;
    height: 80rpx;
    background-color: #f5f5f5;
    border-radius: 40rpx;
    padding: 0 30rpx;
    
    .icon-search {
      color: #999;
      font-size: 32rpx;
    }
    
    input {
      flex: 1;
      margin-left: 20rpx;
      font-size: 28rpx;
      color: #333;
    }
    
    .search-placeholder {
      color: #999;
    }
  }
}

/* 分类标签 */
.category-tabs {
  display: flex;
  background-color: #fff;
  padding: 0 40rpx;
  border-bottom: 2rpx solid #f5f5f5;
  
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 30rpx 0;
    font-size: 30rpx;
    color: #666;
    position: relative;
    
    &.active {
      color: #4a90e2;
      font-weight: bold;
    }
    
    &.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 40rpx;
      height: 6rpx;
      background-color: #4a90e2;
      border-radius: 3rpx;
    }
  }
}

/* 症状列表 */
.symptom-list {
  background-color: #fff;
  
  .symptom-item {
    display: flex;
    align-items: center;
    padding: 30rpx 40rpx;
    border-bottom: 2rpx solid #f5f5f5;
    
    .symptom-content {
      flex: 1;
      
      .symptom-name {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      
      .symptom-desc {
        font-size: 26rpx;
        color: #666;
        margin-top: 10rpx;
        line-height: 1.5;
        max-height: 78rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
    
    .icon-arrow-right {
      color: #999;
      font-size: 32rpx;
    }
  }
}

/* 无数据状态 */
.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  image {
    width: 200rpx;
    height: 200rpx;
    opacity: 0.5;
  }
  
  text {
    margin-top: 40rpx;
    font-size: 28rpx;
    color: #999;
  }
}

/* 加载状态 */
.loading-state {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 40rpx 60rpx;
  border-radius: 20rpx;
  z-index: 1000;
  
  .icon-loading {
    color: #fff;
    font-size: 60rpx;
    animation: rotate 1.5s linear infinite;
  }
  
  text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #fff;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 图标样式 */
@font-face {
  font-family: 'iconfont';
  src: url('https://at.alicdn.com/t/font_1797472_r754c57n48d.ttf') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-search:before {
  content: "\e60d";
}

.icon-arrow-right:before {
  content: "\e60c";
}

.icon-loading:before {
  content: "\e60e";
}
</style>