├── static
    └── .gitkeep
├── src
    ├── assets
    │   ├── logo.png
    │   ├── images
    │   │   ├── 1.png
    │   │   ├── 2.png
    │   │   ├── 3.png
    │   │   └── 4.png
    │   ├── banks
    │   │   └── banks.png
    │   └── slideShow
    │   │   ├── pic1.jpg
    │   │   ├── pic2.jpg
    │   │   ├── pic3.jpg
    │   │   └── pic4.jpg
    ├── App.vue
    ├── components
    │   ├── base
    │   │   ├── chooser.vue
    │   │   ├── multiplyChooser.vue
    │   │   ├── dialog.vue
    │   │   ├── counter.vue
    │   │   ├── selection.vue
    │   │   └── datepicker.vue
    │   ├── HelloWorld.vue
    │   ├── checkOrder.vue
    │   ├── regForm.vue
    │   ├── logForm.vue
    │   ├── slideShow.vue
    │   ├── bankChooser.vue
    │   └── layout.vue
    ├── main.js
    └── pages
    │   ├── detail
    │       ├── forecast.vue
    │       ├── count.vue
    │       ├── analysis.vue
    │       └── publish.vue
    │   ├── detail.vue
    │   ├── orderList.vue
    │   └── index.vue
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── screenshots
    ├── about.png
    ├── index.png
    ├── login.png
    ├── analysis.png
    ├── orderList.png
    ├── bankChooser.png
    └── checkOrder.png
├── .editorconfig
├── .gitignore
├── .babelrc
├── .postcssrc.js
├── index.html
├── db.json
├── package.json
└── README.md


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WuChenDi/vue-shop/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/screenshots/about.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WuChenDi/vue-shop/HEAD/screenshots/about.png


--------------------------------------------------------------------------------
/screenshots/index.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WuChenDi/vue-shop/HEAD/screenshots/index.png


--------------------------------------------------------------------------------
/screenshots/login.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WuChenDi/vue-shop/HEAD/screenshots/login.png


--------------------------------------------------------------------------------
/screenshots/analysis.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WuChenDi/vue-shop/HEAD/screenshots/analysis.png


--------------------------------------------------------------------------------
/screenshots/orderList.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WuChenDi/vue-shop/HEAD/screenshots/orderList.png


--------------------------------------------------------------------------------
/src/assets/images/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WuChenDi/vue-shop/HEAD/src/assets/images/1.png


--------------------------------------------------------------------------------
/src/assets/images/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WuChenDi/vue-shop/HEAD/src/assets/images/2.png


--------------------------------------------------------------------------------
/src/assets/images/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WuChenDi/vue-shop/HEAD/src/assets/images/3.png


--------------------------------------------------------------------------------
/src/assets/images/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WuChenDi/vue-shop/HEAD/src/assets/images/4.png


--------------------------------------------------------------------------------
/screenshots/bankChooser.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WuChenDi/vue-shop/HEAD/screenshots/bankChooser.png


--------------------------------------------------------------------------------
/screenshots/checkOrder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WuChenDi/vue-shop/HEAD/screenshots/checkOrder.png


--------------------------------------------------------------------------------
/src/assets/banks/banks.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WuChenDi/vue-shop/HEAD/src/assets/banks/banks.png


--------------------------------------------------------------------------------
/src/assets/slideShow/pic1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WuChenDi/vue-shop/HEAD/src/assets/slideShow/pic1.jpg


--------------------------------------------------------------------------------
/src/assets/slideShow/pic2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WuChenDi/vue-shop/HEAD/src/assets/slideShow/pic2.jpg


--------------------------------------------------------------------------------
/src/assets/slideShow/pic3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WuChenDi/vue-shop/HEAD/src/assets/slideShow/pic3.jpg


