Главная Обзор Помощь
Регистрация Вход
uray
/
toy_box_website_2
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

feat: 基本完成页面

uray 4 лет назад
Родитель
eb2725beef
Сommit
4497c5bbd5
7 измененных файлов с 337 добавлено и 55 удалено
Единый вид Показать статистику Diff
  1. 3 3
      index.html
  2. BIN
      public/favicon.ico
  3. 221 5
      src/page/detail/index.vue
  4. 11 6
      src/page/home/Goods.vue
  5. 8 3
      src/page/home/Head.vue
  6. 83 33
      src/page/home/index.vue
  7. 11 5
      src/store/index.ts

+ 3 - 3
index.html
Просмотреть файл 

@@ -3,8 +3,8 @@
 
  * @Author: uray(1109489444@qq.com)
 
  * @Author: uray(1109489444@qq.com)
 
  * @date: 2022-04-12 17:58:56
 
  * @date: 2022-04-12 17:58:56
 
  * @lastEditors: uray(1109489444@qq.com)
 
  * @lastEditors: uray(1109489444@qq.com)
 
- * @lastEditTime: 2022-04-14 14:22:37
 
- * @FilePath: \toy_box_website\index.html
 
+ * @lastEditTime: 2022-04-15 10:56:55
 
+ * @FilePath: \toy_box_website_2\index.html
 
 -->
 
 -->
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
@@ -12,7 +12,7 @@
 
         <meta charset="UTF-8" />
 
         <meta charset="UTF-8" />
 
         <link rel="icon" href="/favicon.ico" />
 
         <link rel="icon" href="/favicon.ico" />
 
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-        <title>Vite App</title>
 
+        <title>欧气抽盒</title>
 
     </head>
 
     </head>
 
     <body style="margin: 0">
 
     <body style="margin: 0">
 
         <div id="app"></div>
 
         <div id="app"></div>

BIN
public/favicon.ico
Просмотреть файл


+ 221 - 5
src/page/detail/index.vue
Просмотреть файл 

@@ -3,25 +3,241 @@
 
  * @Author: uray(1109489444@qq.com)
 
  * @Author: uray(1109489444@qq.com)
 
  * @date: 2022-04-13 17:29:36
 
  * @date: 2022-04-13 17:29:36
 
  * @lastEditors: uray(1109489444@qq.com)
 
  * @lastEditors: uray(1109489444@qq.com)
 
- * @lastEditTime: 2022-04-14 09:47:50
 
- * @FilePath: \toy_box_website\src\page\detail\index.vue
 
+ * @lastEditTime: 2022-04-15 11:12:19
 
+ * @FilePath: \toy_box_website_2\src\page\detail\index.vue
 
 -->
 
 -->
 
 
 
 <template>
 
 <template>
 
-    <div class="detailPage" @click="$router.back()">新的页面, 点击返回</div>
 
+    <div class="detailPage">
 
+        <HeadVue />
 
+        <div class="bodyArea">
 
+            <div class="headArea">
 
+                <div class="posterBg">
 
+                    <img class="poster" :src="goods.imgSrc" />
 
+                </div>
 
+                <div class="buyBg">
 
+                    <span class="title">{{ goods.name }}</span>
 
+                    <div class="priceArea">
 
+                        <div style="display: flex">
 
+                            <span class="desc">价格</span>
 
+                            <span>￥{{ showPrice.toFixed(2) }}</span>
 
+                        </div>
 
+                        <div style="display: flex; margin-top: 20px">
 
+                            <span class="desc">数量</span>
 
+                            <div class="amountChoose">
 
+                                <div class="cut" @click="onCut">-</div>
 
+                                <div class="amount">{{ curAmount }}</div>
 
+                                <div class="add" @click="onAdd">+</div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+
 
+                    <div class="btnArea">
 
+                        <div class="btnCollect" @click="onBtnCollectClick">加入收藏</div>
 
