billiard-app/src/pageStore/storeDetail/index.tsx

/**
 * 门店详情页面
 */
import { View, Text, Image } from '@tarojs/components'
import Taro, { useLoad } from '@tarojs/taro'
import { useState, useEffect } from 'react'
import { Swiper } from '@taroify/core'
import { Arrow, HomeOutlined } from '@taroify/icons'
import './index.scss'

// 页面配置 - 隐藏导航栏
definePageConfig({
  navigationStyle: 'custom',
  navigationBarTitleText: ''
})

// 图片资源
import phoneIcon from '../images/phone.png'
import locationIcon from '../images/locationicon.png'
import shareIcon from '../images/share.png'
import payVipBg from '../images/payVip.png'
import billiardTabBg from '../images/billiardtab.png'
import paiTabBg from '../images/paitab.png'
import storeBoxBg from '../images/storeBox.png'
import { getBigImage } from '@/utils/imageHelper'

// 台球桌状态类型
type TableStatus = 'available' | 'using' | 'waiting' | 'reserved'

// 台球桌数据接口
interface BilliardTable {
  id: string
  name: string
  status: TableStatus
  waitTime?: string
  buttons: Array<{
    type: 'start' | 'reserve'
    text: string
  }>
}

// 台球桌分类数据
interface BilliardCategory {
  name: string
  vipPrice: string
  originalPrice: string
  tables: BilliardTable[]
}

// 棋牌桌数据接口
interface ChessTable {
  id: string
  name: string
  status: TableStatus
  statusText?: string
  buttonText?: string
  waitTime?: string
}

// 存杆柜数据接口
interface StorageCabinet {
  id: string
  status: 'available' | 'rented'
  price: string
}

