|
|
@@ -37,12 +37,49 @@ export class Tab1Page implements AfterViewInit {
|
|
|
];
|
|
|
|
|
|
currentIndex = 0;
|
|
|
+ startX: number = 0; // 初始化 startX
|
|
|
+ endX: number = 0; // 初始化 endX
|
|
|
+ isDragging: boolean = false; // 标记是否正在拖动
|
|
|
+ currentTranslate: number = 0; // 当前的平移值
|
|
|
+
|
|
|
+ // 功能按钮数据
|
|
|
+ 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' }
|
|
|
+ ];
|
|
|
+
|
|
|
+ // 轮播图数据
|
|
|
+ promotionPosters = [
|
|
|
+ { image: '../../assets/images/promotion1.jpg', description: '健康推广1' },
|
|
|
+ { image: '../../assets/images/promotion2.jpg', description: '健康推广2' },
|
|
|
+ { image: '../../assets/images/promotion3.jpg', description: '健康推广3' },
|
|
|
+ { image: '../../assets/images/promotion4.jpg', description: '健康推广4' },
|
|
|
+ { image: '../../assets/images/promotion5.jpg', description: '健康推广5' }
|
|
|
+ ];
|
|
|
+
|
|
|
+ promotionCurrentIndex = 0;
|
|
|
+ promotionStartX: number = 0; // 初始化 startX
|
|
|
+ promotionEndX: number = 0; // 初始化 endX
|
|
|
+ isPromotionDragging: boolean = false; // 标记是否正在拖动
|
|
|
+ promotionCurrentTranslate: number = 0; // 当前的平移值
|
|
|
|
|
|
constructor(private router: Router) {}
|
|
|
|
|
|
ngAfterViewInit() {
|
|
|
// 初始化时调用一次以确保初始状态正确
|
|
|
this.updateCarousel();
|
|
|
+ this.updatePromotionCarousel();
|
|
|
}
|
|
|
|
|
|
// 上一张
|
|
|
@@ -66,10 +103,132 @@ export class Tab1Page implements AfterViewInit {
|
|
|
}
|
|
|
|
|
|
// 更新轮播位置
|
|
|
- updateCarousel() {
|
|
|
- // 这里不需要获取 DOM 元素，因为我们在模板中直接使用了 [ngStyle]
|
|
|
- // 每个卡片的 transform 属性会根据当前索引自动更新
|
|
|
+updateCarousel() {
|
|
|
+ this.currentTranslate = -this.currentIndex * 100;
|
|
|
+ this.updateCarouselPosition();
|
|
|
+}
|
|
|
+
|
|
|
+// 更新轮播位置
|
|
|
+updateCarouselPosition() {
|
|
|
+ const container = document.getElementById('carousel');
|
|
|
+ if (container) {
|
|
|
+ container.style.transform = `translateX(${this.currentTranslate}%)`;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 触摸开始
|
|
|
+onTouchStart(event: TouchEvent) {
|
|
|
+ this.startX = event.touches[0].clientX;
|
|
|
+ this.isDragging = true;
|
|
|
+}
|
|
|
+
|
|
|
+// 触摸移动
|
|
|
+onTouchMove(event: TouchEvent) {
|
|
|
+ if (this.isDragging) {
|
|
|
+ const touchX = event.touches[0].clientX;
|
|
|
+ const deltaX = touchX - this.startX;
|
|
|
+ this.currentTranslate = -this.currentIndex * 100 + deltaX;
|
|
|
+ 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.updateCarousel();
|
|
|
+ }
|
|
|
+}
|
|
|
+ // 导航到指定路由
|
|
|
+ navigateTo(route: string) {
|
|
|
+ this.router.navigate([route]);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新轮播图位置
|
|
|
+ updatePromotionCarousel() {
|
|
|
+ this.promotionCurrentTranslate = -this.promotionCurrentIndex * 100;
|
|
|
+ this.updatePromotionCarouselPosition();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 触摸开始
|
|
|
+ onPromotionTouchStart(event: TouchEvent) {
|
|
|
+ this.promotionStartX = event.touches[0].clientX;
|
|
|
+ this.isPromotionDragging = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 触摸移动
|
|
|
+ onPromotionTouchMove(event: TouchEvent) {
|
|
|
+ if (this.isPromotionDragging) {
|
|
|
+ const touchX = event.touches[0].clientX;
|
|
|
+ const deltaX = touchX - this.promotionStartX;
|
|
|
+ this.promotionCurrentTranslate = -this.promotionCurrentIndex * 100 + deltaX;
|
|
|
+ this.updatePromotionCarouselPosition();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 触摸结束
|
|
|
+ onPromotionTouchEnd(event: TouchEvent) {
|
|
|
+ this.promotionEndX = event.changedTouches[0].clientX;
|
|
|
+ this.isPromotionDragging = false;
|
|
|
+
|
|
|
+ const swipeThreshold = 50; // 滑动阈值
|
|
|
+ const deltaX = this.promotionStartX - this.promotionEndX;
|
|
|
+
|
|
|
+ if (deltaX > swipeThreshold) {
|
|
|
+ // 向左滑动
|
|
|
+ this.nextPromotionSlide();
|
|
|
+ } else if (deltaX < -swipeThreshold) {
|
|
|
+ // 向右滑动
|
|
|
+ this.prevPromotionSlide();
|
|
|
+ } else {
|
|
|
+ // 如果滑动距离不够，则恢复到原来的位置
|
|
|
+ this.updatePromotionCarousel();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新轮播图位置
|
|
|
+ updatePromotionCarouselPosition() {
|
|
|
+ const container = document.getElementById('promotionCarousel');
|
|
|
+ if (container) {
|
|
|
+ container.style.transform = `translateX(${this.promotionCurrentTranslate}%)`;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- // 模拟数据或其他逻辑可以在这里添加
|
|
|
+ // 上一张
|
|
|
+ prevPromotionSlide() {
|
|
|
+ if (this.promotionCurrentIndex > 0) {
|
|
|
+ this.promotionCurrentIndex--;
|
|
|
+ } else {
|
|
|
+ this.promotionCurrentIndex = this.promotionPosters.length - 1;
|
|
|
+ }
|
|
|
+ this.updatePromotionCarousel();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 下一张
|
|
|
+ nextPromotionSlide() {
|
|
|
+ if (this.promotionCurrentIndex < this.promotionPosters.length - 1) {
|
|
|
+ this.promotionCurrentIndex++;
|
|
|
+ } else {
|
|
|
+ this.promotionCurrentIndex = 0;
|
|
|
+ }
|
|
|
+ this.updatePromotionCarousel();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 发布求医信息
|
|
|
+ publishHealthInfo() {
|
|
|
+ // 这里可以添加发布求医信息的逻辑
|
|
|
+ console.log('发布求医信息');
|
|
|
+ }
|
|
|
}
|
