package.json

@@ -14,6 +14,7 @@
     "vuex": "^4.0.2"
   },
   "devDependencies": {
+    "@types/node": "^17.0.24",
     "@vitejs/plugin-vue": "^2.3.0",
     "typescript": "^4.5.4",
     "vite": "^2.9.0",

src/page/home/Goods.vue

@@ -0,0 +1,95 @@
+<!--
+ * @description: 
+ * @Author: uray(1109489444@qq.com)
+ * @date: 2022-04-14 15:49:03
+ * @lastEditors: uray(1109489444@qq.com)
+ * @lastEditTime: 2022-04-14 16:31:11
+ * @FilePath: \toy_box_website\src\page\home\Goods.vue
+-->
+
+<template>
+    <div class="goods">
+        <div class="item" v-for="(item, index) in showGoods" :key="index">
+            <img :src="item.imgSrc" alt="" />
+            <span class="name">{{ item.name }}}</span>
+            <span class="price">￥{{ item.price.toFixed(2) }}</span>
+        </div>
+
+        <span class="noneTip" v-if="showGoods.length == 0">没有商品哦</span>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+import store from "../../store";
+
+export default defineComponent({
+    name: "Goods",
+    data() {
+        return {};
+    },
+    computed: {
+        /**
+         * 过滤显示的商品数据
+         */
+        showGoods() {
+            return store.state.allGoods.filter((item) => item.name.indexOf(store.state.searchGoodsName) != -1);
+        },
+    },
+    methods: {},
+});
+</script>
+
+<style lang="less" scoped>
+.goods {
+    // height: calc(~"100vh - 400px");
+    display: flex;
+    align-self: center;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 1400px;
+    flex-wrap: wrap;
+    margin-top: 30px;
+
+    .item {
+        width: 225px;
+        height: 240px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        background-color: #fff;
+        margin-right: 20px;
+        margin-bottom: 20px;
+
+        .price {
+            color: #ff6c4f;
+            margin-left: 10px;
+        }
+        .name {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            display: -webkit-box;
+            // 超过两行就显示。。。
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+
+            margin: 10px;
+        }
+
+        img {
+            height: 146px;
+            align-self: center;
+        }
+
+        &:hover {
+            cursor: pointer;
+            box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
+        }
+    }
+
+    .noneTip {
+        font-size: 20px;
+    }
+}
+</style>

src/page/home/Head.vue

@@ -3,10 +3,10 @@
  * @Author: uray(1109489444@qq.com)
  * @date: 2022-04-14 14:33:39
  * @lastEditors: uray(1109489444@qq.com)
- * @lastEditTime: 2022-04-14 15:04:55
+ * @lastEditTime: 2022-04-14 16:03:24
  * @FilePath: \toy_box_website\src\page\home\Head.vue
 -->
-<template class="head">
+<template>
     <div class="head">
         <img class="logo" src="/src/assets/logo.png" />
         <span class="item">商店</span>
@@ -26,6 +26,7 @@
 
 <script lang="ts">
 import { defineComponent } from "@vue/runtime-core";
