初始化

pages/detail/components/LikeArticle.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-affix class="lg:p-0 p-3" v-if="form" :offset="offset" @change="onAffix">
+    <el-button type="text" color="gray">
+      <div class="text-xl text-gray-600 ">你可能还喜欢</div>
+      <el-icon class="el-icon--right text-gray-600" color="#999999">
+        <ArrowRightBold/>
+      </el-icon>
+    </el-button>
+    <template v-for="(item,index) in list" :key="index">
+      <el-card shadow="hover" :body-style="{ padding: '0px' }" class="hover:bg-gray-50 cursor-pointer mt-3"
+               @click="openSpmUrl(`/detail`,item,item.articleId,true)">
+        <el-image :src="item.image" fit="fill" :lazy="true" class="w-full md:h-[150px] h-[199px] cursor-pointer"/>
+        <div class="flex-1 px-4 py-5 sm:p-6 !p-4">
+          <div class="text-gray-700 dark:text-white text-base font-semibold  flex items-center gap-1.5">
+            <span class="flex-1 text-xl cursor-pointer max-h-[57px] overflow-hidden">{{ item.title }}</span>
+          </div>
+          <div class="flex items-center gap-1.5 py-2 text-gray-500">
+            <el-avatar :src="item.avatar" :size="20"/>
+            <span>{{ item.author }} · {{ dayjs(item.createTime).format('MM-DD hh:mm') }}</span>
+          </div>
+        </div>
+      </el-card>
+    </template>
+  </el-affix>
+</template>
+<script setup lang="ts">
+import { ArrowRightBold } from '@element-plus/icons-vue'
+import {getIdBySpm, openSpmUrl} from "~/utils/common";
+import dayjs from "dayjs";
+import type {Article} from "~/api/cms/article/model";
+import {useServerRequest} from "~/composables/useServerRequest";
+import type {ApiResult, PageResult} from "~/api";
+
+const props = withDefaults(
+    defineProps<{
+      title?: string;
+      form?: Article;
+    }>(),
+    {}
+);
+
+const list = ref<Article[]>([]);
+const isAffix = ref<any>();
+const offset = ref(70)
+
+const onAffix = (e: any) => {
+  isAffix.value = e;
+}
+
+const {data: response} = await useServerRequest<ApiResult<PageResult<Article>>>('/cms/cms-article/page', {
+  params: {
+    categoryId: getIdBySpm(4),
+    limit: 3
+  }
+})
+if (response.value?.data) {
+  list.value = response.value.data.list;
+}
+
+</script>
+
+<style scoped lang="less">
+
+</style>