├── 新建文本文档.txt ├── .browserslistrc ├── public ├── favicon.ico └── index.html ├── src ├── assets │ ├── logo.png │ ├── timg.gif │ ├── img │ │ ├── common │ │ │ ├── top.png │ │ │ ├── placeholder.png │ │ │ ├── arrow-left.svg │ │ │ ├── back.svg │ │ │ └── collect.svg │ │ ├── detail │ │ │ ├── cart.png │ │ │ └── detail_bottom.png │ │ ├── home │ │ │ └── recommend_bg.jpg │ │ ├── profile │ │ │ ├── touxiang.jpeg │ │ │ ├── arrow_right.png │ │ │ ├── message.svg │ │ │ ├── avatar.svg │ │ │ ├── phone.svg │ │ │ ├── pointer.svg │ │ │ ├── cart.svg │ │ │ ├── vip.svg │ │ │ └── shopping.svg │ │ ├── cart │ │ │ └── tick.svg │ │ └── tabbar │ │ │ ├── shopcart.svg │ │ │ ├── shopcart_active.svg │ │ │ ├── category.svg │ │ │ ├── category_active.svg │ │ │ ├── profile.svg │ │ │ ├── home.svg │ │ │ ├── profile_active.svg │ │ │ └── home_active.svg │ └── css │ │ ├── .sass-cache │ │ └── d6708a68c0dec0bde79292c89c33d556df528401 │ │ │ └── base.scssc │ │ ├── base.css.map │ │ ├── base.css │ │ ├── base.scss │ │ └── normalize.min.css ├── network │ ├── home.js │ ├── request.js │ ├── category.js │ └── detail.js ├── store │ ├── actions.js │ ├── getters.js │ ├── index.js │ └── mutations.js ├── views │ ├── home │ │ ├── children │ │ │ ├── FetureView.vue │ │ │ ├── HomeNavBar.vue │ │ │ ├── RecommendView.vue │ │ │ └── Swiper.vue │ │ └── Home.vue │ ├── profile │ │ ├── children │ │ │ ├── ProfileNavBar.vue │ │ │ ├── Money.vue │ │ │ ├── ProfileList.vue │ │ │ └── Login.vue │ │ └── Profile.vue │ ├── cart │ │ ├── Cart.vue │ │ └── children │ │ │ ├── CartNavBar.vue │ │ │ └── CartList.vue │ ├── category │ │ ├── children │ │ │ ├── CategoryNavBar.vue │ │ │ ├── CategoryContent.vue │ │ │ └── CategorySlide.vue │ │ └── Category.vue │ └── detail │ │ ├── children │ │ ├── DetailBottomBar.vue │ │ ├── DetailSwiper.vue │ │ ├── DetailNavBar.vue │ │ ├── DetailItemParams.vue │ │ ├── DetaiDressInfo.vue │ │ ├── DetailBaseInfo.vue │ │ ├── DetailCommentInfo.vue │ │ └── DetailShopInfo.vue │ │ └── Detail.vue ├── vant │ └── index.js ├── App.vue ├── components │ ├── content │ │ ├── backtop │ │ │ └── BackTop.vue │ │ ├── tabcontrol │ │ │ └── TabControl.vue │ │ ├── goods │ │ │ └── GoodsList.vue │ │ └── maintabbar │ │ │ └── MainTabBar.vue │ └── common │ │ ├── tabbar │ │ ├── TabBar.vue │ │ └── TabBarItem.vue │ │ ├── navbar │ │ └── NavBar.vue │ │ └── scroll │ │ └── Scroll.vue ├── main.js ├── router │ └── index.js └── common │ ├── mixin.js │ └── utils.js ├── babel.config.js ├── vue.config.js ├── .gitignore ├── postcss.config.js ├── README.md └── package.json /新建文本文档.txt: -------------------------------------------------------------------------------- 1 | llllllllllll -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aQuanPig/shop-mall/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aQuanPig/shop-mall/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/timg.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aQuanPig/shop-mall/HEAD/src/assets/timg.gif -------------------------------------------------------------------------------- /src/assets/img/common/top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aQuanPig/shop-mall/HEAD/src/assets/img/common/top.png -------------------------------------------------------------------------------- /src/assets/img/detail/cart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aQuanPig/shop-mall/HEAD/src/assets/img/detail/cart.png -------------------------------------------------------------------------------- /src/assets/img/common/placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aQuanPig/shop-mall/HEAD/src/assets/img/common/placeholder.png -------------------------------------------------------------------------------- /src/assets/img/home/recommend_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aQuanPig/shop-mall/HEAD/src/assets/img/home/recommend_bg.jpg -------------------------------------------------------------------------------- /src/assets/img/profile/touxiang.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aQuanPig/shop-mall/HEAD/src/assets/img/profile/touxiang.jpeg -------------------------------------------------------------------------------- /src/assets/img/detail/detail_bottom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aQuanPig/shop-mall/HEAD/src/assets/img/detail/detail_bottom.png -------------------------------------------------------------------------------- /src/assets/img/profile/arrow_right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aQuanPig/shop-mall/HEAD/src/assets/img/profile/arrow_right.png -------------------------------------------------------------------------------- /src/assets/css/.sass-cache/d6708a68c0dec0bde79292c89c33d556df528401/base.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aQuanPig/shop-mall/HEAD/src/assets/css/.sass-cache/d6708a68c0dec0bde79292c89c33d556df528401/base.scssc -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | 5 | ], 6 | plugins: [ 7 | ['import', { 8 | libraryName: 'vant', 9 | libraryDirectory: 'es', 10 | style: true 11 | }, 'vant'] 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | configureWebpack:{ 3 | resolve:{ 4 | alias:{ 5 | components:'@/components', 6 | views:'@/views', 7 | common:'@/common', 8 | assets:'@/assets', 9 | network:'@/network', 10 | } 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/network/home.js: -------------------------------------------------------------------------------- 1 | import {request} from "./request"; 2 | export function getHomeMutilData() { 3 | return request({ 4 | url:'/home/multidata' 5 | }) 6 | } 7 | export function getHomeGoodsData(type,page) { 8 | return request({ 9 | url: "/home/data", 10 | params: { type, page } 11 | }) 12 | } 13 | -------------------------------------------------------------------------------- /.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 | pnpm-debug.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | -------------------------------------------------------------------------------- /src/store/actions.js: -------------------------------------------------------------------------------- 1 | export default { 2 | addCart({state,commit},payload){ 3 | const old_payload = state.cartList.find(item =>{ 4 | return item.iid === payload.iid 5 | }) 6 | if (old_payload){ 7 | commit('incrementCount',old_payload) 8 | 9 | }else { 10 | commit('pushCart',payload) 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/store/getters.js: -------------------------------------------------------------------------------- 1 | export default { 2 | getCartLength(state){ 3 | return state.cartList.length 4 | }, 5 | getCartCountPrice(state){ 6 | return state.cartList.filter(item=>{ 7 | return item.isCheck === true 8 | }).reduce((preValue,nowValue)=>{ 9 | return preValue + nowValue.price * nowValue.count 10 | },0) 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | Vue.use(Vuex) 5 | import mutations from "./mutations"; 6 | import actions from './actions' 7 | import getters from "./getters"; 8 | const state = { 9 | cartList:[] 10 | } 11 | export default new Vuex.Store({ 12 | state, 13 | mutations, 14 | actions, 15 | getters 16 | }) 17 | -------------------------------------------------------------------------------- /src/views/home/children/FetureView.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | 20 | -------------------------------------------------------------------------------- /src/assets/img/cart/tick.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/vant/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import { Swipe, SwipeItem, GoodsAction, GoodsActionIcon, GoodsActionButton, Checkbox, CheckboxGroup,Toast, Icon , Image as VanImage} from 'vant'; 3 | Vue.use(VanImage); 4 | Vue.use(Icon) 5 | Vue.use(Toast); 6 | Vue.use(Swipe); 7 | Vue.use(SwipeItem); 8 | Vue.use(GoodsAction); 9 | Vue.use(GoodsActionButton); 10 | Vue.use(GoodsActionIcon); 11 | Vue.use(Checkbox); 12 | Vue.use(CheckboxGroup); 13 | 14 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 19 | 20 | 23 | -------------------------------------------------------------------------------- /src/components/content/backtop/BackTop.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 25 | -------------------------------------------------------------------------------- /src/network/request.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | 4 | export function request(config) { 5 | const instance = axios.create({ 6 | // 需要接口的请加coderwhy老师 7 | baseURL:'' 8 | }) 9 | //请求拦截 10 | instance.interceptors.request.use(config=>{ 11 | return config 12 | },err=> { 13 | console.log(err) 14 | }) 15 | //响应拦截 16 | instance.interceptors.response.use(result=>{ 17 | return result.data 18 | },err=> { 19 | console.log(err) 20 | }) 21 | return instance(config) 22 | } 23 | -------------------------------------------------------------------------------- /src/assets/img/common/arrow-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {}, 4 | "postcss-px-to-viewport": { 5 | viewportWidth: 375, //视口的宽度，对应的时设计稿的宽度/2，一般为750 6 | viewportHeight: 667, //视口的高度，对应的是设计稿的高度（也可以不配置） 7 | unitPrecision: 5, //指定‘px’转换为视口单位值的小数位数（很多时候无法整除） 8 | viewportUnit: 'vw', //指定需要转换成的视口单位，建议使用vw 9 | selectorBlankList: ['ignore'], //指定不需要转换的类 10 | minPixelValue: 1, //小于或等于‘1px’不转换为视口单位 11 | mediaQuery: false,//允许在媒体查询中转换为‘px’ 12 | exclude: [/MainTabBar/] //不需要转化的组件文件名正则，必须是正则表达式 13 | } 14 | } 15 | }; 16 | -------------------------------------------------------------------------------- /src/assets/img/common/back.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/views/profile/children/ProfileNavBar.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 18 | 19 | 27 | -------------------------------------------------------------------------------- /src/network/category.js: -------------------------------------------------------------------------------- 1 | import {request} from "./request"; 2 | export function getCategory() { 3 | return request({ 4 | url: "/category" 5 | }).catch(err => err); 6 | } 7 | 8 | export function getSubcategory(maitKey) { 9 | return request({ 10 | url: "/subcategory", 11 | params: { 12 | maitKey 13 | } 14 | }).catch(err => err); 15 | } 16 | 17 | export function getCategoryDetail(miniWallkey, type) { 18 | return request({ 19 | url: "/subcategory/detail", 20 | params: { 21 | miniWallkey, 22 | type 23 | } 24 | }).catch(err => err); 25 | } 26 | -------------------------------------------------------------------------------- /src/components/common/tabbar/TabBar.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 13 | 14 | 30 | -------------------------------------------------------------------------------- /src/views/home/children/HomeNavBar.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /src/views/profile/Profile.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 25 | 26 | 29 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import store from './store' 5 | //网络 6 | import './network/request' 7 | //按需导入vant 8 | import './vant' 9 | //注册bus 10 | Vue.prototype.$bus = new Vue() 11 | //使用fastclick:解决移动端300ms的延迟 12 | import FastClick from 'fastclick' 13 | FastClick.attach(document.body) 14 | //图片懒加载 15 | import VueLazyLoad from 'vue-lazyload' 16 | Vue.use(VueLazyLoad,{ 17 | loading:require('./assets/img/common/placeholder.png') 18 | }) 19 | Vue.config.productionTip = false 20 | 21 | new Vue({ 22 | router, 23 | store, 24 | render: h => h(App) 25 | }).$mount('#app') 26 | -------------------------------------------------------------------------------- /src/views/cart/Cart.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 24 | 25 | 32 | -------------------------------------------------------------------------------- /src/views/category/children/CategoryNavBar.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 18 | 19 | 32 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/views/cart/children/CartNavBar.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 18 | 19 | 32 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # shopmall 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### 喜欢的朋友可以给个Star哦~ 14 | ### 喜欢的朋友可加老师VXin（coderwhy003）获取接口 15 | 16 | - 首页： 17 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200812213505595.png#pic_center) 18 | 19 | - 分类： 20 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200812213531701.png#pic_center) 21 | 22 | - 购物车： 23 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200812213553952.png#pic_center) 24 | 25 | - 我的: 26 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200812213606867.png#pic_center) 27 | 28 | - 详情： 29 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/2020081221363060.png#pic_center) 30 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | const Home = () => import ('views/home/Home') 4 | const Category = () => import ('views/category/Category') 5 | const Cart = () => import ('views/cart/Cart') 6 | const Profile = () => import ('views/profile/Profile') 7 | const Detail = () => import ('views/detail/Detail') 8 | 9 | Vue.use(VueRouter) 10 | 11 | const routes = [ 12 | {path:'/',redirect:'/home'}, 13 | {path:'/home',component:Home}, 14 | {path:'/category',component:Category}, 15 | {path:'/cart',component:Cart}, 16 | {path:'/profile',component:Profile}, 17 | {path:'/detail/:iid',component:Detail} 18 | ] 19 | 20 | const router = new VueRouter({ 21 | routes , 22 | mode:'history' 23 | }) 24 | 25 | export default router 26 | -------------------------------------------------------------------------------- /src/common/mixin.js: -------------------------------------------------------------------------------- 1 | import {debounce} from "./utils"; 2 | import BackTop from "components/content/backtop/BackTop"; 3 | export const imgMixin = { 4 | data(){ 5 | return { 6 | imgListener:null 7 | } 8 | }, 9 | mounted() { 10 | const refresh = debounce(this.$refs.scroll.refresh, 100) 11 | this.imgListener = () => { 12 | refresh(); 13 | }; 14 | debounce(this.$bus.$on('imgLoad', this.imgListener)) 15 | } 16 | } 17 | //回到顶部 18 | export const backTopMixin = { 19 | components:{ 20 | BackTop 21 | } , 22 | data() { 23 | return { 24 | isShopBackTop:false, 25 | } 26 | }, 27 | methods:{ 28 | showBackTop(position){ 29 | this.isShopBackTop = (-position.y) > 1000 ? true :false 30 | }, 31 | scrollTop(){ 32 | this.$refs.scroll.scrollTo(0,0,500) 33 | }, 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/components/common/navbar/NavBar.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 20 | 21 | 43 | -------------------------------------------------------------------------------- /src/common/utils.js: -------------------------------------------------------------------------------- 1 | //防抖函数，防止重复调用 2 | export function debounce(func,delay=500) { 3 | let timer = null 4 | return function (...args) { 5 | if (timer){ 6 | clearTimeout(timer) 7 | } 8 | timer = setTimeout(()=>{ 9 | func.apply(this,args) 10 | },delay) 11 | } 12 | } 13 | 14 | // 时间格式化 15 | export function formatDate(date, fmt) { 16 | if (/(y+)/.test(fmt)) { 17 | fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); 18 | } 19 | 20 | let o = { 21 | "M+": date.getMonth() + 1, 22 | "d+": date.getDate(), 23 | "h+": date.getHours(), 24 | "m+": date.getMinutes(), 25 | "s+": date.getSeconds() 26 | }; 27 | 28 | for (let k in o) { 29 | if (new RegExp(`(${k})`).test(fmt)) { 30 | let str = o[k] + ""; 31 | fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str)); 32 | } 33 | } 34 | 35 | return fmt; 36 | } 37 | -------------------------------------------------------------------------------- /src/store/mutations.js: -------------------------------------------------------------------------------- 1 | import { Toast } from "vant"; 2 | export default { 3 | pushCart(state,payload){ 4 | payload.count = 1 5 | payload.isCheck = true 6 | let new_payload = JSON.parse(JSON.stringify(payload)) 7 | Toast({ 8 | type: "success", 9 | message: `添加商品成功`, 10 | // 弹框的时候禁止点击 11 | forbidClick: true, 12 | duration: 1500 13 | }); 14 | state.cartList.push(new_payload) 15 | }, 16 | incrementCount(state,payload){ 17 | payload.count += 1 18 | Toast({ 19 | type: "success", 20 | message: `当前商品数量为${payload.count}`, 21 | // 弹框的时候禁止点击 22 | forbidClick: true, 23 | duration: 1500 24 | }); 25 | }, 26 | isCheckTrue(state){ 27 | for(let i of state.cartList){ 28 | i.isCheck = true 29 | } 30 | }, 31 | isCheckFalse(state){ 32 | for(let i of state.cartList){ 33 | i.isCheck = !i.isCheck 34 | } 35 | }, 36 | 37 | } 38 | -------------------------------------------------------------------------------- /src/views/home/children/RecommendView.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 25 | 26 | 44 | -------------------------------------------------------------------------------- /src/assets/img/tabbar/shopcart.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.15, written by Peter Selinger 2001-2017 9 | 10 | 12 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/assets/img/tabbar/shopcart_active.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.15, written by Peter Selinger 2001-2017 9 | 10 | 12 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/assets/img/tabbar/category.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.15, written by Peter Selinger 2001-2017 9 | 10 | 12 | 14 | 16 | 18 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/assets/img/tabbar/category_active.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.15, written by Peter Selinger 2001-2017 9 | 10 | 12 | 14 | 16 | 18 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/assets/img/tabbar/profile.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.15, written by Peter Selinger 2001-2017 9 | 10 | 12 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/assets/img/tabbar/home.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.15, written by Peter Selinger 2001-2017 9 | 10 | 12 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/assets/img/tabbar/profile_active.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.15, written by Peter Selinger 2001-2017 9 | 10 | 12 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shopmall", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "@better-scroll/core": "^2.0.0-beta.10", 11 | "@better-scroll/pull-up": "^2.0.0-beta.10", 12 | "axios": "^0.19.2", 13 | "core-js": "^3.6.5", 14 | "fastclick": "^1.0.6", 15 | "moment": "^2.27.0", 16 | "vant": "^2.8.7", 17 | "vue": "^2.6.11", 18 | "vue-lazyload": "^1.3.3", 19 | "vue-router": "^3.2.0", 20 | "vuex": "^3.4.0" 21 | }, 22 | "devDependencies": { 23 | "@vue/cli-plugin-babel": "~4.4.0", 24 | "@vue/cli-plugin-router": "~4.4.0", 25 | "@vue/cli-plugin-vuex": "~4.4.0", 26 | "@vue/cli-service": "~4.4.0", 27 | "babel-plugin-import": "^1.13.0", 28 | "node-sass": "^4.14.1", 29 | "postcss-px-to-viewport": "^1.1.1", 30 | "sass-loader": "^8.0.2", 31 | "vue-template-compiler": "^2.6.11", 32 | "webpack": "^4.43.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/assets/img/profile/message.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/img/tabbar/home_active.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.15, written by Peter Selinger 2001-2017 9 | 10 | 12 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/assets/css/base.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": ";AAAQ,8BAAmB;AAE3B,CAAE;EACA,UAAU,EAAE,UAAU;EACtB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;AAMZ,wBAAwB;AACxB;IACK;EACH,WAAW,EAAE,qBAAqB;EAClC,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,OAAO;EACd,UAAU,EAAE,OAAO;EACnB,SAAS,EAAE,IAAI;EACf,2BAA2B,EAAE,gBAAgB;;AAG/C,CAAE;EACA,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,OAAO;;AAGhB,gBAAiB;EACf,SAAS,EAAE,CAAC;EACZ,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,EAAE;;AAGb,YAAa;EACX,OAAO,EAAE,YAAY;EACrB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;EACX,WAAW,EAAE,MAAM;EACnB,SAAS,EAAE,cAAc;EACzB,UAAU,EAAE,iBAAiB;EAC7B,WAAW,EAAE,iBAAiB;EAC9B,gBAAgB,EAAE,WAAW;;AAG/B,KAAM;EACJ,KAAK,EAAE,IAAI;;AAGb,MAAO;EACL,KAAK,EAAE,KAAK;;AAGd,IAAK;EACH,SAAS,EAAE,IAAI;EACf,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;;AAEd,OAAQ;EACN,QAAQ,EAAE,MAAM;EAChB,WAAW,EAAE,MAAM;EACnB,aAAa,EAAE,QAAQ", 4 | "sources": ["../../../../../../../../%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/Vue/%E9%87%8D%E5%AD%A6Vue/why/shopmall/src/assets/css/base.scss"], 5 | "names": [], 6 | "file": "base.css" 7 | } 8 | -------------------------------------------------------------------------------- /src/views/detail/children/DetailBottomBar.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 35 | 36 | 39 | -------------------------------------------------------------------------------- /src/views/detail/children/DetailSwiper.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 24 | 25 | 50 | -------------------------------------------------------------------------------- /src/assets/css/base.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import url(normalize.min.css); 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; } 7 | 8 | /*:root -> 鑾峰彇鏍瑰厓绱爃tml*/ 9 | body, 10 | html { 11 | font-family: -apple-system, "MIUI"; 12 | width: 100%; 13 | height: 100%; 14 | color: #666666; 15 | background: #ffffff; 16 | font-size: 14px; 17 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } 18 | 19 | a { 20 | text-decoration: none; 21 | color: #666666; } 22 | 23 | .clear-fix:after { 24 | font-size: 0; 25 | display: block; 26 | clear: both; 27 | height: 0; 28 | content: ""; } 29 | 30 | .arrow-right { 31 | display: inline-block; 32 | width: 9px; 33 | height: 9px; 34 | margin-left: 0.1rem; 35 | transform: rotate(135deg); 36 | border-top: 1px solid #999999; 37 | border-left: 1px solid #999999; 38 | background-color: transparent; } 39 | 40 | .left { 41 | float: left; } 42 | 43 | .right { 44 | float: right; } 45 | 46 | #app { 47 | font-size: 16px; 48 | overflow-x: hidden; 49 | width: 100%; 50 | height: 100%; } 51 | 52 | .nowrap { 53 | overflow: hidden; 54 | white-space: nowrap; 55 | text-overflow: ellipsis; } 56 | 57 | /*# sourceMappingURL=base.css.map */ 58 | -------------------------------------------------------------------------------- /src/components/common/tabbar/TabBarItem.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 41 | 42 | 53 | -------------------------------------------------------------------------------- /src/assets/css/base.scss: -------------------------------------------------------------------------------- 1 | @import "normalize.min.css"; 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | $color-high-text: #ff5777; 10 | $color-background-pink: #ff8198; 11 | $color-background-white:#fff; 12 | /*:root -> 获取根元素html*/ 13 | body, 14 | html { 15 | font-family: -apple-system, "MIUI"; 16 | width: 100%; 17 | height: 100%; 18 | color: #666666; 19 | background: #ffffff; 20 | font-size: 14px; 21 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 22 | } 23 | 24 | a { 25 | text-decoration: none; 26 | color: #666666; 27 | } 28 | 29 | .clear-fix:after { 30 | font-size: 0; 31 | display: block; 32 | clear: both; 33 | height: 0; 34 | content: ""; 35 | } 36 | 37 | .arrow-right { 38 | display: inline-block; 39 | width: 9px; 40 | height: 9px; 41 | margin-left: 0.1rem; 42 | transform: rotate(135deg); 43 | border-top: 1px solid #999999; 44 | border-left: 1px solid #999999; 45 | background-color: transparent; 46 | } 47 | 48 | .left { 49 | float: left; 50 | } 51 | 52 | .right { 53 | float: right; 54 | } 55 | 56 | #app { 57 | font-size: 16px; 58 | overflow-x: hidden; 59 | width: 100%; 60 | height: 100%; 61 | } 62 | .nowrap { 63 | overflow: hidden; 64 | white-space: nowrap; 65 | text-overflow: ellipsis; 66 | } 67 | -------------------------------------------------------------------------------- /src/views/home/children/Swiper.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 40 | 41 | 60 | -------------------------------------------------------------------------------- /src/components/content/tabcontrol/TabControl.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 35 | 36 | 59 | -------------------------------------------------------------------------------- /src/network/detail.js: -------------------------------------------------------------------------------- 1 | import {request} from "./request"; 2 | export function getDetailData(iid) { 3 | return request({ 4 | url:'/detail', 5 | params: {iid} 6 | }) 7 | } 8 | export function getRecommentdData() { 9 | return request({ 10 | url:'/recommend' 11 | }) 12 | } 13 | // 获取基础信息 14 | export class GetDeatilBaseData{ 15 | constructor(itemInfo,columns,shopInfo){ 16 | this.title = itemInfo.title 17 | this.price = itemInfo.price 18 | this.oldPrice = itemInfo.oldPrice 19 | this.discountDesc = itemInfo.discountDesc 20 | this.discountBgColor = itemInfo.discountBgColor 21 | this.columns = columns 22 | this.services = shopInfo.services 23 | this.desc = itemInfo.desc 24 | this.lowNowPrice = itemInfo.lowNowPrice 25 | } 26 | } 27 | //获取店铺信息 28 | export class GetDetailShopInfo { 29 | constructor(shopInfo) { 30 | this.shopLogo = shopInfo.shopLogo 31 | this.name = shopInfo.name 32 | this.cSells = shopInfo.cSells 33 | this.cGoods = shopInfo.cGoods 34 | this.score = shopInfo.score 35 | } 36 | } 37 | //获取尺码信息 38 | export class GetItemParams { 39 | constructor(itemParams) { 40 | // 注: images可能没有值(某些商品有值, 某些没有值) 41 | this.image = itemParams.info.images ? itemParams.info.images[0] : ""; 42 | this.info = itemParams.info.set 43 | this.rule = itemParams.rule.tables 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/views/category/children/CategoryContent.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 41 | 42 | 60 | -------------------------------------------------------------------------------- /src/views/profile/children/Money.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 33 | 34 | 73 | -------------------------------------------------------------------------------- /src/assets/img/profile/avatar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/views/profile/children/ProfileList.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 32 | 33 | 66 | -------------------------------------------------------------------------------- /src/assets/img/profile/phone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/views/detail/children/DetailNavBar.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 44 | 45 | 69 | -------------------------------------------------------------------------------- /src/views/detail/children/DetailItemParams.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 34 | 35 | 74 | -------------------------------------------------------------------------------- /src/components/content/goods/GoodsList.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 37 | 38 | 75 | -------------------------------------------------------------------------------- /src/views/profile/children/Login.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 29 | 30 | 93 | -------------------------------------------------------------------------------- /src/components/common/scroll/Scroll.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 73 | 74 | 77 | -------------------------------------------------------------------------------- /src/assets/img/common/collect.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/img/profile/pointer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/img/profile/cart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/content/maintabbar/MainTabBar.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 61 | 62 | 67 | -------------------------------------------------------------------------------- /src/views/category/children/CategorySlide.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 60 | 61 | 92 | -------------------------------------------------------------------------------- /src/views/detail/children/DetaiDressInfo.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 43 | 44 | 97 | -------------------------------------------------------------------------------- /src/views/detail/children/DetailBaseInfo.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 36 | 37 | 91 | -------------------------------------------------------------------------------- /src/views/detail/children/DetailCommentInfo.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 43 | 44 | 98 | -------------------------------------------------------------------------------- /src/assets/img/profile/vip.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/img/profile/shopping.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/views/detail/children/DetailShopInfo.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 52 | 53 | 118 | 119 | -------------------------------------------------------------------------------- /src/assets/css/normalize.min.css: -------------------------------------------------------------------------------- 1 | html { 2 | line-height: 1.15; 3 | -webkit-text-size-adjust: 100%; 4 | } 5 | 6 | body { 7 | margin: 0; 8 | } 9 | 10 | main { 11 | display: block; 12 | } 13 | 14 | h1 { 15 | font-size: 2em; 16 | margin: 0.67em 0; 17 | } 18 | 19 | hr { 20 | overflow: visible; 21 | box-sizing: content-box; 22 | height: 0; 23 | } 24 | 25 | pre { 26 | font-family: monospace, monospace; 27 | font-size: 1em; 28 | } 29 | 30 | a { 31 | background-color: transparent; 32 | } 33 | 34 | abbr[title] { 35 | text-decoration: underline; 36 | text-decoration: underline dotted; 37 | border-bottom: none; 38 | } 39 | 40 | b, 41 | strong { 42 | font-weight: bolder; 43 | } 44 | 45 | code, 46 | kbd, 47 | samp { 48 | font-family: monospace, monospace; 49 | font-size: 1em; 50 | } 51 | 52 | small { 53 | font-size: 80%; 54 | } 55 | 56 | sub, 57 | sup { 58 | font-size: 75%; 59 | line-height: 0; 60 | position: relative; 61 | vertical-align: baseline; 62 | } 63 | 64 | sub { 65 | bottom: -0.25em; 66 | } 67 | 68 | sup { 69 | top: -0.5em; 70 | } 71 | 72 | img { 73 | border-style: none; 74 | } 75 | 76 | button, 77 | input, 78 | optgroup, 79 | select, 80 | textarea { 81 | font-family: inherit; 82 | font-size: 100%; 83 | line-height: 1.15; 84 | margin: 0; 85 | } 86 | 87 | button, 88 | input { 89 | overflow: visible; 90 | } 91 | 92 | button, 93 | select { 94 | text-transform: none; 95 | } 96 | 97 | [type="button"], 98 | [type="reset"], 99 | [type="submit"], 100 | button { 101 | -webkit-appearance: button; 102 | } 103 | 104 | [type="button"]::-moz-focus-inner, 105 | [type="reset"]::-moz-focus-inner, 106 | [type="submit"]::-moz-focus-inner, 107 | button::-moz-focus-inner { 108 | padding: 0; 109 | border-style: none; 110 | } 111 | 112 | [type="button"]:-moz-focusring, 113 | [type="reset"]:-moz-focusring, 114 | [type="submit"]:-moz-focusring, 115 | button:-moz-focusring { 116 | outline: 1px dotted ButtonText; 117 | } 118 | 119 | fieldset { 120 | padding: 0.35em 0.75em 0.625em; 121 | } 122 | 123 | legend { 124 | display: table; 125 | box-sizing: border-box; 126 | max-width: 100%; 127 | padding: 0; 128 | white-space: normal; 129 | color: inherit; 130 | } 131 | 132 | progress { 133 | vertical-align: baseline; 134 | } 135 | 136 | textarea { 137 | overflow: auto; 138 | } 139 | 140 | [type="checkbox"], 141 | [type="radio"] { 142 | box-sizing: border-box; 143 | padding: 0; 144 | } 145 | 146 | [type="number"]::-webkit-inner-spin-button, 147 | [type="number"]::-webkit-outer-spin-button { 148 | height: auto; 149 | } 150 | 151 | [type="search"] { 152 | outline-offset: -2px; 153 | -webkit-appearance: textfield; 154 | } 155 | 156 | [type="search"]::-webkit-search-decoration { 157 | -webkit-appearance: none; 158 | } 159 | 160 | ::-webkit-file-upload-button { 161 | font: inherit; 162 | -webkit-appearance: button; 163 | } 164 | 165 | details { 166 | display: block; 167 | } 168 | 169 | summary { 170 | display: list-item; 171 | } 172 | 173 | template { 174 | display: none; 175 | } 176 | 177 | [hidden] { 178 | display: none; 179 | } 180 | -------------------------------------------------------------------------------- /src/views/category/Category.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 108 | 109 | 123 | -------------------------------------------------------------------------------- /src/views/home/Home.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 139 | 140 | 159 | -------------------------------------------------------------------------------- /src/views/detail/Detail.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 132 | 133 | 153 | -------------------------------------------------------------------------------- /src/views/cart/children/CartList.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 77 | 78 | 187 | --------------------------------------------------------------------------------