+                        <div class="btnBuy" @click="onBtnBuyClick">立即购买</div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <div class="bought" v-if="isBought">购买成功</div>
 
+        <div class="bought" v-if="isCollect">收藏成功</div>
 
+    </div>
 
 </template>
 
 </template>
 
 <script lang="ts">
 
 <script lang="ts">
 
 import { defineComponent } from "@vue/runtime-core";
 
 import { defineComponent } from "@vue/runtime-core";
 
+import store from "../../store";
 
+import HeadVue from "../home/Head.vue";
 
 
 
 export default defineComponent({
 
 export default defineComponent({
 
     name: "Detail",
 
     name: "Detail",
 
+    components: {
 
+        HeadVue,
 
+    },
 
+    data() {
 
+        return {
 
+            isBought: false,
 
+            isCollect: false,
 
+            curAmount: 1,
 
+        };
 
+    },
 
+    computed: {
 
+        goods() {
 
+            return store.state.curChosenGoods;
 
+        },
 
+
 
+        showPrice(): number {
 
+            let price = store.state.curChosenGoods.price;
 
+            return this.curAmount * price;
 
+        },
 
+    },
 
+
 
+    methods: {
 
+        /**
 
+         * 点击购买
 
+         */
 
+        onBtnBuyClick() {
 
+            this.isBought = true;
 
+            setTimeout(() => {
 
+                this.isBought = false;
 
+                this.$router.back();
 
+            }, 1000);
 
+        },
 
+
 
+        /**
 
+         * 点击收藏
 
+         */
 
+        onBtnCollectClick() {
 
+            this.isCollect = true;
 
+            setTimeout(() => {
 
+                this.isCollect = false;
 
+                this.$router.back();
 
+            }, 1000);
 
+        },
 
+
 
+        onAdd() {
 
+            this.curAmount++;
 
+        },
 
+
 
+        onCut() {
 
+            if (this.curAmount <= 1) return;
 
+            this.curAmount--;
 
+        },
 
+    },
 
 });
 
 });
 
 </script>
 
 </script>
 
-<style scoped>
 
