h5-colexiu/src/teacher/statistics/home-statistics-detail/list/index.tsx

import { defineComponent, PropType, ref } from 'vue'
import styles from './index.module.less'
import { CellGroup, List, Sticky } from 'vant'
import iconMoney from '../../images/icon-money.png'
import ColResult from '@/components/col-result'
import Echats from '../echats'
import TeacherItem from '../teacher-item'
import BuyItem from '../buy-item'
import request from '@/helpers/request'
import { getTimeRange, TIME_TYPE } from '../../home-statistics'
import { moneyFormat } from '@/helpers/utils'

export default defineComponent({
  name: 'list',
  props: {
    type: {
      type: String as PropType<
        'VIP_COURSE' | 'PRACTICE' | 'GROUP' | 'LIVE' | 'VIDEO' | 'MUSIC'
      >,
      default: 'VIP_COURSE'
    }
  },
  setup(props) {
    const timeRange = ref(getTimeRange('MONTH'))

    const obj = ref({
      xAxisData: [] as any,
      yAxisData: [] as any,
      browseCount: 0,
      buyCount: 0
    })

    const dataShow = ref(true) // 判断是否有数据
    const state = {
      statInfo: 0, // 预计课程总收入
      accountPeriod: 0, // 几天后
      loading: false,
      finished: false,
      params: {
        page: 1,
        rows: 20
      }
    }

    const tableList = ref<any[]>([])

    const getSysConfig = async () => {
      try {
        const { data } = await request.get('/api-teacher/sysConfig/list', {
          params: {
            group: 'ACCOUNT_PERIOD'
          }
        })
        const result = data || []
        result.forEach((item: any) => {
          if (
            props.type === 'VIP_COURSE' &&
            item.paramName === 'vip_course_account_period'
          ) {
            state.accountPeriod = item.paramValue
          } else if (
            props.type === 'PRACTICE' &&
            item.paramName === 'practice_account_period'
          ) {
            state.accountPeriod = item.paramValue
          } else if (
            props.type === 'GROUP' &&
            item.paramName === 'group_course_account_period'
          ) {
            state.accountPeriod = item.paramValue
          } else if (
            props.type === 'LIVE' &&
            item.paramName === 'live_account_period'
          ) {
            state.accountPeriod = item.paramValue
          } else if (
            props.type === 'VIDEO' &&
            item.paramName === 'video_account_period'
          ) {
            state.accountPeriod = item.paramValue
          } else if (
            props.type === 'MUSIC' &&
            item.paramName === 'music_account_period'
          ) {
            state.accountPeriod = item.paramValue
          }
        })
      } catch {
        //
      }
    }

    const getDetail = async () => {
      try {
        const { data } = await request.post(
          '/api-teacher/home/courseExposure',
          {
            data: { ...timeRange.value, type: props.type }
          }
        )

        const buy = data.buy || []
        const exposure = data.exposure || []
        const xAxisData: string[] = []
        const exposureList: number[] = []
        exposure.forEach((item: any, index: number) => {
          xAxisData.push(item.date)
          exposureList.push(item.exposureNum)

          if (exposure.length - 1 === index) {
            obj.value.browseCount = item.exposureNum
          }
        })
        const buyList: number[] = []
        buy.forEach((item: any, index: number) => {
          buyList.push(item.exposureNum)

          if (buy.length - 1 === index) {
            obj.value.buyCount = item.exposureNum
          }
        })
        const yAxisData = [exposureList, buyList]

        obj.value.xAxisData = xAxisData
        obj.value.yAxisData = yAxisData
      } catch {
        //
      }
    }

    const getList = async () => {
      try {
        const { data } = await request.post(
          '/api-teacher/home/teacherIncomeList',
          {
            data: {
              ...timeRange.value,
              type: props.type,
              ...state.params
            }
          }
        )

        state.loading = false
        state.statInfo = data.statInfo || 0
        tableList.value = tableList.value.concat(data.rows || [])

        state.finished = data.pageNo >= data.totalPage
        state.params.page = data.pageNo + 1
        dataShow.value = tableList.value.length > 0
      } catch {
        dataShow.value = false
        state.finished = true
      }
    }

    getSysConfig()
    getDetail()
    getList()

    return () => (
      <div class={styles.list}>
        <Echats
          obj={obj.value}
          currentType={'MONTH'}
          onConfirm={(val: any) => {
            // currentType.value = val
            timeRange.value = val
            getDetail()
            getList()
          }}
        />

        <div class={styles.expectedIncome}>
          {/* <Sticky> */}
          <div class={styles.incomeTitle}>
            <div class={styles.title}>
              <img src={iconMoney} />
              <span>预计总收入</span>
            </div>

            <div class={styles.price}>
              <span>¥ </span>
              {moneyFormat(state.statInfo || 0)}
            </div>
          </div>
          {/* </Sticky> */}
          <div class={styles.incomeTip}>
            实际收入将在课程结束{state.accountPeriod || 0}天后结算
          </div>

          <div class={styles.element}></div>
          {dataShow.value ? (
            <List
              v-model:loading={state.loading}
              finished={state.finished}
              finishedText=" "
              onLoad={getList}
            >
              <CellGroup border={false}>
                {['VIP_COURSE', 'PRACTICE'].includes(props.type) && (
                  <TeacherItem list={tableList.value} />
                )}
                {['GROUP', 'LIVE', 'VIDEO', 'MUSIC'].includes(props.type) && (
                  <BuyItem
                    list={tableList.value}
                    isSquare={props.type === 'MUSIC'}
                  />
                )}
              </CellGroup>
            </List>
          ) : (
            <ColResult
              type="empty"
              btnStatus={false}
              classImgSize="SMALL"
              tips="暂无数据~"
            />
          )}
        </div>
      </div>
    )
  }
})