miniapp-v2/src/pages/index/tabs/Guide.jsx

import { useState, useEffect, useRef } from "react";
import Taro from '@tarojs/taro'
import MoreGuide from "@/components/MoreGuide";
import BossCard from '@/components/BossCard'
import GPS from '@/assets/icons/GuideCheck/GPS.png'
import copy_logo from '@/assets/icons/GuideCheck/copy_logo.png'
import Cup from '@/assets/icons/GuideCheck/Cup.png'
import BlackSpot from '@/assets/icons/GuideCheck/BlackSpot.png'
import { getRecommendList, getExtendContent } from '@/services/home'
import sleep from '@/assets/icons/GuideCheck/sleep_logo.png'
import { getTaRoom, goToRoomForm } from '@/services/taRoom​'
import useTrackClick from '@/utils/hooks/useTrackClick'
import showMore from '@/assets/icons/housemantj/setMore.png'
import { useModel } from "@/store";
import './GuideCss/style.less'


export default (props) => {
  const { router, person, location, } = props
  let { roomId, roomOrderId } = router.params
  const [extend, setExtend] = useState([])
  const [ifroomId, setIfroomId] = useState('havenot')
  const [spackage, setPackage] = useState([])

  const { roomId: rid } = useModel('hotel')

  if (!roomId && rid) {
    roomId = rid
  }

  const trackClick = useTrackClick(router)

  // 住宿经纬度
  const Roomlog = useRef('')
  const Roomlat = useRef('')
  // 停车场经纬度
  const Parklog = useRef('')
  const Parklat = useRef('')
  const [taRoomContent, setTaRoomContent] = useState([])
  const RoomLocation = taRoomContent?.location
  //没有停车 wifi的就不显示按钮
  const [wifiButtonStyle, setWifiButtonStyle] = useState('')
  const [parkingButtonStyle, setParkingButtonStyle] = useState('')
  const [guideStyle, setGuideStyle] = useState('')

  //当前指南总数
  const [newextNum, setNewextNum] = useState(0)
  //全部指南个数
  const [AllextNum, setAllextNum] = useState(0)
  //指南当前页数
  const [epage, setEpage] = useState(2)
  const extendMore = () => {
    setEpage(epage + 1)
    getExtendContent('room', roomId, { pageNum: epage }).then((res) => {
      setExtend([...extend, ...res.records])
      setNewextNum(newextNum + res.records.length)
    })
  }


  useEffect(() => {
    if (roomOrderId) {
      goToRoomForm(roomOrderId).then((res) => {
        console.log("🚀 ~ file: Guide.jsx ~ line 65 ~ goToRoomForm ~ res", res)

        if (res.status !== 1 && res.personNum > 0) {
          Taro.navigateTo({
            url: `/pages/RoomOrder/index?roomOrderId=${roomOrderId}&status=${res.status}&roomId=${roomId}`,
          })
        }
      })
    }
  }, [roomId, roomOrderId])


  useEffect(() => {

    if (roomId) {
      console.log('--------------------------');
      // 点击’去这里‘跳转导航
      getTaRoom(roomId).then((res) => {
        Roomlog.current = (res.location).toString().split(',')[0]
        Roomlat.current = (res.location).toString().split(',')[1]
        Parklog.current = (res.parkingLocation).toString().split(',')[0]
        Parklat.current = (res.parkingLocation).toString().split(',')[1]
        setTaRoomContent(res || [])
      })
      //更多指引
      getExtendContent('room', roomId).then((res) => {
        setExtend(res.records || [])
        setIfroomId('reality')
        setAllextNum(res.total)
        setNewextNum(res.records.length)
      })
      // getRecommendList({ location: RoomLocation }).then((res) => {
      //   setPackage(res || [])
      // })
      getRecommendList({ location: location }).then((res) => {
        setPackage(res || [])
      })

    } else {
      getRecommendList({ location: location }).then((res) => {
        setPackage(res || [])
      })

      return
    }
    // extend?.records === []


    if (taRoomContent?.wifiPassword === "") {
      setWifiButtonStyle('none')
    }
    if (taRoomContent?.parkingAddress === "") {
      setParkingButtonStyle('none')
    }


  }, [roomId, RoomLocation, taRoomContent?.wifiPassword, taRoomContent?.parkingAddress, location])


  const goRoomMap = () => {
    Taro.openLocation({
      longitude: Roomlog.current - 0,
      latitude: Roomlat.current - 0,
      name: taRoomContent.roomName,
      address: taRoomContent.address,
      scale: 12,
    })
  }

  const goParkMap = () => {
    Taro.openLocation({
      longitude: Parklog.current - 0,
      latitude: Parklat.current - 0,
      name: taRoomContent.parkingAddress,
      address: taRoomContent.parkingAddress,
      scale: 12,
    })
  }




  const wifiCopy = () => {
    Taro.setClipboardData({
      data: taRoomContent?.wifiPassword,
      success: e => {
        Taro.showToast({
          title: '密码已复制',
          icon: 'success',
          duration: 2000,
        })
      }
    })
  }




  return (
    <scroll-view scrollY style='height:100%;'  >

      <view className='Guide-Home-box'>


        {
          ifroomId === 'havenot' && (
            <view className='Guide-image-text-box'>
              <image className='Guide-images' src={sleep} />
              <view className='Guide-text'>休息一下，休息一下~</view>
            </view>
          )
        }
        {/* 有民宿的情况下 */}
        {
          ifroomId === 'reality' && (
            <view>
              {/* 
              <view className='MessageCard'>
                <view className='MessageCard-title1'>
                  <text className='MessageCard-left'>----------</text>
                  名称
                  <text className='MessageCard-right'>----------</text>
                </view>
                <view className='MessageCard-content'>
                  <view className='MessageCard-name' >{taRoomContent?.roomName}</view>
                </view>
              </view>
              <view className='MessageCard-hotle'>
                <view className='MessageCard-title1-hotle'>
                  <text className='MessageCard-left-hotle'>----------</text>
                  民宿位置
                  <text className='MessageCard-right-hotle'>----------</text>
                </view>
                <view className='MessageCard-content-hotle'>
                  <view className='MessageCard-name-hotle' >{taRoomContent?.address}</view>
                </view>
                <view className='MessageCard-button-RoomName-hotle' onClick={() => { goRoomMap() }}>
                  <image className='MessageCard-image-hotle' src={GoHere} />
                  <text className='MessageCard-text-hotle'  >去这里</text>
                </view>
              </view>
              <view className='MessageCard-parkView'>
                <view className='MessageCard-title1-parkView'>
                  <text className='MessageCard-left-parkView'>----------</text>
                  停车位置
                  <text className='MessageCard-right-parkView'>----------</text>
                </view>
                <view className='MessageCard-content-parkView'>
                  <view className='MessageCard-name-parkView' >{taRoomContent?.parkingAddress}</view>
                </view>
                <view className='MessageCard-button-Park-parkView' onClick={() => { goParkMap() }} style={{ display: parkingButtonStyle }} >
                  <image className='MessageCard-image-parkView' src={Taxi} />
                  <text className='MessageCard-text-parkView'  >去这里</text>
                </view>
              </view>
              <view className='MessageCard'>
                <view className='MessageCard-title1'>
                  <text className='MessageCard-left'>----------</text>
                  WiFi信息
                  <text className='MessageCard-right'>----------</text>
                </view>
                <view className='MessageCard-content' style={{ display: wifiButtonStyle }} >
                  <view className='MessageCard-name' >名称：{taRoomContent?.wifiName}</view>
                  <view className='MessageCard-info'  ><text className='MessageCard-name'>密码：</text>{taRoomContent?.wifiPassword}</view>
                </view>

                <view className='MessageCard-button' onClick={() => { wifiCopy() }} style={{ display: wifiButtonStyle }}>
                  <image className='MessageCard-image' src={WiFi} />
                  <text className='MessageCard-text'>复制</text>
                </view>
              </view> */}


              <view className='room-box-info-ROOM'>
                <view className='room-bi-name-ROOM' >
                  <view className='room-bin-title-ROOM'>房屋名称</view>
                  <view className='room-bint-nameInfo-ROOM'>{taRoomContent?.roomName}
                  </view>
                </view>
              </view>
              {/* --------房屋位置-------- */}

              <view className='room-box-info-HouLocation'>
                <view className='room-bi-name-HouLocation' >
                  <view className='room-bin-title-HouLocation'>房屋位置</view>
                  <view className='room-bint-nameInfo-HouLocation'>
                    <view className='room-bint-nameInfo-bool-HouLocation' >{taRoomContent?.address}</view>
                    <view className='room-bintn-button-HouLocation' onClick={() => { goRoomMap() }} style={{ display: wifiButtonStyle }}>
                      <image className='room-bintn-image-HouLocation' src={GPS} />
                      <text className='room-bintn-text-HouLocation'>去这里</text>
                    </view>
                  </view>
                </view>
              </view>
              {/* --------停车场-------- */}

              <view className='room-box-info-Parking'>
                <view className='room-bi-name-Parking' >
                  <view className='room-bin-title-Parking'>停车位置</view>
                  <view className='room-bint-nameInfo-Parking'>
                    <view className='room-bint-nameInfo-bool-Parking' >{taRoomContent?.parkingAddress}</view>
                    <view className='room-bintn-button-Parking' onClick={() => { goParkMap() }} style={{ display: wifiButtonStyle }}>
                      <image className='room-bintn-image-Parking' src={GPS} />
                      <text className='room-bintn-text-Parking'>去这里</text>
                    </view>
                  </view>
                </view>
              </view>

              {/* --------无线网-------- */}
              <view className='room-box-info-WIFIContent'>
                <view className='room-bi-name-WIFIContent' >
                  <view className='room-bin-title-WIFIContent'>WiFi信息</view>
                  <view className='room-bint-nameInfo-WIFIContent'>
                    <view className='room-bint-nameInfo-bool-WIFIContent-wifi' >名称：{taRoomContent?.wifiName}</view>
                    <view className='room-bint-nameInfo-bool-WIFIContent-password' >密码：{taRoomContent?.wifiPassword}</view>
                    <view className='room-bintn-button-WIFIContent' onClick={() => { wifiCopy() }} style={{ display: wifiButtonStyle }}>
                      <image className='room-bintn-image-WIFIContent' src={copy_logo} />
                      <text className='room-bintn-text-WIFIContent'>复制</text>
                    </view>
                  </view>
                </view>
              </view>

              <view className='Guide-Content-box'  >
                <view className='title-image' style={{ display: guideStyle }} >
                  <image mode='scaleToFill' className='title-image-cup' src={BlackSpot} />
                  <text className='title-title-boss' >更多指引</text>
                </view>
                {(extend || []).map((item, index) => <MoreGuide key={(index)} item={item} />)}

                <view className='showMore' style={{ display: newextNum == AllextNum ? 'none' : '' }} onClick={extendMore}>
                  <view>点击查看更多</view>
                  <image src={showMore} className='moreTip' />
                </view>
              </view>
            </view>
          )
        }
        <view className='Guide-Content-box'>
          <view className='title-image'>
            <image mode='scaleToFill' className='title-image-cup' src={Cup} />
            <text className='title-title-boss' >老板推荐好吃的</text>
          </view>
        </view>
        <view style={{ marginTop: '10rpx', marginBottom: '60rpx' }}>
          {(spackage || []).map((item, index) => <BossCard det={item} st={parseFloat(item.score.toFixed(1))} key={(index)} trackClick={trackClick} taRoomContent={taRoomContent} item={item} />)}
        </view>

      </view>
    </scroll-view>
  )
}