miniapp-v2/src/hotel/components/shareRoom/ShareRoom.jsx

import React, { useState } from 'react'
import Taro from '@tarojs/taro'
import { Input, Button, View, Picker, Label } from '@tarojs/components'
import Popup from '@/components/Popup'
import { shareRoom } from '@/services/landlord'
import './ShareRoom.less'


export default (props) => {
  const { showCutover, onClose, room, onFinish } = props
  const [startDate, setStartDate] = useState('')
  const [endDate, setEndDate] = useState('')
  const [roomNum, setRoomNum] = useState('')
  const [loading, setLoading] = useState(false)

  const handelStartDate = (e) => {
    setStartDate(e.detail.value)
  }
  const handelEndDate = (e) => {
    setEndDate(e.detail.value)
  }
  const handelShare = () => {
    setLoading(true)
    var myDate = new Date();
    shareRoom({
      hotelId: room.hotelId,
      personNum: roomNum == '' ? 0 : roomNum,
      roomId: room.roomId,
      startDate: startDate == '' ? myDate.toLocaleDateString() : startDate,
      endDate: endDate == '' ? myDate.toLocaleDateString() : endDate
    }).then((res) => {
      onFinish(res)
      setStartDate('')
      setEndDate('')
      setRoomNum()
      setLoading(false)
    })
  }
  return (
    <Popup show={showCutover} onClose={onClose}>
      <View className='from-room srl'>
        <View style={{ marginBottom: '25px' }}>
          <View className='rzline' /><Label className='srl mg'>请输入入住人信息</Label><View className='rzline' />
        </View>
        <View className='srleft'>
          <Label>入住人数：</Label>
          <Input onInput={(e) => setRoomNum(e.detail.value)} value={roomNum} type='number' placeholder='请输入入住人数' />
        </View>
        <View className='srleft'>
          <Label >入住开始时间：</Label>
          <Picker className='picker' mode='date' onChange={handelStartDate}>
            {startDate == '' ? '请选择入住开始时间' : startDate}
          </Picker>
        </View>
        <View className='srleft'>
          <Label>入住结束时间：</Label>
          <Picker className='picker' mode='date' onChange={handelEndDate}>
            {endDate == '' ? '请选择入住结束时间' : endDate}
          </Picker>
        </View>
        <View>
          <Button className='cancel' onClick={onClose}>取消</Button>
          <Button className='btn' onClick={handelShare} loading={loading} disabled={loading}>分享</Button>
        </View>
      </View>
    </Popup>
  )
}