colexiu-project/src/views/user-info/my-fans/index.tsx

import ColEmpty from '@/components/col-empty'
import Pagination from '@/components/pagination'
import request from '@/helpers/request'
import { ElImage, ElSkeleton, ElSkeletonItem, ElTag } from 'element-plus'
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'MyFans',
  data() {
    return {
      pageInfo: {
        // 分页规则
        limit: 12, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [12, 24, 48, 60] // 选择限制显示条数
      },
      list: [] as any[],
      loading: false,
      dataShow: false // 是否有数据
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      try {
        const { data } = await request.post(
          '/api-website/teacher/queryMyFans',
          {
            requestType: 'json',
            data: {
              page: this.pageInfo.page,
              rows: this.pageInfo.limit
            }
          }
        )
        this.list = data.rows || []
        console.log(this.list)
        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="h-full bg-[#FAFAFA] rounded-md overflow-hidden">
        <div class="text-sm text-[#333] bg-white leading-none px-6 py-5 border-b border-b-[#E5E5E5]">
          我的粉丝
        </div>

        <div class=" pt-4">
          <ElSkeleton
            loading={this.loading}
            animated
            class=" w-full m-auto px-[14px] flex"
            count={3}
            v-slots={{
              template: () => (
                <div class="w-[296px] rounded-md bg-white py-4 px-[14px] mb-4 m-auto flex items-center hover:drop-shadow-lg transition-all">
                  <ElSkeletonItem
                    variant="circle"
                    style={{ width: '56px', height: '56px' }}
                  ></ElSkeletonItem>

                  <div class="flex w-32 flex-col pl-2.5">
                    <ElSkeletonItem variant="h3"></ElSkeletonItem>
                    <ElSkeletonItem
                      variant="p"
                      style={{ width: '60%', marginTop: '6px' }}
                    ></ElSkeletonItem>
                  </div>
                </div>
              )
            }}
          >
            <div class="flex flex-wrap px-3">
              {this.list.map((item: any) => (
                <div class="basis-1/3 ">
                  <div class="w-[296px] rounded-md bg-white py-4 px-[14px] mb-4 m-auto flex items-center hover:drop-shadow-lg transition-all">
                    <ElImage src={item.avatar} class="w-14 h-14 rounded-full" />

                    <div class="pl-2.5">
                      <p class="text-base text-[#333] font-medium leading-tight pb-1.5">
                        {item.userName}
                      </p>
                      <p>
                        <ElTag
                          effect="dark"
                          size="small"
                          color="#FFF1DE"
                          style={{
                            borderColor: '#FFF1DE',
                            color: '#FF8C00',
                            marginRight: '5px'
                          }}
                        >
                          {item.subjectName}
                        </ElTag>
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </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 />}
      </div>
    )
  }
})