APPmy/src/app/tab2/tab2.page.ts

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
  
})
export class Tab2Page {
  companies = [
    {
      name: '和美空间设计',
      starRating: 4.7,
      reviewCount: 150,
      description: '华美装饰设计有限公司是一家专业的室内装修设计公司，致力于为客户提供高品质的装修和设计服务。公司拥有一支经验丰富、富有创意的设计团队，以客户需求为中心，打造独特、舒适的居家环境。',
      services: '室内装修设计\n定制家具设计\n空间规划布局\n装饰材料供应',
      advantages: '专业团队：拥有经验丰富的设计师和施工团队，保证项目质量\n创意设计：注重细节，根据客户需求量身定制设计方案\n优质材料：选用优质装饰材料，确保装修质量和耐久性\n贴心服务：全程跟踪服务，提供周到的售后服务，保障客户满意度。',
      cases: '客厅装修案例：现代简约风格，打造温馨舒适的家居空间。\n卧室装修案例：北欧风格，简约清新，注重自然光线的利用。\n餐厅装修案例：中式风格，传统与现代相结合，展现东方韵味。'
    },
    {
      name: '灵感装修工程',
      starRating: 4.5,
      reviewCount: 120,
      description: '装修公司B的简介',
      services: '创意设计、个性定制',
      advantages: '专业设计师、创新理念',
      cases: '装修公司B的案例'
    },
    {
      name: '璞心设计工作室',
      starRating: 4.5,
      reviewCount: 120,
      description: '装修公司C的简介',
      services: '创意设计、个性定制',
      advantages: '专业设计师、创新理念',
      cases: '装修公司B的案例'
    },
    {
      name: '悦居室内设计',
      starRating: 4.5,
      reviewCount: 120,
      description: '装修公司C的简介',
      services: '创意设计、个性定制',
      advantages: '专业设计师、创新理念',
      cases: '装修公司B的案例'
    },
    {
      name: '彩虹装饰工程',
      starRating: 4.5,
      reviewCount: 120,
      description: '装修公司C的简介',
      services: '创意设计、个性定制',
      advantages: '专业设计师、创新理念',
      cases: '装修公司B的案例'
    },
    {
      name: '素雅装饰设计',
      starRating: 4.5,
      reviewCount: 120,
      description: '装修公司C的简介',
      services: '创意设计、个性定制',
      advantages: '专业设计师、创新理念',
      cases: '装修公司B的案例'
    }
    // 添加更多装修公司信息
  ];
  selectedSegment: string = 'company';
  
  designCompanies = [
    {
      name: '源境设计工作室',
      starRating: 4.8,
      reviewCount: 200,
      description: '设计机构X的简介',
      services: '室内设计、景观设计',
      advantages: '创新设计、高品质服务',
      cases: [
        {
          image: 'case1.jpg',
          description: '案例描述1',
          style: '现代风格'
        },
        // 添加更多案例
      ],
      designers: [
        {
          avatar: 'designer1.jpg',
          name: '设计师A',
          style: '现代风格',
          serviceArea: '城市A',
          price: '1'
        },
        // 添加更多设计师
      ],
      designConcept: '设计理念描述',
      serviceProcess: '服务流程描述',
      userReviews: [
        {
          text: '用户评价1',
          image: 'review1.jpg',
          starRating: 5
        },
        // 添加更多用户评价
      ]
    },
    {
      name: '创意天地设计',
      starRating: 4.5,
      reviewCount: 150,
      description: '设计机构Y的简介',
      services: '建筑设计、室内设计',
      advantages: '专业团队、精细施工',
      cases: [
        {
          image: 'case2.jpg',
          description: '案例描述2',
          style: '现代简约风格'
        },
        // 添加更多案例
      ],
      designers: [
        {
          avatar: 'designer2.jpg',
          name: '设计师B',
          style: '简约风格',
          serviceArea: '城市B',
          price: '$$'
        },
        {
          avatar: 'designer2.jpg',
          name: '设计师B',
          style: '简约风格',
          serviceArea: '城市B',
          price: '$$'
        },
        // 添加更多设计师
      ],
      designConcept: '设计理念描述',
      serviceProcess: '服务流程描述',
      userReviews: [
        {
          text: '用户评价2',
          image: 'review2.jpg',
          starRating: 4
        },
        // 添加更多用户评价
      ]
    },
    {
      name: '艺境空间设计',
      starRating: 4.5,
      reviewCount: 150,
      description: '设计机构Y的简介',
      services: '建筑设计、室内设计',
      advantages: '专业团队、精细施工',
      cases: [
        {
          image: 'case2.jpg',
          description: '案例描述2',
          style: '现代简约风格'
        },
        // 添加更多案例
      ],
      designers: [
        {
          avatar: 'designer2.jpg',
          name: '设计师B',
          style: '简约风格',
          serviceArea: '城市B',
          price: '$$'
        },
        {
          avatar: 'designer2.jpg',
          name: '设计师B',
          style: '简约风格',
          serviceArea: '城市B',
          price: '$$'
        },
        // 添加更多设计师
      ],
      designConcept: '设计理念描述',
      serviceProcess: '服务流程描述',
      userReviews: [
        {
          text: '用户评价2',
          image: 'review2.jpg',
          starRating: 4
        },
        // 添加更多用户评价
      ]
    },
    {
      name: '星辰创意设计室',
      starRating: 4.5,
      reviewCount: 150,
      description: '设计机构Y的简介',
      services: '建筑设计、室内设计',
      advantages: '专业团队、精细施工',
      cases: [
        {
          image: 'case2.jpg',
          description: '案例描述2',
          style: '现代简约风格'
        },
        // 添加更多案例
      ],
      designers: [
        {
          avatar: 'designer2.jpg',
          name: '设计师B',
          style: '简约风格',
          serviceArea: '城市B',
          price: '$$'
        },
        {
          avatar: 'designer2.jpg',
          name: '设计师B',
          style: '简约风格',
          serviceArea: '城市B',
          price: '$$'
        },
        // 添加更多设计师
      ],
      designConcept: '设计理念描述',
      serviceProcess: '服务流程描述',
      userReviews: [
        {
          text: '用户评价2',
          image: 'review2.jpg',
          starRating: 4
        },
        // 添加更多用户评价
      ]
    },
    {
      name: '创意空间探索所',
      starRating: 4.5,
      reviewCount: 150,
      description: '设计机构Y的简介',
      services: '建筑设计、室内设计',
      advantages: '专业团队、精细施工',
      cases: [
        {
          image: 'case2.jpg',
          description: '案例描述2',
          style: '现代简约风格'
        },
        // 添加更多案例
      ],
      designers: [
        {
          avatar: 'designer2.jpg',
          name: '设计师B',
          style: '简约风格',
          serviceArea: '城市B',
          price: '$$'
        },
        {
          avatar: 'designer2.jpg',
          name: '设计师B',
          style: '简约风格',
          serviceArea: '城市B',
          price: '$$'
        },
        // 添加更多设计师
      ],
      designConcept: '设计理念描述',
      serviceProcess: '服务流程描述',
      userReviews: [
        {
          text: '用户评价2',
          image: 'review2.jpg',
          starRating: 4
        },
        // 添加更多用户评价
      ]
    }
    // 添加更多设计机构信息
  ];
  selectedTab: string = 'designCompany';
  
