long-list-page.uvue

<template>
  <list-view ref="listView" class="list" :rebound="false" :scroll-y="true" :custom-nested-scroll="true"
    @scrolltolower="loadData(null)">
    <list-item class="list-item" v-for="(item, _) in dataList" :key="item.plugin_id">
      <view class="list-item-icon" v-if="item.plugin_id!=-1">
        <image class="list-item-icon-image" :src="item.plugin_img_link"></image>
      </view>
      <view class="list-item-fill" v-if="item.plugin_id!=-1">
        <view class="flex-row">
          <text class="title">{{item.plugin_name}}</text>
        </view>
        <view class="description">
          <text class="description-text">{{item.plugin_intro}}</text>
        </view>
        <text class="icon-star">{{convertToStarUnicode(item.score)}}</text>
        <view class="tag-list">
          <text class="tag-item" v-for="(item2, index2) in item.tags" :key="index2">{{item2}}</text>
        </view>
        <view class="flex-row update-date">
          <text class="update-date-text">更新日期</text>
          <text class="update-date-value">{{item.update_date}}</text>
          <text class="author">{{item.author_name}}</text>
        </view>
      </view>
      <!-- TODO 暂时这样写才能保证 loading 在 list 底部 -->
      <view v-if="item.plugin_id==-1" class="loading">
        <text class="loading-text">{{loadingText}}</text>
      </view>
    </list-item>
  </list-view>
</template>

<script>
  const SERVER_URL = "https://ext.dcloud.net.cn/plugin/uniappx-plugin-list"
  const PAGE_SIZE = 10; // 最大值 10

  type ListItem = {
    plugin_id : number,
    plugin_img_link : string,
    plugin_name : string,
    plugin_intro : string,
    score : number,
    tags : Array<string>,
    update_date : string,
    author_name : string,
  }

  type ResponseDataType = {
    code : number,
    data : ListItem[]
  }

  export default {
    props: {
      type: {
        type: String,
        default: ''
      },
      preload: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        loading: false,
        dataList: [] as ListItem[],
        isEnded: false,
        loadingError: '',
        $currentPage: 1
      }
    },
    computed: {
      loadingText() : string {
        if (this.loading) {
          return "加载中..."
        } else if (this.isEnded) {
          return "没有更多了"
        } else if (this.loadingError.length > 0) {
          return this.loadingError
        } else {
          return ""
        }
      },
    },
    created() {
      this.insertLoadingData()

      if (this.preload) {
        this.loadData(null)
      }
    },
    methods: {
      // TODO 目前 list-item 不支持注释节点
      // 暂时在数据末尾插入一条空数据用于显示 loading
      insertLoadingData() {
        const loadingData = {
          plugin_id: -1,
          plugin_img_link: '',
          plugin_name: '',
          plugin_intro: '',
          score: 0,
          tags: [],
          update_date: '',
          author_name: '',
        } as ListItem
        this.dataList.push(loadingData)
      },
      refreshData(loadComplete : (() => void) | null) {
        this.dataList.length = 0
        this.$currentPage = 1
        this.insertLoadingData()
        this.loadData(loadComplete)
      },
      loadData(loadComplete : (() => void) | null) {
        if (this.loading || this.isEnded) {
          return
        }
        this.loading = true

        uni.request<ResponseDataType>({
          url: SERVER_URL,
          data: {
            type: this.type,
            page: this.$currentPage,
            page_size: PAGE_SIZE
          },
          success: (res) => {
            const responseData = res.data
            if (responseData == null) {
              return
            }

            // TODO
            this.dataList.splice(this.dataList.length - 1, 0, ...responseData.data)
            // this.dataList.push(...responseData.data)

            if (responseData.data.length == 0) {
              this.isEnded = true
            } else {
              this.$currentPage++
            }
          },
          fail: (err) => {
            this.loadingError = err.errMsg
          },
          complete: () => {
            this.loading = false
            if (loadComplete != null) {
              loadComplete()
            }
          }
        })
      },
      // score 0 ~ 50
      convertToStarUnicode(score : number) : string {
        const fill_code = '\ue879'
        const half_code = '\ue87a'
        const null_code = '\ue87b'

        const fillStarCount = parseInt(score / 10 % 10 + '')
        const halfStarCount = score % 10 >= 5 ? 1 : 0
        const nullStarCount = 5 - fillStarCount - halfStarCount

        let result = ''
        if (fillStarCount > 0) { result += fill_code.repeat(fillStarCount) }
        if (halfStarCount > 0) { result += half_code.repeat(halfStarCount) }
        if (nullStarCount > 0) { result += null_code.repeat(nullStarCount) }

        return result
      }
    }
  }
</script>

<style>
  @font-face {
    font-family: "UtsStarIcons";
    src: url('@/static/fonts/icon-star.ttf');
  }

  .list {
    flex: 1;
    background-color: #ffffff;
  }

  .list-item {
    flex-direction: row;
    margin-top: 10px;
    padding: 10px;
  }

  .list-item-icon {
    position: relative;
  }

  .list-item-icon-image {
    width: 80px;
    height: 80px;
  }

  .list-item-fill {
    flex: 1;
    margin-left: 15px;
  }

  .description-text {
    font-size: 13px;
    color: #666;
    line-height: 19px;
  }

  .icon-star {
    font-family: "UtsStarIcons";
    font-size: 16px;
    font-style: normal;
    color: #ffca3e;
    letter-spacing: 3px;
  }

  .tag-list {
    flex-direction: row;
    margin-top: 5px;
  }

  .tag-item {
    font-size: 12px;
    background-color: #EFF9F0;
    color: #639069;
    border-radius: 20px;
    margin-right: 5px;
    padding: 2px 5px;
  }

  .update-date {
    margin-top: 10px;
  }

  .update-date-text {
    font-size: 12px;
    color: #888888;
  }

  .update-date-value {
    font-size: 12px;
    color: #777777;
    margin-left: 5px;
  }

  .author {
    font-size: 12px;
    color: #008000;
    margin-left: auto;
  }

  .loading {
    /* position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0; */
    flex:1;
    margin: -10px;
    background-color: #f8f8f8;
    margin-bottom: 1px;
    justify-content: center;
  }

  .loading-text {
    padding: 20px;
    text-align: center;
  }
</style>