feat: 博客详情页联调完成

api/model/url.ts

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

components/common/blog/item.vue

@@ -10,7 +10,7 @@ defineProps({
   <div class="pos-relative">
     <nuxt-link :to="{ name: 'blog-slug', params: { slug: item?.slug } }">
       <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">
+      <div v-if="item.category_dictText" class="pos-absolute top-10px b-rd-400px left-10px text-center w-138px py-10px bg-#fff/50 backdrop-blur-20px text-#9B6CFF text-14px b-1px b-solid b-#fff/60">
         {{ item.category_dictText }}
       </div>
       <h3

pages/blog/[slug].vue

@@ -1,10 +1,12 @@
 <script lang='ts' setup>
-import { getBlogsDetailApi, getReleaseBlogApi } from '~/api/model/blogs'
 import { ConstKeys } from '~/enums/const-enums'
+import { Api } from '@/api/model/url'
+import { useCommonStore } from '@/stores/modules/common'
 
 const route = useRoute()
 const detail = ref<any>({})
 const tabValue = ref('blog')
+const isHasCatalogue = ref(true)
 
 const options = ref([
   {
@@ -15,68 +17,144 @@ const options = ref([
     label: 'Preview Catalog',
     value: 'catalog',
   },
+
 ])
-const relatedCatalog = ref<any>({
-  thumbnailUrl: 'https://picsum.photos/300/200',
-  contentTitle: 'EJET Spark Catalog Title',
-  contentSubhead: 'EJET Spark catalog description, spark the trend, ignate sales.',
-})
 const slug = route.params.slug
-// const { data, pending, error, refresh } = await useAsyncData(
-//   'blog-detail',
-//   () =>
-//     $fetch(`${ConstKeys.DOMAINPRO}/client/content/detail`, { params: { slug } }),
-// )
-// const seoData = data.value?.result
-// detail.value = seoData
+const { data, pending, error, refresh } = await useAsyncData(
+  'blog-detail',
+  () =>
+    $fetch(`${ConstKeys.DOMAINDEV}${Api.BlogDetail}`, { params: { slug } }),
+)
+const seoData = data.value?.result
+// 把createTime和updateTime转换为ISO格式
+if (seoData?.createTime)
+  seoData.createTime = new Date(seoData.createTime).toISOString()
+
+if (seoData?.updateTime)
+  seoData.updateTime = new Date(seoData.updateTime).toISOString()
+if (!seoData?.relatedCatalogue)
+  isHasCatalogue.value = false
+detail.value = seoData
+useHead({
+  title: detail.value?.metaTitle,
+  meta: [
+    {
+      name: 'description',
+      content: detail.value?.metaDescribe,
+    },
+    {
+      property: 'og:title',
+      content: detail.value?.metaTitle,
+    },
+    {
+      property: 'og:description',
+      content: detail.value?.metaDescribe,
+    },
+    {
+      property: 'og:image',
+      content: detail.value?.thumbnailUrl,
+    },
+    {
+      property: 'og:url',
+      content: `${ConstKeys.DOMAINPRO}/blog/${slug}`,
+    },
+    {
+      property: 'og:type',
+      content: 'website',
+    },
+    {
+      property: 'twitter:title',
+      content: detail.value?.metaTitle,
+    },
+    {
+      property: 'twitter:description',
+      content: detail.value?.metaDescribe,
+    },
+    {
+      property: 'twitter:site',
+      content: `${ConstKeys.DOMAINPRO}/blog/${slug}`,
+    },
+    {
+      property: 'twitter:image',
+      content: detail.value?.thumbnailUrl,
+    },
+    {
+      property: 'twitter:card',
+      content: 'summary_large_image',
+    },
+  ],
+  script: [
+    // JSON-LD
+    {
+      type: 'application/ld+json',
+      children: JSON.stringify({
+        datePublished: detail.value?.createTime,
+        dateModified: detail.value?.updateTime,
+      }),
+    },
+  ],
+  link: [
+    {
+      rel: 'canonical',
+      href: `${ConstKeys.DOMAINPRO}/blog/${slug}`,
+    },
+  ],
+})
 
-async function getVideoOrBlogsDetail() {
-  const res = await getBlogsDetailApi({
-    slug,
-  })
-  detail.value = res
+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)
+  }
 }
-getVideoOrBlogsDetail()
 </script>
 
 <template>
   <div class="blog-detail">
     <div class="bg-#F3F4FB ">
       <div class="pt-175px pb-110px w-1200-auto flex px-60px">
-        <img :src="detail.thumbnailUrl" alt="" srcset="" class="w-410px h-256px b-rd-10px object-cover mr-40px">
+        <img :src="detail?.thumbnailUrl" :alt="detail?.thumbnailAlt" srcset="" class="w-410px h-256px b-rd-10px object-cover mr-40px">
         <div class="flex-1 text-left">
-          <div class="b-rd-400px left-10px text-center w-138px h-32px lh-32px bg-#f9fafd text-#9B6CFF text-14px mb-20px">
+          <div class="b-rd-400px left-10px text-center w-138px h-32px lh-32px bg-#fff/50 backdrop-blur-20px b-1px b-solid b-#fff/60 text-#9B6CFF text-14px mb-20px">
             {{ detail.category_dictText }}
           </div>
           <h1
             class="!mb-20px fw-800 text-40px ls-2 text-#333 line-clamp-2 lh-50px custom-title-font"
           >
-            <!-- {{ detail.contentTitle }} -->
-            EJET Spark Blog Title Trend Report about Catalog
+            {{ detail.contentTitle }}
           </h1>
           <div class="text-16px text-#999 lh-24px">
-            <!-- {{ detail.contentSubhead }} -->
-            EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, spark the trend, ignate sales. EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, spark the trend, ignate sales.
+            {{ detail.contentSubhead }}
           </div>
         </div>
       </div>
     </div>
     <div class="w-1200-auto flex pt-30px">
       <div class="w-840px mr-60px">
-        <el-segmented v-model="tabValue" :options="options">
-          <template #default="scope">
-            <div>
-              <div>{{ scope.item.label }}</div>
-            </div>
-          </template>
-        </el-segmented>
+        <div v-if="isHasCatalogue">
+          <el-segmented v-model="tabValue" :options="options">
+            <template #default="scope">
+              <div>
+                <div>{{ scope.item.label }}</div>
+              </div>
+            </template>
+          </el-segmented>
+        </div>
         <div v-show="tabValue === 'blog'" class="mt-30px content-detail custom-html" v-html="detail.content" />
         <div v-show="tabValue === 'catalog'" class="mt-30px">
           <iframe
-            src="http://47.99.151.233:9006/js/baozhen.pdf#view=FitH&toolbar=0&scrollbar=0&navpanes=0"
+            :src="`${detail?.relatedCatalogue?.viewPdf}#view=FitH&toolbar=0&scrollbar=0&navpanes=0`"
             allowfullscreen
             width="100%"
-            height="1000px"
+            height="1200px"
             style="border: none"
           >
             您的浏览器不支持iframe，请使用现代浏览器查看PDF。
@@ -84,17 +162,17 @@ getVideoOrBlogsDetail()
         </div>
       </div>
       <div class="flex-1">
-        <div class="pos-relative mb-40px">
-          <img :src="relatedCatalog.thumbnailUrl" alt="" srcset="" class="w-375px h-240px b-rd-10px object-cover">
+        <div v-if="isHasCatalogue" class="pos-relative mb-40px">
+          <img :src="detail?.relatedCatalogue?.coverImg" :alt="detail?.relatedCatalogue?.coverAlt" srcset="" class="w-375px h-240px b-rd-10px object-cover">
           <h4
             class="!mb-15px !mt-30px fw-800 text-24px text-#333 line-clamp-2"
           >
-            {{ relatedCatalog.contentTitle }}
+            {{ detail?.relatedCatalogue?.title }}
           </h4>
           <div class="text-14px text-#999 lh-22px line-clamp-2 mb-20px">
-            {{ relatedCatalog.contentSubhead }}
+            {{ detail?.relatedCatalogue?.subhead }}
           </div>
-          <el-button class="!bg-#9B6CFF !text-#fff !b-#9B6CFF !b-rd-380px text-14px fw-bold !h-32px px-20px">
+          <el-button class="!bg-#9B6CFF !text-#fff !b-#9B6CFF !b-rd-380px text-14px fw-bold !h-32px px-20px" @click="clickLoginAndDownload(detail?.relatedCatalogue)">
             Download Catalog
           </el-button>
         </div>