├── .gitignore
├── README.md
├── babel.config.js
├── img_preview
    ├── home-1.png
    ├── home-2.png
    ├── login.png
    ├── mall.png
    └── me.png
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── img
    │   ├── 01.jpg
    │   ├── 02.jpg
    │   ├── 03.jpg
    │   ├── 04.jpg
    │   └── 05.jpg
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── BallAnimation.vue
    │   ├── GoodsList.vue
    │   └── Header.vue
    ├── cube-ui.js
    ├── http-interceptor.js
    ├── main.js
    ├── router.js
    ├── services
    │   └── create.js
    ├── store.js
    ├── theme.styl
    ├── utils
    │   └── history.js
    └── views
    │   ├── Cart.vue
    │   ├── Home.vue
    │   └── Login.vue
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## mini-vue-mall
 2 | 
 3 | 一个基于Vue.js的小型商城项目，包含登录、商品列表、购物车页面，数据为本地mock。
 4 | 
 5 | ### 技术栈
 6 | 
 7 | - Vue.js
 8 | - vue-router
 9 | - Vuex
10 | - cube-ui
11 | 
12 | ### 登录
13 | 
14 | - 登录账号：dora 密码：123
15 | - 全局路由守卫
16 | - Vuex管理登录信息
17 | - 页面借助cube-ui的表单组件搭建
18 | - http拦截器，将token加入请求头中，响应拦截器处理登录失败的情况
19 | 
20 | ### 首页
21 | 
22 | - 轮播图
23 | - 商品列表，含过滤筛选商品功能
24 | - 商品图片可预览
25 | - 购物车数据通过Vuex实现全局共享
26 | 
27 | ### 购物车动画
28 | 
29 | - 通过src/services/create.js中创建组件实例的方法，动态生成购物车动画组件
30 | - 借助Vue.js transition的三个动画钩子来用js控制动画
31 | - 实现思路
32 |   - GoodsLIst.vue组件点击加购按钮时，派发一个事件
33 |   - 通过这个事件，可以得到点击位置的坐标，这个坐标就是小球的起始位置，购物车图标为小球的终止位置
34 |   - 动画结束需要销毁组件，释放内存
35 | 
36 | ### 公共
37 | 
38 | #### 通用 Header 组件
39 | 
40 | - 自己实现一个Vue插件`src/utils/history.js`，通过堆栈的方式维护页面跳转的历史记录，控制返回跳转
41 | - 点击返回按钮是出栈操作
42 | - 在全局路由router.js 中，实例化路由前，通过原型扩展router的back()方法
43 | - 在全局afterEach中存放历史记录
44 | 
45 | #### 底部tab，监听路由变化
46 | 
47 | 将tab的value和路由的路径定义成相同的，这样切换tab，拿到当前的tab的value，如`/cart`，使用`this.$router.push(value)`，就可以切换页面了
48 | 
49 | #### 页面切换滑动动画
50 | 
51 | 动态绑定transition的name，根据当前是正常跳转页面还是返回页面操作，决定页面是左滑还是右滑
52 | 
53 | ```html
54 | <transition :name="transitionName">
55 |    <router-view class="child-view" />
56 | </transition>
57 | ```
58 | 
59 | ### 用到的cube-ui组件
60 | - cube-tabs
61 | - cube-slide
62 | - cube-drawer
63 | - cube-form
64 | - cube-image-preview
65 | 
66 | ### 项目预览
67 | ![Image text](https://raw.githubusercontent.com/dora-zc/mini-vue-mall/master/img_preview/home-1.png)
68 | 
69 | ![Image text](https://github.com/dora-zc/mini-vue-mall/blob/master/img_preview/home-2.png?raw=true)
70 | 
71 | ![Image text](https://github.com/dora-zc/mini-vue-mall/blob/master/img_preview/mall.png?raw=true)
72 | 
73 | ![Image text](https://github.com/dora-zc/mini-vue-mall/blob/master/img_preview/me.png?raw=true)
74 | 
75 | 
76 | 
77 | 
78 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/img_preview/home-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chenz-fe/mini-vue-mall/f1f751c36c81931a09dfa8895bd418e39233e665/img_preview/home-1.png


--------------------------------------------------------------------------------
/img_preview/home-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chenz-fe/mini-vue-mall/f1f751c36c81931a09dfa8895bd418e39233e665/img_preview/home-2.png


--------------------------------------------------------------------------------
/img_preview/login.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chenz-fe/mini-vue-mall/f1f751c36c81931a09dfa8895bd418e39233e665/img_preview/login.png


--------------------------------------------------------------------------------
/img_preview/mall.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chenz-fe/mini-vue-mall/f1f751c36c81931a09dfa8895bd418e39233e665/img_preview/mall.png


--------------------------------------------------------------------------------
/img_preview/me.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chenz-fe/mini-vue-mall/f1f751c36c81931a09dfa8895bd418e39233e665/img_preview/me.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "mini-vue-mall",
  3 |   "version": "0.1.0",
  4 |   "private": true,
  5 |   "scripts": {
  6 |     "serve": "vue-cli-service serve",
  7 |     "build": "vue-cli-service build",
  8 |     "lint": "vue-cli-service lint"
  9 |   },
 10 |   "dependencies": {
 11 |     "axios": "^0.18.0",
 12 |     "core-js": "^2.6.5",
 13 |     "cube-ui": "~1.12.15",
 14 |     "vue": "^2.6.10",
 15 |     "vue-router": "^3.0.3",
 16 |     "vuex": "^3.0.1"
 17 |   },
 18 |   "devDependencies": {
 19 |     "@vue/cli-plugin-babel": "^3.7.0",
 20 |     "@vue/cli-plugin-eslint": "^3.7.0",
 21 |     "@vue/cli-service": "^3.7.0",
 22 |     "babel-eslint": "^10.0.1",
 23 |     "eslint": "^5.16.0",
 24 |     "eslint-plugin-vue": "^5.0.0",
 25 |     "stylus": "^0.54.5",
 26 |     "stylus-loader": "^3.0.2",
 27 |     "vue-cli-plugin-cube-ui": "^0.2.5",
 28 |     "vue-template-compiler": "^2.5.21"
 29 |   },
 30 |   "eslintConfig": {
 31 |     "root": true,
 32 |     "env": {
 33 |       "node": true
 34 |     },
 35 |     "extends": [
 36 |       "plugin:vue/essential",
 37 |       "eslint:recommended"
 38 |     ],
 39 |     "rules": {
 40 |       "accessor-pairs": 2,
 41 |       "arrow-spacing": [
 42 |         2,
 43 |         {
 44 |           "before": true,
 45 |           "after": true
 46 |         }
 47 |       ],
 48 |       "block-spacing": [
 49 |         2,
 50 |         "always"
 51 |       ],
 52 |       "brace-style": [
 53 |         2,
 54 |         "1tbs",
 55 |         {
 56 |           "allowSingleLine": true
 57 |         }
 58 |       ],
 59 |       "camelcase": [
 60 |         0,
 61 |         {
 62 |           "properties": "always"
 63 |         }
 64 |       ],
 65 |       "comma-dangle": [
 66 |         2,
 67 |         "never"
 68 |       ],
 69 |       "comma-spacing": [
 70 |         2,
 71 |         {
 72 |           "before": false,
 73 |           "after": true
 74 |         }
 75 |       ],
 76 |       "comma-style": [
 77 |         2,
 78 |         "last"
 79 |       ],
 80 |       "constructor-super": 2,
 81 |       "curly": [
 82 |         2,
 83 |         "multi-line"
 84 |       ],
 85 |       "dot-location": [
 86 |         2,
 87 |         "property"
 88 |       ],
 89 |       "eol-last": 2,
 90 |       "eqeqeq": [
 91 |         2,
 92 |         "allow-null"
 93 |       ],
 94 |       "generator-star-spacing": [
 95 |         2,
 96 |         {
 97 |           "before": true,
 98 |           "after": true
 99 |         }
100 |       ],
101 |       "handle-callback-err": [
102 |         2,
103 |         "^(err|error)$"
104 |       ],
105 |       "indent": [
106 |         2,
107 |         2,
108 |         {
109 |           "SwitchCase": 1
110 |         }
111 |       ],
112 |       "jsx-quotes": [
113 |         2,
114 |         "prefer-single"
115 |       ],
116 |       "key-spacing": [
117 |         2,
118 |         {
119 |           "beforeColon": false,
120 |           "afterColon": true
121 |         }
122 |       ],
123 |       "keyword-spacing": [
124 |         2,
125 |         {
126 |           "before": true,
127 |           "after": true
128 |         }
129 |       ],
130 |       "new-cap": [
131 |         2,
132 |         {
133 |           "newIsCap": true,
134 |           "capIsNew": false
135 |         }
136 |       ],
137 |       "new-parens": 2,
138 |       "no-array-constructor": 2,
139 |       "no-caller": 2,
140 |       "no-console": "off",
141 |       "no-class-assign": 2,
142 |       "no-cond-assign": 2,
143 |       "no-const-assign": 2,
144 |       "no-control-regex": 2,
145 |       "no-delete-var": 2,
146 |       "no-dupe-args": 2,
147 |       "no-dupe-class-members": 2,
148 |       "no-dupe-keys": 2,
149 |       "no-duplicate-case": 2,
150 |       "no-empty-character-class": 2,
151 |       "no-empty-pattern": 2,
152 |       "no-eval": 2,
153 |       "no-ex-assign": 2,
154 |       "no-extend-native": 2,
155 |       "no-extra-bind": 2,
156 |       "no-extra-boolean-cast": 2,
157 |       "no-extra-parens": [
158 |         2,
159 |         "functions"
160 |       ],
161 |       "no-fallthrough": 2,
162 |       "no-floating-decimal": 2,
163 |       "no-func-assign": 2,
164 |       "no-implied-eval": 2,
165 |       "no-inner-declarations": [
166 |         2,
167 |         "functions"
168 |       ],
169 |       "no-invalid-regexp": 2,
170 |       "no-irregular-whitespace": 2,
171 |       "no-iterator": 2,
172 |       "no-label-var": 2,
173 |       "no-labels": [
174 |         2,
175 |         {
176 |           "allowLoop": false,
177 |           "allowSwitch": false
178 |         }
179 |       ],
180 |       "no-lone-blocks": 2,
181 |       "no-mixed-spaces-and-tabs": 2,
182 |       "no-multi-spaces": 2,
183 |       "no-multi-str": 2,
184 |       "no-multiple-empty-lines": [
185 |         2,
186 |         {
187 |           "max": 1
188 |         }
189 |       ],
190 |       "no-native-reassign": 2,
191 |       "no-negated-in-lhs": 2,
192 |       "no-new-object": 2,
193 |       "no-new-require": 2,
194 |       "no-new-symbol": 2,
195 |       "no-new-wrappers": 2,
196 |       "no-obj-calls": 2,
197 |       "no-octal": 2,
198 |       "no-octal-escape": 2,
199 |       "no-path-concat": 2,
200 |       "no-proto": 2,
201 |       "no-redeclare": 2,
202 |       "no-regex-spaces": 2,
203 |       "no-return-assign": [
204 |         2,
205 |         "except-parens"
206 |       ],
207 |       "no-self-assign": 2,
208 |       "no-self-compare": 2,
209 |       "no-sequences": 2,
210 |       "no-shadow-restricted-names": 2,
211 |       "no-spaced-func": 2,
212 |       "no-sparse-arrays": 2,
213 |       "no-this-before-super": 2,
214 |       "no-throw-literal": 2,
215 |       "no-trailing-spaces": 2,
216 |       "no-undef": 2,
217 |       "no-undef-init": 2,
218 |       "no-unexpected-multiline": 2,
219 |       "no-unmodified-loop-condition": 2,
220 |       "no-unneeded-ternary": [
221 |         2,
222 |         {
223 |           "defaultAssignment": false
224 |         }
225 |       ],
226 |       "no-unreachable": 2,
227 |       "no-unsafe-finally": 2,
228 |       "no-unused-vars": [
229 |         2,
230 |         {
231 |           "vars": "all",
232 |           "args": "none"
233 |         }
234 |       ],
235 |       "no-useless-call": 2,
236 |       "no-useless-computed-key": 2,
237 |       "no-useless-constructor": 2,
238 |       "no-useless-escape": 0,
239 |       "no-whitespace-before-property": 2,
240 |       "no-with": 2,
241 |       "one-var": [
242 |         2,
243 |         {
244 |           "initialized": "never"
245 |         }
246 |       ],
247 |       "operator-linebreak": [
248 |         2,
249 |         "after",
250 |         {
251 |           "overrides": {
252 |             "?": "before",
253 |             ":": "before"
254 |           }
255 |         }
256 |       ],
257 |       "padded-blocks": [
258 |         2,
259 |         "never"
260 |       ],
261 |       "quotes": [
262 |         2,
263 |         "single",
264 |         {
265 |           "avoidEscape": true,
266 |           "allowTemplateLiterals": true
267 |         }
268 |       ],
269 |       "semi": [
270 |         2,
271 |         "never"
272 |       ],
273 |       "semi-spacing": [
274 |         2,
275 |         {
276 |           "before": false,
277 |           "after": true
278 |         }
279 |       ],
280 |       "space-before-blocks": [
281 |         2,
282 |         "always"
283 |       ],
284 |       "space-before-function-paren": [
285 |         2,
286 |         "never"
287 |       ],
288 |       "space-in-parens": [
289 |         2,
290 |         "never"
291 |       ],
292 |       "space-infix-ops": 2,
293 |       "space-unary-ops": [
294 |         2,
295 |         {
296 |           "words": true,
297 |           "nonwords": false
298 |         }
299 |       ],
300 |       "spaced-comment": [
301 |         2,
302 |         "always",
303 |         {
304 |           "markers": [
305 |             "global",
306 |             "globals",
307 |             "eslint",
308 |             "eslint-disable",
309 |             "*package",
310 |             "!",
311 |             ","
312 |           ]
313 |         }
314 |       ],
315 |       "template-curly-spacing": [
316 |         2,
317 |         "never"
318 |       ],
319 |       "use-isnan": 2,
320 |       "valid-typeof": 2,
321 |       "wrap-iife": [
322 |         2,
323 |         "any"
324 |       ],
325 |       "yield-star-spacing": [
326 |         2,
327 |         "both"
328 |       ],
329 |       "yoda": [
330 |         2,
331 |         "never"
332 |       ],
333 |       "prefer-const": 2,
334 |       "object-curly-spacing": [
335 |         2,
336 |         "always",
337 |         {
338 |           "objectsInObjects": false
339 |         }
340 |       ],
341 |       "array-bracket-spacing": [
342 |         2,
343 |         "never"
344 |       ]
345 |     },
346 |     "parserOptions": {
347 |       "parser": "babel-eslint"
348 |     }
349 |   },
350 |   "postcss": {
351 |     "plugins": {
352 |       "autoprefixer": {}
353 |     }
354 |   },
355 |   "browserslist": [
356 |     "> 1%",
357 |     "last 2 versions",
358 |     "not ie <= 11",
359 |     "Android >= 4.0",
360 |     "iOS >= 8"
361 |   ],
362 |   "transformModules": {
363 |     "cube-ui": {
364 |       "transform": "cube-ui/src/modules/${member}",
365 |       "kebabCase": true
366 |     }
367 |   }
368 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chenz-fe/mini-vue-mall/f1f751c36c81931a09dfa8895bd418e39233e665/public/favicon.ico


--------------------------------------------------------------------------------
/public/img/01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chenz-fe/mini-vue-mall/f1f751c36c81931a09dfa8895bd418e39233e665/public/img/01.jpg


--------------------------------------------------------------------------------
/public/img/02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chenz-fe/mini-vue-mall/f1f751c36c81931a09dfa8895bd418e39233e665/public/img/02.jpg


--------------------------------------------------------------------------------
/public/img/03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chenz-fe/mini-vue-mall/f1f751c36c81931a09dfa8895bd418e39233e665/public/img/03.jpg


--------------------------------------------------------------------------------
/public/img/04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chenz-fe/mini-vue-mall/f1f751c36c81931a09dfa8895bd418e39233e665/public/img/04.jpg


--------------------------------------------------------------------------------
/public/img/05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chenz-fe/mini-vue-mall/f1f751c36c81931a09dfa8895bd418e39233e665/public/img/05.jpg


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>mini-vue-mall</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but my-vue-mall doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <transition :name="transitionName">
  4 |       <router-view class="child-view" />
  5 |     </transition>
  6 |     <cube-tab-bar
  7 |       class="cube-container"
  8 |       v-model="selectedLabel"
  9 |       :data="tabs"
 10 |       @change="changeHandler"
 11 |     >
 12 |       <cube-tab
 13 |         class="tab-box"
 14 |         v-for="(item,index) in tabs"
 15 |         :label="item.value"
 16 |         :key="index"
 17 |       >
 18 |         <i
 19 |           slot="icon"
 20 |           :class="item.icon"
 21 |         ></i>
 22 |         <span>{{item.label}}</span>
 23 |         <span
 24 |           class="badge"
 25 |           v-if="showBadge(item.label)"
 26 |         >{{cartTotal}}</span>
 27 | 
 28 |       </cube-tab>
 29 |     </cube-tab-bar>
 30 | 
 31 |   </div>
 32 | </template>
 33 | <script>
 34 | import { mapGetters } from 'vuex'
 35 | export default {
 36 |   data() {
 37 |     return {
 38 |       selectedLabel: '',
 39 |       tabs: [
 40 |         {
 41 |           label: 'Home',
 42 |           value: '/',
 43 |           icon: 'cubeic-home'
 44 |         },
 45 |         {
 46 |           label: 'Mall',
 47 |           value: '/cart',
 48 |           icon: 'cubeic-mall'
 49 |         },
 50 |         {
 51 |           label: 'Me',
 52 |           value: '/login',
 53 |           icon: 'cubeic-person'
 54 |         }
 55 |       ],
 56 |       transitionName: 'route-forward'
 57 |     }
 58 |   },
 59 |   watch: {
 60 |     $route(route) {
 61 |       this.selectedLabel = route.path
 62 |       this.transitionName = this.$router.transitionName
 63 |     }
 64 |   },
 65 |   created() {
 66 |     this.selectedLabel = this.$route.path
 67 |   },
 68 |   methods: {
 69 |     changeHandler(val) {
 70 |       this.$router.push(val)
 71 |     },
 72 |     showBadge(label) {
 73 |       return label === 'Mall' && this.cartTotal > 0
 74 |     }
 75 |   },
 76 |   computed: {
 77 |     ...mapGetters(['isLogin', 'cartTotal'])
 78 |   }
 79 | }
 80 | </script>
 81 | 
 82 | <style>
 83 | .cube-container {
 84 |   width: 100%;
 85 |   position: fixed;
 86 |   bottom: 0;
 87 |   background-color: #f0f0f0;
 88 | }
 89 | 
 90 | .cube-tab {
 91 |   height: 40px;
 92 |   display: flex;
 93 |   justify-content: center;
 94 |   align-items: center;
 95 |   flex-direction: column;
 96 | }
 97 | 
 98 | .tab-box {
 99 |   position: relative;
100 | }
101 | 
102 | .badge {
103 |   position: absolute;
104 |   top: 0;
105 |   right: 25px;
106 |   padding: 4px;
107 |   min-width: 18px;
108 |   height: 18px;
109 |   line-height: 18px;
110 |   color: #fff;
111 |   background-color: red;
112 |   border-radius: 100%;
113 | }
114 | 
115 | .route-forward-enter {
116 |   transform: translate3d(-100%, 0, 0);
117 | }
118 | .route-back-enter {
119 |   transform: translate3d(100%, 0, 0);
120 | }
121 | 
122 | .route-forward-leave-to {
123 |   transform: translate3d(100%, 0, 0);
124 | }
125 | .route-back-leave-to {
126 |   transform: translate3d(-100%, 0, 0);
127 | }
128 | 
129 | .route-forward-enter-active,
130 | .route-forward-leave-active,
131 | .route-back-enter-active,
132 | .route-back-leave-active {
133 |   transition: transform 0.3s;
134 | }
135 | 
136 | .child-view {
137 |   position: absolute;
138 |   left: 0;
139 |   top: 0;
140 |   width: 100%;
141 |   padding-bottom: 50px;
142 | }
143 | </style>
144 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chenz-fe/mini-vue-mall/f1f751c36c81931a09dfa8895bd418e39233e665/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/BallAnimation.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="ball-wrap">
 3 |       <transition
 4 |         @before-enter="beforeEnter"
 5 |         @enter="enter"
 6 |         @after-enter="afterEnter"
 7 |       >
 8 |         <div
 9 |           class="ball"
10 |           v-show="ball.show"
11 |         >
12 |           <div class="inner">
13 |             <div class="cubeic-add"></div>
14 |           </div>
15 |         </div>
16 |       </transition>
17 |     </div>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |   name: 'ballAnimation',
23 |   props: ['el'],
24 |   data() {
25 |     return {
26 |       ball: {
27 |         show: false,
28 |         el: this.el
29 |       }
30 |     }
31 |   },
32 |   methods: {
33 |     start() {
34 |       this.ball.show = true
35 |     },
36 |     beforeEnter(el) {
37 |       const dom = this.ball.el
38 |       const rect = dom.getBoundingClientRect()
39 |       const x = rect.left - window.innerWidth / 2
40 |       const y = -(window.innerHeight - rect.top - 30)
41 |       el.style.transform = `translate3d(0,${y}px,0)`
42 |       const inner = el.querySelector('.inner')
43 |       inner.style.transform = `translate3d(${x}px,0,0)`
44 |     },
45 |     enter(el, done) {
46 |       document.body.offsetHeight
47 |       el.style.transform = `translate3d(0,0,0)`
48 |       const inner = el.querySelector('.inner')
49 |       inner.style.transform = `translate3d(0,0,0)`
50 |       el.addEventListener('transitionend', done)
51 |     },
52 |     afterEnter(el) {
53 |       this.ball.show = false
54 |       el.style.display = 'none'
55 |       this.$emit('transitionend')
56 |     }
57 |   }
58 | }
59 | </script>
60 | 
61 | <style lang="stylus" scoped>
62 | .ball-wrap {
63 |   .ball {
64 |     position: fixed;
65 |     left: 50%;
66 |     bottom: 10px;
67 |     z-index: 100000;
68 |     color: red;
69 |     transition: all 0.5s cubic-bezier(0.49, -0.29, 0.75, 0.41);
70 | 
71 |     .inner {
72 |       width: 16px;
73 |       height: 16px;
74 |       transition: all 0.5s linear;
75 | 
76 |       .cubeic-add {
77 |         font-size: 22px;
78 |       }
79 |     }
80 |   }
81 | }
82 | 
83 | </style>
84 | 


--------------------------------------------------------------------------------
/src/components/GoodsList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div
 4 |       class="item"
 5 |       v-for="item in goods"
 6 |       :key="item.id"
 7 |     >
 8 |       <router-link :to="`/detail/${item.id}`">
 9 |         <div class="left">
10 |           <!-- 点击图片显示预览图 -->
11 |           <img
12 |             :src="item.img"
13 |             alt
14 |             @click.stop.prevent="imgPreview(item.img)"
15 |           >
16 |         </div>
17 |         <div class="right">
18 |           <div class="title">{{item.title}}</div>
19 |           <div class="info">
20 |             <span>{{item.count}}人购买</span>
21 |             <i
22 |               class="cubeic-add"
23 |               @click.stop.prevent="addCart($event,item)"
24 |             ></i>
25 |           </div>
26 |         </div>
27 |       </router-link>
28 |     </div>
29 |   </div>
30 | </template>
31 | 
32 | <script>
33 | export default {
34 |   props: ['goods'],
35 |   methods: {
36 |     addCart($event, item) {
37 |       this.$store.commit('addCart', item)
38 |       this.$emit('addCart', $event.target)
39 |     },
40 |     imgPreview(img) {
41 |       this.$createImagePreview({
42 |         imgs: [img]
43 |       }).show()
44 |     }
45 |   }
46 | }
47 | </script>
48 | 
49 | <style lang="stylus" scope>
50 | .item
51 |   padding: 10px
52 |   overflow: hidden
53 |   .left
54 |     width: 130px
55 |     float: left
56 |     img
57 |       width: 100%
58 |   .right
59 |     float right
60 |     text-align: left
61 |     height 75px
62 |     .info span
63 |       display: inline-block
64 |       width: 110px
65 |       margin-top 10px
66 |     .title
67 |       line-height: 30px
68 |       font-size 18px
69 |     .cubeic-add
70 |       font-size: 20px
71 |       margin-right: 20px
72 | </style>
73 | 


--------------------------------------------------------------------------------
/src/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="header">
 3 |     <i class="cubeic-back" v-if="$routerHistory.canBack()" @click="back"></i>
 4 |     <div class="title">{{title}}</div>
 5 |     <div class="extend">
 6 |       <slot></slot>
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   props: {
14 |     title: {
15 |       type: String,
16 |       default: ''
17 |     }
18 |   },
19 |   methods: {
20 |     back() {
21 |       this.$router.goBack()
22 |     }
23 |   }
24 | 
25 | }
26 | </script>
27 | 
28 | <style lang="stylus" scoped>
29 | .header
30 |   height 50px
31 |   display flex
32 |   align-items center
33 |   font-size 20px
34 |   position relative
35 | 
36 |   .title
37 |     position absolute
38 |     left 50%
39 |     transform translate3d(-50%,0,0)
40 | 
41 | </style>
42 | 


--------------------------------------------------------------------------------
/src/cube-ui.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | // By default we import all the components.
 4 | // Only reserve the components on demand and remove the rest.
 5 | // Style is always required.
 6 | import {
 7 |   /* eslint-disable no-unused-vars */
 8 |   Style,
 9 |   // basic
10 |   Button,
11 |   TabBar,
12 |   Input,
13 |   Form,
14 |   // popup
15 |   Toast,
16 |   Drawer,
17 |   ImagePreview,
18 |   Slide
19 | } from 'cube-ui'
20 | 
21 | Vue.use(Button)
22 | Vue.use(TabBar)
23 | Vue.use(Input)
24 | Vue.use(Form)
25 | Vue.use(Toast)
26 | Vue.use(Drawer)
27 | Vue.use(ImagePreview)
28 | Vue.use(Slide)
29 | 


--------------------------------------------------------------------------------
/src/http-interceptor.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import store from './store'
 3 | import router from './router'
 4 | 
 5 | axios.interceptors.request.use(config => {
 6 |   if (store.state.token) {
 7 |     config.headers.token = store.state.token
 8 |   }
 9 |   return config
10 | })
11 | 
12 | axios.interceptors.response.use(
13 |   response => {
14 |     if (response.status === 200) {
15 |       const data = response.data
16 |       if (data.code === -1) {
17 |         clearHandler()
18 |       }
19 |     }
20 |     return response
21 |   },
22 |   err => {
23 |     if (err.response.status === 401) {
24 |       clearHandler()
25 |     }
26 |   }
27 | )
28 | 
29 | function clearHandler() {
30 |   store.commit('setToken', '')
31 |   localStorage.removeItem('token')
32 |   router.push({
33 |     path: '/login',
34 |     query: {
35 |       redirect: router.currentRoute.path
36 |     }
37 |   })
38 | }
39 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import './cube-ui'
 3 | import App from './App.vue'
 4 | import router from './router'
 5 | import store from './store'
 6 | import axios from 'axios'
 7 | import './http-interceptor'
 8 | import XHeader from './components/Header.vue'
 9 | 
10 | Vue.config.productionTip = false
11 | 
12 | Vue.component('x-header', XHeader)
13 | 
14 | Vue.prototype.$http = axios
15 | 
16 | new Vue({
17 |   router,
18 |   store,
19 |   render: h => h(App)
20 | }).$mount('#app')
21 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Home from './views/Home.vue'
 4 | import Login from './views/Login.vue'
 5 | import store from './store'
 6 | import History from './utils/history'
 7 | 
 8 | Vue.use(Router)
 9 | Vue.use(History)
10 | 
11 | Router.prototype.goBack = function() {
12 |   this.isBack = true
13 |   this.back()
14 | }
15 | 
16 | const router = new Router({
17 |   routes: [
18 |     {
19 |       path: '/',
20 |       name: 'home',
21 |       component: Home
22 |     },
23 |     {
24 |       path: '/Login',
25 |       name: 'login',
26 |       component: Login
27 |     },
28 |     {
29 |       path: '/Cart',
30 |       name: 'cart',
31 |       meta: { auth: true },
32 |       // route level code-splitting
33 |       // this generates a separate chunk (about.[hash].js) for this route
34 |       // which is lazy-loaded when the route is visited.
35 |       component: () =>
36 |         import(/* webpackChunkName: "about" */ './views/Cart.vue')
37 |     }
38 |   ]
39 | })
40 | 
41 | router.beforeEach((to, from, next) => {
42 |   if (to.meta.auth) {
43 |     if (store.state.token) {
44 |       next()
45 |     } else {
46 |       next({
47 |         path: '/login',
48 |         query: { redirect: to.path }
49 |       })
50 |     }
51 |   } else {
52 |     next()
53 |   }
54 | })
55 | 
56 | router.afterEach((to) => {
57 |   if (router.isBack) {
58 |     History.pop()
59 |     router.isBack = false
60 |     router.transitionName = 'route-back'
61 |   } else {
62 |     History.push(to.path)
63 |     router.transitionName = 'route-forward'
64 |   }
65 | })
66 | 
67 | export default router
68 | 


--------------------------------------------------------------------------------
/src/services/create.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | function create(Component, props) {
 4 |   const instance = new Vue({
 5 |     render(h) {
 6 |       return h(Component, { props })
 7 |     }
 8 |   }).$mount() // 执行挂载
 9 |   // 将真实dom节点插入文档中
10 |   document.body.appendChild(instance.$el)
11 |   // 获取组件实例
12 |   const comp = instance.$children[0]
13 |   // 销毁组件，释放内存
14 |   comp.remove = () => {
15 |     instance.$destroy()
16 |   }
17 |   return comp
18 | }
19 | 
20 | export default create
21 | 


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | const store = new Vuex.Store({
 7 |   state: {
 8 |     token: localStorage.getItem('token') || '',
 9 |     cart: JSON.parse(localStorage.getItem('cart')) || []
10 |   },
11 |   mutations: {
12 |     setToken(state, token) {
13 |       state.token = token
14 |     },
15 |     addCart(state, item) {
16 |       const good = state.cart.find(v => v.id === item.id)
17 |       if (good) {
18 |         good.cartCount += 1
19 |       } else {
20 |         state.cart.push({
21 |           ...item,
22 |           cartCount: 1
23 |         })
24 |       }
25 |     },
26 |     countMinus(state, index) {
27 |       const item = state.cart[index]
28 |       if (item.cartCount > 1) {
29 |         item.cartCount -= 1
30 |       } else {
31 |         state.cart.splice(index, 1)
32 |       }
33 |     },
34 |     countAdd(state, index) {
35 |       state.cart[index].cartCount += 1
36 |     }
37 |   },
38 |   actions: {},
39 |   getters: {
40 |     isLogin: state => {
41 |       return !!state.token
42 |     },
43 |     cartTotal: state => {
44 |       let num = 0
45 |       state.cart.forEach(v => {
46 |         num += v.cartCount
47 |       })
48 |       return num
49 |     },
50 |     total: state =>
51 |       state.cart.reduce((num, v) => (num += v.cartCount * v.price), 0)
52 |   }
53 | })
54 | 
55 | store.subscribe((mutation, state) => {
56 |   switch (mutation.type) {
57 |     case 'setToken':
58 |       localStorage.setItem('token', JSON.stringify(state.token))
59 |       break
60 |     case 'addCart':
61 |       localStorage.setItem('cart', JSON.stringify(state.cart))
62 |       break
63 |   }
64 | })
65 | 
66 | export default store
67 | 


--------------------------------------------------------------------------------
/src/theme.styl:
--------------------------------------------------------------------------------
  1 | @require "~cube-ui/src/common/stylus/var/color.styl"
  2 | 
  3 | 
  4 | // action-sheet
  5 | $action-sheet-color := $color-grey
  6 | $action-sheet-active-color := $color-orange
  7 | $action-sheet-bgc := $color-white
  8 | $action-sheet-active-bgc := $color-light-grey-opacity
  9 | $action-sheet-title-color := $color-dark-grey
 10 | $action-sheet-space-bgc := $color-mask-bg
 11 | /// picker style
 12 | $action-sheet-picker-cancel-color := $color-light-grey
 13 | $action-sheet-picker-cancel-active-color := $color-light-grey-s
 14 | 
 15 | // bubble
 16 | 
 17 | // button
 18 | $btn-color := $color-white
 19 | $btn-bgc := $color-regular-blue
 20 | $btn-bdc := $color-regular-blue
 21 | $btn-active-bgc := $color-blue
 22 | $btn-active-bdc := $color-blue
 23 | $btn-disabled-color := $color-white
 24 | $btn-disabled-bgc := $color-light-grey-s
 25 | $btn-disabled-bdc := $color-light-grey-s
 26 | /// primary
 27 | $btn-primary-color := $color-white
 28 | $btn-primary-bgc := $color-orange
 29 | $btn-primary-bdc := $color-orange
 30 | $btn-primary-active-bgc := $color-dark-orange
 31 | $btn-primary-active-bdc := $color-dark-orange
 32 | /// light
 33 | $btn-light-color := $color-grey
 34 | $btn-light-bgc := $color-light-grey-sss
 35 | $btn-light-bdc := $color-light-grey-sss
 36 | $btn-light-active-bgc := $color-active-grey
 37 | $btn-light-active-bdc := $color-active-grey
 38 | /// outline
 39 | $btn-outline-color := $color-grey
 40 | $btn-outline-bgc := transparent
 41 | $btn-outline-bdc := $color-grey
 42 | $btn-outline-active-bgc := $color-grey-opacity
 43 | $btn-outline-active-bdc := $color-grey
 44 | /// outline-primary
 45 | $btn-outline-primary-color := $color-orange
 46 | $btn-outline-primary-bgc := transparent
 47 | $btn-outline-primary-bdc := $color-orange
 48 | $btn-outline-primary-active-bgc := $color-orange-opacity
 49 | $btn-outline-primary-active-bdc := $color-dark-orange
 50 | 
 51 | // toolbar
 52 | $toolbar-bgc := $color-light-grey-sss
 53 | $toolbar-active-bgc := $color-active-grey
 54 | 
 55 | // checkbox
 56 | $checkbox-color := $color-grey
 57 | $checkbox-icon-color := $color-light-grey-s
 58 | /// checked
 59 | $checkbox-checked-icon-color := $color-orange
 60 | $checkbox-checked-icon-bgc := $color-white
 61 | /// disabled
 62 | $checkbox-disabled-icon-color := $color-light-grey-ss
 63 | $checkbox-disabled-icon-bgc := $color-light-grey-ss
 64 | // checkbox hollow
 65 | $checkbox-hollow-checked-icon-color := $color-orange
 66 | $checkbox-hollow-disabled-icon-color := $color-light-grey-ss
 67 | // checkbox-group
 68 | $checkbox-group-bgc := $color-white
 69 | $checkbox-group-horizontal-bdc := $color-light-grey-s
 70 | 
 71 | // radio
 72 | $radio-group-bgc := $color-white
 73 | $radio-group-horizontal-bdc := $color-light-grey-s
 74 | $radio-color := $color-grey
 75 | $radio-icon-color := $color-light-grey-s
 76 | /// selected
 77 | $radio-selected-icon-color := $color-white
 78 | $radio-selected-icon-bgc := $color-orange
 79 | /// disabled
 80 | $radio-disabled-icon-bgc := $color-light-grey-ss
 81 | // radio hollow
 82 | $radio-hollow-selected-icon-color := $color-orange
 83 | $radio-hollow-disabled-icon-color := $color-light-grey-ss
 84 | 
 85 | // dialog
 86 | $dialog-color := $color-grey
 87 | $dialog-bgc := $color-white
 88 | $dialog-icon-color := $color-regular-blue
 89 | $dialog-icon-bgc := $color-background
 90 | $dialog-title-color := $color-dark-grey
 91 | $dialog-close-color := $color-light-grey
 92 | $dialog-btn-color := $color-light-grey
 93 | $dialog-btn-bgc := $color-white
 94 | $dialog-btn-active-bgc := $color-light-grey-opacity
 95 | $dialog-btn-highlight-color := $color-orange
 96 | $dialog-btn-highlight-active-bgc := $color-light-orange-opacity
 97 | $dialog-btn-disabled-color := $color-light-grey
 98 | $dialog-btn-disabled-active-bgc := transparent
 99 | $dialog-btns-split-color := $color-row-line
100 | 
101 | // index-list
102 | $index-list-bgc := $color-white
103 | $index-list-title-color := $color-dark-grey
104 | $index-list-anchor-color := $color-light-grey
105 | $index-list-anchor-bgc := #f7f7f7
106 | $index-list-item-color := $color-dark-grey
107 | $index-list-item-active-bgc := $color-light-grey-opacity
108 | $index-list-nav-color := $color-grey
109 | $index-list-nav-active-color := $color-orange
110 | 
111 | // loading
112 | 
113 | // picker
114 | $picker-bgc := $color-white
115 | $picker-title-color := $color-dark-grey
116 | $picker-subtitle-color := $color-light-grey
117 | $picker-confirm-btn-color := $color-orange
118 | $picker-confirm-btn-active-color := $color-light-orange
119 | $picker-cancel-btn-color := $color-light-grey
120 | $picker-cancel-btn-active-color := $color-light-grey-s
121 | $picker-item-color := $color-dark-grey
122 | 
123 | // popup
124 | $popup-mask-bgc := rgb(37, 38, 45)
125 | $popup-mask-opacity := .4
126 | 
127 | //scroll
128 | 
129 | // slide
130 | $slide-dot-bgc := $color-light-grey-s
131 | $slide-dot-active-bgc := $color-orange
132 | 
133 | // time-picker
134 | 
135 | // tip
136 | $tip-color := $color-white
137 | $tip-bgc := $color-dark-grey-opacity
138 | 
139 | // toast
140 | $toast-color := $color-light-grey-s
141 | $toast-bgc := rgba(37, 38, 45, 0.9)
142 | 
143 | // upload
144 | $upload-btn-color := $color-grey
145 | $upload-btn-bgc := $color-white
146 | $upload-btn-active-bgc := $color-light-grey-opacity
147 | $upload-btn-box-shadow := 0 0 6px 2px $color-grey-opacity
148 | $upload-btn-border-color := #e5e5e5
149 | $upload-file-bgc := $color-white
150 | $upload-file-remove-color := rgba(0, 0, 0, .8)
151 | $upload-file-remove-bgc := $color-white
152 | $upload-file-state-bgc := $color-mask-bg
153 | $upload-file-success-color := $color-orange
154 | $upload-file-error-color := #f43530
155 | $upload-file-status-bgc := $color-white
156 | $upload-file-progress-color := $color-white
157 | 
158 | // switch
159 | $switch-on-bgc := $color-orange
160 | $switch-off-bgc := $color-white
161 | $switch-off-border-color := #e4e4e4
162 | 
163 | // input
164 | $input-color := $color-grey
165 | $input-bgc := $color-white
166 | $input-border-color := $color-row-line
167 | $input-focus-border-color := $color-orange
168 | $input-placeholder-color := $color-light-grey-s
169 | $input-clear-icon-color := $color-light-grey
170 | 
171 | //textarea
172 | $textarea-color := $color-grey
173 | $textarea-bgc := $color-white
174 | $textarea-border-color := $color-row-line
175 | $textarea-focus-border-color := $color-orange
176 | $textarea-outline-color := $color-orange
177 | $textarea-placeholder-color := $color-light-grey-s
178 | $textarea-indicator-color := $color-light-grey-s
179 | 
180 | // validator
181 | $validator-msg-def-color := #e64340
182 | 
183 | // select
184 | $select-color := $color-grey
185 | $select-bgc := $color-white
186 | $select-disabled-color := #b8b8b8
187 | $select-disabled-bgc := $color-light-grey-opacity
188 | $select-border-color := $color-light-grey-s
189 | $select-border-active-color := $color-orange
190 | $select-icon-color := $color-light-grey
191 | $select-placeholder-color := $color-light-grey-s
192 | 
193 | // swipe
194 | $swipe-btn-color := $color-white
195 | 
196 | // form
197 | $form-color := $color-grey
198 | $form-bgc := $color-white
199 | $form-invalid-color := #e64340
200 | $form-group-legend-color := $color-light-grey
201 | $form-group-legend-bgc := $color-background
202 | $form-label-required-color := #e64340
203 | 
204 | // drawer
205 | $drawer-color := $color-dark-grey
206 | $drawer-title-bdc := $color-light-grey-ss
207 | $drawer-title-bgc := $color-white
208 | $drawer-panel-bgc := $color-white
209 | $drawer-item-active-bgc := $color-light-grey-opacity
210 | 
211 | // scroll-nav
212 | $scroll-nav-bgc := $color-white
213 | $scroll-nav-color := $color-grey
214 | $scroll-nav-active-color := $color-orange
215 | 
216 | // image-preview
217 | $image-preview-counter-color := $color-white
218 | 
219 | // tab-bar & tab-panel
220 | $tab-color := $color-grey
221 | $tab-active-color := $color-dark-orange
222 | $tab-slider-bgc := $color-dark-orange
223 | 


--------------------------------------------------------------------------------
/src/utils/history.js:
--------------------------------------------------------------------------------
 1 | const History = {
 2 |   _history: [],
 3 |   install(Vue) {
 4 |     Object.defineProperty(Vue.prototype, '$routerHistory', {
 5 |       get() {
 6 |         return History
 7 |       }
 8 |     })
 9 |   },
10 |   push(path) {
11 |     this._history.push(path)
12 |   },
13 |   pop() {
14 |     this._history.pop()
15 |   },
16 |   canBack() {
17 |     return this._history.length > 1
18 |   }
19 | }
20 | export default History
21 | 


--------------------------------------------------------------------------------
/src/views/Cart.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="cart-container">
 3 |     <div
 4 |       class="good"
 5 |       v-for="(item,index) in cart"
 6 |       :key="item.id"
 7 |     >
 8 |       {{item.title}}
 9 |       <div class="right">
10 |         <i
11 |           class="cubeic-remove"
12 |           @click="countMinus(index)"
13 |         ></i>
14 |         <span class="num-span">
15 |           {{item.cartCount}}
16 |         </span>
17 |         <i
18 |           class="cubeic-add"
19 |           @click="countAdd(index)"
20 |         ></i>
21 |       </div>
22 |     </div>
23 |     <div class="totalbox">
24 |       总价 {{total}}
25 |     </div>
26 |     <div class="btnbox">
27 |       <cube-button
28 |         :disabled="true"
29 |         v-if="total<minTotal"
30 |       >
31 |         还差{{minTotal-total}}可以购买
32 |       </cube-button>
33 |       <cube-button v-else>
34 |         下单
35 |         <span v-if="!token">
36 |           (需要登录)
37 |         </span>
38 |       </cube-button>
39 |     </div>
40 |   </div>
41 | </template>
42 | <script>
43 | import { mapState, mapGetters } from 'vuex'
44 | export default {
45 |   data() {
46 |     return {
47 |       minTotal: 1000
48 |     }
49 |   },
50 |   computed: {
51 |     ...mapState({
52 |       cart: state => state.cart,
53 |       token: state => state.token
54 |     }),
55 |     ...mapGetters({
56 |       total: 'total'
57 |     })
58 |   },
59 |   methods: {
60 |     countAdd(index) {
61 |       this.$store.commit('countAdd', index)
62 |     },
63 |     countMinus(index) {
64 |       this.$store.commit('countMinus', index)
65 |     }
66 |   }
67 | }
68 | </script>
69 | 
70 | <style lang="stylus">
71 | .cart-container
72 |   font-size: 18px
73 | .totalbox
74 |   padding: 20px
75 | .num-span
76 |   display: inline-block
77 |   width: 30px
78 |   text-align: center
79 | .good
80 |   padding: 20px
81 |   text-align: left
82 |   border-bottom: 1px solid #f5f5f5
83 |   .right
84 |     float: right
85 |   i
86 |     font-size: 18px
87 | </style>
88 | 
89 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="home">
  3 |     <x-header title="小菠萝商城"></x-header>
  4 |     <cube-slide
  5 |       ref="slide"
  6 |       :data="slider"
  7 |     >
  8 |       <cube-slide-item
  9 |         v-for="(item, index) in slider"
 10 |         :key="index"
 11 |       >
 12 |         <router-link :to="`/detail/${item.id}`">
 13 |           <img
 14 |             :src="item.img"
 15 |             class="slider"
 16 |           >
 17 |         </router-link>
 18 |       </cube-slide-item>
 19 |     </cube-slide>
 20 |     <cube-button @click="showCatg">选择分类</cube-button>
 21 |     <cube-drawer
 22 |       ref="drawer"
 23 |       title="请选择"
 24 |       :data="[drawerList]"
 25 |       @select="selectHandler"
 26 |     ></cube-drawer>
 27 |     <!-- 商品列表 -->
 28 |     <goods-list
 29 |       :goods="filterGoods"
 30 |       @addCart="onAddCart"
 31 |     ></goods-list>
 32 |     <!-- 加购物车动画 -->
 33 | 
 34 |   </div>
 35 | </template>
 36 | 
 37 | <script>
 38 | import GoodsList from '../components/GoodsList.vue'
 39 | import create from '../services/create.js'
 40 | import BallAnimation from '../components/BallAnimation.vue'
 41 | const labels = {
 42 |   phone: '手机数码',
 43 |   equipment: '家用电器',
 44 |   market: '生鲜超市',
 45 |   book: '图书音像',
 46 |   sport: '运动户外'
 47 | }
 48 | export default {
 49 |   name: 'home',
 50 |   data() {
 51 |     return {
 52 |       slider: [],
 53 |       goods: [],
 54 |       selectedKeys: [],
 55 |       keys: []
 56 |     }
 57 |   },
 58 |   components: {
 59 |     GoodsList
 60 |   },
 61 |   created() {
 62 |     this.getGoodsListData()
 63 |   },
 64 |   methods: {
 65 |     async getGoodsListData() {
 66 |       const {
 67 |         data: { data: goods, slider, keys }
 68 |       } = await this.$http.get('/api/goods')
 69 |       this.slider = slider
 70 |       this.goods = goods
 71 |       this.keys = keys
 72 |       this.selectedKeys = [...this.keys]
 73 |     },
 74 |     showCatg() {
 75 |       this.$refs.drawer.show()
 76 |     },
 77 |     selectHandler(val) {
 78 |       this.selectedKeys = [...val]
 79 |     },
 80 |     onAddCart(el) {
 81 |       const anim = create(BallAnimation, { el })
 82 |       anim.start()
 83 |       anim.$on('transitionend', () => {
 84 |         anim.remove()
 85 |       })
 86 |     }
 87 |   },
 88 |   computed: {
 89 |     filterGoods() {
 90 |       let ret = []
 91 |       this.selectedKeys.forEach(v => {
 92 |         ret = ret.concat(this.goods[v])
 93 |       })
 94 |       return ret
 95 |     },
 96 |     drawerList() {
 97 |       return this.keys.map(v => {
 98 |         return {
 99 |           value: v,
100 |           text: labels[v]
101 |         }
102 |       })
103 |     }
104 |   }
105 | }
106 | </script>
107 | 
108 | <style lang="stylus">
109 | .cube-slide-item img {
110 |   width: 100%;
111 |   height: auto;
112 | }
113 | 
114 | .cube-slide-dots {
115 |   bottom: 10px;
116 | }
117 | 
118 | </style>
119 | 


--------------------------------------------------------------------------------
/src/views/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="form-container">
  3 |     <cube-form
  4 |       v-if="!isLogin"
  5 |       :model="model"
  6 |       :schema="schema"
  7 |       @validate="validateHandler"
  8 |       @submit.prevent="submitHandler"
  9 |     ></cube-form>
 10 |     <div
 11 |       v-else
 12 |       @click="logout"
 13 |     >
 14 |       <div class="userinfo-box">你好，小菠萝！</div>
 15 |       <cube-button>退出登录</cube-button>
 16 |     </div>
 17 |   </div>
 18 | </template>
 19 | 
 20 | <script>
 21 | import { mapGetters } from 'vuex'
 22 | export default {
 23 |   data() {
 24 |     return {
 25 |       model: {
 26 |         userName: '',
 27 |         password: ''
 28 |       },
 29 |       schema: {
 30 |         fields: [
 31 |           {
 32 |             type: 'input',
 33 |             modelKey: 'username',
 34 |             label: '用户名',
 35 |             props: {
 36 |               placeholder: '请输入用户名'
 37 |             },
 38 |             rules: {
 39 |               required: true
 40 |             },
 41 |             trigger: 'blur',
 42 |             messages: {
 43 |               required: '用户名为必填项'
 44 |             }
 45 |           },
 46 |           {
 47 |             type: 'input',
 48 |             modelKey: 'password',
 49 |             label: '密码',
 50 |             props: {
 51 |               placeholder: '请输入密码',
 52 |               type: 'password',
 53 |               eye: { open: false }
 54 |             },
 55 |             rules: {
 56 |               required: true
 57 |             },
 58 |             trigger: 'blur',
 59 |             messages: {
 60 |               required: '密码为必填项'
 61 |             }
 62 |           },
 63 |           {
 64 |             type: 'submit',
 65 |             label: '登录',
 66 |             props: {
 67 |               class: 'submit-btn',
 68 |               style: 'marginTop: 60px'
 69 |             }
 70 |           }
 71 |         ]
 72 |       }
 73 |     }
 74 |   },
 75 |   computed: {
 76 |     ...mapGetters(['isLogin'])
 77 |   },
 78 |   methods: {
 79 |     validateHandler(result) {
 80 |       this.validity = result.validity
 81 |       this.valid = result.valid
 82 |       console.log('校验')
 83 |     },
 84 |     async submitHandler() {
 85 |       const res = await this.$http.get('/api/login', {
 86 |         params: {
 87 |           username: this.model.username,
 88 |           password: this.model.password
 89 |         }
 90 |       })
 91 |       const { code, token, message } = res.data
 92 |       if (code === 0) {
 93 |         this.$store.commit('setToken', token)
 94 |         localStorage.setItem('token', token)
 95 |         const { redirect = '/' } = this.$route.query
 96 |         this.$router.push(redirect)
 97 |       } else {
 98 |         const toast = this.$createToast({
 99 |           time: 2000,
100 |           txt: message || '登录失败',
101 |           type: 'error'
102 |         })
103 |         toast.show()
104 |       }
105 |     },
106 |     logout() {
107 |       this.$http.get('/api/logout')
108 |     }
109 |   }
110 | }
111 | </script>
112 | 
113 | <style lang="stylus" scoped>
114 | .form-container
115 |   margin-top: 100px
116 | .userinfo-box
117 |   display: flex
118 |   justify-content: center
119 |   height: 150px
120 |   font-size: 20px
121 | </style>
122 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
  1 | module.exports = {
  2 |   css: {
  3 |     loaderOptions: {
  4 |       stylus: {
  5 |         'resolve url': true,
  6 |         import: ['./src/theme']
  7 |       }
  8 |     }
  9 |   },
 10 |   pluginOptions: {
 11 |     'cube-ui': {
 12 |       postCompile: true,
 13 |       theme: true
 14 |     }
 15 |   },
 16 |   configureWebpack: {
 17 |     devServer: {
 18 |       before(app) {
 19 |         app.get('/api/goods', function(req, res) {
 20 |           res.json({
 21 |             code: 0,
 22 |             slider: [
 23 |               {
 24 |                 id: 21,
 25 |                 img: '/img/01.jpg'
 26 |               },
 27 |               {
 28 |                 id: 22,
 29 |                 img: '/img/02.jpg'
 30 |               },
 31 |               {
 32 |                 id: 23,
 33 |                 img: '/img/03.jpg'
 34 |               },
 35 |               {
 36 |                 id: 24,
 37 |                 img: '/img/04.jpg'
 38 |               }
 39 |             ],
 40 |             data: {
 41 |               phone: [
 42 |                 {
 43 |                   id: 1,
 44 |                   title: '小米手机',
 45 |                   price: '100',
 46 |                   img: '/img/01.jpg',
 47 |                   count: 100
 48 |                 },
 49 |                 {
 50 |                   id: 2,
 51 |                   title: 'iphone',
 52 |                   price: '120',
 53 |                   img: '/img/03.jpg',
 54 |                   count: 100
 55 |                 },
 56 |                 {
 57 |                   id: 3,
 58 |                   title: '华为',
 59 |                   price: '80',
 60 |                   img: '/img/02.jpg',
 61 |                   count: 100
 62 |                 },
 63 |                 {
 64 |                   id: 4,
 65 |                   title: 'vivo',
 66 |                   price: '110',
 67 |                   img: '/img/04.jpg',
 68 |                   count: 100
 69 |                 },
 70 |                 {
 71 |                   id: 5,
 72 |                   title: 'oppo',
 73 |                   price: '200',
 74 |                   img: '/img/02.jpg',
 75 |                   count: 100
 76 |                 },
 77 |                 {
 78 |                   id: 6,
 79 |                   title: '360手机',
 80 |                   price: '30',
 81 |                   img: '/img/05.jpg',
 82 |                   count: 100
 83 |                 }
 84 |               ],
 85 |               equipment: [
 86 |                 {
 87 |                   id: 7,
 88 |                   title: '电饭煲',
 89 |                   price: '120',
 90 |                   img: '/img/03.jpg',
 91 |                   count: 101
 92 |                 },
 93 |                 {
 94 |                   id: 8,
 95 |                   title: '电冰箱',
 96 |                   price: '80',
 97 |                   img: '/img/02.jpg',
 98 |                   count: 100
 99 |                 },
100 |                 {
101 |                   id: 9,
102 |                   title: '电热水器',
103 |                   price: '110',
104 |                   img: '/img/01.jpg',
105 |                   count: 100
106 |                 },
107 |                 {
108 |                   id: 10,
109 |                   title: '电磁炉',
110 |                   price: '200',
111 |                   img: '/img/04.jpg',
112 |                   count: 100
113 |                 }
114 |               ],
115 |               market: [
116 |                 {
117 |                   id: 11,
118 |                   title: '零食',
119 |                   price: '80',
120 |                   img: '/img/02.jpg',
121 |                   count: 100
122 |                 },
123 |                 {
124 |                   id: 12,
125 |                   title: '水果',
126 |                   price: '110',
127 |                   img: '/img/01.jpg',
128 |                   count: 100
129 |                 },
130 |                 {
131 |                   id: 13,
132 |                   title: '蔬菜',
133 |                   price: '30',
134 |                   img: '/img/04.jpg',
135 |                   count: 100
136 |                 }
137 |               ],
138 |               book: [
139 |                 {
140 |                   id: 14,
141 |                   title: '文学',
142 |                   price: '200',
143 |                   img: '/img/01.jpg',
144 |                   count: 100
145 |                 },
146 |                 {
147 |                   id: 15,
148 |                   title: '历史',
149 |                   price: '120',
150 |                   img: '/img/03.jpg',
151 |                   count: 100
152 |                 },
153 |                 {
154 |                   id: 16,
155 |                   title: 'IT科技',
156 |                   price: '80',
157 |                   img: '/img/02.jpg',
158 |                   count: 100
159 |                 }
160 |               ],
161 |               sport: [
162 |                 {
163 |                   id: 17,
164 |                   title: '跑步鞋',
165 |                   price: '100',
166 |                   img: '/img/01.jpg',
167 |                   count: 100
168 |                 },
169 |                 {
170 |                   id: 18,
171 |                   title: '山地车',
172 |                   price: '120',
173 |                   img: '/img/03.jpg',
174 |                   count: 100
175 |                 },
176 |                 {
177 |                   id: 19,
178 |                   title: '篮球',
179 |                   price: '80',
180 |                   img: '/img/02.jpg',
181 |                   count: 100
182 |                 },
183 |                 {
184 |                   id: 20,
185 |                   title: '瑜伽垫',
186 |                   price: '110',
187 |                   img: '/img/05.jpg',
188 |                   count: 100
189 |                 }
190 |               ]
191 |             },
192 |             keys: ['phone', 'equipment', 'market', 'book', 'sport']
193 |           })
194 |         })
195 | 
196 |         app.get('/api/login', function(req, res) {
197 |           const { username, password } = req.query
198 |           if (username === 'dora' && password === '123') {
199 |             res.json({
200 |               code: 0,
201 |               token: 'xxx'
202 |             })
203 |           } else {
204 |             res.json({
205 |               code: 1,
206 |               message: '用户名或密码错误'
207 |             })
208 |           }
209 |         })
210 | 
211 |         app.get('/api/logout', function(req, res) {
212 |           res.json({ code: -1 })
213 |         })
214 |       }
215 |     }
216 |   }
217 | }
218 | 


--------------------------------------------------------------------------------