const StoreDetail = () => {
  const [activeTab, setActiveTab] = useState(0) // 0: 中式台球, 1: 棋牌, 2: 存杆柜
  const [statusBarHeight, setStatusBarHeight] = useState(20) // 状态栏高度
  const [navBarHeight, setNavBarHeight] = useState(44) // 导航栏内容高度

  // 获取系统信息设置导航栏高度
  useEffect(() => {
    const systemInfo = Taro.getSystemInfoSync()
    setStatusBarHeight(systemInfo.statusBarHeight || 20)
    // 微信小程序胶囊按钮信息
    if (process.env.TARO_ENV === 'weapp') {
      const menuButtonInfo = Taro.getMenuButtonBoundingClientRect()
      const navHeight = (menuButtonInfo.top - (systemInfo.statusBarHeight || 0)) * 2 + menuButtonInfo.height
      setNavBarHeight(navHeight)
    }
  }, [])

  // 返回上一页
  const handleBack = () => {
    const pages = Taro.getCurrentPages()
    if (pages.length > 1) {
      Taro.navigateBack()
    } else {
      Taro.switchTab({ url: '/pages/index/index' })
    }
  }

  // 返回首页
  const handleGoHome = () => {
    Taro.switchTab({ url: '/pages/index/index' })
  }

  // 门店信息
  const storeInfo = {
    name: '北京黑八大师联盟球厅店',
    address: '北京市XXX区XXX街道XXX路XXXXXX大厦101',
    distance: '10.05km',
    billiardPrice: '¥10.00起',
    chessPrice: '¥20.00起'
  }

  // Tab 数据
  const tabs = [
    { name: '中式台球', idleCount: 5 },
    { name: '棋牌', idleCount: 1 },
    { name: '存杆柜', idleCount: 0 }
  ]

  // 台球桌分类数据
  const [billiardCategories] = useState<BilliardCategory[]>([
    {
      name: '独牙&来力.山岩',
      vipPrice: '¥8.00/小时',
      originalPrice: '¥10.00/小时',
      tables: [
        { id: '1', name: '独牙01', status: 'available', buttons: [{ type: 'start', text: '立即开台' }] },
        { id: '2', name: '独牙02', status: 'waiting', waitTime: '00 时 15 分', buttons: [] },
        { id: '3', name: '来力黑金刚03', status: 'available', buttons: [{ type: 'start', text: '立即开台' }] },
        { id: '4', name: '来力黑金刚04', status: 'using', buttons: [] }
      ]
    },
    {
      name: '乔氏赛台',
      vipPrice: '¥16.00/小时',
      originalPrice: '¥20.00/小时',
      tables: [
        { id: '5', name: '乔氏01', status: 'available', buttons: [{ type: 'start', text: '立即开台' }] },
        { id: '6', name: '乔氏02', status: 'available', buttons: [{ type: 'reserve', text: '预定' }, { type: 'start', text: '立即开台' }] },
        { id: '7', name: '乔氏03', status: 'available', buttons: [{ type: 'start', text: '立即开台' }] }
      ]
    }
  ])

  // 棋牌数据
  const [chessTables] = useState<ChessTable[]>([
    { id: '1', name: 'Q01号', status: 'available', buttonText: '立即开台' },
    { id: '2', name: 'Q02号', status: 'using', statusText: '预计 16:00 结束' },
    { id: '3', name: 'Q03号', status: 'waiting', statusText: '预计等待：', waitTime: '00 时 15 分' },
    { id: '4', name: 'Q04号', status: 'reserved', buttonText: '预约开台' }
  ])

  // 棋牌价格信息
  const chessInfo = {
    timeRange: '00:00-24:00',
    price: '¥60.00/小时'
  }

  // 存杆柜数据
  const [storageCabinet] = useState<StorageCabinet>({
    id: '1',
    status: 'available',
    price: '1元/天'
  })

  useLoad(() => {
    console.log('门店详情页面加载')
  })

  // 拨打电话
  const handlePhoneCall = () => {
    Taro.makePhoneCall({
      phoneNumber: '100-666-XXXX',
    }).catch((err) => {
      console.error('拨打电话失败:', err)
    })
  }

  // 分享
  const handleShare = () => {
    Taro.showToast({
      title: '分享功能开发中',
      icon: 'none'
    })
  }

  // 开通VIP
  const handleOpenVip = () => {
    Taro.navigateTo({
      url: '/pagesUser/vipBenefits/index'
    })
  }

  // Tab 点击，滚动到对应位置
  const handleTabClick = (index: number) => {
    setActiveTab(index)
    // 获取对应区域的 ID
    const sectionIds = ['billiard-section', 'chess-section', 'storage-section']
    const query = Taro.createSelectorQuery()
    query.select(`#${sectionIds[index]}`).boundingClientRect()
    query.select('#scroll-content').scrollOffset()
    query.exec((res) => {
      if (res[0] && res[1]) {
        const targetTop = res[0].top + res[1].scrollTop - 150 // 减去 tab 高度
        Taro.pageScrollTo({
          scrollTop: targetTop,
          duration: 300
        })
      }
    })
  }

  // 进入预定页面
  const handleReserve = (tableId: string) => {
    Taro.navigateTo({
      url: '/pageStore/reservation/index?tableId=' + tableId
    })
  }

  // 进入开台页面
  const handleStartTable = (tableId: string) => {
    Taro.navigateTo({
      url: '/pageScan/startTable/index?tableId=' + tableId
    })
  }

  // 进入预约开台页面
  const handleAppointmentStart = (tableId: string) => {
    Taro.navigateTo({
      url: '/pageStore/appointmentStart/index?tableId=' + tableId
    })
  }

  // 进入存杆柜租赁页面
  const handleCabinetRental = () => {
    Taro.navigateTo({
      url: '/pagesOrder/cabinetRental/index'
    })
  }

  // 获取台球桌状态文本
  const getBilliardStatusText = (table: BilliardTable) => {
    if (table.status === 'using') return '使用中'
    if (table.status === 'waiting') return `预计等待：\n${table.waitTime}`
    return ''
  }

  // 获取棋牌状态标签
  const getChessStatusTag = (status: TableStatus) => {
    if (status === 'available') return { text: '空闲中', class: 'available' }
    if (status === 'using') return { text: '使用中', class: 'using' }
    if (status === 'waiting') return { text: '使用中', class: 'using' }
    if (status === 'reserved') return { text: '空闲中', class: 'available' }
    return { text: '', class: '' }
  }

  return (
    <View className="store_detail_page">
      {/* 自定义透明导航栏 */}
      <View 
        className="custom_nav_bar" 
        style={{ paddingTop: `${statusBarHeight}px`, height: `${statusBarHeight + navBarHeight}px` }}
      >
        <View className="nav_content" style={{ height: `${navBarHeight}px` }}>
          <View className="nav_buttons">
            <View className="nav_btn" onClick={handleBack}>
              <Arrow className="nav_icon back_icon" />
            </View>
            {/* <View className="nav_divider" />
            <View className="nav_btn" onClick={handleGoHome}>
              <HomeOutlined className="nav_icon home_icon" />
            </View> */}
          </View>
        </View>
      </View>

      {/* 轮播图区域 */}
      <View className="swiper_container">
        <Swiper 
          className="swiper" 
          autoplay={3000}
          lazyRender
        >
          <Swiper.Indicator className="swiper_indicator" />
          <Swiper.Item>
            <Image 
              className="swiper_image" 
              src={getBigImage('SW_BG')} 
              mode="aspectFill" 
            />
          </Swiper.Item>
          <Swiper.Item>
            <Image 
              className="swiper_image" 
              src={getBigImage('SW_BG')} 
              mode="aspectFill" 
            />
          </Swiper.Item>
        </Swiper>
      </View>

      {/* 内容区域 */}
      <View className="content_area" id="scroll-content">
        {/* 门店信息 */}
        <View className="store_info_section">
          <View className="store_header">
            <Text className="store_name">{storeInfo.name}</Text>
            <View className="store_actions">
              <Image className="action_icon phone" src={phoneIcon} mode="aspectFit" onClick={handlePhoneCall} />
              <Image className="action_icon share" src={shareIcon} mode="aspectFit" onClick={handleShare} />
            </View>
          </View>
          
          <View className="store_location">
            <View className="location_left">
              <Image className="location_icon" src={locationIcon} mode="aspectFit" />
              <Text className="location_text">{storeInfo.address}</Text>
            </View>
            <Text className="distance_text">距离{storeInfo.distance}</Text>
          </View>
          
          <View className="store_price">
            <Text className="price_text">台球 {storeInfo.billiardPrice}</Text>
            <Text className="price_text">棋牌 {storeInfo.chessPrice}</Text>
          </View>
        </View>

        {/* VIP 开通横幅 */}
        <View className="vip_banner" onClick={handleOpenVip}>
          <Image className="vip_bg" src={payVipBg} mode="aspectFill" />
          <View className="vip_btn">
            <Text className="vip_btn_text">立即开通</Text>
          </View>
        </View>

        {/* Tab 导航 */}
        <View className="tab_container">
          {tabs.map((tab, index) => (
            <View 
              key={index}
              className={`tab_item ${activeTab === index ? 'active' : ''}`}
              onClick={() => handleTabClick(index)}
            >
              <View className="tab_count">
                <Text className="count_label">空闲</Text>
                <Text className="count_value">{tab.idleCount}</Text>
              </View>
              <Text className="tab_name">{tab.name}</Text>
              {activeTab === index && <View className="tab_indicator" />}
            </View>
          ))}
        </View>

        {/* 台球和棋牌区域 */}
        <View className="tables_section">
          {/* 台球区域 */}
          <View id="billiard-section" className="billiard_section">
            {billiardCategories.map((category, catIndex) => (
              <View key={catIndex} className="category_block">
                <View className="category_header">
                  <Text className="category_name">{category.name}</Text>
                  <View className="category_price">
                    <Text className="vip_price">VIP: {category.vipPrice}</Text>
                    <Text className="original_price">原价: {category.originalPrice}</Text>
                  </View>
                </View>
                
                <View className="tables_grid billiard_grid">
                  {category.tables.map((table) => (
                    <View 
                      key={table.id} 
                      className={`table_card billiard_card ${table.status !== 'available' ? 'disabled' : ''}`}
                    >
                      <Image className="table_bg" src={billiardTabBg} mode="aspectFill" />
                      {table.status !== 'available' && <View className="table_mask" />}
                      <View className="table_content">
                        <Text className="table_name">{table.name}</Text>
                        {table.status === 'available' && table.buttons.length > 0 ? (
                          table.buttons.length === 1 ? (
                            // 单个按钮
                            <Text 
                              className="table_btn_single"
                              onClick={() => table.buttons[0].type === 'reserve' ? handleReserve(table.id) : handleStartTable(table.id)}
                            >
                              {table.buttons[0].text}
                            </Text>
                          ) : (
                            // 按钮组
                            <View className="table_buttons">
                              {table.buttons.map((btn, btnIndex) => (
                                <Text 
                                  key={btnIndex}
                                  className="table_btn"
                                  onClick={() => btn.type === 'reserve' ? handleReserve(table.id) : handleStartTable(table.id)}
                                >
                                  {btn.text}
                                </Text>
                              ))}
                            </View>
                          )
                        ) : (
                          <Text className="table_status">{getBilliardStatusText(table)}</Text>
                        )}
                      </View>
                    </View>
                  ))}
                </View>
              </View>
            ))}
          </View>

          {/* 棋牌区域 */}
          <View id="chess-section" className="chess_section">
            <View className="category_header">
              <Text className="category_name">棋牌</Text>
              <View className="category_price">
                <Text className="time_range">{chessInfo.timeRange}</Text>
                <Text className="price_info">价格: {chessInfo.price}</Text>
              </View>
            </View>
            
            <View className="tables_grid chess_grid">
              {chessTables.map((table) => (
                <View 
                  key={table.id} 
                  className={`table_card chess_card ${table.status === 'using' || table.status === 'waiting' ? 'disabled' : ''}`}
                >
                  <Image className="table_bg" src={paiTabBg} mode="aspectFill" />
                  {(table.status === 'using' || table.status === 'waiting') && <View className="table_mask" />}
                  
                  {/* 状态标签 */}
                  <View className={`status_tag ${getChessStatusTag(table.status).class}`}>
                    <Text className="tag_text">{getChessStatusTag(table.status).text}</Text>
                  </View>
                  
                  <View className="table_content">
                    <Text className="table_name">{table.name}</Text>
                    {table.status === 'available' ? (
                      <Text className="table_btn_single" onClick={() => handleStartTable(table.id)}>{table.buttonText}</Text>
                    ) : table.status === 'reserved' ? (
                      <Text className="table_btn_single" onClick={() => handleAppointmentStart(table.id)}>{table.buttonText}</Text>
                    ) : (
                      <Text className="table_status">
                        {table.statusText}
                        {table.status === 'waiting' && `\n${table.waitTime}`}
                      </Text>
                    )}
                  </View>
                </View>
              ))}
            </View>
          </View>
        </View>

        {/* 存杆柜区域 */}
        <View id="storage-section" className="storage_section">
          <Text className="section_title">存杆柜</Text>
          <View className="storage_card" onClick={handleCabinetRental}>
            <Image className="storage_bg" src={storeBoxBg} mode="aspectFill" />
            <View className="storage_content">
              <Text className="storage_status">暂未租赁/租赁中</Text>
              <Text className="storage_price">{storageCabinet.price}</Text>
              <View className="storage_btn">
                <Text className="btn_text">租赁</Text>
              </View>
            </View>
          </View>
        </View>

        {/* 底部提示 */}
        <Text className="end_tip">到底了~</Text>
      </View>
    </View>
  )
}

export default StoreDetail