feat: trends页面完成数据对接

components/business/categories/block.vue

@@ -1,25 +1,27 @@
 <script lang='ts' setup>
 import tempItem from './comp/temp_item.vue'
-import BlockImg from '~/assets/images/block_icon.png'
+import trendy from '~/assets/images/trendy.png'
+import quality from '~/assets/images/quality.png'
+import unique from '~/assets/images/unique.png'
 
 const list = [
   {
     title: 'Trendy & Market-Ready Designs',
     desc:
       'Selected products that taps into current consumer trends, ensuring businesses always offer fresh, in-demand products.',
-    img: BlockImg,
+    img: trendy,
   },
   {
     title: 'Unique & Engaging Aesthetics',
     desc:
       'Products featuring unique, engaging aesthetics that enhance shelf appeal and create memorable shopping experiences.',
-    img: BlockImg,
+    img: unique,
   },
   {
     title: 'Quality & Supply Chain Reliability',
     desc:
       'Premium products supported by a dependable supply network, ensuring both product integrity and reliable inventory flow.',
-    img: BlockImg,
+    img: quality,
   },
 ]
 </script>
@@ -40,5 +42,5 @@ const list = [
 </template>
 
 <style lang='less' scoped>
- 
+
 </style>

components/business/categories/comp/temp_item.vue

@@ -6,8 +6,8 @@ defineProps({
 
 <template>
   <div class="py-40px px-30px bg-#fff text-center b-rd-12px item">
-    <div class="w-80px flex items-center b-rd-50% bg-#f5f0ff mb-30px justify-center h-80px mx-auto">
-      <img :src="item.img" alt="" class="w-32px h-32px">
+    <div class="w-80px flex items-center mb-30px justify-center mx-auto">
+      <img :src="item.img" alt="" class="w-80px h-80px">
     </div>
     <h3 class="!mb-10px fw-800 text-24px text-#333 line-clamp-2 lh-40px">
       {{ item.title }}

components/business/solutions/block_power.vue

@@ -51,8 +51,8 @@ const diff_data: any = computed(() => {
         </div>
       </div>
       <img
-        src="https://picsum.photos/470/280"
-        alt=""
+        src=""
+        alt="暂缺"
         class="w-470px h-280px b-rd-6px"
         srcset=""
       >

components/business/trends/comp/item.vue

@@ -1,13 +1,32 @@
 <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>
   <div>
     <div class="pos-relative bg-#fff shadow-item flex b-rd-20px overflow-hidden p-40px items-center">
-      <img :src="item.img" alt="" srcset="" class="w-500px h-380px b-rd-10px object-cover mr-50px">
+      <img
+        :src="item.coverImg"
+        :alt="item.coverAlt" srcset="" class="w-500px h-380px b-rd-10px object-cover mr-50px"
+      >
       <div class="flex-1 text-left">
         <h3
           class="!mb-20px fw-800 text-24px text-#333 line-clamp-2"
@@ -15,13 +34,15 @@ defineProps({
           {{ item.title }}
         </h3>
         <div class="text-16px text-#999 lh-24px mb-60px">
-          {{ item.subTitle }}
+          {{ item.subhead }}
         </div>
         <div class="flex items-center">
           <el-button class="!bg-#9B6CFF w-140px text-14px !text-#fff !b-#9B6CFF !h-48px py-18px">
-            Learn More
+            <NuxtLink :to="`/blog/${item.blogSlug}`">
+              Learn More
+            </NuxtLink>
           </el-button>
-          <el-button class="!bg-#fff w-150px text-14px !text-#9B6CFF !b-#9B6CFF !h-48px px-24px">
+          <el-button class="!bg-#fff w-150px text-14px !text-#9B6CFF !b-#9B6CFF !h-48px px-24px" @click="clickLoginAndDownload(item)">
             Download Catalog
           </el-button>
         </div>

components/business/trends/comp/item2.vue

@@ -1,7 +1,23 @@
 <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>
@@ -14,18 +30,23 @@ defineProps({
           {{ item.title }}
         </h3>
         <div class="text-16px text-#999 lh-24px mb-60px">
-          {{ item.subTitle }}
+          {{ item.subhead }}
         </div>
         <div class="flex items-center">
           <el-button class="!bg-#9B6CFF w-140px text-14px !text-#fff !b-#9B6CFF !h-48px py-18px">
-            Learn More
+            <NuxtLink :to="`/blog/${item.blogSlug}`">
+              Learn More
+            </NuxtLink>
           </el-button>
-          <el-button class="!bg-#fff w-150px text-14px !text-#9B6CFF !b-#9B6CFF !h-48px px-24px">
+          <el-button class="!bg-#fff w-150px text-14px !text-#9B6CFF !b-#9B6CFF !h-48px px-24px" @click="clickLoginAndDownload(item)">
             Download Catalog
           </el-button>
         </div>
       </div>
-      <img :src="item.img" alt="" srcset="" class="w-500px h-380px b-rd-10px object-cover ml-50px">
+      <img
+        :src="item.coverImg"
+        :alt="item.coverAlt" srcset="" class="w-500px h-380px b-rd-10px object-cover ml-50px"
+      >
     </div>
   </div>
 </template>

components/business/trends/index.vue

@@ -2,36 +2,17 @@
 
 <script lang="ts" setup>
 import { ConstKeys } from '~/enums/const-enums'
+import { Api } from '@/api/model/url'
 
-const list = ref([
-  {
-    title: 'Real-Time Trend Curation',
-    subTitle:
-      'EJET Spark catalog description, spark the trend, ignate sales. EJET Spark cat description, spark the trend, ignate sales. EJET Spark catalog description, spark the trend, ignate sales. ',
-    img: 'https://picsum.photos/300/300',
-    slug: 'test',
-  },
-  {
-    title: 'Real-Time Trend Curation',
-    subTitle:
-      'EJET Spark catalog description, spark the trend, ignate sales. EJET Spark cat description, spark the trend, ignate sales. EJET Spark catalog description, spark the trend, ignate sales. ',
-    img: 'https://picsum.photos/300/300',
-    slug: 'test2',
-  },
-  {
-    title: 'Real-Time Trend Curation',
-    subTitle:
-      'EJET Spark catalog description, spark the trend, ignate sales. EJET Spark cat description, spark the trend, ignate sales. EJET Spark catalog description, spark the trend, ignate sales. ',
-    img: 'https://picsum.photos/300/300',
-    slug: 'test3',
-  },
-])
+const list = ref([])
 
-// const { data, pending, error, refresh } = await useAsyncData(
-//   'brand-detail',
-//   () => $fetch(`${ConstKeys.DOMAINPRO}/client/brand/list/default`, { params: { pageNo: 1, pageSize: 8 } }),
-// )
-// list.value = data.value?.result.records
+const requestUrl = `${ConstKeys.DOMAINDEV}${Api.CatalogueList}`
+const params = { pageNo: 1, pageSize: 3, state: 1, trend: 1, order: 'desc' }
+const { data, pending, error, refresh } = await useAsyncData(
+  'catalogue-list',
+  () => $fetch(requestUrl, { params }),
+)
+list.value = data.value?.result.records
 </script>
 
 <template>

components/common/block/catalogs.vue

@@ -24,7 +24,7 @@ const list = ref([
   },
 ])
 const requestUrl = `${ConstKeys.DOMAINDEV}${Api.CatalogueList}`
-const params = { pageNo: 1, pageSize: 9, state: 1, trend: 1, order: 'desc' }
+const params = { pageNo: 1, pageSize: 9, state: 1, trend: 0, order: 'desc' }
 const { data, pending, error, refresh } = await useAsyncData(
   'catalogue-list',
   () => $fetch(requestUrl, { params }),

components/common/block/partner.vue

@@ -1,8 +1,10 @@
 <script lang='ts' setup>
+import partner_01 from '@/assets/images/partners/partner_01.png'
+
 const avatarArray = [
-  ['https://picsum.photos/240/70', 'https://picsum.photos/240/70', 'https://picsum.photos/240/70', 'https://picsum.photos/240/70', 'https://picsum.photos/240/70', 'https://picsum.photos/240/70', 'https://picsum.photos/240/70'],
-  ['https://picsum.photos/240/70', 'https://picsum.photos/240/70', 'https://picsum.photos/240/70', 'https://picsum.photos/240/70', 'https://picsum.photos/240/70'],
-  ['https://picsum.photos/240/70', 'https://picsum.photos/240/70', 'https://picsum.photos/240/70', 'https://picsum.photos/240/70', 'https://picsum.photos/240/70'],
+  [partner_01, partner_01, partner_01, partner_01, partner_01],
+  [partner_01, partner_01, partner_01, partner_01, partner_01],
+  [partner_01, partner_01, partner_01, partner_01, partner_01],
 ]
 const colorMode = useColorMode()
 </script>

pages/categories/index.vue

@@ -3,16 +3,18 @@
 </script>
 
 <template>
-  <div class="bg-#0F0820 header">
-    <div class=" w-1200-auto flex items-end justify-center text-center h-600px pb-110px">
-      <div>
-        <h1 class="text-58px fw-800 text-#fff ls-2 custom-title-font">
-          Discover, Download,<br>
-          Delight!
-        </h1>
-        <el-button class="mt-30px !bg-#fff !text-#9B6CFF !w-160px !h-40px !b-0px !b-rd-200px" round>
-          View Catalogs
-        </el-button>
+  <div class="bg-#0F0820 ">
+    <div class="header">
+      <div class=" w-1200-auto flex items-end justify-center text-center h-600px pb-110px">
+        <div>
+          <h1 class="text-58px fw-800 text-#fff ls-2 custom-title-font">
+            Discover, Download,<br>
+            Delight!
+          </h1>
+          <el-button class="mt-30px !bg-#fff !text-#9B6CFF !w-160px !h-40px !b-0px !b-rd-200px" round>
+            View Catalogs
+          </el-button>
+        </div>
       </div>
     </div>
     <business-categories-list />

pages/trends.vue

@@ -2,23 +2,26 @@
 </script>
 
 <template>
-  <div class="bg-#0F0820">
-    <div class="header w-1200-auto flex items-center  h-600px  bg-no-repeat bg-center" style="background-image: url('https://picsum.photos/600/600')">
-      <div class="pos-relative">
-        <h1 class="text-58px fw-800 text-#fff ls-2 custom-title-font">
-          Stay Ahead with
-        </h1>
-        <h1 class="text-58px fw-800 text-#fff ls-2  custom-title-font">
-          Trendy Products!
-        </h1>
-        <el-button class="mt-65px !bg-#878490 !text-#fff !bg-#878490 !w-160px !h-40px !b-#fff !b-rd-200px" round>
-          Contact US
-        </el-button>
-        <div
-          class="pos-absolute top--16px text-center right--60px w-150px py-8px bg-#FFFF66 b-rd-20px transform-rotate-16deg"
-        >
-          #Trendy Product
+  <div class="bg-#0F0820 ">
+    <div class="header">
+      <div class=" w-1200-auto flex items-center  h-800px  bg-no-repeat bg-center pos-relative">
+        <div class="pos-relative">
+          <h1 class="text-58px fw-800 text-#fff ls-2 custom-title-font">
+            Stay Ahead with
+          </h1>
+          <h1 class="text-58px fw-800 text-#fff ls-2  custom-title-font">
+            Trendy Products!
+          </h1>
+          <el-button class="mt-65px !bg-#878490 !text-#fff !bg-#878490 !w-160px !h-40px !b-#fff !b-rd-200px" round>
+            Contact US
+          </el-button>
+          <div
+            class="pos-absolute top--16px text-center right--60px w-150px py-8px bg-#FFFF66 b-rd-20px transform-rotate-16deg"
+          >
+            #Trendy Product
+          </div>
         </div>
+        <img src="@/assets/images/trendy_banner_img.png" class="w-660px h-730px pos-absolute right-0 bottom-0" alt="">
       </div>
     </div>
     <business-trends />
@@ -31,6 +34,8 @@
 
 <style lang='less' scoped>
 .header{
-  background-position-x: right;
+  background-image: url('@/assets/images/catalogue_bg.png');
+  background-position: center center;
+  background-size: cover;
 }
 </style>