caimei-authentic-www/pages/_template/ldm/approve/personnel/training/index.vue

<template>
  <div class="page">
    <van-list
      v-model="isLoadingMore"
      :finished="finished"
      :immediate-check="false"
      :finished-text="total ? '没有更多了' : ''"
      @load="onLoadMore"
    >
      <div class="page-top"></div>
      <div class="page-content">
        <div class="title">专业美容培训师</div>
        <div class="list">
          <div
            class="section flex items-center"
            v-for="item in list"
            :key="item.doctorId"
          >
            <img class="cover" :src="item.doctorImage" />
            <div class="info">
              <div class="name">{{ item.doctorName }}<i /></div>
              <div class="tag">{{ item.tagList.join(' | ') }}</div>
              <div class="more" @click="toDetail(item)">点击查看</div>
            </div>
          </div>
        </div>
        <!-- 列表为空 -->
        <LdmEmpty v-if="!total && !isRequest" name="ldm-empty.png"></LdmEmpty>
      </div>
    </van-list>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  layout: 'app-ldm',
  data() {
    return {
      isLoadingMore: true,
      finished: false,
      isRequest: true,
      listQuery: {
        authUserId: '',
        doctorType: 2,
        doctorName: '',
        pageNum: 1,
        pageSize: 10,
      },
      list: [],
      total: 0,
    }
  },
  computed: {
    ...mapGetters(['supplierInfo', 'authUserId']),
  },
  mounted() {
    this.fetchList()
  },
  methods: {
    fetchList: debounce(async function () {
      try {
        this.isLoadingMore = true
        this.listQuery.authUserId = this.authUserId
        const res = await this.$http.api.fetchDoctorList(this.listQuery)
        this.list = [...this.list, ...res.data.list]
        this.total = res.data.total
        this.finished = !res.data.hasNextPage
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequest = false
        this.isLoadingMore = false
      }
    }, 400),

    // 搜索
    onSearch() {
      this.listQuery.pageNum = 1
      this.list = []
      this.fetchList()
    },
    // 加载更多
    onLoadMore() {
      this.listQuery.pageNum += 1
      this.fetchList()
    },
    // 页码变化
    onPagiantionChange(index) {
      this.listQuery.pageNum = index
      this.fetchList()
    },
    // 医师详情
    toDetail(item) {
      localStorage.setItem('doctorInfo', JSON.stringify(item))
      const authUserId = this.$store.getters.authUserId
      this.$router.push(`/${authUserId}/ldm/approve/personnel/training/detail`)
    },
  },
}
</script>

<style scoped lang="scss">
@media screen and (min-width: 768px) {
  .page-top {
    height: 596px;
    background: url(https://static.caimei365.com/www/authentic/pc/ldm-bg-training-doctor.png)
      no-repeat center;
    background-size: auto 596px;
  }
  .page-content {
    width: 838px;
    margin: 0 auto;
    overflow: hidden;
    .title {
      font-size: 22px;
      color: #221815;
      padding-top: 112px;
    }
    .list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 27px;
      .section {
        width: 407px;
        padding: 14px;
        background: #f1f1f1;
        border-radius: 20px;
        box-sizing: border-box;
        margin-bottom: 25px;
        .cover {
          display: block;
          width: 92px;
          height: 92px;
          border-radius: 17px;
        }
        .info {
          position: relative;
          flex: 1;
          margin-left: 25px;
          .name {
            font-size: 28px;
            color: #000;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;

            i {
              font-size: 0;
              display: inline-block;
              background: url(https://static.caimei365.com/www/authentic/pc/ldm-icon-star.png)
                no-repeat left center;
              padding-left: 13px;
              vertical-align: 2px;
              margin-left: 7px;
              &::after,
              &::before {
                display: inline-block;
                content: '';
                width: 13px;
                height: 13px;
                background: url(https://static.caimei365.com/www/authentic/pc/ldm-icon-star.png)
                  no-repeat center;
                vertical-align: middle;
                margin-left: 4px;
              }
            }
          }
          .tag {
            width: 190px;
            font-size: 10px;
            color: #221815;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin-top: 12px;
          }
          .more {
            position: absolute;
            bottom: 0;
            right: 0;
            font-size: 12px;
            color: #0080ed;
            cursor: pointer;
            &::after {
              content: '>';
              margin-left: 8px;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .page-top {
    height: 59.6vw;
    background: url(https://static.caimei365.com/www/authentic/h5/ldm-bg-training-doctor.png);
    background-size: auto 59.6vw;
  }
  .page-content {
    .title {
      font-size: 3.6vw;
      color: #221815;
      padding-left: 5.6vw;
      padding-top: 9.8vw;
    }
    .list {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 6vw;
      .section {
        width: 95vw;
        padding: 3.2vw;
        background: #f1f1f1;
        border-radius: 2vw;
        box-sizing: border-box;
        margin-bottom: 4.8vw;
        .cover {
          display: block;
          width: 21.5vw;
          height: 21.5vw;
          border-radius: 1.7vw;
        }
        .info {
          position: relative;
          flex: 1;
          margin-left: 2.7vw;
          .name {
            font-size: 6.6vw;
            color: #000;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;

            i {
              font-size: 0;
              display: inline-block;
              background: url(https://static.caimei365.com/www/authentic/h5/ldm-icon-star.png)
                no-repeat left center;
              padding-left: 3.2vw;
              vertical-align: 1vw;
              margin-left: 1.8vw;
              &::after,
              &::before {
                display: inline-block;
                content: '';
                width: 3.2vw;
                height: 3.2vw;
                background: url(https://static.caimei365.com/www/authentic/h5/ldm-icon-star.png)
                  no-repeat center;
                vertical-align: middle;
                margin-left: 0.9vw;
              }
            }
          }
          .tag {
            width: 46vw;
            font-size: 2.5vw;
            color: #221815;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin-top: 1.2vw;
          }
          .more {
            position: absolute;
            bottom: 0;
            right: 0;
            font-size: 3vw;
            color: #0080ed;
            &::after {
              content: '>';
              margin-left: 1vw;
            }
          }
        }
      }
    }
  }
}
</style>