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

import { useState, useEffect, useRef } from "react";
import Taro, { useDidShow } from '@tarojs/taro'
import MoreGuide from "@/components/MoreGuide";
import BossCard from '@/components/BossCard'
import SpinBox from "@/components/Spin/SpinBox";

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 [loading, setLoading] = useState(false)

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

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

  const trackClick = useTrackClick(router)

  const [taRoomContent, setTaRoomContent] = useState([])
  //没有停车 wifi的就不显示按钮
  const [wifiButtonStyle, setWifiButtonStyle] = useState('')
  const [parkingButtonStyle, setParkingButtonStyle] = useState('')
  const [guideStyle, setGuideStyle] = useState('')
  const parkingGps = taRoomContent.parkingLocation || []
  const roomGps = taRoomContent.location || []



  const goContent = () => {
    if (roomOrderId) {
      goToRoomForm(roomOrderId).then((res) => {
        if (res.status !== 1 && res.personNum > 0) {
          Taro.reLaunch({
            url: `/pages/RoomOrder/index?roomOrderId=${roomOrderId}&status=${res.status}&roomId=${roomId}`,
          })
        }
      })
    }
  }


  useEffect(() => {
    goContent()
  }, [roomId, roomOrderId])

  useDidShow(() => {
    goContent()
  })

  const geiZy = () => {
    setLoading(true)
    getExtendContent('room', roomId, { pageSize: 500 }).then((res) => {
      // setExtend(res.records || [])
      setExtend(res.records)
      setIfroomId('reality')
      setLoading(false)

    })
    setLoading(true)
  }

  useEffect(() => {
    if (roomId) {
      setLoading(true)
      // 点击’去这里‘跳转导航
      getTaRoom(roomId).then((res) => {
        setTaRoomContent(res || [])
        setLoading(false)
      })
      //更多指引
      geiZy()
      getRecommendList({ location: roomGps }).then((res) => {
        setPackage(res || [])
        setLoading(false)
      })
    } else {
      setLoading(true)
      getRecommendList({ location: location }).then((res) => {
        setPackage(res || [])
        setLoading(false)

      })
      return
    }
    if (taRoomContent?.wifiPassword === "") {
      setWifiButtonStyle('none')
    }
    if (taRoomContent?.parkingAddress === "") {
      setParkingButtonStyle('none')
    }
  }, [roomId, roomGps, taRoomContent?.wifiPassword, taRoomContent?.parkingAddress, location])


  const goRoomMap = () => {
    if (taRoomContent.location) {
      const [longitude, latitude] = taRoomContent.location.split(',').map(x => x - 0)

      Taro.openLocation({
        longitude,
        latitude,
        name: taRoomContent.roomName,
        address: taRoomContent.address,
        scale: 12,
      })
    }
  }

  const goParkMap = () => {
    if (taRoomContent.parkingLocation) {
      const [longitude, latitude] = taRoomContent.parkingLocation.split(',').map(x => x - 0)

      Taro.openLocation({
        longitude,
        latitude,
        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' && (
            <SpinBox loading={loading}>
              <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>
              {/* --------房屋位置-------- */}
              {
                !roomGps ? <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>

              }


              {/* --------停车场-------- */}
              {
                !parkingGps ? <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>
                <view style={{ padding: '0 30rpx', boxSizing: 'border-box' }}>
                  {(extend || []).map((item, index) => <MoreGuide key={(index)} item={item} />)}
                </view>
              </view>
            </SpinBox>
          )
        }
        <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>
  )
}