diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index ae9e5f6..623c2ad 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -26,7 +26,8 @@ module.exports = { '/page': resolve('src/page'), '/common': resolve('src/common'), '/assets': resolve('src/assets'), - '/api': resolve('src/api') + '/api': resolve('src/api'), + '/utils': resolve('src/utils') } }, module: { diff --git a/index.html b/index.html index 82619cc..0ad8e1f 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,9 @@ 电子商城 + + +
diff --git a/src/api/goods.js b/src/api/goods.js index d4847f1..77f94a8 100644 --- a/src/api/goods.js +++ b/src/api/goods.js @@ -3,3 +3,7 @@ import http from './public' export const getComputer = (params) => { return http.fetchGet('/goods/computer', params) } +// 未登录获取购物车 +export const getCartList = (params) => { + return http.fetchPost('/users/cartList', params) +} diff --git a/src/assets/style/common.scss b/src/assets/style/common.scss index 0ac94e2..652773a 100644 --- a/src/assets/style/common.scss +++ b/src/assets/style/common.scss @@ -40,3 +40,17 @@ text-overflow: ellipsis; white-space: nowrap; } + +// 删除按钮 +.del-btn { + display: block; + cursor: pointer; + width: 20px; + height: 20px; + background: url(/static/images/account-icon@2x.32d87deb02b3d1c3cc5bcff0c26314ac.png) -50px -60px no-repeat; + background-size: 240px 107px; + text-indent: -9999em; + &:hover { + background-position: -75px -60px; + } +} diff --git a/src/assets/style/mixin.scss b/src/assets/style/mixin.scss index 4bb3b6e..f58d19e 100644 --- a/src/assets/style/mixin.scss +++ b/src/assets/style/mixin.scss @@ -4,7 +4,7 @@ justify-content: center; } -@mixin wh($w,$h) { +@mixin wh($w,$h:$w) { width: $w; height: $h; } diff --git a/src/common/header.vue b/src/common/header.vue index 8348399..bcf22f9 100644 --- a/src/common/header.vue +++ b/src/common/header.vue @@ -1,131 +1,191 @@ diff --git a/src/page/User/user.vue b/src/page/User/user.vue new file mode 100644 index 0000000..2e590af --- /dev/null +++ b/src/page/User/user.vue @@ -0,0 +1,3 @@ + diff --git a/src/page/index.vue b/src/page/index.vue index e879c09..b9c3987 100644 --- a/src/page/index.vue +++ b/src/page/index.vue @@ -1,22 +1,13 @@ diff --git a/src/router/index.js b/src/router/index.js index cb613f7..2204380 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -8,6 +8,7 @@ const goodsDetails = resolve => require(['/page/Goods/goodsDetails'], resolve) const PerDetails = resolve => require(['/page/PerDetails/perDetails'], resolve) const Cart = resolve => require(['/page/Cart/cart'], resolve) const order = resolve => require(['/page/Order/order'], resolve) +const user = resolve => require(['/page/User/user'], resolve) Vue.use(Router) export default new Router({ routes: [ @@ -26,6 +27,7 @@ export default new Router({ {path: '/perDetails', name: 'perDetails', component: PerDetails}, {path: '/cart', name: 'cart', component: Cart}, {path: '/order', name: 'order', component: order}, + {path: '/user', name: 'user', component: user}, {path: '*', redirect: '/home'} ] }) diff --git a/src/store/mutation-types.js b/src/store/mutation-types.js index f0c7265..7c2aa29 100644 --- a/src/store/mutation-types.js +++ b/src/store/mutation-types.js @@ -1 +1,4 @@ +export const INIT_BUYCART = 'INIT_BUYCART' export const ADD_CART = 'ADD_CART' +export const GET_USERINFO = 'GET_USERINFO' +export const RECORD_USERINFO = 'RECORD_USERINFO' diff --git a/src/store/mutations.js b/src/store/mutations.js index 82a467a..fb4649c 100644 --- a/src/store/mutations.js +++ b/src/store/mutations.js @@ -1,8 +1,52 @@ -import {ADD_CART} from './mutation-types' - +import { + INIT_BUYCART, + ADD_CART, + GET_USERINFO, + RECORD_USERINFO +} from './mutation-types' +import {setStore, getStore} from '../utils/storage' export default { - // 添加到购物车 - [ADD_CART] (state, shopid) { - state.cartList = shopid + // 网页初始化时从本地缓存获取购物车数据 + [INIT_BUYCART] (state) { + let initCart = getStore('buyCart') + if (initCart) { + state.cartList = JSON.parse(initCart) + } + }, + // 加入购物车 + [ADD_CART] (state, {shopId, goodsId}) { + let cart = state.cartList // 购物车 + let shop = cart[shopId] = (cart[shopId] || {}) // 店铺 + if (shop['goods']) { + shop['goods']['num']++ + } else { + shop['goods'] = { + 'num': 1, + 'id': goodsId + } + } + state.cartList = {...cart} + // 存入localStorage + setStore('buyCart', state.cartList) + }, + // 记录用户信息 + [RECORD_USERINFO] (state, info) { + state.userInfo = info + state.login = true + setStore('userInfo', info) + }, + // 获取用户信息 + [GET_USERINFO] (state, info) { + if (state.userInfo && (state.userInfo.username !== info.username)) { + return + } + if (!state.login) { + return + } + if (!info.message) { + state.userInfo = {...info} + } else { + state.userInfo = null + } } } diff --git a/src/utils/storage.js b/src/utils/storage.js index 6adcdb8..d6ffc01 100644 --- a/src/utils/storage.js +++ b/src/utils/storage.js @@ -2,25 +2,25 @@ * 存储localStorage */ export const setStore = (name, content) => { - if (!name) return; + if (!name) return if (typeof content !== 'string') { - content = JSON.stringify(content); + content = JSON.stringify(content) } - window.localStorage.setItem(name, content); + window.localStorage.setItem(name, content) } /** * 获取localStorage */ export const getStore = name => { - if (!name) return; - return window.localStorage.getItem(name); + if (!name) return + return window.localStorage.getItem(name) } /** * 删除localStorage */ export const removeStore = name => { - if (!name) return; - window.localStorage.removeItem(name); + if (!name) return + window.localStorage.removeItem(name) } diff --git a/static/images/bg_9b9dcb65ff.png b/static/images/bg_9b9dcb65ff.png new file mode 100644 index 0000000..1316a93 Binary files /dev/null and b/static/images/bg_9b9dcb65ff.png differ diff --git a/static/images/bg_9b9dcb65ff@2x.png b/static/images/bg_9b9dcb65ff@2x.png new file mode 100644 index 0000000..befc561 Binary files /dev/null and b/static/images/bg_9b9dcb65ff@2x.png differ diff --git a/static/images/con-bg_04f25dbf8e.jpg b/static/images/con-bg_04f25dbf8e.jpg new file mode 100644 index 0000000..d7e8cbc Binary files /dev/null and b/static/images/con-bg_04f25dbf8e.jpg differ diff --git a/static/images/dialog-gray-bg.png b/static/images/dialog-gray-bg.png new file mode 100644 index 0000000..0fd38f1 Binary files /dev/null and b/static/images/dialog-gray-bg.png differ diff --git a/static/images/global-logo-red@2x.85550cd7bec73c98adacee227ba6a8a0.png b/static/images/global-logo-red@2x.png similarity index 100% rename from static/images/global-logo-red@2x.85550cd7bec73c98adacee227ba6a8a0.png rename to static/images/global-logo-red@2x.png diff --git a/static/images/smartisan_4ada7fecea.png b/static/images/smartisan_4ada7fecea.png new file mode 100644 index 0000000..114c1aa Binary files /dev/null and b/static/images/smartisan_4ada7fecea.png differ diff --git a/static/images/smartisan_4ada7fecea@2x.png b/static/images/smartisan_4ada7fecea@2x.png new file mode 100644 index 0000000..aa97480 Binary files /dev/null and b/static/images/smartisan_4ada7fecea@2x.png differ