cfc/cfc-frontend/pages/health/gut-index.vue

<template>
  <view class="page">
    <view class="nav-bar">
      <view class="nav-back" @tap="goBack">
        <text class="back-text">‹ 返回</text>
      </view>
      <text class="nav-title">菌群</text>
    </view>

    <scroll-view class="content" scroll-y v-if="hasFamily">
      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">认识肠道菌群</text>
          <text class="card-desc">肠道菌群是生活在人体肠道内的微生物群落，被称为人体的"第二基因组"。它们对健康起着至关重要的作用：</text>
          <view class="info-list">
            <view class="info-item">
              <text class="info-age">帮助消化吸收</text>
              <text class="info-desc">分解食物中的纤维素，合成维生素 K 和 B 族维生素，促进营养吸收。</text>
            </view>
            <view class="info-item">
              <text class="info-age">增强免疫力</text>
              <text class="info-desc">调节免疫系统功能，抵抗有害菌入侵，减少过敏和感染风险。</text>
            </view>
            <view class="info-item">
              <text class="info-age">影响情绪和认知</text>
              <text class="info-desc">通过"肠脑轴"影响神经递质产生，对情绪、压力和睡眠有重要作用。</text>
            </view>
          </view>
        </view>
      </view>

      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">有益菌食物</text>
          <view class="info-list">
            <view class="info-item">
              <text class="info-age">🥛 发酵乳制品</text>
              <text class="info-desc">酸奶、开菲尔、发酵乳富含益生菌，直接补充肠道有益菌群。</text>
            </view>
            <view class="info-item">
              <text class="info-age">🥒 发酵蔬菜</text>
              <text class="info-desc">泡菜、酸菜、纳豆等发酵食品含有丰富益生菌和酶，促进肠道健康。</text>
            </view>
            <view class="info-item">
              <text class="info-age">🌿 高纤维食物</text>
              <text class="info-desc">燕麦、香蕉、洋葱、大蒜、芦笋等富含益生元，为有益菌提供养料。</text>
            </view>
            <view class="info-item">
              <text class="info-age">🍎 多酚类食物</text>
              <text class="info-desc">蓝莓、可可、绿茶、核桃富含多酚，促进有益菌生长，抑制有害菌。</text>
            </view>
          </view>
        </view>
      </view>

      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">维护肠道健康</text>
          <view class="info-list">
            <view class="info-item">
              <text class="info-age">均衡饮食</text>
              <text class="info-desc">多样化饮食，多吃蔬菜水果和全谷物，为肠道菌群提供丰富的营养来源。</text>
            </view>
            <view class="info-item">
              <text class="info-age">充足水分</text>
              <text class="info-desc">每天饮用足够的水，促进肠道蠕动，帮助消化和排便。</text>
            </view>
            <view class="info-item">
              <text class="info-age">规律运动</text>
              <text class="info-desc">适度运动促进肠道蠕动，增加肠道菌群多样性，改善肠道环境。</text>
            </view>
            <view class="info-item">
              <text class="info-age">合理使用抗生素</text>
              <text class="info-desc">抗生素会破坏肠道菌群平衡，遵医嘱使用，必要时补充益生菌。</text>
            </view>
          </view>
        </view>
      </view>

      <view class="action-section">
        <view class="action-btn" @tap="goToReportUpload">
          <text class="action-btn-text">上传检测报告</text>
        </view>
        <view class="action-btn-secondary" @tap="goToMyReport">
          <text class="action-btn-secondary-text">查看我的菌群报告</text>
        </view>
      </view>
    </scroll-view>

    <view v-else>
      <FamilyEmptyState type="card" />
    </view>
  </view>
</template>

<script>
import { getLatestHealthReport } from '../../utils/api.js'
import config from '@/config.js'

var healthRequest = function(url, data) {
  var token = uni.getStorageSync('token')
  return new Promise(function(resolve, reject) {
    uni.request({
      url: config.API_BASE_URL + url,
      method: 'POST',
      data: data,
      header: {
        'Content-Type': 'application/json',
        'Authorization': token ? 'Bearer ' + token : ''
      },
      success: function(res) {
        if (res.data.code === 200) {
          resolve(res.data)
        } else {
          reject(res.data)
        }
      },
      fail: function(err) {
        reject(err)
      }
    })
  })
}

export default {
  data() {
    return {}
  },
  computed: {
    hasFamily: function() {
      return this.$store.getters.hasFamily
    }
  },
  methods: {
    goBack: function() {
      uni.navigateBack()
    },
    goToReportUpload: function() {
      uni.navigateTo({
        url: '/pages/health/report-upload'
      })
    },
    goToMyReport: function() {
      var self = this
      var memberId = uni.getStorageSync('currentChildId')
      if (!memberId) {
        var userId = uni.getStorageSync('userId')
        memberId = userId
      }
      if (!memberId) {
        uni.showToast({ title: '未找到孩子信息', icon: 'none' })
        return
      }
      healthRequest('/api/health/report/latest', { memberId: memberId }).then(function(res) {
        if (res.data && res.data.id) {
          uni.navigateTo({
            url: '/pages/health/gut-flora-detail?reportId=' + res.data.id
          })
        } else {
          uni.showToast({ title: '暂无菌群报告', icon: 'none' })
        }
      }).catch(function(e) {
        console.log('获取报告失败', e)
        uni.showToast({ title: '获取报告失败', icon: 'none' })
      })
    }
  }
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background-color: #F5F7FA;
  display: flex;
  flex-direction: column;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88rpx;
  padding-top: var(--status-bar-height, 0);
  background-color: #FFFFFF;
  position: relative;
  border-bottom: 1rpx solid #f0f0f0;
}

.nav-back {
  position: absolute;
  left: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  padding: 10rpx;
}

.back-text {
  font-size: 28rpx;
  color: #333;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.content {
  flex: 1;
  padding: 30rpx;
}

.card {
  display: flex;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.card-accent {
  width: 8rpx;
  background-color: #FF8C42;
  flex-shrink: 0;
}

.card-body {
  flex: 1;
  padding: 30rpx;
}

.card-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
  display: block;
}

.card-desc {
  font-size: 24rpx;
  color: #666;
  line-height: 1.6;
  display: block;
  margin-bottom: 20rpx;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.info-age {
  font-size: 26rpx;
  font-weight: 500;
  color: #FF8C42;
  display: block;
}

.info-desc {
  font-size: 24rpx;
  color: #666;
  line-height: 1.6;
  display: block;
}

.action-section {
  display: flex;
  justify-content: center;
  padding: 20rpx 0 40rpx;
}

.action-btn {
  background-color: #FF8C42;
  border-radius: 40rpx;
  padding: 24rpx 80rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 140, 66, 0.3);
}

.action-btn-secondary {
  background-color: #fff;
  border-radius: 40rpx;
  padding: 24rpx 80rpx;
  margin-top: 20rpx;
  border: 2rpx solid #FF8C42;
}

.action-btn-secondary-text {
  font-size: 28rpx;
  color: #FF8C42;
  font-weight: 500;
}

.action-btn-text {
  font-size: 28rpx;
  color: #FFFFFF;
  font-weight: 500;
}
</style>