colexiu-project/src/views/student-info/my-score/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 MusicItem from '../../user-info/music-class/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() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      try {
        const url =
          this.auditStatus === 'MYSCORE'
            ? '/api-website/music/sheet/my'
            : '/api-website/music/sheet/favorite'
        const { data } = await request.get(url, {
          params: {
            page: this.pageInfo.page,
            rows: this.pageInfo.limit
          }
        })
        this.list = data.rows || []
        this.pageInfo.total = data.total
        if (data.total <= 0) {
          this.dataShow = true
        }
      } catch {}
      if (this.dataShow) {
        this.loading = false
      } else {
        setTimeout(() => {
          this.loading = false
        }, 200)
      }
    }
  },
  render() {
    return (
      <>
        <div class="mt-5">
          <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">
                  <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,
                  'mb-2 cursor-pointer border-b border-solid border-[#E7E6E6]'
                ]}
              />
            ))}
          </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 style={{ marginBottom: '30px' }} />}
      </>
    )
  }
})