+<style lang="less" scoped>
 
 .detailPage {
 
 .detailPage {
 
     width: 100vw;
 
     width: 100vw;
 
     height: 100vh;
 
     height: 100vh;
 
-    background-color: yellowgreen;
 
+    background-color: #f5f5f5;
 
     cursor: pointer;
 
     cursor: pointer;
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    position: relative;
 
+
 
+    .bodyArea {
 
+        background-color: #fff;
 
+        width: 1200px;
 
+        height: 90vh;
 
+        padding: 30px;
 
+    }
 
+
 
+    .headArea {
 
+        display: flex;
 
+        flex-direction: row;
 
+        align-items: center;
 
+        width: 100%;
 
+        height: 406px;
 
+
 
+        .posterBg {
 
+            width: 350px;
 
+            height: 406px;
 
+            box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            margin-right: 20px;
 
+            .poster {
 
+                width: 314px;
 
+                // height: 314px;
 
+            }
 
+        }
 
+        .buyBg {
 
+            box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
 
+            display: flex;
 
+            flex: 1;
 
+            display: flex;
 
+            flex-direction: column;
 
+            height: 100%;
 
+            .title {
 
+                margin-top: 30px;
 
+                margin-left: 30px;
 
+            }
 
+            .priceArea {
 
+                background-color: rgba(255, 199, 196, 0.1);
 
+                padding: 30px;
 
+                margin-top: 60px;
 
+
 
+                .desc {
 
+                    margin-right: 30px;
 
+                }
 
+                .amountChoose {
 
+                    display: flex;
 
+                    align-items: center;
 
+
 
+                    .oneBtn() {
 
+                        width: @btnWidth;
 
+                        height: @btnWidth;
 
+                        background-color: #f5f5f5;
 
+                        border: solid 1px gray;
 
+                        display: flex;
 
+                        align-items: center;
 
+                        justify-content: center;
 
+                    }
 
+
 
+                    @btnWidth: 30px;
 
+                    .cut {
 
+                        .oneBtn;
 
+                        border-width: 1px 0 1px 1px;
 
+                    }
 
+                    .amount {
 
+                        height: @btnWidth;
 
+                        background-color: #fff;
 
+                        width: 100px;
 
+                        border: solid 1px gray;
 
+                        display: flex;
 
+                        align-items: center;
 
+                        justify-content: center;
 
+                    }
 
+                    .add {
 
+                        .oneBtn;
 
+                        border-width: 1px 1px 1px 0px;
 
+                    }
 
+                }
 
+            }
 
+            .btnArea {
 
+                display: flex;
 
+                flex: 1;
 
+                align-items: center;
 
+                justify-content: center;
 
+
 
+                .btn() {
 
+                    width: 200px;
 
+                    height: 50px;
 
+                    border-radius: 5px;
 
+                    border: solid 1px #ff6a50;
 
+                    background-color: #ff6a50;
 
+                    display: flex;
 
+                    align-items: center;
 
+                    justify-content: center;
 
+                }
 
+                .btnCollect {
 
+                    .btn;
 
+                    margin-right: 30px;
 
+                    background-color: rgba(255, 199, 196, 0.1);
 
+                    color: #ff6a50;
 
+                }
 
+                .btnBuy {
 
+                    .btn;
 
+                    color: #fff;
 
+                }
 
+            }
 
+        }
 
+    }
 
+
 
+    .bought {
 
+        position: absolute;
 
+        margin: auto;
 
+        width: 200px;
 
+        height: 40px;
 
+        border-radius: 5px;
 
+        background-color: rgba(0, 0, 0, 0.5);
 
+        display: flex;
 
+        align-items: center;
 
+        justify-content: center;
 
+        color: #fff;
 
+        top: 50%;
 
+    }
 
 }
 
 }
 
 </style>
 
 </style>

+ 11 - 6
src/page/home/Goods.vue
Просмотреть файл 

@@ -3,15 +3,15 @@
 
  * @Author: uray(1109489444@qq.com)
 
  * @Author: uray(1109489444@qq.com)
 
  * @date: 2022-04-14 15:49:03
 
  * @date: 2022-04-14 15:49:03
 
  * @lastEditors: uray(1109489444@qq.com)
 
  * @lastEditors: uray(1109489444@qq.com)
 
- * @lastEditTime: 2022-04-14 16:31:11
 
- * @FilePath: \toy_box_website\src\page\home\Goods.vue
 
+ * @lastEditTime: 2022-04-15 11:09:39
 
+ * @FilePath: \toy_box_website_2\src\page\home\Goods.vue
 
 -->
 
 -->
 
 
 
 <template>
 
 <template>
 
     <div class="goods">
 
     <div class="goods">
 
-        <div class="item" v-for="(item, index) in showGoods" :key="index">
 
+        <div class="item" v-for="(item, index) in showGoods" :key="index" @click="onBtnBuyGoodsClick(item)">
 
             <img :src="item.imgSrc" alt="" />
 
             <img :src="item.imgSrc" alt="" />
 
-            <span class="name">{{ item.name }}}</span>
 
+            <span class="name">{{ item.name }}</span>
 
             <span class="price">￥{{ item.price.toFixed(2) }}</span>
 
             <span class="price">￥{{ item.price.toFixed(2) }}</span>
 
         </div>
 
         </div>
 
 
 
@@ -21,7 +21,7 @@
 
 
 
 <script lang="ts">
 
 <script lang="ts">
 
 import { defineComponent } from "@vue/runtime-core";
 
 import { defineComponent } from "@vue/runtime-core";
 
-import store from "../../store";
 
