完善细节

src/assets/data/goods.js

@@ -1,9 +1,52 @@
 export default {
-  goods: [
+  list: [
     {
-      "name": "适用苹果13/14手机壳iPhone12ProMax气囊11防摔XR新款7/8Plus透明se3保护Xs套男X镜头高级感女款S硅胶7全包2",
+      "name": "小米电视6 65\" OLED 65英寸",
-      "cover": "0.jpg",
+      "cover": new URL('../img/goods/g6-0.jpg', import.meta.url).href,
-      price: 5.74
+      price: 6699,
-    }
+      isLowPrice: false,
+      discount: '',
+      sold: 863,
+    },
+    {
+      "name": "红白撞色条纹软糯针织上衣女2022年秋季新款甜美减龄短款毛衣开衫",
+      "cover": new URL('../img/goods/g1-0.jpg', import.meta.url).href,
+      isLowPrice: true,
+      discount: '满4减3',
+      sold: 134,
+      price: 39.9,
+    },
+    {
+      "name": "森马t恤男2023男士纯棉上衣白色情侣装凉感短袖打底衫纯色体恤潮",
+      "cover": new URL('../img/goods/g2-0.webp', import.meta.url).href,
+      price: 49.99,
+      isLowPrice: false,
+      discount: '满20减5',
+      sold: 3314,
+    },
+    {
+      "name": "ins潮牌长袖t恤男宽松纯色内搭上衣潮牌百搭秋冬季潮流帅气打底衫",
+      "cover": new URL('../img/goods/g3-0.jpg', import.meta.url).href,
+      price: 22.90,
+      isLowPrice: true,
+      discount: '满10减3',
+      sold: 129,
+    },
+    {
+      "name": "Redmi K60狠快狠强，狠旗舰！2023，第一台梦幻手机",
+      "cover": new URL('../img/goods/g4-0.png', import.meta.url).href,
+      price: 2999,
+      isLowPrice: true,
+      discount: '',
+      sold: 967,
+    },
+    {
+      "name": "小米笔记本Pro X 14",
+      "cover": new URL('../img/goods/g5-0.jpg', import.meta.url).href,
+      price: 6999,
+      isLowPrice: false,
+      discount: '',
+      sold: 473,
+    },
   ]
 }

src/pages/home/index.vue

@@ -115,7 +115,7 @@ import FollowSetting2 from "@/pages/home/components/FollowSetting2.vue";
 import ShareToFriend from "@/pages/home/components/ShareToFriend.vue";
 import UserPanel from "@/components/UserPanel.vue";
 import Community from "@/pages/home/slide/Community.vue";
-import Shop from "@/pages/home/slide/Shop.vue";
+import Shop from "@/pages/shop/Shop.vue";
 import Slide0 from "@/pages/home/slide/Slide0.vue";
 import Slide2 from "@/pages/home/slide/Slide2.vue";
 import Slide4 from "@/pages/home/slide/Slide4.vue";
