<template>
|
<view class="news-list">
|
<!-- 分类标签 -->
|
<scroll-view
|
scroll-x
|
class="category-bar"
|
:show-scrollbar="false"
|
>
|
<view
|
class="category-item"
|
v-for="(item, index) in categories"
|
:key="index"
|
:class="{ active: currentCategory === item.value }"
|
@tap="selectCategory(item.value)"
|
>
|
<text>{{ item.name }}</text>
|
</view>
|
</scroll-view>
|
|
<!-- 资讯列表 -->
|
<scroll-view
|
scroll-y
|
class="news-scroll"
|
refresher-enabled
|
:refresher-triggered="refreshing"
|
@refresherrefresh="onRefresh"
|
@scrolltolower="loadMore"
|
>
|
<view class="news-wrapper">
|
<view
|
class="news-item"
|
v-for="(item, index) in newsList"
|
:key="index"
|
@tap="viewNews(item)"
|
>
|
<!-- 大图模式 -->
|
<template v-if="item.type === 'large'">
|
<image :src="item.image" mode="aspectFill" class="large-image" />
|
<view class="content">
|
<text class="title">{{ item.title }}</text>
|
<view class="meta">
|
<text class="tag" v-if="item.tag">{{ item.tag }}</text>
|
<text class="time">{{ item.time }}</text>
|
<text class="views">{{ item.views }}阅读</text>
|
</view>
|
</view>
|
</template>
|
|
<!-- 小图模式 -->
|
<template v-else>
|
<view class="content">
|
<text class="title">{{ item.title }}</text>
|
<text class="desc">{{ item.description }}</text>
|
<view class="meta">
|
<text class="tag" v-if="item.tag">{{ item.tag }}</text>
|
<text class="time">{{ item.time }}</text>
|
<text class="views">{{ item.views }}阅读</text>
|
</view>
|
</view>
|
<image :src="item.image" mode="aspectFill" class="small-image" />
|
</template>
|
</view>
|
</view>
|
|
<!-- 加载更多 -->
|
<uni-load-more
|
:status="loadMoreStatus"
|
:content-text="{
|
contentdown: '上拉加载更多',
|
contentrefresh: '加载中...',
|
contentnomore: '没有更多了'
|
}"
|
/>
|
</scroll-view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
|
// 分类列表
|
const categories = [
|
{ value: 'all', name: '全部' },
|
{ value: 'notice', name: '通知公告' },
|
{ value: 'health', name: '健康科普' },
|
{ value: 'service', name: '就医服务' },
|
{ value: 'special', name: '专科介绍' },
|
{ value: 'expert', name: '专家风采' }
|
]
|
|
// 当前分类
|
const currentCategory = ref('all')
|
|
// 资讯列表
|
const newsList = ref([
|
{
|
id: 1,
|
type: 'large',
|
title: '青岛镜湖医院引进最新达芬奇手术机器人，提升微创手术水平',
|
image: '/static/news/news1.jpg',
|
tag: '医院动态',
|
time: '2024-03-25',
|
views: 1580
|
},
|
{
|
id: 2,
|
title: '春季养生指南：中医专家教你调理身体',
|
description: '春季养生重在养肝，专家建议从饮食、运动等多方面入手，助您轻松养生。',
|
image: '/static/news/news2.jpg',
|
tag: '健康科普',
|
time: '2024-03-24',
|
views: 2360
|
},
|
{
|
id: 3,
|
type: 'large',
|
title: '医院举办"世界睡眠日"主题义诊活动',
|
image: '/static/news/news3.jpg',
|
tag: '活动资讯',
|
time: '2024-03-23',
|
views: 986
|
}
|
])
|
|
// 加载状态
|
const refreshing = ref(false)
|
const loadMoreStatus = ref('more')
|
|
// 选择分类
|
const selectCategory = (category) => {
|
currentCategory.value = category
|
refreshing.value = true
|
// 这里调用加载数据API
|
setTimeout(() => {
|
refreshing.value = false
|
}, 1000)
|
}
|
|
// 下拉刷新
|
const onRefresh = () => {
|
// 这里调用刷新API
|
setTimeout(() => {
|
refreshing.value = false
|
}, 1000)
|
}
|
|
// 加载更多
|
const loadMore = () => {
|
if (loadMoreStatus.value !== 'more') return
|
loadMoreStatus.value = 'loading'
|
|
// 这里调用加载更多API
|
setTimeout(() => {
|
loadMoreStatus.value = 'noMore'
|
}, 1000)
|
}
|
|
// 查看资讯详情
|
const viewNews = (news) => {
|
uni.navigateTo({
|
url: `/pages/news/detail?id=${news.id}`
|
})
|
}
|
</script>
|
|
<style lang="scss">
|
.news-list {
|
min-height: 100vh;
|
background: $bg-color;
|
|
.category-bar {
|
background: #fff;
|
white-space: nowrap;
|
padding: 20rpx;
|
margin-bottom: 20rpx;
|
box-shadow: $shadow-sm;
|
|
.category-item {
|
display: inline-block;
|
padding: 12rpx 30rpx;
|
margin-right: 20rpx;
|
font-size: 28rpx;
|
color: $text-regular;
|
background: $bg-color;
|
border-radius: $radius-lg;
|
|
&.active {
|
color: #fff;
|
background: $primary-gradient;
|
}
|
|
&:last-child {
|
margin-right: 0;
|
}
|
}
|
}
|
|
.news-scroll {
|
height: calc(100vh - 112rpx);
|
}
|
|
.news-wrapper {
|
padding: 20rpx;
|
}
|
|
.news-item {
|
background: #fff;
|
border-radius: $radius-lg;
|
margin-bottom: 20rpx;
|
overflow: hidden;
|
|
.large-image {
|
width: 100%;
|
height: 360rpx;
|
}
|
|
.small-image {
|
width: 200rpx;
|
height: 160rpx;
|
border-radius: $radius-lg;
|
flex-shrink: 0;
|
}
|
|
.content {
|
padding: 20rpx;
|
|
.title {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 12rpx;
|
display: block;
|
}
|
|
.desc {
|
font-size: 28rpx;
|
color: $text-regular;
|
margin-bottom: 16rpx;
|
display: block;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
overflow: hidden;
|
}
|
|
.meta {
|
display: flex;
|
align-items: center;
|
font-size: 24rpx;
|
color: $text-secondary;
|
|
.tag {
|
color: $primary-color;
|
background: $primary-light;
|
padding: 4rpx 12rpx;
|
border-radius: $radius-sm;
|
margin-right: 16rpx;
|
}
|
|
.time {
|
margin-right: 16rpx;
|
}
|
}
|
}
|
|
&:not(:has(.large-image)) {
|
display: flex;
|
padding: 20rpx;
|
|
.content {
|
flex: 1;
|
padding: 0;
|
margin-right: 20rpx;
|
}
|
}
|
|
&:active {
|
transform: scale(0.99);
|
}
|
}
|
}
|
</style>
|