+import store, { IGoods } from "../../store";
 
 
 
 export default defineComponent({
 
 export default defineComponent({
 
     name: "Goods",
 
     name: "Goods",
 
@@ -36,7 +36,12 @@ export default defineComponent({
 
             return store.state.allGoods.filter((item) => item.name.indexOf(store.state.searchGoodsName) != -1);
 
             return store.state.allGoods.filter((item) => item.name.indexOf(store.state.searchGoodsName) != -1);
 
         },
 
         },
 
     },
 
     },
 
-    methods: {},
 
+    methods: {
 
+        onBtnBuyGoodsClick(goods: IGoods) {
 
+            store.commit("setCurChosenGoods", goods);
 
+            this.$router.push({ path: "/page/detail" });
 
+        },
 
+    },
 
 });
 
 });
 
 </script>
 
 </script>

+ 8 - 3
src/page/home/Head.vue
Просмотреть файл 

@@ -3,12 +3,13 @@
 
  * @Author: uray(1109489444@qq.com)
 
  * @Author: uray(1109489444@qq.com)
 
  * @date: 2022-04-14 14:33:39
 
  * @date: 2022-04-14 14:33:39
 
  * @lastEditors: uray(1109489444@qq.com)
 
  * @lastEditors: uray(1109489444@qq.com)
 
- * @lastEditTime: 2022-04-14 16:03:24
 
- * @FilePath: \toy_box_website\src\page\home\Head.vue
 
+ * @lastEditTime: 2022-04-15 10:56:13
 
+ * @FilePath: \toy_box_website_2\src\page\home\Head.vue
 
 -->
 
 -->
 
 <template>
 
 <template>
 
     <div class="head">
 
     <div class="head">
 
-        <img class="logo" src="/src/assets/logo.png" />
 
+        <!-- <img class="logo" src="/src/assets/logo.png" /> -->
 
+        <span class="logoSpan">欧气抽盒</span>
 
         <span class="item">商店</span>
 
         <span class="item">商店</span>
 
         <span class="item">福袋</span>
 
         <span class="item">福袋</span>
 
         <span class="item">福利</span>
 
         <span class="item">福利</span>
 
@@ -72,6 +73,10 @@ export default defineComponent({
 
         height: 60px;
 
         height: 60px;
 
     }
 
     }
 
 
 
+    .logoSpan {
 
+        font-size: 40px;
 
+    }
 
