Ver código fonte

feat: 基本完成页面

uray 4 anos atrás
pai
commit
4497c5bbd5

+ 3 - 3
index.html

@@ -3,8 +3,8 @@
  * @Author: uray(1109489444@qq.com)
  * @date: 2022-04-12 17:58:56
  * @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>
 <html lang="en">
@@ -12,7 +12,7 @@
         <meta charset="UTF-8" />
         <link rel="icon" href="/favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Vite App</title>
+        <title>欧气抽盒</title>
     </head>
     <body style="margin: 0">
         <div id="app"></div>

BIN
public/favicon.ico


+ 221 - 5
src/page/detail/index.vue

@@ -3,25 +3,241 @@
  * @Author: uray(1109489444@qq.com)
  * @date: 2022-04-13 17:29:36
  * @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>
-    <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>
 <script lang="ts">
 import { defineComponent } from "@vue/runtime-core";
+import store from "../../store";
+import HeadVue from "../home/Head.vue";
 
 export default defineComponent({
     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>
-<style scoped>
+<style lang="less" scoped>
 .detailPage {
     width: 100vw;
     height: 100vh;
-    background-color: yellowgreen;
+    background-color: #f5f5f5;
     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>

+ 11 - 6
src/page/home/Goods.vue

@@ -3,15 +3,15 @@
  * @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
+ * @lastEditTime: 2022-04-15 11:09:39
+ * @FilePath: \toy_box_website_2\src\page\home\Goods.vue
 -->
 
 <template>
     <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="" />
-            <span class="name">{{ item.name }}}</span>
+            <span class="name">{{ item.name }}</span>
             <span class="price">¥{{ item.price.toFixed(2) }}</span>
         </div>
 
@@ -21,7 +21,7 @@
 
 <script lang="ts">
 import { defineComponent } from "@vue/runtime-core";
-import store from "../../store";
+import store, { IGoods } from "../../store";
 
 export default defineComponent({
     name: "Goods",
@@ -36,7 +36,12 @@ export default defineComponent({
             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>
 

+ 8 - 3
src/page/home/Head.vue

@@ -3,12 +3,13 @@
  * @Author: uray(1109489444@qq.com)
  * @date: 2022-04-14 14:33:39
  * @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>
     <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>
@@ -72,6 +73,10 @@ export default defineComponent({
         height: 60px;
     }
 
+    .logoSpan {
+        font-size: 40px;
+    }
+
     .item {
         margin-left: 20px;
         margin-right: 20px;

+ 83 - 33
src/page/home/index.vue

@@ -3,8 +3,8 @@
  * @Author: uray(1109489444@qq.com)
  * @date: 2022-04-13 18:00:09
  * @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>
@@ -33,54 +33,104 @@ export default defineComponent({
     mounted() {
         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[];
         store.commit("setGoods", goods);
@@ -94,7 +144,7 @@ export default defineComponent({
     flex-direction: column;
     align-items: center;
     width: 100vw;
-    height: 100vh;
+    min-height: 100vh;
 
     background-color: #f5f5f5;
 }

+ 11 - 5
src/store/index.ts

@@ -3,8 +3,8 @@
  * @Author: uray(1109489444@qq.com)
  * @date: 2022-04-13 17:03:49
  * @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";
 
@@ -16,6 +16,7 @@ export interface IGoods {
 interface IState {
     allGoods: IGoods[];
     searchGoodsName: string;
+    curChosenGoods: IGoods;
 }
 // 创建一个新的 store 实例
 const store = createStore({
@@ -23,7 +24,8 @@ const store = createStore({
         return {
             allGoods: [],
             searchGoodsName: "", // 搜索的商品名称
-        };
+            curChosenGoods: { name: "", price: 1, imgSrc: "" },
+        } as IState;
     },
     mutations: {
         /**
@@ -31,7 +33,7 @@ const store = createStore({
          * @param state
          * @param newGoods
          */
-        setGoods(state: IState, newGoods) {
+        setGoods(state: IState, newGoods: IGoods[]) {
             state.allGoods = newGoods;
         },
         /**
@@ -39,9 +41,13 @@ const store = createStore({
          * @param state
          * @param newName
          */
-        setSearchGoodsName(state: IState, newName) {
+        setSearchGoodsName(state: IState, newName: string) {
             state.searchGoodsName = newName;
         },
+
+        setCurChosenGoods(state: IState, curGoods: IGoods) {
+            state.curChosenGoods = curGoods;
+        },
     },
 });