--------------------------------------------------------------------------------
/src/assets/slideShow/pic4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WuChenDi/vue-shop/HEAD/src/assets/slideShow/pic4.jpg


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 | 
5 | module.exports = merge(prodEnv, {
6 |   NODE_ENV: '"development"'
7 | })
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/michael-ciniawsky/postcss-load-config
 2 | 
 3 | module.exports = {
 4 |   "plugins": {
 5 |     "postcss-import": {},
 6 |     "postcss-url": {},
 7 |     // to edit target browsers: use "browserslist" field in package.json
 8 |     "autoprefixer": {}
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>vue-shop2</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <!-- built files will be auto injected -->
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <img src="./assets/logo.png">
 4 |     <HelloWorld/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import HelloWorld from './components/HelloWorld'
10 | 
11 | export default {
12 |   name: 'app',
13 |   components: {
14 |     HelloWorld
15 |   }
16 | }
17 | </script>
18 | 
19 | <style>
20 | #app {
21 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
22 |   -webkit-font-smoothing: antialiased;
23 |   -moz-osx-font-smoothing: grayscale;
24 |   text-align: center;
25 |   color: #2c3e50;
26 |   margin-top: 60px;
27 | }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/src/components/base/chooser.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="chooser-component">
 3 |     <ul class="chooser-list">
 4 |       <li
 5 |         v-for="(item, index) in selections"
 6 |         @click="chosenSelection(index)"
 7 |         :title="item.label"
 8 |         :class="{active:index === nowIndex}"
 9 |       >{{ item.label }}
10 |       </li>
11 |     </ul>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 |   export default {
17 |     props: {
18 |       selections: {
19 |         type: Array,
20 |         default: [{
21 |           label: 'test',
22 |           value: 0
23 |         }]
24 |       }
25 |     },
26 |     data () {
27 |       return {
28 |         nowIndex: 0
29 |       }
30 |     },
31 |     methods: {
32 |       chosenSelection (index) {
33 |         this.nowIndex = index
34 |         this.$emit('on-change', this.selections[index])
35 |       }
36 |     }
37 |   }
38 | </script>
39 | 
40 | <style scoped>
41 |   .chooser-component {
42 |     position: relative;
43 |     display: inline-block;
44 |   }
45 | 
46 |   .chooser-list li {
47 |     display: inline-block;
48 |     border: 1px solid #e3e3e3;
49 |     height: 25px;
50 |     line-height: 25px;
51 |     padding: 0 8px;
52 |     margin-right: 5px;
53 |     border-radius: 3px;
54 |     text-align: center;
55 |     cursor: pointer;
56 |   }
57 | 
58 |   .chooser-list li.active {
59 |     border-color: #4fc08d;
60 |     background: #4fc08d;
61 |     color: #fff;
62 |   }
63 | </style>
64 | 


--------------------------------------------------------------------------------
/db.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "getNewsList": [
 3 |     {
 4 |       "id": 1,
 5 |       "title": "新闻条目1新闻条目1新闻条目1新闻条目1",
 6 |       "url": "https://github.com/WuChenDi"
 7 |     },
 8 |     {
 9 |       "id": 2,
10 |       "title": "新闻条目2新闻条目2新闻条目2新闻条目2",
11 |       "url": "https://github.com/WuChenDi"
12 |     },
13 |     {
14 |       "id": 3,
15 |       "title": "新闻条3新闻条3新闻条3",
16 |       "url": "https://github.com/WuChenDi"
17 |     },
18 |     {
19 |       "id": 4,
20 |       "title": "新闻条4广告发布",
21 |       "url": "https://github.com/WuChenDi"
22 |     }
23 |   ],
24 |   "login": {
25 |     "username": "wuchendi",
26 |     "userId": 123456
27 |   },
28 |   "getPrice": {
29 |     "amount": 678
30 |   },
31 |   "createOrder": {
32 |     "orderId": "6djk979"
33 |   },
34 |   "getOrderList": {
35 |     "list": [
36 |       {
37 |         "orderId": "ddj123",
38 |         "product": "数据统计",
39 |         "version": "高级版",
40 |         "period": "1年",
41 |         "buyNum": 2,
42 |         "date": "2016-10-10",
43 |         "amount": "500元"
44 |       },
45 |       {
46 |         "orderId": "yuj583",
47 |         "product": "流量分析",
48 |         "version": "户外版",
49 |         "period": "3个月",
50 |         "buyNum": 1,
51 |         "date": "2016-5-2",
52 |         "amount": "2200元"
53 |       },
54 |       {
55 |         "orderId": "pmd201",
56 |         "product": "广告发布",
57 |         "version": "商铺版",
58 |         "period": "3年",
59 |         "buyNum": 12,
60 |         "date": "2016-8-3",
61 |         "amount": "7890元"
62 |       }
63 |     ]
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <h2>Essential Links</h2>
 5 |     <ul>
 6 |       <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
 7 |       <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
 8 |       <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
 9 |       <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
10 |       <br>
11 |       <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
12 |     </ul>
13 |     <h2>Ecosystem</h2>
14 |     <ul>
15 |       <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
16 |       <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
17 |       <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
18 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
19 |     </ul>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | export default {
25 |   name: 'HelloWorld',
26 |   data () {
27 |     return {
28 |       msg: 'Welcome to Your Vue.js App'
29 |     }
30 |   }
31 | }
32 | </script>
33 | 
34 | <!-- Add "scoped" attribute to limit CSS to this component only -->
35 | <style scoped>
36 | h1, h2 {
37 |   font-weight: normal;
38 | }
39 | ul {
40 |   list-style-type: none;
41 |   padding: 0;
42 | }
43 | li {
44 |   display: inline-block;
45 |   margin: 0 10px;
46 | }
47 | a {
48 |   color: #42b983;
49 | }
50 | </style>
51 | 


--------------------------------------------------------------------------------
/src/components/checkOrder.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <this-dialog :is-show="isShowCheckDialog" @on-close="checkStatus">
 4 |       请检查你的支付状态！
 5 |       <div class="button" @click="checkStatus">
 6 |         支付成功
 7 |       </div>
 8 |       <div class="button" @click="checkStatus">
 9 |         支付失败
10 |       </div>
11 |     </this-dialog>
12 |     <this-dialog :is-show="isShowSuccessDialog" @on-close="toOrderList">
13 |       购买成功！
14 |     </this-dialog>
15 |     <this-dialog :is-show="isShowFailDialog" @on-close="toOrderList">
16 |       购买失败！
17 |     </this-dialog>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 |   import Dialog from './base/dialog'
23 |   export default {
24 |     components: {
25 |       thisDialog: Dialog
26 |     },
27 |     props: {
28 |       isShowCheckDialog: {
29 |         type: Boolean,
30 |         default: false
31 |       },
32 |       orderId: {
33 |         type: [String, Number]
34 |       }
35 |     },
36 |     data () {
37 |       return {
38 |         isShowSuccessDialog: false,
39 |         isShowFailDialog: false
40 |       }
41 |     },
42 |     methods: {
43 |       checkStatus () {
44 |         this.$http.post('/api/checkOrder', {
45 |           orderId: this.orderId
46 |         })
47 |         .then((res) => {
48 |           this.isShowSuccessDialog = true
49 |           this.$emit('on-close-check-dialog')
50 |         }, (err) => {
51 |           this.isShowFailDialog = true
52 |           this.$emit('on-close-check-dialog')
53 |         })
54 |       },
55 |       toOrderList () {
56 |         this.$router.push({path: '/orderList'})
57 |       }
58 |     }
59 |   }
60 | </script>
61 | 
62 | <!-- Add "scoped" attribute to limit CSS to this component only -->
63 | <style scoped>
64 | 
65 | </style>
66 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | // import App from './App'
 5 | // import router from './router'
 6 | import Layout from './components/layout.vue'
 7 | import VueRouter from 'vue-router'
 8 | import VueResource from 'vue-resource'
 9 | // import axios from 'axios'
10 | import IndexPage from './pages/index'
11 | import DetailPage from './pages/detail'
12 | import OrderListPage from './pages/orderList'
13 | import DetailAnaPage from './pages/detail/analysis'
14 | import DetailCouPage from './pages/detail/count'
15 | import DetailForPage from './pages/detail/forecast'
16 | import DetailPubPage from './pages/detail/publish'
17 | 
18 | Vue.config.productionTip = false
19 | Vue.use(VueRouter)
20 | Vue.use(VueResource)
21 | 
22 | let router = new VueRouter({
23 |   mode: 'history',
24 |   routes: [
25 |     {
26 |       path: '/',
27 |       component: IndexPage
28 |     },
29 |     {
30 |       path: '/orderList',
31 |       component: OrderListPage
32 |     },
33 |     {
34 |       path: '/detail',
35 |       component: DetailPage,
36 |       redirect: '/detail/analysis',
37 |       children: [
38 |         {
39 |           path: 'analysis',
40 |           component: DetailAnaPage
41 |         },
42 |         {
43 |           path: 'count',
44 |           component: DetailCouPage
45 |         },
46 |         {
47 |           path: 'forecast',
48 |           component: DetailForPage
49 |         },
50 |         {
51 |           path: 'publish',
52 |           component: DetailPubPage
53 |         }
54 |       ]
55 |     }
56 |   ]
57 | })
58 | 
59 | /* eslint-disable no-new */
60 | new Vue({
61 |   el: '#app',
62 |   router,
63 |   template: '<Layout/>',
64 |   components: { Layout }
65 | })
66 | 


--------------------------------------------------------------------------------
/src/components/base/multiplyChooser.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="chooser-component">
 3 |     <ul class="chooser-list">
 4 |       <li
 5 |         v-for="(item, index) in selections"
 6 |         @click="toggleSelection(index)"
 7 |         :title="item.label"
 8 |         :class="{active: checkActive(index)}"
 9 |       >{{ item.label }}
10 |       </li>
11 |     </ul>
12 |   </div>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 |   import _ from 'lodash'
18 | 
19 |   export default {
20 |     props: {
21 |       selections: {
22 |         type: Array,
23 |         default: [{
24 |           label: 'test',
25 |           value: 0
26 |         }]
27 |       }
28 |     },
29 |     data () {
30 |       return {
31 |         nowIndexes: [0]
32 |       }
33 |     },
34 |     methods: {
35 |       toggleSelection (index) {
36 |         if (this.nowIndexes.indexOf(index) === -1) {
37 |           this.nowIndexes.push(index)
38 |         } else {
39 |           this.nowIndexes = _.remove(this.nowIndexes, (idx) => {
40 |             return idx !== index
41 |           })
42 |         }
43 |         let nowObjArray = _.map(this.nowIndexes, (idx) => {
44 |           return this.selections[idx]
45 |         })
46 |         this.$emit('on-change', nowObjArray)
47 |       },
48 |       checkActive (index) {
49 |         return this.nowIndexes.indexOf(index) !== -1
50 |       }
51 |     }
52 |   }
53 | </script>
54 | 
55 | <style scoped>
56 |   .chooser-component {
57 |     position: relative;
58 |     display: inline-block;
59 |   }
60 | 
61 |   .chooser-list li {
62 |     display: inline-block;
63 |     border: 1px solid #e3e3e3;
64 |     height: 25px;
65 |     line-height: 25px;
66 |     padding: 0 8px;
67 |     margin-right: 5px;
68 |     border-radius: 3px;
69 |     text-align: center;
70 |     cursor: pointer;
71 |   }
72 | 
73 |   .chooser-list li.active {
74 |     border-color: #4fc08d;
75 |     background: #4fc08d;
76 |     color: #fff;
77 |   }
78 | </style>
79 | 


--------------------------------------------------------------------------------
/src/components/base/dialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="dialog-wrap">
 4 |       <div class="dialog-cover" v-if="isShow" @click="closeMyself"></div>
 5 |       <transition name="drop">
 6 |         <div class="dialog-content" v-if="isShow">
 7 |           <p class="dialog-close" @click="closeMyself">x</p>
 8 |           <slot>empty</slot>
 9 |         </div>
10 |       </transition>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <script type="text/ecmascript-6">
16 |   export default {
17 |     props: {
18 |       isShow: {
19 |         type: Boolean,
20 |         default: false
21 |       }
22 |     },
23 |     data () {
24 |       return {
25 | 
26 |       }
27 |     },
28 |     methods: {
29 |       closeMyself () {
30 |         this.$emit('on-close')
31 |       }
32 |     }
33 |   }
34 | </script>
35 | 
36 | <style scoped>
37 |   .drop-enter-active {
38 |     transition: all .5s ease;
39 |   }
40 | 
41 |   .drop-leave-active {
42 |     transition: all .3s ease;
43 |   }
44 | 
45 |   .drop-enter {
46 |     transform: translateY(-500px);
47 |   }
48 | 
49 |   .drop-leave-active {
50 |     transform: translateY(-500px);
51 |   }
52 | 
53 |   .dialog-wrap {
54 |     position: fixed;
55 |     width: 100%;
56 |     height: 100%;
57 |   }
58 | 
59 |   .dialog-cover {
60 |     background: #000;
61 |     opacity: .3;
62 |     position: fixed;
63 |     z-index: 5;
64 |     top: 0;
65 |     left: 0;
66 |     width: 100%;
67 |     height: 100%;
68 |   }
69 | 
70 |   .dialog-content {
71 |     width: 50%;
72 |     position: fixed;
73 |     max-height: 50%;
74 |     overflow: auto;
75 |     background: #fff;
76 |     top: 20%;
77 |     left: 50%;
78 |     margin-left: -25%;
79 |     z-index: 10;
80 |     border: 2px solid #464068;
81 |     padding: 2%;
82 |     line-height: 1.6;
83 |   }
84 | 
85 |   .dialog-close {
86 |     position: absolute;
87 |     right: 5px;
88 |     top: 5px;
89 |     width: 20px;
90 |     height: 20px;
91 |     text-align: center;
92 |     cursor: pointer;
93 |   }
94 | 
95 |   .dialog-close:hover {
96 |     color: #4fc08d;
97 |   }
98 | </style>
99 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-shop2",
 3 |   "version": "1.0.0",
 4 |   "description": "wcd vue-shop2",
 5 |   "author": "",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "vue": "^2.5.2"
14 |   },
15 |   "devDependencies": {
16 |     "autoprefixer": "^7.1.2",
17 |     "axios": "^0.17.1",
18 |     "babel-core": "^6.22.1",
19 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
20 |     "babel-loader": "^7.1.1",
21 |     "babel-plugin-syntax-jsx": "^6.18.0",
22 |     "babel-plugin-transform-runtime": "^6.22.0",
23 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
24 |     "babel-preset-env": "^1.3.2",
25 |     "babel-preset-stage-2": "^6.22.0",
26 |     "chalk": "^2.0.1",
27 |     "copy-webpack-plugin": "^4.0.1",
28 |     "css-loader": "^0.28.0",
29 |     "express": "^4.16.2",
30 |     "extract-text-webpack-plugin": "^3.0.0",
31 |     "file-loader": "^1.1.4",
32 |     "friendly-errors-webpack-plugin": "^1.6.1",
33 |     "html-webpack-plugin": "^2.30.1",
34 |     "json-loader": "^0.5.7",
35 |     "node-notifier": "^5.1.2",
36 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
37 |     "ora": "^1.2.0",
38 |     "portfinder": "^1.0.13",
39 |     "postcss-import": "^11.0.0",
40 |     "postcss-loader": "^2.0.8",
41 |     "postcss-url": "^7.2.1",
42 |     "rimraf": "^2.6.0",
43 |     "semver": "^5.3.0",
44 |     "shelljs": "^0.7.6",
45 |     "uglifyjs-webpack-plugin": "^1.1.1",
46 |     "url-loader": "^0.5.8",
47 |     "vue-loader": "^13.3.0",
48 |     "vue-resource": "^1.3.5",
49 |     "vue-router": "^3.0.1",
50 |     "vue-style-loader": "^3.0.1",
51 |     "vue-template-compiler": "^2.5.2",
52 |     "webpack": "^3.6.0",
53 |     "webpack-bundle-analyzer": "^2.9.0",
54 |     "webpack-dev-server": "^2.9.1",
55 |     "webpack-merge": "^4.1.0"
56 |   },
57 |   "engines": {
58 |     "node": ">= 6.0.0",
59 |     "npm": ">= 3.0.0"
60 |   },
61 |   "browserslist": [
62 |     "> 1%",
63 |     "last 2 versions",
64 |     "not ie <= 8"
65 |   ]
66 | }
67 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.2.8
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     // proxyTable: {},
14 |     proxyTable: {
15 |       '/api/': 'http://localhost:8081/'
16 |     },
17 | 
18 |     // Various Dev Server settings
19 |     host: 'localhost', // can be overwritten by process.env.HOST
20 |     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
21 |     autoOpenBrowser: false,
22 |     errorOverlay: true,
23 |     notifyOnErrors: true,
24 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
25 | 
26 | 
27 |     /**
28 |      * Source Maps
29 |      */
30 | 
31 |     // https://webpack.js.org/configuration/devtool/#development
32 |     devtool: 'cheap-module-eval-source-map',
33 | 
34 |     // If you have problems debugging vue-files in devtools,
35 |     // set this to false - it *may* help
36 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
37 |     cacheBusting: true,
38 | 
39 |     cssSourceMap: true,
40 |   },
41 | 
42 |   build: {
43 |     // Template for index.html
44 |     index: path.resolve(__dirname, '../dist/index.html'),
45 | 
46 |     // Paths
47 |     assetsRoot: path.resolve(__dirname, '../dist'),
48 |     assetsSubDirectory: 'static',
49 |     assetsPublicPath: '/',
50 | 
51 |     /**
52 |      * Source Maps
53 |      */
54 | 
55 |     productionSourceMap: true,
56 |     // https://webpack.js.org/configuration/devtool/#production
57 |     devtool: '#source-map',
58 | 
59 |     // Gzip off by default as many popular static hosts such as
60 |     // Surge or Netlify already gzip all static assets for you.
61 |     // Before setting to `true`, make sure to:
62 |     // npm install --save-dev compression-webpack-plugin
63 |     productionGzip: false,
64 |     productionGzipExtensions: ['js', 'css'],
65 | 
66 |     // Run the build command with an extra argument to
67 |     // View the bundle analyzer report after build finishes:
68 |     // `npm run build --report`
69 |     // Set to `true` or `false` to always turn it on or off
70 |     bundleAnalyzerReport: process.env.npm_config_report
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------
/src/components/base/counter.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="counter-component">
  3 |     <div class="counter-btn" @click="minus"> -</div>
  4 |     <div class="counter-show">
  5 |       <input type="text" v-model="number" @keyup="fixNumber">
  6 |     </div>
  7 |     <div class="counter-btn" @click="add"> +</div>
  8 |   </div>
  9 | </template>
 10 | 
 11 | <script>
 12 |   export default {
 13 |     props: {
 14 |       max: {
 15 |         type: Number,
 16 |         default: 5
 17 |       },
 18 |       min: {
 19 |         type: Number,
 20 |         default: 1
 21 |       }
 22 |     },
 23 |     data () {
 24 |       return {
 25 |         number: this.min
 26 |       }
 27 |     },
 28 |     watch: {
 29 |       number () {
 30 |         this.$emit('on-change', this.number)
 31 |       }
 32 |     },
 33 |     methods: {
 34 |       fixNumber () {
 35 |         let fix
 36 |         if (typeof this.number === 'string') {
 37 |           fix = Number(this.number.replace(/\D/g, ''))
 38 |         } else {
 39 |           fix = this.number
 40 |         } if (fix > this.max || fix < this.min) {
 41 |           fix = this.min
 42 |         }
 43 |         this.number = fix
 44 |       },
 45 |       minus () {
 46 |         if (this.number <= this.min) {
 47 |           return
 48 |         }
 49 |         this.number--
 50 |       },
 51 |       add () {
 52 |         if (this.number >= this.max) {
 53 |           return
 54 |         }
 55 |         this.number++
 56 |       }
 57 |     }
 58 |   }
 59 | </script>
 60 | 
 61 | <style scoped>
 62 |   .counter-component {
 63 |     position: relative;
 64 |     display: inline-block;
 65 |     overflow: hidden;
 66 |     vertical-align: middle;
 67 |   }
 68 | 
 69 |   .counter-show {
 70 |     float: left;
 71 |   }
 72 | 
 73 |   .counter-show input {
 74 |     border: none;
 75 |     border-top: 1px solid #e3e3e3;
 76 |     border-bottom: 1px solid #e3e3e3;
 77 |     height: 23px;
 78 |     line-height: 23px;
 79 |     width: 30px;
 80 |     outline: none;
 81 |     text-indent: 4px;
 82 |   }
 83 | 
 84 |   .counter-btn {
 85 |     border: 1px solid #e3e3e3;
 86 |     float: left;
 87 |     height: 25px;
 88 |     line-height: 25px;
 89 |     width: 25px;
 90 |     text-align: center;
 91 |     cursor: pointer;
 92 |   }
 93 | 
 94 |   .counter-btn:hover {
 95 |     border-color: #4fc08d;
 96 |     background: #4fc08d;
 97 |     color: #fff;
 98 |   }
 99 | 
100 | </style>
101 | 


--------------------------------------------------------------------------------
/src/components/base/selection.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="selection-component">
 3 |       <div class="selection-show" @click="toggleDrop">
 4 |         <span>{{ selections[nowIndex].label }}</span>
 5 |         <div class="arrow"></div>
 6 |       </div>
 7 |       <div class="selection-list" v-if="isDrop">
 8 |         <ul>
 9 |           <li v-for="(item, index) in selections" @click="chooseSelection(index)">{{ item.label }}</li>
10 |         </ul>
11 |       </div>
12 |     </div>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   props: {
18 |     selections: {
19 |       type: Array,
20 |       default: [{
21 |         label: 'test',
22 |         value: 0
23 |       }]
24 |     }
25 |   },
26 |   data () {
27 |     return {
28 |       isDrop: false,
29 |       nowIndex: 0
30 |     }
31 |   },
32 |   methods: {
33 |     toggleDrop () {
34 |       this.isDrop = !this.isDrop
35 |     },
36 |     chooseSelection (index) {
37 |       this.nowIndex = index
38 |       this.isDrop = false
39 |       this.$emit('on-change', this.selections[this.nowIndex])
40 |     }
41 |   }
42 | }
43 | </script>
44 | 
45 | <style scoped>
46 | .selection-component {
47 |   position: relative;
48 |   display: inline-block;
49 | }
50 | .selection-show {
51 |   border: 1px solid #e3e3e3;
52 |   padding: 0 20px 0 10px;
53 |   display: inline-block;
54 |   position: relative;
55 |   cursor: pointer;
56 |   height: 25px;
57 |   line-height: 25px;
58 |   border-radius: 3px;
59 |   background: #fff;
60 | }
61 | .selection-show .arrow {
62 |   display: inline-block;
63 |   border-left: 4px solid transparent;
64 |   border-right: 4px solid transparent;
65 |   border-top: 5px solid #e3e3e3;
66 |   width: 0;
67 |   height: 0;
68 |   margin-top: -1px;
69 |   margin-left: 6px;
70 |   margin-right: -14px;
71 |   vertical-align: middle;
72 | }
73 | .selection-list {
74 |   display: inline-block;
75 |   position: absolute;
76 |   left: 0;
77 |   top: 25px;
78 |   width: 100%;
79 |   background: #fff;
80 |   border-top: 1px solid #e3e3e3;
81 |   border-bottom: 1px solid #e3e3e3;
82 |   z-index: 5;
83 | }
84 | .selection-list li {
85 |   padding: 5px 15px 5px 10px;
86 |   border-left: 1px solid #e3e3e3;
87 |   border-right: 1px solid #e3e3e3;
88 |   cursor: pointer;
89 |   background: #fff;
90 |   white-space: nowrap;
91 |   overflow: hidden;
92 |   text-overflow: ellipsis;
93 | 
94 | }
95 | .selection-list li:hover {
96 |   background: #e3e3e3;
97 | }
98 | </style>
99 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 基于Vue2.0 + vue-router + webpack + ES6/7 + nodejs + express 实现web端购物商城网站
  2 | 
  3 | 
  4 | ## 前端构架
  5 | ***
  6 | - 页面结构(H5,CSS3,原生JS)
  7 | - 框架(基于Vue脚手架:vue-cli)进行搭建
  8 | - 数据请求处理框架(vue-resource或者Axios)
  9 | - Vue-Router进行路由处理
 10 | - 使用json-server模拟REST API(目前项目使用express)
 11 | 
 12 | ## 目前项目已实现功能
 13 | ***
 14 | 1. 登录
 15 | 2. 注册 (没有实现，点击按钮跳转回登录页面)
 16 | 3. 首页数据的展示
 17 | 4. 产品数据与最新消息的展示
 18 | 5. 商品详情页
 19 | 6. 购物车
 20 | 7. 购物确认银行支付选择
 21 | 8. 购买订单 (排序 ( 高->低 ) ) 
 22 | 
 23 | ## 项目运行
 24 | ***
 25 | 通过npm安装本地服务第三方依赖模块(需要已安装[Node.js](https://nodejs.org/ "nodejs"))
 26 | #### 注意：由于涉及大量的 ES6/7 等新属性，node 需要 6.0 以上版本 
 27 | ```
 28 | cd vue-shop
 29 | 
 30 | npm install 或 cnpm install(个人比较喜欢使用后者，下载依赖模块速度较快)
 31 | 
 32 | npm run dev
 33 | 
 34 | ```
 35 | 
 36 | ## 总结
 37 | - 了解vue - 数据渲染、前端模块化、路由
 38 | - 熟悉VueJs的接口功能 - 指令的用法、选项的用法
 39 | - 了解vue组件 - 组件的交互
 40 | - 了解vue工程化方案 - 单文件组件Webpack测试数据
 41 | - vue项目的搭建流程
 42 | - 使用Ajax请求后端数据
 43 | - 组件的设计与交互
 44 | - 路由和子路由(嵌套路由通信)
 45 | 
 46 | ## 目录结构
 47 | 
 48 | ```
 49 | .
 50 | ├── build
 51 | ├── config
 52 | ├── screenshots
 53 | ├── src
 54 | │   ├── assets
 55 | │   │   ├── banks
 56 | │   │   ├── images
 57 | │   │   └── slideShow
 58 | │   ├── components
 59 | │   │   ├── base
 60 | │   │   │   ├── chooser.vue
 61 | │   │   │   ├── counter.vue
 62 | │   │   │   ├── datepicker.vue
 63 | │   │   │   ├── dialog.vue
 64 | │   │   │   ├── multiplyChooser.vue
 65 | │   │   │   └── selection.vue
 66 | │   │   ├── bankChooser.vue
 67 | │   │   ├── checkOrder.vue
 68 | │   │   ├── HelloWorld.vue
 69 | │   │   ├── layout.vue
 70 | │   │   ├── logForm.vue
 71 | │   │   ├── regForm.vue
 72 | │   │   └── slideShow.vue
 73 | │   ├── pages
 74 | │   │   ├── detail
 75 | │   │   │   ├── analysis.vue
 76 | │   │   │   ├── count.vue
 77 | │   │   │   ├── forecast.vue
 78 | │   │   │   └── publish.vue
 79 | │   │   ├── detail.vue
 80 | │   │   ├── index.vue
 81 | │   │   └── orderList.vue
 82 | │   ├── App.vue
 83 | │   └── main.js
 84 | ├── static
 85 | │   └── .gitkeep
 86 | ├── .babelrc
 87 | ├── .editorconfig
 88 | ├── .gitgnore
 89 | ├── .postcssrc.js
 90 | ├── db.json
 91 | ├── index.html
 92 | ├── package.json
 93 | └── README.md
 94 | .
 95 | ```
 96 | 
 97 | ## 项目效果图
 98 | ![](/screenshots/index.png)
 99 | ![](/screenshots/login.png)
100 | ![](/screenshots/about.png)
101 | ![](/screenshots/analysis.png)
102 | ![](/screenshots/bankChooser.png)
103 | ![](/screenshots/checkOrder.png)
104 | ![](/screenshots/orderList.png)
105 | 


--------------------------------------------------------------------------------
/src/components/regForm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="login-form">
  3 |     <div class="g-form">
  4 |       <div class="g-form-line" v-for="formLine in formData">
  5 |         <span class="g-form-label">{{ formLine.label }}：</span>
  6 |         <div class="g-form-input">
  7 |           <input type="text"
  8 |           v-model="formLine.model" placeholder="请输入用户名">
  9 |         </div>
 10 |       </div>
 11 |       <div class="g-form-line">
 12 |         <div class="g-form-btn">
 13 |           <a class="button" @click="onLogin">登录</a>
 14 |         </div>
 15 |       </div>
 16 |     </div>
 17 |   </div>
 18 | </template>
 19 | 
 20 | <script>
 21 | export default {
 22 |   props: {
 23 |     'isShow': 'boolean'
 24 |   },
 25 |   data () {
 26 |     return {
 27 | 
 28 |     }
 29 |   },
 30 |   computed: {
 31 |     userErrors () {
 32 |       let status, errorText
 33 |       if (!/@/g.test(this.usernameModel)) {
 34 |         status = false
 35 |         errorText = '必须包含@'
 36 |       } else {
 37 |         status = true
 38 |         errorText = ''
 39 |       }
 40 |       return {
 41 |         status,
 42 |         errorText
 43 |       }
 44 |     },
 45 |     passwordErrors () {
 46 |       let status, errorText
 47 |       if (!/@/g.test(this.usernameModel)) {
 48 |         status = false
 49 |         errorText = '必须包含@'
 50 |       } else {
 51 |         status = true
 52 |         errorText = ''
 53 |       }
 54 |       return {
 55 |         status,
 56 |         errorText
 57 |       }
 58 |     }
 59 |   },
 60 |   methods: {
 61 |     closeMyself () {
 62 |       this.$emit('on-close')
 63 |     }
 64 |   }
 65 | }
 66 | </script>
 67 | 
 68 | <!-- Add "scoped" attribute to limit CSS to this component only -->
 69 | <style scoped>
 70 | .dialog-wrap {
 71 |   position: fixed;
 72 |   width: 100%;
 73 |   height: 100%;
 74 | }
 75 | .dialog-cover {
 76 |   background: #000;
 77 |   opacity: .3;
 78 |   position: fixed;
 79 |   z-index: 5;
 80 |   top: 0;
 81 |   left: 0;
 82 |   width: 100%;
 83 |   height: 100%;
 84 | }
 85 | .dialog-content {
 86 |   width: 50%;
 87 |   position: fixed;
 88 |   max-height: 50%;
 89 |   overflow: auto;
 90 |   background: #fff;
 91 |   top: 20%;
 92 |   left: 50%;
 93 |   margin-left: -25%;
 94 |   z-index: 10;
 95 |   border: 2px solid #464068;
 96 |   padding: 2%;
 97 |   line-height: 1.6;
 98 | }
 99 | .dialog-close {
100 |   position: absolute;
101 |   right: 5px;
102 |   top: 5px;
103 |   width: 20px;
104 |   height: 20px;
105 |   text-align: center;
106 |   cursor: pointer;
107 | }
108 | .dialog-close:hover {
109 |   color: #4fc08d;
110 | }
111 | </style>
112 | 


--------------------------------------------------------------------------------
/src/components/logForm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="login-form">
  3 |     <div class="g-form">
  4 |       <div class="g-form-line">
  5 |         <span class="g-form-label">用户名：</span>
  6 |         <div class="g-form-input">
  7 |           <input type="text"
  8 |                  v-model="usernameModel" placeholder="请输入用户名">
  9 |         </div>
 10 |         <span class="g-form-error">{{ userErrors.errorText }}</span>
 11 |       </div>
 12 |       <div class="g-form-line">
 13 |         <span class="g-form-label">密码：</span>
 14 |         <div class="g-form-input">
 15 |           <input type="password"
 16 |                  v-model="passwordModel" placeholder="请输入密码">
 17 |         </div>
 18 |         <span class="g-form-error">{{ passwordErrors.errorText }}</span>
 19 |       </div>
 20 |       <div class="g-form-line">
 21 |         <div class="g-form-btn">
 22 |           <a class="button" @click="onLogin">登录</a>
 23 |         </div>
 24 |       </div>
 25 |       <p>{{ errorText }}</p>
 26 |     </div>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script>
 31 |   export default {
 32 |     data () {
 33 |       return {
 34 |         usernameModel: '',
 35 |         passwordModel: '',
 36 |         errorText: ''
 37 |       }
 38 |     },
 39 |     computed: {
 40 |       userErrors () {
 41 |         let errorText, status
 42 |         if (!/@/g.test(this.usernameModel)) {
 43 |           status = false
 44 |           errorText = '不包含@'
 45 |         } else {
 46 |           status = true
 47 |           errorText = ''
 48 |         }
 49 |         if (!this.userFlag) {
 50 |           errorText = ''
 51 |           this.userFlag = true
 52 |         }
 53 |         return {
 54 |           status,
 55 |           errorText
 56 |         }
 57 |       },
 58 |       passwordErrors () {
 59 |         let errorText, status
 60 |         if (!/^\w{1,6}$/g.test(this.passwordModel)) {
 61 |           status = false
 62 |           errorText = '密码不是1-6位'
 63 |         } else {
 64 |           status = true
 65 |           errorText = ''
 66 |         }
 67 |         if (!this.passwordFlag) {
 68 |           errorText = ''
 69 |           this.passwordFlag = true
 70 |         }
 71 |         return {
 72 |           status,
 73 |           errorText
 74 |         }
 75 |       }
 76 |     },
 77 |     methods: {
 78 |       onLogin () {
 79 |         if (!this.userErrors.status || !this.passwordErrors.status) {
 80 |           this.errorText = '部分选项未通过'
 81 |         } else {
 82 |           this.errorText = ''
 83 |           // console.log('logging')
 84 |           this.$http.get('api/login')
 85 |           .then((res) => {
 86 |             this.$emit('has-log', res.data)
 87 |           }, (error) => {
 88 |             console.log(error)
 89 |           })
 90 |         }
 91 |         console.log(this.usernameModel, this.passwordModel)
 92 |       }
 93 |     }
 94 |   }
 95 | </script>
 96 | 
 97 | <!-- Add "scoped" attribute to limit CSS to this component only -->
 98 | <style scoped>
 99 | 
100 | </style>
101 | 


--------------------------------------------------------------------------------
/src/pages/detail/forecast.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="sales-board">
 3 |     <div class="sales-board-intro">
 4 |       <h2>数据预测</h2>
 5 |       <p>未来，大数据会变得越来越重要，其核心应用预测也会成为互联网行业以及产业变革的重要力量，我们很有必要对数据预测及其分析方法进行全面且深入的了解。在这一点上，《大数据预测》是本很好的读物，适合大数据所有相关行业的人阅读。</p>
 6 |     </div>
 7 |     <div class="sales-board-form">
 8 |       <div class="sales-board-line">
 9 |         <div class="sales-board-line-left">
10 |           购买数量：
11 |         </div>
12 |         <div class="sales-board-line-right">
13 |           <v-counter :max="100" :min="20"></v-counter>
14 |         </div>
15 |       </div>
16 |       <div class="sales-board-line">
17 |         <div class="sales-board-line-left">
18 |           媒介：
19 |         </div>
20 |         <div class="sales-board-line-right">
21 |           <v-mul-chooser :selections="versionList"></v-mul-chooser>
22 |         </div>
23 |       </div>
24 |       <div class="sales-board-line">
25 |         <div class="sales-board-line-left">
26 |           有效时间：
27 |         </div>
28 |         <div class="sales-board-line-right">
29 |           一年
30 |         </div>
31 |       </div>
32 |       <div class="sales-board-line">
33 |         <div class="sales-board-line-left">
34 |           总价：
35 |         </div>
36 |         <div class="sales-board-line-right">
37 |           500 元
38 |         </div>
39 |       </div>
40 |       <div class="sales-board-line">
41 |         <div class="sales-board-line-left">&nbsp;</div>
42 |         <div class="sales-board-line-right">
43 |           <div class="button">
44 |             立即购买
45 |           </div>
46 |         </div>
47 |       </div>
48 |     </div>
49 |     <div class="sales-board-des">
50 |       <h2>产品说明</h2>
51 |       <p>2020年的一天，在你驱车前往公司的路上，导航系统通过预测交通流量，会自动帮你选择一条最合适的交通路线；车内推荐系统会根据你的饮食习惯预测你可能会喜欢吃什么，并推荐沿途的早餐店；你的电子社交助理已经为你自动选择了你可能感兴趣的社交网信息；当车内系统预测到你驾车有些分心时，座椅会自动震动进行提醒……
52 |         以上这些情景不是科幻大片独有的，它们有的已经或会在未来的某一天成为现实。而这一切所倚靠的就是预测分析技术。
53 |         大数据时代下，作为其核心，预测分析已在商业和社会中得到广泛应用。随着越来越多的数据被记录和整理，未来预测分析必定会成为所有领域的关键技术。
54 |         作为预测分析领域的专家，埃里克·西格尔博士深谙预测分析界已经实现和正在发生的事情、面临的问题和将来可能的前景。在《大数据预测》一书中，他结合预测分析的应用实例，对其进行了深入、细致且全面的解读。
55 |         关于预测分析，你想了解的全部，你的生活以及这个世界会因为预测分析改变到什么程度，《大数据预测》都会告诉你。</p>
56 |     </div>
57 |   </div>
58 | </template>
59 | 
60 | <script>
61 |   import VCounter from '../../components/base/counter'
62 |   import VMulChooser from '../../components/base/multiplyChooser'
63 |   export default {
64 |     components: {
65 |       VCounter,
66 |       VMulChooser
67 |     },
68 |     data () {
69 |       return {
70 |         versionList: [
71 |           {
72 |             label: '纸质报告',
73 |             value: 0
74 |           },
75 |           {
76 |             label: 'pdf',
77 |             value: 1
78 |           },
79 |           {
80 |             label: '页面报告',
81 |             value: 2
82 |           },
83 |           {
84 |             label: '邮件',
85 |             value: 3
86 |           }
87 |         ]
88 |       }
89 |     }
90 |   }
91 | </script>
92 | 
93 | <!-- Add "scoped" attribute to limit CSS to this component only -->
94 | <style scoped>
95 | 
96 | </style>
97 | 


--------------------------------------------------------------------------------
/src/components/slideShow.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="slide-show" @mouseover="clearInv" @mouseout="runInv">
  3 |     <div class="slide-img">
  4 |       <a :href="slides[nowIndex].href">
  5 |         <transition name="slide-trans">
  6 |           <img v-if="isShow" :src="slides[nowIndex].src">
  7 |         </transition>
  8 |         <transition name="slide-trans-old">
  9 |           <img v-if="!isShow" :src="slides[nowIndex].src">
 10 |         </transition>
 11 |       </a>
 12 |     </div>
 13 |     <h2>{{ slides[nowIndex].title }}</h2>
 14 |     <ul class="slide-pages">
 15 |       <li @click="goto(prevIndex)">&lt;</li>
 16 |       <li v-for="(item, index) in slides"
 17 |           @click="goto(index)"
 18 |       >
 19 |         <a :class="{on: index === nowIndex}">{{ index + 1 }}</a>
 20 |       </li>
 21 |       <li @click="goto(nextIndex)">&gt;</li>
 22 |     </ul>
 23 |   </div>
 24 | </template>
 25 | 
 26 | <script>
 27 |   export default {
 28 |     props: {
 29 |       slides: {
 30 |         type: Array,
 31 |         default: []
 32 |       },
 33 |       inv: {
 34 |         type: Number,
 35 |         default: 1000
 36 |       }
 37 |     },
 38 |     data () {
 39 |       return {
 40 |         nowIndex: 0,
 41 |         isShow: true
 42 |       }
 43 |     },
 44 |     computed: {
 45 |       prevIndex () {
 46 |         if (this.nowIndex === 0) {
 47 |           return this.slides.length - 1
 48 |         } else {
 49 |           return this.nowIndex - 1
 50 |         }
 51 |       },
 52 |       nextIndex () {
 53 |         if (this.nowIndex === this.slides.length - 1) {
 54 |           return 0
 55 |         } else {
 56 |           return this.nowIndex + 1
 57 |         }
 58 |       }
 59 |     },
 60 |     methods: {
 61 |       goto (index) {
 62 |         this.isShow = false
 63 |         setTimeout(() => {
 64 |           this.isShow = true
 65 |           this.nowIndex = index
 66 |         }, 10)
 67 |       },
 68 |       runInv () {
 69 |         this.invId = setInterval(() => {
 70 |           this.goto(this.nextIndex)
 71 |         }, this.inv)
 72 |       },
 73 |       clearInv () {
 74 |         clearInterval(this.invId)
 75 |       }
 76 |     },
 77 |     mounted () {
 78 |       this.runInv()
 79 |     }
 80 |   }
 81 | </script>
 82 | 
 83 | <style scoped>
 84 |   .slide-trans-enter-active {
 85 |     transition: all .5s;
 86 |   }
 87 |   .slide-trans-enter {
 88 |     transform: translateX(900px);
 89 |   }
 90 |   .slide-trans-old-leave-active {
 91 |     transition: all .5s;
 92 |     transform: translateX(-900px);
 93 |   }
 94 |   .slide-show {
 95 |     position: relative;
 96 |     margin: 15px 15px 15px 0;
 97 |     width: 900px;
 98 |     height: 500px;
 99 |     overflow: hidden;
100 |   }
101 |   .slide-show h2 {
102 |     position: absolute;
103 |     width: 100%;
104 |     height: 100%;
105 |     color: #fff;
106 |     background: #000;
107 |     opacity: .5;
108 |     bottom: 0;
109 |     height: 30px;
110 |     text-align: left;
111 |     padding-left: 15px;
112 |   }
113 |   .slide-img {
114 |     width: 100%;
115 |   }
116 |   .slide-img img {
117 |     width: 100%;
118 |     position: absolute;
119 |     top: 0;
120 |   }
121 |   .slide-pages {
122 |     position: absolute;
123 |     bottom: 10px;
124 |     right: 15px;
125 |   }
126 |   .slide-pages li {
127 |     display: inline-block;
128 |     padding: 0 10px;
129 |     cursor: pointer;
130 |     color: #fff;
131 |   }
132 |   .slide-pages li .on {
133 |     text-decoration: underline;
134 |   }
135 | </style>
136 | 


--------------------------------------------------------------------------------
/src/components/bankChooser.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="chooser-component">
  3 |     <ul class="chooser-list">
  4 |       <li
  5 |         v-for="(item, index) in banks"
  6 |         @click="chooseSelection(index)"
  7 |         :title="item.label"
  8 |         :class="[item.name, {active: index === nowIndex}]"
  9 |       ></li>
 10 |     </ul>
 11 |   </div>
 12 | </template>
 13 | 
 14 | <script>
 15 |   export default {
 16 |     data () {
 17 |       return {
 18 |         nowIndex: 0,
 19 |         banks: [
 20 |           {
 21 |             id: 201,
 22 |             label: '招商银行',
 23 |             name: 'zhaoshang'
 24 |           },
 25 |           {
 26 |             id: 301,
 27 |             label: '中国建设银行',
 28 |             name: 'jianshe'
 29 |           },
 30 |           {
 31 |             id: 601,
 32 |             label: '浦发银行',
 33 |             name: 'pufa'
 34 |           },
 35 |           {
 36 |             id: 1101,
 37 |             label: '交通银行',
 38 |             name: 'jiaotong'
 39 |           },
 40 |           {
 41 |             id: 101,
 42 |             label: '中国工商银行',
 43 |             name: 'gongshang'
 44 |           },
 45 |           {
 46 |             id: 401,
 47 |             label: '中国农业银行',
 48 |             name: 'nongye'
 49 |           },
 50 |           {
 51 |             id: 1201,
 52 |             label: '中国银行',
 53 |             name: 'zhongguo'
 54 |           },
 55 |           {
 56 |             id: 501,
 57 |             label: '中信银行',
 58 |             name: 'zhongxin'
 59 |           }
 60 |         ]
 61 |       }
 62 |     },
 63 |     methods: {
 64 |       chooseSelection (index) {
 65 |         this.nowIndex = index
 66 |         this.$emit('on-change', this.banks[index])
 67 |       }
 68 |     }
 69 |   }
 70 | </script>
 71 | 
 72 | <!-- Add "scoped" attribute to limit CSS to this component only -->
 73 | <style scoped>
 74 |   .chooser-component {
 75 |     position: relative;
 76 |     display: inline-block;
 77 |   }
 78 | 
 79 |   .chooser-list li.active {
 80 |     border: 1px solid #4fc08d;
 81 |   }
 82 | 
 83 |   .chooser-list li {
 84 |     display: inline-block;
 85 |     width: 117px;
 86 |     height: 32px;
 87 |     background-image: url(../assets/banks/banks.png);
 88 |     background-repeat: no-repeat;
 89 |     margin: 5px;
 90 |     border: 1px solid #e3e3e3;
 91 |     cursor: pointer;
 92 |   }
 93 | 
 94 |   .zhaoshang {
 95 |     background-position: -2160px 0;
 96 |   }
 97 | 
 98 |   .jianshe {
 99 |     background-position: -720px 0;
100 |   }
101 | 
102 |   .pufa {
103 |     background-position: -1800px 0;
104 |   }
105 | 
106 |   .jiaotong {
107 |     background-position: -3120px 0;
108 |   }
109 | 
110 |   .minsheng {
111 |     background-position: -2760px 0;
112 |   }
113 | 
114 |   .pingan {
115 |     background-position: -2400px 0;
116 |   }
117 | 
118 |   .beijing {
119 |     background-position: -960px 0;
120 |   }
121 | 
122 |   .xingye {
123 |     background-position: 0 0;
124 |   }
125 | 
126 |   .shanghai {
127 |     background-position: -1560px 0;
128 |   }
129 | 
130 |   .guangfa {
131 |     background-position: -840px 0;
132 |   }
133 | 
134 |   .gongshang {
135 |     background-position: -2640px 0;
136 |   }
137 | 
138 |   .nongye {
139 |     background-position: -1680px 0;
140 |   }
141 | 
142 |   .guangda {
143 |     background-position: -2280px 0;
144 |   }
145 | 
146 |   .zhongguo {
147 |     background-position: -2520px 0;
148 |   }
149 | 
150 |   .zhongxin {
151 |     background-position: -480px 0;
152 |   }
153 | 
154 |   .chuxu {
155 |     background-position: -120px 0;
156 |   }
157 | 
158 |   .bnongshang {
159 |     background-position: -1440px 0;
160 |   }
161 | 
162 |   .huaxia {
163 |     background-position: -2040px 0;
164 |   }
165 | 
166 |   .snongshang {
167 |     background-position: -2880px 0;
168 |   }
169 | 
170 |   .baifubao {
171 |     background-position: -1320px 0;
172 |   }
173 | </style>
174 | 


--------------------------------------------------------------------------------
/src/pages/detail.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="detail-wrap">
  3 |     <div class="detail-left">
  4 |       <div class="product-board">
  5 |         <img :src="productIcon">
  6 |         <ul>
  7 |           <!--<li v-for="item in products">{{ item:name }}</li>-->
  8 |           <router-link v-for="item in products" :key="item.id" :to="{ path: item.path }" tag="li" active-class="active">
  9 |             {{ item.name }}
 10 |           </router-link>
 11 |         </ul>
 12 |       </div>
 13 |     </div>
 14 |     <div class="detail-right">
 15 |       <keep-alive>
 16 |         <router-view></router-view>
 17 |       </keep-alive>
 18 |     </div>
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script type="text/ecmascript-6">
 23 |   export default {
 24 |     data () {
 25 |       return {
 26 |         products: [
 27 |           {
 28 |             name: '数据统计',
 29 |             path: 'count',
 30 |             icon: require('../assets/images/1.png'),
 31 |             active: false
 32 |           },
 33 |           {
 34 |             name: '数据预测',
 35 |             path: 'forecast',
 36 |             active: false
 37 |           },
 38 |           {
 39 |             name: '流量分析',
 40 |             path: 'analysis',
 41 |             active: false
 42 |           },
 43 |           {
 44 |             name: '广告发布',
 45 |             path: 'publish',
 46 |             active: false
 47 |           }
 48 |         ],
 49 |         imgMap: {
 50 |           '/detail/count': require('../assets/images/1.png'),
 51 |           '/detail/forecast': require('../assets/images/2.png'),
 52 |           '/detail/analysis': require('../assets/images/3.png'),
 53 |           '/detail/publish': require('../assets/images/4.png')
 54 |         }
 55 |       }
 56 |     },
 57 |     computed: {
 58 |       productIcon () {
 59 |         // console.log(this.$route.path, this.imgMap)
 60 |         return this.imgMap[this.$route.path]
 61 |       }
 62 |     }
 63 |   }
 64 | </script>
 65 | 
 66 | <style>
 67 |   .detail-wrap {
 68 |     width: 1200px;
 69 |     margin: 0 auto;
 70 |     overflow: hidden;
 71 |     padding-top: 20px;
 72 |   }
 73 | 
 74 |   .detail-left {
 75 |     float: left;
 76 |     width: 200px;
 77 |     text-align: center;
 78 |   }
 79 | 
 80 |   .detail-right {
 81 |     float: left;
 82 |     width: 980px;
 83 |     margin-left: 20px;
 84 |   }
 85 | 
 86 |   .product-board {
 87 |     background: #fff;
 88 |     padding: 20px 0;
 89 |   }
 90 | 
 91 |   .product-board ul {
 92 |     margin-top: 20px;
 93 |   }
 94 | 
 95 |   .product-board li {
 96 |     text-align: left;
 97 |     padding: 10px 15px;
 98 |     cursor: pointer;
 99 |   }
100 | 
101 |   .product-board li.active,
102 |   .product-board li:hover {
103 |     background: #4fc08d;
104 |     color: #fff;
105 |   }
106 | 
107 |   .product-board li a {
108 |     display: block;
109 |   }
110 | 
111 |   .sales-board {
112 |     background: #fff;
113 |   }
114 | 
115 |   .sales-board-form {
116 | 
117 |   }
118 | 
119 |   .sales-board-intro h2 {
120 |     font-size: 20px;
121 |     padding: 20px;
122 |   }
123 | 
124 |   .sales-board-intro p {
125 |     background: #f7fcff;
126 |     padding: 10px 20px;
127 |     color: #999;
128 |     line-height: 1.8;
129 |   }
130 | 
131 |   .sales-board-form {
132 |     padding: 30px 20px;
133 |     font-size: 14px;
134 |   }
135 | 
136 |   .sales-board-line {
137 |     clear: both;
138 |     padding-bottom: 20px;
139 |   }
140 | 
141 |   .sales-board-line-left {
142 |     display: inline-block;
143 |     width: 100px;
144 |   }
145 | 
146 |   .sales-board-line-right {
147 |     display: inline-block;
148 |     width: 75%;
149 |   }
150 | 
151 |   .sales-board-des {
152 |     border-top: 20px solid #f0f2f5;
153 |     padding: 15px 20px;
154 |   }
155 | 
156 |   .sales-board-des p {
157 |     line-height: 1.6;
158 |   }
159 | 
160 |   .sales-board-des h2 {
161 |     font-size: 20px;
162 |     padding-bottom: 15px;
163 |   }
164 | 
165 |   .sales-board-des h3 {
166 |     font-size: 18px;
167 |     font-weight: bold;
168 |     padding: 20px 0 10px 0;
169 |   }
170 | 
171 |   .sales-board-des li {
172 |     padding: 5px 0;
173 |   }
174 | 
175 |   .sales-board-table {
176 |     width: 100%;
177 |     margin-top: 20px;
178 |   }
179 | 
180 |   .sales-board-table th {
181 |     background: #4fc08d;
182 |     color: #fff;
183 |   }
184 | 
185 |   .sales-board-table td {
186 |     border: 1px solid #f0f2f5;
187 |     padding: 15px;
188 |   }
189 | </style>
190 | 


--------------------------------------------------------------------------------
/src/pages/orderList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="order-wrap">
  3 |     <h3>您的产品</h3>
  4 |     <div class="order-list-choose">
  5 |       <div class="order-list-option">
  6 |         选择产品：
  7 |         <v-selection :selections="products" @on-change="productChange"></v-selection>
  8 |       </div>
  9 | 
 10 |       <div class="order-list-option">
 11 |         开始日期：
 12 |         <v-date-picker @on-change="getStartDate"></v-date-picker>
 13 |       </div>
 14 | 
 15 |       <div class="order-list-option">
 16 |         结束日期：
 17 |         <v-date-picker @on-change="getEndDate"></v-date-picker>
 18 |       </div>
 19 | 
 20 |       <div class="order-list-option">
 21 |         关键词：
 22 |         <input type="text" v-model.lazy="query" class="order-query">
 23 |       </div>
 24 |     </div>
 25 |     <div class="order-list-table">
 26 |       <table>
 27 |         <tr>
 28 |           <th v-for="head in tableHeads" @click="changeOrderType(head)" :class="{active:head.active}">
 29 |             {{ head.label }}
 30 |           </th>
 31 |         </tr>
 32 |         <tr v-for="item in tableData" :key="item.period">
 33 |           <td v-for="head in tableHeads">
 34 |             {{ item[head.key] }}
 35 |           </td>
 36 |         </tr>
 37 |       </table>
 38 |     </div>
 39 |   </div>
 40 | </template>
 41 | 
 42 | <script type="text/ecmascript-6">
 43 |   import VSelection from '../components/base/selection'
 44 |   import VDatePicker from '../components/base/datepicker'
 45 |   import _ from 'lodash'
 46 | 
 47 |   export default {
 48 |     components: {
 49 |       VSelection,
 50 |       VDatePicker
 51 |     },
 52 |     data () {
 53 |       return {
 54 |         query: '',
 55 |         productId: 0,
 56 |         startDate: '', // 开始日期
 57 |         endDate: '',   // 结束日期
 58 |         products: [
 59 |           {
 60 |             label: '数据统计',
 61 |             value: 0
 62 |           },
 63 |           {
 64 |             label: '数据预测',
 65 |             value: 1
 66 |           },
 67 |           {
 68 |             label: '流量分析',
 69 |             value: 2
 70 |           },
 71 |           {
 72 |             label: '广告发布',
 73 |             value: 3
 74 |           }
 75 |         ],
 76 |         tableHeads: [
 77 |           {
 78 |             label: '订单号',
 79 |             key: 'orderId'
 80 |           },
 81 |           {
 82 |             label: '购买产品',
 83 |             key: 'product'
 84 |           },
 85 |           {
 86 |             label: '版本类型',
 87 |             key: 'version'
 88 |           },
 89 |           {
 90 |             label: '有效时间',
 91 |             key: 'period'
 92 |           },
 93 |           {
 94 |             label: '购买日期',
 95 |             key: 'date'
 96 |           },
 97 |           {
 98 |             label: '数量',
 99 |             key: 'buyNum'
100 |           },
101 |           {
102 |             label: '总价',
103 |             key: 'amount'
104 |           }
105 |         ],
106 |         currentOrder: 'asc',
107 |         tableData: [] // 存放列表数据
108 |       }
109 |     },
110 |     watch: {
111 |       query () {
112 |         console.log('on query change')
113 |         this.getList()
114 |       }
115 |     },
116 |     methods: {
117 |       productChange (obj) {
118 |         // console.log(obj)
119 |         this.productId = obj.value
120 |         this.getList()
121 |       },
122 |       getStartDate (date) {
123 |         this.startDate = date
124 |         this.getList()
125 |       },
126 |       getEndDate (date) {
127 |         this.endDate = date
128 |         this.getList()
129 |       },
130 |       getList () {
131 |         let reqParams = {
132 |           query: this.query,
133 |           productId: this.productId,
134 |           startDate: this.startDate,
135 |           endDate: this.endDate
136 |         }
137 |         this.$http.post('/api/getOrderList', reqParams)
138 |         .then((res) => {
139 |           this.tableData = res.data.list
140 |         }, (err) => {
141 | 
142 |         })
143 |       },
144 |       // 排序(正、反)
145 |       changeOrderType (headItem) {
146 |         this.tableHeads.map((item) => {
147 |           item.active = false
148 |           return item
149 |         })
150 |         headItem.active = true
151 |         if (this.currentOrder === 'asc') {
152 |           this.currentOrder = 'desc'
153 |         } else if (this.currentOrder === 'desc') {
154 |           this.currentOrder = 'asc'
155 |         }
156 |         this.tableData = _.orderBy(this.tableData, headItem.key, this.currentOrder)
157 |       }
158 |     },
159 |     mounted () {
160 |       this.getList()
161 |     }
162 |   }
163 | </script>
164 | 
165 | <style scoped>
166 |   .order-wrap {
167 |     width: 1200px;
168 |     min-height: 800px;
169 |     margin: 20px auto;
170 |     overflow: hidden;
171 |   }
172 | 
173 |   .order-wrap h3 {
174 |     font-size: 20px;
175 |     font-weight: bold;
176 |     margin-bottom: 20px;
177 |   }
178 | 
179 |   .order-query {
180 |     height: 25px;
181 |     line-height: 25px;
182 |     border: 1px solid #e3e3e3;
183 |     outline: none;
184 |     text-indent: 10px;
185 |   }
186 | 
187 |   .order-list-option {
188 |     display: inline-block;
189 |     padding-left: 15px;
190 |   }
191 | 
192 |   .order-list-option:first-child {
193 |     padding-left: 0;
194 |   }
195 | 
196 |   .order-list-table {
197 |     margin-top: 20px;
198 |   }
199 | 
200 |   .order-list-table table {
201 |     width: 100%;
202 |     background: #fff;
203 |   }
204 | 
205 |   .order-list-table td,
206 |   .order-list-table th {
207 |     border: 1px solid #e3e3e3;
208 |     text-align: center;
209 |     padding: 10px 0;
210 |   }
211 | 
212 |   .order-list-table th {
213 |     background: #4fc08d;
214 |     color: #fff;
215 |     border: 1px solid #4fc08d;
216 |     cursor: pointer;
217 |   }
218 | 
219 |   .order-list-table th.active {
220 |     background: #35495e;
221 |   }
222 | </style>
223 | 


--------------------------------------------------------------------------------
/src/components/layout.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="app-head">
  4 |       <div class="app-head-inner">
  5 |         <router-link :to="{path: '/'}">
  6 |           <img src="../assets/logo.png">
  7 |         </router-link>
  8 |         <div class="head-nav">
  9 |           <ul class="nav-list">
 10 |             <li> {{ username }}</li>
 11 |             <li v-if="username!== ''" class="nav-pile">|</li>
 12 |             <li v-if="username!== ''" @click="quit">退出</li>
 13 |             <li v-if="username=== ''" @click="logClick">登录</li>
 14 |             <li class="nav-pile">|</li>
 15 |             <li v-if="username=== ''" @click="regClick">注册</li>
 16 |             <li v-if="username=== ''" class="nav-pile">|</li>
 17 |             <li @click="aboutClick">关于</li>
 18 |           </ul>
 19 |         </div>
 20 |       </div>
 21 |     </div>
 22 |     <div class="app-content">
 23 |       <keep-alive>
 24 |         <router-view></router-view>
 25 |       </keep-alive>
 26 |     </div>
 27 |     <div class="app-foot">
 28 |       <p>© 2018 WuChenDi</p>
 29 |     </div>
 30 |     <my-dialog :is-show="isShowAboutDialog" @on-close="closeDialog('isShowAboutDialog')">
 31 |       <p>本报告在调研数据的基础上，采用定性与定量相结合的方式深入分析了专车市场发展的驱动因素与阻碍因素、专车市场背后的产业格局、专车企业的竞争格局、用户对专车市场的依赖程度、专车对其他交通工具运力的补充效应等，通过这五个章节的研究反映专车市场的发展态势和面临的问题。报告力求客观、深入、准确地反映中国专车市场发展情况，为政府、企事业单位和社会各界提供决策依据。 </p>
 32 |     </my-dialog>
 33 | 
 34 |     <my-dialog :is-show="isShowLogDialog" @on-close="closeDialog('isShowLogDialog')">
 35 |       <log-form @has-log="onSuccessLog"></log-form>
 36 |     </my-dialog>
 37 | 
 38 |     <my-dialog :is-show="isShowRegDialog" @on-close="closeDialog('isShowRegDialog')">
 39 |       <reg-form></reg-form>
 40 |     </my-dialog>
 41 | 
 42 |   </div>
 43 | </template>
 44 | 
 45 | <script type="text/ecmascript-6">
 46 |   import Dialog from './base/dialog.vue'
 47 |   import LogForm from './logForm.vue'
 48 |   import RegForm from './regForm.vue'
 49 | 
 50 |   export default {
 51 |     components: {
 52 |       MyDialog: Dialog,
 53 |       LogForm,
 54 |       RegForm
 55 |     },
 56 |     data () {
 57 |       return {
 58 |         isShowAboutDialog: false,
 59 |         isShowLogDialog: false,
 60 |         isShowRegDialog: false,
 61 |         username: ''
 62 |       }
 63 |     },
 64 |     methods: {
 65 |       aboutClick () {
 66 |         this.isShowAboutDialog = true
 67 |       },
 68 |       logClick () {
 69 |         this.isShowLogDialog = true
 70 |       },
 71 |       regClick () {
 72 |         this.isShowRegDialog = true
 73 |       },
 74 |       closeDialog (attr) {
 75 |         this[attr] = false
 76 |       },
 77 |       onSuccessLog (data) {
 78 |         console.log(data)
 79 |         this.closeDialog('isShowLogDialog')
 80 |         this.username = data.username
 81 |       }
 82 |     }
 83 |   }
 84 | </script>
 85 | 
 86 | <style>
 87 |   /* http://meyerweb.com/eric/tools/css/reset/
 88 |    v2.0 | 20110126
 89 |    License: none (public domain)
 90 | */
 91 | 
 92 |   html, body, div, span, applet, object, iframe,
 93 |   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 94 |   a, abbr, acronym, address, big, cite, code,
 95 |   del, dfn, em, img, ins, kbd, q, s, samp,
 96 |   small, strike, strong, sub, sup, tt, var,
 97 |   b, u, i, center,
 98 |   dl, dt, dd, ol, ul, li,
 99 |   fieldset, form, label, legend,
100 |   table, caption, tbody, tfoot, thead, tr, th, td,
101 |   article, aside, canvas, details, embed,
102 |   figure, figcaption, footer, header, hgroup,
103 |   menu, nav, output, ruby, section, summary,
104 |   time, mark, audio, video {
105 |     margin: 0;
106 |     padding: 0;
107 |     border: 0;
108 |     font-size: 100%;
109 |     font: inherit;
110 |     vertical-align: baseline;
111 |   }
112 |   /* HTML5 display-role reset for older browsers */
113 |   article, aside, details, figcaption, figure,
114 |   footer, header, hgroup, menu, nav, section {
115 |     display: block;
116 |   }
117 |   body {
118 |     line-height: 1;
119 |   }
120 |   ol, ul {
121 |     list-style: none;
122 |   }
123 |   blockquote, q {
124 |     quotes: none;
125 |   }
126 |   blockquote:before, blockquote:after,
127 |   q:before, q:after {
128 |     content: '';
129 |     content: none;
130 |   }
131 |   table {
132 |     border-collapse: collapse;
133 |     border-spacing: 0;
134 |   }
135 |   a {
136 |     color: inherit;
137 |     text-decoration: none;
138 |   }
139 |   body {
140 |     background: #f0f2f5;
141 |     font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
142 |     font-size: 14px;
143 |     color: #444;
144 |   }
145 |   .app-head {
146 |     background: #363636;
147 |     color: #b2b2b2;
148 |     height: 90px;
149 |     line-height: 90px;
150 |     width: 100%;
151 |   }
152 |   .app-head-inner {
153 |     width: 1200px;
154 |     margin: 0 auto;
155 |   }
156 |   .head-logo {
157 |     float: left;
158 |   }
159 |   .app-head-inner img {
160 |     width: 50px;
161 |     margin-top: 20px;
162 |   }
163 |   .head-nav {
164 |     float: right;
165 |   }
166 |   .head-nav ul {
167 |     overflow: hidden;
168 |   }
169 |   .head-nav li {
170 |     cursor: pointer;
171 |     float: left;
172 |   }
173 |   .nav-pile {
174 |     padding: 0 10px;
175 |   }
176 |   .app-foot {
177 |     text-align: center;
178 |     height: 80px;
179 |     width: 100%;
180 |     line-height: 80px;
181 |     background: #e3e4e8;
182 |     clear: both;
183 |     margin-top: 30px;
184 |   }
185 |   .container {
186 |     width: 1200px;
187 |     margin: 0 auto;
188 |   }
189 |   .hr {
190 |     height: 1px;
191 |     width: 100%;
192 |     background: #ddd;
193 |   }
194 |   .button {
195 |     background: #4fc08d;
196 |     color: #fff;
197 |     display: inline-block;
198 |     padding: 10px 20px;
199 |     cursor: pointer;
200 |   }
201 |   .button:hover {
202 |     background: #4fc08d;
203 |   }
204 |   .g-form {
205 | 
206 |   }
207 |   .g-form-line {
208 |     padding: 15px 0;
209 |   }
210 |   .g-form-label {
211 |     width: 100px;
212 |     font-size: 16px;
213 |     display: inline-block;
214 |   }
215 |   .g-form-input {
216 |     display: inline-block;
217 |   }
218 |   .g-form-input input {
219 |     height: 30px;
220 |     width: 200px;
221 |     line-height: 30px;
222 |     vertical-align: middle;
223 |     padding: 0 10px;
224 |     border: 1px solid #ccc;
225 |   }
226 |   .g-form-btn {
227 |     padding-left: 100px;
228 |   }
229 |   .g-form-error {
230 |     color: red;
231 |     padding-left: 15px;
232 |   }
233 | </style>
234 | 


--------------------------------------------------------------------------------
/src/components/base/datepicker.vue:
--------------------------------------------------------------------------------
  1 | <style scoped>
  2 |   .datetime-picker {
  3 |     position: relative;
  4 |     display: inline-block;
  5 |     font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei";
  6 |     -webkit-font-smoothing: antialiased;
  7 |     color: #333;
  8 |   }
  9 | 
 10 |   .datetime-picker * {
 11 |     box-sizing: border-box;
 12 |   }
 13 | 
 14 |   .datetime-picker input {
 15 |     width: 100%;
 16 |     padding: 5px 10px;
 17 |     height: 30px;
 18 |     outline: 0 none;
 19 |     border: 1px solid #ccc;
 20 |     font-size: 13px;
 21 |   }
 22 | 
 23 |   .datetime-picker .picker-wrap {
 24 |     position: absolute;
 25 |     z-index: 1000;
 26 |     width: 238px;
 27 |     height: 280px;
 28 |     margin-top: 2px;
 29 |     background-color: #fff;
 30 |     box-shadow: 0 0 6px #ccc;
 31 |   }
 32 | 
 33 |   .datetime-picker table {
 34 |     width: 100%;
 35 |     border-collapse: collapse;
 36 |     border-spacing: 0;
 37 |     text-align: center;
 38 |     font-size: 13px;
 39 |   }
 40 | 
 41 |   .datetime-picker tr {
 42 |     height: 34px;
 43 |     border: 0 none;
 44 |   }
 45 | 
 46 |   .datetime-picker th, .datetime-picker td {
 47 |     user-select: none;
 48 |     width: 34px;
 49 |     height: 34px;
 50 |     padding: 0;
 51 |     border: 0 none;
 52 |     line-height: 34px;
 53 |     text-align: center;
 54 |   }
 55 | 
 56 |   .datetime-picker td {
 57 |     cursor: pointer;
 58 |   }
 59 | 
 60 |   .datetime-picker td:hover {
 61 |     background-color: #f0f0f0;
 62 |   }
 63 | 
 64 |   .datetime-picker td.date-pass, .datetime-picker td.date-future {
 65 |     color: #aaa;
 66 |   }
 67 | 
 68 |   .datetime-picker td.date-active {
 69 |     background-color: #ececec;
 70 |     color: #3bb4f2;
 71 |   }
 72 | 
 73 |   .datetime-picker .date-head {
 74 |     background-color: #3bb4f2;
 75 |     text-align: center;
 76 |     color: #fff;
 77 |     font-size: 14px;
 78 |   }
 79 | 
 80 |   .datetime-picker .date-days {
 81 |     color: #3bb4f2;
 82 |     font-size: 14px;
 83 |   }
 84 | 
 85 |   .datetime-picker .show-year {
 86 |     display: inline-block;
 87 |     min-width: 62px;
 88 |     vertical-align: middle;
 89 |   }
 90 | 
 91 |   .datetime-picker .show-month {
 92 |     display: inline-block;
 93 |     min-width: 28px;
 94 |     vertical-align: middle;
 95 |   }
 96 | 
 97 |   .datetime-picker .btn-prev,
 98 |   .datetime-picker .btn-next {
 99 |     cursor: pointer;
100 |     display: inline-block;
101 |     padding: 0 10px;
102 |     vertical-align: middle;
103 |   }
104 | 
105 |   .datetime-picker .btn-prev:hover,
106 |   .datetime-picker .btn-next:hover {
107 |     background: rgba(16, 160, 234, 0.5);
108 |   }
109 | </style>
110 | 
111 | <template>
112 |   <div class="datetime-picker" :style="{ width: width }">
113 |     <input
114 |       type="text"
115 |       :style="styleObj"
116 |       :readonly="readonly"
117 |       v-model="showValue"
118 |       @click="show = !show">
119 |     <div class="picker-wrap" v-show="show">
120 |       <table class="date-picker">
121 |         <thead>
122 |         <tr class="date-head">
123 |           <th colspan="4">
124 |             <span class="btn-prev" @click="yearClick(-1)">&lt;</span>
125 |             <span class="show-year">{{now.getFullYear()}}</span>
126 |             <span class="btn-next" @click="yearClick(1)">&gt;</span>
127 |           </th>
128 |           <th colspan="3">
129 |             <span class="btn-prev" @click="monthClick(-1)">&lt;</span>
130 |             <span class="show-month">{{months[now.getMonth()]}}</span>
131 |             <span class="btn-next" @click="monthClick(1)">&gt;</span>
132 |           </th>
133 |         </tr>
134 |         <tr class="date-days">
135 |           <th v-for="day in days">{{day}}</th>
136 |         </tr>
137 |         </thead>
138 |         <tbody>
139 |         <tr v-for="i in 6">
140 |           <td v-for="j in 7"
141 |               :class="date[i * 7 + j] && date[i * 7 + j].status"
142 |               :date="date[i * 7 + j] && date[i * 7 + j].date"
143 |               @click="pickDate(i * 7 + j)">{{date[i * 7 + j] && date[i * 7 + j].text}}
144 |           </td>
145 |         </tr>
146 |         </tbody>
147 |       </table>
148 |     </div>
149 |   </div>
150 | </template>
151 | 
152 | <script>
153 |   export default {
154 |     props: {
155 |       width: {type: String, default: '238px'},
156 |       readonly: {type: Boolean, default: false},
157 |       value: {type: String, default: ''},
158 |       format: {type: String, default: 'YYYY-MM-DD'},
159 |       styleObj: {type: Object, default: null}
160 |     },
161 |     data () {
162 |       return {
163 |         show: false,
164 |         showValue: '',
165 |         days: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
166 |         months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
167 |         date: [],
168 |         now: new Date()
169 |       }
170 |     },
171 |     watch: {
172 |       now () {
173 |         this.update()
174 |       },
175 |       show () {
176 |         this.update()
177 |       }
178 |     },
179 |     methods: {
180 |       close () {
181 |         this.show = false
182 |       },
183 |       update () {
184 |         var arr = []
185 |         var time = new Date(this.now)
186 |         time.setMonth(time.getMonth(), 1)           // the first day
187 |         var curFirstDay = time.getDay()
188 |         curFirstDay === 0 && (curFirstDay = 7)
189 |         time.setDate(0)                             // the last day
190 |         var lastDayCount = time.getDate()
191 |         for (let i = curFirstDay; i > 0; i--) {
192 |           arr.push({
193 |             text: lastDayCount - i + 1,
194 |             time: new Date(time.getFullYear(), time.getMonth(), lastDayCount - i + 1),
195 |             status: 'date-pass'
196 |           })
197 |         }
198 | 
199 |         time.setMonth(time.getMonth() + 2, 0)       // the last day of this month
200 |         var curDayCount = time.getDate()
201 |         time.setDate(1)                             // fix bug when month change
202 |         var value = this.value || this.stringify(new Date())
203 |         for (let i = 0; i < curDayCount; i++) {
204 |           let tmpTime = new Date(time.getFullYear(), time.getMonth(), i + 1)
205 |           let status = ''
206 |           this.stringify(tmpTime) === value && (status = 'date-active')
207 |           arr.push({
208 |             text: i + 1,
209 |             time: tmpTime,
210 |             status: status
211 |           })
212 |         }
213 | 
214 |         var j = 1
215 |         while (arr.length < 42) {
216 |           arr.push({
217 |             text: j,
218 |             time: new Date(time.getFullYear(), time.getMonth() + 1, j),
219 |             status: 'date-future'
220 |           })
221 |           j++
222 |         }
223 |         this.date = arr
224 |       },
225 |       yearClick (flag) {
226 |         this.now.setFullYear(this.now.getFullYear() + flag)
227 |         this.now = new Date(this.now)
228 |       },
229 |       monthClick (flag) {
230 |         this.now.setMonth(this.now.getMonth() + flag)
231 |         this.now = new Date(this.now)
232 |       },
233 |       pickDate (index) {
234 |         this.show = false
235 |         this.now = new Date(this.date[index].time)
236 |         this.showValue = this.stringify()
237 |         this.$emit('on-change', this.showValue)
238 |       },
239 |       parse (str) {
240 |         var time = new Date(str)
241 |         return isNaN(time.getTime()) ? null : time
242 |       },
243 |       stringify (time = this.now, format = this.format) {
244 |         var year = time.getFullYear()
245 |         var month = time.getMonth() + 1
246 |         var date = time.getDate()
247 |         var monthName = this.months[time.getMonth()]
248 | 
249 |         var map = {
250 |           YYYY: year,
251 |           MMM: monthName,
252 |           MM: ('0' + month).slice(-2),
253 |           M: month,
254 |           DD: ('0' + date).slice(-2),
255 |           D: date
256 |         }
257 |         return format.replace(/Y+|M+|D+/g, function (str) {
258 |           return map[str]
259 |         })
260 |       },
261 |       leave (e) {
262 |         if (!this.$el.contains(e.target)) {
263 |           this.close()
264 |         }
265 |       }
266 |     },
267 |     mounted () {
268 |       this.now = this.parse(this.value) || new Date()
269 |       document.addEventListener('click', this.leave, false)
270 |     },
271 |     beforeDestroy () {
272 |       document.removeEventListener('click', this.leave, false)
273 |     }
274 |   }
275 | </script>
276 | 


--------------------------------------------------------------------------------
/src/pages/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="index-wrap">
  3 |     <div class="index-left">
  4 |       <div class="index-left-block">
  5 |         <h2>全部产品</h2>
  6 |         <template v-for="product in productList">
  7 |           <h3>{{ product.title }}</h3>
  8 |           <ul>
  9 |             <li v-for="item in product.list">
 10 |               <a :href="item.url">{{ item.name }}</a>
 11 |               <span v-if="item.hot" class="hot-tag">HOT</span>
 12 |             </li>
 13 |           </ul>
 14 |           <div v-if="!product.last" class="hr"></div>
 15 |         </template>
 16 |         <!--<h3>PC产品</h3>
 17 |         <ul>
 18 |           <li v-for="item in productList.game">
 19 |             <a :href="item.url">{{ item.name }}</a>
 20 |           </li>
 21 |         </ul>
 22 |         <div class="hr"></div>
 23 |         <h3>应用类</h3>
 24 |         <ul>
 25 |           <li v-for="item in productList.app">
 26 |             <a :href="item.url">{{ item.name }}</a>
 27 |           </li>
 28 |         </ul>-->
 29 |       </div>
 30 |       <div class="index-left-block lastest-news">
 31 |         <h2>最新消息</h2>
 32 |         <ul>
 33 |           <li v-for="item in newsList">
 34 |             <a :href="item.url" class="new-item">{{ item.title }}</a>
 35 |           </li>
 36 |         </ul>
 37 |       </div>
 38 |     </div>
 39 |     <div class="index-right">
 40 |       <slide-show :slides="slides" :inv="invTime"></slide-show>
 41 |       <div class="index-board-list">
 42 |         <div
 43 |           class="index-board-item"
 44 |           v-for="(item, index) in boardList"
 45 |           :class="[{'line-last' : index % 2 !== 0}, 'index-board-' + item.id]">
 46 |           <div class="index-board-item-inner" >
 47 |             <h2>{{ item.title }}</h2>
 48 |             <p>{{ item.description }}</p>
 49 |             <div class="index-board-button">
 50 |               <router-link class="button" :to="{path: 'detail/' + item.toKey}">立即购买</router-link>
 51 |             </div>
 52 |           </div>
 53 |         </div>
 54 |       </div>
 55 |     </div>
 56 |   </div>
 57 | </template>
 58 | 
 59 | <script type="text/ecmascript-6">
 60 |   import slideShow from '../components/slideShow'
 61 | 
 62 |   export default {
 63 |     created: function () {
 64 |         this.$http.get('api/getNewsList')
 65 |       .then((res) => {
 66 |         // console.log(res)
 67 |         // console.log(this)
 68 |         this.newsList = res.data
 69 |       }, (err) => {
 70 |         console.log(err)
 71 |       })
 72 |     },
 73 |     methods: {
 74 | 
 75 |     },
 76 |     components: {
 77 |       slideShow
 78 |     },
 79 | //    created: function () {
 80 | //      this.$http.get('api/getNewsList')
 81 | //      .then((res) => {
 82 | //        this.newsList = res.data
 83 | //      }, (err) => {
 84 | //        console.log(err)
 85 | //      })
 86 | //    },
 87 |     data () {
 88 |       return {
 89 |         invTime: 2000,
 90 |         slides: [
 91 |           {
 92 |             src: require('../assets/slideShow/pic1.jpg'),
 93 |             title: 'xxx1',
 94 |             href: 'detail/analysis'
 95 |           },
 96 |           {
 97 |             src: require('../assets/slideShow/pic2.jpg'),
 98 |             title: 'xxx2',
 99 |             href: 'detail/count'
100 |           },
101 |           {
102 |             src: require('../assets/slideShow/pic3.jpg'),
103 |             title: 'xxx3',
104 |             href: 'http://xxx.xxx.com'
105 |           },
106 |           {
107 |             src: require('../assets/slideShow/pic4.jpg'),
108 |             title: 'xxx4',
109 |             href: 'detail/forecast'
110 |           }
111 |         ],
112 |         boardList: [
113 |           {
114 |             title: '开放产品',
115 |             description: '开放产品是一款开放产品',
116 |             id: 'car',
117 |             toKey: 'analysis',
118 |             saleout: false
119 |           },
120 |           {
121 |             title: '品牌营销',
122 |             description: '品牌营销帮助你的产品更好地找到定位',
123 |             id: 'earth',
124 |             toKey: 'count',
125 |             saleout: false
126 |           },
127 |           {
128 |             title: '使命必达',
129 |             description: '使命必达快速迭代永远保持最前端的速度',
130 |             id: 'loud',
131 |             toKey: 'forecast',
132 |             saleout: true
133 |           },
134 |           {
135 |             title: '勇攀高峰',
136 |             description: '帮你勇闯高峰，到达事业的顶峰',
137 |             id: 'hill',
138 |             toKey: 'publish',
139 |             saleout: false
140 |           }
141 |         ],
142 |         newsList: [],
143 |         productList: {
144 |           pc: {
145 |             title: 'PC产品',
146 |             list: [
147 |               {
148 |                 name: '数据统计',
149 |                 url: 'http://starcraft.com'
150 |               },
151 |               {
152 |                 name: '数据预测',
153 |                 url: 'http://warcraft.com'
154 |               },
155 |               {
156 |                 name: '流量分析',
157 |                 url: 'http://overwatch.com',
158 |                 hot: true
159 |               },
160 |               {
161 |                 name: '广告发布',
162 |                 url: 'http://hearstone.com'
163 |               }
164 |             ]
165 |           },
166 |           app: {
167 |             title: '手机应用类',
168 |             last: true,
169 |             list: [
170 |               {
171 |                 name: '91助手',
172 |                 url: 'http://weixin.com'
173 |               },
174 |               {
175 |                 name: '产品助手',
176 |                 url: 'http://twitter.com',
177 |                 hot: true
178 |               },
179 |               {
180 |                 name: '智能地图',
181 |                 url: 'http://maps.com'
182 |               },
183 |               {
184 |                 name: '团队语音',
185 |                 url: 'http://phone.com'
186 |               }
187 |             ]
188 |           }
189 |         }
190 |       }
191 |     }
192 |   }
193 | </script>
194 | 
195 | <style scoped>
196 |   .index-wrap {
197 |     width: 1200px;
198 |     margin: 0 auto;
199 |     overflow: hidden;
200 |   }
201 | 
202 |   .index-left {
203 |     float: left;
204 |     width: 300px;
205 |     text-align: left;
206 |   }
207 | 
208 |   .index-right {
209 |     float: left;
210 |     width: 900px;
211 |   }
212 | 
213 |   .index-left-block {
214 |     margin: 15px;
215 |     background: #fff;
216 |     box-shadow: 0 0 1px #ddd;
217 |   }
218 | 
219 |   .index-left-block .hr {
220 |     margin-bottom: 20px;
221 |   }
222 | 
223 |   .index-left-block h2 {
224 |     background: #4fc08d;
225 |     color: #fff;
226 |     padding: 10px 15px;
227 |     margin-bottom: 20px;
228 |   }
229 | 
230 |   .index-left-block h3 {
231 |     padding: 0 15px 5px 15px;
232 |     font-weight: bold;
233 |     color: #222;
234 |   }
235 | 
236 |   .index-left-block ul {
237 |     padding: 10px 15px;
238 |   }
239 | 
240 |   .index-left-block li {
241 |     padding: 5px;
242 |   }
243 | 
244 |   .index-board-list {
245 |     overflow: hidden;
246 |   }
247 | 
248 |   .index-board-item {
249 |     float: left;
250 |     width: 400px;
251 |     background: #fff;
252 |     box-shadow: 0 0 1px #ddd;
253 |     padding: 20px;
254 |     margin-right: 20px;
255 |     margin-bottom: 20px;
256 |   }
257 | 
258 |   .index-board-item-inner {
259 |     min-height: 125px;
260 |     padding-left: 120px;
261 |   }
262 | 
263 |   .index-board-car .index-board-item-inner {
264 |     background: url(../assets/images/1.png) no-repeat;
265 |   }
266 | 
267 |   .index-board-loud .index-board-item-inner {
268 |     background: url(../assets/images/2.png) no-repeat;
269 |   }
270 | 
271 |   .index-board-earth .index-board-item-inner {
272 |     background: url(../assets/images/3.png) no-repeat;
273 |   }
274 | 
275 |   .index-board-hill .index-board-item-inner {
276 |     background: url(../assets/images/4.png) no-repeat;
277 |   }
278 | 
279 |   .index-board-item h2 {
280 |     font-size: 18px;
281 |     font-weight: bold;
282 |     color: #000;
283 |     margin-bottom: 15px;
284 |   }
285 | 
286 |   .line-last {
287 |     margin-right: 0;
288 |   }
289 | 
290 |   .index-board-button {
291 |     margin-top: 20px;
292 |   }
293 | 
294 |   .lastest-news {
295 |     min-height: 512px;
296 |   }
297 | 
298 |   .hot-tag {
299 |     background: red;
300 |     color: #fff;
301 |   }
302 | 
303 |   .new-item {
304 |     display: inline-block;
305 |     width: 230px;
306 |     overflow: hidden;
307 |     text-overflow: ellipsis;
308 |     white-space: nowrap;
309 |   }
310 | </style>
311 | 


--------------------------------------------------------------------------------
/src/pages/detail/count.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="sales-board">
  3 |     <div class="sales-board-intro">
  4 |       <h2>数据统计</h2>
  5 |       <p>历史资料、科学实验、检验、统计等所获得的和用于科学研究、技术设计、查证、决策等的数值加以统计为解决方案做前期准备。</p>
  6 |     </div>
  7 |     <div class="sales-board-form">
  8 |       <div class="sales-board-line">
  9 |         <div class="sales-board-line-left">
 10 |           产品类型：
 11 |         </div>
 12 |         <div class="sales-board-line-right">
 13 |           <v-chooser :selections="buyTypes"></v-chooser>
 14 |         </div>
 15 |       </div>
 16 |       <div class="sales-board-line">
 17 |         <div class="sales-board-line-left">
 18 |           适用地区：
 19 |         </div>
 20 |         <div class="sales-board-line-right">
 21 |           <v-selection :selections="districts"></v-selection>
 22 |         </div>
 23 |       </div>
 24 |       <div class="sales-board-line">
 25 |         <div class="sales-board-line-left">
 26 |           有效时间：
 27 |         </div>
 28 |         <div class="sales-board-line-right">
 29 |           半年
 30 |         </div>
 31 |       </div>
 32 |       <div class="sales-board-line">
 33 |         <div class="sales-board-line-left">
 34 |           总价：
 35 |         </div>
 36 |         <div class="sales-board-line-right">
 37 |           500 元
 38 |         </div>
 39 |       </div>
 40 |       <div class="sales-board-line">
 41 |         <div class="sales-board-line-left">&nbsp;</div>
 42 |         <div class="sales-board-line-right">
 43 |           <div class="button">
 44 |             立即购买
 45 |           </div>
 46 |         </div>
 47 |       </div>
 48 |     </div>
 49 |     <div class="sales-board-des">
 50 |       <h2>产品说明</h2>
 51 |       <p>历史资料、科学实验、检验、统计等所获得的和用于科学研究、技术设计、查证、决策等的数值加以统计为解决方案做前期准备。</p>
 52 | 
 53 |       <table class="sales-board-table">
 54 |         <tbody>
 55 |         <tr class="ui-table-row">
 56 |           <td class="col-first">
 57 |             <div class="intro-pic">
 58 |               <label>安全安保</label>
 59 |             </div>
 60 |           </td>
 61 |           <td>
 62 |             <div class="intro-pic">
 63 |               <label>办公文教</label>
 64 |             </div>
 65 |           </td>
 66 |           <td>
 67 |             <div class="intro-pic">
 68 |               <label>彩票</label>
 69 |             </div>
 70 |           </td>
 71 |           <td>
 72 |             <div class="intro-pic">
 73 |               <label>车辆物流</label>
 74 |             </div>
 75 |           </td>
 76 |           <td>
 77 |             <div class="intro-pic">
 78 |               <label>成人用品</label>
 79 |             </div>
 80 |           </td>
 81 |           <td>
 82 |             <div class="intro-pic">
 83 |               <label>出版传媒</label>
 84 |             </div>
 85 |           </td>
 86 |           <td>
 87 |             <div class="intro-pic">
 88 |               <label>电脑硬件</label>
 89 |             </div>
 90 |           </td>
 91 |         </tr>
 92 |         <tr class="ui-table-row">
 93 |           <td class="col-first">
 94 |             <div class="intro-pic">
 95 |               <label>电子电工</label>
 96 |             </div>
 97 |           </td>
 98 |           <td>
 99 |             <div class="intro-pic">
100 |               <label>房地产建筑装修</label>
101 |             </div>
102 |           </td>
103 |           <td>
104 |             <div class="intro-pic">
105 |               <label>分类平台</label>
106 |             </div>
107 |           </td>
108 |           <td>
109 |             <div class="intro-pic">
110 |               <label>服装鞋帽</label>
111 |             </div>
112 |           </td>
113 |           <td>
114 |             <div class="intro-pic">
115 |               <label>箱包饰品</label>
116 |             </div>
117 |           </td>
118 |           <td>
119 |             <div class="intro-pic">
120 |               <label>化工原料制品</label>
121 |             </div>
122 |           </td>
123 |           <td>
124 |             <div class="intro-pic">
125 |               <label>机械设备</label>
126 |             </div>
127 |           </td>
128 |         </tr>
129 |         <tr class="ui-table-row">
130 |           <td class="col-first">
131 |             <div class="intro-pic">
132 |               <label>家庭日用品</label>
133 |             </div>
134 |           </td>
135 |           <td>
136 |             <div class="intro-pic">
137 |               <label>家用电器</label>
138 |             </div>
139 |           </td>
140 |           <td>
141 |             <div class="intro-pic">
142 |               <label>教育培训</label>
143 |             </div>
144 |           </td>
145 |           <td>
146 |             <div class="intro-pic">
147 |               <label>节能环保</label>
148 |             </div>
149 |           </td>
150 |           <td>
151 |             <div class="intro-pic">
152 |               <label>金融服务</label>
153 |             </div>
154 |           </td>
155 |           <td>
156 |             <div class="intro-pic">
157 |               <label>礼品</label>
158 |             </div>
159 |           </td>
160 |           <td>
161 |             <div class="intro-pic">
162 |               <label>旅游住宿</label>
163 |             </div>
164 |           </td>
165 |         </tr>
166 |         <tr class="ui-table-row">
167 |           <td class="col-first">
168 |             <div class="intro-pic">
169 |               <label>美容化妆</label>
170 |             </div>
171 |           </td>
172 |           <td>
173 |             <div class="intro-pic">
174 |               <label>母婴护理</label>
175 |             </div>
176 |           </td>
177 |           <td>
178 |             <div class="intro-pic">
179 |               <label>农林牧渔</label>
180 |             </div>
181 |           </td>
182 |           <td>
183 |             <div class="intro-pic">
184 |               <label>软件</label>
185 |             </div>
186 |           </td>
187 |           <td>
188 |             <div class="intro-pic">
189 |               <label>商务服务</label>
190 |             </div>
191 |           </td>
192 |           <td>
193 |             <div class="intro-pic">
194 |               <label>生活服务</label>
195 |             </div>
196 |           </td>
197 |           <td>
198 |             <div class="intro-pic">
199 |               <label>食品保健品</label>
200 |             </div>
201 |           </td>
202 |         </tr>
203 |         <tr class="ui-table-row">
204 |           <td class="col-first">
205 |             <div class="intro-pic">
206 |               <label>手机数码</label>
207 |             </div>
208 |           </td>
209 |           <td>
210 |             <div class="intro-pic">
211 |               <label>通讯服务设备</label>
212 |             </div>
213 |           </td>
214 |           <td>
215 |             <div class="intro-pic">
216 |               <label>网络服务</label>
217 |             </div>
218 |           </td>
219 |           <td>
220 |             <div class="intro-pic">
221 |               <label>医疗服务</label>
222 |             </div>
223 |           </td>
224 |           <td>
225 |             <div class="intro-pic">
226 |               <label>游戏</label>
227 |             </div>
228 |           </td>
229 |           <td>
230 |             <div class="intro-pic">
231 |               <label>运动休闲娱乐</label>
232 |             </div>
233 |           </td>
234 |           <td>
235 |             <div class="intro-pic">
236 |               <label>招商加盟</label>
237 |             </div>
238 |           </td>
239 |         </tr>
240 |         </tbody>
241 |       </table>
242 |     </div>
243 |   </div>
244 | </template>
245 | 
246 | <script>
247 |   import VSelection from '../../components/base/selection'
248 |   import VChooser from '../../components/base/chooser'
249 |   export default {
250 |     components: {
251 |       VChooser,
252 |       VSelection
253 |     },
254 |     data () {
255 |       return {
256 |         buyTypes: [
257 |           {
258 |             label: '红色版',
259 |             value: 0
260 |           },
261 |           {
262 |             label: '绿色版',
263 |             value: 1
264 |           },
265 |           {
266 |             label: '紫色版',
267 |             value: 2
268 |           }
269 |         ],
270 |         districts: [
271 |           {
272 |             label: '北京',
273 |             value: 0
274 |           },
275 |           {
276 |             label: '上海',
277 |             value: 1
278 |           },
279 |           {
280 |             label: '广州',
281 |             value: 2
282 |           },
283 |           {
284 |             label: '天津',
285 |             value: 3
286 |           },
287 |           {
288 |             label: '武汉',
289 |             value: 4
290 |           },
291 |           {
292 |             label: '重庆',
293 |             value: 5
294 |           }
295 |         ]
296 |       }
297 |     }
298 |   }
299 | </script>
300 | 
301 | <!-- Add "scoped" attribute to limit CSS to this component only -->
302 | <style scoped>
303 | 
304 | </style>
305 | 


--------------------------------------------------------------------------------
/src/pages/detail/analysis.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="sales-board">
  3 |     <div class="sales-board-intro">
  4 |       <h2>流量分析</h2>
  5 |       <p>是指在获得网站访问量基本数据的情况下对有关数据进行统计、分析，从中发现用户访问网站的规律，并将这些规律与网络营销策略等相结合，从而发现目前网络营销活动中可能存在的问题，并为进一步修正或重新制定网络营销策略提供依据。当然这样的定义是站在网络营销管理的角度来考虑的</p>
  6 |     </div>
  7 |     <div class="sales-board-form">
  8 |       <div class="sales-board-line">
  9 |         <div class="sales-board-line-left">
 10 |           购买数量：
 11 |         </div>
 12 |         <div class="sales-board-line-right">
 13 |           <v-counter @on-change="onParamChange('buyNum', $event)"></v-counter>
 14 |         </div>
 15 |       </div>
 16 |       <div class="sales-board-line">
 17 |         <div class="sales-board-line-left">
 18 |           产品类型：
 19 |         </div>
 20 |         <div class="sales-board-line-right">
 21 |           <v-selection :selections="buyTypes" @on-change="onParamChange('buyType', $event)"></v-selection>
 22 |         </div>
 23 |       </div>
 24 |       <div class="sales-board-line">
 25 |         <div class="sales-board-line-left">
 26 |           有效时间：
 27 |         </div>
 28 |         <div class="sales-board-line-right">
 29 |           <v-chooser
 30 |             :selections="periodList"
 31 |             @on-change="onParamChange('period', $event)"></v-chooser>
 32 |         </div>
 33 |       </div>
 34 |       <div class="sales-board-line">
 35 |         <div class="sales-board-line-left">
 36 |           产品版本：
 37 |         </div>
 38 |         <div class="sales-board-line-right">
 39 |           <v-mul-chooser
 40 |             :selections="versionList"
 41 |             @on-change="onParamChange('versions', $event)"></v-mul-chooser>
 42 |         </div>
 43 |       </div>
 44 |       <div class="sales-board-line">
 45 |         <div class="sales-board-line-left">
 46 |           总价：
 47 |         </div>
 48 |         <div class="sales-board-line-right">
 49 |           {{ price }} 元
 50 |         </div>
 51 |       </div>
 52 |       <div class="sales-board-line">
 53 |         <div class="sales-board-line-left">&nbsp;</div>
 54 |         <div class="sales-board-line-right">
 55 |           <div class="button" @click="showPayDialog">
 56 |             立即购买
 57 |           </div>
 58 |         </div>
 59 |       </div>
 60 |     </div>
 61 |     <div class="sales-board-des">
 62 |       <h2>产品说明</h2>
 63 |       <p>网站访问统计分析报告的基础数据源于网站流量统计信息，但其价值远高于原始数据资料。专业的网站访问统计分析报告对网络营销的价值，正如专业的财务分析报告对企业经营策略的价值。</p>
 64 | 
 65 |       <h3>用户行为指标</h3>
 66 |       <ul>
 67 |         <li>用户行为指标主要反映用户是如何来到网站的、在网站上停留了多长时间、访问了哪些页面等，主要的统计指标包括：</li>
 68 |         <li>用户在网站的停留时间；</li>
 69 |         <li>用户来源网站（也叫“引导网站”）；</li>
 70 |         <li>用户所使用的搜索引擎及其关键词；</li>
 71 |         <li>在不同时段的用户访问量情况等。</li>
 72 |       </ul>
 73 | 
 74 |       <h3>浏览网站方式</h3>
 75 |       <ul>
 76 |         <li>用户上网设备类型</li>
 77 |         <li>用户浏览器的名称和版本</li>
 78 |         <li>访问者电脑分辨率显示模式</li>
 79 |         <li>用户所使用的操作系统名称和版本</li>
 80 |         <li>用户所在地理区域分布状况等</li>
 81 |       </ul>
 82 |     </div>
 83 |     <my-dialog :is-show="isShowPayDialog" @on-close="hidePayDialog">
 84 |       <table class="buy-dialog-table">
 85 |         <tr>
 86 |           <th>购买数量</th>
 87 |           <th>产品类型</th>
 88 |           <th>有效时间</th>
 89 |           <th>产品版本</th>
 90 |           <th>总价</th>
 91 |         </tr>
 92 |         <tr>
 93 |           <td>{{ buyNum }}</td>
 94 |           <td>{{ buyType.label }}</td>
 95 |           <td>{{ period.label }}</td>
 96 |           <td>
 97 |             <span v-for="item in versions">{{ item.label }}</span>
 98 |           </td>
 99 |           <td>{{ price }}</td>
100 |         </tr>
101 |       </table>
102 |       <h3 class="buy-dialog-title">请选择银行</h3>
103 |       <bank-chooser @on-change="onChangeBanks"></bank-chooser>
104 |       <div class="button buy-dialog-btn" @click="confirmBuy">
105 |         确认购买
106 |       </div>
107 |     </my-dialog>
108 |     <my-dialog :is-show="isShowErrDialog" @on-close="hideErrDialog">
109 |       支付失败！
110 |     </my-dialog>
111 |     <check-order :is-show-check-dialog="isShowCheckOrder" :order-id="orderId" @on-close-check-dialog="hideCheckOrder"></check-order>
112 |   </div>
113 | </template>
114 | 
115 | <script>
116 |   import VSelection from '../../components/base/selection'
117 |   import VCounter from '../../components/base/counter'
118 |   import VChooser from '../../components/base/chooser'
119 |   import VMulChooser from '../../components/base/multiplyChooser'
120 |   import Dialog from '../../components/base/dialog'
121 |   import BankChooser from '../../components/bankChooser'
122 |   import CheckOrder from '../../components/checkOrder'
123 |   import _ from 'lodash'
124 |   export default {
125 |     components: {
126 |       VSelection,
127 |       VCounter,
128 |       VChooser,
129 |       VMulChooser,
130 |       MyDialog: Dialog,
131 |       BankChooser,
132 |       CheckOrder
133 |     },
134 |     data () {
135 |       return {
136 |         buyNum: 0,
137 |         buyType: {},
138 |         versions: [],
139 |         period: {},
140 |         price: 0,
141 |         versionList: [
142 |           {
143 |             label: '客户版',
144 |             value: 0
145 |           },
146 |           {
147 |             label: '代理商版',
148 |             value: 1
149 |           },
150 |           {
151 |             label: '专家版',
152 |             value: 2
153 |           }
154 |         ],
155 |         periodList: [
156 |           {
157 |             label: '半年',
158 |             value: 0
159 |           },
160 |           {
161 |             label: '一年',
162 |             value: 1
163 |           },
164 |           {
165 |             label: '三年',
166 |             value: 2
167 |           }
168 |         ],
169 |         buyTypes: [
170 |           {
171 |             label: '入门版',
172 |             value: 0
173 |           },
174 |           {
175 |             label: '中级版',
176 |             value: 1
177 |           },
178 |           {
179 |             label: '高级版',
180 |             value: 2
181 |           }
182 |         ],
183 |         isShowPayDialog: false,
184 |         bankId: null,
185 |         orderId: null,
186 |         isShowCheckOrder: false,
187 |         isShowErrDialog: false
188 |       }
189 |     },
190 |     methods: {
191 |       onParamChange (attr, val) {
192 |         this[attr] = val
193 |         this.getPrice()
194 |       },
195 |       getPrice () {
196 |         let buyVersionsArray = _.map(this.versions, (item) => {
197 |           return item.value
198 |         })
199 |         let reqParams = {
200 |           buyNumber: this.buyNum,
201 |           buyType: this.buyType.value,
202 |           period: this.period.value,
203 |           version: buyVersionsArray.join(',')
204 |         }
205 |         this.$http.post('/api/getPrice', reqParams)
206 |         .then((res) => {
207 |           this.price = res.data.amount
208 |         })
209 |       },
210 |       showPayDialog () {
211 |         this.isShowPayDialog = true
212 |       },
213 |       hidePayDialog () {
214 |         this.isShowPayDialog = false
215 |       },
216 |       hideErrDialog () {
217 |         this.isShowErrDialog = false
218 |       },
219 |       hideCheckOrder () {
220 |         this.isShowCheckOrder = false
221 |       },
222 |       onChangeBanks (bankObj) {
223 |         this.bankId = bankObj.id
224 |       },
225 |       confirmBuy () {
226 |         let buyVersionsArray = _.map(this.versions, (item) => {
227 |           return item.value
228 |         })
229 |         let reqParams = {
230 |           buyNumber: this.buyNum,
231 |           buyType: this.buyType.value,
232 |           period: this.period.value,
233 |           version: buyVersionsArray.join(','),
234 |           bankId: this.bankId
235 |         }
236 |         this.$http.post('/api/createOrder', reqParams)
237 |         .then((res) => {
238 |           this.orderId = res.data.orderId
239 |           this.isShowCheckOrder = true
240 |           this.isShowPayDialog = false
241 |         }, (err) => {
242 |           this.isShowBuyDialog = false
243 |           this.isShowErrDialog = true
244 |         })
245 |       }
246 |     },
247 |     mounted () {
248 |       this.buyNum = 1
249 |       this.buyType = this.buyTypes[0]
250 |       this.versions = [this.versionList[0]]
251 |       this.period = this.periodList[0]
252 |       this.getPrice()
253 |     }
254 |   }
255 | </script>
256 | 
257 | <!-- Add "scoped" attribute to limit CSS to this component only -->
258 | <style scoped>
259 |   .buy-dialog-title {
260 |     font-size: 16px;
261 |     font-weight: bold;
262 |   }
263 | 
264 |   .buy-dialog-btn {
265 |     margin-top: 20px;
266 |   }
267 | 
268 |   .buy-dialog-table {
269 |     width: 100%;
270 |     margin-bottom: 20px;
271 |   }
272 | 
273 |   .buy-dialog-table td,
274 |   .buy-dialog-table th {
275 |     border: 1px solid #e3e3e3;
276 |     text-align: center;
277 |     padding: 5px 0;
278 |   }
279 | 
280 |   .buy-dialog-table th {
281 |     background: #4fc08d;
282 |     color: #fff;
283 |     border: 1px solid #4fc08d;
284 |   }
285 | </style>
286 | 


--------------------------------------------------------------------------------
/src/pages/detail/publish.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="sales-board">
  3 |     <div class="sales-board-intro">
  4 |       <h2>广告发布</h2>
  5 |       <p>广告活动按照广告计划执行，到完成广告创作并形成广告作品之后，经过广告主的最后审核同意，即可送到预定的媒介发布刊播。这项工作一般由媒介部门的有关专业人员负责，他们的任务就是专门负责与有关媒介单位接洽，安排有关广告的发播事宜，并对发播质量实施监督。</p>
  6 |     </div>
  7 |     <div class="sales-board-form">
  8 |       <div class="sales-board-line">
  9 |         <div class="sales-board-line-left">
 10 |           购买数量：
 11 |         </div>
 12 |         <div class="sales-board-line-right">
 13 |           <v-counter :max="100" :min="20"></v-counter>
 14 |         </div>
 15 |       </div>
 16 |       <div class="sales-board-line">
 17 |         <div class="sales-board-line-left">
 18 |           行业：
 19 |         </div>
 20 |         <div class="sales-board-line-right">
 21 |           <v-selection :selections="tradeList"></v-selection>
 22 |         </div>
 23 |       </div>
 24 |       <div class="sales-board-line">
 25 |         <div class="sales-board-line-left">
 26 |           产品版本：
 27 |         </div>
 28 |         <div class="sales-board-line-right">
 29 |           <v-mul-chooser :selections="versionList"></v-mul-chooser>
 30 |         </div>
 31 |       </div>
 32 |       <div class="sales-board-line">
 33 |         <div class="sales-board-line-left">
 34 |           有效时间：
 35 |         </div>
 36 |         <div class="sales-board-line-right">
 37 |           半年
 38 |         </div>
 39 |       </div>
 40 |       <div class="sales-board-line">
 41 |         <div class="sales-board-line-left">
 42 |           总价：
 43 |         </div>
 44 |         <div class="sales-board-line-right">
 45 |           500 元
 46 |         </div>
 47 |       </div>
 48 |       <div class="sales-board-line">
 49 |         <div class="sales-board-line-left">&nbsp;</div>
 50 |         <div class="sales-board-line-right">
 51 |           <div class="button">
 52 |             立即购买
 53 |           </div>
 54 |         </div>
 55 |       </div>
 56 |     </div>
 57 |     <div class="sales-board-des">
 58 |       <h2>产品说明</h2>
 59 |       <p>广告活动按照广告计划执行，到完成广告创作并形成广告作品之后，经过广告主的最后审核同意，即可送到预定的媒介发布刊播。这项工作一般由媒介部门的有关专业人员负责，他们的任务就是专门负责与有关媒介单位接洽，安排有关广告的发播事宜，并对发播质量实施监督。</p>
 60 | 
 61 |       <table class="sales-board-table">
 62 |         <tbody>
 63 |         <tr class="ui-table-row">
 64 |           <td class="col-first">
 65 |             <div class="intro-pic">
 66 |               <label>安全安保</label>
 67 |             </div>
 68 |           </td>
 69 |           <td>
 70 |             <div class="intro-pic">
 71 |               <label>办公文教</label>
 72 |             </div>
 73 |           </td>
 74 |           <td>
 75 |             <div class="intro-pic">
 76 |               <label>彩票</label>
 77 |             </div>
 78 |           </td>
 79 |           <td>
 80 |             <div class="intro-pic">
 81 |               <label>车辆物流</label>
 82 |             </div>
 83 |           </td>
 84 |           <td>
 85 |             <div class="intro-pic">
 86 |               <label>成人用品</label>
 87 |             </div>
 88 |           </td>
 89 |           <td>
 90 |             <div class="intro-pic">
 91 |               <label>出版传媒</label>
 92 |             </div>
 93 |           </td>
 94 |           <td>
 95 |             <div class="intro-pic">
 96 |               <label>电脑硬件</label>
 97 |             </div>
 98 |           </td>
 99 |         </tr>
100 |         <tr class="ui-table-row">
101 |           <td class="col-first">
102 |             <div class="intro-pic">
103 |               <label>电子电工</label>
104 |             </div>
105 |           </td>
106 |           <td>
107 |             <div class="intro-pic">
108 |               <label>房地产建筑装修</label>
109 |             </div>
110 |           </td>
111 |           <td>
112 |             <div class="intro-pic">
113 |               <label>分类平台</label>
114 |             </div>
115 |           </td>
116 |           <td>
117 |             <div class="intro-pic">
118 |               <label>服装鞋帽</label>
119 |             </div>
120 |           </td>
121 |           <td>
122 |             <div class="intro-pic">
123 |               <label>箱包饰品</label>
124 |             </div>
125 |           </td>
126 |           <td>
127 |             <div class="intro-pic">
128 |               <label>化工原料制品</label>
129 |             </div>
130 |           </td>
131 |           <td>
132 |             <div class="intro-pic">
133 |               <label>机械设备</label>
134 |             </div>
135 |           </td>
136 |         </tr>
137 |         <tr class="ui-table-row">
138 |           <td class="col-first">
139 |             <div class="intro-pic">
140 |               <label>家庭日用品</label>
141 |             </div>
142 |           </td>
143 |           <td>
144 |             <div class="intro-pic">
145 |               <label>家用电器</label>
146 |             </div>
147 |           </td>
148 |           <td>
149 |             <div class="intro-pic">
150 |               <label>教育培训</label>
151 |             </div>
152 |           </td>
153 |           <td>
154 |             <div class="intro-pic">
155 |               <label>节能环保</label>
156 |             </div>
157 |           </td>
158 |           <td>
159 |             <div class="intro-pic">
160 |               <label>金融服务</label>
161 |             </div>
162 |           </td>
163 |           <td>
164 |             <div class="intro-pic">
165 |               <label>礼品</label>
166 |             </div>
167 |           </td>
168 |           <td>
169 |             <div class="intro-pic">
170 |               <label>旅游住宿</label>
171 |             </div>
172 |           </td>
173 |         </tr>
174 |         <tr class="ui-table-row">
175 |           <td class="col-first">
176 |             <div class="intro-pic">
177 |               <label>美容化妆</label>
178 |             </div>
179 |           </td>
180 |           <td>
181 |             <div class="intro-pic">
182 |               <label>母婴护理</label>
183 |             </div>
184 |           </td>
185 |           <td>
186 |             <div class="intro-pic">
187 |               <label>农林牧渔</label>
188 |             </div>
189 |           </td>
190 |           <td>
191 |             <div class="intro-pic">
192 |               <label>软件</label>
193 |             </div>
194 |           </td>
195 |           <td>
196 |             <div class="intro-pic">
197 |               <label>商务服务</label>
198 |             </div>
199 |           </td>
200 |           <td>
201 |             <div class="intro-pic">
202 |               <label>生活服务</label>
203 |             </div>
204 |           </td>
205 |           <td>
206 |             <div class="intro-pic">
207 |               <label>食品保健品</label>
208 |             </div>
209 |           </td>
210 |         </tr>
211 |         <tr class="ui-table-row">
212 |           <td class="col-first">
213 |             <div class="intro-pic">
214 |               <label>手机数码</label>
215 |             </div>
216 |           </td>
217 |           <td>
218 |             <div class="intro-pic">
219 |               <label>通讯服务设备</label>
220 |             </div>
221 |           </td>
222 |           <td>
223 |             <div class="intro-pic">
224 |               <label>网络服务</label>
225 |             </div>
226 |           </td>
227 |           <td>
228 |             <div class="intro-pic">
229 |               <label>医疗服务</label>
230 |             </div>
231 |           </td>
232 |           <td>
233 |             <div class="intro-pic">
234 |               <label>游戏</label>
235 |             </div>
236 |           </td>
237 |           <td>
238 |             <div class="intro-pic">
239 |               <label>运动休闲娱乐</label>
240 |             </div>
241 |           </td>
242 |           <td>
243 |             <div class="intro-pic">
244 |               <label>招商加盟</label>
245 |             </div>
246 |           </td>
247 |         </tr>
248 |         </tbody>
249 |       </table>
250 |     </div>
251 |   </div>
252 | </template>
253 | 
254 | <script>
255 |   import VSelection from '../../components/base/selection'
256 |   import VCounter from '../../components/base/counter'
257 |   import VMulChooser from '../../components/base/multiplyChooser'
258 |   export default {
259 |     components: {
260 |       VSelection,
261 |       VCounter,
262 |       VMulChooser
263 |     },
264 |     data () {
265 |       return {
266 |         tradeList: [
267 |           {
268 |             label: '出版业',
269 |             value: 0
270 |           },
271 |           {
272 |             label: '媒体',
273 |             value: 1
274 |           },
275 |           {
276 |             label: '金融',
277 |             value: 2
278 |           },
279 |           {
280 |             label: '互联网',
281 |             value: 3
282 |           },
283 |           {
284 |             label: '游戏',
285 |             value: 4
286 |           }
287 |         ],
288 |         versionList: [
289 |           {
290 |             label: '初级版',
291 |             value: 0
292 |           },
293 |           {
294 |             label: '中级版',
295 |             value: 1
296 |           },
297 |           {
298 |             label: '高级版',
299 |             value: 2
300 |           },
301 |           {
302 |             label: '专家版',
303 |             value: 3
304 |           }
305 |         ]
306 |       }
307 |     }
308 |   }
309 | </script>
310 | 
311 | <!-- Add "scoped" attribute to limit CSS to this component only -->
312 | <style>
313 | 
314 | </style>
315 | 


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