miniapp-v2/src/pages/details/mjDetails/sceneryDetails.jsx

import CustomNav from '@/components/CustomNav'
import ax from '@/assets/icons/housemantj/onlove.png'
import dw from '@/assets/icons/housemantj/地址.png'
import titlejd from '@/assets/icons/housemantj/推荐景点.png'
import titlems from '@/assets/icons/housemantj/推荐美食.png'
import showMore from '@/assets/icons/housemantj/查看更多.png'
import share from '@/assets/icons/housemantj/景点分享.png'
import good from '@/assets/icons/housemantj/景点爆赞.png'
import baozan from '@/assets/icons/housemantj/爆赞.png'
import weibaozan from '@/assets/icons/housemantj/未赞.png'
import withLayout from '@/layouts'
import { useState, useEffect, useRef } from 'react'
import { getTouristDetail, getExtendContent, getRecommendList } from '@/services/home'
import { Swiper, SwiperItem,Button } from '@tarojs/components';
import useSave from "@/utils/hooks/useSave"
import useLike from "@/utils/hooks/useLike"
import Cards from '@/components/foodCards/foodCards.jsx'
import Taro,{ useShareAppMessage } from '@tarojs/taro'
import Extend from '../components/Extend/extend'
import './sceneryDetails.less'



export default withLayout((props) => {
  const { router, person } = props
  const { id, distance, location } = props.router.params
  const [detail, setDetail] = useState({})
  const [isSaved, toggleSave] = useSave(detail.isSaved, 'tourist', id)
  const [isLike, toggleLike] = useLike(detail.isLike, 'tourist', id)

  //banner图集数组
  const [imglist, setimglist] = useState([])
  const [index, setIndex] = useState(0)
  const handchange = (e) => {
    setIndex(e.detail.current)
  }

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

  // 推荐套餐列表
  const [recommend, setRecommend] = useState([])

  const openMap = () => {
    Taro.openLocation({
      longitude: log.current - 0,
      latitude: lat.current - 0,
      name: detail.touristName,
      address: detail.address,
      scale: 12,
    })
  }
  const log = useRef('')
  const lat = useRef('')


  useEffect(() => {
    getTouristDetail(id).then((res) => {
      log.current = (res.locaton).toString().split(',')[0]
      lat.current = (res.locaton).toString().split(',')[1]
      setDetail(res)
      setimglist(res.imageList || [])

    })
    getExtendContent('tourist', id).then((res) => {
      setExtend(res.records || [])
      setAllextNum(res.total)
      setNewextNum(res.records.length)
    })
    getRecommendList({ location: location }).then((res) => {
      setRecommend(res || [])
    })
  }, [])
  
  // 分享
  useShareAppMessage(()=>{
    return {
      title: detail.touristName,
      path: `/pages/details/mjDetails/sceneryDetails?id=${id}`,
      imageUrl: detail.poster,
    }
  
})
  return (
    <view className='page-index'>
      <view className='index-navbar'>
        <CustomNav title='十公里' />
      </view>
      <view style={{ overflow: 'auto', padding: '0 30rpx', background: '#F8F8F8' }}>
        <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
          <view className='storeDetails'>
            <Swiper
              className='.swiper'
              circular
              current={index}
              onChange={handchange}
            >
              {
                imglist.map((item) =>
                  <SwiperItem>
                    <image src={item.url} className='storeImage' >
                      <view className='tpPage'>
                        <text>{index + 1}/{imglist.length}</text>
                      </view>
                    </image>
                  </SwiperItem>
                )
              }
            </Swiper>

            <view className='storeJs'>
              <view className='introduce'>
                <text className='storeName'>{detail.touristName}</text>
              </view>
              <view className='bz'>
                <image src={baozan} style={{ width: '15px', height: '15px', marginRight: '10px', marginBottom: '-2px' }} />
                <text className='bzRight'>爆赞{detail.likeNum}</text>
              </view>
              <view className='wz'>{detail.address}</view>
              <view className='dpPosition' onClick={openMap}>
                <image src={dw} className='dwTip' />
                <view className='distance'>{distance}公里</view>
              </view>
            </view>
          </view>
          <view className='jdjs'>
            <view>{detail.description}</view>
            <view className='line'></view>
            <view className='sc' onClick={toggleSave}>
              <image className='scTip' src={isSaved > 0 ? ax : good} /><text>{isSaved > 0 ? '已收藏' : '加入收藏'}</text>
            </view>
          </view>
          <view style={{ position: 'relative', display: extend == '' ? 'none' : '' }}>
            <view className='title'>
              <image src={titlejd} />景点介绍
            </view>
            {extend?.map((item) => <Extend item={item} />)}
            <view className='showMore' style={{ display: newextNum == AllextNum ? 'none' : '' }} onClick={extendMore}>
              <view>点击查看更多</view>
              <image src={showMore} className='moreTip' />
            </view>
          </view>
          <view style={{ position: 'relative', display: recommend == '' ? 'none' : '' }}>
            <view className='title'>
              <image src={titlems} />老板推荐好吃的
            </view>
            {recommend?.map((item) => <Cards item={item} />)}
          </view>
          <view className='bottom'>已经到底了~</view>
        </scroll-view>
      </view>
      <view className='bottomTab'>
      <Button openType='share' className='sharebtn'>分享</Button>
        <view className='tab'>
          <image className='share' src={share} />分享
        </view>
        <view className='tab' onClick={toggleLike}>
          <image className='good' src={isLike > 0 ? baozan : weibaozan} />{isLike > 0 ? '已爆赞' : '爆赞'}
        </view>
        <view className='tab' onClick={toggleSave}>
          <image className='collection' src={isSaved > 0 ? ax : good} />{isSaved > 0 ? '已收藏' : '加入收藏'}
        </view>
      </view>

    </view>
  )
})