colexiu-project/src/views/user-info/music-class/list.tsx

import ColEmpty from '@/components/col-empty'
import Pagination from '@/components/pagination'
import request from '@/helpers/request'
import styles from './index.module.less'
import { ElSkeleton, ElSkeletonItem } from 'element-plus'
import { defineComponent } from 'vue'
import { state } from '@/state'
import MusicItem from './item'

export default defineComponent({
  name: 'list',
  props: {
    auditStatus: {
      type: String,
      default: ''
    },
    onNumber: {
      type: Function,
      default: (data: any) => {}
    }
  },
  data() {
    return {
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      list: [] as any[],
      loading: false,
      dataShow: false // 是否有数据
    }
  },
  mounted() {
    if (state.user.data?.musicianFlag) {
      this.getList()
    }
  },
  methods: {
    async getList() {
      this.loading = true
      try {
        const { data } = await request.post(
          '/api-website/music/sheet/teacher/list',
          {
            data: {
              auditStatus: this.auditStatus,
              page: this.pageInfo.page,
              rows: this.pageInfo.limit
            }
          }
        )
        this.list = data.list.rows || []
        this.pageInfo.total = data.list.total
        if (data.list.total <= 0) {
          this.dataShow = true
        }
        // 统计数据
        this.onNumber({
          doing: data.doing || 0,
          pass: data.pass || 0,
          unPass: data.unPass || 0
        })
      } catch {}
      if (this.dataShow) {
        this.loading = false
      } else {
        setTimeout(() => {
          this.loading = false
        }, 200)
      }
    }
  },
  render() {
    return (
      <>
        {state.user.data?.entryFlag ? (
          <>
            <div>
              <ElSkeleton
                loading={this.loading}
                animated
                class=" w-full m-auto px-[14px] flex items-center flex-col"
                count={3}
                v-slots={{
                  template: () => (
                    <div class="h-[94px] flex items-center justify-between w-full mb-2 pt-2">
                      <div class="w-2/3 flex items-center">
                        <ElSkeletonItem
                          variant="circle"
                          style={{ width: '88px', height: '88px' }}
                        ></ElSkeletonItem>
                        <div class="w-1/2 pl-2">
                          <ElSkeletonItem variant="h3"></ElSkeletonItem>
                          <ElSkeletonItem
                            variant="p"
                            style={{ width: '50%' }}
                          ></ElSkeletonItem>
                        </div>
                      </div>
                      <ElSkeletonItem
                        variant="p"
                        style={{ width: '20%' }}
                      ></ElSkeletonItem>
                    </div>
                  )
                }}
              >
                {this.list.map((item: any) => (
                  <MusicItem
                    onClick={(item: any) => {
                      if (this.auditStatus === 'UNPASS') {
                        console.log(item)
                        this.$router.push({
                          path: '/userInfo/musicOperation',
                          query: {
                            type: 'update',
                            id: item.id
                          }
                        })
                      } else {
                        // 跳转对应详情 个人中心不跳转到详情
                      }
                    }}
                    item={{
                      id: item.id,
                      addName: item.addName,
                      addUserAvatar: item.addUserAvatar,
                      musicSheetName: item.musicSheetName,
                      subjectNames: item.subjectNames,
                      composer: item.composer,
                      chargeType: item.chargeType
                    }}
                    class={[
                      styles.musicListItem,
                      'pt-2 cursor-pointer border-b border-solid border-[#E7E6E6] hover:bg-[#F4F4F4]'
                    ]}
                  />
                ))}
              </ElSkeleton>
            </div>

            <Pagination
              total={this.pageInfo.total}
              v-model:page={this.pageInfo.page}
              v-model:limit={this.pageInfo.limit}
              pageSizes={this.pageInfo.page_size}
              pagination={this.getList}
            />

            {this.dataShow && <ColEmpty />}
          </>
        ) : (
          <div class="px-[38px]">
            <ColEmpty
              type="teacherCert"
              message="您还未完成达人认证，认证后才可创建视频课哦~"
              buttonVisibility
              buttonText="去认证"
              onDetail={() => {
                this.$router.push('/teacherAuth')
              }}
            />
          </div>
        )}
      </>
    )
  }
})