miniapp-v2/src/components/foodCards/foodCards.jsx

import Taro from '@tarojs/taro'
import { View, Text, Image, Button, ScrollView } from '@tarojs/components'
import CouponCard from '@/components/CouponCard'
import Location from '@/components/Location'
import { compressImage } from '@/utils'
import SaveIcon from '@/components/SaveIcon'
import Pay from '@/assets/icons/housemantj/pay.png'
import Popup from '@/components/Popup'
import { useState } from 'react'
import './style.less'


const CouponMedia = CouponCard.Media
const Action = CouponCard.Action

//套餐卡片
export default (props) => {
  const { item, st, det, editable, setScroll, goshop, scene, subOrderId, id } = props
  const { shopId } = props.item
  const goFood = () => {
    Taro.navigateTo({ url: `/pages/details/foodDetails/foodDetails?id=${shopId}` })
  }
  const [showCutover, setShowCutover] = useState(false)
  const goDetail = () => {
    //打开当前套餐详情弹窗
    setShowCutover(true)
    //使父组件禁止滚动
    setScroll(false)
  }
  const onClose = () => {
    //关闭当前套餐详情弹窗
    setShowCutover(false)
    //使父组件恢复滚动
    setScroll(true)
  }



  const handlePayClick = () => {
    Taro.navigateTo({ url: `/pages/PayOrder/index?packageId=${item.packageId}&scene=${scene || ''}&subOrderId=${subOrderId}&id=${id}` })
  }
  const PayAction = <Action.Icon icon={Pay} text='支付' onClick={handlePayClick} />
  return (
    <View style={{ margin: '15px 5px' }} >
      <View className='packageDetail' style={{ display: goshop ? '' : 'none' }}>
        <Popup show={showCutover} maskClosable={showCutover} onClose={onClose}>
          <ScrollView
            scrollY
            style={{ maxHeight: '60vh' }}
          >
            <Image mode='widthFix' src={item.details ? item.details : item.poster} />
          </ScrollView>
        </Popup >
      </View>
      <CouponCard action={PayAction}>
        <CouponMedia onClick={goshop ? goDetail : goFood}>
          <CouponMedia.Header
            cashback={item.cashback}
            image={compressImage(item.poster)}
            badge='food'
          />
          <CouponMedia.Body star={st}>
            <View className='foodCard'>
              <View className='cpn-card-text'>
                {(item.description).toString().length > 25 ? (item.description).substring(0, 25) + '...' : (item.description)}
              </View>
              <View className='cpn-card-text' style={{ marginTop: '10rpx' }}>
                <Text className='cpn-card-text_mn'>￥{`${(item.actualPrice / 100)?.toFixed(2)}元`}</Text>
                <Text className='cpn-card-text_rm'>{`门市价${(item.standardPrice / 100)?.toFixed(2)}元`}</Text>
              </View>
              <View className='cpn-md-act'>
                <Location {...det} />
                <SaveIcon saved={item.isSaved > 0} targetType='shop_package' editable={editable} targetId={item.packageId} />
              </View>
            </View>
          </CouponMedia.Body>
        </CouponMedia>
      </CouponCard>
    </View>
  )
}