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, ElMessage, ElMessageBox, ElSkeleton, ElSkeletonItem, ElTag } from 'element-plus'
import { defineComponent } from 'vue'
import styles from './index.module.less'

import iconVip from '../images/icon_vip.png'
import iconSvip from '../images/icon_svip.png'
import iconVipDefault from '../images/icon_vip_default.png'
import { getUserInfo } from '@/state'

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 || []
        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)
      }
    },
    onRemove(item: any) {
      ElMessageBox.confirm(`确定移除该粉丝吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await request.post('/api-teacher/teacher/delFans/' + item.userId)
          await getUserInfo()
          ElMessage.success('移除成功')
          this.pageInfo.page = 1
          this.getList()
          
        } catch {}
      })
    }
  },
  render() {
    return (
      <div class="rounded-md overflow-hidden">
        <div class="text-2xl font-semibold text-black leading-none px-6 py-5 ">
          我的粉丝
        </div>

        <div class={!this.dataShow && 'pt-4'}>
          <ElSkeleton
            loading={this.loading}
            animated
            class=" w-full m-auto px-[14px] flex"
            count={4}
            v-slots={{
              template: () => (
                <div class="w-[158px] rounded-[10px] pt-10 pb-7 mb-4 m-auto flex items-center justify-center flex-col user-shadow relative">
                  <ElSkeletonItem
                    variant="circle"
                    style={{ width: '48px', height: '48px' }}
                  ></ElSkeletonItem>

                  <ElSkeletonItem
                    variant="h3"
                    style={{
                      width: '50%',
                      marginTop: '8px',
                      marginBottom: '20px'
                    }}
                  ></ElSkeletonItem>
                  <ElSkeletonItem
                    variant="p"
                    style={{ width: '60%', marginTop: '6px' }}
                  ></ElSkeletonItem>
                </div>
              )
            }}
          >
            <div class="flex flex-wrap px-3">
              {this.list.map((item: any) => (
                <div class="basis-1/4 ">
                  <div class="w-[158px] rounded-[10px] pt-10 pb-7 mb-4 m-auto flex items-center justify-center flex-col user-shadow relative">
                    <div class="bg-[#FFE7CF] absolute left-2.5 top-2.5 text-[#AB5400] text-xs py-0.5 px-2 rounded-[10px]">
                      学生
                    </div>
                    <div class="flex flex-col items-center" style="position: relative">
                      <ElImage
                        src={item.avatar}
                        class={['w-12 h-12 rounded-full border-2 border-[#FFFFFF]', item.vipType !== 'NORMAL' ? item.vipType === 'VIP' ? 'border-[#FADA9B]' : 'border-[#F0AF88]' : '' ]}
                      />
                      {item.vipType && item.vipType !== 'NORMAL' && (
                        <ElImage
                          style="position: absolute;bottom: -5px; height: 18px;"
                          src={item.vipType === 'VIP' ? iconVip : iconSvip}
                          class="-mt-4"

                        />
                      )}
                    </div>

                    <p class="text-base text-[#333] font-semibold leading-tight pb-1 pt-2 text-center max-w-[120px] whitespace-nowrap overflow-hidden text-ellipsis" title={item.userName}>
                      {item.userName}
                    </p>
                    <p class="h-6">
                      {item.subjectName && (
                        <span style="font-size: 12px;color: #777777;">{item.subjectName}</span>
                      )}
                    </p>
                    <p>
                      <span class={styles.removeBtn} onClick={() => this.onRemove(item)}>移除</span>
                    </p>
                  </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>
    )
  }
})