MedSmartApp/pages/home/index.vue

<template>
  <view class="home-container">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <text class="iconfont icon-search"></text>
        <input placeholder="搜索症状、疾病或药品" placeholder-class="search-placeholder" />
      </view>
    </view>
    
	<!-- 健康分类 -->
	<view class="health-categories">
	  <view class="category-item" @click="navigateToCategory('symptom')">
		<view class="category-icon bg-blue">
		  <text class="iconfont icon-zhengzhuangzicha"></text>
		</view>
		<text class="category-text">症状自查</text>
	  </view>
	  <view class="category-item" @click="navigateToCategory('disease')">
		<view class="category-icon bg-green">
		  <text class="iconfont icon-jibingbaike"></text>
		</view>
		<text class="category-text">疾病百科</text>
	  </view>
	  <view class="category-item" @click="navigateToCategory('medicine')">
		<view class="category-icon bg-orange">
		  <text class="iconfont icon-yaopinchaxun"></text>
		</view>
		<text class="category-text">药品查询</text>
	  </view>
	</view>
    
    <!-- AI问诊卡片 -->
    <view class="ai-consult-card">
      <view class="card-content">
        <view class="card-left">
          <text class="card-title">AI智能问诊</text>
          <text class="card-desc">24小时在线，随时解答您的健康问题</text>
          <button class="card-button" @click="startConsultation">立即问诊</button>
        </view>
        <view class="card-right">
          <image src="https://picsum.photos/seed/ai-med/200/200" mode="widthFix" class="card-image" />
        </view>
      </view>
    </view>
    
	<!-- 热门健康话题 -->
	<view class="health-topics">
	  <view class="section-header" @click="goToBaidu('topic')">
		<text class="section-title">热门健康话题</text>
		<text class="section-more">更多</text>
	  </view>
	  <!-- 或给每个话题项添加点击事件 -->
	  <view class="topics-list">
		<view class="topic-item" v-for="(topic, index) in hotTopics" :key="index" @click="goToBaidu('topic', topic)">
		  <image :src="topic.image" mode="widthFix" class="topic-image" />
		  <text class="topic-title">{{ topic.title }}</text>
		  <text class="topic-info">{{ topic.info }}</text>
		</view>
	  </view>
	</view>
    
	<!-- 健康资讯 -->
	<view class="health-news">
	  <view class="section-header" @click="goToBaidu('news')">
		<text class="section-title">健康资讯</text>
		<text class="section-more">更多</text>
	  </view>
	  <view class="news-list">
		<view class="news-item" v-for="(news, index) in healthNews" :key="index" @click="goToBaidu('news', news)">
		  <view class="news-left">
			<text class="news-title">{{ news.title }}</text>
			<text class="news-desc">{{ news.desc }}</text>
			<text class="news-time">{{ news.time }}</text>
		  </view>
		  <image :src="news.image" mode="heightFix" class="news-image" />
		</view>
	  </view>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 当前选中的标签页
      currentTab: 'home',
      // 热门健康话题数据
      hotTopics: [
        {
          image: "https://picsum.photos/seed/topic1/300/200",
          title: "新冠疫情防护指南",
          info: "专家解读最新防护措施"
        },
        {
          image: "https://picsum.photos/seed/topic2/300/200",
          title: "高血压日常管理",
          info: "科学控制血压的方法"
        },
        {
          image: "https://picsum.photos/seed/topic3/300/200",
          title: "儿童常见疾病预防",
          info: "家长必知的健康知识"
        }
      ],
      
      // 健康资讯数据
      healthNews: [
        {
          image: "https://picsum.photos/seed/news1/100/100",
          title: "新研究发现：每天步行8000步可降低心血管疾病风险",
          desc: "最新医学研究表明，适量运动对心脏健康至关重要...",
          time: "2小时前"
        },
        {
          image: "https://picsum.photos/seed/news2/100/100",
          title: "季节性过敏高发期，这些预防措施要牢记",
          desc: "随着气温升高，花粉过敏人群需注意防护...",
          time: "昨天"
        },
        {
          image: "https://picsum.photos/seed/news3/100/100",
          title: "世界卫生组织发布最新健康饮食指南",
          desc: "平衡膳食对维持身体健康至关重要...",
          time: "3天前"
        }
      ]
    }
  },
 methods: {
	// 导航到分类页面
	navigateToCategory(type) {
	  uni.navigateTo({
		url: `/pages/category/${type}`
	  })
	},
	
	startConsultation() {
	  uni.navigateTo({
		url: '/pages/chat/index'
	  })
	},
 
   // 跳转到百度页面
   // 在 methods 中添加
   goToBaidu(type, item) {
     // 构建百度搜索URL
     let baseUrl = 'https://www.baidu.com/s?wd=';
     let keyword = '';
   
     // 根据类型生成搜索关键词
     if (type === 'topic') {
       keyword = item ? item.title : '热门健康话题';
     } else if (type === 'news') {
       keyword = item ? item.title : '健康资讯';
     }
   
     // 完整URL
     const url = encodeURIComponent(baseUrl + keyword);
     
     // 使用 uni.navigateTo 跳转到内置web-view页面
     uni.navigateTo({
       url: `/pages/web-view/index?url=${url}`
     });
   },
 
   // 切换标签页
   changeTab(tab) {
     this.currentTab = tab;
   }
 }
}
</script>

