feat:#1 首页文章展示

terwer · Oct 9, 2022 · 2d414ac · 2d414ac
1 parent f403880
commit 2d414ac
Show file tree

Hide file tree

Showing 3 changed files with 146 additions and 12 deletions.
diff --git a/components/default/HomePostList.vue b/components/default/HomePostList.vue
@@ -1,25 +1,81 @@
 <template>
-  <div>
-    {{ data.msg }}
-
-    <h1>
-      <NuxtLink to="/post">
-        测试详情页面
-      </NuxtLink>
-    </h1>
+  <div id="postList">
+    <div v-if="postData.postList.length > 0">
+      <el-card v-for="post in postData.postList" :key="post.postid" class="post-item">
+        <el-row>
+          <el-col v-if="postData.keyword !== ''" class="s-keyword-dark" :spans="24">
+            关键字： {{ postData.keyword }}
+          </el-col>
+          <el-col
+              v-if="!isMobile && post.thumbnails.length > 0"
+              :xs="24"
+              :md="6"
+          >
+            <img :src="post.thumbnails[0]" class="image" alt="image"/>
+          </el-col>
+          <el-col :xs="24" :md="post.thumbnails.length > 0 ? 18 : 24">
+            <div class="post-list-title">
+              <nuxt-link :to="'/post/' + post.postid + '.html'">
+                <h2>{{ post.title === "" ? "暂无标题" : post.title }}</h2>
+              </nuxt-link>
+              <input type="hidden" :value="post.postid"/>
+            </div>
+          </el-col>
+          <el-col :span="24">
+            <div class="bottom clearfix">
+              <div class="page">
+                {{ post.shortDesc === "" ? "暂无简介" : post.shortDesc }}
+              </div>
+            </div>
+            <div>
+              <div class="article-ext">
+                <span class="article-ext-info">作者：Terwer</span>
+                <span class="article-ext-info">
+                  阅读数：0
+                </span>
+                <span class="article-ext-info">
+                  评论数：0
+                </span>
+              </div>
+              <div class="time">
+                发布于 {{ post.dateCreated || (new Date()).toISOString() }}
+              </div>
+              <nuxt-link :to="'/post/' + post.postid + '.html'">
+              <el-button type="text" class="read-more">查看全文</el-button>
+              </nuxt-link>
+            </div>
+          </el-col>
+        </el-row>
+      </el-card>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import logUtil from "~/lib/logUtil";
 import {SERVER_API_CONSTANTS} from "~/lib/constants/serverApiConstants";
+import {Post} from "~/lib/common/post";
+import {isMobile} from "~/lib/util";
+import {ElCard, ElRow, ElCol, ElButton} from "element-plus";
+
+const postData = ref({
+  isMobile: isMobile(),
+  keyword: "",
+  postList: <Post[]>[]
+})
 
 const route = useRoute()
 
 const homePostsUrl = route.query.t ? SERVER_API_CONSTANTS.SERVER_API_GET_RECENT_POSTS + "?t=" + route.query.t :
     SERVER_API_CONSTANTS.SERVER_API_GET_RECENT_POSTS
 const {data} = await useFetch(homePostsUrl)
-logUtil.logInfo(SERVER_API_CONSTANTS.SERVER_API_GET_RECENT_POSTS + " data=>", data.value)
+// @ts-ignore
+// postData.value.postList = data.value.data
+data.value.data.forEach((item: Post) => {
+  postData.value.postList.push(item)
+})
+// logUtil.logError(data.value.data.length)
+// logUtil.logInfo(SERVER_API_CONSTANTS.SERVER_API_GET_RECENT_POSTS + " data=>", data.value)
 
 // definePageMeta({
 //   layout: "custom",
@@ -32,6 +88,71 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss">
+.el-card__body {
+  padding: 0;
+}
+
+.time {
+  font-size: 13px;
+  color: #999;
+  line-height: 10px;
+  margin-top: 10px;
+}
+
+.post-item {
+  margin: 10px;
+  padding: 10px;
+}
+
+.bottom {
+  margin-top: 13px;
+  line-height: 12px;
+}
+
+.read-more {
+  padding: 0;
+  margin-top: 15px;
+  float: left;
+  font-weight: bold;
+  color: #212121 !important;
+}
+
+.read-more:hover {
+  color: #409eff !important;
+}
+
+.image {
+  width: 100%;
+  max-height: 150px;
+  display: block;
+  padding: 0 20px 0 0;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+.page {
+  line-height: 30px;
+  font-size: 14px;
+}
+
+.article-ext {
+  font-size: 14px;
 
+  .article-ext-info {
+    margin-right: 1.25rem;
+  }
+}
+
+.s-keyword-dark {
+  color: red;
+}
 </style>
diff --git a/lib/common/post.ts b/lib/common/post.ts
@@ -12,16 +12,20 @@ export class Post {
     mt_keywords: string
     link?: string
     permalink: string
-    shortDesc?:string
+    shortDesc?: string
     description: string
     mt_excerpt?: string
     wp_slug: string
     dateCreated: Date
     categories: Array<string>
     mt_text_more?: string
-    post_status?:string
+    post_status?: string
     isPublished: boolean
     wp_password: string
+    /**
+     * 缩略图
+     */
+    thumbnails?: string[]
 
     constructor() {
         this.postid = ""
@@ -35,5 +39,6 @@ export class Post {
         this.isPublished = true
         this.post_status = POST_STATUS_CONSTANTS.POST_STATUS_PUBLISH
         this.wp_password = ""
+        this.thumbnails = []
     }
 }
diff --git a/lib/util.ts b/lib/util.ts
@@ -5,6 +5,14 @@ export function inBrowser() {
     return typeof window !== 'undefined';
 }
 
+/**
+ * 是否移动端
+ */
+export function isMobile() {
+    const isMobile = inBrowser() ? document.body.clientWidth < 768 : false
+    return isMobile
+}
+
 /**
  * 获取url参数
  * @param sParam 参数