miniapp-v2/src/shop/pages/spread/spreadIndex.jsx

import React, { useState, useEffect, useRef } from 'react'
import CustomNav from '@/components/CustomNav'
import { useRouter } from '@tarojs/taro'
import { getShopList, getShopMoney, getVerifiedOrder } from '@/services/shopBoss'
import { withSubscribeMessage } from '@/utils/subscribeMessage'
import withLayout from '@/layouts'
import {
  TPL_MESSAGE_SHOP_PAY_SUCCESS,
  TPL_MESSAGE_SHOP_VERIFY_RESULT,
} from '@/utils/constants'
import tabList from './Shoptabbar'
import ShopKeeper from '../../components/ShopKeeper/shopKeeper'
import Sparead from '../../components/Sparead/spreadMoney'


import './spreadIndex.less'
import { View } from '@tarojs/components'


export default withLayout((props) => {
  const { router, person } = props
  const { params } = useRouter()
  const { tab,shopOrderId } = params || {}
  const [currentTab, setCurrentTab] = useState(0)
  //顶部的商铺列表
  const [shopList, setShopList] = useState([])
  //当前商铺
  const [shop, setShop] = useState()
  // const shopOrderId='1a8deba868489b0be19cba941e6f577e'
  const shopId = shop?.shopId

  
  const [amountType, setAmountType] = useState('order')
  const [isVerified, setisVerified] = useState(0)
  const [shopMoney, setShopMoney] = useState([])
  const [verifiedOrder, setVerifiedOrder] = useState([])
  const listRef = useRef()

  const handleTabChange = (e) => {
    const { index } = e.detail
    index ? setAmountType('commission') : setAmountType('order')
    setCurrentTab(index)
    //如果context有的话代表他滚动了   那么切换tab页就置顶
    if (listRef.current?.context) {
      listRef.current.context.scrollTo({ top: 0 })
    }
    withSubscribeMessage([TPL_MESSAGE_SHOP_PAY_SUCCESS, TPL_MESSAGE_SHOP_VERIFY_RESULT])
  }
  //商铺列表
  useEffect(() => {
    getShopList().then((res) => {
      const { shopList: list, shop: current } = res
      setShopList(list)
      if (shopOrderId) {
        setShop(list.filter(x=>x.shopId==shopOrderId)[0])
      }
      else{
        setShop(current)
      }
    })
  }, [])


  // 搜索核销手机号
  const setVer = (e) => {
    setVerifiedOrder(e.records)
  }


  const onVarified = () => {
    setisVerified(1)
  }


  const onVarifiedTwo = () => {
    setisVerified(0)
  }

  useEffect(() => {
    if (shopId) {
      getShopMoney(shopId, amountType).then((e) => {
        setShopMoney(e)
      })
    }
  }, [amountType, shopId, currentTab])

  //店铺选择
  const handleHotelChange = (current) => {
    getShopMoney(current.shopId, amountType).then((e) => {
      setShop(current)
      getVerifiedOrder({
        isVerified: isVerified,
        pageNum: 1,
        pageSize: 99,
        shopId: current.shopId,
      }).then((res) => {
        const order = res.records
        setVerifiedOrder(order)
      })
    })
  }

  useEffect(() => {
    if (tab) {
      setCurrentTab(tab - 0)
    }
  }, [tab])

  return (
    <View className='page-index'>
      <view className='index-navbar'>
        <CustomNav logo='none' title={shop?.shopName} />
      </view>
      <view className='index-container'>
        {currentTab === 0 && <ShopKeeper isVerified={isVerified} shopId={shopId} amountType={amountType} setVer={setVer} onVarifiedTwo={onVarifiedTwo} onVarified={onVarified} verifiedOrder={verifiedOrder} shopList={shopList} shop={shop} onHotelChange={handleHotelChange} shopMoney={shopMoney} />
        }
        {currentTab === 1 && <Sparead shopList={shopList} shop={shop} verifiedOrder={verifiedOrder} onHotelChange={handleHotelChange} shopMoney={shopMoney} />}
      </view>
      <view className='index-tabbar'>
        <mp-tabbar extClass='custom-tabbar' current={currentTab} list={tabList} onChange={handleTabChange}></mp-tabbar>
      </view>
    </View>

  )

})