xinyang5yuan-web/pages/phone_index.vue
2025-04-15 10:44:28 +08:00

714 lines
24 KiB
Vue

<template>
<div class="section_3 flex-col">
<div class="group_6 flex-col relative">
<swiper class="swiper-container w-full" v-bind="swiperOptionsNews" @swiper="onSwiperNews"
@slideChange="onSlideChangeNews">
<swiper-slide v-for="item in swiperList">
<img :src="item.rotation_image" class="w-full" />
</swiper-slide>
</swiper>
<div class="flex items-center justify-center gap-2 absolute w-full z-10 bottom-[30px]">
<div v-for="(item, index) in swiperList" class="w-[20px] bg-white h-[3px] rounded-full"
:class="activeIndex == index ? '' : 'opacity-50'"></div>
</div>
</div>
<!--第二块-->
<div class="flex-col er_back">
<div class="group_17 flex-col z-10">
<div class="box_35 flex-row flex-wrap justify-center gap-4 px-4" style="height: auto; padding: 20px 0;">
<div class="box_22 flex-col w-full mb-6">
<span class="text_59 text-xl">医院信息查询</span>
<span class="text_60 text-sm">Hospital&nbsp;information&nbsp;inquiry</span>
<div class="group_26 flex-col mt-2">
<input type="text" class="text_61" v-model="searchContent" placeholder="请输入您要查询的内容">
<NuxtLink :to="'/phone_search/' + searchContent">
<div class="group_27 flex-col">
<div class="group_28 flex-col">
<img src="public/images/ser.png" />
</div>
</div>
</NuxtLink>
</div>
</div>
</div>
<div class="box_35 flex-row flex-wrap justify-center px-4 gap-4">
<div class="group_36 flex-row flex-wrap justify-between">
<div class="box_23 flex-col w-[48%] mb-4" @click="openUrl(0)">
<div class="image-wrapper_7 flex-col i2">
<img class="image_16 w-12 h-12" referrerpolicy="no-referrer"
src="public/images/k5.png" />
</div>
<span class="text-sm">医院概况</span>
<span class="text-xs">Hospital&nbsp;Overview</span>
</div>
<div class="box_24 flex-col w-[48%] mb-4" @click="openUrl(1)"
style="background-color: #BDAA82;">
<div class="image-wrapper_7 flex-col i2">
<img class="image_16 w-12 h-12" referrerpolicy="no-referrer"
src="public/images/k1.png" />
</div>
<span class="text-sm">患者服务</span>
<span class="text-xs">Patient Services</span>
</div>
<div class="box_24 flex-col w-[48%] mb-4" @click="openUrl(0)"
style="background-color: #1F96AE;">
<div class="image-wrapper_7 flex-col i2">
<img class="label_5 w-12 h-12" referrerpolicy="no-referrer"
src="public/images/k4.png" />
</div>
<span class="text-sm">医院位置</span>
<span class="text-xs">Hospital location</span>
</div>
<div class="box_24 flex-col w-[48%] mb-4" @click="openUrl(2)"
style="background-color: #ffffff;color: #000;">
<div class="image-wrapper_7 flex-col i2">
<img class="label_5 w-12 h-12" referrerpolicy="no-referrer"
src="public/images/k6.png" />
</div>
<span class="text-sm">紧急服务</span>
<span class="text-xs">Emergency services</span>
</div>
<div class="box_24 flex-col w-[48%] mb-4" @click="openUrl(3)"
style="background-color: #466C9A;;">
<div class="image-wrapper_7 flex-col i2">
<img class="label_5 w-12 h-12" referrerpolicy="no-referrer"
src="public/images/k2.png" />
</div>
<span class="text-sm">医生团队</span>
<span class="text-xs">Doctor team</span>
</div>
<div class="box_24 flex-col w-[48%] mb-4" @click="openUrl(4)"
style="background-color: #B8C489;">
<div class="image-wrapper_7 flex-col i2">
<img class="label_5 w-12 h-12" referrerpolicy="no-referrer"
src="public/images/k3.png" />
</div>
<span class="text-sm">科室介绍</span>
<span class="text-xs">Department Introduction</span>
</div>
</div>
</div>
</div>
<div class="flex-col z-10 px-4">
<img class="w-full mb-4" referrerpolicy="no-referrer" :src="hospitalInfo.image" />
<div class="box_26 flex-col">
<div class="group_38 flex-row justify-between items-center mb-2">
<div class="image-wrapper_10 flex-col">
<img class="label_6 w-8 h-8" referrerpolicy="no-referrer" src="public/images/k7.png" />
</div>
<span class="text_67 text-lg font-medium">医院简介</span>
</div>
<span class="text_68 text-sm leading-relaxed">
{{ hospitalInfo.description }}
</span>
</div>
</div>
<div class="z-10 flex-col gap-8 px-4 py-6">
<!--通知公告-->
<div class="w-full">
<div class="flex justify-between items-center mb-4">
<div class="flex items-center">
<img class="label_3 w-6 h-6 mr-2" referrerpolicy="no-referrer" src="public/images/c2.png" />
<span class="text_38 text-lg">通知公告</span>
</div>
<div class="flex items-center border border-black px-3 py-1 rounded-full" @click="openUrl(5)">
<span class="text_39 text-xs">查看更多</span>
<div class="group_22 flex-col ml-1">
<img src="public/images/right.png" class="w-4 h-4" />
</div>
</div>
</div>
<div>
<div v-for="(item, index) in msgList" class="mb-4" @click="goDetail(item)">
<div v-if="index == 0" class="mb-2">
<img class="image_13 w-full" referrerpolicy="no-referrer" :src="item.news_image[0]" />
</div>
<div class="mb-2">
<span class="text_41 text-base font-medium">{{ item.news_title }}</span>
</div>
<div class="mb-2">
<span class="text_43 text-sm text-gray-600">
{{ item.news_titleshort }}
</span>
</div>
<div class="mb-2">
<span class="text_45 text-xs text-gray-400">{{ item.showtime }}</span>
</div>
<div v-if="index < 2" class="mb-2">
<div class="box_19 w-full h-px bg-gray-200"></div>
</div>
</div>
</div>
</div>
<!--医院动态-->
<div class="w-full">
<div class="flex justify-between items-center mb-4">
<div class="flex items-center">
<img class="label_3 w-6 h-6 mr-2" referrerpolicy="no-referrer" src="public/images/c1.png" />
<span class="text_38 text-lg">医院动态</span>
</div>
<div class="flex items-center border border-black px-3 py-1 rounded-full" @click="openUrl(6)">
<span class="text_39 text-xs">查看更多</span>
<div class="group_22 flex-col ml-1">
<img src="public/images/right.png" class="w-4 h-4" />
</div>
</div>
</div>
<div>
<div v-for="(item, index) in dtList" class="mb-4" @click="goDetail(item)">
<div v-if="index == 0" class="mb-2">
<img class="image_13 w-full" referrerpolicy="no-referrer"
:src="item.news_image[0]" />
</div>
<div class="mb-2">
<span class="text_41 text-base font-medium">{{ item.news_title }}</span>
</div>
<div class="mb-2">
<span class="text_43 text-sm text-gray-600">
{{ item.news_titleshort }}
</span>
</div>
<div class="mb-2">
<span class="text_45 text-xs text-gray-400">{{ item.showtime }}</span>
</div>
<div v-if="index < 2" class="mb-2">
<div class="box_19 w-full h-px bg-gray-200"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box_33 flex-col px-4 py-6">
<div class="box_2 flex-col">
<div class="text-wrapper_47 flex-row mb-4"><span class="text_13 text-lg font-medium">医生团队</span></div>
<div class="box_34 flex-row relative">
<swiper class="swiper-container h-full w-full" v-bind="swiperOptionsDoctor" @swiper="onSwiperDoctor"
@slideChange="onSlideChangeDoctor">
<swiper-slide v-for="item in ysList" @click="goYsDetail(item)">
<div class="group_10 flex-col p-2">
<div class="image-text_15 flex-col justify-between">
<img class="image_3 w-full" referrerpolicy="no-referrer"
:src="item.news_image[0]"/>
<div class="text-group_13 flex-row justify-between mt-2">
<span class="text_14 text-base font-medium">{{ item.news_title }}</span>
<span class="text_15 text-xs text-gray-600">{{ item.news_key }}</span>
</div>
</div>
<div class="text_16 text-sm my_text_2" style="width: 145px;height: 85px;">{{ item.news_auto }}</div>
</div>
</swiper-slide>
</swiper>
</div>
<div class="flex-row mt-4">
<div class="flex items-center justify-center gap-2 w-full">
<div v-for="(item, index) in ysTotal" class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
:class="activedIndex == index ? '' : 'opacity-50'"></div>
</div>
</div>
</div>
</div>
<div class="bg-white pb-[30px] px-4">
<div class="block_6 flex-row justify-around mb-4">
<div v-for="item in bottomList" @click="cardOpen(item)" :class="['text-wrapper_12', card == item.id ? 'text-wrapper_12-is' : '', 'flex-col']">
<span class="text_29 text-sm">{{ item.name }}</span>
<div v-if="card == item.id" class="box_7 flex-col"></div>
</div>
</div>
<div class="block_8 flex-row relative">
<swiper class="swiper-container h-full w-full" v-bind="swiperOptionsKK" @swiper="onSwiperKK"
@slideChange="onSlideChangeKK">
<swiper-slide v-for="(item, index) in bottomInfoList" @click="goDetail(item)">
<div class="list-items_1 flex-col p-2">
<img :src="item.news_image[0]" class="w-full h-[150px]" style="object-fit: cover;">
<div class="text-wrapper_13 flex-col mt-2">
<span class="text_33 text-center one-line" style="font-size: 13px;">{{ item.news_title }}</span>
</div>
</div>
</swiper-slide>
</swiper>
</div>
<div class="flex-row mt-4">
<div class="flex items-center justify-center gap-2 w-full">
<div v-for="(item, index) in bottomInfoTotal" class="w-[15px] bg-[#57D1C8] h-[3px] rounded-full"
:class="activedKKIndex == index ? '' : 'opacity-50'"></div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { nextTick, ref, onMounted } from 'vue'
import 'swiper/css'
import { Mousewheel, Navigation, Grid, EffectFade, Autoplay } from 'swiper/modules'
import 'swiper/css/mousewheel'
import 'swiper/css/navigation'
import 'swiper/css/grid'
import 'swiper/css/effect-fade'
import 'swiper/css/autoplay'
import * as swiperAni from '@/assets/animate/animate.js'
import $api from '@/service/webRequest'
import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
import type { Swiper as SwiperType } from 'swiper'
const { locale } = useI18n()
const searchContent = ref('');
const activeIndex = ref(0);
const onSlideChangeNews = (s: any) => {
activeIndex.value = s.realIndex;
}
// Swiper配置
const swiperOptionsNews = {
autoplay: {
delay: 6000,
disableOnInteraction: false,
},
direction: 'horizontal' as 'horizontal' | 'vertical',
speed: 500,
effect: 'fade',
loop: true,
modules: [Navigation, EffectFade, Autoplay],
navigation: {
nextEl: '#swipen_prev',
prevEl: '#swipen_next',
},
}
// banner
let newsSwiper: SwiperType | null = null
const onSwiperNews = (swiper: SwiperType) => {
newsSwiper = swiper
}
// Swiper配置
const swiperOptionsDoctor = {
direction: 'horizontal' as 'horizontal' | 'vertical',
slidesPerView: 2,
slidesPerGroup: 2,
spaceBetween: 10,
speed: 700,
loop: false,
modules: [Navigation],
navigation: {
nextEl: '#swipen_prev',
prevEl: '#swipen_next',
},
}
//医生团队
const activedIndex = ref(0);
let doctorSwiper: SwiperType | null = null
const onSwiperDoctor = (swiper: SwiperType) => {
doctorSwiper = swiper
}
const onSlideChangeDoctor = (s: any) => {
activedIndex.value = s.snapIndex;
}
const swiperOptionsKK = {
direction: 'horizontal' as 'horizontal' | 'vertical',
slidesPerView: 2,
slidesPerGroup: 2,
speed: 700,
loop: false,
modules: [Navigation, Grid],
grid: {
fill: 'row',
rows: 2,
},
navigation: {
nextEl: '#kkswipen_prev',
prevEl: '#kkswipen_next',
},
}
let kkSwiper: SwiperType | null = null;
const activedKKIndex = ref(0);
const onSwiperKK = (swiper: SwiperType) => {
kkSwiper = swiper
}
const onSlideChangeKK = (s: any) => {
activedKKIndex.value = s.snapIndex;
}
const router = useRouter()
onMounted(() => {
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (coMobile) {
router.push('/phone_index')
} else {
router.push('/')
}
getSwiperList();
getHospitalInfo();
getMsgList();
getDtList();
getYsList();
getBottomList();
})
//轮播图
const swiperList = ref([]);
const getSwiperList = () => {
$api.post("/api/index/rotation")
.then((res: any) => {
console.log(res)
swiperList.value = res.data.data;
})
.catch((err) => {
console.dir(err)
})
}
// 通知公告
const msgList = ref([]);
const getMsgList = () => {
$api.post("/api/news/index", { gory_id: 90, page: 1, pageSize: 3 })
.then((res: any) => {
console.log(res)
msgList.value = res.data.data.list;
})
.catch((err) => {
console.dir(err)
})
}
// 医院动态
const dtList = ref([]);
const getDtList = () => {
$api.post("/api/news/index", { gory_id: 91, page: 1, pageSize: 3 })
.then((res: any) => {
console.log(res)
dtList.value = res.data.data.list;
})
.catch((err) => {
console.dir(err)
})
}
// 医生团队
const ysList = ref([]);
const ysTotal = ref(0);
const getYsList = () => {
$api.post("/api/Newsbx/index", { page: 1, pageSize: 9999 })
.then((res: any) => {
console.log(res)
ysList.value = res.data.data.list;
//计算页数
ysTotal.value = Math.ceil(res.data.data.total_count / 2);
})
.catch((err) => {
console.dir(err)
})
}
//医院简介
const hospitalInfo = ref({});
const getHospitalInfo = () => {
$api.post("/api/Broadcast/hospital_overview")
.then((res: any) => {
console.log(res)
hospitalInfo.value = res.data.data;
})
.catch((err) => {
console.dir(err)
})
}
//先进设备等
const card = ref(1);
const bottomList = ref({});
const getBottomList = () => {
$api.post("/api/news/group", { flag: 'index' })
.then((res: any) => {
console.log(res)
bottomList.value = res.data.data;
card.value = res.data.data[0].id;
getBottomInfoList();
})
.catch((err) => {
console.dir(err)
})
}
//先进设备list
const bottomInfoList = ref({});
const bottomInfoTotal = ref(0);
const getBottomInfoList = () => {
$api.post("/api/news/index", { gory_id: card.value, page: 1, pageSize: 999 })
.then((res: any) => {
console.log(res)
bottomInfoList.value = res.data.data.list;
bottomInfoTotal.value = Math.ceil(res.data.data.total_count / 4);
})
.catch((err) => {
console.dir(err)
})
}
const cardOpen = (item) => {
card.value = item.id;
getBottomInfoList();
}
const openUrl = (index: number) => {
if (index == 0) {
window.location.href = `/phone_about`
} else if (index == 1) {
sessionStorage.setItem('group_id', '23')
window.location.href = `/phone_list/23`
} else if (index == 2) {
sessionStorage.setItem('group_id', '87')
window.location.href = `/phone_list/87`
} else if (index == 3) {
sessionStorage.setItem('group_id', '-3')
window.location.href = `/phone_list/-3`
} else if (index == 4) {
sessionStorage.setItem('group_id', '34')
window.location.href = `/phone_list/34`
} else if (index == 5) {
sessionStorage.setItem('group_id', '90')
window.location.href = `/phone_list/90`
} else if (index == 6) {
sessionStorage.setItem('group_id', '91')
window.location.href = `/phone_list/91`
}
else {
sessionStorage.setItem('group_id', '0')
window.location.href = `/`
}
}
// 计算 "YYYY.MM.DD" 格式
const formattedYearMonthDay = (showtime) => {
const date = new Date(showtime);
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, "0");
const day = date.getDate().toString().padStart(2, "0");
return `${year}-${month}-${day}`;
};
const goDetail = (item) => {
sessionStorage.setItem('group_id', '-2')
window.open(`/phone_info/${item.id}`)
}
const goYsDetail = (item) => {
sessionStorage.setItem('group_id', '-3')
window.open(`/phone_ys_info/${item.id}`)
}
</script>
<style lang="scss" scoped>
@import "@/assets/animate/animate.min.css";
@import "@/assets/css/index.css";
/* 添加更多响应式样式 */
.section_3 {
width: 100%;
overflow-x: hidden;
}
.er_back {
padding: 10px;
}
.san_count {
display: flex;
flex-direction: column;
padding: 0 15px;
}
/* 调整标题间距 */
.text_59,
.text_67,
.text_38,
.text_13 {
margin-bottom: 5px;
}
/* 优化按钮样式 */
.text-wrapper_12 {
padding: 8px 12px;
display: flex;
flex-direction: column;
align-items: center;
}
.text-wrapper_12-is {
color: #57D1C8;
}
.box_7 {
height: 2px;
background-color: #57D1C8;
width: 100%;
margin-top: 5px;
}
/* 手机端专用样式 */
@media (max-width: 768px) {
// .flex-col {
// width: 100%;
// }
.group_17 {
width: 100% !important;
}
.box_22 {
width: 100% !important;
margin-bottom: 0px;
}
.group_26 {
width: 66% !important;
}
.group_27 {
left: 245px !important;
height: 39px !important;
}
.group_28 {
margin: 8px 0 0 22px;
}
.group_36 {
height: auto !important;
margin-top: 0px !important;
}
.text_68 {
font-size: 14px;
line-height: 1.6;
}
.box_23 {
width: 48%;
text-align: center;
color: #fff;
height: 145px;
padding-top: 20px;
}
.box_24 {
width: 48%;
text-align: center;
color: #fff;
height: 145px;
padding-top: 20px;
margin-top: 0px;
}
.image_16,
.label_5,
.label_1,
.label_2,
.image_10 {
width: 40px;
height: 40px;
margin: 0 auto;
}
.text_62,
.text_64,
.text_65,
.text-group_6,
.text_35,
.text_36 {
font-size: 14px;
margin-top: 5px;
text-align: center;
}
.text_63,
.paragraph_3,
.text_66,
.text_34,
.paragraph_2,
.text_37 {
font-size: 10px;
text-align: center;
}
.image-wrapper_7 {
margin: 0;
text-align: center;
width: 100%;
}
.box_26 {
margin-left: 0px;
height: auto;
padding: 20px 10px;
margin-top: 0px;
width: 100%;
}
.text_68 {
margin: 0px;
height: auto;
width: 100%;
}
.group_38 {
margin: 0 auto;
padding-bottom: 20px;
}
.image_13 {
height: 100%;
}
.group_10 {
height: 100%;
width: 100%;
}
.image_3 {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-text_15 {
width: 100%;
height: 100%;
}
.box_33 {
padding-top: 20px;
}
.box_34 {
margin-top: 20px;
}
.box_2 {
height: 100%;
}
.text-wrapper_12 {
height: 38px
}
.block_6 {
height: 100%;
}
.block_8 {
height: 100%;
margin-top: 0px;
}
.list-items_1 {
height: 100%;
width: 100%;
}
.text-wrapper_13 {
width: 100%;
}
}
</style>