feat0806: APP养生科普健康知识功能改造

quling

2026-08-22 87c4b63ce203f0fb34241eda92caeccbaceb7f54

 traditionalApp/pages/publish/publish.vue

@@ -15,9 +15,7 @@
         <view v-if="articleList.length" class="article-list">
            <view class="article-item" v-for="item in articleList" :key="item.id" @tap="goToDetail(item.id)">
               <image class="article-img" :src="item.coverImage || defaultCoverImage" mode="aspectFill"></image>
               <view class="article-shadow">
                  <text class="article-text">{{ item.title }}</text>
               </view>
               <text class="article-title">{{ item.title }}</text>
            </view>
         </view>
         <view v-else-if="loading" class="status-text">加载中...</view>
@@ -28,7 +26,7 @@

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { onPullDownRefresh } from '@dcloudio/uni-app'
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import { getHealthPopularizationList } from './service'

interface PopularizationListItem {
@@ -43,6 +41,18 @@
const loading = ref(false)
const articleList = ref<PopularizationListItem[]>([])
const defaultCoverImage = '/static/image/home/zixun.png'
// 内容类型：1 健康知识，默认按健康知识过滤。
const contentType = ref<number>(1)

/**
 * 读取路由参数中的内容类型，用于按类型过滤列表。
 */
onLoad((options) => {
   const raw = Number(options?.contentType)
   if (!Number.isNaN(raw) && raw > 0) {
      contentType.value = raw
   }
})

/**
 * 页面加载时初始化状态栏高度并拉取健康知识列表。
@@ -87,7 +97,7 @@
async function loadPopularizationList() {
   loading.value = true
   try {
      const response = await getHealthPopularizationList()
      const response = await getHealthPopularizationList(contentType.value)
      if (response?.code !== 0 || !Array.isArray(response.data)) {
         articleList.value = []
         return
@@ -166,43 +176,36 @@

.article-list {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   flex-direction: column;
}

.article-item {
   width: 328rpx;
   height: 328rpx;
   border-radius: 16rpx;
   position: relative;
   overflow: hidden;
   margin-bottom: 24rpx;
}

.article-img {
   width: 100%;
   height: 100%;
}

.article-shadow {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 64rpx;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
   display: flex;
   align-items: center;
   padding: 0 16rpx;
   width: 100%;
   padding: 24rpx 0;
   border-bottom: 1rpx solid #F0F0F0;
   box-sizing: border-box;
}

.article-text {
   color: #FFFFFF;
   font-size: 24rpx;
   white-space: nowrap;
.article-img {
   width: 200rpx;
   height: 150rpx;
   border-radius: 12rpx;
   flex-shrink: 0;
   background-color: #F5F6F8;
}

.article-title {
   flex: 1;
   margin-left: 24rpx;
   font-size: 30rpx;
   line-height: 44rpx;
   color: #333;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
   width: 100%;
}
</style>