minnan/src/pages/inhert/artifact/list.vue

<template>
  <view class="d-flex flex-column bg-base">

    <view class="top-tab bg-base">
      <u-tabs 
        :list="tabs" 
        lineWidth="30"
        lineColor="#d9492e"
        :activeStyle="{
          color: '#000',
          fontWeight: 'bold',
          transform: 'scale(1.05)'
        }"
        :inactiveStyle="{
          color: '#606266',
          transform: 'scale(1)'
        }"
        :scrollable="false"
        class="top-tab"
        @click="(e: any) => tab = e.index"
      />
    </view>

    <view class="d-flex flex-col p-2">
      <uni-search-bar 
        v-model="searchValue"
        radius="100" 
        bgColor="#fff" 
        placeholder="搜索文物" 
        clearButton="auto" 
        cancelButton="none"
        @confirm="doSearch"
      />
    </view>
    <view class="d-flex flex-row justify-around p-2 pt-0">
      <SimpleDropDownPicker v-model="selectedTag" :columns="categoryData.content.value" />
      <SimpleDropDownPicker v-model="selectedLevel" :columns="levelData.content.value" />
      <SimpleDropDownPicker v-model="selectedRegion" :columns="regionData.content.value" />
    </view>
    <view class="d-flex flex-row flex-wrap justify-between p-2">
      <view
        v-for="item in listLoader.list.value"
        :key="item.id"
        class="width-1-2"
      >
        <Box2LineLargeImageUserShadow 
          classNames="ml-2 mb-3"
          titleColor="title-text"
          :image="item.image"
          :title="item.name"
          @click="goDetails(item.id)"
        />
      </view>
    </view>
    <SimplePageListLoader :loader="listLoader" />
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import CommonContent, { GetContentListParams } from '@/api/CommonContent';
import { useSimplePageListLoader } from '@/common/composeabe/SimplePageListLoader';
import { navTo } from '@/components/utils/PageAction';
import MoveableContent from '@/api/inheritor/MoveableContent';
import UnmoveableContent from '@/api/inheritor/UnmoveableContent';
import SimplePageListLoader from '@/common/components/SimplePageListLoader.vue';
import Box2LineLargeImageUserShadow from '@/pages/parts/Box2LineLargeImageUserShadow.vue';
import SimpleDropDownPicker from '@/common/components/SimpleDropDownPicker.vue';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import AppCofig from '@/common/config/AppCofig';

const categoryData = useSimpleDataLoader(async () => 
  [{
    id: 0, 
    name: '全部分类'
  }].concat((await CommonContent.getCategoryList(3)).map((item) => ({
    id: item.id,
    name: item.title,
  })))
, true);
const levelData = useSimpleDataLoader(async () => 
  [{
    id: 0, 
    name: '全部级别'
  }].concat(
    (await CommonContent.getCategoryList(2)).map((item) => ({
      id: item.id,
      name: item.title,
    })).filter((item) => !item.name.includes('非'))
  )
, true);
const regionData = useSimpleDataLoader(async () => 
  [{
    id: 0, 
    name: '全部区域'
  }].concat((await CommonContent.getCategoryList(1)).map((item) => ({
    id: item.id,
    name: item.title,
  })))
, true);
const selectedTag = ref(0);
const selectedLevel = ref(0);
const selectedRegion = ref(0);
const searchValue = ref('');
const tab = ref(0)
const tabs = [
  {
    name: '不可移动文物'
  },
  {
    name: '可移动文物'
  },
];
const listLoader = useSimplePageListLoader<{
  id: number,
  image: string,
  name: string
}>(8, async (page, pageSize) => {
  let api;
  switch (tab.value) {
    default:
    case 0: api = UnmoveableContent; break; 
    case 1: api = MoveableContent; break; 
  }
  const res = await api.getContentList(new GetContentListParams().setSelfValues({
    crType: selectedTag.value == 0 ? undefined: selectedTag.value,
    level: selectedLevel.value == 0 ? undefined: selectedLevel.value,
    region: selectedRegion.value == 0 ? undefined: selectedRegion.value,
    keywords: searchValue.value,
  }), page, pageSize);
  return { list: res.list.map((item) => {
    return {
      id: item.id,
      image: item.thumbnail || item.image || AppCofig.defaultImage,
      name: item.title,
    }
  }), total: res.total }
});

watch(selectedLevel, () => {
  listLoader.loadData(undefined, true);
});
watch(selectedRegion, () => {
  listLoader.loadData(undefined, true);
});
watch(selectedTag, () => {
  listLoader.loadData(undefined, true);
});
watch(tab, () => {
  listLoader.loadData(undefined, true);
}, { immediate: true });

function doSearch() {
  listLoader.loadData(undefined, true);
}
function goDetails(id: number) {
  navTo('details', { id })
}
</script>