miniapp-v2/src/pages/details/foodDetails/foodDetails.jsx

import CustomNav from '@/components/CustomNav'
import withLayout from '@/layouts'
import { getShopDetail, getShopPackage, getShopcity, getExtendContent } from '@/services/home'
import { useState, useEffect } from 'react'
import { Swiper, SwiperItem } from '@tarojs/components';
import Star from '@/components/Star/Star.jsx'
import Cards from '@/components/foodCards/foodCards.jsx'
import ax from '@/assets/icons/housemantj/onlove.png'
import yysj from '@/assets/icons/housemantj/营业时间.png'
import dw from '@/assets/icons/housemantj/地址.png'
import zhuandao from '@/assets/icons/housemantj/backTop.png'
import titlezs from '@/assets/icons/housemantj/标题装饰.png'
import showMore from '@/assets/icons/housemantj/查看更多.png'
import './foodDetails.less'
import Extend from '../components/extend'

export default withLayout((props) => {
  const { router, person } = props
  const { id } = props.router.params
  //商铺基础信息
  const [detail, setDetail] = useState({})
  //商铺套餐
  const [spackage, setPackage] = useState([])
  const [city, setCity] = useState({})
  //banner图集数组
  const [imlist, setimlist] = useState([])
  const [index, setIndex] = useState(0)
  const handchange = (e) => {
    setIndex(e.detail.current)
  }

  //当前套餐总数
  const [newpgNum, setNewpgNum] = useState(0)
  //全部套餐个数
  const [AllpgNum, setAllpgNum] = useState(0)
  //套餐当前页数
  const [page, setpage] = useState(2)
  const pgMore = () => {
    setpage(page + 1)
    getShopPackage(id, { pageNum: page }).then((res) => {
      setPackage([...spackage, ...res.records])
      setNewpgNum(newpgNum + res.records.length)
    })
  }
  //本店指南
  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('shop', id, { pageNum: epage }).then((res) => {
      setExtend([...extend, ...res.records])
      setNewextNum(newextNum + res.records.length)
    })
  }
  useEffect(() => {
    getShopDetail(id).then((res) => {
      setDetail(res)
      setimlist(res.imageList || [])
      getShopcity(res.cityId).then((res2) => {
        setCity(res2)
      })
    })
    getShopPackage(id).then((res) => {
      setPackage(res.records || [])
      setNewpgNum(res.records.length)
      setAllpgNum(res.total)
    })
    getExtendContent('shop', id).then((res) => {
      setExtend(res.records || [])
      setAllextNum(res.total)
      setNewextNum(res.records.length)
    })
  }, [])
  const star = parseFloat(((detail.sweetScore + detail.environmentScore + detail.serviceScore) / 3).toFixed(1));
  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}
            >
              {
                imlist.map((item) =>
                  <SwiperItem>
                    <image src={item.url} className='storeImage' >
                      <view className='tpPage'>
                        <text>{index + 1}</text><text>/</text><text>{imlist.length}</text>
                      </view>
                    </image>
                  </SwiperItem>
                )
              }
            </Swiper>
            <view className='storeJs'>
              <view style={{ overflow: 'hidden' }}>
                <view className='storeName'>{detail.shopName}</view>
                <view className='sprice'>
                  <text className='t1'>￥</text>
                  {detail.averagePrice}/人
                  <view className='bzRight'>
                    <image src={ax} style={{ width: '15px', height: '15px', marginRight: '11rpx', marginBottom: '-2px' }} />
                    爆赞{detail.likeNum}</view>
                </view>
              </view>
              <view className='appraise'>
                <Star star={star} />
                <text className='storezf'>{star}</text>
                <view style={{ float: 'right', marginTop: '5px' }}>
                  <text className='comment'>点评：</text>
                  <text className='t1'>口味：{detail.sweetScore}</text>
                  <text className='t1'>环境：{detail.environmentScore}</text>
                  <text className='t1'>服务：{detail.serviceScore}</text>
                </view>
              </view>
              <view className='yysj'>
                <image src={yysj} className='yysjImg' />营业时间：{detail.businessHours}
              </view>
              <view className='dpPosition'>
                <image src={dw} className='dwTip' />
                <view>{detail.address}
                  <image src={zhuandao} className='zhuandao' />
                </view>
              </view>
            </view>
          </view>
          <view style={{ position: 'relative', display: spackage ? '' : 'none' }}>
            <view className='title'>
              <image src={titlezs}></image>
              <text>返现套餐</text>
            </view>

            {
              spackage?.map((item) => <Cards star={star} item={item} city={city} />)
            }

            <view className='showMore' style={{ display: newpgNum == AllpgNum ? 'none' : '' }} onClick={pgMore}>
              <view>查看更多</view>
              <image src={showMore} className='moreTip' />
            </view>
          </view>

          <view style={{ position: 'relative', display: extend ? '' : 'none' }}>
            <view className='title'>
              <image src={titlezs}></image>
              <text>本店指南</text>
            </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 className='botton'>已经到底了~</view>
        </scroll-view>
      </view>
    </view>
  )
})