406 lines
9.4 KiB
Vue
406 lines
9.4 KiB
Vue
<template>
|
|
<uni-nav-bar
|
|
left-icon="left"
|
|
title="肝胆新闻"
|
|
@clickLeft="goBack"
|
|
fixed
|
|
color="#8B2316"
|
|
height="180rpx"
|
|
:border="false"
|
|
backgroundColor="#eeeeee"
|
|
></uni-nav-bar>
|
|
|
|
<view class="news-page">
|
|
<!-- Fixed Banner Swiper -->
|
|
<view class="banner-container">
|
|
<view class="swipemask">
|
|
<view class="banner-subtitle">{{bannerList[currentBannerIndex].summary}}</view>
|
|
<view class="dotbox">
|
|
<view class="circle" :class="{active:currentBannerIndex==index} "v-for="(banner, index) in bannerList"
|
|
:key="banner.id"></view>
|
|
</view>
|
|
</view>
|
|
<swiper
|
|
class="banner-swiper"
|
|
:indicator-dots="false"
|
|
:autoplay="true"
|
|
:interval="5000"
|
|
:duration="300"
|
|
indicator-color="rgba(255,255,255,0.4)"
|
|
indicator-active-color="#fff"
|
|
circular
|
|
@change="onSwiperChange"
|
|
>
|
|
|
|
<swiper-item
|
|
v-for="(banner, index) in bannerList"
|
|
:key="banner.id"
|
|
@click="playBannerVideo(banner)"
|
|
>
|
|
<view class="banner-item">
|
|
<image
|
|
style="width:100%;"
|
|
class="banner-image"
|
|
:src="docUrl +banner.headImg"
|
|
mode="widthFix"
|
|
></image>
|
|
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
|
|
<scroll-view class="news-list" scroll-y="true">
|
|
<!-- 肝胆新闻 -->
|
|
<view class="news-item" @click="goToNews('news')">
|
|
<view class="news-icon blue">
|
|
<uni-icons type="paperplane" size="24" color="#fff"></uni-icons>
|
|
</view>
|
|
<view class="news-content">
|
|
<view class="news-title">肝胆新闻</view>
|
|
<view class="news-subtitle">新鲜资讯、一触即达</view>
|
|
</view>
|
|
<view class="news-arrow">
|
|
<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 互动圈 -->
|
|
<!-- <view class="news-item" @click="goToNews('interactionCircle')">
|
|
<view class="news-icon purple">
|
|
<uni-icons type="redo" size="24" color="#fff"></uni-icons>
|
|
</view>
|
|
<view class="news-content">
|
|
<view class="news-title">互动圈</view>
|
|
<view class="news-subtitle">技术、资讯、大家齐分享</view>
|
|
</view>
|
|
<view class="news-arrow">
|
|
<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
|
|
</view>
|
|
</view> -->
|
|
|
|
<!-- 科研项目 -->
|
|
<!-- <view class="news-item" @click="goToNews('researchProjects')">
|
|
<view class="news-icon orange">
|
|
<uni-icons type="star" size="24" color="#fff"></uni-icons>
|
|
</view>
|
|
<view class="news-content">
|
|
<view class="news-title">科研项目</view>
|
|
<view class="news-subtitle">项目、基金申报信息集聚地</view>
|
|
</view>
|
|
<view class="news-arrow">
|
|
<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
|
|
</view>
|
|
</view>
|
|
-->
|
|
<!-- 临床招募 -->
|
|
<!-- <view class="news-item" @click="goToNews('clinicalRecruitment')">
|
|
<view class="news-icon green">
|
|
<uni-icons type="personadd" size="24" color="#fff"></uni-icons>
|
|
</view>
|
|
<view class="news-content">
|
|
<view class="news-title">临床招募</view>
|
|
<view class="news-subtitle">最全招募信息,快速招募合格患者</view>
|
|
</view>
|
|
<view class="news-arrow">
|
|
<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
|
|
</view>
|
|
</view> -->
|
|
|
|
<!-- 肝胆会议 -->
|
|
<view class="news-item" @click="goToCourse('hepatoBiliaryConference')">
|
|
<view class="news-icon yellow">
|
|
<uni-icons type="staff" size="24" color="#fff"></uni-icons>
|
|
</view>
|
|
<view class="news-content">
|
|
<view class="news-title">肝胆会议</view>
|
|
<view class="news-subtitle">了解会议信息的最佳入口</view>
|
|
</view>
|
|
<view class="news-arrow">
|
|
<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 肝胆活动 -->
|
|
<!-- <view class="news-item" @click="goToNews('hepatoBiliaryActivities')">
|
|
<view class="news-icon pink">
|
|
<uni-icons type="gift" size="24" color="#fff"></uni-icons>
|
|
</view>
|
|
<view class="news-content">
|
|
<view class="news-title">肝胆活动</view>
|
|
<view class="news-subtitle">福利多多,期待您的参与</view>
|
|
</view>
|
|
<view class="news-arrow">
|
|
<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
|
|
</view>
|
|
</view> -->
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import { onShow } from "@dcloudio/uni-app";
|
|
import api from '@/api/api.js';
|
|
import docUrl from "@/utils/docUrl.js";
|
|
import navTo from '../../utils/navTo';
|
|
|
|
onMounted(() => {
|
|
loadNewsBanner();
|
|
});
|
|
|
|
onShow(() => {
|
|
loadNewsBanner();
|
|
});
|
|
|
|
// 加载新闻轮播数据
|
|
const loadNewsBanner = async () => {
|
|
try {
|
|
console.log(api)
|
|
const res = await api.newsRollNew({});
|
|
console.log('新闻轮播响应:', res);
|
|
|
|
if(res && res.code === 200) {
|
|
bannerList.value = res.data || [];
|
|
console.log('获取到轮播数据:', bannerList.value);
|
|
} else {
|
|
console.error('加载新闻轮播失败:', res.message);
|
|
// 如果接口失败，使用模拟数据作为备选
|
|
bannerList.value = getMockBannerData();
|
|
}
|
|
|
|
} catch (e) {
|
|
console.error('加载新闻轮播异常:', e);
|
|
// 如果接口异常，使用模拟数据作为备选
|
|
bannerList.value = getMockBannerData();
|
|
}
|
|
};
|
|
// Banner相关数据
|
|
const bannerList = ref([]);
|
|
const currentBannerIndex = ref(0);
|
|
// 返回
|
|
const goBack = () => {
|
|
uni.navigateBack({
|
|
fail() {
|
|
uni.redirectTo({
|
|
url: '/pages/index/index'
|
|
});
|
|
}
|
|
});
|
|
};
|
|
// Banner相关方法
|
|
const getMockBannerData = () => {
|
|
return [
|
|
{
|
|
id: 'banner_1',
|
|
title: 'IgG4相关性疾病的腹部影像表现',
|
|
subtitle: '肝胆精品课 | 宋文艳教授',
|
|
thumbnail: '/static/big_background_my.png',
|
|
doctorAvatar: '/static/doctor-avatar-1.png'
|
|
},
|
|
{
|
|
id: 'banner_2',
|
|
title: '《2025年版慢加急性肝衰竭指南》解读',
|
|
subtitle: '肝胆精品课 | 专家团队',
|
|
thumbnail: '/static/big_background_my.png',
|
|
doctorAvatar: '/static/doctor-avatar-2.png'
|
|
},
|
|
{
|
|
id: 'banner_3',
|
|
title: '自身免疫性肝病专栏｜免疫治疗的双刃剑',
|
|
subtitle: '肝胆精品课 | 专业团队',
|
|
thumbnail: '/static/big_background_my.png',
|
|
doctorAvatar: '/static/doctor-avatar-3.png'
|
|
}
|
|
];
|
|
};
|
|
|
|
const onSwiperChange = (e) => {
|
|
currentBannerIndex.value = e.detail.current;
|
|
};
|
|
|
|
const playBannerVideo = (banner) => {
|
|
uni.navigateTo({
|
|
url: `/pages/videoDetail/videoDetail?id=${banner.id}`
|
|
});
|
|
};
|
|
|
|
// 新闻相关方法
|
|
const goToNews = (type) => {
|
|
if(type=="news"){
|
|
navTo({
|
|
url:'/pages_app/newsList/newsList'
|
|
})
|
|
}
|
|
};
|
|
|
|
const goToCourse = (type) => {
|
|
navTo({
|
|
url:'/pages/live/live'
|
|
})
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
// 颜色变量
|
|
$primary-color: #ff6b6b;
|
|
$theme-color: #8B2316;
|
|
$white: #fff;
|
|
$gray-bg: #f5f5f5;
|
|
$gray-light: #eee;
|
|
$gray-medium: #999;
|
|
$gray-dark: #666;
|
|
$text-color: #333;
|
|
|
|
// 课程图标颜色
|
|
$green-color: #00D4AA;
|
|
$yellow-color: #FFB800;
|
|
$orange-color: #FF8C00;
|
|
$green-chat-color: #52C41A;
|
|
$purple-color: #B37FEB;
|
|
$blue-color: #40A9FF;
|
|
$orange-tutorial-color: #FF7A45;
|
|
|
|
// 尺寸变量
|
|
$border-radius: 8px;
|
|
$border-radius-small: 6px;
|
|
$padding: 15px;
|
|
$padding-small: 10px;
|
|
.news-page{
|
|
/* Fixed Banner Container */
|
|
.banner-container {
|
|
position: fixed;
|
|
top: 180rpx; /* uni-nav-bar height */
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 50;
|
|
background-color: #fff;
|
|
.swipemask{
|
|
width:100%;
|
|
z-index:3;
|
|
box-sizing:border-box;
|
|
position: absolute;
|
|
bottom:0;
|
|
padding:0 20rpx;
|
|
height: 80rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background-color: rgba(0,0,0,0.7);
|
|
.banner-subtitle {
|
|
font-size: 24rpx;
|
|
color: rgba(255,255,255,0.8);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 60%;
|
|
}
|
|
|
|
.dotbox{
|
|
display:flex;
|
|
align-items: center;
|
|
|
|
.circle{
|
|
margin:0 4rpx;
|
|
width:16rpx;
|
|
height:16rpx;
|
|
background-color: #eee;
|
|
border-radius: 50%;
|
|
}
|
|
.circle.active{
|
|
background-color: #8B2316;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 新闻列表
|
|
.news-list {
|
|
position: fixed;
|
|
width: 100%;
|
|
bottom: 30rpx;
|
|
box-sizing: border-box;
|
|
padding: 0 30rpx;
|
|
top: 450rpx;
|
|
|
|
.news-item {
|
|
background-color: $white;
|
|
border-radius: $border-radius;
|
|
margin-bottom: 20rpx;
|
|
padding: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
|
.news-icon {
|
|
width: 94rpx;
|
|
height: 94rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 30rpx;
|
|
|
|
&.blue {
|
|
background-color: $blue-color;
|
|
}
|
|
|
|
&.purple {
|
|
background-color: $purple-color;
|
|
}
|
|
|
|
&.orange {
|
|
background-color: $orange-color;
|
|
}
|
|
|
|
&.green {
|
|
background-color: $green-color;
|
|
}
|
|
|
|
&.yellow {
|
|
background-color: $yellow-color;
|
|
}
|
|
|
|
&.pink {
|
|
background-color: $primary-color;
|
|
}
|
|
}
|
|
|
|
.news-content {
|
|
flex: 1;
|
|
margin-left: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8rpx;
|
|
|
|
.news-title {
|
|
font-size: 32rpx;
|
|
color: $text-color;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.news-subtitle {
|
|
font-size: 26rpx;
|
|
color: $gray-medium;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
|
|
.news-arrow {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
// 点击效果
|
|
&:active {
|
|
opacity: 0.8;
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
}
|
|
</style>
|