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/loc-o.png'
import titlejd from '@/assets/icons/housemantj/goodTourist.png'
import titlems from '@/assets/icons/housemantj/goodFood.png'
import { compressImage } from '@/utils'
import share from '@/assets/icons/housemantj/touristShare.png'
import good from '@/assets/icons/housemantj/touristGood.png'
import baozan from '@/assets/icons/housemantj/bgood.png'
import weibaozan from '@/assets/icons/housemantj/unLike.png'
import zhuandao from "@/assets/icons/housemantj/backTop.png";
import withLayout from '@/layouts'
import SpinBox from "@/components/Spin/SpinBox";
import TabIcon from '@/components/HorTabbar/TabIcon'
import { useState, useEffect } from 'react'
import { getTouristDetail, getExtendContent, getRecommendList } from '@/services/home'
import { Swiper, SwiperItem, Button, View } 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 logo from "../foodDetails/laba.png";

import './sceneryDetails.less'

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

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

  //本店指南
  const [extend, setExtend] = useState([])

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

  const openMap = () => {
    const [lng, lat] = detail.locaton.split(',')

    Taro.openLocation({
      longitude: lng - 0,
      latitude: lat - 0,
      name: detail.touristName,
      address: detail.address,
      scale: 12,
    })
  }
  //引导显隐
  const [guidance, setGuidance] = useState('shareOff')
  useEffect(() => {
    if (router.params.enterType === "share") {
      setGuidance('shareOn')
    }
  }, [router.params.enterType])


  useEffect(() => {
    if (id) {
      setLoading(true)
      getTouristDetail(id, { location }).then((res) => {
        setDetail(res)
        setimglist(res.imageList || [])
        getRecommendList({ location: res.locaton }).then((res2) => {
          setRecommend(res2 || [])
        })
      })
      getExtendContent('tourist', id, { pageSize: 500 }).then((res) => {
        setExtend(res.records || [])
        setLoading(false)

      })
    } else {
      getRecommendList({ location }).then((res2) => {
        setRecommend(res2 || [])
        setLoading(false)
      }).catch(e => {
        setLoading(false)
      })
    }
  }, [id, location])
  // 分享
  useShareAppMessage(() => {
    return {
      title: detail.touristName,
      path: `/pages/details/mjDetails/sceneryDetails?id=${id}&enterType=share`,
      imageUrl: detail.poster,
    }

  })
  return (
    <view className='page-index'>
      {
        guidance === 'shareOn' ? <view className='index-navbar'>
          <add-tipsFood logo={logo} custom duration={-1} />
          <CustomNav title='十公里' noback />
        </view> :
          <view className='index-navbar'>
            <CustomNav title='十公里' />
          </view>
      }


      <SpinBox loading={loading} style={{ overflow: 'hidden', padding: '0 30rpx', height: '100%', background: '#F8F8F8' }}>
        <scroll-view scrollY style={{ height: '100%' }}>
          <view className='storeDetails'>
            <View className='huadong'>
              <Swiper
                className='swiper'
                circular
                onChange={handchange}
              >
                {
                  imglist.map((item) => (
                    <SwiperItem>
                      <image src={compressImage(item.url)} mode='aspectFit' className='storeImage' />
                    </SwiperItem>
                  ))}
              </Swiper>
              <view className='tpPage'>
                <text>
                  {index + 1}/{imglist.length}
                </text>
              </view>
            </View>

            <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'>{(detail.distance / 1000).toFixed(2)}公里<image src={zhuandao} className="zhuandao" /></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>
          <view style={{ position: 'relative', marginTop: '6em', display: recommend == '' ? 'none' : '' }}>
            <view className='title'>
              <image src={titlems} />老板推荐好吃的
            </view>
            {(recommend || []).map((item) => <Cards item={item} det={item} st={parseFloat(item.score.toFixed(1))} />)}
          </view>
          <view className='botton'>这是我的底线</view>
        </scroll-view>
      </SpinBox>

      <view className='index-tabber weui-tabbar' style={{ background: '#fff' }}>
        <view className='weui-tabbar__item'>
          <Button openType='share' className='purebtn'><TabIcon icon={share} text='分享' /></Button>
        </view>
        <view className='weui-tabbar__item' onClick={toggleLike}>
          <TabIcon icon={isLike > 0 ? baozan : weibaozan} text={isLike > 0 ? "已爆赞" : "爆赞"} />
        </view>
        <view className='weui-tabbar__item' onClick={toggleSave}>
          <TabIcon icon={isSaved > 0 ? ax : good} text={isSaved > 0 ? "已收藏" : "加入收藏"} />
        </view>
      </view>
    </view>
  )
})