xinlong-shop-taro/src/pages/booking.tsx

import React, { useState, useEffect } from 'react'
import { View, Text, ScrollView, Input } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { Button } from '@nutui/nutui-react-taro'
import { useUser } from '@/hooks/useUser'
import { useScrollHeight } from '@/hooks/useScrollHeight'

definePageConfig({
  navigationBarTitleText: '穿线预约',
})

const BookingPage: React.FC = () => {
  const { isLoggedIn } = useUser()
  const { storeId } = Taro.getCurrentInstance().router?.params || {}

  const [date, setDate] = useState('')
  const [time, setTime] = useState('')
  const [serviceType, setServiceType] = useState('')
  const [contactName, setContactName] = useState('')
  const [contactPhone, setContactPhone] = useState('')
  const [remark, setRemark] = useState('')
  const scrollHeight = useScrollHeight(100)


  useEffect(() => {
    if (!isLoggedIn) {
      Taro.navigateTo({ url: '/passport/login' })
    }
  }, [isLoggedIn])

  const timeSlots = [
    '09:00-10:00',
    '10:00-11:00',
    '11:00-12:00',
    '14:00-15:00',
    '15:00-16:00',
    '16:00-17:00',
    '17:00-18:00',
  ]

  const serviceTypes = ['穿线服务', '穿线+手胶', '穿线+毛巾胶', '其他']

  const handleSubmit = () => {
    if (!date || !time || !serviceType || !contactName || !contactPhone) {
      Taro.showToast({ title: '请填写完整信息', icon: 'none' })
      return
    }

    Taro.showModal({
      title: '确认预约',
      content: `预约时间：${date} ${time}\n服务类型：${serviceType}`,
      success: (res) => {
        if (res.confirm) {
          Taro.showToast({ title: '预约成功', icon: 'success' })
          setTimeout(() => Taro.navigateBack(), 1500)
        }
      },
    })
  }

  return (
    <View className='min-h-screen bg-gray-50'>
      <ScrollView scrollY style={{ height: scrollHeight }}>
        {/* 选择日期 */}
        <View className='bg-white mx-3 mt-3 p-3 rounded-lg'>
          <Text className='text-sm font-medium text-gray-800 mb-2 block'>选择日期</Text>
          <Input
            type='date'
            value={date}
            onInput={(e) => setDate(e.detail.value)}
            className='bg-gray-50 rounded-lg p-2 text-sm'
          />
        </View>

        {/* 选择时间 */}
        <View className='bg-white mx-3 mt-3 p-3 rounded-lg'>
          <Text className='text-sm font-medium text-gray-800 mb-2 block'>选择时间</Text>
          <View className='grid grid-cols-3 gap-2'>
            {timeSlots.map(slot => (
              <View
                key={slot}
                className={`p-2 rounded-lg text-center text-sm ${
                  time === slot
                    ? 'bg-green-500 text-white'
                    : 'bg-gray-50 text-gray-600'
                }`}
                onClick={() => setTime(slot)}
              >
                <Text>{slot}</Text>
              </View>
            ))}
          </View>
        </View>

        {/* 服务类型 */}
        <View className='bg-white mx-3 mt-3 p-3 rounded-lg'>
          <Text className='text-sm font-medium text-gray-800 mb-2 block'>服务类型</Text>
          <View className='flex flex-wrap gap-2'>
            {serviceTypes.map(type => (
              <View
                key={type}
                className={`px-3 py-1 rounded-full text-sm ${
                  serviceType === type
                    ? 'bg-green-50 text-green-600 border border-green-500'
                    : 'bg-gray-50 text-gray-600 border border-gray-200'
                }`}
                onClick={() => setServiceType(type)}
              >
                <Text>{type}</Text>
              </View>
            ))}
          </View>
        </View>

        {/* 联系人信息 */}
        <View className='bg-white mx-3 mt-3 p-3 rounded-lg'>
          <Text className='text-sm font-medium text-gray-800 mb-2 block'>联系人信息</Text>
          <View className='mb-2'>
            <Text className='text-xs text-gray-500 mb-1 block'>姓名</Text>
            <Input
              value={contactName}
              onInput={(e) => setContactName(e.detail.value)}
              placeholder='请输入姓名'
              className='bg-gray-50 rounded-lg p-2 text-sm w-full'
            />
          </View>
          <View>
            <Text className='text-xs text-gray-500 mb-1 block'>手机号</Text>
            <Input
              type='number'
              value={contactPhone}
              onInput={(e) => setContactPhone(e.detail.value)}
              placeholder='请输入手机号'
              className='bg-gray-50 rounded-lg p-2 text-sm w-full'
            />
          </View>
        </View>

        {/* 备注 */}
        <View className='bg-white mx-3 mt-3 p-3 rounded-lg mb-4'>
          <Text className='text-sm font-medium text-gray-800 mb-2 block'>备注</Text>
          <Input
            value={remark}
            onInput={(e) => setRemark(e.detail.value)}
            placeholder='选填，如有特殊需求请注明'
            className='bg-gray-50 rounded-lg p-2 text-sm w-full'
            style={{ minHeight: '80px' }}
          />
        </View>
      </ScrollView>

      {/* 提交按钮 */}
      <View className='bg-white border-t border-gray-100 p-3' style={{ paddingBottom: '20px' }}>
        <Button
          type='primary'
          className='w-full rounded-full'
          style={{ backgroundColor: '#0e932e' }}
          onClick={handleSubmit}
        >
          确认预约
        </Button>
      </View>
    </View>
  )
}

export default BookingPage