Просмотр исходного кода

feat: 添加视图图标并优化文章组件的观看次数显示逻辑

EvilDragon 1 месяц назад
Родитель
Сommit
af077e1913

+ 6 - 3
packages/app/src/pages/home/components/article.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
 import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html.vue'
+import view from '@designer-hub/assets/src/libs/assets/view'
 
-defineProps({
+const props = defineProps({
   title: {
     type: String,
     default: '',
@@ -43,10 +44,12 @@ defineProps({
           {{ dayjs(createdAt).format('YYYY/MM/DD') }}
         </div>
       </div>
-      <div class="flex items-center">
+      <div class="flex items-center gap-1">
         <slot name="viewLeft"></slot>
+        <!-- <wd-icon name="view" size="18" color="rgba(0,0,0,.45)"></wd-icon> -->
+        <wd-img :src="view" width="18" height="18"></wd-img>
         <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal">
-          {{ viewNum }}
+          {{ viewNum || 0 }}
         </div>
       </div>
     </div>

+ 1 - 1
packages/app/src/pages/home/content/index.vue

@@ -43,7 +43,7 @@ onLoad(async (query: { id: string; type?: 'banner' }) => {
       :author="{ name: '筑巢荟' }"
       :content="data?.contentDetail"
       :createAt="data?.createTime"
-      :viewNum="data?.viewsCount"
+      :viewNum="data?.viewsCount || 0"
     >
       <template #avatar><wd-img width="28" height="28" :src="logo"></wd-img></template>
     </Article>

+ 4 - 0
packages/assets/src/assets/view.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M8.97219 6.33997C7.53797 6.33997 6.37093 7.50701 6.37093 8.94148C6.37093 10.3757 7.53797 11.5428 8.97219 11.5428C10.4064 11.5428 11.5735 10.3757 11.5735 8.94148C11.5735 7.50701 10.4064 6.33997 8.97219 6.33997ZM8.97219 10.5559C8.08198 10.5559 7.35776 9.8317 7.35776 8.94148C7.35776 8.05127 8.08198 7.3268 8.97219 7.3268C9.86241 7.3268 10.5866 8.05127 10.5866 8.94148C10.5866 9.8317 9.86243 10.5559 8.97219 10.5559Z" fill="black" fill-opacity="0.45"/>
+  <path d="M16.7445 8.73958C15.5786 6.13614 12.3825 4.31787 8.97219 4.31787C5.56188 4.31787 2.36578 6.13614 1.19994 8.73958L1.10959 8.94123L1.19994 9.14288C2.19496 11.3649 5.18412 13.6142 8.97219 13.6142C12.7603 13.6142 15.7494 11.3649 16.7445 9.14288L16.8348 8.94123L16.7445 8.73958ZM8.97219 12.6274C5.72115 12.6274 3.15046 10.8053 2.19736 8.94148C3.1413 7.10202 5.7086 5.3047 8.97219 5.3047C12.2358 5.3047 14.8031 7.10202 15.747 8.94148C14.7939 10.8053 12.2233 12.6274 8.97219 12.6274Z" fill="black" fill-opacity="0.45"/>
+</svg>

+ 2 - 0
packages/assets/src/libs/assets/view.ts

@@ -0,0 +1,2 @@
+import view from '../../assets/view.svg' 
+ export default view

+ 2 - 0
packages/assets/src/libs/assets/wechatChannelsGuide.ts

@@ -0,0 +1,2 @@
+import wechatChannelsGuide from '../../assets/wechat-channels-guide.png' 
+ export default wechatChannelsGuide