add shopping

chaoliuchn · Jul 3, 2017 · 62c39f2 · 62c39f2
1 parent d0da8b5
commit 62c39f2
Show file tree

Hide file tree

Showing 15 changed files with 1,037 additions and 0 deletions.
diff --git a/shopping/.babelrc b/shopping/.babelrc
@@ -0,0 +1,5 @@
+{
+    "presets": ["es2015"],
+    "plugins": ["transform-runtime"],
+    "comments": false
+}
diff --git a/shopping/app.vue b/shopping/app.vue
@@ -0,0 +1,23 @@
+<template>
+    <div>
+        <div class="header">
+            <router-link to="/list" class="header-title">电商网站示例</router-link>
+            <div class="header-menu">
+                <router-link to="/cart" class="header-menu-cart">
+                    购物车
+                    <span v-if="cartList.length">{{ cartList.length }}</span>
+                </router-link>
+            </div>
+        </div>
+        <router-view></router-view>
+    </div>
+</template>
+<script>
+    export default {
+        computed: {
+            cartList () {
+                return this.$store.state.cartList;
+            }
+        }
+    }
+</script>
diff --git a/shopping/components/product.vue b/shopping/components/product.vue
@@ -0,0 +1,89 @@
+<template>
+    <div class="product">
+        <router-link :to="'/product/' + info.id" class="product-main">
+            <img :src="info.image">
+            <h4>{{ info.name }}</h4>
+            <div class="product-color" :style="{ background: colors[info.color]}"></div>
+            <div class="product-cost">¥ {{ info.cost }}</div>
+            <div class="product-add-cart" @click.prevent="handleCart">加入购物车</div>
+        </router-link>
+    </div>
+</template>
+<script>
+    export default {
+        props: {
+            info: Object
+        },
+        data () {
+            return {
+                colors: {
+                    '白色': '#ffffff',
+                    '金色': '#dac272',
+                    '蓝色': '#233472',
+                    '红色': '#f2352e'
+                }
+            }
+        },
+        methods: {
+            handleCart () {
+                this.$store.commit('addCart', this.info.id);
+            }
+        }
+    };
+</script>
+<style scoped>
+    .product{
+        width: 25%;
+        float: left;
+    }
+    .product-main{
+        display: block;
+        margin: 16px;
+        padding: 16px;
+        border: 1px solid #dddee1;
+        border-radius: 6px;
+        overflow: hidden;
+        background: #fff;
+        text-align: center;
+        position: relative;
+    }
+    .product-main img{
+        width: 100%;
+    }
+    h4{
+        color: #222;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .product-main:hover h4{
+        color: #0070c9;
+    }
+    .product-color{
+        display: block;
+        width: 16px;
+        height: 16px;
+        border: 1px solid #dddee1;
+        border-radius: 50%;
+        margin: 6px auto;
+    }
+    .product-cost{
+        color: #de4037;
+        margin-top: 6px;
+    }
+    .product-add-cart{
+        display: none;
+        padding: 4px 8px;
+        background: #2d8cf0;
+        color: #fff;
+        font-size: 12px;
+        border-radius: 3px;
+        cursor: pointer;
+        position: absolute;
+        top: 5px;
+        right: 5px;
+    }
+    .product-main:hover .product-add-cart{
+        display: inline-block;
+    }
+</style>
diff --git a/shopping/index.ejs b/shopping/index.ejs
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>电商网站示例</title>
+    <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
+</head>
+<body>
+    <div id="app"></div>
+    <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
+</body>
+</html> 
diff --git a/shopping/index.html b/shopping/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Webpack App</title>
+    <link rel="stylesheet" type="text/css" href="/dist/main.css">
+</head>
+<body>
+    <div id="app">
+
+    </div>
+    <script type="text/javascript" src="/dist/main.js"></script>
+</body>
+</html>
diff --git a/shopping/main.js b/shopping/main.js
@@ -0,0 +1,120 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import Routers from './router';
+import Vuex from 'vuex';
+import App from './app.vue';
+import './style.css';
+
+import product_data from './product';
+
+Vue.use(VueRouter);
+Vue.use(Vuex);
+
+// 路由配置
+const RouterConfig = {
+    // 使用 HTML5 的 History 路由模式
+    mode: 'history',
+    routes: Routers
+};
+const router = new VueRouter(RouterConfig);
+
+router.beforeEach((to, from, next) => {
+    window.document.title = to.meta.title;
+    next();
+});
+
+router.afterEach((to, from, next) => {
+    window.scrollTo(0, 0);
+});
+
+// 数组排重
+function getFilterArray (array) {
+    const res = [];
+    const json = {};
+    for (let i = 0; i < array.length; i++){
+        const _self = array[i];
+        if(!json[_self]){
+            res.push(_self);
+            json[_self] = 1;
+        }
+    }
+    return res;
+}
+
+const store = new Vuex.Store({
+    state: {
+        productList: [],
+        cartList: []
+    },
+    getters: {
+        brands: state => {
+            const brands = state.productList.map(item => item.brand);
+            return getFilterArray(brands);
+        },
+        colors: state => {
+            const colors = state.productList.map(item => item.color);
+            return getFilterArray(colors);
+        }
+    },
+    mutations: {
+        // 添加商品列表
+        setProductList (state, data) {
+            state.productList = data;
+        },
+        // 添加到购物车
+        addCart (state, id) {
+            // 先判断购物车是否已有，如果有，数量+1
+            const isAdded = state.cartList.find(item => item.id === id);
+            if (isAdded) {
+                isAdded.count ++;
+            } else {
+                state.cartList.push({
+                    id: id,
+                    count: 1
+                })
+            }
+        },
+        // 修改商品数量
+        editCartCount (state, payload) {
+            const product = state.cartList.find(item => item.id === payload.id);
+            product.count += payload.count;
+        },
+        // 删除商品
+        deleteCart (state, id) {
+            const index = state.cartList.findIndex(item => item.id === id);
+            state.cartList.splice(index, 1);
+        },
+        // 清空购物车
+        emptyCart (state) {
+            state.cartList = [];
+        }
+    },
+    actions: {
+        // 请求商品列表
+        getProductList (context) {
+            // 真实环境通过 ajax 获取，这里用异步模拟
+            setTimeout(() => {
+                context.commit('setProductList', product_data);
+            }, 500);
+        },
+        // 购买
+        buy (context) {
+            // 真实环境应通过 ajax 提交购买请求后再清空购物列表
+            return new Promise(resolve=> {
+                setTimeout(() => {
+                    context.commit('emptyCart');
+                    resolve();
+                }, 500)
+            });
+        }
+    }
+});
+
+new Vue({
+    el: '#app',
+    router: router,
+    store: store,
+    render: h => {
+        return h(App)
+    }
+});
diff --git a/shopping/package.json b/shopping/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js",
+    "build": "webpack --progress --hide-modules --config webpack.prod.config.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "babel": "^6.23.0",
+    "babel-core": "^6.24.0",
+    "babel-loader": "^6.4.1",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-es2015": "^6.24.0",
+    "babel-runtime": "^6.23.0",
+    "css-loader": "^0.27.3",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.10.1",
+    "html-webpack-plugin": "^2.28.0",
+    "style-loader": "^0.16.1",
+    "url-loader": "^0.5.8",
+    "vue-hot-reload-api": "^2.0.11",
+    "vue-loader": "^11.3.4",
+    "vue-style-loader": "^2.0.5",
+    "vue-template-compiler": "^2.2.6",
+    "webpack": "^2.3.2",
+    "webpack-dev-server": "^2.4.2",
+    "webpack-merge": "^4.1.0"
+  },
+  "dependencies": {
+    "vue": "^2.2.6",
+    "vue-router": "^2.3.1",
+    "vuex": "^2.2.1"
+  }
+}