save

package.json

@@ -16,6 +16,7 @@
     "lodash-es": "^4.17.21",
     "mitt": "3.0.0",
     "mobile-select": "1.1.2",
+    "mockjs": "^1.1.0",
     "pinia": "^2.1.7",
     "pinyin": "2.11.1",
     "vue": "3.4.21",

pnpm-lock.yaml

@@ -29,6 +29,9 @@ dependencies:
   mobile-select:
     specifier: 1.1.2
     version: 1.1.2
+  mockjs:
+    specifier: ^1.1.0
+    version: 1.1.0
   pinia:
     specifier: ^2.1.7
     version: 2.1.7(vue@3.4.21)
@@ -2024,6 +2027,13 @@ packages:
     resolution: {integrity: sha512-FrVAun32DsxLUZziTE1LPlXC72kD13f8N8tqgf7zVWRIOIIJakNxVs8mR2KMzm3QJAYq5+EJ4ji98pHdWJ7ekw==}
     dev: false
 
+  /mockjs@1.1.0:
+    resolution: {integrity: sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==}
+    hasBin: true
+    dependencies:
+      commander: 1.1.1
+    dev: false
+
   /mrmime@2.0.0:
     resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
     engines: {node: '>=10'}

src/pages/home/AlbumDetail.vue

@@ -16,7 +16,7 @@
         </SlideItem>
       </SlideHorizontal>
 
-      <div class="indicator-bar">
+      <div class="indicator-bar" v-if="state.detail.note_card?.image_list?.length > 1">
         <div class="indicator"
              :class="[i <= state.index+1 && 'active']"
              v-for="i in state.detail.note_card?.image_list?.length"></div>
@@ -35,21 +35,21 @@
         <div class="desc">
           {{ state.detail.note_card?.display_title }}
         </div>
-        <div class="date">03:11</div>
+        <div class="date">{{ state.detail.note_card.createTime }}</div>
       </div>
 
       <div class="card comments">
         <header>
-          <span class="l">评论 {{ state.detail.note_card?.interact_info?.liked_count }}</span>
+          <span class="l">评论 {{ state.detail.note_card.comment_list.length }}</span>
           <div class="r">
             <span>查看全部</span>
             <Icon class="arrow" icon="mingcute:right-line"/>
           </div>
         </header>
-        <div class="comment" v-for="i in 2">
+        <div class="comment" v-for="i in state.detail.note_card.comment_list.slice(0,2)">
           <img src="https://cdn.seovx.com/?mom=302" alt="" class="avatar">
           <span>
-               花***栽：东西不错质量也很好 性价比很高 良心商家就冲这图必须给好评
+               {{ i.name }}：{{ i.text }}
             </span>
         </div>
       </div>
@@ -66,15 +66,15 @@
         </div>
         <div class="option">
           <Icon icon="mage:message-dots-round" class="icon"/>
-          <div class="text">178</div>
+          <div class="text">{{ state.detail.note_card.comment_list.length }}</div>
         </div>
         <div class="option">
           <Icon icon="mage:star"/>
-          <div class="text">82</div>
+          <div class="text">{{ state.detail.note_card?.interact_info?.collect_count }}</div>
         </div>
         <div class="option">
           <Icon icon="ph:share-fat-light"/>
-          <div class="text">23</div>
+          <div class="text">{{ state.detail.note_card?.interact_info?.share_count }}</div>
         </div>
       </div>
     </div>
@@ -84,12 +84,13 @@
 <script setup>
 import SlideHorizontal from "@/components/slide/SlideHorizontal.vue";
 import SlideItem from "@/components/slide/SlideItem.vue";
-import {onMounted, reactive, ref} from "vue";
+import {onMounted, reactive} from "vue";
-import goods from "@/assets/data/goods";
 import {useNav} from "@/utils/hooks/useNav";
 import {Icon} from "@iconify/vue";
 import {useBaseStore} from "@/store/pinia";
 import {_checkImgUrl} from "@/utils";
+import Mock from 'mockjs'
+import {cloneDeep} from "lodash-es";
 
 const nav = useNav()
 const store = useBaseStore()
@@ -106,15 +107,27 @@ const state = reactive({
       "cover": {},
       "image_list": [],
       "display_title": "",
-      "user": {}
+      "user": {},
+      comment_list: [],
+      createTime: ''
     }
   },
   index: 0,
 })
 
 onMounted(() => {
-  console.log('s', store.routeData)
+  state.detail = cloneDeep(store.routeData)
-  state.detail = store.routeData
+  let data = Mock.mock({
+    'comment_list|3-50': [{
+      name: '@cname',
+      text: '@cparagraph(3)'
+    }]
+  })
+  state.detail.note_card.comment_list = data.comment_list
+  state.detail.note_card.createTime = Mock.Random.date('MM-dd')
+  state.detail.note_card.interact_info.collect_count = Mock.Random.integer(60, 3000)
+  state.detail.note_card.interact_info.share_count = Mock.Random.integer(60, 3000)
+  console.log('sta', state.detail)
 })
 </script>
 

src/pages/home/slide/Community.vue

@@ -21,7 +21,7 @@
                   <div class="name">{{ item.note_card?.user?.nickname }}</div>
                 </div>
                 <div class="star">
-                  <img src="@/assets/img/icon/components/like-gray-small.png" alt="" class="love-image">
+                  <Icon icon="solar:heart-linear"/>
                   <div class="num">{{ item.note_card?.interact_info?.liked_count }}</div>
                 </div>
               </div>
@@ -39,6 +39,7 @@ import {_checkImgUrl, _notice} from "@/utils";
 import Scroll from "@/components/Scroll.vue";
 import {recommendedPost} from "@/api/user";
 import {useNav} from "@/utils/hooks/useNav";
+import {Icon} from "@iconify/vue";
 
 const nav = useNav()
 const props = defineProps({
@@ -63,7 +64,7 @@ watch(() => props.active, n => {
 })
 
 function loadData() {
-  console.log('loadData')
+  state.pageNo++
   getData()
 }
 
@@ -126,7 +127,7 @@ async function getData(loading = true, refresh = false) {
         padding: 10rem;
 
         .title {
-          font-size: 16rem;
+          font-size: 15rem;
           margin-bottom: 8rem;
         }
 
@@ -148,10 +149,11 @@ async function getData(loading = true, refresh = false) {
 
           .star {
             display: flex;
+            align-items: center;
+            gap: 3rem;
 
-            img {
+            svg {
-              width: 15rem;
+              font-size: 16rem;
-              margin-right: 5rem;
             }
 
             .num {

src/pages/me/Me.vue

@@ -48,7 +48,7 @@
                     @click="previewImg = _checkImgUrl(userinfo.cover_url[0].url_list[0])">
               <div class="info">
                 <img :src="_checkImgUrl(userinfo.avatar_168x168.url_list[0])" class="avatar"
-                     @click="previewImg = _checkImgUrl(userinfo.avatar_300x300.url_list[0])">
+                     @click.stop="previewImg = _checkImgUrl(userinfo.avatar_300x300.url_list[0])">
                 <div class="right">
                   <p class="name">{{ userinfo.nickname }}</p>
                   <div class="number mb1r">

vite.config.js

@@ -53,6 +53,11 @@ export default defineConfig({
           var: 'VueDemi',
           path: 'https://lib.baomitu.com/vue-demi/0.14.7/index.iife.min.js',
         },
+        {
+          name: 'mockjs',
+          var: 'Mock',
+          path: 'https://lib.baomitu.com/Mock.js/1.0.1-beta3/mock-min.js',
+        },
         {
           name: 'axios',
           var: 'axios',