miniapp-v2/src/shop/components/Sparead/spreadMoney.jsx

import { useState, useMemo } from 'react'
import Taro from '@tarojs/taro'
import List from '@/components/List';
import Picker from '@/components/Picker'
import { getAccount } from '@/services/shopBoss'
import ShopCommission from '@/components/ShopCommission'
import eyes from '@/assets/icons/shopKeeper/eyesON.png'
import ceyes from '@/assets/icons/shopKeeper/eyesOFF.png'
import cutoverUser from '@/assets/icons/UserCenter/cutoverUser.png'
import NoData from '@/components/NoData'
import ToggleRole from '@/components/toggleRole/ToggleRole'
import './spreadMoney.less'

const getList = (id) => (params) => getAccount(id, params)

export default (props) => {
  const { shopList, shop, onHotelChange, shopMoney } = props
  const [showCutover, setShowCutover] = useState(false)
  const [isyear, setYear] = useState(true)
  const [isMomth, setMonth] = useState(false)

  const queryParams = useMemo(() => ({}), [])


  const reqestAPI = getList(shopMoney?.acc?.accountId)




  //小眼睛开关
  const handleYear = () => {
    isyear ? setYear(false) : setYear(true)
  }
  const handleMonth = () => {
    isMomth ? setMonth(false) : setMonth(true)
  }

  //商铺更改
  const handleHotelChange = (shopId, current) => {
    onHotelChange(current)
  }



  const ShowMoldeOn = () => {
    setShowCutover(true)
  }
  const onClose = () => {
    setShowCutover(false)
  }

  return (
    <view>

      <view style={{ padding: '0 15px 0 15px', height: '100%' }}>
        <ToggleRole showCutover={showCutover} maskClosable={showCutover} onClose={onClose} role='shop' />

        <view className='storexx'>

          <view className='storeName'>店名：<Picker style={{ display: 'inline-block' }} placeholder="请选择商铺" value={shop?.shopId} kv={['shopName', 'shopId']} dicts={shopList} onChange={handleHotelChange} /></view>
          <view onClick={ShowMoldeOn} className='User-info-cutover'>
            <image className='User-info-cutover-image' src={cutoverUser} />
          </view>
          <view className='tip'>（计算收入以核销为准）</view>
          <view className='money'>
            <view className='sleft'>
              <view className='lword'>全年推广收入（税前）</view>
              <view className='yearMoney'>
                <text>{isyear ? (shopMoney?.totalCharges / 100).toFixed(2) : '******'}</text>元
                <image className='micon' src={isyear ? eyes : ceyes} onClick={handleYear} />
              </view>
            </view>
            <view className='line' />
            <view className='sright'>
              <view className='rword'>当月推广收入（税前）</view>
              <view className='monthMoney'>
                <text>{isMomth ? (shopMoney?.currentCharges / 100).toFixed(2) : '******'}</text>元
                <image className='micon2' src={isMomth ? eyes : ceyes} onClick={handleMonth}></image>
              </view></view>
          </view>
        </view>

        <view className='title'>推广收入记录</view>
        <view style={{ height: '50vh' }}>

          <List
            style={{ height: '100%' }}
            request={reqestAPI}
            params={queryParams}
            noData={<NoData />}
            refresherEnabled
            render={({ item, index }) => <ShopCommission key={(index)} item={item} />}
          >
          </List>
        </view>
      </view>
    </view >
  )
}