spreadMoney.jsx 3.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import { useState, useMemo } from 'react'
  2. import Taro from '@tarojs/taro'
  3. import List from '@/components/List';
  4. import Picker from '@/components/Picker'
  5. import {getAccount} from '@/services/shopBoss'
  6. import ShopCommission from '@/components/ShopCommission'
  7. import eyes from '@/assets/icons/shopKeeper/eyesON.png'
  8. import ceyes from '@/assets/icons/shopKeeper/eyesOFF.png'
  9. import cutoverUser from '@/assets/icons/UserCenter/cutoverUser.png'
  10. import NoData from '@/components/NoData'
  11. import ToggleRole from '@/components/toggleRole/ToggleRole'
  12. import './spreadMoney.less'
  13. const getList = (id) => (params) => getAccount(id, params)
  14. export default (props) => {
  15. const { shopList, shop, onHotelChange, shopMoney } = props
  16. const [showCutover, setShowCutover] = useState(false)
  17. const [isyear, setYear] = useState(false)
  18. const [isMomth, setMonth] = useState(false)
  19. const queryParams = useMemo(() => ({
  20. }), [])
  21. const reqestAPI = getList(shopMoney?.acc?.accountId)
  22. //小眼睛开关
  23. const handleYear = () => {
  24. isyear ? setYear(false) : setYear(true)
  25. }
  26. const handleMonth = () => {
  27. isMomth ? setMonth(false) : setMonth(true)
  28. }
  29. //商铺更改
  30. const handleHotelChange = (shopId, current) => {
  31. onHotelChange(current)
  32. }
  33. const ShowMoldeOn = () => {
  34. setShowCutover(true)
  35. }
  36. const onClose = () => {
  37. setShowCutover(false)
  38. }
  39. return (
  40. <view>
  41. <ToggleRole showCutover={showCutover} maskClosable={showCutover} onClose={onClose} role='shop' />
  42. <view style={{ padding: '30rpx', height: '100%' }}>
  43. <view className='storexx'>
  44. <view className='storeName'>店名:<Picker style={{ display: 'inline-block' }} placeholder="请选择商铺" value={shop?.shopId} kv={['shopName', 'shopId']} dicts={shopList} onChange={handleHotelChange} /></view>
  45. <view onClick={ShowMoldeOn} className='User-info-cutover'>
  46. <image className='User-info-cutover-image' src={cutoverUser} />
  47. </view>
  48. <view className='tip'>(计算收入以核销为准)</view>
  49. <view className='money'>
  50. <view className='sleft'>
  51. <view className='lword'>全年推广收入(税前)</view>
  52. <view className='yearMoney'>
  53. <text>{isyear ? (shopMoney?.totalCharges / 100).toFixed(2) : '******'}</text>元
  54. <image className='micon' src={isyear ? eyes : ceyes} onClick={handleYear} />
  55. </view>
  56. </view>
  57. <view className='line' />
  58. <view className='sright'>
  59. <view className='rword'>当月推广收入(税前)</view>
  60. <view className='monthMoney'>
  61. <text>{isMomth ? (shopMoney?.currentCharges / 100).toFixed(2) : '******'}</text>元
  62. <image className='micon2' src={isMomth ? eyes : ceyes} onClick={handleMonth}></image>
  63. </view></view>
  64. </view>
  65. </view>
  66. <view className='title'>推广收入记录</view>
  67. <List
  68. style={{ height: 'calc(100% - 145px)' }}
  69. request={reqestAPI}
  70. params={queryParams}
  71. noData={<NoData />}
  72. render={({ item, index }) => <ShopCommission key={(index)} item={item} />}
  73. >
  74. </List>
  75. </view>
  76. </view>
  77. )
  78. }