feat: 整理完成博客列表联调

api/model/common.ts

@@ -1,17 +1,17 @@
 /** @format */
 
-import { useMyRequest } from "~/composables/useFetchRequest"
+import { useMyRequest } from '~/composables/useFetchRequest'
 
 enum Api {
-  CategoryList = "/client/category/merchandise",
-  NewCategoryList = "/api-s002/categoryUsa/rootList",
-  OssUploadFile = "/sys/oss/file/otherUpload",
-  DictUrl = "/shop/sys/dict",
-  Subscribe = "/client/spCustomSubscription/add",
-  ContactUs = "/client/guestbook/add",
-  labels = "/client/centerProductTag/listTree",
-  BannerData = "/client/category/detail",
-  NoticeRemind = "/client/notification/unReadList",
+  CategoryList = '/client/category/merchandise',
+  NewCategoryList = '/api-s002/categoryUsa/rootList',
+  OssUploadFile = '/sys/oss/file/otherUpload',
+  DictUrl = '/shop/sys/dict',
+  Subscribe = '/client-s003/guestbook/add',
+  ContactUs = '/client/guestbook/add',
+  labels = '/client/centerProductTag/listTree',
+  BannerData = '/client/category/detail',
+  NoticeRemind = '/client/notification/unReadList',
 }
 
 /**
@@ -28,7 +28,8 @@ function handleData(data: any) {
   if (data && isArray(data)) {
     data.forEach((item) => {
       item.label = item.title
-      if (item.children && item.children.length > 0) handleData(item.children)
+      if (item.children && item.children.length > 0)
+        handleData(item.children)
     })
   }
   return data
@@ -65,12 +66,13 @@ export async function getProductLabelAndTrendApi(data: any) {
  */
 export async function ossUploadApi(file: File) {
   const formData = new FormData()
-  formData.append("file", file)
+  formData.append('file', file)
   try {
     const result = await useMyRequest().post(Api.OssUploadFile, formData)
     return result
-  } catch (error) {
-    console.error("Upload failed:", error)
+  }
+  catch (error) {
+    console.error('Upload failed:', error)
   }
 }
 

api/model/url.ts

@@ -2,4 +2,5 @@ export enum Api {
   CategoryList = '/client-s003/category/catalogue',
   CatalogueList = '/client-s003/s003ProductCatalogue/list',
   BlogsList = '/client-s003/s003OperatorContent/list',
+  BlogsCategoryList = '/client-s003/s003OperatorContent/category/content',
 }

components/common/block/catalogs.vue

@@ -9,7 +9,7 @@ import { ConstKeys } from '~/enums/const-enums'
 import { Api } from '@/api/model/url'
 
 const modules = [Navigation, Pagination]
-const categoryList = ref<any>([])
+const catalogueList = ref<any>([])
 const swiperVertical = ref<any>(null)
 
 const solution = ref('category')
@@ -24,12 +24,12 @@ const list = ref([
   },
 ])
 const requestUrl = `${ConstKeys.DOMAINDEV}${Api.CatalogueList}`
-const params = { pageNo: 1, pageSize: 9, state: true, trend: 0, order: 'desc' }
+const params = { pageNo: 1, pageSize: 9, state: 1, trend: 1, order: 'desc' }
 const { data, pending, error, refresh } = await useAsyncData(
   'catalogue-list',
   () => $fetch(requestUrl, { params }),
 )
