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 Taxi from '@/assets/icons/GuideCheck/taxi.png'
import WiFi from '@/assets/icons/GuideCheck/WiFi.png'
import GoHere from '@/assets/icons/GuideCheck/GoHere.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 showMore from '../../../assets/icons/housemantj/查看更多.png'

import './GuideCss/style.less'






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

  const cardNavigateTo = undefined


  // 住宿经纬度
  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) => {
        if (res.status !== 1) {
          Taro.navigateTo({
            url: `/pages/RoomOrder/index?roomOrderId=${roomOrderId}&status=${res.status}&roomId=${roomId}`,
          })
        }
      })
    }
  }, [roomOrderId])



  useEffect(() => {

    if (roomId) {
      // 点击’去这里‘跳转导航
      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 || [])
      })


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

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


    if (taRoomContent?.wifiPassword === "") {
      setWifiButtonStyle('none')
    }
    if (taRoomContent?.parkingAddress === "") {
      setParkingButtonStyle('none')
    }
    // if (extend.length === 0) {
    //   setGuideStyle('none')
    // }
    // if (extend) {
    //   extend.map(item => {
    //     if (item.pages) {
    //       setGuideStyle('none')
    //     } else {
    //       setGuideStyle('')
    //     }
    //   })
    // }

  }, [roomId, RoomLocation])


  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 scroll-y 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'>
                <view className='MessageCard-title1'>
                  <text className='MessageCard-left'>----------</text>
                  民宿位置
                  <text className='MessageCard-right'>----------</text>
                </view>
                <view className='MessageCard-content'>
                  <view className='MessageCard-name' >{taRoomContent?.address}</view>
                </view>
                <view className='MessageCard-button-RoomName' onClick={() => { goRoomMap() }}>
                  <image className='MessageCard-image' src={GoHere} />
                  <text className='MessageCard-text'  >去这里</text>
                </view>
              </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?.parkingAddress}</view>
                </view>
                <view className='MessageCard-button-Park' onClick={() => { goParkMap() }} style={{ display: parkingButtonStyle }} >
                  <image className='MessageCard-image' src={Taxi} />
                  <text className='MessageCard-text'  >去这里</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='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>
        {(spackage || []).map((item, index) => <BossCard cardNavigateTo={cardNavigateTo} key={(index)} item={item} />)}
        {/* 卡片------------- */}
        {/* <view className='Guide-Content-box-two'>
          <view className='title-image-two'>
            <image mode='scaleToFill' className='title-image-cup-two' src={Cup} />
            <text className='title-title-boss-two' >老板推荐的攻略</text>
          </view>
        </view>
        <view className='Raiders-box-one'>
          <view className='Raiders-imageLove'>
            <image className='Raiders-image-Raiders' src={Raiders} />
            <image className='Raiders-image-loveOn' src={loveOn} />
          </view>
          <view className='Raiders-box'>
            <image className='Raiders-image' mode='widthFix' src={RaidersImage} />
            <text className='Raiders-text'>南京古称金陵，自东吴孙权迁都南京以来，多个汉字汉字汉字汉字</text>
            <view className='Raiders-kilometer-on'>
              <image className='Raiders-kilometer' src={position} />
              <text className='Raiders-kilometer-image'>12.8公里</text>
              <text className='Raiders-on-text'>￥8888/人</text>
            </view>
          </view>
          <view className='Raiders-box' style='padding-lift:10px'>
            <view className='Raiders-imageLove'>
              <image className='Raiders-image-Raiders' src={Raiders} />
              <image className='Raiders-image-loveOn' src={loveOn} />
            </view>
            <image className='Raiders-image' mode='widthFix' src={RaidersImage} />
            <text className='Raiders-text'>南京古称金陵，自东吴孙权迁都南京以来，多个汉字汉字汉字汉字</text>
            <view className='Raiders-kilometer-on'>
              <image className='Raiders-kilometer' src={position} />
              <text className='Raiders-kilometer-image'>12.8公里</text>
              <text className='Raiders-on-text'>￥8888/人</text>
            </view>
          </view>
        </view> */}
      </view>
    </scroll-view>

  )
}