cfc/cfc-frontend/components/HealthTips.vue

<template>
  <view class="section" v-if="tips.length > 0">
    <view class="section-header">
      <text class="section-title">💡 健康小贴士</text>
      <text class="section-more" @click="goMore">更多 ›</text>
    </view>
    <view class="tip-list">
      <view class="tip-item" v-for="tip in tips" :key="tip.id" @click="goDetail(tip)">
        <text class="tip-icon">📋</text>
        <view class="tip-content">
          <text class="tip-title">{{ tip.title }}</text>
          <text class="tip-summary">{{ tip.summary }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import config from '@/config.js'

export default {
  props: {
    dimension: { type: String, default: 'body' },
    limit: { type: Number, default: 4 }
  },
  data: function() {
    return { tips: [] }
  },
  created: function() {
    this.loadTips()
  },
  methods: {
    loadTips: function() {
      var self = this
      var token = uni.getStorageSync('token')
      uni.request({
        url: config.API_BASE_URL + '/api/articles/list',
        method: 'POST',
        data: {
          dimension: this.dimension,
          page: 1,
          size: this.limit
        },
        header: {
          'Content-Type': 'application/json',
          'Authorization': token ? 'Bearer ' + token : ''
        },
        success: function(res) {
          if (res.data && res.data.code === 200 && res.data.data && res.data.data.records) {
            var list = res.data.data.records
            self.tips = list.slice(0, self.limit)
          }
        },
        fail: function() {}
      })
    },
    goDetail: function(tip) {
      uni.navigateTo({ url: '/pages/mind/article-detail?id=' + tip.id })
    },
    goMore: function() {
      uni.navigateTo({ url: '/pages/mind-extra/articles?dimension=' + this.dimension })
    }
  }
}
</script>

<style scoped>
.section { margin: 20rpx 30rpx; }
.section-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}
.section-title { font-size: 30rpx; font-weight: bold; color: #333; }
.section-more { font-size: 24rpx; color: #999; }
.tip-list {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.tip-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 24rpx 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}
.tip-item:last-child { border-bottom: none; }
.tip-item:active { background: #fafafa; }
.tip-icon { font-size: 36rpx; margin-right: 16rpx; flex-shrink: 0; }
.tip-content { flex: 1; }
.tip-title { font-size: 28rpx; color: #333; font-weight: 500; display: block; }
.tip-summary { font-size: 24rpx; color: #999; margin-top: 4rpx; display: block; }
</style>