add：对接卡片接口

src/api/carousal.ts

@@ -1,13 +1,18 @@
-import type { CreateCarousalsRequest, TypeList } from '@/model/carousals'
+import type { PageResult } from '@/model/base'
+import type { Article, ArticleParams, Category, CreateCarousalsRequest } from '@/model/pet-manual'
 import httpClient from '@/api/httpClient'
 
 function getCarousalList() {
   return httpClient.get<CreateCarousalsRequest[]>('/carousals/active-list')
 }
 function getTypeList() {
-  return httpClient.get<TypeList[]>('/categories/list')
+  return httpClient.get<Category[]>('/categories/list')
+}
+function getArticleList(data: ArticleParams) {
+  return httpClient.get<PageResult<Article>>('/articles', data)
 }
 export default {
   getCarousalList,
   getTypeList,
+  getArticleList,
 }

src/model/base.ts

@@ -0,0 +1,32 @@
+import type { User } from './user'
+
+export interface ErrorResponse {
+  code: number
+  message: string
+}
+export interface BaseModel {
+  id: string
+  createdTime: string
+  updateTime: string
+}
+
+export interface AuditBaseModel extends BaseModel {
+  createBy: User
+  updateBy: User
+}
+
+export interface Paging {
+  page: number
+  size: number
+  total?: number
+}
+
+export interface BaseFilterRequest extends Partial<Paging> {
+}
+
+export interface PageResult<T> {
+  pagination: Paging
+  data: T[]
+}
+
+export interface ErrorResponseList extends Array<ErrorResponse> {}

src/model/carousals.ts

@@ -1,13 +0,0 @@
-export interface CreateCarousalsRequest {
-  imageUrl: string
-  targetType: string
-  targetUrl: string
-  targetId?: string
-}
-
-export interface TypeList {
-  id: string
-  code: string
-  name: string
-  isClick?: boolean
-}

src/model/pet-manual.ts

@@ -0,0 +1,29 @@
+import type { Paging } from '@/model/base'
+
+export interface CreateCarousalsRequest {
+  imageUrl: string
+  targetType: string
+  targetUrl: string
+  targetId?: string
+}
+
+export interface Category {
+  id: string
+  code: string
+  name: string
+  isClick?: boolean
+}
+
+export interface ArticleParams extends Paging {
+  title: string
+  categoryId: string
+}
+
+export interface Article {
+  id: string
+  content: string
+  status: string
+  title: string
+  updatedTime?: string
+  imageUrl?: string
+}

src/model/user.ts

@@ -0,0 +1,11 @@
+import type { AuditBaseModel, BaseFilterRequest } from '@/model/base'
+
+export interface User extends AuditBaseModel {
+  username: string
+  locked: boolean
+  enabled: boolean
+}
+
+export interface UserSearchFilter extends BaseFilterRequest {
+  username?: string
+}

src/pages/pet-manual/components/CardList.vue

@@ -1,13 +1,34 @@
 <script setup lang="ts">
