├── static ├── .gitkeep ├── icon │ ├── me.png │ ├── box.jpg │ ├── brand.png │ ├── cart.png │ ├── index.png │ ├── live.png │ ├── money.jpg │ ├── sign.jpg │ ├── star.png │ ├── tuan.jpg │ ├── type.jpg │ ├── addIcon.png │ ├── cartchoose.png │ ├── livechoose.png │ ├── mechoose.png │ ├── starChoose.png │ ├── brandchoose.png │ ├── indexchoose.png │ ├── reductIcon1.png │ ├── reductIcon2.png │ ├── order_checked.png │ └── order_not_checked.png ├── mine │ ├── clock.png │ ├── msg.png │ ├── set.png │ ├── msgwhite.png │ ├── priceIcon1.png │ ├── priceIcon2.png │ ├── priceIcon3.png │ ├── priceIcon5.png │ ├── setwhite.png │ └── colorIcon │ │ ├── icon1.png │ │ ├── icon2.png │ │ ├── icon3.png │ │ ├── icon4.png │ │ ├── icon5.png │ │ ├── icon6.png │ │ ├── icon7.png │ │ ├── icon8.png │ │ ├── icon9.png │ │ ├── icon10.png │ │ ├── icon11.png │ │ └── icon12.png └── css │ └── reset.css ├── src ├── common │ ├── stylus │ │ ├── index.styl │ │ └── mixin.styl │ └── util │ │ ├── timeInterval.js │ │ └── mock.js ├── assets │ ├── bg │ │ ├── jumeibg2.jpg │ │ └── valueLoad.jpg │ ├── icon │ │ ├── clock.png │ │ ├── close.png │ │ ├── hook.png │ │ ├── magic.png │ │ ├── share.png │ │ ├── store.png │ │ ├── cartAdd.png │ │ ├── message.png │ │ ├── personal.png │ │ ├── arrow_left.png │ │ ├── arrow_right.png │ │ ├── cartReduce.png │ │ ├── search_icon.png │ │ └── pay_pop_img_loading_fail.png │ ├── logintype │ │ ├── qq.png │ │ ├── alipay.png │ │ ├── blog.png │ │ └── wechat.png │ └── dutyfree │ │ ├── free1.jpg │ │ ├── free2.jpg │ │ ├── free3.jpg │ │ └── free4.jpg ├── store │ ├── getter.js │ ├── mutation-types.js │ ├── index.js │ ├── mutations.js │ ├── actions.js │ └── mudules │ │ └── cart.js ├── components │ ├── Search.vue │ ├── ImgScale.vue │ ├── NavBar.vue │ ├── GoodsList.vue │ ├── Tabbar.vue │ ├── ActivityList.vue │ ├── cartDetail.vue │ └── BuyBox.vue ├── main.js ├── App.vue ├── pages │ ├── product │ │ ├── detail.vue │ │ ├── comment.vue │ │ ├── index.vue │ │ └── info.vue │ ├── livecommunity │ │ └── index.vue │ ├── index │ │ ├── page7.vue │ │ ├── page6.vue │ │ ├── page5.vue │ │ ├── page1.vue │ │ ├── page2.vue │ │ ├── page4.vue │ │ ├── page3.vue │ │ └── index.vue │ ├── myself │ │ ├── setter.vue │ │ ├── login.vue │ │ └── index.vue │ ├── brandsale │ │ └── index.vue │ └── shopcart │ │ └── index.vue └── router │ └── index.js ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── .babelrc ├── index.html ├── package.json └── README.md /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/common/stylus/index.styl: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /static/icon/me.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/icon/me.png -------------------------------------------------------------------------------- /static/icon/box.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/icon/box.jpg -------------------------------------------------------------------------------- /static/icon/brand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/icon/brand.png -------------------------------------------------------------------------------- /static/icon/cart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/icon/cart.png -------------------------------------------------------------------------------- /static/icon/index.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/icon/index.png -------------------------------------------------------------------------------- /static/icon/live.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/icon/live.png -------------------------------------------------------------------------------- /static/icon/money.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/icon/money.jpg -------------------------------------------------------------------------------- /static/icon/sign.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/icon/sign.jpg -------------------------------------------------------------------------------- /static/icon/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/icon/star.png -------------------------------------------------------------------------------- /static/icon/tuan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/icon/tuan.jpg -------------------------------------------------------------------------------- /static/icon/type.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/icon/type.jpg -------------------------------------------------------------------------------- /static/mine/clock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/mine/clock.png -------------------------------------------------------------------------------- /static/mine/msg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/mine/msg.png -------------------------------------------------------------------------------- /static/mine/set.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/mine/set.png -------------------------------------------------------------------------------- /static/icon/addIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/icon/addIcon.png -------------------------------------------------------------------------------- /src/assets/bg/jumeibg2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/bg/jumeibg2.jpg -------------------------------------------------------------------------------- /src/assets/icon/clock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/icon/clock.png -------------------------------------------------------------------------------- /src/assets/icon/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/icon/close.png -------------------------------------------------------------------------------- /src/assets/icon/hook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/icon/hook.png -------------------------------------------------------------------------------- /src/assets/icon/magic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/icon/magic.png -------------------------------------------------------------------------------- /src/assets/icon/share.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/icon/share.png -------------------------------------------------------------------------------- /src/assets/icon/store.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/icon/store.png -------------------------------------------------------------------------------- /static/icon/cartchoose.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/icon/cartchoose.png -------------------------------------------------------------------------------- /static/icon/livechoose.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/icon/livechoose.png -------------------------------------------------------------------------------- /static/icon/mechoose.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/icon/mechoose.png -------------------------------------------------------------------------------- /static/icon/starChoose.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/icon/starChoose.png -------------------------------------------------------------------------------- /static/mine/msgwhite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/mine/msgwhite.png -------------------------------------------------------------------------------- /static/mine/priceIcon1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/mine/priceIcon1.png -------------------------------------------------------------------------------- /static/mine/priceIcon2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/mine/priceIcon2.png -------------------------------------------------------------------------------- /static/mine/priceIcon3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/mine/priceIcon3.png -------------------------------------------------------------------------------- /static/mine/priceIcon5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/mine/priceIcon5.png -------------------------------------------------------------------------------- /static/mine/setwhite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/mine/setwhite.png -------------------------------------------------------------------------------- /src/assets/bg/valueLoad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/bg/valueLoad.jpg -------------------------------------------------------------------------------- /src/assets/icon/cartAdd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/icon/cartAdd.png -------------------------------------------------------------------------------- /src/assets/icon/message.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/icon/message.png -------------------------------------------------------------------------------- /src/assets/icon/personal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/icon/personal.png -------------------------------------------------------------------------------- /src/assets/logintype/qq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/logintype/qq.png -------------------------------------------------------------------------------- /static/icon/brandchoose.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/icon/brandchoose.png -------------------------------------------------------------------------------- /static/icon/indexchoose.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/icon/indexchoose.png -------------------------------------------------------------------------------- /static/icon/reductIcon1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/icon/reductIcon1.png -------------------------------------------------------------------------------- /static/icon/reductIcon2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/icon/reductIcon2.png -------------------------------------------------------------------------------- /src/assets/dutyfree/free1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/dutyfree/free1.jpg -------------------------------------------------------------------------------- /src/assets/dutyfree/free2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/dutyfree/free2.jpg -------------------------------------------------------------------------------- /src/assets/dutyfree/free3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/dutyfree/free3.jpg -------------------------------------------------------------------------------- /src/assets/dutyfree/free4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/dutyfree/free4.jpg -------------------------------------------------------------------------------- /src/assets/icon/arrow_left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/icon/arrow_left.png -------------------------------------------------------------------------------- /src/assets/icon/arrow_right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/icon/arrow_right.png -------------------------------------------------------------------------------- /src/assets/icon/cartReduce.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/icon/cartReduce.png -------------------------------------------------------------------------------- /src/assets/icon/search_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/icon/search_icon.png -------------------------------------------------------------------------------- /src/assets/logintype/alipay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/logintype/alipay.png -------------------------------------------------------------------------------- /src/assets/logintype/blog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/logintype/blog.png -------------------------------------------------------------------------------- /src/assets/logintype/wechat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/logintype/wechat.png -------------------------------------------------------------------------------- /static/icon/order_checked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/icon/order_checked.png -------------------------------------------------------------------------------- /static/mine/colorIcon/icon1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/mine/colorIcon/icon1.png -------------------------------------------------------------------------------- /static/mine/colorIcon/icon2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/mine/colorIcon/icon2.png -------------------------------------------------------------------------------- /static/mine/colorIcon/icon3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/mine/colorIcon/icon3.png -------------------------------------------------------------------------------- /static/mine/colorIcon/icon4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/mine/colorIcon/icon4.png -------------------------------------------------------------------------------- /static/mine/colorIcon/icon5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/mine/colorIcon/icon5.png -------------------------------------------------------------------------------- /static/mine/colorIcon/icon6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/mine/colorIcon/icon6.png -------------------------------------------------------------------------------- /static/mine/colorIcon/icon7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/mine/colorIcon/icon7.png -------------------------------------------------------------------------------- /static/mine/colorIcon/icon8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/mine/colorIcon/icon8.png -------------------------------------------------------------------------------- /static/mine/colorIcon/icon9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/mine/colorIcon/icon9.png -------------------------------------------------------------------------------- /static/icon/order_not_checked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/icon/order_not_checked.png -------------------------------------------------------------------------------- /static/mine/colorIcon/icon10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/mine/colorIcon/icon10.png -------------------------------------------------------------------------------- /static/mine/colorIcon/icon11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/mine/colorIcon/icon11.png -------------------------------------------------------------------------------- /static/mine/colorIcon/icon12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/static/mine/colorIcon/icon12.png -------------------------------------------------------------------------------- /src/assets/icon/pay_pop_img_loading_fail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuyuanlijie/vue-jumei-app/HEAD/src/assets/icon/pay_pop_img_loading_fail.png -------------------------------------------------------------------------------- /src/store/getter.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // countAnother: function (state) { 3 | // return state.anotherIncrement 4 | // } 5 | 6 | } 7 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /.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 | *.suo 11 | *.ntvs* 12 | *.njsproj 13 | *.sln 14 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/components/Search.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 11 | 12 | 17 | -------------------------------------------------------------------------------- /src/store/mutation-types.js: -------------------------------------------------------------------------------- 1 | export const ADDACTIVITY = "ADDACTIVITY" 2 | export const ADDGOODS = "ADDGOODS" 3 | export const TABHIDDEN = 'TABHIDDEN' 4 | export const PRODUCTINFO = 'PRODUCTINFO' 5 | export const SELECTTAB = 'SELECTTAB' 6 | export const ADD_TO_CART = 'ADD_TO_CART' 7 | export const UPDATE_THIS_PRODUCT = 'UPDATE_THIS_PRODUCT' 8 | -------------------------------------------------------------------------------- /.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-runtime"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"], 15 | "plugins": ["istanbul"] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue-jumei-app 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import actions from './actions.js' 4 | import mutations from './mutations.js' 5 | import getter from './getter.js' 6 | import cart from './mudules/cart' 7 | 8 | Vue.use(Vuex) 9 | 10 | // 存放着组件中信息的状态 11 | const state = { 12 | navState: 0, //获取导航条的状态 13 | activityList: [], 14 | goodsList: [], 15 | tabHidden: true, 16 | productInfo: {}, 17 | selectTab: '首页' 18 | } 19 | 20 | export default new Vuex.Store({ 21 | state, 22 | mutations, 23 | actions, 24 | getter, 25 | modules: { 26 | cart 27 | } 28 | }) 29 | -------------------------------------------------------------------------------- /src/store/mutations.js: -------------------------------------------------------------------------------- 1 | import * as types from './mutation-types.js' 2 | export default { 3 | // 加1 这里操作要大写 4 | // INCREMENT(state) { 5 | // state.count++; 6 | // }, 7 | [types.ADDACTIVITY](state, value) { 8 | state.activityList = value 9 | }, 10 | [types.ADDGOODS](state, value) { 11 | state.goodsList = value 12 | }, 13 | [types.TABHIDDEN] (state) { 14 | state.tabHidden = !state.tabHidden 15 | }, 16 | [types.PRODUCTINFO] (state, value) { 17 | state.productInfo = value 18 | }, 19 | [types.SELECTTAB] (state, value) { 20 | state.selectTab = value 21 | } 22 | 23 | } 24 | -------------------------------------------------------------------------------- /src/store/actions.js: -------------------------------------------------------------------------------- 1 | import * as types from './mutation-types.js' 2 | export default { 3 | // increment({commit}){ 4 | // commit("INCREMENT") 5 | // }, 6 | addActivity ({commit}, value) { 7 | commit(types.ADDACTIVITY, value) 8 | }, 9 | addGoods ({commit}, value) { 10 | commit(types.ADDGOODS, value) 11 | }, 12 | tabHidden ({commit}) { 13 | commit(types.TABHIDDEN) 14 | }, 15 | productInfo ({commit}, value) { 16 | commit(types.PRODUCTINFO, value) 17 | }, 18 | selectTab ({commit}, value) { 19 | commit(types.SELECTTAB, value) 20 | }, 21 | // 添加商品到购物车 22 | addToCart ({commit}, product) { 23 | if(product.inventory > 0) { 24 | commit(types.ADD_TO_CART, product) 25 | } 26 | }, 27 | // 修改购物车商品信息 28 | updateThisCart ({commit}, product) { 29 | if (true) { 30 | commit(types.UPDATE_THIS_PRODUCT, product) 31 | } 32 | } 33 | 34 | 35 | } 36 | -------------------------------------------------------------------------------- /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 MintUI from 'mint-ui' //前面是命名对象 7 | import store from './store/index.js' 8 | import axios from 'axios' 9 | import 'mint-ui/lib/style.css' 10 | import './common/stylus/index.styl' 11 | import VueTouch from 'vue-touch' 12 | 13 | global.storage = window.localStorage 14 | 15 | // 默认设置axios请求 16 | // axios.default.baseUrl = 'http://localhost:3000/' //设置默认请求的前缀 17 | axios.defaults.withCredentials = true //允许跨域 18 | global.axios = axios //设置为全局引用 19 | 20 | // Vue.prototype.$http = axios //在vue的原型链上添加axios 21 | Vue.config.productionTip = false 22 | Vue.use(MintUI) 23 | Vue.use(VueTouch, {name: 'v-touch'}) 24 | 25 | /* eslint-disable no-new */ 26 | new Vue({ 27 | el: '#app', 28 | router, 29 | store, 30 | template: '', 31 | components: { App } 32 | }) 33 | -------------------------------------------------------------------------------- /src/common/util/timeInterval.js: -------------------------------------------------------------------------------- 1 | 2 | function cartInterVal (time) { 3 | let interVal = setInterval(() => { 4 | if(this.time.sec > 0) { 5 | let newSec = Math.round((this.time.sec - 0.1)*10)/10 + '' 6 | // math round 四舍五入 先扩大一倍 在除去自身 7 | // console.log((newSec + '').split('.')[1] == undefined) 8 | if (newSec.split('.')[0].length == 1) { 9 | newSec = '0' + newSec 10 | } 11 | if ((newSec).split('.')[1] == undefined) { 12 | this.time.sec = newSec + '.0' 13 | } else { 14 | this.time.sec = newSec 15 | } 16 | } else { 17 | this.time.sec = 60 18 | if(this.time.min > 0) { 19 | this.time.min-- 20 | let newMin = this.time.min + '' 21 | if(newMin.length == 1 ) { 22 | this.time.min = '0' + newMin 23 | } 24 | } else { 25 | this.time.min = 0 26 | } 27 | } 28 | if( this.min == 0 && this.sec == 0) 29 | clearInterval(this.interval) 30 | }, 100) 31 | 32 | } 33 | 34 | 35 | export {cartInterVal} 36 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 38 | 39 | 57 | -------------------------------------------------------------------------------- /src/components/ImgScale.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 23 | 24 | 58 | -------------------------------------------------------------------------------- /src/store/mudules/cart.js: -------------------------------------------------------------------------------- 1 | import * as types from '../mutation-types.js' 2 | 3 | const storage = window.localStorage 4 | 5 | const state = { 6 | added: [], 7 | checkoutStatus: null 8 | } 9 | // getter 10 | const getters = { 11 | checkoutStatus: state => state.checkoutStatus, 12 | cartLists: state => state.added 13 | } 14 | 15 | // actions 16 | const actions = { 17 | 18 | } 19 | 20 | // mutations 21 | const mutations = { 22 | [types.ADD_TO_CART] (state, product) { 23 | let id = product.id 24 | const record = state.added.find(p => p.id === id && p.type === product.type) 25 | // 解决方法一 找到数据遍历一次 26 | // 方法二 是获取到父级的数据 27 | if (!record) { 28 | state.added.push(product) 29 | } else { 30 | record.quantity += product.quantity 31 | } 32 | storage.setItem('cart', JSON.stringify(state.added)) 33 | }, 34 | //传入商品的信息 product id和类型判断当前存储的商品 要修改的数量 35 | // 更新产品的数据 36 | [types.UPDATE_THIS_PRODUCT] (state, product) { 37 | let {id,type,quantity} = product //对象的解构 38 | const record = state.added.find(p => p.id===id &&p.type===type) 39 | if (quantity>0) { 40 | record?record.quantity = quantity : '' 41 | } else { 42 | // 传入的商品数量为0 就删除这个商品 删除指定的序号的商品 43 | let index = state.added.indexOf(record) 44 | state.added.splice(index,1) 45 | } 46 | storage.setItem('cart', JSON.stringify(state.added)) 47 | 48 | }, 49 | 50 | } 51 | 52 | export default { 53 | state, 54 | getters, 55 | actions, 56 | mutations 57 | } 58 | -------------------------------------------------------------------------------- /src/pages/product/detail.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 45 | 46 | 68 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: './', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'], 18 | // Run the build command with an extra argument to 19 | // View the bundle analyzer report after build finishes: 20 | // `npm run build --report` 21 | // Set to `true` or `false` to always turn it on or off 22 | bundleAnalyzerReport: process.env.npm_config_report 23 | }, 24 | dev: { 25 | env: require('./dev.env'), 26 | port: 8080, 27 | autoOpenBrowser: true, 28 | assetsSubDirectory: 'static', 29 | assetsPublicPath: '/', 30 | proxyTable: { 31 | // '/api': { 32 | // target: 'http://g.cn', 33 | // changeOrigin: true, 34 | // pathRewrite: { 35 | // '^/api': '/api' 36 | // } 37 | // } 38 | }, 39 | // CSS Sourcemaps off by default because relative paths are "buggy" 40 | // with this option, according to the CSS-Loader README 41 | // (https://github.com/webpack/css-loader#sourcemaps) 42 | // In our experience, they generally work as expected, 43 | // just be aware of this issue when enabling this option. 44 | cssSourceMap: false 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/pages/livecommunity/index.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 29 | 30 | 31 | 76 | -------------------------------------------------------------------------------- /src/components/NavBar.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 55 | 56 | 81 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-jumei-app", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "wuyuanlijie ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "start": "node build/dev-server.js", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "axios": "^0.16.2", 14 | "better-scroll": "^1.2.6", 15 | "mint-ui": "^2.2.9", 16 | "mockjs": "^1.0.1-beta3", 17 | "vue": "^2.4.2", 18 | "vue-router": "^2.7.0", 19 | "vue-touch": "next", 20 | "vuex": "^2.4.0" 21 | }, 22 | "devDependencies": { 23 | "autoprefixer": "^7.1.2", 24 | "babel-core": "^6.22.1", 25 | "babel-loader": "^7.1.1", 26 | "babel-plugin-transform-runtime": "^6.22.0", 27 | "babel-preset-env": "^1.3.2", 28 | "babel-preset-stage-2": "^6.22.0", 29 | "babel-register": "^6.22.0", 30 | "chalk": "^2.0.1", 31 | "connect-history-api-fallback": "^1.3.0", 32 | "copy-webpack-plugin": "^4.0.1", 33 | "css-loader": "^0.28.0", 34 | "cssnano": "^3.10.0", 35 | "eventsource-polyfill": "^0.9.6", 36 | "express": "^4.14.1", 37 | "extract-text-webpack-plugin": "^2.0.0", 38 | "file-loader": "^0.11.1", 39 | "friendly-errors-webpack-plugin": "^1.1.3", 40 | "html-webpack-plugin": "^2.28.0", 41 | "http-proxy-middleware": "^0.17.3", 42 | "opn": "^5.1.0", 43 | "optimize-css-assets-webpack-plugin": "^2.0.0", 44 | "ora": "^1.2.0", 45 | "rimraf": "^2.6.0", 46 | "semver": "^5.3.0", 47 | "shelljs": "^0.7.6", 48 | "stylus": "^0.54.5", 49 | "stylus-loader": "^3.0.1", 50 | "url-loader": "^0.5.8", 51 | "vue-loader": "^13.0.4", 52 | "vue-style-loader": "^3.0.1", 53 | "vue-template-compiler": "^2.4.2", 54 | "webpack": "^2.6.1", 55 | "webpack-bundle-analyzer": "^2.2.1", 56 | "webpack-dev-middleware": "^1.10.0", 57 | "webpack-hot-middleware": "^2.18.0", 58 | "webpack-merge": "^4.1.0" 59 | }, 60 | "engines": { 61 | "node": ">= 4.0.0", 62 | "npm": ">= 3.0.0" 63 | }, 64 | "browserslist": [ 65 | "> 1%", 66 | "last 2 versions", 67 | "not ie <= 8" 68 | ] 69 | } 70 | -------------------------------------------------------------------------------- /static/css/reset.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/ 3 | 4 | ) 5 | * http://cssreset.com 6 | 7 | */ 8 | html, body, div, span, applet, object, iframe, 9 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 10 | a, abbr, acronym, address, big, cite, code, 11 | del, dfn, em, img, ins, kbd, q, s, samp, 12 | small, strike, strong, sub, sup, tt, var, 13 | b, u, i, center, 14 | dl, dt, dd, ol, ul, li, 15 | fieldset, form, label, legend, 16 | table, caption, tbody, tfoot, thead, tr, th, td, 17 | article, aside, canvas, details, embed, 18 | figure, figcaption, footer, header, 19 | menu, nav, output, ruby, section, summary, 20 | time, mark, audio, video, input { 21 | margin: 0; 22 | padding: 0; 23 | border: 0; 24 | font-size: 100%; 25 | font-weight: normal; 26 | vertical-align: baseline; 27 | } 28 | 29 | /* HTML5 display-role reset for older browsers */ 30 | article, aside, details, figcaption, figure, 31 | footer, header, menu, nav, section { 32 | display: block; 33 | } 34 | 35 | body { 36 | line-height: 1; 37 | } 38 | 39 | blockquote, q { 40 | quotes: none; 41 | } 42 | 43 | blockquote:before, blockquote:after, 44 | q:before, q:after { 45 | content: none; 46 | } 47 | 48 | table { 49 | border-collapse: collapse; 50 | border-spacing: 0; 51 | } 52 | 53 | /* custom */ 54 | a { 55 | color: #7e8c8d; 56 | text-decoration: none; 57 | -webkit-backface-visibility: hidden; 58 | } 59 | 60 | li { 61 | list-style: none; 62 | } 63 | 64 | ::-webkit-scrollbar { 65 | width: 5px; 66 | height: 5px; 67 | } 68 | 69 | ::-webkit-scrollbar-track-piece { 70 | background-color: rgba(0, 0, 0, 0.2); 71 | -webkit-border-radius: 6px; 72 | } 73 | 74 | ::-webkit-scrollbar-thumb:vertical { 75 | height: 5px; 76 | background-color: rgba(125, 125, 125, 0.7); 77 | -webkit-border-radius: 6px; 78 | } 79 | 80 | ::-webkit-scrollbar-thumb:horizontal { 81 | width: 5px; 82 | background-color: rgba(125, 125, 125, 0.7); 83 | -webkit-border-radius: 6px; 84 | } 85 | 86 | html, body { 87 | width: 100%; 88 | } 89 | 90 | body { 91 | -webkit-text-size-adjust: none; 92 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 93 | } 94 | -------------------------------------------------------------------------------- /src/pages/index/page7.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 48 | 49 | 79 | -------------------------------------------------------------------------------- /src/common/stylus/mixin.styl: -------------------------------------------------------------------------------- 1 | mainColor = #FE4070 //主体红色 2 | mainTint = #F5F5F5 // 背景浅色 与 浅色分割线 3 | 4 | fontColor = rgba(7, 17, 27, .8) //字体颜色 5 | 6 | fontTint = #999 // 浅色字体 一般这个 7 | fontMain = #7A7A7A //购物车主要的浅色字体的颜色 8 | 9 | borderColor = #e0e0e0 //边框的淡色 10 | 11 | numFont = .3675rem //数字的字体大小 12 | mainFont = .4rem //主要字体大小 13 | 14 | bgColor = #F6F6F6 15 | //购物车的高度 1.5625rem 16 | 17 | 18 | // 小号字体 19 | smallFont($size=0.90) 20 | font-size 12px 21 | transform-origin 0 0 22 | transform scale(.9) 23 | 24 | 25 | // 细线分割 在下方 26 | border-1px($width = 100%, $left=0) 27 | position relative 28 | &:after 29 | display block 30 | position absolute 31 | bottom 0 32 | left $left 33 | width $width 34 | border-top 1px solid fontTint 35 | transform scaleY(.1) 36 | transform-origin 0 100% 37 | content '' 38 | 39 | // 细线分割在上方 40 | border-1px-top() 41 | &:after 42 | display block 43 | position absolute 44 | top 0 45 | left 0 46 | width 100% 47 | border-top 1px solid borderColor 48 | transform scaleY(.5) 49 | transform-origin 0 100% 50 | content '' 51 | 52 | border-none() 53 | &:after 54 | display none 55 | 56 | // 粗线分割 57 | border-line($height = 0.2rem, $scale = 1) 58 | position relative 59 | &:after 60 | content '' 61 | position absolute 62 | left 0 63 | right 0 64 | bottom 0 65 | height $height 66 | width 10rem 67 | transform scaleY($scale) 68 | transform-origin 0 100% 69 | background mainTint 70 | 71 | // 价格横线 72 | price-line($color, $size) 73 | &:after 74 | position absolute 75 | content '' 76 | right 0 77 | top 50% 78 | width .8rem 79 | height 1px 80 | background $color 81 | transform scaleY($size) 82 | 83 | arrow-right($width,$top=.15rem,$left=0.8rem, $color=fontTint ) 84 | 85 | &:after 86 | display block 87 | position absolute 88 | left $left 89 | top $top 90 | width $width 91 | height $width 92 | border-color $color 93 | border-width .01rem .01rem 0 0 94 | border-style solid 95 | transform rotate(45deg) 96 | content '' 97 | 98 | // 我的页面 个人信息 99 | right-line() 100 | &:after 101 | display block 102 | position absolute 103 | right 0 104 | top 27% 105 | bottom 0 106 | height .7rem 107 | width 1.5px 108 | background rgba(1,1,1,.1) 109 | content '' 110 | -------------------------------------------------------------------------------- /src/pages/index/page6.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 45 | 46 | 89 | -------------------------------------------------------------------------------- /src/pages/index/page5.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 45 | 46 | 89 | -------------------------------------------------------------------------------- /src/components/GoodsList.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 51 | 52 | 95 | -------------------------------------------------------------------------------- /src/components/Tabbar.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 88 | 89 | 101 | -------------------------------------------------------------------------------- /src/pages/myself/setter.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 68 | 69 | 119 | -------------------------------------------------------------------------------- /src/components/ActivityList.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 59 | 60 | 112 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | 4 | 5 | //可以使用路由懒加载 6 | Vue.use(Router) 7 | 8 | export default new Router({ 9 | routes: [ 10 | { //这里要设置一个默认的主页面 后面才起作用 /代表根目录 11 | path: '/', 12 | name: 'index', 13 | component: resolve => require(['@/pages/index/index'], resolve), 14 | redirect: '/index/page1' 15 | }, 16 | { 17 | path: '/index', 18 | component: resolve => require(['@/pages/index/index'], resolve), 19 | meta: {keepAlive: true}, 20 | children: [ 21 | { 22 | path: '', 23 | component: resolve => require(['@/pages/index/index'], resolve) 24 | }, 25 | { 26 | path: 'page1', 27 | name: 'page1', 28 | component: resolve => require(['@/pages/index/page1'], resolve) 29 | }, 30 | { 31 | path: 'page2', 32 | name: 'page2', 33 | component: resolve => require(['@/pages/index/page2'], resolve) 34 | }, 35 | { 36 | path: 'page3', 37 | name: 'page3', 38 | component: resolve => require(['@/pages/index/page3'], resolve) 39 | }, 40 | { 41 | path: 'page4', 42 | name: 'page4', 43 | component: resolve => require(['@/pages/index/page4'], resolve) 44 | }, 45 | { 46 | path: 'page5', 47 | name: 'page5', 48 | component: resolve => require(['@/pages/index/page5'], resolve) 49 | }, 50 | { 51 | path: 'page6', 52 | name: 'page6', 53 | component: resolve => require(['@/pages/index/page6'], resolve) 54 | }, 55 | { 56 | path: 'page7', 57 | component: resolve => require(['@/pages/index/page7'], resolve) 58 | }, 59 | ] 60 | }, 61 | { 62 | path: '/brandsale', 63 | name: 'brandSale', 64 | component: resolve => require(['@/pages/brandsale/index'], resolve) 65 | }, 66 | { 67 | path: '/livecommunity', 68 | name: 'liveCommunity', 69 | component: resolve => require(['@/pages/livecommunity/index'], resolve) 70 | }, 71 | { 72 | path: '/shopcart', 73 | name: 'shopCart', 74 | component: resolve => require(['@/pages/shopCart/index'], resolve) 75 | }, 76 | { 77 | path: '/myself', 78 | name: 'mySelf', 79 | component: resolve => require(['@/pages/mySelf/index'], resolve) 80 | }, 81 | { 82 | path: "/setter", 83 | name: 'setter', 84 | component: resolve => require(['@/pages/mySelf/setter'], resolve) 85 | }, 86 | { 87 | path: '/login', 88 | name: 'login', 89 | component: resolve => require(['@/pages/mySelf/login'], resolve) 90 | }, 91 | { 92 | path: '/product', 93 | name: 'product', 94 | component: resolve => require(['@/pages/product/index'], resolve), 95 | redirect: '/product/info', 96 | children: [ 97 | { 98 | path: 'info', 99 | name: 'productInfo', 100 | component: resolve => require(['@/pages/product/info'], resolve) 101 | }, 102 | { 103 | path: 'detail', 104 | name: 'productDetail', 105 | component: resolve => require(['@/pages/product/detail'], resolve) 106 | }, 107 | { 108 | path: 'comment', 109 | name: 'productComment', 110 | component: resolve => require(['@/pages/product/comment'], resolve) 111 | } 112 | ] 113 | }, 114 | 115 | ] 116 | }) 117 | -------------------------------------------------------------------------------- /src/pages/product/comment.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 71 | 72 | 138 | -------------------------------------------------------------------------------- /src/pages/brandsale/index.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 87 | 88 | 151 | -------------------------------------------------------------------------------- /src/pages/index/page1.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 109 | 110 | 172 | -------------------------------------------------------------------------------- /src/pages/index/page2.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 85 | 86 | 153 | -------------------------------------------------------------------------------- /src/pages/index/page4.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | 84 | 85 | 154 | -------------------------------------------------------------------------------- /src/pages/shopcart/index.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 140 | 141 | 231 | -------------------------------------------------------------------------------- /src/pages/index/page3.vue: -------------------------------------------------------------------------------- 1 | 55 | 56 | 103 | 104 | 175 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-jumei-app 2 | > 好的生活，聚集美丽，成人之美！从现在做起！ 3 | ![](https://github.com/wuyuanlijie/ImageFile/blob/master/JmBg/allBg.PNG)
4 | 5 | ## 效果预览 6 | >### 👉预览地址：[请点我！在线预览，手机浏览或切换浏览器移动调试](http://www.jerrylee520.cn:8080/index.html#/index/page1) 7 | >### PS：google浏览器在切换不同的手机测试，需要重新刷新页面；安卓手机可能不适应 8 | >### 👉源码地址：[Github在这里](https://github.com/wuyuanlijie/vue-jumei-app) 9 | ![](https://github.com/wuyuanlijie/ImageFile/blob/master/JmBg/jm1.gif) 10 | ![](https://github.com/wuyuanlijie/ImageFile/blob/master/JmBg/jm2.gif)
11 | ![](https://github.com/wuyuanlijie/ImageFile/blob/master/JmBg/jm3.gif)
12 | 13 | ## 项目描述 14 | ### 技术栈 15 | Vue2.0全家桶 + axios +　Vuex + Mint-Ui + Mock.js + Stylus 16 | 17 | ### 前端部分 18 | > * Vue2.0 前端页面的展示 19 | > * SPA单页应用，前端后分离 20 | > * Stylus css预编译 21 | > * Axios 异步数据的请求 22 | > * localStorage 个人信息以及购物车信息的存储 23 | > * ES6 Js语言的标准 24 | > * Mint_UI 实现图片轮播，图片懒加载等等 25 | > * Better-Scroll 实现移动端滚动，让滚动更加协调 26 | > * flexible.js和rem，解决移动端设备兼容 27 | 28 | ### 后端部分 29 | > * Mock.js 实现后端数据的托管 30 | 31 | ### 待更新的功能 32 | > * 后端平台搭建，利用新一代的Koa服务器框架 33 | > * 订单页面的展示 34 | > * 商家页面的请求 35 | > * 下拉，加载更多的商品数据 36 | 37 | 38 | ## 实现功能 39 | ### 首页 40 | * 1、tabbar切换 41 | * 2、优惠商品倒计时 42 | * 3、活动的商品的推荐 43 | * 4、swiper滑动，切换页面 44 | * 5、搜索框 45 | * 6、首页不同页面的展示 46 | ### 商品详情 47 | * 1、商品图片放大显示 48 | * 2、商品具体的显示、评论、图片展示 49 | * 3、加入购车车页面弹窗，选择商品的种类，以及数量 50 | * 4、商品加入购物车，动画 51 | ### 购物车 52 | * 1、登录状态判断 53 | * 2、全选，以及非全选的切换 54 | * 3、添加商品、以及减少与删除 55 | 56 | ### 个人 57 | * 1、账户的登录 58 | * 2、注册账户 59 | * 3、设置页面 60 | 61 | ## 总结 62 | * 1、熟悉使用Vue2.0 63 | * 2、在项目中，将组件进行分离，编写可以复用的组件，提高效率 64 | * 3、Vuex的状态管理模块，统一的状态的管理，让我们更好的去对数据操作 65 | * 4、util的工具，倒计时js 66 | * 5、对axios有更进一步的理解，利用cros进行跨域处理 67 | * 6、进行路由的懒加载，优化页面加载 68 | 69 | ## 具体功能实现 70 | #### 路由结构 71 | ``` javascript 72 | export default new Router({ 73 | routes: [ 74 | { //这里要设置一个默认的主页面 后面才起作用 /代表根目录 75 | path: '/', 76 | name: 'index', 77 | component: resolve => require(['@/pages/index/index'], resolve), 78 | redirect: '/index/page1' 79 | }, 80 | { 81 | path: '/index', 82 | component: resolve => require(['@/pages/index/index'], resolve), 83 | meta: {keepAlive: true}, 84 | children: [ 85 | { 86 | path: '', 87 | component: resolve => require(['@/pages/index/index'], resolve) 88 | }, 89 | { 90 | path: 'page1', 91 | name: 'page1', 92 | component: resolve => require(['@/pages/index/page1'], resolve) 93 | }, 94 | { 95 | path: 'page2', 96 | name: 'page2', 97 | component: resolve => require(['@/pages/index/page2'], resolve) 98 | }, 99 | { 100 | path: 'page3', 101 | name: 'page3', 102 | component: resolve => require(['@/pages/index/page3'], resolve) 103 | }, 104 | { 105 | path: 'page4', 106 | name: 'page4', 107 | component: resolve => require(['@/pages/index/page4'], resolve) 108 | }, 109 | { 110 | path: 'page5', 111 | name: 'page5', 112 | component: resolve => require(['@/pages/index/page5'], resolve) 113 | }, 114 | { 115 | path: 'page6', 116 | name: 'page6', 117 | component: resolve => require(['@/pages/index/page6'], resolve) 118 | }, 119 | { 120 | path: 'page7', 121 | component: resolve => require(['@/pages/index/page7'], resolve) 122 | }, 123 | ] 124 | }, 125 | { 126 | path: '/brandsale', 127 | name: 'brandSale', 128 | component: resolve => require(['@/pages/brandsale/index'], resolve) 129 | }, 130 | { 131 | path: '/livecommunity', 132 | name: 'liveCommunity', 133 | component: resolve => require(['@/pages/livecommunity/index'], resolve) 134 | }, 135 | { 136 | path: '/shopcart', 137 | name: 'shopCart', 138 | component: resolve => require(['@/pages/shopCart/index'], resolve) 139 | }, 140 | { 141 | path: '/myself', 142 | name: 'mySelf', 143 | component: resolve => require(['@/pages/mySelf/index'], resolve) 144 | }, 145 | { 146 | path: "/setter", 147 | name: 'setter', 148 | component: resolve => require(['@/pages/mySelf/setter'], resolve) 149 | }, 150 | { 151 | path: '/login', 152 | name: 'login', 153 | component: resolve => require(['@/pages/mySelf/login'], resolve) 154 | }, 155 | { 156 | path: '/product', 157 | name: 'product', 158 | component: resolve => require(['@/pages/product/index'], resolve), 159 | redirect: '/product/info', 160 | children: [ 161 | { 162 | path: 'info', 163 | name: 'productInfo', 164 | component: resolve => require(['@/pages/product/info'], resolve) 165 | }, 166 | { 167 | path: 'detail', 168 | name: 'productDetail', 169 | component: resolve => require(['@/pages/product/detail'], resolve) 170 | }, 171 | { 172 | path: 'comment', 173 | name: 'productComment', 174 | component: resolve => require(['@/pages/product/comment'], resolve) 175 | } 176 | ] 177 | }, 178 | 179 | ] 180 | }) 181 | 182 | ``` 183 | #### Vuex状态管理 184 | > 这里我贴出购物车模块。它的使用场景：添加商品到购物车，更新商品的信息、进行增删，并且在操作过程中，将数据保存到 185 | localStorage，持久存储，由于后台服务器尚未搭建，利用这样来保持数据的存储。 186 | 187 | ```javascript 188 | import * as types from '../mutation-types.js' 189 | const storage = window.localStorage 190 | const state = { 191 | added: [], 192 | checkoutStatus: null 193 | } 194 | const getters = { 195 | checkoutStatus: state => state.checkoutStatus, 196 | cartLists: state => state.added 197 | } 198 | const mutations = { 199 | [types.ADD_TO_CART] (state, product) { 200 | let id = product.id 201 | const record = state.added.find(p => p.id === id && p.type === product.type) 202 | // 解决方法一 找到数据遍历一次 203 | // 方法二 是获取到父级的数据 204 | if (!record) { 205 | state.added.push(product) 206 | } else { 207 | record.quantity += product.quantity 208 | } 209 | storage.setItem('cart', JSON.stringify(state.added)) 210 | }, 211 | //传入商品的信息 product id和类型判断当前存储的商品 要修改的数量 212 | // 更新产品的数据 213 | [types.UPDATE_THIS_PRODUCT] (state, product) { 214 | let {id,type,quantity} = product //对象的解构 215 | const record = state.added.find(p => p.id===id &&p.type===type) 216 | if (quantity>0) { 217 | record?record.quantity = quantity : '' 218 | } else { 219 | // 传入的商品数量为0 就删除这个商品 删除指定的序号的商品 220 | let index = state.added.indexOf(record) 221 | state.added.splice(index,1) 222 | } 223 | storage.setItem('cart', JSON.stringify(state.added)) 224 | }, 225 | } 226 | export default { 227 | state, 228 | getters, 229 | mutations 230 | } 231 | 232 | ``` 233 | 234 | 235 | 236 | ## Build Setup 237 | 238 | ``` bash 239 | # install dependencies 240 | npm install 241 | 242 | # serve with hot reload at localhost:8080 243 | npm run dev 244 | 245 | # build for production with minification 246 | npm run build 247 | 248 | # build for production and view the bundle analyzer report 249 | npm run build --report 250 | ``` 251 | 252 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 253 | -------------------------------------------------------------------------------- /src/pages/index/index.vue: -------------------------------------------------------------------------------- 1 | 52 | 53 | 125 | 126 | 248 | -------------------------------------------------------------------------------- /src/pages/product/index.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 202 | 203 | 256 | -------------------------------------------------------------------------------- /src/pages/myself/login.vue: -------------------------------------------------------------------------------- 1 | 58 | 59 | 152 | 153 | 263 | -------------------------------------------------------------------------------- /src/pages/product/info.vue: -------------------------------------------------------------------------------- 1 | 83 | 84 | 163 | 164 | 302 | -------------------------------------------------------------------------------- /src/components/cartDetail.vue: -------------------------------------------------------------------------------- 1 | 60 | 61 | 166 | 167 | 331 | -------------------------------------------------------------------------------- /src/components/BuyBox.vue: -------------------------------------------------------------------------------- 1 | 67 | 68 | 162 | 163 | 349 | -------------------------------------------------------------------------------- /src/pages/myself/index.vue: -------------------------------------------------------------------------------- 1 | 98 | 99 | 178 | 179 | 372 | -------------------------------------------------------------------------------- /src/common/util/mock.js: -------------------------------------------------------------------------------- 1 | import Mock from 'mockjs' 2 | 3 | 4 | export default Mock.mock('/api/data', (req, res) => { 5 | return { 6 | activityLists: [ 7 | { 8 | id: "1", 9 | title: '美国•【诠释唇色】魅可（MAC）时尚唇膏3g，爆款色号上架，诱惑无法抗拒！', 10 | type: 'jumei_deal', 11 | imgs: [ 12 | 'http://mp6.jmstatic.com/product/001/388/1388308_std/1388308_1000_1000.jpg?v=1487312982&imageView2/2/w/800/q/90', 13 | 'http://p12.jmstatic.com/html_editor/201702/24/14879178041530.jpg', 14 | ], 15 | cartImg: 'http://mp5.jmstatic.com/product/001/343/1343667_std/1343667_1000_1000.jpg?v=1466486255&imageView2/2/w/800/q/90', 16 | nowPrice: 148, 17 | oldPrice: 170, 18 | discount: 8.6, 19 | buyNum: 4166, 20 | inventory: 1000, 21 | isSelf: true, 22 | freight: "本商品满299或2件包邮", 23 | detail: '外色内润，与时尚一吻定情，魅可（MAC）时尚唇膏3g（多色可选）！柔美丝绒触感加高度饱和显色，诠释唇部色彩，将性感的“唇”情本色演绎！持久唇色不沾杯，一次补妆维持一天的亮丽唇色，唇色诱惑让他无法抗拒！', 24 | freight: "本商品满299或2件包邮", 25 | imgDetail: [ 26 | 'http://p12.jmstatic.com/html_editor/201702/24/14879178041530.jpg', 27 | 'http://p12.jmstatic.com/html_editor/201702/24/14879178046180.jpg', 28 | 'http://p12.jmstatic.com/html_editor/201702/24/14879178049232.jpg', 29 | 'http://p12.jmstatic.com/html_editor/201704/20/14926576172513.jpg', 30 | 'http://p12.jmstatic.com/html_editor/201704/12/14919923698113.jpg', 31 | 'http://p12.jmstatic.com/html_editor/201704/12/14919921978986.jpg', 32 | 'http://p12.jmstatic.com/html_editor/201706/12/14972606776257.jpg', 33 | 34 | ], 35 | comments:[ 36 | { 37 | id: "c1", 38 | avatar: 'http://images2.jumei.com/user_avatar/102/653/102653606-64-1505009489.jpg?1505009489', 39 | name: 'P***欢', 40 | member: '白金会员', 41 | joinTime: 567, 42 | sign: '', 43 | comment: '这是本菇凉的第一只M，一直想买但苦于没有色号啊，那天突然心血来潮逛了一下小美，结果发现这次货比较齐，选了一只比较缺的橘色系，以前特别爱橘色，不过现在一直用的迪奥999，也是在小美家买的，很不错哦。这次的子弹头很满意，颜色是我想要的，虽然买之前做了很大一番功课，还一度怀疑自己是不是买错了色号，拿回来不好看怎么办。不过现在心放下了，哈哈，喜欢橘色系的妹子可以考虑一下这只哦，不挑皮，而且夏天要来了，这个颜色非常有活力。第一次在聚美写这么多评论，可以看得出来我是真心喜欢，哈哈。', 44 | imgs: [ 45 | 'http://p12.jmstatic.com/comment/1051597715-1487402343-0137_270_270.jpg', 46 | 'http://p12.jmstatic.com/comment/1051597715-1487402338-8247_270_270.jpg', 47 | 'http://p12.jmstatic.com/comment/1051597715-1487402337-4728_270_270.jpg', 48 | 'http://p12.jmstatic.com/comment/1051597715-1487402337-4728_270_270.jpg' 49 | ], 50 | type: 'Lady Danger（亮珊瑚橘）/3g', 51 | buyTime: '2017-02-15' 52 | }, 53 | { 54 | id: "c3", 55 | avatar: 'http://images2.jumei.com/user_avatar/088/832/88832422-64.jpg?1479310530', 56 | name: '泡***变', 57 | member: '白金会员', 58 | joinTime: 302, 59 | sign: '每个人都是通过自己的努力活成自己想要的样子！', 60 | comment: '第一次买MAC的口红，我个人觉得不是很惊艳，无论从它的外观，还是从它的使用上。但是也对得起它的价格，算是非常亲民的价格啦～颜色就是那种美美的西柚色，但是对于唇色较深并且化妆不爱遮盖原本唇色的我来说，真的是差强人意。我的唇色偏深，有些接近紫色。所以结果就是，明明很美的颜色，到了我的嘴上就变得没那么好看了。至于回购，应该不会再回购这个颜色，其他颜色可以试试。', 61 | imgs: [ 62 | 'http://p12.jmstatic.com/comment/1029226278-1480927954-6811_270_270.jpg', 63 | 'http://p12.jmstatic.com/comment/1029226278-1480927930-7615_270_270.jpg' 64 | ], 65 | type: 'See Sheer（水润西柚色）/3g', 66 | buyTime: '2016-11-29' 67 | }, 68 | { 69 | id: "c3", 70 | avatar: 'http://p0.jmstatic.com/product_report/default/avatar/avatar_small.png', 71 | name: '5***6', 72 | member: '白金会员', 73 | joinTime: 769, 74 | sign: '', 75 | comment: '这款lady 是橘色的、夏天要来了、虽然我有很多橘色口红、但这款是最像YSL13的、最近就是爱惨了MAC、果断入了～这款比较滋润、上色很容易、强力推荐', 76 | imgs: [ 77 | 'http://p12.jmstatic.com/comment/1051394180-1487469632-9174_270_270.jpg' 78 | ], 79 | type: 'Lady Danger（亮珊瑚橘）/3g', 80 | buyTime: '2017-02-15' 81 | }, 82 | 83 | 84 | ], 85 | types:['Flat out fabulous（哑光玫红）','Brick O la（经典豆沙色）','Red Rock', 86 | 'By special Order', 'Ablaze','Lady Bug (番茄红)','Retro','Cosmo'], 87 | 88 | }, 89 | { 90 | id: "2", 91 | title: '韩国•悦诗风吟控油调色矿物质散粉', 92 | type: 'jumei_deal', 93 | imgs: [ 94 | 'http://mp5.jmstatic.com/product/003/613/3613386_std/3613386_1_1000_1000.jpg?v=1495005338&imageView2/2/w/800/q/90', 95 | 'http://mp5.jmstatic.com/product/003/613/3613386_std/3613386_3_1000_1000.jpg?v=1495005338&imageView2/2/w/800/q/90', 96 | 'http://mp5.jmstatic.com/product/003/613/3613386_std/3613386_3_1000_1000.jpg?v=1495005338&imageView2/2/w/800/q/90', 97 | 'http://mp6.jmstatic.com/product/003/613/3613386_std/3613386_5_1000_1000.jpg?v=1495005338&imageView2/2/w/800/q/90' 98 | ], 99 | cartImg: 'http://mp6.jmstatic.com/product/003/613/3613386_std/3613386_1000_1000.jpg?v=1495005338&imageView2/2/w/800/q/90', 100 | nowPrice: 50, 101 | oldPrice: 90, 102 | inventory: 990, 103 | discount: 2, 104 | buyNum: 121, 105 | types:['01 柔情紫','02 奶昔绿','03 甜桔粉'], 106 | isSelf: true, 107 | freight: '本商品满299或2件包邮', 108 | detail: '韩国•打造自然提亮肤色、调节肤色效果的控油彩色散粉！悦诗风吟控油调色矿物质散粉5g，如同使用相机滤镜般，在完成妆容后，选择适合自己肤色的颜色来完成肤色调节。根据不同弧度产生的光反射效果，自然调整肤色。同时帮助调节汗液和多余皮脂分泌，演绎柔滑肌肤。', 109 | imgDetail: [ 110 | 'http://p12.jmstatic.com/banner/201705/16/1494931348.9389.jpg', 111 | 'http://p12.jmstatic.com/banner/201705/16/1494931349.595.jpg', 112 | 'http://p12.jmstatic.com/banner/201705/16/1494931350.2882.jpg', 113 | 'http://p12.jmstatic.com/banner/201705/16/1494933297.859.jpg' 114 | ], 115 | comments: [ 116 | { 117 | id: "c1", 118 | avatar: 'http://images2.jumei.com/user_avatar/111/742/111742682-64.jpg?1471707778', 119 | name: '独***※', 120 | member: '白金会员', 121 | joinTime: 399, 122 | sign: '', 123 | comment: '这个粉含有纯净济州岛矿物质成分。即使化妆，肌肤也能自由呼吸。同时具有舒缓肌肤毛孔收敛的薄荷成分，调理毛孔的同时保持健康肌肤。修饰泛红的话，我觉得效果不佳，不知道是不是涂太少了，但是控油我觉得挺有效果的，同学们都用这个牌子的控油粉，顺便试试。', 124 | imgs: [ 125 | 'http://p12.jmstatic.com/comment/1114715149-1504448469-1479_270_270.jpg', 126 | 'http://p12.jmstatic.com/comment/1114715149-1504448451-829_270_270.jpg', 127 | 'http://p12.jmstatic.com/comment/1114715149-1504448433-1061_270_270.jpg', 128 | ], 129 | type: '02 奶昔绿/5g', 130 | buyTime: '2017-09-15' 131 | }, 132 | { 133 | id: "c2", 134 | avatar: 'http://images2.jumei.com/user_avatar/050/204/50204894-64-1498672691.jpg?1498672692', 135 | name: '曹***6', 136 | member: '白金会员', 137 | joinTime: 1177, 138 | sign: '', 139 | comment: '控油效果可以，但是颜色太白了，感觉拍在脸上有一层白粉，我是油性皮肤', 140 | imgs: [ 141 | 'http://p12.jmstatic.com/comment/1110784240-1504808830-5335_270_270.jpg', 142 | ], 143 | type: '02 奶昔绿/5g', 144 | buyTime: '2017-07-15' 145 | }, 146 | { 147 | id: "c3", 148 | avatar: 'http://images2.jumei.com/user_avatar/083/689/83689116-64.jpg?1472606848', 149 | name: 'D***5', 150 | member: '白金会员', 151 | joinTime: 885, 152 | sign: '🍄', 153 | comment: '控油效果可以，但是颜色太白了，感觉拍在脸上有一层白粉，我是油性皮肤', 154 | imgs: [ 155 | 'http://p12.jmstatic.com/comment/1114264635-1504491684-9984_270_270.jpg', 156 | ], 157 | type: '01 柔情紫/5g', 158 | buyTime: '2017-07-25' 159 | }, 160 | 161 | ], 162 | }, 163 | { 164 | id: "3", 165 | title: '法国•圣罗兰黑管镜面唇釉5.5ml', 166 | type: 'jumei_deal', 167 | imgs: [ 168 | 'http://mp5.jmstatic.com/product/003/059/3059407_std/3059407_1000_1000.jpg?v=1484041518&imageView2/2/w/800/q/90', 169 | ], 170 | cartImg: 'http://mp5.jmstatic.com/product/003/059/3059407_std/3059407_1000_1000.jpg?v=1484041518&imageView2/2/w/800/q/90', 171 | nowPrice: 259, 172 | oldPrice: 269, 173 | inventory: 888, 174 | discount: 9, 175 | buyNum: 233, 176 | types:['408','403','401','409','404','402','416',], 177 | isSelf: true, 178 | freight: '本商品满299或2件包邮', 179 | detail: '法国•圣罗兰 (YSL)黑管镜面唇釉5.5ml “黑管”引领 玻璃唇妆再升级！持续效果长达10个小时，黑色外观酷炫时尚，带尖头钻石型唇刷方便精细描绘。保湿感十足，上唇非常舒服，万年干燥星人的救星。日本、美国、香港等等各地代购一支难求！', 180 | imgDetail: [ 181 | 'http://p12.jmstatic.com/html_editor/201707/10/1499653010390.jpg', 182 | 'http://p12.jmstatic.com/html_editor/201610/31/14778857703693.jpg', 183 | 'http://p12.jmstatic.com/html_editor/201610/31/14778857706901.jpg', 184 | 'http://p12.jmstatic.com/html_editor/201610/31/1477885771447.jpg', 185 | 'http://p12.jmstatic.com/html_editor/201610/31/14778857713686.jpg' 186 | ], 187 | comments: [ 188 | { 189 | id: "c1", 190 | avatar: 'http://images2.jumei.com/user_avatar/100/206/100206826-64.jpg?1481512155', 191 | name: '独***※', 192 | member: '白金会员', 193 | joinTime: 611, 194 | sign: '买！买！买！', 195 | comment: '双11抢的，真佩服我寄己。哈哈 每个人涂出来的效果不一样，但是都好看，特别美 有点豆沙红，特别适合秋冬的一个颜色，反正买了不会后悔', 196 | imgs: [ 197 | 'http://p12.jmstatic.com/comment/1023354864-1480575205-5536_270_270.jpg', 198 | 'http://p12.jmstatic.com/comment/1023354864-1480575193-8273_270_270.jpg', 199 | ], 200 | type: '407/5.5ml', 201 | buyTime: '2016-11-11' 202 | }, 203 | { 204 | id: "c2", 205 | avatar: 'http://images2.jumei.com/user_avatar/024/858/24858926-64.png?1461813612', 206 | name: '顾***烟', 207 | member: '白金会员', 208 | joinTime: 1511, 209 | sign: '', 210 | comment: '东西超级棒。 犹犹豫豫最后买的402。 很适合自己还想买个正红色。 个人觉得很好涂哦。 不愧是圣罗兰上色度超级好。❤❤❤ 比较滋润。超级爱。', 211 | imgs: [ 212 | 'http://p12.jmstatic.com/comment/1038928792-1483868726-3104_270_270.jpg', 213 | 'http://p12.jmstatic.com/comment/1038928792-1483868718-6655_270_270.jpg', 214 | 'http://p12.jmstatic.com/comment/1038928792-1483868711-6233_270_270.jpg', 215 | ], 216 | type: '402/5.5ml', 217 | buyTime: '2017-01-14' 218 | }, 219 | ], 220 | }, 221 | { 222 | id: "4", 223 | title: '法国•兰蔻Juicy Shaker 唇釉6.5ml', 224 | type: 'jumei_deal', 225 | imgs: [ 226 | 'http://mp5.jmstatic.com/product/002/678/2678723_std/2678723_1000_1000.jpg?v=1494581694&imageView2/2/w/800/q/90', 227 | ], 228 | cartImg: 'http://mp5.jmstatic.com/product/002/678/2678723_std/2678723_1000_1000.jpg?v=1494581694&imageView2/2/w/800/q/90', 229 | nowPrice: 165, 230 | oldPrice: 240, 231 | inventory: 999, 232 | discount: 8, 233 | buyNum: 22, 234 | types:['#352（狂想的蜜瓜）','#252（摇滚香草）','#102（Q弹杏子）','#381(（芒果）'], 235 | isSelf: true, 236 | freight: '本商品满299或2件包邮', 237 | detail: '法国•兰蔻（Lancome)Juicy Shaker 空气轻垫唇釉，摇一摇，唇色更加多汁多彩！上妆晕染自然，触感Q弹柔软，有种被亲吻的感觉，轻盈油质，清爽不粘腻，嘭嘭水润！多种晕染方法让你的双唇更加百变。给你水当当的吻！', 238 | imgDetail: [ 239 | 'http://p12.jmstatic.com/html_editor/201607/02/14674673644142.jpg', 240 | 'http://p12.jmstatic.com/html_editor/201607/02/14674673649305.jpg', 241 | 'http://p12.jmstatic.com/html_editor/201607/02/14674673652569.jpg', 242 | ], 243 | comments: [ 244 | { 245 | id: "c1", 246 | avatar: 'http://images2.jumei.com/user_avatar/010/482/10482535-64.png?1464959905', 247 | name: '3***5', 248 | member: '白金会员', 249 | joinTime: 1845, 250 | sign: '', 251 | comment: '兰蔻摇摇乐 气垫唇油，色号372，梅子传奇， 这个颜色是很显气色的粉色，很甜美。', 252 | imgs: [ 253 | 'http://p12.jmstatic.com/comment/1044724436-1501606507-948_270_270.jpg', 254 | ], 255 | type: '#372（莓子传奇）/6.5ml', 256 | buyTime: '2017-03-22' 257 | }, 258 | { 259 | id: "c2", 260 | avatar: 'http://s0.jmstatic.com/templates/jumei/images/avatar/200_200.png?1488371144', 261 | name: 'v***Q', 262 | member: '黄金会员', 263 | joinTime: 206, 264 | sign: '', 265 | comment: '还不错 就是涂上太油了 感觉冬天更适合 图片中我把油油的用纸压掉了 颜色很日常', 266 | imgs: [ 267 | 'http://p12.jmstatic.com/comment/1079184481-1497439748-9699_270_270.jpg', 268 | ], 269 | type: ' #372（莓子传奇）/6.5ml', 270 | buyTime: '2017-06-10' 271 | }, 272 | ], 273 | }, 274 | { 275 | id: "5", 276 | title: '法国•克丽丝汀迪奥 (DIOR)魅惑润唇蜜001/魅惑润唇膏（焕彩）3.5g', 277 | type: 'jumei_deal', 278 | imgs: [ 279 | 'http://mp5.jmstatic.com/product/001/341/1341680_std/1341680_1000_1000.jpg?v=1425959374&imageView2/2/w/800/q/90', 280 | 'http://mp5.jmstatic.com/product/001/341/1341680_std/1341680_1_1000_1000.jpg?v=1425959388&imageView2/2/w/800/q/90', 281 | 'http://mp4.jmstatic.com/product/001/341/1341680_std/1341680_3_1000_1000.jpg@base@tag=imgScale&w=800&q=90?v=1425959408' 282 | ], 283 | cartImg: 'http://mp5.jmstatic.com/product/001/341/1341680_std/1341680_1000_1000.jpg?v=1425959374&imageView2/2/w/800/q/90', 284 | nowPrice: 229, 285 | oldPrice: 300, 286 | inventory: 999, 287 | discount: 8, 288 | buyNum: 20, 289 | types:['005','004'], 290 | isSelf: true, 291 | freight: '本商品满299或2件包邮', 292 | detail: '即刻滋养、柔滑、丰盈你的双唇！每次涂抹瞬间，亦会让你对它不忍释手！克丽丝汀迪奥(DIOR)魅惑润唇蜜3.5g，让双唇得以长时间呵护，倍感软滑丰盈。要好看，要滋润，更要无伤害、不褪色。绽放迷人亮泽，无惧严酷环境与岁月流转！', 293 | imgDetail: [ 294 | 'http://p12.jmstatic.com/html_editor/201707/06/14993094551748.jpg', 295 | 'http://p12.jmstatic.com/html_editor/201707/19/15004588614199.jpg', 296 | 'http://p12.jmstatic.com/html_editor/201707/19/15004589028919.jpg', 297 | 'http://p12.jmstatic.com/html_editor/201707/06/14993094577929.jpg', 298 | 'http://p12.jmstatic.com/html_editor/201707/06/14993094585400.jpg' 299 | ], 300 | comments: [ 301 | { 302 | id: "c1", 303 | avatar: 'http://images2.jumei.com/user_avatar/100/058/100058989-64.jpg?1453120166', 304 | name: '5***j', 305 | member: '普通会员', 306 | joinTime: 614, 307 | sign: '', 308 | comment: '这款和我家人一年前买的外包装不太一样，帽上的CD字样这款是两个字母连在一起的，家人那款是分开的，底部贴的标签这款是歪的标签上带嘴唇的图，家人那款是贴正的标签上没有嘴唇图。除了这两个不同，其他都一样，外包纸盒的印字，外壳的手感，膏体的味道都一样，用了一次很滋润，总体分析觉得应该正品吧。', 309 | imgs: [ 310 | 'http://p12.jmstatic.com/comment/1038054053-1483488883-2335_270_270.jpg', 311 | ], 312 | type: '3.5g', 313 | buyTime: '2016-12-31' 314 | }, 315 | { 316 | id: "c2", 317 | avatar: 'http://images2.jumei.com/user_avatar/078/511/78511556-64.jpg?1467450329', 318 | name: 's***Q', 319 | member: '黄金会员', 320 | joinTime: 206, 321 | sign: '', 322 | comment: '从来没有写过评价，一直以来梦寐以求的唇膏之一☝️，大爱啊，我一直在犹豫选择橘色还是粉色，粉色更梦幻，橘色更实用，不过适合自己的就是最好的，一波三折终于到手啦，心水的不得了，给大家看看这只新唇膏吧……喜欢的妹子不要犹豫了，剁手吧……', 323 | imgs: [ 324 | 'http://p12.jmstatic.com/comment/1004843307-1473410109-7921_270_270.jpg', 325 | 'http://p12.jmstatic.com/comment/1004843307-1473410100-6992_270_270.jpg', 326 | 'http://p12.jmstatic.com/comment/1004843307-1473410089-3019_270_270.jpg' 327 | ], 328 | type: '3.5g', 329 | buyTime: '2017-09-07' 330 | }, 331 | ], 332 | }, 333 | 334 | ], 335 | 336 | 337 | goodsList: [ 338 | 339 | ] 340 | } 341 | }) 342 | --------------------------------------------------------------------------------