├── .env.development ├── .env. production ├── babel.config.js ├── public ├── logo.png ├── favicon.ico ├── images │ ├── logo.png │ ├── shops │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ └── 3.jpg │ ├── photo │ │ └── MrXu.jpg │ └── playList │ │ ├── 1.jpeg │ │ └── 2.jpeg ├── data │ ├── playList.json │ ├── coupons.json │ ├── shops.json │ ├── carList.json │ └── orders.json └── index.html ├── README_IMG ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg └── 9.jpg ├── src ├── assects │ └── images │ │ ├── footer │ │ ├── car.png │ │ ├── car-c.png │ │ ├── index.png │ │ ├── index-c.png │ │ ├── person-c.png │ │ ├── person.png │ │ ├── orderlist.png │ │ └── orderlist-c.png │ │ ├── icon │ │ ├── car.png │ │ ├── close.png │ │ ├── home.png │ │ ├── kefu.png │ │ ├── logo.png │ │ ├── xz@2x.png │ │ ├── yhq.png │ │ ├── address.png │ │ ├── wx-icon.png │ │ ├── right-icon.png │ │ ├── spxq-yhq.png │ │ ├── yaoqingyouli.png │ │ └── lingquanyouhui.png │ │ ├── empty │ │ ├── dizhikong.png │ │ ├── zhifushibai.png │ │ ├── gouwuchekong.png │ │ ├── pj-chenggong.png │ │ ├── sh-wuliukong.png │ │ ├── zhifchenggong.png │ │ ├── zw-youhuiquan.png │ │ ├── dd-meiyoudingdan@3x.png │ │ └── zanwuxiaoxikong@3x.png │ │ └── decorate │ │ ├── caitiao.png │ │ ├── wx-icon.png │ │ └── wd-beijing.png ├── views │ ├── About.vue │ ├── Test.vue │ ├── Evaluation.vue │ ├── Coupons.vue │ ├── PaySuccess.vue │ ├── Person.vue │ ├── Login.vue │ ├── OrderList.vue │ ├── Home.vue │ ├── Car.vue │ ├── Pay.vue │ └── ShopDetail.vue ├── components │ ├── Test.vue │ ├── Badge.vue │ ├── _header.vue │ ├── EmptyLogin.vue │ ├── Float.vue │ ├── Cell.vue │ ├── CarFooter.vue │ ├── _footer.vue │ ├── AddReduce.vue │ └── Coupons.vue ├── main.js ├── App.vue ├── plugins │ ├── axios.js │ ├── store.js │ ├── filter.js │ └── router.js └── styles │ └── common.stylus ├── vue.config.js ├── .gitignore ├── README.md └── package.json /.env.development: -------------------------------------------------------------------------------- 1 | VUE_APP_AXIOS_URL='' -------------------------------------------------------------------------------- /.env. production: -------------------------------------------------------------------------------- 1 | VUE_APP_AXIOS_URL='' 2 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/public/logo.png -------------------------------------------------------------------------------- /README_IMG/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/README_IMG/1.jpg -------------------------------------------------------------------------------- /README_IMG/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/README_IMG/2.jpg -------------------------------------------------------------------------------- /README_IMG/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/README_IMG/3.jpg -------------------------------------------------------------------------------- /README_IMG/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/README_IMG/4.jpg -------------------------------------------------------------------------------- /README_IMG/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/README_IMG/5.jpg -------------------------------------------------------------------------------- /README_IMG/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/README_IMG/6.jpg -------------------------------------------------------------------------------- /README_IMG/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/README_IMG/7.jpg -------------------------------------------------------------------------------- /README_IMG/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/README_IMG/8.jpg -------------------------------------------------------------------------------- /README_IMG/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/README_IMG/9.jpg -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/public/images/logo.png -------------------------------------------------------------------------------- /public/images/shops/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/public/images/shops/1.jpg -------------------------------------------------------------------------------- /public/images/shops/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/public/images/shops/2.jpg -------------------------------------------------------------------------------- /public/images/shops/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/public/images/shops/3.jpg -------------------------------------------------------------------------------- /public/images/photo/MrXu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/public/images/photo/MrXu.jpg -------------------------------------------------------------------------------- /public/images/playList/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/public/images/playList/1.jpeg -------------------------------------------------------------------------------- /public/images/playList/2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/public/images/playList/2.jpeg -------------------------------------------------------------------------------- /public/data/playList.json: -------------------------------------------------------------------------------- 1 | [ 2 | { "img": "/images/playList/1.jpeg" }, 3 | { "img": "/images/playList/2.jpeg" } 4 | ] -------------------------------------------------------------------------------- /src/assects/images/footer/car.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/footer/car.png -------------------------------------------------------------------------------- /src/assects/images/icon/car.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/icon/car.png -------------------------------------------------------------------------------- /src/assects/images/icon/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/icon/close.png -------------------------------------------------------------------------------- /src/assects/images/icon/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/icon/home.png -------------------------------------------------------------------------------- /src/assects/images/icon/kefu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/icon/kefu.png -------------------------------------------------------------------------------- /src/assects/images/icon/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/icon/logo.png -------------------------------------------------------------------------------- /src/assects/images/icon/xz@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/icon/xz@2x.png -------------------------------------------------------------------------------- /src/assects/images/icon/yhq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/icon/yhq.png -------------------------------------------------------------------------------- /src/assects/images/footer/car-c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/footer/car-c.png -------------------------------------------------------------------------------- /src/assects/images/footer/index.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/footer/index.png -------------------------------------------------------------------------------- /src/assects/images/icon/address.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/icon/address.png -------------------------------------------------------------------------------- /src/assects/images/icon/wx-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/icon/wx-icon.png -------------------------------------------------------------------------------- /src/assects/images/empty/dizhikong.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/empty/dizhikong.png -------------------------------------------------------------------------------- /src/assects/images/footer/index-c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/footer/index-c.png -------------------------------------------------------------------------------- /src/assects/images/footer/person-c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/footer/person-c.png -------------------------------------------------------------------------------- /src/assects/images/footer/person.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/footer/person.png -------------------------------------------------------------------------------- /src/assects/images/icon/right-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/icon/right-icon.png -------------------------------------------------------------------------------- /src/assects/images/icon/spxq-yhq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/icon/spxq-yhq.png -------------------------------------------------------------------------------- /src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/assects/images/decorate/caitiao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/decorate/caitiao.png -------------------------------------------------------------------------------- /src/assects/images/decorate/wx-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/decorate/wx-icon.png -------------------------------------------------------------------------------- /src/assects/images/empty/zhifushibai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/empty/zhifushibai.png -------------------------------------------------------------------------------- /src/assects/images/footer/orderlist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/footer/orderlist.png -------------------------------------------------------------------------------- /src/assects/images/icon/yaoqingyouli.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/icon/yaoqingyouli.png -------------------------------------------------------------------------------- /src/assects/images/decorate/wd-beijing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/decorate/wd-beijing.png -------------------------------------------------------------------------------- /src/assects/images/empty/gouwuchekong.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/empty/gouwuchekong.png -------------------------------------------------------------------------------- /src/assects/images/empty/pj-chenggong.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/empty/pj-chenggong.png -------------------------------------------------------------------------------- /src/assects/images/empty/sh-wuliukong.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/empty/sh-wuliukong.png -------------------------------------------------------------------------------- /src/assects/images/empty/zhifchenggong.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/empty/zhifchenggong.png -------------------------------------------------------------------------------- /src/assects/images/empty/zw-youhuiquan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/empty/zw-youhuiquan.png -------------------------------------------------------------------------------- /src/assects/images/footer/orderlist-c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/footer/orderlist-c.png -------------------------------------------------------------------------------- /src/assects/images/icon/lingquanyouhui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/icon/lingquanyouhui.png -------------------------------------------------------------------------------- /src/assects/images/empty/dd-meiyoudingdan@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/empty/dd-meiyoudingdan@3x.png -------------------------------------------------------------------------------- /src/assects/images/empty/zanwuxiaoxikong@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xuxchao/vue-ylbs-shop/HEAD/src/assects/images/empty/zanwuxiaoxikong@3x.png -------------------------------------------------------------------------------- /src/views/Test.vue: -------------------------------------------------------------------------------- 1 | 4 | 10 | -------------------------------------------------------------------------------- /src/components/Test.vue: -------------------------------------------------------------------------------- 1 | 4 | 13 | -------------------------------------------------------------------------------- /src/views/Evaluation.vue: -------------------------------------------------------------------------------- 1 | 6 | 11 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | module.exports = { 3 | publicPath: process.env.NODE_ENV === 'production' ? '/' : '/', 4 | configureWebpack: { 5 | resolve: { 6 | alias: { 7 | '@': path.resolve(__dirname, 'src/') 8 | } 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /public/data/coupons.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "price": 200, 5 | "minPrice": 300, 6 | "name": "徐氏优惠券", 7 | "startTime": "2019/03/13", 8 | "endTime": "2028/05/07" 9 | },{ 10 | "id": 2, 11 | "price": 200, 12 | "minPrice": 300, 13 | "name": "徐氏优惠券", 14 | "startTime": "2019/03/13", 15 | "endTime": "2028/05/07" 16 | } 17 | ] -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './plugins/router' 4 | import store from './plugins/store' 5 | import './plugins/filter' 6 | import Mint from 'mint-ui' 7 | import 'mint-ui/lib/style.css' 8 | import '@/styles/common.stylus' 9 | 10 | Vue.use(Mint); 11 | 12 | new Vue({ 13 | router, 14 | store, 15 | render: h => h(App) 16 | }).$mount('#app') 17 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 17 | -------------------------------------------------------------------------------- /src/components/Badge.vue: -------------------------------------------------------------------------------- 1 | 8 | 16 | 17 | 25 | 26 | -------------------------------------------------------------------------------- /src/plugins/axios.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | axios.defaults.baseURL = process.env.VUE_APP_AXIOS_URL 3 | // 添加请求拦截器 4 | axios.interceptors.request.use(function (config) { 5 | // 在发送请求之前做些什么 6 | return config; 7 | }, function (error) { 8 | // 对请求错误做些什么 9 | return Promise.reject(error); 10 | }); 11 | 12 | // 添加响应拦截器 13 | axios.interceptors.response.use(function (response) { 14 | // 对响应数据做点什么 15 | return response; 16 | }, function (error) { 17 | // 对响应错误做点什么 18 | return Promise.reject(error); 19 | }); 20 | 21 | 22 | export default axios -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-shop 9 | 10 | 11 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /src/views/Coupons.vue: -------------------------------------------------------------------------------- 1 | 14 | 30 | 35 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue 商城 2 | 3 | > 具体的业务跟一龄还差很多，不过也算是可以闭环了。就先发出来吧，后期我会上桌面端管理项目和node后端服务项目。三个项目搞在一块形成一个闭环 4 | 5 | ## 项目地址 [http://xuyuechao.top](http://xuyuechao.top) 6 | 7 | ## 项目效果图展示 8 | ![结算页](./README_IMG/9.jpg){:width:100px} 9 | ![浮层效果图](./README_IMG/8.jpg) 10 | ![商品详情页](./README_IMG/7.jpg) 11 | ![我的页](./README_IMG/6.jpg) 12 | ![订单列表页](./README_IMG/5.jpg) 13 | ![购物车页](./README_IMG/4.jpg) 14 | ![登录页](./README_IMG/3.jpg) 15 | ![调整登录页](./README_IMG/2.jpg) 16 | ![首页](./README_IMG/1.jpg) 17 | 18 | 19 | ## 项目使用步骤 20 | 21 | 1. git clone https://github.com/mrxu0/vue-ylbs-shop.git 22 | 2. cd vue-ylbs-shop 23 | 3. npm install 24 | 4. npm start 25 | 5. 生产环境包: npm run build 26 | 27 | 28 | ## 反馈地址 :[https://github.com/mrxu0/vue-ylbs-shop/issues](https://github.com/mrxu0/vue-ylbs-shop/issues) 29 | 30 | ## 交流沟通可以加QQ群: 954917384 31 | -------------------------------------------------------------------------------- /src/plugins/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import axios from './axios' 4 | Vue.use(Vuex) 5 | 6 | export default new Vuex.Store({ 7 | state: { 8 | login: false 9 | }, 10 | mutations: { 11 | login (state) { 12 | state.login = true 13 | }, 14 | logout (state) { 15 | state.login = false 16 | } 17 | }, 18 | actions: { 19 | getShops () { 20 | return axios.get(`/data/shops.json`) 21 | }, 22 | getPlayList () { 23 | return axios.get(`/data/playList.json`) 24 | }, 25 | getCarList () { 26 | return axios.get(`/data/carList.json`) 27 | }, 28 | getOrderList () { 29 | return axios.get(`/data/orders.json`) 30 | }, 31 | getCouponList () { 32 | return axios.get(`/data/coupons.json`) 33 | }, 34 | } 35 | }) 36 | -------------------------------------------------------------------------------- /src/views/PaySuccess.vue: -------------------------------------------------------------------------------- 1 | 14 | 23 | 24 | 42 | 43 | -------------------------------------------------------------------------------- /src/components/_header.vue: -------------------------------------------------------------------------------- 1 | 16 | 21 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /src/components/EmptyLogin.vue: -------------------------------------------------------------------------------- 1 | 8 | 24 | 25 | 42 | 43 | -------------------------------------------------------------------------------- /src/plugins/filter.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | function formatDate(date, fmt) { 4 | if (/(y+)/.test(fmt)) { 5 | fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); 6 | } 7 | var o = { 8 | 'M+': date.getMonth() + 1, 9 | 'd+': date.getDate(), 10 | 'h+': date.getHours(), 11 | 'm+': date.getMinutes(), 12 | 's+': date.getSeconds() 13 | }; 14 | for (var k in o) { 15 | if (new RegExp(`(${k})`).test(fmt)) { 16 | var str = o[k] + ''; 17 | fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)); 18 | } 19 | } 20 | return fmt; 21 | } 22 | 23 | function padLeftZero(str) { 24 | return ('00' + str).substr(str.length); 25 | } 26 | /** 27 | * time：时间 28 | * format: 时间的格式如：yyyy-MM-dd hh:mm 29 | */ 30 | Vue.filter('formatDate', function (time , format) { 31 | var date = new Date(time); 32 | if ( !format ) { 33 | format = 'yyyy-MM-dd hh:mm'; 34 | } 35 | return formatDate(date, format); 36 | }) 37 | -------------------------------------------------------------------------------- /src/components/Float.vue: -------------------------------------------------------------------------------- 1 | 12 | 26 | 27 | 46 | -------------------------------------------------------------------------------- /public/data/shops.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "img": "/images/shops/1.jpg", 5 | "title": "高雅3D水漾修护保湿面膜", 6 | "describe": "全面呵护滋养皮肤，软化和补充水分", 7 | "price": 298, 8 | "icon": "特价" 9 | }, 10 | { 11 | "id": 2, 12 | "img": "/images/shops/2.jpg", 13 | "title": "高雅3D水漾修护保湿面膜", 14 | "describe": "全面呵护滋养皮肤，软化和补充水分", 15 | "price": 298, 16 | "icon": "特价" 17 | }, 18 | { 19 | "id": 3, 20 | "img": "/images/shops/3.jpg", 21 | "title": "高雅3D水漾修护保湿面膜", 22 | "describe": "全面呵护滋养皮肤，软化和补充水分", 23 | "price": 298, 24 | "icon": "特价" 25 | }, 26 | { 27 | "id": 4, 28 | "img": "/images/shops/1.jpg", 29 | "title": "高雅3D水漾修护保湿面膜", 30 | "describe": "全面呵护滋养皮肤，软化和补充水分", 31 | "price": 298, 32 | "icon": "特价" 33 | }, 34 | { 35 | "id": 5, 36 | "img": "/images/shops/2.jpg", 37 | "title": "高雅3D水漾修护保湿面膜", 38 | "describe": "全面呵护滋养皮肤，软化和补充水分", 39 | "price": 298, 40 | "icon": "特价" 41 | }, 42 | { 43 | "id": 6, 44 | "img": "/images/shops/3.jpg", 45 | "title": "高雅3D水漾修护保湿面膜", 46 | "describe": "全面呵护滋养皮肤，软化和补充水分", 47 | "price": 298, 48 | "icon": "特价" 49 | } 50 | ] -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-shop", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "start": "vue-cli-service serve", 8 | "build": "vue-cli-service build", 9 | "lint": "vue-cli-service lint" 10 | }, 11 | "dependencies": { 12 | "array-find-index": "^1.0.2", 13 | "axios": "^0.18.0", 14 | "mint-ui": "^2.2.13", 15 | "raf.js": "^0.0.4", 16 | "vue": "^2.5.17", 17 | "vue-lazyload": "^1.2.6", 18 | "vue-router": "^3.0.1", 19 | "vuex": "^3.0.1" 20 | }, 21 | "devDependencies": { 22 | "@vue/cli-plugin-babel": "^3.0.5", 23 | "@vue/cli-plugin-eslint": "^3.0.5", 24 | "@vue/cli-service": "^3.0.5", 25 | "stylus": "^0.54.5", 26 | "stylus-loader": "^3.0.2", 27 | "vue-template-compiler": "^2.5.17" 28 | }, 29 | "eslintConfig": { 30 | "root": true, 31 | "env": { 32 | "node": true 33 | }, 34 | "extends": [ 35 | "plugin:vue/essential", 36 | "eslint:recommended" 37 | ], 38 | "rules": {}, 39 | "parserOptions": { 40 | "parser": "babel-eslint" 41 | } 42 | }, 43 | "postcss": { 44 | "plugins": { 45 | "autoprefixer": {} 46 | } 47 | }, 48 | "browserslist": [ 49 | "> 1%", 50 | "last 2 versions", 51 | "not ie <= 8" 52 | ] 53 | } 54 | -------------------------------------------------------------------------------- /src/views/Person.vue: -------------------------------------------------------------------------------- 1 | 15 | 27 | 28 | 56 | 57 | -------------------------------------------------------------------------------- /public/data/carList.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "img": "/images/shops/1.jpg", 5 | "title": "高雅3D水漾修护保湿面膜", 6 | "price": 298, 7 | "num": 2, 8 | "icon": "特价", 9 | "check": true 10 | }, 11 | { 12 | "id": 2, 13 | "img": "/images/shops/2.jpg", 14 | "title": "高雅3D水漾修护保湿面膜", 15 | "price": 298, 16 | "num": 12, 17 | "icon": "特价", 18 | "check": true 19 | }, 20 | { 21 | "id": 3, 22 | "img": "/images/shops/3.jpg", 23 | "title": "高雅3D水漾修护保湿面膜", 24 | "price": 298, 25 | "num": 12, 26 | "icon": "特价", 27 | "check": true 28 | }, 29 | { 30 | "id": 4, 31 | "img": "/images/shops/1.jpg", 32 | "title": "高雅3D水漾修护保湿面膜", 33 | "price": 298, 34 | "num": 12, 35 | "icon": "特价", 36 | "check": true 37 | }, 38 | { 39 | "id": 5, 40 | "img": "/images/shops/2.jpg", 41 | "title": "高雅3D水漾修护保湿面膜", 42 | "price": 298, 43 | "num": 12, 44 | "icon": "特价", 45 | "check": true 46 | }, 47 | { 48 | "id": 6, 49 | "img": "/images/shops/3.jpg", 50 | "title": "高雅3D水漾修护保湿面膜", 51 | "price": 298, 52 | "num": 12, 53 | "icon": "特价", 54 | "check": true 55 | }, 56 | { 57 | "id": 7, 58 | "img": "/images/shops/3.jpg", 59 | "title": "高雅3D水漾修护保湿面膜", 60 | "price": 298, 61 | "num": 12, 62 | "icon": "特价", 63 | "check": true 64 | }, 65 | { 66 | "id": 8, 67 | "img": "/images/shops/3.jpg", 68 | "title": "高雅3D水漾修护保湿面膜", 69 | "price": 298, 70 | "num": 12, 71 | "icon": "特价", 72 | "check": true 73 | } 74 | ] -------------------------------------------------------------------------------- /src/components/Cell.vue: -------------------------------------------------------------------------------- 1 | 17 | 46 | 47 | 75 | -------------------------------------------------------------------------------- /src/styles/common.stylus: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 13.3333vw; 3 | } 4 | body { 5 | height: 100vh; 6 | background: #f8f8f8; 7 | } 8 | /* 初始化设置 */ 9 | * { 10 | margin: 0; 11 | padding: 0; 12 | font-size: 0.28rem; 13 | font-family: 'microsoft yahei', '微软雅黑', Verdana, Arial, Helvetica, sans-serif; 14 | } 15 | 16 | ul li { 17 | list-style: none; 18 | } 19 | 20 | a { 21 | outline: none; 22 | color: inherit; 23 | } 24 | 25 | a:link { 26 | text-decoration: none; 27 | color: inherit; 28 | } 29 | 30 | a:visited { 31 | text-decoration: none; 32 | color: inherit; 33 | } 34 | 35 | a:hover { 36 | text-decoration: none; 37 | color: inherit; 38 | } 39 | 40 | a:active { 41 | /* star: expression(this.onFocus=this.blur()); */ 42 | text-decoration: none; 43 | color: inherit; 44 | } 45 | 46 | a:focus { 47 | outline: 0; 48 | color: inherit; 49 | text-decoration: none; 50 | } 51 | 52 | input, textarea { 53 | outline-style: none; 54 | outline-width: 0px; 55 | border: none; 56 | border-style: none; 57 | text-shadow: none; 58 | -webkit-appearance: none; 59 | -webkit-user-select: text; 60 | outline-color: transparent; 61 | box-shadow: none; 62 | } 63 | 64 | .mint-button--yellow { 65 | background-color: #fee009 66 | color: black 67 | } 68 | .mint-tabbar > .mint-tab-item.is-selected { 69 | color: #000 70 | } 71 | 72 | .mint-navbar .mint-tab-item.is-selected { 73 | border-bottom: 3px solid #fee009; 74 | color: #fee009; 75 | } 76 | 77 | 78 | #app > .router-fade-enter-to { 79 | position: fixed; 80 | top: 0; 81 | width: 100vw; 82 | } -------------------------------------------------------------------------------- /public/data/orders.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "img": "/images/shops/1.jpg", 5 | "title": "高雅3D水漾修护保湿面膜", 6 | "describe": "全面呵护滋养皮肤，软化和补充水分", 7 | "price": 298, 8 | "payId": "1323123132321321321", 9 | "status": 1, 10 | "num": 10, 11 | "icon": "特价" 12 | }, 13 | { 14 | "id": 2, 15 | "img": "/images/shops/2.jpg", 16 | "title": "高雅3D水漾修护保湿面膜", 17 | "describe": "全面呵护滋养皮肤，软化和补充水分", 18 | "price": 298, 19 | "payId": "1323123132321321321", 20 | "status": 2, 21 | "num": 10, 22 | "icon": "特价" 23 | }, 24 | { 25 | "id": 3, 26 | "img": "/images/shops/3.jpg", 27 | "title": "高雅3D水漾修护保湿面膜", 28 | "describe": "全面呵护滋养皮肤，软化和补充水分", 29 | "price": 298, 30 | "payId": "1323123132321321321", 31 | "status": 1, 32 | "num": 10, 33 | "icon": "特价" 34 | }, 35 | { 36 | "id": 4, 37 | "img": "/images/shops/1.jpg", 38 | "title": "高雅3D水漾修护保湿面膜", 39 | "describe": "全面呵护滋养皮肤，软化和补充水分", 40 | "price": 298, 41 | "payId": "1323123132321321321", 42 | "status": 1, 43 | "num": 10, 44 | "icon": "特价" 45 | }, 46 | { 47 | "id": 5, 48 | "img": "/images/shops/2.jpg", 49 | "title": "高雅3D水漾修护保湿面膜", 50 | "describe": "全面呵护滋养皮肤，软化和补充水分", 51 | "price": 298, 52 | "payId": "1323123132321321321", 53 | "status": 1, 54 | "num": 10, 55 | "icon": "特价" 56 | }, 57 | { 58 | "id": 6, 59 | "img": "/images/shops/3.jpg", 60 | "title": "高雅3D水漾修护保湿面膜", 61 | "describe": "全面呵护滋养皮肤，软化和补充水分", 62 | "price": 298, 63 | "payId": "1323123132321321321", 64 | "status": 1, 65 | "num": 10, 66 | "icon": "特价" 67 | } 68 | ] -------------------------------------------------------------------------------- /src/views/Login.vue: -------------------------------------------------------------------------------- 1 | 17 | 32 | 78 | -------------------------------------------------------------------------------- /src/components/CarFooter.vue: -------------------------------------------------------------------------------- 1 | 17 | 27 | 28 | 84 | 85 | -------------------------------------------------------------------------------- /src/components/_footer.vue: -------------------------------------------------------------------------------- 1 | 12 | 55 | 56 | 65 | -------------------------------------------------------------------------------- /src/components/AddReduce.vue: -------------------------------------------------------------------------------- 1 | /** 2 | * 这里我还想到了一种实现方式,就是子组件改变父组件的值。从而把添加和删除功能放到子组件中来优化父组件功能 3 | * 官方不推荐这种子组件改变父组件值的方式，所以我这里还是将方法放到了父组件里。这里我感觉应该是自己项目的一种约定，而不应该局限于是否可不可以改变父组件的值 4 | */ 5 | 17 | 53 | 92 | -------------------------------------------------------------------------------- /src/components/Coupons.vue: -------------------------------------------------------------------------------- 1 | 11 | 23 | 24 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /src/plugins/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import store from './store' 4 | 5 | 6 | const ShopDetail = () => import(/* webpackChunkName: "shopDetail" */ '@/views/ShopDetail.vue') 7 | const Evaluation = () => import(/* webpackChunkName: "evaluation" */ '@/views/Evaluation.vue') 8 | const Login = () => import(/* webpackChunkName: "login" */ '@/views/Login.vue') 9 | const Home = () => import(/* webpackChunkName: "Home" */ '@/views/Home.vue') 10 | const Car = () => import(/* webpackChunkName: "Car" */ '@/views/Car.vue') 11 | const OrderList = () => import(/* webpackChunkName: "OrderList" */ '@/views/OrderList.vue') 12 | const Person = () => import(/* webpackChunkName: "Person" */ '@/views/Person.vue') 13 | const Pay = () => import(/* webpackChunkName: "PaySuccess" */ '@/views/Pay.vue') 14 | const PaySuccess = () => import(/* webpackChunkName: "PaySuccess" */ '@/views/PaySuccess.vue') 15 | const Test = () => import(/* webpackChunkName: "Test" */ '@/views/Test.vue') 16 | const Coupons = () => import(/* webpackChunkName: "Coupons" */ '@/views/Coupons.vue') 17 | Vue.use(Router) 18 | 19 | const router = new Router({ 20 | mode: 'history', 21 | base: process.env.BASE_URL, 22 | routes: [ 23 | { 24 | path: '', 25 | component: Home 26 | }, 27 | { 28 | path: '/index', 29 | component: Home 30 | }, 31 | { 32 | path: '/car', 33 | component: Car, 34 | }, 35 | { 36 | path: '/orderlist', 37 | component: OrderList, 38 | }, 39 | { 40 | path: '/person', 41 | component: Person, 42 | meta: { requiresAuth: true }, 43 | }, 44 | { 45 | path: '/shopdetail/:id', 46 | name: 'shopDetail', 47 | component: ShopDetail 48 | }, 49 | { 50 | path: '/evaluation/:id', 51 | name: 'evaluation', 52 | component: Evaluation 53 | }, 54 | { 55 | path: '/login', 56 | name: 'login', 57 | component: Login 58 | }, 59 | { 60 | path: '/pay', 61 | name: 'pay', 62 | component: Pay 63 | }, 64 | { 65 | path: '/paysuccess', 66 | name: 'paysuccess', 67 | component: PaySuccess 68 | }, 69 | { 70 | path: '/test', 71 | name: 'test', 72 | component: Test 73 | }, 74 | { 75 | path: '/coupons', 76 | name: 'coupons', 77 | component: Coupons 78 | } 79 | ] 80 | }) 81 | // 判断是否需要登录 82 | router.beforeEach((to, from, next) => { 83 | if (to.meta.requiresAuth && !store.state.login) { 84 | next({ 85 | path: '/login' 86 | }) 87 | } else { 88 | next() 89 | } 90 | }) 91 | 92 | export default router -------------------------------------------------------------------------------- /src/views/OrderList.vue: -------------------------------------------------------------------------------- 1 | 43 | 110 | 111 | 167 | 168 | -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 51 | 84 | 199 | -------------------------------------------------------------------------------- /src/views/Car.vue: -------------------------------------------------------------------------------- 1 | 48 | 106 | 214 | -------------------------------------------------------------------------------- /src/views/Pay.vue: -------------------------------------------------------------------------------- 1 | 76 | 109 | 110 | 239 | -------------------------------------------------------------------------------- /src/views/ShopDetail.vue: -------------------------------------------------------------------------------- 1 | 89 | 165 | 166 | 281 | --------------------------------------------------------------------------------