Bodk.MiniAPP.Web/src/pages/Healthy01.vue

<template>
  <div class="container1" style="padding: 10px 16px" v-show="!isShowVideo">
    <Swiper
      class="swiper"
      :slidesPerView="1"
      :spaceBetween="30"
      :speed="1400"
      :loop="true"
      :modules="[Autoplay, Pagination]"
      :autoplay="{
        delay: 2000,
        disableOnInteraction: false,
      }"
      :pagination="{ clickable: true }"
    >
      <SwiperSlide v-for="(props, index) in swiperData" :key="`blog-slider-${index}`">
        <img :src="props.image" alt="" class="img" @click="handleNav('/health')" />
      </SwiperSlide>
    </Swiper>
    <CustomTransition>
      <div class="card-main">
        <div class="about-card1 card-profile-image">
          <div class="card-profile-image__image-container" @click="handleNav('/reportQuery')">
            <div class="text">
              <p class="title font-color">查报告</p>
              <p class="subtitle font-color">专家解读特惠</p>
            </div>
            <img src="../assets/image/index1/cbg.png" alt="Landing bio image" class="image" />
          </div>
        </div>
        <div class="about-card2 card-profile-image" @click="handleNav({ name: 'Contact', params: { type: 1 } })">
          <div class="card-profile-image__image-container">
            <div class="text">
              <p class="title font-color">预约体检</p>
              <p class="subtitle font-color">快去预约吧</p>
            </div>
            <img src="../assets/image/index1/tj.png" alt="Landing bio image" class="image" />
          </div>
        </div>
      </div>
    </CustomTransition>
    <!-- 
    <div class="typebox">
      <ul class="container">
        <li class="container-item" v-for="item in typeboxes" :key="item.title">
          <img :src="item.icon" class="icon" />
          <p class="title">{{ item.title }}</p>
        </li>
      </ul>
      <ul class="container">
        <li class="container-item" v-for="item in typeboxes" :key="item.title">
          <img :src="item.icon" class="icon" />
          <p class="title">{{ item.title }}</p>
        </li>
      </ul>
    </div> -->

    <div class="expert-forum">
      <div class="header">
        <h2 class="title">专家讲坛</h2>
        <!-- handleNav('/ConsultationList') -->
        <p class="subtitle" @click="showTips">
          更多
          <van-icon name="arrow" class="icon-right" />
        </p>
      </div>
      <div class="scroll-container">
        <div class="card" v-for="(item, index) in experts" :key="index">
          <div class="video-thumbnail">
            <img :src="item.image" alt="Expert Image" class="video-img" />
            <div class="play-overlay" @click="handlePlayClick(item)">
              <img src="../assets/image/index1/playBtn.svg" class="play-btn" />
            </div>
          </div>
          <div class="overlay">
            <p class="overlay-title">{{ item.title }}</p>
          </div>
        </div>
      </div>
    </div>

    <div id="qa-card">
      <div class="qa-card-title">
        <div class="title">细胞咨询</div>
        <p class="subtitle" @click="showTips">
          更多
          <van-icon name="arrow" class="icon-right" />
        </p>
      </div>
      <div class="qa-contain">
        <div class="qa-section" v-for="(item, index) in profiles" :key="index">
          <div class="profile-item">
            <div class="video-thumbnail">
              <img :src="item.image" alt="Expert Image" class="video-img" />
              <div class="play-overlay" @click="handlePlayClick(item)">
                <img src="../assets/image/index1/playBtn.svg" class="play-btn" />
              </div>
            </div>
            <div class="profile-info" @click="handleNav({ name: 'ConsultationDetails', params: { id: index } })">
              <h3 class="profile-name">{{ item.name }}</h3>
              <p class="profile-description">{{ item.date }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="inquiries-card">
      <div class="inquiries-card-title">
        <div class="title">在线问诊</div>
        <p class="subtitle" @click="showTips">
          更多
          <van-icon name="arrow" class="icon-right" />
        </p>
      </div>
      <Swiper class="swiper" :slidesPerView="3" :spaceBetween="10" :speed="1400" loop freeMode>
        <SwiperSlide v-for="doctor in doctors" :key="doctor.name">
          <div class="doctor" @click="handleNav({ name: 'Contact', params: { type: 1 } })">
            <img :src="doctor.image" class="doctor-image" />
            <div class="doctor-info">
              <h3 class="title">{{ doctor.name }}</h3>
              <div class="stat">
                <p class="subtitle">{{ doctor.specialty }}</p>
                <span class="des">{{ doctor.rating }}</span>
              </div>
            </div>
          </div>
        </SwiperSlide>
      </Swiper>
    </div>
  </div>

  <div v-if="isShowVideo" class="video-modal">
    <div class="video-container">
      <img src="../assets/image/index1/close.png" alt="" @click="handleClosedVideo" class="close-btn" />
      <video
        ref="video"
        class="video-player"
        controls
        autoplay
        @ended="handleVideoEnded"
        x5-video-player-orientation="portraint"
      >
        <source :src="currentVideoUrl" type="video/mp4" />
      </video>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, nextTick, reactive, inject, onMounted, onBeforeUnmount } from 'vue';
  import { useRouter } from 'vue-router';
  import { showToast, closeToast } from 'vant';
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { Autoplay, Pagination, Navigation } from 'swiper/modules';
  import CustomTransition from '@/components/shared/CustomTransition.vue';

  import banner1 from '@/assets/image/index1/111.jpg';
  import banner2 from '@/assets/image/index1/222.jpg';
  import banner3 from '@/assets/image/index1/333.jpg';
  import banner4 from '@/assets/image/index1/444.jpg';
  import icon1 from '@/assets/image/index1/icon01.png';
  import icon2 from '@/assets/image/index1/icon02.png';
  import icon3 from '@/assets/image/index1/icon03.png';
  import icon4 from '@/assets/image/index1/icon04.png';

  import wlh from '@/assets/image/index1/吴华林.jpg';
  import hwx from '@/assets/image/index1/胡文详.jpg';
  import ydh from '@/assets/image/index1/袁道红.jpg';
  import lt from '@/assets/image/index1/李陶.jpg';

  import v1 from '@/assets/image/capture/1.png';
  import v2 from '@/assets/image/capture/2.png';
  import v3 from '@/assets/image/capture/3.png';
  import v4 from '@/assets/image/capture/4.png';
  import v5 from '@/assets/image/capture/5.png';
  import v6 from '@/assets/image/capture/6.png';
  import v7 from '@/assets/image/capture/7.png';
  import v8 from '@/assets/image/capture/8.png';
  import v9 from '@/assets/image/capture/9.png';
  import v10 from '@/assets/image/capture/10.png';
  import v11 from '@/assets/image/capture/11.png';
  import v12 from '@/assets/image/capture/12.png';
  import v13 from '@/assets/image/capture/13.png';

  const router = useRouter();
  const currentVideoUrl = ref(null);
  const isShowVideo = ref(false);
  const video = ref(null);
  const scrollPosition = ref(0);

  const experts = ref([
    {
      image: 'https://th.bing.com/th?id=OVP.fpr1d5mn2EywIjYyAT6NwgIIFF&w=243&h=136&c=7&rs=1&qlt=90&o=5&pid=2.1',
      videoUrl: 'https://h5.bodk.com.cn/video/基因检测原来是这么回事！.mp4',
      title: '科普基因检测是什么',
    },
    {
      image: 'https://th.bing.com/th?id=OVP.86cx5n825LQSi4tGcXf7MgIIEk&w=206&h=115&c=7&rs=1&qlt=90&o=6&pid=1.7',
      videoUrl: 'https://h5.bodk.com.cn/video/基因检测科普小视频_腾讯视频.mp4',
      title: '基因检测科普小视频',
    },
    {
      image: 'https://th.bing.com/th?id=OVP.EZUvQXBB1XTSn3F_Gt0eZQEsDc&w=243&h=136&c=7&rs=1&qlt=90&o=5&pid=2.1',
      videoUrl: 'https://h5.bodk.com.cn/video/国家全面推广基因检测_腾讯视频.mp4',
      title: '国家全面推广基因检测技术',
    },
    {
      image: 'https://th.bing.com/th?id=OVP.xeTiXpO1OEtgSuqH3BE7egEsC7&w=243&h=136&c=7&rs=1&qlt=90&o=5&pid=2.1',
      videoUrl: 'https://h5.bodk.com.cn/video/一分钟带你了解基因检测.mp4',
      title: '一分钟带你了解基因检测',
    },
  ]);

  const swiperData = ref([
    {
      image: banner1,
    },
    {
      image: banner2,
    },
    {
      image: banner3,
    },
    {
      image: banner4,
    },
  ]);

  const questions = ref([
    {
      id: 1,
      question: '什么是肺癌基因检测？',
      answer:
        '肺癌根据不同的基因突变情况又可以分为不同的分子类型，可选择对应的靶向药物，行基因检测可判断选择针对性药物治疗',
      docImg: 'https://img.99.com.cn/uploads/doctor/litpic/20200705084940269.jpg',
      name: '崔方博',
      title: '副主任医师',
    },
    {
      id: 2,
      question: '基因检测适用人群分布以及要求？',
      answer: '基因检测适用于多种人群，通常无需特殊要求，结合医科学检查结果进行综合分析以便早期预防',
      docImg: 'https://img.99.com.cn/uploads/doctor/201912/2019120404052457.jpg',
      name: '裴爱华',
      title: '副主任医师',
    },
    {
      id: 3,
      question: '基因配对治疗癌症',
      answer:
        '基因配对治疗（也称为“基因匹配治疗”或“精准治疗”）是一种基于癌症患者的基因特征，制定个性化治疗方案的前沿医学技术。其核心理念是通过分析癌细胞中的基因突变、表达模式及其他基因特征，来选择最有效的治疗方法，从而提高治疗效果并减少副作用。',
      docImg: 'https://img.99.com.cn/uploads/doctor/litpic/20200819152243416.jpg',
      name: '梁茵',
      title: '主任医师',
    },
    {
      id: 4,
      question: '全基因检测一共多少项',
      answer:
        '全基因检测的项目数可包括数百万个变异位点。这些项目涵盖了从单碱基变异到大段基因组结构变化的广泛范围。具体检测和报告的项目数取决于分析的深度和目标，通常会由专业人员根据检测目的进行筛选和解释。',
      docImg: 'https://img.99.com.cn/uploads/202201/2022012105134615.jpg',
      name: '李立杰',
      title: '副主任医师',
    },
  ]);

  const profiles = reactive([
    {
      image: v1,
      name: '5000万单位的干细胞进入身体后会发挥哪些效果',
      videoUrl: 'https://h5.bodk.com.cn/video/Popular/1.mp4',
      date: '2024-03-18',
    },
    {
      image: v2,
      name: '都说干细胞、免疫细胞可以抗衰老，它们发挥的作用是什么',
      videoUrl: 'https://h5.bodk.com.cn/video/Popular/2.mp4',
      date: '2024-03-25',
    },
    {
      image: v3,
      name: '干细胞的功能和作用',
      videoUrl: 'https://h5.bodk.com.cn/video/Popular/3.mp4',
      date: '2024-04-07',
    },
    {
      image: v4,
      name: '干细胞的四大神奇功能',
      videoUrl: 'https://h5.bodk.com.cn/video/Popular/4.mp4',
      date: '2024-04-07',
    },
    {
      image: v5,
      name: '干细胞对身体的几大作用，你知道几个？',
      videoUrl: 'https://h5.bodk.com.cn/video/Popular/5.mp4',
      date: '2024-05-19',
    },
    {
      image: v6,
      name: '干细胞发挥的三大功能',
      videoUrl: 'https://h5.bodk.com.cn/video/Popular/6.mp4',
      date: '2024-07-01',
    },
    {
      image: v7,
      name: '干细胞技术是什么？',
      videoUrl: 'https://h5.bodk.com.cn/video/Popular/7.mp4',
      date: '2024-07-19',
    },
    {
      image: v8,
      name: '干细胞如何成为你的个人健康守护者！',
      videoUrl: 'https://h5.bodk.com.cn/video/Popular/8.mp4',
      date: '2024-07-20',
    },
    {
      image: v9,
      name: '健康人打干细胞有哪些作用？',
      videoUrl: 'https://h5.bodk.com.cn/video/Popular/9.mp4',
      date: '2024-07-28',
    },
    {
      image: v10,
      name: '科普：干细胞抗衰的十二大功效',
      videoUrl: 'https://h5.bodk.com.cn/video/Popular/10.mp4',
      date: '2024-08-02',
    },
    {
      image: v11,
      name: '人体的奥秘之细胞功能',
      videoUrl: 'https://h5.bodk.com.cn/video/Popular/11.mp4',
      date: '2024-08-15',
    },
    {
      image: v12,
      name: '什么是干细胞？它的类型、功能和作用如何？',
      videoUrl: 'https://h5.bodk.com.cn/video/Popular/12.mp4',
      date: '2024-08-15',
    },
    {
      image: v13,
      name: '细胞知识分享：人体免疫细胞的重要性',
      videoUrl: 'https://h5.bodk.com.cn/video/Popular/13.mp4',
      date: '2024-08-20',
    },
  ]);

  const doctors = ref([
    {
      image: wlh,
      name: '吴林华',
      specialty: '生物医学专家',
      rating: '湖北中医药大学教授',
      experience: '8 年',
    },
    {
      image: ydh,
      name: '袁道红',
      specialty: '生物科学专家',
      rating: '中国管理科学院',
      experience: '8 年',
    },
    {
      image: hwx,
      name: '胡文祥',
      specialty: '干细胞专家',
      rating: '中国科学院博士',
      experience: '8 年',
    },
    {
      image: lt,
      name: '李陶',
      specialty: '干细胞科学家',
      rating: '日本东京大学博士',
      experience: '8 年',
    },
  ]);

  const typeboxes = ref([
    { icon: icon1, title: '样本服务' },
    { icon: icon2, title: '健康服务' },
    { icon: icon3, title: '智能服务' },
    { icon: icon4, title: '体检服务' },
  ]);

  const handlePlayClick = (item) => {
    currentVideoUrl.value = item.videoUrl;
    nextTick(() => {
      video.value?.play();
      isShowVideo.value = true;
      scrollPosition.value = window.scrollY;
    });
  };

  const handleClosedVideo = () => {
    isShowVideo.value = false;
    nextTick(() => {
      window.scrollTo(0, scrollPosition.value);
      exitFullScreen();
    });
  };

  const handleVideoEnded = () => {
    currentVideoUrl.value = null;
    isShowVideo.value = false;
    nextTick(() => {
      window.scrollTo(0, scrollPosition.value);
      exitFullScreen();
    });
  };

  const handleOrientationChange = () => {
    if (window.screen.orientation.type.includes('landscape')) {
      enterFullScreen();
    } else {
      exitFullScreen();
    }
  };

  const enterFullScreen = () => {
    if (video.value?.requestFullscreen) {
      video.value?.requestFullscreen();
    } else if (video.value?.webkitRequestFullscreen) {
      video.value?.webkitRequestFullscreen();
    } else if (video.value?.mozRequestFullScreen) {
      video.value?.mozRequestFullScreen();
    } else if (video.value?.msRequestFullscreen) {
      video.value?.msRequestFullscreen();
    }
  };

  const exitFullScreen = () => {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document?.webkitExitFullscreen) {
      document?.webkitExitFullscreen();
    } else if (document?.mozCancelFullScreen) {
      document?.mozCancelFullScreen();
    } else if (document?.msExitFullscreen) {
      document?.msExitFullscreen();
    }
  };

  onMounted(() => {
    window.addEventListener('orientationchange', handleOrientationChange);
  });

  onBeforeUnmount(() => {
    closeToast();
    window.removeEventListener('orientationchange', handleOrientationChange);
  });

  const handleNav = (url) => {
    router.push(url);
  };

  const showTips = () => {
    showToast({
      message: '暂无更多数据',
      duration: 1500,
    });
  };
</script>

<style type="text/scss" scoped>
  @import url(@/assets/styles/pages/_healthy01.scss);
</style>