<template>
|
<view class="index-container">
|
<!-- 添加错误提示 -->
|
<view v-if="error" class="error-tip">
|
{{ error }}
|
</view>
|
|
<!-- 顶部搜索栏 -->
|
<!-- <view class="search-bar">
|
<view class="search-wrapper">
|
<view class="search-box" @tap="goSearch">
|
<text class="iconfont icon-search"></text>
|
<text class="placeholder">搜索医院/科室/医生/疾病</text>
|
</view>
|
<language-switch />
|
</view>
|
</view> -->
|
|
<!-- 轮播图 -->
|
<!-- <swiper class="banner" :indicator-dots="true" :autoplay="true" interval="3000" duration="1000"
|
indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#ffffff">
|
<swiper-item v-for="(item, index) in banners" :key="index">
|
<image :src="item.image" mode="aspectFill" />
|
<view class="banner-text">
|
<text class="title">{{ t(item.titleKey) }}</text>
|
<text class="subtitle">{{ t(item.subtitleKey) }}</text>
|
</view>
|
</swiper-item>
|
</swiper> -->
|
|
<!-- 快速入口 -->
|
<view class="quick-entry">
|
<view
|
class="entry-item"
|
v-for="(item, index) in quickEntries"
|
:key="index"
|
@tap="navigateTo(item.path, item.type)"
|
>
|
<view class="icon-wrapper" :style="{ background: item.bgColor }">
|
<image :src="item.icon" mode="aspectFit" />
|
</view>
|
<text>{{ $t(item.titleKey) }}</text>
|
</view>
|
</view>
|
<!-- <view class="quick-entry">
|
<view
|
class="entry-item"
|
v-for="(item, index) in quickEntriess"
|
:key="index"
|
@tap="navigateTo(item.path, item.type)"
|
>
|
<view class="icon-wrapper" :style="{ background: item.bgColor }">
|
<image :src="item.icon" mode="aspectFit" />
|
</view>
|
<text>{{ $t(item.titleKey) }}</text>
|
</view>
|
</view> -->
|
|
<!-- 医院资讯 -->
|
<view class="section news-section">
|
<view class="section-header">
|
<text class="title">{{ $t("index.news.title") }}</text>
|
<view class="more" @tap="navigateTo('/pages/news/list')">
|
<text>{{ $t("common.more") }}</text>
|
<text class="iconfont icon-arrow-right"></text>
|
</view>
|
</view>
|
<view class="news-list">
|
<view
|
class="news-item"
|
v-for="(item, index) in news"
|
:key="index"
|
@tap="viewNews(item)"
|
>
|
<view class="news-image">
|
<image :src="item.image" mode="aspectFill" />
|
<view class="overlay"></view>
|
</view>
|
<view class="news-info">
|
<text class="title">{{ $t(item.titleKey) }}</text>
|
<view class="meta">
|
<text class="tag" v-if="item.tagKey">{{ $t(item.tagKey) }}</text>
|
<text class="date">{{ item.date }}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 特色医疗 -->
|
<!-- <view class="section featured-section">
|
<view class="section-header">
|
<text class="title">{{ $t("index.featured.title") }}</text>
|
<view class="more">
|
<text>{{ $t("common.viewAll") }}</text>
|
<text class="iconfont icon-arrow-right"></text>
|
</view>
|
</view>
|
<scroll-view
|
scroll-x
|
class="featured-list"
|
enhanced
|
:show-scrollbar="false"
|
:bounces="false"
|
>
|
<view
|
class="featured-item"
|
v-for="(item, index) in featuredServices"
|
:key="index"
|
@tap="viewFeatured(item)"
|
>
|
<image :src="item.image" mode="aspectFill" />
|
<view class="overlay"></view>
|
<view class="featured-info">
|
<text class="title">{{ $t(item.titleKey) }}</text>
|
<text class="desc">{{ $t(item.descKey) }}</text>
|
<view class="btn">{{ $t("common.viewMore") }}</view>
|
</view>
|
</view>
|
</scroll-view>
|
</view> -->
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, onMounted, getCurrentInstance } from "vue";
|
import LanguageSwitch from "@/components/language-switch";
|
import { useI18n } from "vue-i18n";
|
|
const { t } = useI18n();
|
const { proxy } = getCurrentInstance();
|
const error = ref("");
|
|
const banners = ref([
|
{
|
image: "/static/banner/banner1.png",
|
titleKey: "index.banner.smartMedical",
|
subtitleKey: "index.banner.convenientService",
|
},
|
{
|
image: "/static/banner/banner2.png",
|
titleKey: "index.banner.specializedMedical",
|
subtitleKey: "index.banner.crossBorder",
|
},
|
]);
|
|
const quickEntries = ref([
|
{
|
titleKey: "index.quickEntry.CaseDetails",
|
icon: "/static/icons/appointment.png",
|
path: "/pages/case/CaseDetails",
|
bgColor: "linear-gradient(135deg, #0f95b0, #89C4C1)",
|
},
|
{
|
titleKey: "index.quickEntry.caseindex",
|
icon: "/static/icons/record.png",
|
path: "/pages/case/index",
|
bgColor: "linear-gradient(135deg, #4DCEA5, #2FB4AE)",
|
},
|
{
|
titleKey: "index.quickEntry.transfer",
|
icon: "/static/icons/record.png",
|
path: "/pages/case/transfer",
|
bgColor: "linear-gradient(135deg, #FF9B6A, #FF6B8B)",
|
},
|
{
|
titleKey: "index.quickEntry.CaseProgress",
|
icon: "/static/icons/department.png",
|
path: "/pages/records/medical",
|
bgColor: "linear-gradient(135deg, #747CF9, #9B7CF9)",
|
},
|
]);
|
const quickEntriess = ref([
|
|
{
|
titleKey: "index.quickEntry.appointment",
|
icon: "/static/icons/appointment.png",
|
path: "/pages/appointment/index",
|
type: "tab",
|
bgColor: "linear-gradient(135deg, #0f95b0, #89C4C1)",
|
},
|
{
|
titleKey: "index.quickEntry.vaccine",
|
icon: "/static/icons/vaccine.png",
|
path: "/pages/vaccine/index",
|
bgColor: "linear-gradient(135deg, #FF9B6A, #FF6B8B)",
|
},
|
{
|
titleKey: "index.quickEntry.records",
|
icon: "/static/icons/record.png",
|
path: "/pages/records/medical",
|
bgColor: "linear-gradient(135deg, #4DCEA5, #2FB4AE)",
|
},
|
{
|
titleKey: "index.quickEntry.department",
|
icon: "/static/icons/department.png",
|
path: "/pages/department/guide",
|
bgColor: "linear-gradient(135deg, #747CF9, #9B7CF9)",
|
},
|
]);
|
|
const news = ref([
|
{
|
titleKey: "index.news.vaccine",
|
date: "2025-11-20",
|
image: "/static/news/news1.png",
|
tagKey: "common.tag.new",
|
},
|
{
|
titleKey: "index.news.cooperation",
|
date: "2024-03-19",
|
image: "/static/news/news2.png",
|
},
|
]);
|
|
const featuredServices = ref([
|
{
|
titleKey: "index.featured.tcm",
|
descKey: "index.featured.tcmDesc",
|
image: "/static/featured/tcm.png",
|
path: "/pages/featured/tcm",
|
},
|
{
|
titleKey: "index.featured.crossBorder",
|
descKey: "index.featured.crossBorderDesc",
|
image: "/static/featured/cross-border.png",
|
path: "/pages/featured/cross-border",
|
},
|
{
|
titleKey: "index.featured.expert",
|
descKey: "index.featured.expertDesc",
|
image: "/static/featured/expert.png",
|
path: "/pages/featured/expert",
|
},
|
]);
|
|
const navigateTo = (path, type) => {
|
if (type === "tab") {
|
uni.reLaunch({
|
url: path,
|
fail: (err) => {
|
console.error("reLaunch fail:", err);
|
uni.switchTab({
|
url: path,
|
fail: (err2) => {
|
console.error("switchTab fail:", err2);
|
uni.navigateTo({
|
url: path,
|
fail: (err3) => {
|
console.error("navigateTo fail:", err3);
|
},
|
});
|
},
|
});
|
},
|
});
|
} else {
|
uni.navigateTo({
|
url: path,
|
fail: (err) => {
|
console.error("navigateTo fail:", err);
|
},
|
});
|
}
|
};
|
|
const viewNews = (news) => {
|
uni.navigateTo({
|
url: `/pages/news/detail?id=${news.id}`,
|
});
|
};
|
|
// 跳转到搜索页
|
const goSearch = () => {
|
uni.navigateTo({
|
url: "/pages/search/index",
|
});
|
};
|
|
// 查看特色医疗
|
const viewFeatured = (item) => {
|
if (item.path) {
|
uni.navigateTo({
|
url: item.path,
|
fail: (err) => {
|
console.error("特色医疗跳转失败:", err);
|
uni.showToast({
|
title: "该功能即将上线",
|
icon: "none",
|
});
|
},
|
});
|
} else {
|
uni.showToast({
|
title: "该功能即将上线",
|
icon: "none",
|
});
|
}
|
};
|
|
onMounted(() => {
|
try {
|
console.log("页面加载");
|
console.log("当前语言:", proxy.$i18n.locale);
|
console.log("语言包:", proxy.$i18n.messages);
|
} catch (err) {
|
error.value = err.message;
|
console.error("页面加载错误:", err);
|
}
|
});
|
</script>
|
|
<style lang="scss">
|
.index-container {
|
min-height: 100vh;
|
background: #f5f6fa;
|
|
.search-bar {
|
position: sticky;
|
top: 0;
|
z-index: 100;
|
padding: 20rpx 30rpx;
|
background: #fff;
|
|
.search-wrapper {
|
display: flex;
|
align-items: center;
|
gap: 20rpx;
|
}
|
|
.search-box {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
height: 72rpx;
|
background: #f5f6fa;
|
border-radius: 36rpx;
|
padding: 0 30rpx;
|
|
.icon-search {
|
width: 32rpx;
|
height: 32rpx;
|
margin-right: 20rpx;
|
}
|
|
input {
|
flex: 1;
|
font-size: 28rpx;
|
color: #333;
|
}
|
}
|
}
|
|
.banner {
|
height: 360rpx;
|
position: relative;
|
|
swiper-item {
|
position: relative;
|
}
|
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
|
.banner-text {
|
position: absolute;
|
left: 40rpx;
|
bottom: 40rpx;
|
color: #fff;
|
|
.title {
|
font-size: 40rpx;
|
font-weight: bold;
|
margin-bottom: 10rpx;
|
display: block;
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
}
|
|
.subtitle {
|
font-size: 28rpx;
|
opacity: 0.9;
|
display: block;
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
}
|
}
|
}
|
|
.quick-entry {
|
display: flex;
|
padding: 40rpx 20rpx;
|
background: #fff;
|
margin-bottom: 20rpx;
|
|
.entry-item {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.icon-wrapper {
|
width: 100rpx;
|
height: 100rpx;
|
border-radius: 30rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 16rpx;
|
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
image {
|
width: 50rpx;
|
height: 50rpx;
|
}
|
}
|
|
text {
|
font-size: 26rpx;
|
color: #333;
|
}
|
}
|
}
|
|
.section {
|
background: #fff;
|
margin-bottom: 20rpx;
|
padding: 30rpx;
|
|
.section-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 30rpx;
|
|
.title {
|
font-size: 34rpx;
|
font-weight: bold;
|
color: #333;
|
position: relative;
|
padding-left: 20rpx;
|
|
&:before {
|
content: "";
|
position: absolute;
|
left: 0;
|
top: 50%;
|
transform: translateY(-50%);
|
width: 6rpx;
|
height: 30rpx;
|
background: #0066cc;
|
border-radius: 3rpx;
|
}
|
}
|
|
.more {
|
display: flex;
|
align-items: center;
|
color: #666;
|
font-size: 26rpx;
|
|
.icon-arrow-right {
|
width: 26rpx;
|
height: 26rpx;
|
margin-left: 6rpx;
|
}
|
}
|
}
|
}
|
|
.news-list {
|
.news-item {
|
position: relative;
|
margin-bottom: 30rpx;
|
border-radius: $radius-lg;
|
overflow: hidden;
|
box-shadow: $shadow-md;
|
|
.news-image {
|
position: relative;
|
height: 360rpx;
|
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
|
.overlay {
|
position: absolute;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
height: 50%;
|
background: linear-gradient(
|
to bottom,
|
transparent,
|
rgba(0, 0, 0, 0.7)
|
);
|
}
|
}
|
|
.news-info {
|
position: absolute;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
padding: 30rpx;
|
z-index: 1;
|
|
.title {
|
font-size: 32rpx;
|
color: #fff;
|
font-weight: bold;
|
margin-bottom: 16rpx;
|
@include multi-ellipsis(2);
|
}
|
|
.meta {
|
display: flex;
|
align-items: center;
|
|
.tag {
|
font-size: 22rpx;
|
color: #fff;
|
background: $primary-color;
|
padding: 4rpx 12rpx;
|
border-radius: $radius-sm;
|
margin-right: 16rpx;
|
}
|
|
.date {
|
font-size: 24rpx;
|
color: rgba(255, 255, 255, 0.8);
|
}
|
}
|
}
|
}
|
}
|
|
.featured-list {
|
margin: 0 -30rpx;
|
padding: 0 30rpx;
|
white-space: nowrap;
|
|
.featured-item {
|
display: inline-block;
|
width: 400rpx;
|
height: 500rpx;
|
margin-right: 20rpx;
|
border-radius: $radius-lg;
|
overflow: hidden;
|
position: relative;
|
box-shadow: $shadow-md;
|
|
&:last-child {
|
margin-right: 0;
|
}
|
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
|
.overlay {
|
position: absolute;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
height: 60%;
|
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8));
|
}
|
|
.featured-info {
|
position: absolute;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
padding: 30rpx;
|
z-index: 1;
|
|
.title {
|
font-size: 34rpx;
|
color: #fff;
|
font-weight: bold;
|
margin-bottom: 12rpx;
|
display: block;
|
}
|
|
.desc {
|
font-size: 26rpx;
|
color: rgba(255, 255, 255, 0.8);
|
margin-bottom: 20rpx;
|
display: block;
|
}
|
|
.btn {
|
display: inline-block;
|
font-size: 26rpx;
|
color: #fff;
|
background: rgba($primary-color, 0.3);
|
border: 1rpx solid rgba(255, 255, 255, 0.5);
|
padding: 10rpx 30rpx;
|
border-radius: $radius-xl;
|
backdrop-filter: blur(10px);
|
}
|
}
|
|
&:active {
|
transform: scale(0.98);
|
}
|
}
|
}
|
|
.error-tip {
|
padding: 20rpx;
|
background: #fff;
|
color: #f56c6c;
|
text-align: center;
|
}
|
}
|
</style>
|