-categoryList.value = data.value?.result?.records || []
+catalogueList.value = data.value?.result?.records || []
 
 function onVerticalSwiper(swiper: any) {
   swiperVertical.value = swiper
@@ -107,7 +107,7 @@ function switchCatalogs(item: any) {
           >
         </div>
         <Swiper
-          v-if="categoryList.length"
+          v-if="catalogueList.length"
           :slides-per-view="3"
           :space-between="20"
           :modules="modules"
@@ -118,7 +118,7 @@ function switchCatalogs(item: any) {
           class="pos-relative"
           @swiper="onVerticalSwiper"
         >
-          <SwiperSlide v-for="(item, index) in categoryList" :key="index">
+          <SwiperSlide v-for="(item, index) in catalogueList" :key="index">
             <common-catalogs-item :item="item" class="catalog-item" />
           </SwiperSlide>
         </Swiper>

components/common/blog/item.vue

@@ -9,7 +9,7 @@ defineProps({
 <template>
   <div class="pos-relative">
     <nuxt-link :to="{ name: 'blog-slug', params: { slug: item?.slug } }">
-      <img :src="item.thumbnailUrl" alt="" srcset="" class="w-375px h-240px b-rd-10px object-cover">
+      <img :src="item.thumbnailUrl" :alt="item.thumbnailAlt" srcset="" class="w-375px h-240px b-rd-10px object-cover">
       <div v-if="item.category_dictText" class="pos-absolute top-10px b-rd-400px left-10px text-center w-138px py-10px bg-#f0f1f3 text-#9B6CFF text-14px b-1px b-solid b-#e7e7e7">
         {{ item.category_dictText }}
       </div>

components/common/catalogs/item.vue

@@ -1,7 +1,24 @@
 <script lang='ts' setup>
+import { useCommonStore } from '@/stores/modules/common'
+
 defineProps({
   item: Object as any,
 })
+
+const { openLoginAndDownloadModal } = useLoginAndDownLoadModal()
+
+async function clickLoginAndDownload(item: any) {
+  try {
+    const commonStore = useCommonStore()
+    commonStore.setDownloadCatalog(item)
+    const { status } = await openLoginAndDownloadModal()
+    if (status)
+      location.reload()
+  }
+  catch (error) {
+    console.log(error)
+  }
+}
 </script>
 
 <template>
@@ -21,7 +38,7 @@ defineProps({
       srcset=""
       class="w-100% b-rd-tl-10px  b-rd-tr-10px object-cover"
     >
-    <div class="pos-absolute bottom-20px left-20px cursor-pointer text-#fff bg-#fff/50 b-1px  b-transparent b-solid h-40px pr-8px pl-30px hover:b-1px hover:b-#fff hover:b-solid backdrop-blur-20px text-14px fw-bold  b-rd-400px flex items-center justify-center">
+    <div class="pos-absolute bottom-20px left-20px cursor-pointer text-#fff bg-#fff/50 b-1px  b-transparent b-solid h-40px pr-8px pl-30px hover:b-1px hover:b-#fff hover:b-solid backdrop-blur-20px text-14px fw-bold  b-rd-400px flex items-center justify-center" @click="clickLoginAndDownload(item)">
       <div>Download</div>
       <div class="p-5px b-rd-50% bg-#fff ml-20px">
         <svgo-download class="w-14px h-14px text-#333333" />

pages/blog/index.vue

@@ -1,9 +1,8 @@
 <script lang='ts' setup>
 import { submitSubscribeApi } from '~/api/model/common'
 import { PageSizeEnum } from '~/enums/sizeEnum'
-import {
-  getBlogsListApi,
-} from '~/api/model/blogs'
+import { ConstKeys } from '~/enums/const-enums'
+import { Api } from '@/api/model/url'
 
 const list = ref<any>([])
 const currentPage = ref(PageSizeEnum.PAGE)
@@ -16,36 +15,39 @@ const categories = ref(
       title: 'All',
       slug: 'all',
     },
-    {
-      key: 'instructions',
-      title: 'Security settings instructions',
-      slug: 'instructions',
-    },
-    {
-      key: 'settings',
-      title: 'Multiple account settings',
-      slug: 'settings',
-    },
   ],
 )
-const category = ref('')
 const form = ref<any>({
   mail: '',
 })
-async function getVideoOrBlogsList(pageNo = currentPage.value, pageSize = page_size.value) {
-  const params = {
-    pageNo,
-    pageSize,
-    categoryId: category.value,
-    orderBy: 'createTime',
-    orderType: 'desc',
+const params = ref({
+  pageNo: currentPage.value,
+  pageSize: page_size.value,
+  categoryId: '',
+})
+const { data: res } = await useAsyncData(
+  'blog-category-list',
+  () => $fetch(`${ConstKeys.DOMAINDEV}${Api.BlogsCategoryList}`, { params: { all: true } }),
+)
+// Ensure we have a valid array before spreading
+const arr = Array.isArray(res.value?.result) ? res.value.result : []
+categories.value = [
+  ...categories.value,
+  ...arr,
+]
+params.value.categoryId = categories.value[0].key
+const { data: res2, pending, error, refresh } = await useAsyncData(
+  'blog-list',
+  () => $fetch(`${ConstKeys.DOMAINDEV}${Api.BlogsList}`, { params: params.value }),
+)
+watch(() => res2.value, (newValue) => {
+  if (newValue?.result) {
+    total.value = newValue.result.total
+    currentPage.value = newValue.result.current
+    list.value = newValue.result.records
   }
-  const res: any = await getBlogsListApi(params)
-  total.value = res.total
-  currentPage.value = res.current
-  list.value = res.records
-}
-getVideoOrBlogsList()
+}, { immediate: true })
+
 async function submitSubscribe() {
   try {
     await submitSubscribeApi(form.value)
@@ -56,13 +58,16 @@ async function submitSubscribe() {
     console.log(error)
   }
 }
-function onSelectCategory(item: any) {
-  category.value = item.key
+async function onSelectCategory(item: any) {
+  params.value.categoryId = item.key
   currentPage.value = PageSizeEnum.PAGE
-  getVideoOrBlogsList(currentPage.value, page_size.value)
+  params.value.pageNo = PageSizeEnum.PAGE
+  await refresh()
 }
-function changePage(current: number, size: number) {
-  getVideoOrBlogsList(current, size)
+async function changePage(current: number, _size: number) {
+  params.value.pageNo = current
+  currentPage.value = current
+  await refresh()
 }
 const validateEmail = computed(() => {
   const emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/
@@ -82,7 +87,7 @@ const validateEmail = computed(() => {
       </h2>
       <div class="pos-relative w-500px mx-auto mb-60px mt-40px">
         <el-input v-model.trim="form.mail" class="custom-input h-46px !b-rd-200px overflow-hidden" placeholder="Please enter your email address" />
-        <el-button :disabled="!validateEmail || !form.mail" type="primary" class="!bg-#9B6CFF text-#fff pos-absolute !b-0px top-50% transform-translate-y--50% right-10px w-120px !text-16px !b-rd-150px" @click="submitSubscribe">
+        <el-button :disabled="!validateEmail || !form.mail" type="primary" class="!bg-#9B6CFF !disabled:bg-#9B6CFF/70 text-#fff pos-absolute !b-0px top-50% transform-translate-y--50% right-10px w-120px !text-16px !b-rd-150px" @click="submitSubscribe">
           Subscribe
         </el-button>
       </div>
@@ -93,7 +98,7 @@ const validateEmail = computed(() => {
           :key="index"
           class="h-60px lh-60px px-30px b-rd-200px text-16px cursor-pointer hover:bg-#EAE5FA hover:text-#9B6CFF transition-all duration-300"
           :class="
-            category === item.key
+            params.categoryId === item.key
               ? '!bg-#EAE5FA !text-#9B6CFF'
               : 'bg-#fff text-#333'
           "
@@ -105,7 +110,7 @@ const validateEmail = computed(() => {
     </div>
     <div class="pt-120px w-1200-auto">
       <div class="grid grid-cols-3 gap-col-40px gap-row-60px ">
-        <div v-for="item, index in list" :key="index">
+        <div v-for="item in list" :key="item.key">
           <common-blog-item :item="item" />
         </div>
       </div>

pages/categories/[slug].vue

@@ -17,16 +17,25 @@ const list = [
     blogSlug: 'stationary-office-supplies',
   },
   {
-    id: '1930872642297643010',
-    title: 'Stationary & Office Supplies',
-    subhead: 'Discover bestsellers and fresh arrivals tailored to your niche.',
-    coverImg: 'https://picsum.photos/560/310',
-    coverAlt: 'https://picsum.photos/560/310',
-    pdf: 'https://static.ejetselection.com/temp/baozhen_1748937135247.pdf',
-    viewPdf: 'https://static.ejetselection.com/temp/baozhen_1748937135247.pdf',
-    // pdfUrl: 'https://static.ejetselection.com/temp/导入模板2222_1736660213488.xlsx',
-    downloadCondition: Condition.REQUEST, // 下载条件 1是登录后下载 2是登录后申请下载
-    blogSlug: 'stationary-office-supplies',
+    id: '1934486796128428033',
+    billNo: 'ML000004',
+    title: '目录册标题',
+    subhead: '副标题',
+    category: '1933455277679104002',
+    downloadCondition: '1',
+    trend: '1',
+    state: '1',
+    coverImg: 'https://static.ejetselection.com/temp/微信图片_20250530110533_1750052537617.jpg',
+    coverAlt: 'alt',
+    viewPdf: 'https://static.ejetselection.com/temp/新建DOCX文档_1750052562044.pdf',
+    pdf: 'https://static.ejetselection.com/temp/新建DOCX文档_1750052566275.pdf',
+    createBy: '王亮',
+    createTime: '2025-06-16 13:42:48',
+    updateBy: '王亮',
+    updateTime: '2025-06-16 13:43:00',
+    blogSlug: null,
+    category_dictText: 'TREND TOYS',
+    category_dictColor: 'null',
   },
 ]
 const { openLoginAndDownloadModal } = useLoginAndDownLoadModal()