miniapp-v2/src/components/BottomMoadl/index.jsx

import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import DeleteTravel from '@/assets/icons/Travel/delete.png'
import RecommendedCard from '@/components/foodCards/RecommendedCard'
import SpinBox from "@/components/Spin/SpinBox";

import { useState, useEffect } from 'react'
import { deleteTravel, getRecommendList } from '@/services/travel'

import './style.css'


export default (props) => {
  const { frameTitle, onRecommend, flag, ico, textNext, location, dayNumber, travelId, handelAddTravel } = props

  // const [flag, setFlag] = useState(false)
  // const [wrapAnimate, setWrapAnimate] = useState('wrap wrapAnimate')
  // const [frameAnimate, setFrameAnimate] = useState('frame-wrapper frameAnimate')
  let wrapAnimate = 'wrap wrapAnimate'
  let frameAnimate = 'frame-wrapper frameAnimate'
  const [textNextSum, setTextNext] = useState(1)
  const [recommendContent, setRecommendContent] = useState([])
  const [loading, setLoading] = useState(false)

  const hideFrame = () => {
    wrapAnimate = 'wrap wrapAnimateOut'
    frameAnimate = 'frame-wrapper frameAnimateOut'
    onRecommend()

  }

  const catchNone = () => {
    //阻止冒泡

  }
  const handelText = () => {
    handleTextNext()

  }


  useEffect(() => {
    setLoading(true)
    getRecommendList({ location: location, pageNum: textNextSum, pageSize: 3 }).then(e => {
      setRecommendContent(e.records)
      setLoading(false)

    }).catch(s => {
      setLoading(false)

    })
  }, [location, textNextSum])


  //换一批
  const handleTextNext = (e) => {
    // setLoading(true)
    setTextNext(textNextSum + 1)

    e.stopPropagation()

    // getRecommendList({ location: location, pageNum: textNextSum, pageSize: 3 }).then(e => {
    //   setRecommendContent(e.records)
    //   setLoading(false)

    // }).catch(s => {
    //   setLoading(false)

    // })

  }

  return (
    flag && <view  >
      <view className={wrapAnimate} style='background:rgba(0,0,0,0);'></view>
      <view onClick={hideFrame} className={frameAnimate}>
        <view onClick={catchNone} className='frame'>
          {/* 标题  */}
          <view className='title-wrapper '>
            <view>{frameTitle}</view>
            {/* <image onClick={hideFrame} src={DeleteTravel} mode='widthFix'></image> */}
          </view>
          {/* 内容 */}

          <View style='overflow-x: hidden;'>
            <SpinBox loading={loading}>

              {
                recommendContent.map((item, index) =>



                  <RecommendedCard key={index} item={item} det={item} editable='1' location={location} travelId={travelId} dayNumber={dayNumber} handelAddTravel={handelAddTravel} />
                )
              }
              {props.children}
            </SpinBox>

            <view className='bottom-text' onClick={handleTextNext}>
              <image src={ico} />
              <text>{textNext}</text>
            </view>
          </View>

        </view>

      </view>

    </view>
  )



}