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

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

export default defineComponent({
  name: 'list',
  props: {
    groupStatus: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      pageInfo: {
        // 分页规则
        limit: 9, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [9, 18, 36, 45] // 选择限制显示条数
      },
      list: [] as any[],
      loading: false,
      dataShow: false // 是否有数据
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      try {
        const { data } = await request.post(
          '/api-website/courseGroup/queryPageCourseGroup',
          {
            data: {
              groupStatus: this.groupStatus,
              page: this.pageInfo.page,
              rows: this.pageInfo.limit,
              teacherId: state.user.data?.userId
            }
          }
        )
        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 (
      <>
        {state.user.data?.entryFlag && state.user.data?.liveFlag ? (
          <>
            <div class="flex flex-wrap px-10">
              <ElSkeleton
                loading={this.loading}
                animated
                class="flex"
                count={3}
                v-slots={{
                  template: () => (
                    <div class="w-1/3">
                      <div class="flex flex-col pt-8 w-[262px] m-auto">
                        <ElSkeletonItem
                          variant="image"
                          style={{ width: '100%', height: '175px' }}
                        ></ElSkeletonItem>
                        <div class="mx-2.5 py-3.5 border-b border-b-[#F2F2F2]">
                          <div class="text-lg leading-none font-medium whitespace-nowrap overflow-hidden text-ellipsis">
                            <ElSkeletonItem variant="h3"></ElSkeletonItem>
                          </div>
                          <div class="text-sm text-[#999] pt-2.5">
                            <ElSkeletonItem
                              variant="p"
                              style={{ width: '50%' }}
                            ></ElSkeletonItem>
                          </div>
                        </div>

                        <div class="mx-2.5 py-4 flex items-center">
                          <ElSkeletonItem
                            variant="circle"
                            style={{
                              width: '22px',
                              height: '22px',
                              marginRight: '5px'
                            }}
                          ></ElSkeletonItem>
                          <ElSkeletonItem
                            variant="p"
                            style={{ width: '20%' }}
                          ></ElSkeletonItem>
                          <p style={{ width: '45%' }}></p>
                          <ElSkeletonItem
                            variant="p"
                            style={{ width: '20%' }}
                          ></ElSkeletonItem>
                        </div>
                      </div>
                    </div>
                  )
                }}
              >
                {this.list.map((item: any) => (
                  <div class="w-1/3 pt-8">
                    <Item item={item} />
                  </div>
                ))}
              </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 />}
          </>
        ) : state.user.data?.entryFlag ? (
          !state.user.data?.liveFlag && (
            <ColEmpty
              type="live"
              message="您尚未开通直播服务，开通后即可创建直播课程~"
              buttonVisibility={false}
              buttonText="立即开通"
              onDetail={() => {
                this.$router.push('/teacherAuth')
              }}
            />
          )
        ) : (
          <ColEmpty
            type="teacherCert"
            message="您还未完成老师认证，认证后才可创建视频课哦~"
            buttonVisibility
            buttonText="去认证"
            onDetail={() => {
              this.$router.push('/teacherAuth')
            }}
          />
        )}
      </>
    )
  }
})