  designers = [
    {
      username: '李宛如',
      avatar: 'assets/designer1.jpg',
      bio: '李宛如是一位充满创意和激情的室内设计师，擅长将空间转化为舒适且具有个性的居住环境。她注重细节，追求完美，致力于为客户打造独一无二的家居体验。',
      portfolioImage: 'assets/portfolio1.jpg',
      portfolioCount: 50,
      style: '现代简约、北欧风格',
      serviceArea: '北京',
      price: '平均每平米价格为1000元',
      rating: 4.8
    },
    {
      username: '张晨光',
      avatar: 'assets/designer2.jpg',
      bio: '张晨光是一位充满创意和热情的室内设计师，擅长将空间与艺术相融合，为客户打造独特、舒适的家居环境。',
      portfolioImage: 'assets/portfolio2.jpg',
      portfolioCount: 80,
      style: '现代简约、工业风格',
      serviceArea: '上海',
      price: '平均每平米价格为1500元',
      rating: 4.6
    },
    {
      username: '王梦洁',
      avatar: 'assets/designer2.jpg',
      bio: '王梦洁是一位注重细节和品质的室内设计师，擅长通过色彩和材质搭配打造温馨、时尚的居住空间。',
      portfolioImage: 'assets/portfolio2.jpg',
      portfolioCount: 60,
      style: '北欧风格、现代简约',
      serviceArea: '广州',
      price: '平均每平米价格为1200元',
      rating: 4.5
    },
    {
      username: '刘阳光',
      avatar: 'assets/designer2.jpg',
      bio: '刘阳光是一位富有创意和想象力的室内设计师，致力于为客户打造个性化、独特的空间体验。',
      portfolioImage: 'assets/portfolio2.jpg',
      portfolioCount: 45,
      style: '中式风格、现代简约',
      serviceArea: '成都',
      price: '平均每平米价格为1000元',
      rating: 4.6
    },
    {
      username: '陈思慧',
      avatar: 'assets/designer2.jpg',
      bio: ' 陈思慧是一位充满激情和创意的室内设计师，专注于打造具有个性和温暖感的居家空间，致力于为客户提供高品质的设计服务。',
      portfolioImage: 'assets/portfolio2.jpg',
      portfolioCount: 70,
      style: '现代简约、地中海风格',
      serviceArea: '广州',
      price: '平均每平米价格为1300元',
      rating: 4.8
    }
    // 添加更多设计师信息
  ];
  selectedDesignerSegment: string = 'designer';

  constructor(private sanitizer: DomSanitizer) {}

  formatHtmlContent(content: string): SafeHtml {
    const formattedContent = content.replace(/\n/g, '<br>');
    return this.sanitizer.bypassSecurityTrustHtml(formattedContent);
  }
  segmentChanged(event: CustomEvent) {
    this.selectedSegment = event.detail.value;
  }
}