akmon/components/aklist/aklist.uvue

<template>
  <supadb
    :collection="table"
    :field="field"
    :filter="filter"
    :orderby="order"
    :page-size="pageSize"
    :page-current="currentPage"
    :loadtime="preload ? 'auto' : 'manual'"
    v-slot="{ data, loading, error }"
  >
    <list-view :id="id" class="list" :bounces="false" :scroll-y="true" :custom-nested-scroll="true"
      @scrolltolower="loadMore" associative-container="nested-scroll-view">
      <list-item class="list-item" v-for="(item, idx) in (data as Array<UTSJSONObject>)" :key="item.getString(primaryKey)" type="10">
        <slot name="item" :item="item" :index="idx">
          <!-- 默认插槽内容：仿 long-list-page 展示 -->
          <view class="list-item-icon">
            <image class="list-item-icon-image" :src="item.getString('plugin_img_link')"></image>
          </view>
          <view class="list-item-fill">
            <view class="flex-row">
              <text class="title">{{item.getString('plugin_name')}}</text>
            </view>
            <view>
              <text class="description-text">{{item.getString('plugin_intro')}}</text>
            </view>
            <text class="icon-star">{{convertToStarUnicode(item.getNumber('score'))}}</text>
            <view class="tag-list">
              <text class="tag-item" v-for="(tag, index2) in (item.get('tags') as Array<string> ?? [])" :key="index2">{{tag}}</text>
            </view>
            <view class="flex-row update-date">
              <text class="update-date-text">更新日期</text>
              <text class="update-date-value">{{item.getString('update_date')}}</text>
              <text class="author">{{item.getString('author_name')}}</text>
            </view>
          </view>
        </slot>
      </list-item>
      <list-item class="loading">
        <slot name="loading">
          <uni-loading :loading="loading" color="#999" :text="loadingText"></uni-loading>
        </slot>
      </list-item>
    </list-view>
    <view v-if="error" class="aklist-error">{{ error }}</view>
  </supadb>
</template>

<script lang="uts">
import supadb from '@/components/supadb/supadb.uvue';
export default {
  name: 'AkList',
  components: { supadb },
  props: {
    table: { type: String, required: true },
    id: { type: String, default: '' },
    preload: { type: Boolean, default: true },
    pageSize: { type: Number, default: 10 },
    primaryKey: { type: String, default: 'id' },
    filter: { type: Object, default: () => ({}) },
    order: { type: String, default: '' },
    field: { type: String, default: '*' }
  },
  data() {
    return {
      currentPage: 1
    }
  },
  computed: {
    loadingText(): string {
      return '加载中...';
    }
  },
  methods: {
    loadMore() {
      this.currentPage++;
    },
    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 scoped>
.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 {
  padding: 30px;
  align-items: center;
}
.flex-row {
  flex-direction: row;
}
.aklist-error {
  color: red;
  text-align: center;
  padding: 10px;
}
</style>