+
 
     .item {
 
     .item {
 
         margin-left: 20px;
 
         margin-left: 20px;
 
         margin-right: 20px;
 
         margin-right: 20px;

+ 83 - 33
src/page/home/index.vue
Просмотреть файл 

@@ -3,8 +3,8 @@
 
  * @Author: uray(1109489444@qq.com)
 
  * @Author: uray(1109489444@qq.com)
 
  * @date: 2022-04-13 18:00:09
 
  * @date: 2022-04-13 18:00:09
 
  * @lastEditors: uray(1109489444@qq.com)
 
  * @lastEditors: uray(1109489444@qq.com)
 
- * @lastEditTime: 2022-04-14 16:04:16
 
- * @FilePath: \toy_box_website\src\page\home\index.vue
 
+ * @lastEditTime: 2022-04-15 10:54:57
 
+ * @FilePath: \toy_box_website_2\src\page\home\index.vue
 
 -->
 
 -->
 
 
 
 <template>
 
 <template>
 
@@ -33,54 +33,104 @@ export default defineComponent({
 
     mounted() {
 
     mounted() {
 
         const goods = [
 
         const goods = [
 
             {
 
             {
 
-                name: "【元气福袋】超值盲盒大礼包+随机礼品（价值175~288）",
 
-                price: 99,
 
-                imgSrc: "https://static.airmart.top/mall/6248329b36865f004fc7b6cd.png",
 
+                name: "卡尔顿迷你法棍夹心面包营养早餐整箱装750g2箱",
 
+                price: 320,
 
+                imgSrc: "https://dianshang-oqch.raink.com.cn/goods/%E5%8D%A1%E5%B0%94%E9%A1%BF%E8%BF%B7%E4%BD%A0%E6%B3%95%E6%A3%8D%E5%A4%B9%E5%BF%83%E9%9D%A2%E5%8C%85%E8%90%A5%E5%85%BB%E6%97%A9%E9%A4%90%E6%95%B4%E7%AE%B1%E8%A3%85750g2%E7%AE%B1_%E4%B8%BB%E5%9B%BE.jpg",
 
+            },
 
+            {
 
+                name: "Cherry MX1.0 TKL 机械键盘无光(随机发货)",
 
+                price: 325,
 
+                imgSrc: "https://dianshang-oqch.raink.com.cn/goods/Cherry%20MX1.0%20TKL%20%E6%9C%BA%E6%A2%B0%E9%94%AE%E7%9B%98%E6%97%A0%E5%85%89(%E9%9A%8F%E6%9C%BA%E5%8F%91%E8%B4%A7).png",
 
+            },
 
+            {
 
+                name: "摩飞电饼铛MR8600",
 
+                price: 328,
 
+                imgSrc: "https://dianshang-oqch.raink.com.cn/goods/%E6%91%A9%E9%A3%9E%E7%94%B5%E9%A5%BC%E9%93%9B8600_%E4%B8%BB%E5%9B%BE%20(1).jpg",
 
+            },
 
+            {
 
+                name: "2021摩飞果汁气泡榨汁机MR9801（1杯2盖）",
 
+                price: 328,
 
+                imgSrc: "https://dianshang-oqch.raink.com.cn/goods/%E6%91%A9%E9%A3%9EMR9801%E6%A6%A8%E6%B1%81%E6%9D%AF_%E4%B8%BB%E5%9B%BE%20(1).jpg",
 
+            },
 
+            {
 
+                name: "鸣盏煮茶器MZ-072T（含盖子）",
 
+                price: 129,
 
+                imgSrc: "https://dianshang-oqch.raink.com.cn/goods/%E9%B8%A3%E7%9B%8F%E7%85%AE%E8%8C%B6%E5%99%A8072T_%E4%B8%BB%E5%9B%BE%20(1).jpg",
 
             },
 
             },
 
             {
 
             {
 
-                name: "【元气福袋】超值！正版热血动漫礼包 扭蛋 盒蛋 景品（价值240~380）",
 
-                price: 199,
 
-                imgSrc: "https://static.airmart.top/mall/624832db36865f004fc7b6ce.png",
 
+                name: "生活元素空气炸锅Q1-H01机械款抹茶绿",
 
+                price: 349,
 
+                imgSrc: "https://dianshang-oqch.raink.com.cn/goods/%E7%A9%BA%E6%B0%94%E7%82%B8%E9%94%85Q1%E6%9C%BA%E6%A2%B0%E6%AC%BE_%E4%B8%BB%E5%9B%BE%20(1).jpg",
 
             },
 
             },
 
             {
 
             {
 
-                name: "【万代授权】UR 迪迦奥特曼 迪加 火花棱镜神光棒 25周年纪念现货 ",
 
-                price: 809,
 
-                imgSrc: "https://static.airmart.top/mall/61f2532b871a2500503c1e83.png",
 
+                name: "HKGOLD香港黄金L01-L02双环扣项链",
 
+                price: 699,
 
+                imgSrc: "https://dianshang-oqch.raink.com.cn/goods/%E5%8F%8C%E7%8E%AF%E6%89%A3_1.png",
 
             },
 
             },
 
             {
 
             {
 
-                name: "HGUC 机动战士高达 逆袭的夏亚 MSN-04II 夜莺",
 
-                price: 479,
 
-                imgSrc: "https://static.airmart.top/mall/61d577a71a5ae600511a3c8a.png",
 
+                name: "双引擎壁挂落地两用取暖器（PD-ND01）绿色3000w",
 
+                price: 1198,
 
+                imgSrc: "https://dianshang-oqch.raink.com.cn/goods/%E5%A3%81%E6%8C%82%E8%90%BD%E5%9C%B0%E4%B8%A4%E7%94%A8%E5%8F%96%E6%9A%96%E5%99%A8%EF%BC%88%E7%BB%BF%E8%89%B2%EF%BC%89_%E5%8F%8C%E5%BC%95%E6%93%8ESKU%E5%9B%BE2100.jpg",
 
             },
 
             },
 
             {
 
             {
 
-                name: "迪士尼 星黛露 发饰",
 
-                price: 119,
 
-                imgSrc: "https://static.airmart.top/mall/622c75232bcd8900631850bd.png",
 
+                name: "王者荣耀官方正版 五岳限定太华伽罗典藏手办潮玩摆件",
 
+                price: 899,
 
+                imgSrc: "https://dianshang-oqch.raink.com.cn/goods/%E7%8E%8B%E8%80%85%E8%8D%A3%E8%80%80%E5%AE%98%E6%96%B9%E6%AD%A3%E7%89%88%20%E4%BA%94%E5%B2%B3%E9%99%90%E5%AE%9A%E5%A4%AA%E5%8D%8E%E4%BC%BD%E7%BD%97%E5%85%B8%E8%97%8F%E6%89%8B%E5%8A%9E%E6%BD%AE%E7%8E%A9%E6%91%86%E4%BB%B6_%E4%B8%BB%E5%9B%BE.jpg",
 
             },
 
             },
 
             {
 
             {
 
-                name: "万代模型 Figure-rise Standard 星野文乃 高达创战者",
 
-                price: 166,
 
-                imgSrc: "https://static.airmart.top/mall/623d796a2b212500776ace9a.png",
 
+                name: "王者荣耀正版 Myethos云霓雀翎 虞姬典藏限定手办",
 
+                price: 899,
 
+                imgSrc: "https://dianshang-oqch.raink.com.cn/goods/%E7%8E%8B%E8%80%85%E8%8D%A3%E8%80%80%E6%AD%A3%E7%89%88%20Myethos%E4%BA%91%E9%9C%93%E9%9B%80%E7%BF%8E%20%E8%99%9E%E5%A7%AC%E5%85%B8%E8%97%8F%E9%99%90%E5%AE%9A%E6%89%8B%E5%8A%9E_%E4%B8%BB%E5%9B%BE.jpg",
 
             },
 
             },
 
             {
 
             {
 
-                name: "HotToys 蝙蝠侠黑暗骑士 COSBABY 迷你人偶 钥匙扣挂件（随机）",
 
-                price: 89,
 
-                imgSrc: "https://static.airmart.top/mall/623991bb61bab600782a3e5e.png",
 
+                name: "万代模型 MG 1/100 MSN-06S 新安州 Ka版 完全电镀版 独角兽",
 
+                price: 1200,
 
+                imgSrc: "https://dianshang-oqch.raink.com.cn/goods/%E4%B8%87%E4%BB%A3%E6%A8%A1%E5%9E%8B%20MG%201%20100%20MSN-06S%20%E6%96%B0%E5%AE%89%E5%B7%9E%20Ka%E7%89%88%20%E5%AE%8C%E5%85%A8%E7%94%B5%E9%95%80%E7%89%88%20%E7%8B%AC%E8%A7%92%E5%85%BD_%E4%B8%BB%E5%9B%BE.jpg",
 
             },
 
             },
 
             {
 
             {
 
-                name: "米哈游/崩坏3】女武神武器金属挂件钥匙扣",
 
-                price: 59,
 
-                imgSrc: "https://static.airmart.top/mall/61d815f5d2314e00577b1b4f.png",
 
+                name: "乐高42096保时捷911赛车模型乐高积木玩具",
 
+                price: 1399,
 
+                imgSrc: "https://dianshang-oqch.raink.com.cn/goods/%E4%B9%90%E9%AB%9842096%E4%BF%9D%E6%97%B6%E6%8D%B7911%E8%B5%9B%E8%BD%A6%E6%A8%A1%E5%9E%8B%E4%B9%90%E9%AB%98%E7%A7%AF%E6%9C%A8%E7%8E%A9%E5%85%B7_%E4%B8%BB%E5%9B%BE.jpg",
 
             },
 
             },
 
             {
 
             {
 
-                name: "【米哈游/崩坏3】德丽莎沙雕亚克力挂件(款式随机）",
 
-                price: 49,
 
-                imgSrc: "https://static.airmart.top/mall/61d80f6c1a5ae600511a3cd3.png",
 
+                name: "炼狱蝰蛇标准版(随机发货)",
 
+                price: 129,
 
+                imgSrc: "https://dianshang-oqch.raink.com.cn/goods/%E7%82%BC%E7%8B%B1%E8%9D%B0%E8%9B%87%E6%A0%87%E5%87%86%E7%89%88.png",
 
             },
 
             },
 
             {
 
             {
 
-                name: "【米哈游/崩坏3】火星新春表情包PVC贴纸包",
 
-                price: 49,
 
-                imgSrc: "https://static.airmart.top/mall/61d80f0ad83c0b004f405a37.png",
 
+                name: "皮卡丘鼠标垫",
 
+                price: 139,
 
+                imgSrc: "https://dianshang-oqch.raink.com.cn/goods/%E5%AE%9D%E5%8F%AF%E6%A2%A6%E7%9A%AE%E5%8D%A1%E4%B8%98%20%E4%B8%AD%E5%8F%B7%E9%BC%A0%E6%A0%87%E5%9E%AB.png",
 
+            },
 
+            {
 
+                name: "罗技G102有线游戏鼠标(随机发货)",
 
+                price: 149,
 
+                imgSrc: "https://dianshang-oqch.raink.com.cn/goods/%E7%BD%97%E6%8A%80G102%E6%9C%89%E7%BA%BF%E6%B8%B8%E6%88%8F%E9%BC%A0%E6%A0%871.png",
 
+            },
 
+            {
 
+                name: "夸迪氨基酸柔润醒肤洁面慕斯 150ml",
 
+                price: 158,
 
+                imgSrc: "https://dianshang-oqch.raink.com.cn/goods/%E5%A4%B8%E8%BF%AA%E6%B0%A8%E5%9F%BA%E9%85%B8%E6%9F%94%E6%B6%A6%E9%86%92%E8%82%A4%E6%B4%81%E9%9D%A2%E6%85%95%E6%96%AF_%E5%A4%B4%E5%9B%BE1.jpg",
 
+            },
 
+            {
 
+                name: "VOKAMO iphone13手机壳（颜色随机）",
 
+                price: 198,
 
+                imgSrc: "https://dianshang-oqch.raink.com.cn/goods/VOKAMO%20%E6%89%8B%E6%9C%BA%E5%A3%B3%EF%BC%88%E5%A4%A9%E9%9D%92%E8%89%B2%EF%BC%89.png",
 
+            },
 
+            {
 
+                name: "纯手绘3D立体纯手绘动物杯-奶牛款",
 
+                price: 99,
 
+                imgSrc: "https://dianshang-oqch.raink.com.cn/goods/%E5%A5%B6%E7%89%9B_01.jpg",
 
+            },
 
+            {
 
+                name: "生活元素桌面风扇绿色Z6",
 
+                price: 69,
 
+                imgSrc: "https://dianshang-oqch.raink.com.cn/goods/%E7%94%9F%E6%B4%BB%E5%85%83%E7%B4%A0%E6%A1%8C%E9%9D%A2%E9%A3%8E%E6%89%87%E7%BB%BF%E8%89%B2Z6_101_02.png",
 
+            },
 
+            {
 
+                name: "手绘陶瓷动物杯-经典甲壳虫",
 
+                price: 99,
 
+                imgSrc: "https://dianshang-oqch.raink.com.cn/goods/%E7%BB%8F%E5%85%B8%E7%94%B2%E5%A3%B3%E8%99%AB_1.jpg",
 
             },
 
             },
 
         ] as IGoods[];
 
         ] as IGoods[];
 
         store.commit("setGoods", goods);
 
         store.commit("setGoods", goods);
 
@@ -94,7 +144,7 @@ export default defineComponent({
 
     flex-direction: column;
 
     flex-direction: column;
 
     align-items: center;
 
     align-items: center;
 
     width: 100vw;
 
     width: 100vw;
 
-    height: 100vh;
 
+    min-height: 100vh;
 
 
 
     background-color: #f5f5f5;
 
     background-color: #f5f5f5;
 
 }
 
 }

+ 11 - 5
src/store/index.ts
Просмотреть файл 

@@ -3,8 +3,8 @@
 
  * @Author: uray(1109489444@qq.com)
 
  * @Author: uray(1109489444@qq.com)
 
  * @date: 2022-04-13 17:03:49
 
  * @date: 2022-04-13 17:03:49
 
  * @lastEditors: uray(1109489444@qq.com)
 
  * @lastEditors: uray(1109489444@qq.com)
 
- * @lastEditTime: 2022-04-14 15:52:59
 
- * @FilePath: \toy_box_website\src\store\index.ts
 
+ * @lastEditTime: 2022-04-15 11:05:43
 
+ * @FilePath: \toy_box_website_2\src\store\index.ts
 
  */
 
  */
 
 import { createStore } from "vuex";
 
 import { createStore } from "vuex";
 
 
 
@@ -16,6 +16,7 @@ export interface IGoods {
 
 interface IState {
 
 interface IState {
 
     allGoods: IGoods[];
 
     allGoods: IGoods[];
 
     searchGoodsName: string;
 
     searchGoodsName: string;
 
+    curChosenGoods: IGoods;
 
 }
 
 }
 
 // 创建一个新的 store 实例
 
 // 创建一个新的 store 实例
 
 const store = createStore({
 
 const store = createStore({
 
@@ -23,7 +24,8 @@ const store = createStore({
 
         return {
 
         return {
 
             allGoods: [],
 
             allGoods: [],
 
             searchGoodsName: "", // 搜索的商品名称
 
             searchGoodsName: "", // 搜索的商品名称
 
-        };
 
+            curChosenGoods: { name: "", price: 1, imgSrc: "" },
 
+        } as IState;
 
     },
 
     },
 
     mutations: {
 
     mutations: {
 
         /**
 
         /**
 
@@ -31,7 +33,7 @@ const store = createStore({
 
          * @param state
 
          * @param state
 
          * @param newGoods
 
          * @param newGoods
 
          */
 
          */
 
-        setGoods(state: IState, newGoods) {
 
+        setGoods(state: IState, newGoods: IGoods[]) {
 
             state.allGoods = newGoods;
 
             state.allGoods = newGoods;
 
         },
 
         },
 
         /**
 
         /**
 
@@ -39,9 +41,13 @@ const store = createStore({
 
          * @param state
 
          * @param state
 
          * @param newName
 
          * @param newName
 
          */
 
          */
 
-        setSearchGoodsName(state: IState, newName) {
 
+        setSearchGoodsName(state: IState, newName: string) {
 
             state.searchGoodsName = newName;
 
             state.searchGoodsName = newName;
 
         },
 
         },
 
+
 
+        setCurChosenGoods(state: IState, curGoods: IGoods) {
 
+            state.curChosenGoods = curGoods;
 
+        },
 
     },
 
     },
 
 });
 
 });