save

1 year ago · 6cc69dec18
6 changed files with 51 additions and 20 deletions
--- a/package.json
+++ b/package.json
@ -16,6 +16,7 @@
				@@ -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",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -29,6 +29,9 @@ dependencies:
				@@ -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:
				@@ -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'}
--- a/src/pages/home/AlbumDetail.vue
+++ b/src/pages/home/AlbumDetail.vue
@ -16,7 +16,7 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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 goods from "@/assets/data/goods";
+import {onMounted, reactive} from "vue";
 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({
				@@ -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 = store.routeData
+  state.detail = cloneDeep(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>

--- a/src/pages/home/slide/Community.vue
+++ b/src/pages/home/slide/Community.vue
@ -21,7 +21,7 @@
				@@ -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";
				@@ -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 => {
				@@ -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) {
				@@ -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) {
				@@ -148,10 +149,11 @@ async function getData(loading = true, refresh = false) {

          .star {
            display: flex;
+            align-items: center;
+            gap: 3rem;

-            img {
-              width: 15rem;
-              margin-right: 5rem;
+            svg {
+              font-size: 16rem;
            }

            .num {
--- a/src/pages/me/Me.vue
+++ b/src/pages/me/Me.vue
@ -48,7 +48,7 @@
				@@ -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">
--- a/vite.config.js
+++ b/vite.config.js
@ -53,6 +53,11 @@ export default defineConfig({
				@@ -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',