food-picture/picture-web/src/modules/first-home/image-detail/image-detail.ts

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

// 导入 Swiper 11 相关模块
import { register } from 'swiper/element/bundle';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-image-detail',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './image-detail.html',
  styleUrls: ['./image-detail.scss'],
  schemas: [CUSTOM_ELEMENTS_SCHEMA] // 允许使用自定义元素
})
export class ImageDetailComponent implements OnInit {
   // 轮播图配置
  swiperConfig = JSON.stringify({
    pagination: {
      clickable: true,
      type: 'bullets',
    },
    loop: true,
    autoplay: {
      delay: 5000,
      disableOnInteraction: false
    },
    effect: 'fade',
    fadeEffect: {
      crossFade: true
    }
  });

  // 轮播图数据
  slides = [
    {
      url: 'https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?auto=format&fit=crop&w=800&q=80',
      alt: '美味披萨'
    },
    {
      url: 'https://images.unsplash.com/photo-1565958011703-44f9829ba187?auto=format&fit=crop&w=800&q=80',
      alt: '披萨制作过程'
    },
    {
      url: 'https://images.unsplash.com/photo-1513104890138-7c749659a591?auto=format&fit=crop&w=800&q=80',
      alt: '披萨特写'
    }
  ];

  // 图片详情数据
  imageDetail = {
    title: '意式玛格丽特披萨',
    meta: [
      { icon: 'fas fa-camera', text: '专业美食摄影' },
      { icon: 'fas fa-image', text: '高分辨率 (4000×3000)' },
      { icon: 'fas fa-tags', text: '意大利料理, 披萨' }
    ],
    stats: [
      { value: '1,258', label: '下载量' },
      { value: '4.9', label: '用户评分' },
      { value: '96%', label: '推荐度' }
    ],
    price: '¥ 38.00'
  };

  // 摄影师数据
  photographer = {
    name: '张明轩',
    title: '专业美食摄影师 | 8年经验',
    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=200&q=80',
    isFollowing: false
  };

  // 相关推荐数据
  relatedItems = [
    {
      image: 'https://images.unsplash.com/photo-1552539618-7eec9b4d1796?auto=format&fit=crop&w=400&q=80',
      name: '番茄肉酱意面',
      price: '¥ 32.00'
    },
    {
      image: 'https://images.unsplash.com/photo-1606491956689-2ea866880c84?auto=format&fit=crop&w=400&q=80',
      name: '凯撒沙拉',
      price: '¥ 28.00'
    },
    {
      image: 'https://images.unsplash.com/photo-1551183053-bf91a1d81141?auto=format&fit=crop&w=400&q=80',
      name: '提拉米苏',
      price: '¥ 25.00'
    },
    {
      image: 'https://images.unsplash.com/photo-1513104890138-7c749659a591?auto=format&fit=crop&w=400&q=80',
      name: '四芝士披萨',
      price: '¥ 42.00'
    }
  ];

  isFavorite = false;

  ngOnInit(): void {
    // 初始化代码可以放在这里
  }

  // 图片操作功能
  handleAction(iconType: string): void {
    let message = '';
    
    switch(iconType) {
      case 'expand':
        message = '图片已全屏展示';
        break;
      case 'share':
        message = '分享功能已激活';
        break;
      case 'download':
        message = '开始下载高清图片';
        break;
    }
    
    if (message) {
      alert(message);
    }
  }

  // 收藏功能
  toggleFavorite(): void {
    this.isFavorite = !this.isFavorite;
    alert(this.isFavorite ? '已添加到收藏' : '已取消收藏');
  }

  // 关注功能
  toggleFollow(): void {
    this.photographer.isFollowing = !this.photographer.isFollowing;
  }

  // 购买功能
  buyImage(): void {
    const buyBtn = document.querySelector('.buy-btn');
    if (buyBtn) {
      const originalText = buyBtn.innerHTML;
      buyBtn.innerHTML = '<i class="fas fa-check"></i> 已添加到购物车';
      buyBtn.classList.add('purchased');
      
      setTimeout(() => {
        buyBtn.innerHTML = originalText;
        buyBtn.classList.remove('purchased');
      }, 2000);
    }
  }

  // 返回功能
  goBack(): void {
    alert('返回首页');
    // 实际项目中这里应该是路由跳转
  }
}