gdxz/uniapp-app
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

8.29

Browse Source
This commit is contained in:
zoujiandong
2025-08-29 09:46:07 +08:00
parent cc0ddd0bc9
commit da6e4ae551
10 changed files with 1121 additions and 624 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/index/index.vue
+381 -245
View File
@@ -4,9 +4,8 @@
<view class="header" :style="{ backgroundColor: headerBgColor }">
<view class="header-content">
<view class="header-left">
<view class="calendar-icon">
<up-image :src="nosign" width="60rpx" height="60rpx" ></up-image>
<view class="calendar-icon" @click="onSignClick">
<up-image :src="isSignedIn ? sign : nosign" width="60rpx" height="60rpx"></up-image>
</view>
</view>
<view class="search-container" @click="focus">
@@ -22,7 +21,7 @@
<view class="header-right">
<view class="message-icon">
<uni-icons type="email" size="32" color="#fff"></uni-icons>
<view class="red-dot"></view>
<view v-if="hasUnread" class="red-dot"></view>
</view>
</view>
</view>
@@ -38,28 +37,14 @@
:mode="mode"
:dots-styles="dotsStyles"
>
<swiper class="swiper-box" @change="change" :current="current">
<swiper class="swiper-box" @change="change" :current="current" :autoplay="true" :interval="4000" :duration="500" :circular="true">
<swiper-item v-for="(item, index) in bannerList" :key="index">
<view class="banner-item" :style="{ background: item.background }">
<view class="banner-content">
<view class="banner-text">
<text class="banner-title">{{ item.title }}</text>
<text class="banner-subtitle">{{ item.subtitle }}</text>
</view>
<view class="banner-scene">
<view class="scene-left">
<view class="palm-tree">🌴</view>
</view>
<view class="scene-center">
<view class="beach-umbrella">🏖️</view>
<view class="beach-ball">🏐</view>
</view>
<view class="scene-right">
<view class="doctor-desk">👨‍⚕️</view>
<view class="bookshelf">📚</view>
</view>
</view>
<view class="banner-item" @click="onBannerClick(item,index)">
<view class="doctorInfo" v-if="index==0">
<view class="name">{{expertDetail.realName}}专家工作室</view>
<view class="hospital">{{expertDetail.hospitalName}}</view>
</view>
<up-image :src="item.image" width="100%" height="400rpx"></up-image>
</view>
</swiper-item>
</swiper>
@@ -69,9 +54,9 @@
<!-- 功能网格 -->
<view class="grid-section">
<uni-grid :column="4" :highlight="true" @change="onClick">
<uni-grid :column="4" :highlight="true" >
<uni-grid-item v-for="(item, index) in gridList" :key="index">
<view class="grid-item">
<view class="grid-item" @click="onClick(index)">
<up-image :src="item.icon" width="75rpx" height="75rpx" ></up-image>
<text class="grid-text">{{ item.text }}</text>
</view>
@@ -79,7 +64,7 @@
</uni-grid>
</view>
<!-- 消息通知滚动播放 -->
<view class="notice-section">
<view class="notice-section" v-if="noticeList.length > 0">
<view class="notice-container">
<view class="notice-icon">
@@ -101,7 +86,7 @@
<up-image :src="jing_sign" width="28rpx" height="28rpx" ></up-image>
</view>
<view class="date">
8月6日
{{ formatToMonthDay(item.date || item.time) }}
</view>
</view>
<view class="bar"></view>
@@ -121,17 +106,8 @@
<text class="title-text">专题E站</text>
</view>
<view class="special-content">
<view class="special-item" v-for="(item, index) in specialList" :key="index">
<view class="special-card" :style="{ background: item.bgColor }">
<view class="special-left">
<text class="special-title">{{ item.title }}</text>
<text class="special-desc">{{ item.desc }}</text>
</view>
<view class="special-right">
<view class="special-icon">{{ item.icon }}</view>
<view class="special-arrow">›</view>
</view>
</view>
<view class="special-item" v-for="(item, index) in specialList" :key="index" @click="onEsiteClick(item)">
<up-image class="special-img" :src="item.image" width="100%" height="auto" mode="widthFix"></up-image>
</view>
</view>
</view>
@@ -145,15 +121,15 @@
<uni-icons type="right" size="32rpx" color="#999"></uni-icons>
</view>
</view>
<scroll-view class="course-scroll" scroll-x="true">
<scroll-view class="course-scroll" scroll-x="true" scroll-with-animation="true" show-scrollbar="false">
<view class="course-list">
<view class="course-item" v-for="(item, index) in courseList" :key="index">
<view class="course-card">
<up-image :src="item.avatar" width="464rpx" height="262rpx" ></up-image>
<view class="course-content">
<view class="course-title twoline">{{ item.title }}</view>
<view class="course-subtitle">{{ item.status }}</view>
<view class="course-subtitle" v-if="item.upload_num==item.video_num">已完结</view>
<view class="course-subtitle" v-else>已更新{{item.upload_num}}课时</view>
</view>
</view>
@@ -173,9 +149,7 @@
<view class="replay-grid">
<view class="replay-item" v-for="(item, index) in replayList" :key="index" @click="onReplayClick(item)">
<view class="replay-card">
<up-image :src="item.avatar" width="330rpx" height="186rpx" ></up-image>
<!-- <image :src="item.avatar" mode="aspectFill" class="doctor-avatar"></image> -->
<up-image class="replay-img" :src="item.avatar" width="100%" height="auto" mode="widthFix"></up-image>
<view class="replay-content">
<text class="replay-text">{{ item.content }}</text>
@@ -233,6 +207,7 @@
></custom-tabbar>
</view>
<unidialog :visible="visible" :content="'有福利待领取'" @close="visible=false" ></unidialog>
<unidialog :visible="hasSign" content="今日已签到，每天只能签到一次。<br>请明日继续哦~" @close="hasSign=false" :showCancel="true" cancelText="关闭"></unidialog>
<up-overlay :show="showSign" >
<view class="signwrap">
<view class="signbox">
@@ -263,6 +238,7 @@
import unidialog from "@/components/dialog/dialog.vue"
import api from '@/api/api.js'
import navTo from "@/utils/navTo.js";
import docUrl from "@/utils/docUrl.js";
import bg from "@/static/more_bg.png"
import patient from "@/static/icon_home_my_patient.png"
import video from "@/static/icon_home_video.png"
@@ -276,11 +252,15 @@
import nosign from "@/static/home_no_qiandao_icon.png"
import sign from "@/static/home_qiandao_icon.png"
import signImg from "@/static/sign_in_bng_big.png"
import dayjs from 'dayjs'
const expertDetail=reactive({})
const showSign=ref(false)
// 定义refs
const tabbarRef = ref(null);
const visible=ref(false)
const hasUnread = ref(false)
const isSignedIn = ref(false) // 签到状态：false-未签到，true-已签到
const hasSign=ref(false)
// 滚动相关状态
const scrollTop = ref(0);
const bannerHeight = 400; // 轮播图高度，单位rpx
@@ -318,16 +298,12 @@
backgroundColor: '#ddd',
border: '1px solid #ddd',
color: '#fff',
selectedBackgroundColor: '#ff0000',
selectedBorder: '1px solid #ff0000'
selectedBackgroundColor: '#8B2316',
selectedBorder: '1px solid #8B2316'
});
// 轮播图数据
const bannerList = reactive([{
title: '邹建东专家工作室',
subtitle: '北京肝胆相照公益基金会',
background: 'linear-gradient(135deg, #007aff, #0056b3)'
}]);
// 轮播图数据（仅图片）
const bannerList = reactive([]);
// 功能网格数据
const gridList = reactive([
@@ -370,98 +346,16 @@
]);
// 专题E站数据
const specialList = reactive([
{
title: '肝病医生的临床计算器和决策辅助工具',
desc: '肝胆相照®——医学常用工具',
icon: '🔧',
bgColor: '#1e3a8a'
},
{
title: '徐医感染 疑难发热及感染分享',
desc: '',
icon: '🏥',
bgColor: '#10b981'
},
{
title: '爱肝微视 全国首档爱肝科普短视频',
desc: '免费领取福利',
icon: '📱',
bgColor: '#1e3a8a'
}
]);
const specialList = reactive([]);
// 消息通知数据
const noticeList = reactive([
{
id: 1,
content: '欢迎使用肝胆相照医生版，新功能上线啦！',
time: '10:30',
type: 'system'
},
{
id: 2,
content: '您有3个新的患者咨询待回复',
time: '09:15',
type: 'patient'
},
{
id: 3,
content: '今日有2场直播会议即将开始',
time: '08:45',
type: 'meeting'
},
{
id: 4,
content: '新的医学指南已更新，请及时查看',
time: '昨天',
type: 'guide'
}
]);
const noticeList = reactive([]);
// 精品课数据
const courseList = reactive([
{
title: '王晓光医生发起了新的病例讨论，邀请您参与',
status:'已完结'
},
{
title: '王晓光医生发起了新的病例讨论，邀请您参与',
status:'已完结'
},
{
title: '王晓光医生发起了新的病例讨论，邀请您参与',
status:'已完结'
},
]);
const courseList = reactive([]);
// 精彩回放数据
const replayList = reactive([
{
id: 1,
avatar: '/static/c1.png',
content: 'Xxx医生发起了新的病例讨论,邀请您参与',
type: 'case_discussion'
},
{
id: 2,
avatar: '/static/c2.png',
content: 'Xxx医生发起了新的',
type: 'new_topic'
},
{
id: 3,
avatar: '/static/c3.png',
content: 'Xxx医生发起了新的病例讨论,邀请与......',
type: 'case_discussion'
},
{
id: 4,
avatar: '/static/c4.png',
content: 'Xxx医生发起了新的病例讨论,邀请您参与',
type: 'case_discussion'
}
]);
const replayList = reactive([]);
// 实用指南标签页
const guideTabs = reactive([
@@ -472,44 +366,12 @@
// 当前选中的标签页
const currentGuideTab = ref(0);
// 实用指南数据
const guideList = reactive([
{
id: 1,
title: '一学就会的keynote教程番外篇】keynote 线下',
description: '实训你们要的带练来了',
actionType: 'view',
type: 'guide'
},
{
id: 2,
title: '胆源性肝脏疾病——专题研讨会成功举行',
description: '',
actionType: 'view',
type: 'guide'
},
{
id: 3,
title: '肝病学新领域:肝硬化合并慢性肾脏病|深度综',
description: '述大的并慢性肾脏病|深度综述并慢并慢性.......',
actionType: 'download',
type: 'guide'
},
{
id: 4,
title: '【一学就会的keynote教程番外篇】keynote 线',
description: '下实训你们要的带练来了',
actionType: 'download',
type: 'guide'
},
{
id: 5,
title: '段钟平教授:终末期肝病营养治疗的价值及研',
description: '究进展',
actionType: 'download',
type: 'guide'
}
]);
// 实用指南展示数据（随标签切换填充）
const guideList = reactive([]);
// 存储两类原始数据：指南 与 课件分享
const guidesData = reactive([]);
const coursewareData = reactive([]);
// 轮播图切换事件
const change = (e) => {
@@ -521,6 +383,14 @@
console.log('消息通知切换:', e.detail.current);
};
// 使用 dayjs 格式化为 月日（如 8月6日）
const formatToMonthDay = (val) => {
if (!val) return '';
const d = dayjs(val);
if (!d.isValid()) return '';
return d.format('M月D日');
};
// 消息通知点击事件
const onNoticeClick = (item) => {
console.log('点击消息通知:', item);
@@ -589,22 +459,29 @@
};
// 网格点击事件
const onClick = (e) => {
console.log('点击了第' + e.detail.index + '个');
const clickedItem = gridList[e.detail.index];
// 处理开具发票的点击
if (clickedItem.text === '开具发票') {
uni.navigateTo({
url: '/pages_course/invoice/invoice'
});
return;
const onClick = (index) => {
console.log('点击了第' + index + '个');
let url=''
if(index==0){
url='/pages_app/patientMsg/patientMsg'
}else if(index==1){
url='/pages_app/video/video'
}else if(index==2){
url='/pages_app/consult/consult'
}else if(index==3){
url='/pages_app/zhinan/zhinan'
}else if(index==4){
url='/pages_app/news/news'
}else if(index==5){
url='/pages_app/ppt/ppt'
}else if(index==6){
url='/pages_course/index/index'
}else{
url='/pages_app/search/search'
}
uni.showToast({
title: `点击了${clickedItem.text}`,
icon: 'none'
});
navTo({
url:url
})
};
// Tab切换事件
@@ -619,6 +496,13 @@
// 切换实用指南标签页
const switchGuideTab = (index) => {
currentGuideTab.value = index;
// 0: 实用指南 -> guidesData；1: 课件分享 -> coursewareData
guideList.length = 0;
if (index === 0) {
guideList.push(...guidesData);
} else {
guideList.push(...coursewareData);
}
};
// 查看更多实用指南
@@ -629,23 +513,111 @@
});
};
// 点击顶部轮播图
const onBannerClick = (item,index) => {
if (!item) return;
if(index==0){
}else{
// 如果存在外链path，优先按平台打开
if (item.path) {
// #ifdef H5
window.open(item.path, '_blank');
// #endif
// #ifdef APP-PLUS
plus.runtime.openURL(item.path);
// #endif
// #ifdef MP
const encoded = encodeURIComponent(item.path);
uni.navigateTo({
url: `/pages_app/webview/webview?url=${encoded}`
});
// #endif
return;
}
// 如果是新闻类型且有uuid，可跳转新闻详情H5
if (item.uuid) {
const url = `https://dev-doc.igandan.com/app/html/news/${item.uuid}.html`;
// #ifdef H5
window.open(url, '_blank');
// #endif
// #ifdef APP-PLUS
plus.runtime.openURL(url);
// #endif
// #ifdef MP
const encoded = encodeURIComponent(url);
uni.navigateTo({ url: `/pages_app/webview/webview?url=${encoded}` });
// #endif
}
}
};
// 点击专题E站图片
const onEsiteClick = (item) => {
if (!item || !item.url) {
return;
}
// H5 端
// #ifdef H5
window.open(item.url, '_blank');
// #endif
// App 端
// #ifdef APP-PLUS
plus.runtime.openURL(item.url);
// #endif
// 小程序端：使用内嵌 webview 页面打开
// #ifdef MP
const encoded = encodeURIComponent(item.url)
uni.navigateTo({
url: `/pages_app/webview/webview?url=${encoded}`
})
// #endif
};
// 实用指南点击事件
const onGuideClick = (item) => {
console.log('点击实用指南:', item);
uni.showToast({
title: `查看${item.title}`,
icon: 'none'
});
// 根据类型跳转到不同页面
if (item.type === 'guide') {
uni.navigateTo({
url: '/pages/guide/detail?id=' + item.id
});
} else if (item.type === 'courseware') {
uni.navigateTo({
url: '/pages/courseware/list'
});
// 如果有PDF链接，直接打开
if (item.path) {
const pdfUrl = docUrl+item.path;
console.log(pdfUrl)
if (pdfUrl) {
// H5 端
// #ifdef H5
window.open(pdfUrl, '_blank');
// #endif
// App 端
// #ifdef APP-PLUS
plus.runtime.openURL(pdfUrl);
// #endif
// 小程序端：使用内嵌 webview 页面打开
// #ifdef MP-WEIXIN
const encoded = encodeURIComponent(pdfUrl);
uni.navigateTo({
url: `/pages_app/webview/webview?url=${encoded}`
});
// #endif
return;
}
}
// 没有PDF链接时，根据类型跳转到不同页面
// if (item.type === 'guide') {
// uni.navigateTo({
// url: '/pages/guide/detail?id=' + item.id
// });
// } else if (item.type === 'courseware') {
// uni.navigateTo({
// url: '/pages/courseware/list'
// });
// }
};
// 测试tabbar功能的方法
@@ -685,47 +657,135 @@
if (res && res.data) {
const data = res.data;
Object.assign(expertDetail,data.expertDetail)
// 更新轮播图数据
if (data.bannerList && data.bannerList.length > 0) {
bannerList.length = 0;
bannerList.push(...data.bannerList);
// 未读消息红点
hasUnread.value = !!data.has_unread;
// 签到状态
isSignedIn.value = data.sign_in === 1;
// 福利待领取弹窗
if (data.welfare_notice && data.welfare_notice.receive_notice) {
visible.value = true;
}
// 更新功能网格数据
if (data.gridList && data.gridList.length > 0) {
// 顶部轮播图：news_list（图片+可跳转）
bannerList.length = 0;
if (Array.isArray(data.news_list) && data.news_list.length > 0) {
bannerList.push(
...data.news_list.map(item => ({
image: item.headImg || '',
type: item.type, // 0: H5链接, 1: 图片无跳转 等
path: item.path || '',
uuid: item.uuid || ''
}))
);
} else if (Array.isArray(data.esite_list) && data.esite_list.length > 0) {
bannerList.push({ image: data.esite_list[0].img_path || '' });
}
// 功能网格：icons_list -> gridList
if (Array.isArray(data.icons_list) && data.icons_list.length > 0) {
gridList.length = 0;
gridList.push(...data.gridList);
gridList.push(
...data.icons_list.map(item => ({
icon: item.img || '',
text: item.name || ''
}))
);
gridList.push({
icon:more,
text:'更多'
})
}
// 更新消息通知数据
if (data.noticeList && data.noticeList.length > 0) {
// 消息通知：meeting_list -> noticeList（含日期）
if (Array.isArray(data.meeting_list) && data.meeting_list.length > 0) {
noticeList.length = 0;
noticeList.push(...data.noticeList);
noticeList.push(
...data.meeting_list.map((item, idx) => ({
id: item.id || item.uuid || idx + 1,
content: item.title || item.name || '',
time: item.begin_date || item.start_time || item.time || item.create_date || '',
type: 'meeting',
path: item.path || ''
}))
);
}
// 更新专题E站数据
if (data.specialList && data.specialList.length > 0) {
// 专题E站：esite_list -> specialList（仅图片，最多展示3个）
if (Array.isArray(data.esite_list) && data.esite_list.length > 0) {
specialList.length = 0;
specialList.push(...data.specialList);
specialList.push(
...data.esite_list.slice(0, 3).map(item => ({
image: item.img_path || '',
url: item.url || ''
}))
);
}
// 更新精品课数据
if (data.courseList && data.courseList.length > 0) {
// 精品课：excellencourse_list -> courseList
if (Array.isArray(data.excellencourse_list) && data.excellencourse_list.length > 0) {
courseList.length = 0;
courseList.push(...data.courseList);
courseList.push(
...data.excellencourse_list.map(item => ({
title: item.title || '',
status: item.video_num != null ? `共${item.video_num}讲` : '',
avatar: item.index_img || ''
}))
);
}
// 更新精彩回放数据
if (data.replayList && data.replayList.length > 0) {
// 精彩回放：video_list -> replayList
if (Array.isArray(data.video_list) && data.video_list.length > 0) {
replayList.length = 0;
replayList.push(...data.replayList);
replayList.push(
...data.video_list.map(item => ({
id: item.uuid || item.polyv_uuid || Math.random().toString(36).slice(2),
avatar: item.imgpath || '',
content: item.name || '',
type: 'case_discussion'
}))
);
}
// 更新实用指南数据
if (data.guideList && data.guideList.length > 0) {
guideList.length = 0;
guideList.push(...data.guideList);
// 实用指南：guide_ist（存 guidesData）
guidesData.length = 0;
if (Array.isArray(data.guide_ist) && data.guide_ist.length > 0) {
guidesData.push(
...data.guide_ist.map(item => ({
id: item.article_uuid || '',
title: item.title || '',
description: '',
actionType: 'download',
type: 'courseware',
path: item.path || ''
}))
);
}
// 课件分享：gandanfile_list（存 coursewareData）
coursewareData.length = 0;
if (Array.isArray(data.gandanfile_list) && data.gandanfile_list.length > 0) {
coursewareData.push(
...data.gandanfile_list.map(item => ({
id: item.article_uuid || '',
title: item.title || '',
description: '',
actionType: 'download',
type: 'courseware',
path: item.path || ''
}))
);
}
// 默认展示当前选中标签的数据
guideList.length = 0;
if (currentGuideTab.value === 0) {
guideList.push(...guidesData);
} else {
guideList.push(...coursewareData);
}
}
} catch (error) {
@@ -774,11 +834,51 @@
});
};
// 签到点击事件
const onSignClick = async () => {
// 如果已经签到，显示提示
if (isSignedIn.value) {
hasSign.value=true;
return;
}
try {
// 调用添加积分接口
const res = await api.addBonusPointsN({
score_type:1
});
if (res && res.code === 200) {
// 签到成功
isSignedIn.value = true;
uni.showToast({
title: '签到成功，获得10积分',
icon: 'success'
});
// 显示签到弹窗
showSign.value = true;
} else {
uni.showToast({
title: res?.msg || '签到失败',
icon: 'none'
});
}
} catch (error) {
console.error('签到失败:', error);
uni.showToast({
title: '签到失败，请重试',
icon: 'none'
});
}
};
// 暴露方法给父组件（如果需要）
defineExpose({
testTabbar,
getTabbarStatus,
goToCourseHome
goToCourseHome,
onSignClick
});
</script>
@@ -991,7 +1091,19 @@
overflow: hidden;
position: relative;
}
.doctorInfo{
position: absolute;
top:200rpx;
z-index:9;
left:30rpx;
right:30rpx;
color:#fff;
font-size: 40rpx;
}
.doctorInfo .hospital{
margin-top: 20rpx;
font-size: 32rpx;
}
.banner-content {
height: 100%;
display: flex;
@@ -1069,6 +1181,20 @@
display: flex;
flex-direction: column;
gap: 20rpx;
background-color: #fff;
padding: 20rpx;
border-radius: 10rpx;
}
/* 专题E站图片项：宽度铺满，高度自适应 */
.special-item {
position: relative;
width: 100%;
overflow: hidden;
}
.special-img {
width: 100%;
display: block;
}
.special-card {
@@ -1148,19 +1274,20 @@
white-space: nowrap;
margin-left: 30rpx;
margin-right: 30rpx;
overflow: hidden;
}
.course-list {
display: flex;
display: inline-flex;
gap: 30rpx;
width:auto;
width: auto;
padding-right: 60rpx; /* 让最后一项与右边留出更大间距 */
}
.course-item {
flex:1;
background-color: #f4f4f4;
display: inline-block;
background-color: #f4f4f4;
width: 464rpx;
margin-right: 30rpx;
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.1);
border-radius: 24rpx;
overflow: hidden;
@@ -1185,15 +1312,19 @@
font-size: 20rpx;
}
.course-content {
margin-bottom: 30rpx;
}
.course-title {
white-space: normal;
font-size: 30rpx;
color: #333333;
margin: 20rpx;
/* 固定两行高度并省略 */
line-height: 40rpx;
height: 80rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
.course-subtitle {
@@ -1240,8 +1371,7 @@
.replay-item {
cursor: pointer;
height:305rpx;
}
}
.replay-card {
background-color: white;
@@ -1255,9 +1385,8 @@
transform: scale(0.98);
}
.replay-image {
.replay-image { /* 不再使用固定高容器，保留占位以防其它样式引用 */
width: 100%;
height: 200rpx;
overflow: hidden;
}
@@ -1267,6 +1396,13 @@
object-fit: cover;
}
/* 新增：精彩回放图片自适应 */
.replay-img{
width: 100%;
height: auto;
display: block;
}
.replay-content {
padding: 20rpx;
}