<style scoped>
	@import '@/static/font/iconfont.css';
/* 全局变量 */
:root {
  --primary: #4CAF50;
  --primary-light: #E8F5E9;
  --secondary: #2196F3;
  --bg: #f5f5f5;
  --tabbar-height: 50px;
  --header-height: 80px;
}

/* 首页容器 */
.home-container {
  max-width: 800px;
  margin: 0 auto;
  background: var(--bg);
  min-height: 100vh;
  padding-bottom: calc(var(--tabbar-height) + 20px);
}

/* 搜索栏 */
.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;
}

/* 健康分类 */
.health-categories {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  background-color: #fff;
  margin-top: 10px;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.category-icon {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}

.category-icon .iconfont {
  color: #fff;
  font-size: 24px;
}

.category-text {
  font-size: 13px;
  color: #666;
}

.bg-blue { background-color: #42A5F5; }
.bg-green { background-color: #66BB6A; }
.bg-orange { background-color: #FFA726; }
.bg-purple { background-color: #AB47BC; }

/* AI问诊卡片 */
.ai-consult-card {
  margin: 15px;
  background-color: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.card-content {
  display: flex;
  padding: 20px;
}

.card-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.card-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.card-button {
  width: 120px;
  background-color: var(--primary);
  color: #fff;
  border-radius: 20px;
  padding: 8px 15px;
  text-align: center;
  font-size: 14px;
}

.card-right {
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

/* 热门健康话题 */
.health-topics {
  margin: 15px;
  background-color: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

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

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.section-more {
  font-size: 13px;
  color: #999;
}

.topics-list {
  display: flex;
  padding: 15px 0;
  overflow-x: auto;
  white-space: nowrap;
}

.topic-item {
  display: inline-block;
  width: 120px;
  margin-left: 15px;
}

.topic-image {
  width: 120px;
  height: 80px;
  border-radius: 10px;
  margin-bottom: 8px;
}

.topic-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  display: block;
  white-space: normal;
}

.topic-info {
  font-size: 12px;
  color: #666;
  display: block;
  white-space: normal;
  margin-top: 4px;
}

/* 健康资讯 */
.health-news {
  margin: 15px;
  background-color: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.news-list {
  padding: 15px;
}

.news-item {
  display: flex;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.news-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.news-left {
  flex: 1;
  margin-right: 15px;
}

.news-title {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.news-desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-time {
  font-size: 12px;
  color: #999;
}

.news-image {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  flex-shrink: 0;
}
</style>