web3-202226701052/src/app/tab1/tab1.page.ts

import { Component, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page implements AfterViewInit {

  doctors = [
    {
      avatar: '../../assets/images/doctor.png',
      name: '张医生',
      specialty: '心血管科'
    },
    {
      avatar: '../../assets/images/doctor.png',
      name: '李医生',
      specialty: '神经科'
    },
    {
      avatar: '../../assets/images/doctor.png',
      name: '王医生',
      specialty: '儿科'
    },
    {
      avatar: '../../assets/images/doctor.png',
      name: '赵医生',
      specialty: '外科'
    },
    {
      avatar: '../../assets/images/doctor.png',
      name: '陈医生',
      specialty: '内科'
    }
  ];

  // 功能按钮数据
  functionItems1 = [
    { label: '我的病历', icon: 'document-text', route: '/medical-records' },
    { label: '在线问诊', icon: 'chatbubbles', route: '/online-consultation' },
    { label: '健康档案', icon: 'person', route: '/health-profile' },
    { label: '预约挂号', icon: 'calendar', route: '/appointment' },
    { label: '健康资讯', icon: 'newspaper', route: '/health-news' }
  ];

  functionItems2 = [
    { label: '药品购买', icon: 'medkit', route: '/medicine-purchase' },
    { label: '体检套餐', icon: 'clipboard', route: '/checkup-packages' },
    { label: '专家讲座', icon: 'podium', route: '/expert-lectures' },
    { label: '远程医疗', icon: 'videocam', route: '/telemedicine' },
    { label: '健康社区', icon: 'people', route: '/health-community' }
  ];

  currentIndex = 0;
  startX: number = 0; // 初始化 startX
  endX: number = 0;   // 初始化 endX
  isDragging: boolean = false; // 标记是否正在拖动
  currentTranslate: number = 0; // 当前的平移值
  cardWidth = 216; // 每个卡片的宽度加上间距 (200 + 16)
  isCyclic: boolean = true; // 是否启用循环滑动

  constructor(private router: Router) {}

  ngAfterViewInit() {
    this.updateCarousel(); // 确保初始状态正确
    this.calculateCardWidth(); // 动态计算卡片宽度
  }

  // 计算卡片宽度
  calculateCardWidth() {
    const container = document.getElementById('carousel');
    if (container && container.children.length > 0) {
      const firstCard = container.children[0] as HTMLElement;
      this.cardWidth = firstCard.offsetWidth + 16; // 加上间距
    }
  }

  // 更新轮播位置
  updateCarousel() {
    this.currentTranslate = -this.currentIndex * this.cardWidth;
    this.updateCarouselPosition();
  }

  // 更新轮播位置
  updateCarouselPosition() {
    const container = document.getElementById('carousel');
    if (container) {
      container.style.transform = `translateX(${this.currentTranslate}px)`;
    }
  }

  // 触摸开始
  onTouchStart(event: TouchEvent) {
    // event.preventDefault(); // 防止默认行为
    this.startX = event.touches[0].clientX;
    this.isDragging = true;
  }

  // 触摸移动
  onTouchMove(event: TouchEvent) {
    if (this.isDragging) {
      // event.preventDefault(); // 防止默认行为
      const touchX = event.touches[0].clientX;
      const deltaX = touchX - this.startX;
      this.currentTranslate = -this.currentIndex * this.cardWidth + deltaX; // 动态更新平移值

      // 限制 currentTranslate 的值
      const maxTranslate = -(this.doctors.length - 1) * this.cardWidth;
      this.currentTranslate = Math.max(Math.min(this.currentTranslate, 0), maxTranslate);

      this.updateCarouselPosition();
    }
  }

  // 触摸结束
  onTouchEnd(event: TouchEvent) {
    this.endX = event.changedTouches[0].clientX;
    this.isDragging = false;

    const swipeThreshold = 50; // 滑动阈值
    const deltaX = this.startX - this.endX;

    if (deltaX > swipeThreshold) {
      // 向左滑动
      this.nextSlide();
    } else if (deltaX < -swipeThreshold) {
      // 向右滑动
      this.prevSlide();
    } else {
      // 如果滑动距离不够，则恢复到原来的位置
      this.snapToNearestCard();
    }
  }

  // 上一张
  prevSlide() {
    if (this.isCyclic) {
      if (this.currentIndex === 0) {
        this.currentIndex = this.doctors.length - 1;
      } else {
        this.currentIndex--;
      }
    } else {
      if (this.currentIndex > 0) {
        this.currentIndex--;
      }
    }
    this.updateCarousel();
  }

  // 下一张
  nextSlide() {
    if (this.isCyclic) {
      if (this.currentIndex === this.doctors.length - 1) {
        this.currentIndex = 0;
      } else {
        this.currentIndex++;
      }
    } else {
      if (this.currentIndex < this.doctors.length - 1) {
        this.currentIndex++;
      }
    }
    this.updateCarousel();
  }

  // 快照到最近的卡片
  snapToNearestCard() {
    const cardIndex = Math.round(-this.currentTranslate / this.cardWidth);
    this.currentIndex = Math.max(0, Math.min(cardIndex, this.doctors.length - 1));
    this.updateCarousel();
  }

  // 导航到指定路由
  navigateTo(route: string) {
    this.router.navigate([route]);
  }

  // 发布求医信息
  publishHealthInfo() {
    // 这里可以添加发布求医信息的逻辑
    console.log('发布求医信息');
  }
}