-interface ListItem {
-  img: string
-  title: string
-  desc: string
-  time: string
+import type { Paging } from '@/model/base'
+import type { Article } from '@/model/pet-manual'
+import titleBg from '@/static/image/feed-plan/bg.png'
+
+interface ContentText {
+  contentdown: string
+  contentrefresh: string
+  contentnomore: string
+}
+const props = withDefaults(defineProps<{
+  cardList: Article[]
+  pagination: Paging
+}>(), {
+  pagination: {
+    page: 0,
+    size: 10,
+    total: 0,
+  },
+})
+
+const emit = defineEmits(['loadMore'])
+const contentText = ref<ContentText>({
+  contentdown: '查看更多',
+  contentrefresh: '加载中',
+  contentnomore: '没有更多',
+})
+
+function handleLoadMore() {
+  emit('loadMore')
 }
-const props = defineProps<{
-  cardList: ListItem[]
-}>()
 </script>
 
 <template>
@@ -15,20 +36,21 @@ const props = defineProps<{
     v-for="(item, index) in props.cardList" :key="index" class="bg-[white] rounded-md shadow-lg mx-4 mb-4 w-[calc(100% - 32px)] mt-3"
   >
     <view class="flex">
-      <image class="w-28 h-28 rounded-l-md" :src="item.img" />
+      <image class="w-28 h-28 rounded-l-md" :src="item?.imageUrl || titleBg" />
       <view class="p-4">
         <view class="text-[14px]">
           {{ item.title }}
         </view>
         <view class="mt-2 text-[11px] text-[#999] whitespace-pre-line">
-          {{ item.desc }}
+          {{ item.content }}
         </view>
         <view class="mt-3 text-[10px] text-[#D8D8D8]">
-          {{ item.time }}
+          {{ item.updatedTime }}
         </view>
       </view>
     </view>
   </view>
+  <uni-load-more status="more" :content-text="contentText" @click-load-more="handleLoadMore" />
 </template>
 
 <style scoped>

src/pages/pet-manual/index.vue

@@ -1,80 +1,24 @@
 <script setup lang="ts">
-import type { CreateCarousalsRequest, TypeList } from '@/model/carousals'
+import type { Paging } from '@/model/base'
+import type { Article, ArticleParams, Category, CreateCarousalsRequest } from '@/model/pet-manual'
 import carousalApi from '@/api/carousal'
 import CardList from '@/pages/pet-manual/components/CardList.vue'
-// const searchValue = ref('')
-import bg from '@/static/image/feed-plan/bg.png'
 import circle from '@/static/image/feed-plan/circle.png'
 import message from '@/static/image/feed-plan/message.png'
 import ToolApi from '@/utils'
 
-interface ListItem {
-  img: string
-  title: string
-  desc: string
-  time: string
-}
-// interface Item {
-//   content: string
-// }
 interface DotStyle {
   backgroundColor: string
   selectedBackgroundColor: string
   selectedBorder: string
   border: string
 }
-interface TypeItem {
-  name: string
-  isClick: boolean
-}
+
 const titleName = ref<string>('养宠手册')
-const listModel = ref<ListItem[]>([
-  {
-    img: bg,
-    title: '猫咪食物禁忌',
-    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
-    time: '2025年1月1日',
-  },
-  {
-    img: bg,
-    title: '猫咪食物禁忌',
-    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
-    time: '2025年1月1日',
-  },
-  {
-    img: bg,
-    title: '猫咪食物禁忌',
-    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
-    time: '2025年1月1日',
-  },
-  {
-    img: bg,
-    title: '猫咪食物禁忌',
-    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
-    time: '2025年1月1日',
-  },
-  {
-    img: bg,
-    title: '猫咪食物禁忌',
-    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
-    time: '2025年1月1日',
-  },
-  {
-    img: bg,
-    title: '猫咪食物禁忌',
-    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
-    time: '2025年1月1日',
-  },
-  {
-    img: bg,
-    title: '猫咪食物禁忌',
-    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
-    time: '2025年1月1日',
-  },
-])
+const listModel = ref<Article[]>([])
 const safeHeight = ToolApi.getSafeHeight()
 const searchValue = ref<string>('')
-
+const cardState = ref<'update' | 'updatePage'>('update')
 const info = ref<CreateCarousalsRequest[]>([
   {
     imageUrl: '',
@@ -97,11 +41,25 @@ function change(e: CustomEvent<{ current: number }>): void {
   current.value = e.detail.current
 }
 
-const typeList = ref<TypeList[]>([])
+const typeList = ref<Category[]>([])
+const articleParams = ref<ArticleParams>({
+  page: 1,
+  size: 10,
+  title: '',
+  categoryId: '',
+})
+const articlePaging = ref<Paging>({
+  page: 1,
+  size: 10,
+  total: 0,
+})
 
-function handleClickType(item: TypeItem) {
+async function handleClickType(item: Category) {
   typeList.value.forEach(i => (i.isClick = false))
   item.isClick = true
+  articleParams.value.categoryId = item.id
+  cardState.value = 'updatePage'
+  await updateArticleList()
 }
 const isSearch = ref<boolean>(true)
 function handleSearchFocus() {
@@ -119,6 +77,25 @@ const findList = ref<{ name: string }[]>([
   { name: '宠物吃饭慢' },
   { name: '猫咪尿闭怎么办' },
 ])
+async function updateArticleList() {
+  const articleListApi = await carousalApi.getArticleList(articleParams.value)
+  if (cardState.value === 'update') {
+    listModel.value = articleListApi.data
+  }
+  else if (cardState.value === 'updatePage') {
+    listModel.value.push(...articleListApi.data)
+  }
+  else {
+    listModel.value = articleListApi.data
+  }
+  articlePaging.value = articleListApi.pagination
+}
+
+async function handleLoadArticle() {
+  articleParams.value.page += 1
+  cardState.value = 'updatePage'
+  await updateArticleList()
+}
 async function init() {
   info.value = await carousalApi.getCarousalList()
   typeList.value = (await carousalApi.getTypeList()).map((item, index) => {
@@ -129,7 +106,10 @@ async function init() {
       isClick: index === 0,
     }
   })
+  articleParams.value.categoryId = typeList.value[0].id
+  await updateArticleList()
 }
+
 function handleJumpUrl(item: CreateCarousalsRequest) {
   if (item.targetType === 'url') {
     uni.navigateTo({
@@ -218,7 +198,7 @@ init()
           </view>
         </scroll-view>
       </view>
-      <CardList :card-list="listModel" />
+      <CardList :card-list="listModel" @load-more="handleLoadArticle" />
     </view>
   </view>
 </template>