@@ -130,7 +130,7 @@ const bodyWidth = computed(() => store.state.bodyWidth)
 
 const state = reactive({
   baseIndex: 0,
-  navIndex: 4,
+  navIndex: 3,
   test: '',
   recommendList: [
     // {

src/pages/shop/GoodsDetail.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="goods-detail">
+    <header>
+
+    </header>
+    <div class="imgs">
+      <SlideHorizontal>
+        <SlideItem>
+
+        </SlideItem>
+      </SlideHorizontal>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import SlideHorizontal from "@/components/slide/SlideHorizontal.vue";
+import SlideItem from "@/components/slide/SlideVerticalInfinite.vue";
+import {reactive} from "vue";
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: () => ''
+  }
+})
+
+const state = reactive({
+  detail: {
+    id: ""
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

src/pages/shop/Shop.vue

@@ -39,23 +39,24 @@
            :class="{fixed:state.fixed}"
            transition-duration="0s"
            item-selector=".goods">
-        <div v-masonry-tile class="goods" v-for="(item, index) in  state.list">
+        <div v-masonry-tile class="goods"
+             @click="nav('/shop/detail')"
+             v-for="(item, index) in  state.list">
           <div class="card">
-            <!--          <img class="poster" v-lazy="Utils.$imgPreview(item.src)"/>-->
+            <img class="poster" :src="Utils.$imgPreview(item.cover)"/>
-            <img class="poster" :src="Utils.$imgPreview(item.src)"/>
             <div class="bottom">
               <div class="desc">
-                2022新款Apple/苹果iPhone 14 Plus手机6.7
+                {{ item.name }}
               </div>
-              <div class="discounts">满4减3</div>
+              <div class="discounts" v-if="item.discount">{{ item.discount }}</div>
               <div class="info">
                 <div class="price">
                   ￥
-                  <div class="big">6099</div>
+                  <div class="big">{{ item.price }}</div>
                 </div>
-                <div class="num">已售223件</div>
+                <div class="num">已售{{ item.sold }}件</div>
               </div>
-              <div class="low">
+              <div class="low" v-if="item.isLowPrice">
                 近30天低价
               </div>
             </div>
@@ -70,9 +71,12 @@
 import {onMounted, reactive} from "vue";
 import Utils from "@/utils";
 import Scroll from "@/components/Scroll.vue";
+import goods from "@/assets/data/goods";
+import {useNav} from "@/utils/hooks/useNav";
 
+const nav = useNav()
 const state = reactive({
-  list: [],
+  list: goods.list,
   listEl: null,
   fixed: false
 })
@@ -84,7 +88,7 @@ function loadData() {
       src: new URL(`../../../assets/img/poster/${i}.jpg`, import.meta.url).href,
       author: new URL(`../../../assets/img/avatar.png`, import.meta.url).href,
     }
-    state.list.push(temp)
+    // state.list.push(temp)
   }
 }
 
@@ -94,7 +98,7 @@ onMounted(() => {
       src: new URL(`../../../assets/img/poster/${i}.jpg`, import.meta.url).href,
       author: new URL(`../../../assets/img/avatar.png`, import.meta.url).href,
     }
-    state.list.push(temp)
+    // state.list.push(temp)
   }
 })
 </script>
@@ -255,6 +259,10 @@ onMounted(() => {
           color: black;
           font-size: 16rem;
           margin-bottom: 8rem;
+          @lh: 18rem;
+          line-height: @lh;
+          height: @lh * 2;
+          overflow: hidden;
         }
 
         .discounts {

src/pages/test/Test.vue

@@ -25,7 +25,7 @@ import slideHooks from '../home/index.vue'
 import TestSwiperJs from "./TestSwiperJs";
 import {mat4} from "gl-matrix";
 import UserPanel from "@/components/UserPanel.vue";
-import Shop from "@/pages/home/slide/Shop.vue";
+import Shop from "@/pages/shop/Shop.vue";
 import Community from "@/pages/home/slide/Community.vue";
 
 export default {

src/router/routes.js

@@ -64,6 +64,7 @@ import VerificationCode from "../pages/login/VerificationCode";
 import RetrievePassword from "../pages/login/RetrievePassword";
 import Help from "../pages/login/Help";
 import Uploader from "../pages/me/Uploader";
+import GoodsDetail from "@/pages/shop/GoodsDetail.vue";
 
 const routes = [
   {path: '/', redirect: '/home'},
@@ -80,6 +81,8 @@ const routes = [
   {path: '/home/live', component: LivePage},
   {path: '/home/search', component: Search},
 
+  {path: '/shop/detail', component: GoodsDetail},
+
   {path: '/me', component: Me,},
   {path: '/me/edit-userinfo', component: EditUserInfo},
   {path: '/me/edit-userinfo-item', component: EditUserInfoItem},