From 80476fae71f08bf4408c7509eff254031a4eeac6 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Wed, 24 Aug 2022 18:47:09 +0800 Subject: [PATCH] 路由修正,常量提取 --- src/components/mini/box-new-article.vue | 132 +++++++++++++++++++++++++++++++++++++------ 1 files changed, 113 insertions(+), 19 deletions(-) diff --git a/src/components/mini/box-new-article.vue b/src/components/mini/box-new-article.vue index 0d9e24b..af47074 100644 --- a/src/components/mini/box-new-article.vue +++ b/src/components/mini/box-new-article.vue @@ -3,40 +3,67 @@ <div class="recent-post-item"> <div class="miniTag" v-if="isTop==1">置顶</div> <div class="post_cover left_radius" v-if="index%2==0"> - <router-link :to="{path:'/mdDetail',query:{id:id}}" :title="title"> + <a @click="routerJump(id,articleFileType,typeId)" :title="title" class="article-title"> <div class="block left_radius"></div> <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title"> - </router-link> + </a> </div> <div class="post_cover right_radius" v-else> - <router-link :to="{path:'/mdDetail',query:{id:id}}" :title="title"> + <a @click="routerJump(id,articleFileType,typeId)" :title="title" class="article-title"> <div class="block right_radius"></div> <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title"> - <!-- <img class="post_bg" src="https://unpkg.zhimg.com/ahzo@1.0.3/blogpic/1.jpg" onerror="this.onerror=null,this.src="/img/404.jpg"" :alt="title"> --> - </router-link> + </a> </div> <div class="recent-post-info"> - <router-link :to="{path:'/mdDetail',query:{id:id}}" class="article-title"> + + <a @click="routerJump(id,articleFileType,typeId)" :title="title" class="article-title"> <a-icon type="lock" style="color:rgba(0,0,0,.25)" v-if="authStatus==3" /> <a-icon type="stop" style="color:rgba(0,0,0,.25)" v-if="authStatus==2" /> {{title}} - </router-link> - <!-- <a class="article-title" href="/mdDetail" :title="title"> {{title}}</a> --> + <a-badge :count="1" dot v-if="isAnyUpdate==1" title="最近有更新"></a-badge> + </a> + <div class="article-meta-wrap" style="display: flex;"> <span class="post-meta-date"> <a-icon type="calendar" /> <span class="article-meta-label"></span> - <time datetime="2022-01-13T06:25:00.000Z" title=" 2022-01-13 14:25:00">{{publishDate}}</time> + <span class="article-meta__categories"> {{publishDate}} </span> </span> - <span class="article-meta__separator" style="margin: 0px 3px ;"> | </span> + <span class="article-meta__separator" style="margin: 0px 5px ;">|</span> + <span class="article-meta"> <a-icon type="book" /> - <router-link :to="{path:'/articleList',query:{typeId:articleTypeId}}" - class="article-meta__categories"> + <a @click="routerToTypeList(articleTypeId)" class="article-meta__categories"> {{articleTypeName}} - </router-link> + </a> + + <span v-if="jumpURL !=null && jumpURL!=''"> + <span class="article-meta__separator" style="margin: 0px 3px 5px 0px ;">|</span> + <span class="post-meta-date"> + <a-icon type="share-alt" /> + <a :href="jumpURL" target="_blank" class="no-underline"> 外链 </a> + </span> + </span> + <span v-else-if="articleFileType==fileType.fileTypeTalking_9"> + <span> + <span class="article-meta__separator" style="margin: 0px 3px 5px 0px ;">|</span> + <span class="post-meta-date"> + <a-icon type="thunderbolt" />碎碎念 + </span> + </span> + </span> + + <span v-if="articleFileType==fileType.fileTypeVideo_3"> + <span class="article-meta__separator" style="margin: 0px 3px ;"> | </span> + <span class="post-meta-date"> + <a-icon type="video-camera" /> + <a @click="routerToPlatform()"> + 视频 + </a> + </span> + </span> <!-- <a class="article-meta__categories" href="#"> {{tag}}</a> --> </span> </div> @@ -49,10 +76,64 @@ </template> <script> + import { + NotificationOutlined + } from '@ant-design/icons-vue'; + + import myConstant from "../../config/myConstant.js" + + export default { + components: { + NotificationOutlined + }, + data() { + return { + fileType: myConstant.fileType, + img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/1.jpg\"", + } + }, + methods: { + routerJump(id, articleFileType, typeId) { + let routerName = "mdDetail"; + if (articleFileType == this.fileType.fileTypeVideo_3) { + routerName = "videoDetail"; + } + + this.$router.push({ + name: routerName, + query: { + id: id, + articleFileType: articleFileType, + typeId: typeId + }, + params: { + id: id, + articleFileType: articleFileType, + typeId: typeId + } + }) + }, + routerToPlatform() { + this.$router.push({ + name: "platformGroup" + }) + }, + routerToTypeList(typeId) { + this.$router.push({ + name: "articleList", + query: { + typeId: typeId, + } + }) + } + }, props: { "index": { default: 0, + }, + "typeId": { + default: "", }, "id": { default: 0, @@ -78,13 +159,20 @@ "publishDate": { default: "", }, + "updateDate": { + default: "", + }, "coverFileURL": { default: "", - } - }, - data() { - return { - img404: "this.onerror='';this.src=\"https://unpkg.zhimg.com/ahzo@1.0.3/blogpic/1.jpg\"", + }, + "isAnyUpdate": { + default: "", + }, + "articleFileType": { + default: 1, + }, + "jumpURL": { + default: "", } } } @@ -105,6 +193,10 @@ a { position: initial; + } + + img { + user-select: none; } } @@ -304,6 +396,7 @@ order: 3; color: #858585; font-size: 90%; + flex-wrap: wrap; .article-meta-label { padding-right: 0.2rem; @@ -406,9 +499,10 @@ line-height: 1.7; color: #999; display: -webkit-container; - -webkit-line-clamp: 3; + -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; + min-height: 20px; } } -- Gitblit v1.9.1