+import store from "../../store";
 
 export default defineComponent({
     name: "Head",
@@ -41,6 +42,8 @@ export default defineComponent({
         onInputChange(e: { target: { value: string } }) {
             console.log(e.target.value);
             this.inputStr = e.target.value;
+
+            store.commit("setSearchGoodsName", this.inputStr);
         },
 
         /**
@@ -62,6 +65,7 @@ export default defineComponent({
     height: 60px;
     // border: solid 1px red;
     background-color: #0f0f0f;
+    width: 100%;
 
     .logo {
         width: 253px;

src/page/home/Tabs.vue

@@ -3,7 +3,7 @@
  * @Author: uray(1109489444@qq.com)
  * @date: 2022-04-14 14:33:39
  * @lastEditors: uray(1109489444@qq.com)
- * @lastEditTime: 2022-04-14 15:25:43
+ * @lastEditTime: 2022-04-14 16:03:38
  * @FilePath: \toy_box_website\src\page\home\Tabs.vue
 -->
 <template>
@@ -29,6 +29,7 @@ export default defineComponent({
     align-items: center;
     justify-content: center;
     height: 420px;
+    width: 100%;
     background: url("/src/assets/poster.png") no-repeat;
     background-size: 100vw, 420px;
 }

src/page/home/index.vue

@@ -3,18 +3,22 @@
  * @Author: uray(1109489444@qq.com)
  * @date: 2022-04-13 18:00:09
  * @lastEditors: uray(1109489444@qq.com)
- * @lastEditTime: 2022-04-14 15:18:08
+ * @lastEditTime: 2022-04-14 16:04:16
  * @FilePath: \toy_box_website\src\page\home\index.vue
 -->
 
 <template>
-    <HeadVue />
-    <TabsVue />
-    <div class="goods"></div>
+    <div class="home">
+        <HeadVue />
+        <TabsVue />
+        <GoodsVue />
+    </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "@vue/runtime-core";
+import store, { IGoods } from "../../store";
+import GoodsVue from "./Goods.vue";
 import HeadVue from "./Head.vue";
 import TabsVue from "./Tabs.vue";
 
@@ -23,14 +27,75 @@ export default defineComponent({
     components: {
         HeadVue,
         TabsVue,
+        GoodsVue,
+    },
+
+    mounted() {
+        const goods = [
+            {
+                name: "【元气福袋】超值盲盒大礼包+随机礼品（价值175~288）",
+                price: 99,
+                imgSrc: "https://static.airmart.top/mall/6248329b36865f004fc7b6cd.png",
+            },
+            {
+                name: "【元气福袋】超值！正版热血动漫礼包 扭蛋 盒蛋 景品（价值240~380）",
+                price: 199,
+                imgSrc: "https://static.airmart.top/mall/624832db36865f004fc7b6ce.png",
+            },
+            {
+                name: "【万代授权】UR 迪迦奥特曼 迪加 火花棱镜神光棒 25周年纪念现货 ",
+                price: 809,
+                imgSrc: "https://static.airmart.top/mall/61f2532b871a2500503c1e83.png",
+            },
+            {
+                name: "HGUC 机动战士高达 逆袭的夏亚 MSN-04II 夜莺",
+                price: 479,
+                imgSrc: "https://static.airmart.top/mall/61d577a71a5ae600511a3c8a.png",
+            },
+            {
+                name: "迪士尼 星黛露 发饰",
+                price: 119,
+                imgSrc: "https://static.airmart.top/mall/622c75232bcd8900631850bd.png",
+            },
+            {
+                name: "万代模型 Figure-rise Standard 星野文乃 高达创战者",
+                price: 166,
+                imgSrc: "https://static.airmart.top/mall/623d796a2b212500776ace9a.png",
+            },
+            {
+                name: "HotToys 蝙蝠侠黑暗骑士 COSBABY 迷你人偶 钥匙扣挂件（随机）",
+                price: 89,
+                imgSrc: "https://static.airmart.top/mall/623991bb61bab600782a3e5e.png",
+            },
+            {
+                name: "米哈游/崩坏3】女武神武器金属挂件钥匙扣",
+                price: 59,
+                imgSrc: "https://static.airmart.top/mall/61d815f5d2314e00577b1b4f.png",
+            },
+            {
+                name: "【米哈游/崩坏3】德丽莎沙雕亚克力挂件(款式随机）",
+                price: 49,
+                imgSrc: "https://static.airmart.top/mall/61d80f6c1a5ae600511a3cd3.png",
+            },
+            {
+                name: "【米哈游/崩坏3】火星新春表情包PVC贴纸包",
+                price: 49,
+                imgSrc: "https://static.airmart.top/mall/61d80f0ad83c0b004f405a37.png",
+            },
+        ] as IGoods[];
+        store.commit("setGoods", goods);
     },
 });
 </script>
 
 <style lang="less" scoped>
-.goods {
-    height: calc(~"100vh - 400px");
+.home {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100vw;
+    height: 100vh;
+
     background-color: #f5f5f5;
-    border: solid 1px blue;
 }
 </style>

src/store/index.ts

@@ -3,24 +3,44 @@
  * @Author: uray(1109489444@qq.com)
  * @date: 2022-04-13 17:03:49
  * @lastEditors: uray(1109489444@qq.com)
- * @lastEditTime: 2022-04-13 17:08:36
+ * @lastEditTime: 2022-04-14 15:52:59
  * @FilePath: \toy_box_website\src\store\index.ts
  */
 import { createStore } from "vuex";
 
+export interface IGoods {
+    name: string;
+    price: number;
+    imgSrc: string;
+}
 interface IState {
-    appName: string;
+    allGoods: IGoods[];
+    searchGoodsName: string;
 }
 // 创建一个新的 store 实例
 const store = createStore({
     state() {
         return {
-            appName: "欧气潮玩",
+            allGoods: [],
+            searchGoodsName: "", // 搜索的商品名称
         };
     },
     mutations: {
-        reName(state: IState, newName: string) {
-            state.appName = newName;
+        /**
+         * 设置新的数据源
+         * @param state
+         * @param newGoods
+         */
+        setGoods(state: IState, newGoods) {
+            state.allGoods = newGoods;
+        },
+        /**
+         * 设置新的搜索名字
+         * @param state
+         * @param newName
+         */
+        setSearchGoodsName(state: IState, newName) {
+            state.searchGoodsName = newName;
         },
     },
 });

yarn.lock

@@ -39,6 +39,11 @@
   resolved "https://registry.npmmirror.com/@emmetio/scanner/-/scanner-1.0.0.tgz#065b2af6233fe7474d44823e3deb89724af42b5f"
   integrity sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==
 
+"@types/node@^17.0.24":
+  version "17.0.24"
+  resolved "https://registry.npmmirror.com/@types/node/-/node-17.0.24.tgz#20ba1bf69c1b4ab405c7a01e950c4f446b05029f"
+  integrity sha512-aveCYRQbgTH9Pssp1voEP7HiuWlD2jW2BO56w+bVrJn04i61yh6mRfoKO6hEYQD9vF+W8Chkwc6j1M36uPkx4g==
+
 "@vitejs/plugin-vue@^2.3.0":
   version "2.3.1"
   resolved "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-2.3.1.tgz#5f286b8d3515381c6d5c8fa8eee5e6335f727e14"