2054 lines
44 KiB
Vue
2054 lines
44 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- 头部搜索栏 -->
|
||
<view class="header" :style="{ backgroundColor: headerBgColor }">
|
||
<view class="header-content">
|
||
<view class="header-left">
|
||
<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">
|
||
<view class="mask"></view>
|
||
<uni-search-bar
|
||
placeholder="搜索视频、精品课、课件、指南等"
|
||
radius="8"
|
||
cancelButton="none"
|
||
bgColor="#ffffff"
|
||
placeholderColor="#999999"
|
||
></uni-search-bar>
|
||
</view>
|
||
<view class="header-right" @click="goMessage">
|
||
<view class="message-icon">
|
||
<uni-icons type="email" size="32" color="#fff"></uni-icons>
|
||
<view v-if="hasTip" class="red-dot"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 轮播图 -->
|
||
<view class="banner-section">
|
||
<uni-swiper-dot
|
||
:info="bannerList"
|
||
:current="current"
|
||
field="content"
|
||
:mode="mode"
|
||
:dots-styles="dotsStyles"
|
||
>
|
||
<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" @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>
|
||
</uni-swiper-dot>
|
||
</view>
|
||
|
||
<!-- 功能网格 -->
|
||
<view class="grid-section">
|
||
<uni-grid :column="4" :highlight="true">
|
||
<uni-grid-item v-for="(item, index) in gridList" :key="index">
|
||
<view class="grid-item" @click="onClick(index, item.text)">
|
||
<view
|
||
class="red-dot"
|
||
v-if="item.text == '公益咨询' && hasConsult"
|
||
></view>
|
||
<view
|
||
class="red-dot"
|
||
v-if="item.text == '我的患者' && hasMsg"
|
||
></view>
|
||
<up-image :src="item.icon" width="75rpx" height="75rpx"></up-image>
|
||
<text class="grid-text">{{ item.text }}</text>
|
||
</view>
|
||
</uni-grid-item>
|
||
</uni-grid>
|
||
</view>
|
||
<!-- 消息通知滚动播放 -->
|
||
<view class="notice-section" v-if="noticeList.length > 0">
|
||
<view class="notice-container">
|
||
<view class="notice-icon"> </view>
|
||
<view class="notice-content">
|
||
<swiper
|
||
class="notice-swiper"
|
||
:vertical="true"
|
||
:autoplay="true"
|
||
:interval="3000"
|
||
:duration="1000"
|
||
:circular="true"
|
||
@change="onNoticeChange"
|
||
>
|
||
<swiper-item v-for="(item, index) in noticeList" :key="index">
|
||
<view class="notice-cell">
|
||
<view class="timebox">
|
||
<view class="top">
|
||
<up-image
|
||
:src="livebg"
|
||
width="59rpx"
|
||
height="27rpx"
|
||
></up-image>
|
||
<up-image
|
||
:src="jing_sign"
|
||
width="28rpx"
|
||
height="28rpx"
|
||
></up-image>
|
||
</view>
|
||
<view class="date">
|
||
{{ formatToMonthDay(item.date || item.time) }}
|
||
</view>
|
||
</view>
|
||
<view class="bar"></view>
|
||
<view class="notice-text oneline" @click="onNoticeClick(item)">
|
||
{{ item.content }}
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 专题E站 -->
|
||
<view class="special-section">
|
||
<view class="section-title">
|
||
<text class="title-text">专题E站</text>
|
||
</view>
|
||
<view class="special-content">
|
||
<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>
|
||
|
||
<!-- 精品课 -->
|
||
<view class="course-section">
|
||
<view class="section-header">
|
||
<text class="section-title-text">精品课</text>
|
||
<view class="more-link" @click="goToCourseHome">
|
||
<text class="more-text">更多</text>
|
||
<uni-icons type="right" size="32rpx" color="#999"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<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"
|
||
@click="goCourseDetail(item)"
|
||
>
|
||
<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"
|
||
v-if="item.upload_num == item.video_num"
|
||
>已完结</view
|
||
>
|
||
<view class="course-subtitle" v-else
|
||
>已更新{{ item.upload_num }}课时</view
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 精彩回放 -->
|
||
<view class="replay-section">
|
||
<view class="section-header">
|
||
<text class="section-title-text">精彩回放</text>
|
||
<view class="more-link" @click="onReplayMore">
|
||
<text class="more-text">更多</text>
|
||
<uni-icons type="right" size="32rpx" color="#999"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<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
|
||
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>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 实用指南 -->
|
||
<view class="guide-section">
|
||
<!-- 顶部导航标签 -->
|
||
<view class="bg">
|
||
<up-image :src="bg" width="481rpx" height="112rpx"></up-image>
|
||
</view>
|
||
<view class="guide-tabs">
|
||
<view
|
||
class="tab-item"
|
||
v-for="(tab, index) in guideTabs"
|
||
:key="index"
|
||
:class="{ active: currentGuideTab === index }"
|
||
@click="switchGuideTab(index)"
|
||
>
|
||
<text class="tab-text">{{ tab.name }}</text>
|
||
<view class="tab-underline" v-if="currentGuideTab === index"></view>
|
||
</view>
|
||
<view class="tab-more" @click="onGuideMore">
|
||
<text class="more-text">更多</text>
|
||
<uni-icons type="right" size="32rpx" color="#999"></uni-icons>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 内容区域 -->
|
||
<view class="guide-content">
|
||
<view class="guide-list">
|
||
<view
|
||
class="guide-item"
|
||
v-for="(item, index) in guideList"
|
||
:key="index"
|
||
@click="onGuideClick(item)"
|
||
>
|
||
<view class="guide-info">
|
||
<text class="guide-item-title twoline">{{ item.title }}</text>
|
||
</view>
|
||
<view class="guide-action">
|
||
<text v-if="item.actionType === 'view'" class="action-view"
|
||
>查看</text
|
||
>
|
||
<up-icon
|
||
name="download"
|
||
color="#8D2316"
|
||
size="28"
|
||
v-else
|
||
></up-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 自定义Tabbar -->
|
||
<custom-tabbar ref="tabbarRef" ></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">
|
||
<view class="close" @click="showSign = false"></view>
|
||
<view class="signbg">
|
||
<up-image :src="signImg" width="604rpx" height="964rpx"></up-image>
|
||
</view>
|
||
<view class="signcontent">
|
||
<view class="day">今天是我们相识的第{{ signInfo.gdxzday }}天</view>
|
||
<view class="signtotal">本周共签到{{ signInfo.totalDay }}次</view>
|
||
<view class="signcontinue"
|
||
>已经连续签到{{ signInfo.continuous_day }}天</view
|
||
>
|
||
<view class="tip">连续签到获取更多积分</view>
|
||
<view class="news" @click.stop="goNews">
|
||
{{ signInfo.news.summary }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</up-overlay>
|
||
<view class="ad-container" v-if="adData.path && showAd">
|
||
<!-- 广告图片 -->
|
||
<image
|
||
class="ad-image"
|
||
:src="adData.path"
|
||
mode="aspectFill"
|
||
@click="handleAdClick"
|
||
></image>
|
||
|
||
<!-- 右上角倒计时跳过按钮 -->
|
||
<view class="skip-button" @click="skipAd">
|
||
<text class="skip-text">跳过 {{countdown}}s</text>
|
||
</view>
|
||
|
||
<!-- 底部点击跳转按钮 -->
|
||
<view class="bottom-button" v-if="adData.url" @click="handleAdClick">
|
||
<text class="button-text">点击查看详情</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import {
|
||
ref,
|
||
reactive,
|
||
watch,
|
||
onMounted,
|
||
nextTick,
|
||
computed,
|
||
onUnmounted,
|
||
} from "vue";
|
||
import { onShow, onLoad, onPageScroll} from "@dcloudio/uni-app";
|
||
import CustomTabbar from "@/components/tabBar/tabBar.vue";
|
||
import unidialog from "@/components/dialog/dialog.vue";
|
||
import { autorun } from "mobx";
|
||
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";
|
||
import consult from "@/static/icon_home_my_public.png";
|
||
import library from "@/static/icon_home_my_library.png";
|
||
import course from "@/static/jingpingke.png";
|
||
import more from "@/static/home_more.png";
|
||
import livebg from "@/static/livebg.png";
|
||
import jing_sign from "@/static/jing_sign.png";
|
||
import bo_bg from "@/static/bo_bg.png";
|
||
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";
|
||
import { V2NIMConst } from "@/utils/im/nim";
|
||
import {
|
||
V2NIMConversationForUI,
|
||
V2NIMLocalConversationForUI,
|
||
} from "@/utils/im/nim";
|
||
import { setTabUnread } from "@/utils/im/msg";
|
||
import my_api from '@/api/my_api.js'
|
||
const app = getApp()
|
||
// 广告数据
|
||
const adData = ref({
|
||
path: '',
|
||
url: ''
|
||
});
|
||
|
||
// 倒计时
|
||
const countdown = ref(5);
|
||
const showAd=ref(true);
|
||
let timer = null;
|
||
const hasAd=ref(false);
|
||
const expertDetail = reactive({});
|
||
const hasConsult = ref(false);
|
||
const hasMsg = ref(false);
|
||
const showSign = ref(false);
|
||
|
||
const signInfo = reactive({
|
||
news: {
|
||
summary: "",
|
||
},
|
||
});
|
||
/**会话列表 */
|
||
const conversationList = ref<
|
||
(
|
||
| (V2NIMConversationForUI & { renderKey: string })
|
||
| (V2NIMLocalConversationForUI & { renderKey: string })
|
||
)[]
|
||
>([]);
|
||
// 定义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
|
||
const hasQeqPatient = ref(false);
|
||
const patientList = ref([]);
|
||
const patientListByGBK = async () => {
|
||
const res = await api.patientListByGBK();
|
||
if (res.code == 1) {
|
||
patientList.value = res.data;
|
||
hasQeqPatient.value = true;
|
||
comparePatient();
|
||
}
|
||
};
|
||
const handleReadMsg = () => {
|
||
if (!hasQeqPatient.value) {
|
||
patientListByGBK();
|
||
} else {
|
||
comparePatient();
|
||
}
|
||
};
|
||
const getStartpage = () => {
|
||
my_api.startpage().then(res => {
|
||
console.log('开屏广告数据:', res);
|
||
|
||
if (res && res.data) {
|
||
adData.value = {
|
||
path: docUrl + res.data.path || '',
|
||
url: res.data.url || ''
|
||
};
|
||
|
||
// 如果有广告图片，开始倒计时
|
||
if (res.data.path) {
|
||
if(!hasAd.value){
|
||
startCountdown();
|
||
}else{
|
||
navigateToHome();
|
||
}
|
||
|
||
|
||
} else {
|
||
// 没有广告，直接跳转到首页
|
||
navigateToHome();
|
||
}
|
||
hasAd.value=true;
|
||
} else {
|
||
// 接口返回异常，直接跳转到首页
|
||
navigateToHome();
|
||
}
|
||
}).catch(err => {
|
||
console.error('获取开屏广告失败:', err);
|
||
// 接口调用失败，直接跳转到首页
|
||
navigateToHome();
|
||
});
|
||
}
|
||
|
||
// 开始倒计时
|
||
const startCountdown = () => {
|
||
timer = setInterval(() => {
|
||
countdown.value--;
|
||
if (countdown.value <= 0) {
|
||
clearInterval(timer);
|
||
navigateToHome();
|
||
}
|
||
}, 1000);
|
||
}
|
||
|
||
// 跳过广告
|
||
const skipAd = () => {
|
||
clearInterval(timer);
|
||
navigateToHome();
|
||
}
|
||
|
||
// 点击广告
|
||
const handleAdClick = () => {
|
||
if (adData.value.url) {
|
||
// 有跳转链接，跳转到指定页面
|
||
uni.navigateTo({
|
||
url: '/pages/webview/webview?url=' + adData.value.url
|
||
});
|
||
} else {
|
||
// 没有跳转链接，直接跳转到首页
|
||
navigateToHome();
|
||
}
|
||
}
|
||
|
||
// 跳转到首页
|
||
const navigateToHome = () => {
|
||
showAd.value=false;
|
||
app.globalData.plAd=false;
|
||
// uni.redirectTo({
|
||
// url: '/pages/index/index'
|
||
// });
|
||
}
|
||
|
||
// 页面卸载时清理定时器
|
||
onUnmounted(() => {
|
||
if (timer) {
|
||
clearInterval(timer);
|
||
}
|
||
});
|
||
const goCourseDetail=(item)=>{
|
||
navTo({
|
||
url: "/pages_course/course_detail/course_detail?id="+item.id,
|
||
});
|
||
}
|
||
|
||
const comparePatient = () => {
|
||
let count = 0;
|
||
for (let i = 0; i < patientList.value.length; i++) {
|
||
for (let j = 0; j < conversationList.value.length; j++) {
|
||
if (
|
||
conversationList.value[j].conversationId.indexOf(
|
||
patientList.value[i].uuid.toLowerCase()
|
||
) > -1
|
||
) {
|
||
count += conversationList.value[j].unreadCount;
|
||
}
|
||
}
|
||
}
|
||
if (count > 0) {
|
||
hasMsg.value = true;
|
||
} else {
|
||
hasMsg.value = false;
|
||
}
|
||
};
|
||
const subscribeUserStatus = (
|
||
conversations: (V2NIMConversationForUI | V2NIMLocalConversationForUI)[]
|
||
) => {
|
||
const loginStateVisible = uni.$UIKitStore.localOptions.loginStateVisible;
|
||
if (loginStateVisible) {
|
||
// 订阅会话列表中 单聊的在线离线状态
|
||
const accounts = conversations
|
||
.filter(
|
||
(item) =>
|
||
item.type ===
|
||
V2NIMConst.V2NIMConversationType.V2NIM_CONVERSATION_TYPE_P2P
|
||
)
|
||
.map((item) => {
|
||
return uni.$UIKitNIM?.V2NIMConversationIdUtil.parseConversationTargetId(
|
||
item.conversationId
|
||
);
|
||
});
|
||
// 将 accounts 拆分成多个长度不超过 100 的子数组
|
||
const chunkSize = 100;
|
||
|
||
const length = accounts.length;
|
||
|
||
for (let i = 0; i < length; i += chunkSize) {
|
||
const chunk = accounts.slice(i, i + chunkSize);
|
||
|
||
if (chunk.length > 0) {
|
||
uni.$UIKitStore.subscriptionStore.subscribeUserStatusActive(chunk);
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
|
||
/**是否是云端会话 */
|
||
const enableV2CloudConversation =
|
||
uni.$UIKitStore?.sdkOptions?.enableV2CloudConversation;
|
||
|
||
/** 监听会话列表数据变更，实时更新 conversationList */
|
||
const conversationListWatch = autorun(() => {
|
||
const _conversationList = enableV2CloudConversation
|
||
? uni.$UIKitStore?.uiStore?.conversations
|
||
: uni.$UIKitStore?.uiStore?.localConversations;
|
||
|
||
conversationList.value = _conversationList
|
||
?.map(
|
||
(conversation: V2NIMConversationForUI | V2NIMLocalConversationForUI) => {
|
||
return {
|
||
...conversation,
|
||
// 为什么要加一个renderKey 直接在渲染的时候写 :key = conversation.conversationId 不就行了吗？
|
||
// 如果不加，在渲染的时候，就会出现会话列表显示undefined，uniapp 很奇怪的问题
|
||
renderKey: conversation.conversationId,
|
||
};
|
||
}
|
||
)
|
||
.sort(
|
||
(
|
||
a: V2NIMConversationForUI | V2NIMLocalConversationForUI,
|
||
b: V2NIMConversationForUI | V2NIMLocalConversationForUI
|
||
) => b.sortOrder - a.sortOrder
|
||
);
|
||
|
||
handleReadMsg();
|
||
//setTabUnread()
|
||
});
|
||
// 监听数组长度变化
|
||
watch(
|
||
() => conversationList?.value?.length, // 监听 length 属性
|
||
() => {
|
||
subscribeUserStatus(conversationList?.value);
|
||
|
||
}
|
||
);
|
||
|
||
/** 连接状态监听 断网重连后重新订阅 */
|
||
const connectWatch = autorun(() => {
|
||
if (
|
||
uni.$UIKitStore?.connectStore.loginStatus ===
|
||
V2NIMConst.V2NIMLoginStatus.V2NIM_LOGIN_STATUS_LOGINED &&
|
||
uni.$UIKitStore?.connectStore.connectStatus ===
|
||
V2NIMConst.V2NIMConnectStatus.V2NIM_CONNECT_STATUS_CONNECTED
|
||
) {
|
||
subscribeUserStatus(conversationList?.value);
|
||
}
|
||
});
|
||
|
||
// 获取设备像素比
|
||
const getPixelRatio = () => {
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
return systemInfo.pixelRatio || 1;
|
||
};
|
||
const focus = () => {
|
||
navTo({
|
||
url: "/pages_app/search/search",
|
||
});
|
||
};
|
||
const onReplayMore = () => {
|
||
navTo({
|
||
url: "/pages_app/video/video",
|
||
});
|
||
};
|
||
// 计算头部背景色
|
||
const headerBgColor = computed(() => {
|
||
// 获取屏幕宽度来计算rpx到px的转换比例
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
const screenWidth = systemInfo.screenWidth;
|
||
const rpxToPx = screenWidth / 750; // 750rpx = 屏幕宽度
|
||
|
||
const maxScroll = bannerHeight * rpxToPx; // 400rpx转换为px
|
||
const currentScroll = scrollTop.value;
|
||
const progress = Math.min(currentScroll / maxScroll, 1);
|
||
|
||
// 从透明渐变到绿色 (#8B2316)
|
||
const alpha = progress;
|
||
return `rgba(139, 34, 22, ${alpha})`;
|
||
});
|
||
|
||
// 轮播图相关
|
||
const current = ref(0);
|
||
const mode = ref("dot");
|
||
const dotsStyles = reactive({
|
||
backgroundColor: "#ddd",
|
||
border: "1px solid #ddd",
|
||
color: "#fff",
|
||
selectedBackgroundColor: "#8B2316",
|
||
selectedBorder: "1px solid #8B2316",
|
||
});
|
||
|
||
// 轮播图数据（仅图片）
|
||
const bannerList = reactive([]);
|
||
|
||
// 功能网格数据
|
||
const gridList = reactive([
|
||
{
|
||
icon: patient,
|
||
text: "我的患者",
|
||
},
|
||
{
|
||
icon: video,
|
||
text: "肝胆视频",
|
||
},
|
||
{
|
||
icon: consult,
|
||
text: "公益咨询",
|
||
},
|
||
{
|
||
icon: consult,
|
||
text: "指南杂志",
|
||
},
|
||
{
|
||
icon: "",
|
||
text: "肝胆新闻",
|
||
},
|
||
{
|
||
icon: "",
|
||
text: "肝胆课件",
|
||
},
|
||
{
|
||
icon: course,
|
||
text: "精品课",
|
||
},
|
||
{
|
||
icon: "",
|
||
text: "开具发票",
|
||
},
|
||
{
|
||
icon: more,
|
||
text: "更多",
|
||
},
|
||
]);
|
||
|
||
// 专题E站数据
|
||
const specialList = reactive([]);
|
||
|
||
// 消息通知数据
|
||
const noticeList = reactive([]);
|
||
|
||
// 精品课数据
|
||
const courseList = reactive([]);
|
||
|
||
// 精彩回放数据
|
||
const replayList = reactive([]);
|
||
|
||
// 实用指南标签页
|
||
const guideTabs = reactive([
|
||
{ name: "实用指南", type: "guide" },
|
||
{ name: "课件分享", type: "courseware" },
|
||
]);
|
||
|
||
// 当前选中的标签页
|
||
const currentGuideTab = ref(0);
|
||
|
||
// 实用指南展示数据（随标签切换填充）
|
||
const guideList = reactive([]);
|
||
|
||
// 存储两类原始数据：指南 与 课件分享
|
||
const guidesData = reactive([]);
|
||
const coursewareData = reactive([]);
|
||
|
||
// 轮播图切换事件
|
||
const change = (e) => {
|
||
current.value = e.detail.current;
|
||
};
|
||
|
||
// 消息通知切换事件
|
||
const onNoticeChange = (e) => {
|
||
|
||
};
|
||
|
||
// 使用 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);
|
||
navTo({
|
||
url: `/pages_app/webview/webview?url=${encodeURIComponent(item.path)}&title=${item.content}`,
|
||
});
|
||
};
|
||
|
||
// 查看更多消息
|
||
const onNoticeMore = () => {
|
||
uni.navigateTo({
|
||
url: "/pages/notice/list",
|
||
});
|
||
};
|
||
|
||
// 精彩回放点击事件
|
||
const onReplayClick = (item) => {
|
||
navTo({
|
||
url: "/pages_app/videoDetail/videoDetail?id=" + item.id,
|
||
});
|
||
};
|
||
|
||
// 网格点击事件
|
||
const onClick = (index, name) => {
|
||
let url = "";
|
||
if (name == "我的患者") {
|
||
url = "/pages_app/patientMsg/patientMsg";
|
||
} else if (name == "肝胆视频") {
|
||
url = "/pages_app/video/video";
|
||
} else if (name == "公益咨询") {
|
||
url = "/pages_app/consult/consult";
|
||
} else if (name == "指南杂志") {
|
||
url = "/pages_app/zhinan/zhinan";
|
||
} else if (name == "肝胆新闻") {
|
||
url = "/pages_app/newsList/newsList";
|
||
} else if (name == "肝胆课件") {
|
||
url = "/pages_app/ppt/ppt";
|
||
} else if (name == "精品课") {
|
||
url = "/pages_course/course/course";
|
||
} else if (name == "积分商城") {
|
||
url = "/pages_goods/pointMall/pointMall";
|
||
} else if (name == "我的福利") {
|
||
url = "/pages_app/myWelfare/myWelfare";
|
||
} else if (name == "专题e站") {
|
||
const encoded = encodeURIComponent(
|
||
"https://wx.igandan.com/Esite/index.htm#/home?fromtype=doctor"
|
||
);
|
||
url = `/pages_app/webview/webview?url=${encoded}&title=专题e站`;
|
||
} else {
|
||
url = "/pages_app/myApplication/myApplication";
|
||
}
|
||
navTo({
|
||
url: url,
|
||
});
|
||
};
|
||
|
||
// 切换实用指南标签页
|
||
const switchGuideTab = (index) => {
|
||
currentGuideTab.value = index;
|
||
// 0: 实用指南 -> guidesData；1: 课件分享 -> coursewareData
|
||
guideList.length = 0;
|
||
if (index === 0) {
|
||
guideList.push(...guidesData);
|
||
} else {
|
||
guideList.push(...coursewareData);
|
||
}
|
||
};
|
||
|
||
// 查看更多实用指南
|
||
const onGuideMore = () => {
|
||
if (currentGuideTab.value == 0) {
|
||
navTo({
|
||
url: "/pages_app/zhinan/zhinan",
|
||
});
|
||
} else {
|
||
navTo({
|
||
url: "/pages_app/ppt/ppt",
|
||
});
|
||
}
|
||
};
|
||
const goNews = () => {
|
||
let url = docUrl + signInfo.news.path;
|
||
// #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}&title=${signInfo.news.title}`,
|
||
});
|
||
// #endif
|
||
};
|
||
// 点击顶部轮播图
|
||
const onBannerClick = (item, index) => {
|
||
console.log(item, index);
|
||
if (!item) return;
|
||
if (index == 0) {
|
||
navTo({
|
||
url: "/pages_app/personInfo/personInfo",
|
||
});
|
||
} else {
|
||
// 如果存在外链path，优先按平台打开
|
||
if (item.path) {
|
||
const encoded = encodeURIComponent(item.path);
|
||
navTo({
|
||
url: `/pages_app/webview/webview?url=${encoded}&title=${item.title}`,
|
||
});
|
||
}
|
||
}
|
||
};
|
||
|
||
// 点击专题E站图片
|
||
const onEsiteClick = (item) => {
|
||
const encoded = encodeURIComponent(item.url);
|
||
uni.navigateTo({
|
||
url: `/pages_app/webview/webview?url=${encoded}&title=${item.name}`,
|
||
});
|
||
};
|
||
const hasTip = ref(false);
|
||
const goMessage = () => {
|
||
navTo({
|
||
url: "/pages_app/msg/msg",
|
||
});
|
||
};
|
||
const getUnReadList = () => {
|
||
api.unReadList({}).then(res => {
|
||
if (res.code === 200 && res.data) {
|
||
let count=0;
|
||
for (const key in res.data) {
|
||
count+= Number(res.data[key]);
|
||
}
|
||
if(count>0){
|
||
hasTip.value=true;
|
||
}else{
|
||
hasTip.value=false;
|
||
}
|
||
// 更新角标数据
|
||
|
||
}
|
||
}).catch(err => {
|
||
console.error('获取未读消息列表失败:', err);
|
||
});
|
||
};
|
||
const downAndSave = (url) => {
|
||
uni.downloadFile({
|
||
url: url,
|
||
success: (res) => {
|
||
if (res.statusCode === 200) {
|
||
uni.saveFile({
|
||
tempFilePath: res.tempFilePath,
|
||
success: (saveRes) => {
|
||
console.log(saveRes);
|
||
console.log("文件保存成功:", saveRes.savedFilePath);
|
||
uni.getSavedFileList({
|
||
success: function (res) {
|
||
console.log("保存的文件列表");
|
||
console.log(res.fileList);
|
||
},
|
||
});
|
||
},
|
||
fail: (err) => {
|
||
console.error("文件保存失败:", err);
|
||
},
|
||
});
|
||
}
|
||
},
|
||
});
|
||
};
|
||
// 实用指南点击事件
|
||
const onGuideClick = (item) => {
|
||
// 如果有PDF链接，直接打开
|
||
if (item.path) {
|
||
const pdfUrl = docUrl + item.path;
|
||
console.log(pdfUrl);
|
||
downAndSave(pdfUrl);
|
||
} else {
|
||
uni.showToast({
|
||
title: "暂无下载链接",
|
||
icon: "none",
|
||
});
|
||
}
|
||
};
|
||
|
||
//测试tabbar功能的方法
|
||
const testTabbar = () => {
|
||
nextTick(() => {
|
||
if (tabbarRef.value) {
|
||
// 设置徽章数量
|
||
tabbarRef.value.setBadge(1, 10);
|
||
|
||
// 显示红点
|
||
tabbarRef.value.showRedDot(2);
|
||
|
||
// 3秒后隐藏红点
|
||
// setTimeout(() => {
|
||
// tabbarRef.value.hideRedDot(2);
|
||
// }, 3000);
|
||
}
|
||
});
|
||
};
|
||
|
||
// 获取tabbar状态
|
||
const getTabbarStatus = () => {
|
||
if (tabbarRef.value) {
|
||
const currentTab = tabbarRef.value.getCurrentTab();
|
||
console.log("当前tab状态:", currentTab);
|
||
}
|
||
};
|
||
|
||
// 获取首页数据
|
||
const getHomeData = async () => {
|
||
try {
|
||
uni.showLoading({ title: "加载中..." });
|
||
|
||
const res = await api.getHomeData();
|
||
|
||
if (res && res.data) {
|
||
const data = res.data;
|
||
hasConsult.value = data.consult_list.count > 0 ? true : false;
|
||
Object.assign(expertDetail, data.expertDetail);
|
||
|
||
// 未读消息红点
|
||
hasUnread.value = !!data.has_unread;
|
||
|
||
// 签到状态
|
||
isSignedIn.value = data.sign_in === 1;
|
||
|
||
// 福利待领取弹窗
|
||
if (data.welfare_notice && data.welfare_notice.receive_notice) {
|
||
visible.value = true;
|
||
}
|
||
|
||
// 顶部轮播图：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 || "",
|
||
title: item.title || "",
|
||
}))
|
||
);
|
||
} 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.icons_list.map((item) => ({
|
||
icon: item.img || "",
|
||
text: item.name || "",
|
||
}))
|
||
);
|
||
gridList.push({
|
||
icon: more,
|
||
text: "更多",
|
||
});
|
||
}
|
||
|
||
// 消息通知：meeting_list -> noticeList（含日期）
|
||
if (Array.isArray(data.meeting_list) && data.meeting_list.length > 0) {
|
||
noticeList.length = 0;
|
||
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站：esite_list -> specialList（仅图片，最多展示3个）
|
||
if (Array.isArray(data.esite_list) && data.esite_list.length > 0) {
|
||
specialList.length = 0;
|
||
specialList.push(
|
||
...data.esite_list.slice(0, 3).map((item) => ({
|
||
image: item.img_path || "",
|
||
name: item.name || "",
|
||
url: item.url || "",
|
||
}))
|
||
);
|
||
}
|
||
|
||
// 精品课：excellencourse_list -> courseList
|
||
if (
|
||
Array.isArray(data.excellencourse_list) &&
|
||
data.excellencourse_list.length > 0
|
||
) {
|
||
courseList.length = 0;
|
||
courseList.push(
|
||
...data.excellencourse_list.map((item) => ({
|
||
title: item.title || "",
|
||
status: item.video_num != null ? `共${item.video_num}讲` : "",
|
||
avatar: item.index_img || "",
|
||
id: item.id || "",
|
||
}))
|
||
);
|
||
}
|
||
|
||
// 精彩回放：video_list -> replayList
|
||
if (Array.isArray(data.video_list) && data.video_list.length > 0) {
|
||
replayList.length = 0;
|
||
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",
|
||
}))
|
||
);
|
||
}
|
||
|
||
// 实用指南：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) {
|
||
uni.showToast({
|
||
title: "数据加载失败",
|
||
icon: "none",
|
||
});
|
||
} finally {
|
||
uni.hideLoading();
|
||
}
|
||
};
|
||
|
||
// 页面滚动监听
|
||
onPageScroll((e) => {
|
||
scrollTop.value = e.scrollTop;
|
||
|
||
});
|
||
|
||
// 页面加载
|
||
onLoad((options) => {
|
||
if(options.from == 'push'){
|
||
app.globalData.plAd=false;
|
||
showAd.value=false;
|
||
}
|
||
getStartpage();
|
||
// 获取首页数据
|
||
getHomeData();
|
||
// 页面加载完成后测试tabbar功能
|
||
testTabbar();
|
||
});
|
||
|
||
// 页面显示
|
||
onShow(() => {
|
||
//imLogin();
|
||
if (conversationList.value?.length) {
|
||
subscribeUserStatus(conversationList?.value);
|
||
}
|
||
|
||
|
||
handleReadMsg();
|
||
getUnReadList();
|
||
});
|
||
|
||
// 跳转到精品课首页
|
||
const goToCourseHome = () => {
|
||
uni.navigateTo({
|
||
url: "/pages_course/course/course",
|
||
});
|
||
};
|
||
// 签到点击事件
|
||
const onSignClick = async () => {
|
||
// 如果已经签到，显示提示
|
||
if (isSignedIn.value) {
|
||
hasSign.value = true;
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 调用添加积分接口
|
||
const res = await api.addBonusPointsN({
|
||
score_type: 1,
|
||
});
|
||
|
||
if (res && res.code == 1) {
|
||
// 签到成功
|
||
isSignedIn.value = true;
|
||
uni.showToast({
|
||
title: "签到成功，获得" + res.bonuspoints + "积分",
|
||
icon: "none",
|
||
});
|
||
Object.assign(signInfo, res);
|
||
|
||
// 显示签到弹窗
|
||
showSign.value = true;
|
||
} else {
|
||
uni.showToast({
|
||
title: res?.msg || "签到失败",
|
||
icon: "none",
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error("签到失败:", error);
|
||
uni.showToast({
|
||
title: "签到失败，请重试",
|
||
icon: "none",
|
||
});
|
||
}
|
||
};
|
||
onUnmounted(() => {
|
||
conversationListWatch();
|
||
connectWatch();
|
||
});
|
||
// 暴露方法给父组件（如果需要）
|
||
defineExpose({
|
||
testTabbar,
|
||
getTabbarStatus,
|
||
goToCourseHome,
|
||
onSignClick,
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.signwrap {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
}
|
||
.signbox {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
z-index: 0;
|
||
}
|
||
.signbox .close {
|
||
position: absolute;
|
||
right: 0;
|
||
height: 60rpx;
|
||
width: 60rpx;
|
||
opacity: 0;
|
||
background: #fff;
|
||
z-index: 2;
|
||
border-radius: 50%;
|
||
}
|
||
.signcontent {
|
||
width: 100%;
|
||
top: 0;
|
||
position: absolute;
|
||
z-index: 1;
|
||
}
|
||
.signcontent .day {
|
||
margin-top: 384rpx;
|
||
text-align: center;
|
||
}
|
||
.signtotal {
|
||
margin-top: 30rpx;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
}
|
||
.signcontinue {
|
||
font-size: 30rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.signcontent .tip {
|
||
margin-top: 40rpx;
|
||
color: red;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
}
|
||
.signcontent .news {
|
||
margin: 196rpx 60rpx 0;
|
||
height: 116rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
.signbg {
|
||
width: 604rpx;
|
||
height: 964rpx;
|
||
}
|
||
.container {
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
padding-bottom: 120rpx; /* 为tabbar留出空间 */
|
||
}
|
||
|
||
/* 状态栏 */
|
||
.status-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10rpx 30rpx;
|
||
background-color: #ffffff;
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.status-center {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
/* 头部搜索栏 */
|
||
.header {
|
||
top: 0rpx;
|
||
position: fixed;
|
||
left: 0rpx;
|
||
right: 0rpx;
|
||
height: 210rpx;
|
||
z-index: 99;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.header-content {
|
||
padding: 0 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 80rpx;
|
||
}
|
||
|
||
.header-left,
|
||
.header-right {
|
||
position: relative;
|
||
}
|
||
|
||
.calendar-icon,
|
||
.message-icon {
|
||
position: relative;
|
||
}
|
||
|
||
.red-dot {
|
||
position: absolute;
|
||
top: -4rpx;
|
||
right: -4rpx;
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
background-color: #ff0000;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.search-container {
|
||
flex: 1;
|
||
position: relative;
|
||
}
|
||
.search-container .mask {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 1;
|
||
}
|
||
/* 轮播图 */
|
||
.banner-section {
|
||
position: relative;
|
||
}
|
||
|
||
/* 消息通知 */
|
||
.notice-section {
|
||
margin: 20rpx 0rpx;
|
||
background: url("@/static/lunbo_bg.png") no-repeat 0 0;
|
||
|
||
background-size: cover;
|
||
|
||
overflow: hidden;
|
||
}
|
||
|
||
.notice-container {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0rpx 30rpx;
|
||
}
|
||
|
||
.notice-icon {
|
||
margin-right: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.notice-content {
|
||
flex: 1;
|
||
height: 94rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.notice-swiper {
|
||
height: 100%;
|
||
}
|
||
|
||
.notice-item {
|
||
height: 94rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
cursor: pointer;
|
||
}
|
||
|
||
.notice-text {
|
||
flex: 1;
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.notice-time {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.notice-more {
|
||
margin-left: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 10rpx;
|
||
}
|
||
|
||
.swiper-box {
|
||
height: 400rpx;
|
||
}
|
||
|
||
.banner-item {
|
||
height: 100%;
|
||
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;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
padding: 40rpx;
|
||
color: white;
|
||
}
|
||
|
||
.banner-text {
|
||
z-index: 2;
|
||
}
|
||
|
||
.banner-title {
|
||
display: block;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.banner-subtitle {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.banner-scene {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
font-size: 48rpx;
|
||
}
|
||
|
||
/* 功能网格 */
|
||
.grid-section {
|
||
padding: 30rpx;
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.grid-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 40rpx 20rpx;
|
||
position: relative;
|
||
.red-dot {
|
||
position: absolute;
|
||
top: 22rpx;
|
||
right: 18rpx;
|
||
background-color: red;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.grid-icon {
|
||
font-size: 64rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.grid-text {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 专题E站 */
|
||
.special-section {
|
||
margin: 30rpx;
|
||
}
|
||
|
||
.section-title {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.title-text {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.special-content {
|
||
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 {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
border-radius: 16rpx;
|
||
color: white;
|
||
}
|
||
|
||
.special-left {
|
||
flex: 1;
|
||
}
|
||
|
||
.special-title {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.special-desc {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.special-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.special-icon {
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
.special-arrow {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 精品课 */
|
||
.course-section {
|
||
background-color: #fff;
|
||
padding-bottom: 40rpx;
|
||
}
|
||
|
||
.section-header {
|
||
padding: 35rpx 30rpx 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.section-title-text {
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.more-link {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.more-text {
|
||
font-size: 30rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.course-scroll {
|
||
white-space: nowrap;
|
||
margin-left: 30rpx;
|
||
margin-right: 30rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.course-list {
|
||
display: inline-flex;
|
||
gap: 30rpx;
|
||
width: auto;
|
||
padding-right: 60rpx; /* 让最后一项与右边留出更大间距 */
|
||
}
|
||
|
||
.course-item {
|
||
display: inline-block;
|
||
background-color: #f4f4f4;
|
||
width: 464rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.course-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.course-icon {
|
||
font-size: 48rpx;
|
||
}
|
||
|
||
.course-ribbon {
|
||
background-color: #007aff;
|
||
color: white;
|
||
padding: 4rpx 16rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.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 {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: #8b2316;
|
||
margin: 20rpx;
|
||
text-align: right;
|
||
padding-bottom: 25rpx;
|
||
}
|
||
|
||
.course-teacher {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.course-footer {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.course-tags {
|
||
display: flex;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.tag {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
/* 精彩回放 */
|
||
.replay-section {
|
||
margin: 30rpx;
|
||
}
|
||
|
||
.replay-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.replay-item {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.replay-card {
|
||
background-color: white;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.replay-card:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.replay-image {
|
||
/* 不再使用固定高容器，保留占位以防其它样式引用 */
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.doctor-avatar {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
/* 新增：精彩回放图片自适应 */
|
||
.replay-img {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
|
||
.replay-content {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.replay-text {
|
||
font-size: 26rpx;
|
||
height: 72rpx;
|
||
color: #333;
|
||
line-height: 1.4;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* 实用指南 */
|
||
.guide-section {
|
||
background: white;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.guide-section .bg {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 5rpx;
|
||
z-index: 0;
|
||
}
|
||
.guide-tabs {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 35rpx 30rpx;
|
||
}
|
||
|
||
.tab-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 0 20rpx;
|
||
cursor: pointer;
|
||
}
|
||
.guide-tabs .tab-item:nth-child(2) {
|
||
margin-left: -170rpx;
|
||
}
|
||
.tab-text {
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.tab-item.active .tab-text {
|
||
color: #000;
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tab-underline {
|
||
width: 64rpx;
|
||
height: 4rpx;
|
||
background-color: #8b2316;
|
||
border-radius: 2rpx;
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.tab-more {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
/* padding: 10rpx 20rpx; */
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.guide-content {
|
||
padding: 20rpx 30rpx;
|
||
}
|
||
|
||
.guide-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.guide-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.guide-more {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.guide-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.guide-item {
|
||
display: flex;
|
||
background: #f4f4f4;
|
||
border-radius: 10rpx;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
|
||
cursor: pointer;
|
||
}
|
||
|
||
.guide-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.guide-item:active {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.guide-info {
|
||
flex: 1;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.guide-item-title {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.guide-item-desc {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
line-height: 1.4;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.guide-action {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
color: #007aff;
|
||
font-size: 28rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.action-view {
|
||
font-size: 24rpx;
|
||
color: #8d2316;
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 750rpx) {
|
||
.course-item {
|
||
width: 500rpx;
|
||
}
|
||
|
||
.grid-item {
|
||
padding: 30rpx 10rpx;
|
||
}
|
||
|
||
.grid-icon {
|
||
font-size: 56rpx;
|
||
}
|
||
|
||
.replay-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 15rpx;
|
||
}
|
||
|
||
.replay-image {
|
||
height: 180rpx;
|
||
}
|
||
|
||
.replay-text {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.guide-tabs {
|
||
padding: 15rpx 0;
|
||
}
|
||
|
||
.tab-text {
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.guide-content {
|
||
padding: 15rpx 20rpx;
|
||
}
|
||
|
||
.guide-item-title {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.guide-item-desc {
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.action-view {
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
:deep(.uni-grid-item__box) {
|
||
border: none !important;
|
||
}
|
||
:deep(.uni-grid) {
|
||
border: none !important;
|
||
}
|
||
.notice-cell {
|
||
display: flex;
|
||
height: 94rpx;
|
||
align-items: center;
|
||
}
|
||
.timebox {
|
||
margin-top: -5rpx;
|
||
}
|
||
.timebox .top {
|
||
display: flex;
|
||
}
|
||
.timebox .date {
|
||
width: 129rpx;
|
||
height: 31rpx;
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
background-size: cover;
|
||
background: url("@/static/bo_bg.png") no-repeat 0 0;
|
||
}
|
||
.bar {
|
||
width: 2rpx;
|
||
height: 58rpx;
|
||
margin: 0 14rpx;
|
||
background: #c5c5c5;
|
||
border-radius: 1rpx;
|
||
}
|
||
:deep(.uni-searchbar__box) {
|
||
height: 60rpx !important;
|
||
}
|
||
.ad-container {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: #000;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.ad-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
|
||
.skip-button {
|
||
position: absolute;
|
||
top: 60rpx;
|
||
right: 30rpx;
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
border-radius: 40rpx;
|
||
padding: 16rpx 24rpx;
|
||
z-index: 10000;
|
||
}
|
||
|
||
.skip-text {
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.bottom-button {
|
||
position: absolute;
|
||
bottom: 100rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
border-radius: 50rpx;
|
||
padding: 24rpx 60rpx;
|
||
box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
|
||
z-index: 10000;
|
||
}
|
||
|
||
.button-text {
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
</style>
|