mingnan/src/pages/article/food/index.vue

<template>
  <view class="main">
    <view class="search">
      <uni-search-bar 
        v-model="searchValue"
        radius="100" 
        bgColor="#fff" 
        placeholder="搜一搜" 
        clearButton="auto" 
        cancelButton="none"
        @confirm="search"
      />
    </view>
    <u-tabs 
      :current="currentCategoryId"
      :list="categoryList" 
      lineWidth="30"
      lineColor="rgb(255, 135, 25)"
      :activeStyle="{
        color: '#000',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
      }"
      :inactiveStyle="{
        color: '#606266',
        transform: 'scale(1)'
      }"
      :scrollable="false"
      class="top-tab"
      @click="tabClick"
    />
    <view class="post-list">
      <view
        v-for="item in listLoader.list.value" 
        :key="item.id"
        class="item" 
        @click="goDetails(item.id)"
      >
        <view class="image-wrap" :style="{backgroundImage:'url('+item.image+')'}">
          <view class="like" :class="{liked: item.isLike}">
            <text class="iconfont icon-liked" v-if="item.isLike"></text>
            <text class="iconfont icon-like" v-else></text>
            <text>{{ item.likes }}</text>
          </view>
        </view>
        <view class="desc ellipsis-2">{{ item.title }}</view>
      </view>
    </view>
    <SimplePageListLoader :loader="listLoader" />
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useSimplePageListLoader } from '@/common/composeabe/SimplePageListLoader';
import { navTo } from '@/common/utils/PageAction';
import SimplePageListLoader from '@/common/components/SimplePageListLoader.vue';
import { GetContentListItem, GetContentListParams } from '@/api/CommonContent';
import NewsIndexContent from '@/api/news/NewsIndexContent';

const searchValue = ref('');
const currentCategoryId = ref(3);
const categoryList = [
  {
    id: 1,
    name: '美好时光'
  },
  {
    id: 2,
    name: '伴手好礼'
  }, {
    id: 3,
    name: '特色佳肴'
  }, {
    id: 4,
    name: '海鲜盛宴'
  }
];

const listLoader = useSimplePageListLoader<GetContentListItem>(8, async (page, pageSize) => {
  const res = await NewsIndexContent.getContentList(new GetContentListParams().setSelfValues({
    keywords: searchValue.value,
    mainBodyColumnId: 303
  }), page, pageSize);
  return res.list;
});

watch(currentCategoryId, () => {
  listLoader.loadData(undefined, true);
}, { immediate: true });

function goDetails(id: number) {
  navTo('../details', { id })
}
function search() {
  listLoader.loadData(undefined, true);
}
function tabClick(e: { index: number }) {
  currentCategoryId.value = e.index;
}

</script>

<style lang="scss" scoped>

</style>