├── statics ├── site.rar ├── css │ ├── site1.scss │ ├── site2.less │ └── site.css ├── imgs │ ├── bg.png │ └── logo.png ├── theme_rms.rar ├── mui │ ├── fonts │ │ ├── mui.ttf │ │ └── mui-icons-extra.ttf │ └── css │ │ └── icons-extra.css ├── site │ ├── images │ │ ├── Thumbs.db │ │ ├── logo.png │ │ ├── w_03.jpg │ │ ├── banner_1.png │ │ ├── banner_2.png │ │ ├── banner_3.png │ │ ├── focus_1.png │ │ ├── focus_2.png │ │ ├── move-box.png │ │ ├── avatar-bg.png │ │ ├── slide_btns.png │ │ └── user-avatar.png │ ├── css │ │ ├── icon │ │ │ ├── iconfont.eot │ │ │ ├── iconfont.ttf │ │ │ ├── iconfont.woff │ │ │ ├── iconfont.css │ │ │ ├── demo_fontclass.html │ │ │ ├── demo.css │ │ │ ├── demo_unicode.html │ │ │ └── demo_symbol.html │ │ ├── flexslider.css │ │ └── viewer.min.css │ └── js │ │ └── magnifier.js └── theme_rms │ └── fonts │ ├── element-icons.ttf │ └── element-icons.woff ├── .gitignore ├── .babelrc ├── src ├── stores │ ├── index.js │ ├── global │ │ └── index.js │ └── shopcar │ │ └── index.js ├── kits │ ├── imgzoomkit.js │ └── kits.js ├── App.vue ├── components │ ├── site │ │ ├── home │ │ │ └── list.vue │ │ ├── goods │ │ │ ├── successpay.vue │ │ │ ├── goodsmore.vue │ │ │ ├── payment.vue │ │ │ ├── goodslist.vue │ │ │ ├── goodsinfobottom.vue │ │ │ └── car.vue │ │ ├── down │ │ │ └── list.vue │ │ ├── common │ │ │ └── list.vue │ │ ├── point │ │ │ └── list.vue │ │ ├── question │ │ │ └── list.vue │ │ ├── subcom │ │ │ ├── categroupcontent.vue │ │ │ ├── inputnumber.vue │ │ │ ├── contentsildtophot.vue │ │ │ └── categroupcontent静态结构.vue │ │ ├── account │ │ │ ├── login.vue │ │ │ └── register.vue │ │ ├── member │ │ │ ├── center.vue │ │ │ ├── orderlist.vue │ │ │ └── orderinfo.vue │ │ ├── slayout.vue │ │ └── slayout_jquery版本.vue │ └── pay.vue └── main.js ├── index1.html ├── package.json ├── README.MD └── webpack.config.js /statics/site.rar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanyb/vueRMS_Site/HEAD/statics/site.rar -------------------------------------------------------------------------------- /statics/css/site1.scss: -------------------------------------------------------------------------------- 1 | 2 | $color:blue; 3 | 4 | #v2{ 5 | border:1px solid $color; 6 | } -------------------------------------------------------------------------------- /statics/css/site2.less: -------------------------------------------------------------------------------- 1 | 2 | @color:green; 3 | 4 | #res{ 5 | border:2px solid @color; 6 | } -------------------------------------------------------------------------------- /statics/imgs/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanyb/vueRMS_Site/HEAD/statics/imgs/bg.png -------------------------------------------------------------------------------- /statics/imgs/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanyb/vueRMS_Site/HEAD/statics/imgs/logo.png -------------------------------------------------------------------------------- /statics/theme_rms.rar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanyb/vueRMS_Site/HEAD/statics/theme_rms.rar -------------------------------------------------------------------------------- /statics/mui/fonts/mui.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanyb/vueRMS_Site/HEAD/statics/mui/fonts/mui.ttf -------------------------------------------------------------------------------- /statics/site/images/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanyb/vueRMS_Site/HEAD/statics/site/images/Thumbs.db -------------------------------------------------------------------------------- /statics/site/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanyb/vueRMS_Site/HEAD/statics/site/images/logo.png -------------------------------------------------------------------------------- /statics/site/images/w_03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanyb/vueRMS_Site/HEAD/statics/site/images/w_03.jpg -------------------------------------------------------------------------------- /statics/site/images/banner_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanyb/vueRMS_Site/HEAD/statics/site/images/banner_1.png -------------------------------------------------------------------------------- /statics/site/images/banner_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanyb/vueRMS_Site/HEAD/statics/site/images/banner_2.png -------------------------------------------------------------------------------- /statics/site/images/banner_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanyb/vueRMS_Site/HEAD/statics/site/images/banner_3.png -------------------------------------------------------------------------------- /statics/site/images/focus_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanyb/vueRMS_Site/HEAD/statics/site/images/focus_1.png -------------------------------------------------------------------------------- /statics/site/images/focus_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanyb/vueRMS_Site/HEAD/statics/site/images/focus_2.png -------------------------------------------------------------------------------- /statics/site/images/move-box.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanyb/vueRMS_Site/HEAD/statics/site/images/move-box.png -------------------------------------------------------------------------------- /statics/site/css/icon/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanyb/vueRMS_Site/HEAD/statics/site/css/icon/iconfont.eot -------------------------------------------------------------------------------- /statics/site/css/icon/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanyb/vueRMS_Site/HEAD/statics/site/css/icon/iconfont.ttf -------------------------------------------------------------------------------- /statics/site/images/avatar-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanyb/vueRMS_Site/HEAD/statics/site/images/avatar-bg.png -------------------------------------------------------------------------------- /statics/site/images/slide_btns.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanyb/vueRMS_Site/HEAD/statics/site/images/slide_btns.png -------------------------------------------------------------------------------- /statics/mui/fonts/mui-icons-extra.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanyb/vueRMS_Site/HEAD/statics/mui/fonts/mui-icons-extra.ttf -------------------------------------------------------------------------------- /statics/site/css/icon/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanyb/vueRMS_Site/HEAD/statics/site/css/icon/iconfont.woff -------------------------------------------------------------------------------- /statics/site/images/user-avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanyb/vueRMS_Site/HEAD/statics/site/images/user-avatar.png -------------------------------------------------------------------------------- /statics/theme_rms/fonts/element-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanyb/vueRMS_Site/HEAD/statics/theme_rms/fonts/element-icons.ttf -------------------------------------------------------------------------------- /statics/theme_rms/fonts/element-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanyb/vueRMS_Site/HEAD/statics/theme_rms/fonts/element-icons.woff -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | lib-cov 2 | *.seed 3 | *.log 4 | *.csv 5 | *.dat 6 | *.out 7 | *.pid 8 | *.gz 9 | 10 | pids 11 | logs 12 | results 13 | npm-debug.log 14 | node_modules 15 | dist 16 | .idea 17 | .svn 18 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }] 4 | ], 5 | "plugins": [ 6 | "transform-vue-jsx", 7 | ["component", [ 8 | { 9 | "libraryName": "element-ui", 10 | "styleLibraryName": "theme-default" 11 | }] 12 | ] 13 | ] 14 | } -------------------------------------------------------------------------------- /src/stores/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import vuex from 'vuex'; 3 | Vue.use(vuex); 4 | 5 | import global from './global/index.js'; 6 | import shopcar from './shopcar/index.js'; 7 | 8 | export default new vuex.Store({ 9 | modules:{ 10 | global, 11 | shopcar 12 | } 13 | }); -------------------------------------------------------------------------------- /index1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 8 | 9 | 10 |
11 |
12 | 13 | -------------------------------------------------------------------------------- /src/kits/imgzoomkit.js: -------------------------------------------------------------------------------- 1 | import jQuery from 'jquery' 2 | import '../../statics/site/js/magnifier.js' 3 | 4 | export default { 5 | deep: true, 6 | bind () {}, 7 | update (el) { 8 | // Destroy in case it has been initialized already. 9 | setTimeout(function(){ 10 | jQuery(el).imgzoon({magnifier:el}); 11 | },1000) 12 | }, 13 | 14 | unbind () { 15 | 16 | } 17 | } -------------------------------------------------------------------------------- /src/kits/kits.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // uploadimgapi:'http://139.199.192.48:6060/article/uploadimg', //封面图片 3 | // uploadfileapi:'http://139.199.192.48:6060/article/uploadfile' //下载附件 4 | // uploadimgapi:'http://127.0.0.1:8899/article/uploadimg', //封面图片 5 | // uploadfileapi:'http://127.0.0.1:8899/article/uploadfile' //下载附件 6 | uploadimgapi:'http://157.122.54.189:9095/admin/article/uploadimg', //封面图片 7 | uploadfileapi:'http://157.122.54.189:9095/admin/article/uploadfile' //下载附件 8 | } -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | 29 | 30 | -------------------------------------------------------------------------------- /src/components/site/home/list.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 24 | 25 | -------------------------------------------------------------------------------- /src/stores/global/index.js: -------------------------------------------------------------------------------- 1 | 2 | //状态 3 | const state = { 4 | // 1 枚举 5 | //1.1 当前选中的是哪个菜单项目，调用 this.$store.global.changeMenuActiveNo()时第一个参数填写此值 6 | ChangeMenuActiveNoFlag : 'changeMenuActiveNo', 7 | 8 | //2 具体值 9 | // 标记当前选中的是哪个菜单 10 | menuActiveNo : '1-1', 11 | 12 | // 登录标识 13 | islogined:0, 14 | isloginedFlag:'changeIsLogined', 15 | isloginStorageKey:'islogin' 16 | } 17 | 18 | const mutations = { 19 | // 改变选择菜单状态 20 | changeMenuActiveNo(state,no){ 21 | state.menuActiveNo = no; 22 | }, 23 | changeIsLogined(state,no){ 24 | state.islogined = no; 25 | localStorage.setItem(state.isloginStorageKey,no); 26 | } 27 | } 28 | 29 | const actions = { 30 | changeMenuActiveNo({commit},no){ 31 | commit(state.ChangeMenuActiveNoFlag,no); 32 | }, 33 | changeIsLogined({commit},no){ 34 | commit(state.isloginedFlag,no); 35 | } 36 | } 37 | 38 | const getters = { 39 | getMenuActiveNo(){ 40 | return state.menuActiveNo; 41 | }, 42 | islogined(){ 43 | var status = localStorage.getItem(state.isloginStorageKey); 44 | if(state.islogined !==status){ 45 | state.islogined = status; 46 | } 47 | return status; 48 | } 49 | } 50 | 51 | export default { 52 | state,mutations,actions,getters 53 | }; -------------------------------------------------------------------------------- /src/components/site/goods/successpay.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 43 | 44 | -------------------------------------------------------------------------------- /src/components/site/down/list.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 46 | 47 | -------------------------------------------------------------------------------- /src/components/site/common/list.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 46 | 47 | -------------------------------------------------------------------------------- /src/components/site/point/list.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 46 | 47 | -------------------------------------------------------------------------------- /src/components/site/question/list.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 46 | 47 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cssloader", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server --inline --hot --open --port 5009", 8 | "dist": "webpack -p --progress" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "babel-core": "^6.24.0", 14 | "babel-helper-vue-jsx-merge-props": "^2.0.2", 15 | "babel-loader": "^6.4.1", 16 | "babel-plugin-component": "^0.10.0", 17 | "babel-plugin-syntax-jsx": "^6.18.0", 18 | "babel-plugin-transform-runtime": "^6.23.0", 19 | "babel-plugin-transform-vue-jsx": "^3.5.0", 20 | "babel-preset-es2015": "^6.24.1", 21 | "css-loader": "^0.28.7", 22 | "extract-text-webpack-plugin": "^3.0.0", 23 | "file-loader": "^0.11.1", 24 | "html-webpack-plugin": "^2.28.0", 25 | "less": "^2.7.2", 26 | "less-loader": "^4.0.3", 27 | "node-sass": "^4.5.2", 28 | "sass-loader": "^6.0.3", 29 | "style-loader": "^0.16.1", 30 | "url-loader": "^0.5.8", 31 | "vue-loader": "^11.3.4", 32 | "vue-template-compiler": "^2.2.6", 33 | "webpack": "^3.4.0", 34 | "webpack-dev-server": "^2.6.1" 35 | }, 36 | "dependencies": { 37 | "axios": "^0.16.2", 38 | "element-ui": "^1.4.4", 39 | "iview": "^2.3.2", 40 | "jquery": "^3.2.1", 41 | "v-distpicker": "^1.0.8", 42 | "vue": "^2.2.6", 43 | "vue-router": "^2.3.1", 44 | "vuex": "^2.4.0" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /statics/site/css/icon/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('iconfont.eot?t=1496954256369'); /* IE9*/ 4 | src: url('iconfont.eot?t=1496954256369#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('iconfont.woff?t=1496954256369') format('woff'), /* chrome, firefox */ 6 | url('iconfont.ttf?t=1496954256369') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg?t=1496954256369#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family:"iconfont" !important; 12 | font-size:16px; 13 | font-style:normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-error:before { content: "\e600"; } 19 | 20 | .icon-reply:before { content: "\e607"; } 21 | 22 | .icon-cart:before { content: "\e601"; } 23 | 24 | .icon-plus:before { content: "\e676"; } 25 | 26 | .icon-play:before { content: "\e602"; } 27 | 28 | .icon-phone:before { content: "\e603"; } 29 | 30 | .icon-user-full:before { content: "\e6ce"; } 31 | 32 | .icon-user:before { content: "\e6f5"; } 33 | 34 | .icon-close:before { content: "\e659"; } 35 | 36 | .icon-check:before { content: "\e61f"; } 37 | 38 | .icon-view:before { content: "\e61b"; } 39 | 40 | .icon-date:before { content: "\e721"; } 41 | 42 | .icon-top-label:before { content: "\e60d"; } 43 | 44 | .icon-order:before { content: "\e62a"; } 45 | 46 | .icon-comment:before { content: "\e7e9"; } 47 | 48 | .icon-search:before { content: "\e629"; } 49 | 50 | .icon-right-label:before { content: "\e628"; } 51 | 52 | .icon-point:before { content: "\e606"; } 53 | 54 | .icon-arrow-left:before { content: "\e604"; } 55 | 56 | .icon-attach:before { content: "\e644"; } 57 | 58 | .icon-down:before { content: "\e87a"; } 59 | 60 | .icon-tip:before { content: "\e605"; } 61 | 62 | .icon-amount:before { content: "\e6a0"; } 63 | 64 | .icon-arrow-right:before { content: "\e87b"; } 65 | 66 | -------------------------------------------------------------------------------- /src/components/pay.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 59 | 60 | -------------------------------------------------------------------------------- /statics/css/site.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | margin: 0px; 4 | padding: 0px; 5 | } 6 | 7 | body{ 8 | background-color: white; 9 | } 10 | 11 | .el-menu{ 12 | background-color: #267cb7; 13 | top:-2px; 14 | } 15 | /*.upload-demo{ 16 | max-height: 200px; 17 | overflow-y: auto; 18 | }*/ 19 | .el-submenu .el-menu-item,.el-menu-item, .el-submenu__title{ 20 | height: 40px; 21 | line-height: 40px; 22 | } 23 | /*layout.vue布局相关begin*/ 24 | .el-col-4 { 25 | width: 13.3%; 26 | } 27 | 28 | .el-col-20 { 29 | width: 86.7%; 30 | } 31 | 32 | .area{ 33 | border-right:1px solid #eee; 34 | line-height: 40px; 35 | color:#686f7f; 36 | } 37 | 38 | .hand{ 39 | cursor: pointer; 40 | } 41 | 42 | .lineleft{ 43 | border-left:1px solid #eee; 44 | } 45 | 46 | .topbg{ 47 | height: 42px; 48 | background-color: #fafafa; 49 | border-bottom:1px solid #eee; 50 | line-height: 42px; 51 | text-align: right; 52 | padding-right: 10px; 53 | color:#686f7f; 54 | } 55 | 56 | .layout.menu{ 57 | min-height: 570px; 58 | background-color: #267cb7; 59 | margin-top: -2px; 60 | } 61 | /*展开和收缩菜单按钮图标*/ 62 | .layout.el-icon-menu{ 63 | display: block; 64 | width: 40px; 65 | text-align: center; 66 | cursor: pointer; 67 | } 68 | .el-menu-item-group__title{ 69 | padding-top: 0px; 70 | } 71 | 72 | .router-link-exact-active li,li.el-menu-item.is-active { 73 | background-color: #20a0ff; 74 | } 75 | a{ 76 | text-decoration: none; 77 | } 78 | .el-dropdown-menu a{ 79 | color: #20a0ff; 80 | } 81 | 82 | /*layout.vue布局相关end*/ 83 | 84 | /*列表页面开始*/ 85 | 86 | .arttmpl{ 87 | margin:10px 10px 0 10px; 88 | } 89 | 90 | .arttmpl .operation{ 91 | padding: 5px; 92 | border-bottom: 1px solid #eee; 93 | margin-top: 2px; 94 | margin-bottom: 5px; 95 | line-height: 40px; 96 | } 97 | 98 | .bt-line{ 99 | border-bottom:solid 1px #eee; 100 | 101 | } 102 | 103 | .el-button.artlist.el-button--primary{ 104 | color:fff; 105 | } 106 | 107 | .operation .el-col.el-col-20 button{ 108 | vertical-align: middle; 109 | } 110 | 111 | .page{ 112 | margin-top: 10px; 113 | } 114 | /*列表页面结束*/ 115 | /*登录页面*/ 116 | .accounttmpl .el-form-item__label{ 117 | color:#ffffff; 118 | } 119 | 120 | /*滚动条*/ 121 | .easy-scrollbar{ 122 | width: 400px; 123 | } 124 | .el-upload-list.el-upload-list--picture{ 125 | margin-right: 10px; 126 | } 127 | -------------------------------------------------------------------------------- /src/components/site/subcom/categroupcontent.vue: -------------------------------------------------------------------------------- 1 | 54 | 55 | 63 | -------------------------------------------------------------------------------- /src/components/site/subcom/inputnumber.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 59 | -------------------------------------------------------------------------------- /README.MD: -------------------------------------------------------------------------------- 1 | # 测试地址 2 | 3 | [点击在线访问][] 4 | 5 | ## 一、运行这个项目的步骤： 6 | - 先在这个文件夹中打开cmd面板，输入 npm install 7 | - 在cmd面板中执行 npm run dev 8 | 9 | ``` 10 | 11 | 当前webpack要升级到2.x，那么webpack-dev-server也必须使和webpack2.x匹配的，理论上讲 12 | webpack-dev-server肯定也是2.x版本 13 | 14 | ``` 15 | 16 | ## 二、update 版本 17 | 18 | - v2:实现除了购物商城之外的页面列表组件 19 | 20 | ``` 21 | 1、subcom中的 categroupcontent.vue 和 contentsildtophot.vue 22 | 两个组件负责展示除了购物商城页面之外的其他菜单页面中的所有数据 23 | 24 | 2、layout.vue中实现了路由切换组件时的动画，组件动画效果的写法 25 | 26 | ``` 27 | 28 | 29 | - v3:完成商品列表，分类菜单，轮播图，置顶数据获取和根据一级分类分组获取商品数据 30 | 31 | - v4:实现商品分类搜索页面分页数据展示，以及分页功能的实现 32 | 33 | - v5:完成goodsinfo.vue中集成商品图片放大jquery插件，实现商品相册图片放大查看（有bug，必须刷新goodsinfo页面才会初始化图片） 34 | 35 | - v6:修复goodsinfo页面必须刷新页面才会初始化商品图片放大功bug 36 | 37 | ``` 38 | 主要原因是：vue渲染页面需要时间，那么jquery插件初始化一定要等到vue页面渲染完毕，可以将jquery插件初始化代码方到 39 | setTimeout(()=>{ 40 | $(this.$refs.zoom1).imgzoon({magnifier:'#magnifier1'}); 41 | },100);中 42 | 43 | 或者 44 | this.$nextTick(()=>{ 45 | $(this.$refs.zoom1).imgzoon({magnifier:'#magnifier1'}); 46 | },10); 中 47 | 48 | ``` 49 | 50 | - v7:完成商品详情页面中的评论提交和分页获取评论数据功能开发，其中利用 iview中的Affix实现滚动时tab栏固定在顶部 51 | 52 | - v8:完成购物车页面功能的开发 53 | 54 | ``` 55 | 使用vuex结合localStorage管理购物车数据 56 | 57 | ``` 58 | 59 | - v9:购物页面shopping.vue功能实现 60 | 61 | ``` 62 | 利用 v-distpicker 完成购物页面上的省市区联动控件 63 | https://distpicker.iline.co/ 64 | 65 | ``` 66 | 67 | - v10:完成订单页面api开发，下订单，获取购买商品数据 68 | 69 | - v11:完成支付二维码生成，支付页面pay.vue的开发 70 | 71 | ``` 72 | 二维码使用了vue插件：vue-qart 73 | 使用网址：https://www.npmjs.com/package/vue-qart 74 | ``` 75 | 76 | - v13:用jquery二维码插件jqueryqr.js替换vue-qart达到打包体积的大幅度缩小 77 | 78 | ``` 79 | jquery二维码插件： http://www.jq22.com/jquery-info4094 80 | 81 | ``` 82 | 83 | - v14:完成网站会员注册，登录，会员中心的我的订单列表，订单明细，订单取消功能，vuex登录状态管理 84 | 85 | - v15:完成签收功能 86 | 87 | ## 三、填坑 88 | 89 | ``` 90 | 验证： 91 | 非空验证必须是字符串类型 92 | payment_id: [ 93 | { required: true, message: '请选择支付方式', trigger: 'change' } 94 | ] 95 | 正确写法： 96 | 97 | 98 | 货到付款 99 | 在线支付 100 | 101 | 102 | 103 | 错误写法： 104 | 105 | 106 | 货到付款 107 | 在线支付 108 | 109 | 110 | 111 | 由于:label="1" 表示一个数字，非空验证不生效，label="1"是字符串类型，非空验证才生效 112 | 113 | ``` 114 | 115 | [测试地址]: http://157.122.54.189:9092/admin/#/admin/login 116 | [点击在线访问]: http://157.122.54.189:9092/site/#/site/goods/list "点击在线访问" -------------------------------------------------------------------------------- /statics/mui/css/icons-extra.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: MuiiconSpread; 3 | font-weight: normal; 4 | font-style: normal; 5 | src: url('../fonts/mui-icons-extra.ttf') format('truetype'); /* iOS 4.1- */ 6 | } 7 | .mui-icon-extra 8 | { 9 | font-family: MuiiconSpread; 10 | font-size: 24px; 11 | font-weight: normal; 12 | font-style: normal; 13 | line-height: 1; 14 | display: inline-block; 15 | text-decoration: none; 16 | -webkit-font-smoothing: antialiased; 17 | } 18 | .mui-icon-extra-cold:before { content: "\e500"; } 19 | .mui-icon-extra-share:before { content: "\e200"; } 20 | .mui-icon-extra-class:before { content: "\e118"; } 21 | .mui-icon-extra-custom:before { content: "\e117"; } 22 | .mui-icon-extra-new:before { content: "\e103"; } 23 | .mui-icon-extra-card:before { content: "\e104"; } 24 | .mui-icon-extra-grech:before { content: "\e105"; } 25 | .mui-icon-extra-trend:before { content: "\e106"; } 26 | .mui-icon-extra-filter:before { content: "\e207"; } 27 | .mui-icon-extra-holiday:before { content: "\e300"; } 28 | .mui-icon-extra-cart:before { content: "\e107"; } 29 | .mui-icon-extra-heart:before { content: "\e180"; } 30 | .mui-icon-extra-computer:before { content: "\e600"; } 31 | .mui-icon-extra-express:before { content: "\e108"; } 32 | .mui-icon-extra-gift:before { content: "\e109"; } 33 | .mui-icon-extra-gold:before { content: "\e102"; } 34 | .mui-icon-extra-lamp:before { content: "\e601"; } 35 | .mui-icon-extra-rank:before { content: "\e110"; } 36 | .mui-icon-extra-notice:before { content: "\e111"; } 37 | .mui-icon-extra-sweep:before { content: "\e202"; } 38 | .mui-icon-extra-arrowleftcricle:before { content: "\e401"; } 39 | .mui-icon-extra-dictionary:before { content: "\e602"; } 40 | .mui-icon-extra-heart-filled:before { content: "\e119"; } 41 | .mui-icon-extra-xiaoshuo:before { content: "\e607"; } 42 | .mui-icon-extra-top:before { content: "\e403"; } 43 | .mui-icon-extra-people:before { content: "\e203"; } 44 | .mui-icon-extra-topic:before { content: "\e603"; } 45 | .mui-icon-extra-hotel:before { content: "\e301"; } 46 | .mui-icon-extra-like:before { content: "\e206"; } 47 | .mui-icon-extra-regist:before { content: "\e201"; } 48 | .mui-icon-extra-order:before { content: "\e113"; } 49 | .mui-icon-extra-alipay:before { content: "\e114"; } 50 | .mui-icon-extra-find:before { content: "\e400"; } 51 | .mui-icon-extra-arrowrightcricle:before { content: "\e402"; } 52 | .mui-icon-extra-calendar:before { content: "\e115"; } 53 | .mui-icon-extra-prech:before { content: "\e116"; } 54 | .mui-icon-extra-cate:before { content: "\e501"; } 55 | .mui-icon-extra-comment:before { content: "\e209"; } 56 | .mui-icon-extra-at:before { content: "\e208"; } 57 | .mui-icon-extra-addpeople:before { content: "\e204"; } 58 | .mui-icon-extra-peoples:before { content: "\e205"; } 59 | .mui-icon-extra-calc:before { content: "\e101"; } 60 | .mui-icon-extra-classroom:before { content: "\e604"; } 61 | .mui-icon-extra-phone:before { content: "\e404"; } 62 | .mui-icon-extra-university:before { content: "\e605"; } 63 | .mui-icon-extra-outline:before { content: "\e606"; } 64 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var htmlwp = require('html-webpack-plugin'); 2 | var webpack = require('webpack'); 3 | var path = require('path'); 4 | 5 | //分离css，此组件能将所有import的css文件打包到一个css中 6 | var ExtractTextPlugin = require("extract-text-webpack-plugin"); 7 | 8 | module.exports={ 9 | entry:{ 10 | build:'./src/main.js',// build 可以随意写 11 | vendor1:['vue','axios','vue-router','vuex'], //vue相关的打包到vendor1中 12 | vendor2:['element-ui'], //UI组件 相关的打包到vendor2中 13 | // vendor3:[], 14 | vendor4:['jquery'], 15 | vendor5:['v-distpicker'] 16 | }, //指定打包的入口文件 17 | output:{ 18 | path : __dirname+'/dist', // 注意：webpack1.14.0 要求这个路径是一个绝对路径 19 | // filename:'build.js' 20 | filename: "[name].js", 21 | publicPath: '' 22 | }, 23 | resolve: { 24 | extensions: ['.js', '.vue'], 25 | alias: { 26 | // webpack 使用 jQuery，如果是自行下载的 27 | // 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'), 28 | // 如果使用NPM安装的jQuery 29 | 'jquery': 'jquery' 30 | } 31 | }, 32 | module:{ 33 | loaders:[ 34 | { 35 | test: /\.css$/, //打包 .css文件 36 | // loader: 'style-loader!css-loader' 37 | // 注意：webpack3.0的用法是 loader:ExtractTextPlugin.extract({fallback: "style-loader", use: "css-loader"}) 38 | // webpack 2.0和1.0的用法是： loader:ExtractTextPlugin.extract("style-loader", "css-loader") 39 | loader:ExtractTextPlugin.extract({fallback: "style-loader", use: "css-loader"}) 40 | }, 41 | { 42 | test: /\.scss$/, //打包 .scss文件 43 | loader:'style-loader!css-loader!sass-loader' 44 | }, 45 | { 46 | test: /\.less/, //打包 .less文件 47 | loader:'style-loader!css-loader!less-loader' 48 | } 49 | , 50 | { 51 | test: /\.(png|jpg|gif|eot|svg|ttf|woff|woff2)$/, //打包 url请求的资源文件 52 | loader:'url-loader?limit=20000' //limit表示图片的大小为20K是临界值，小于20K的图片均被打包到build.js中去，请求图片就会很快 53 | }, 54 | // { 55 | // test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, 56 | // loader: 'file-loader' 57 | // }, 58 | { test: /iview.src.*?js$/, //按需引入iview 59 | loader: 'babel-loader' 60 | }, 61 | { 62 | test: /\.js$/, // 将.js文件中的es6语法转成es5语法 63 | loader:'babel-loader', 64 | exclude:/node_modules/ 65 | }, 66 | { 67 | test: /.vue$/, // 解析 .vue 组件页面文件 68 | loader:'vue-loader' // 69 | } 70 | ] 71 | }, 72 | // 由于webpack2.0和3.0本身已经支持es6转es5语法了，所以这个地方的配置是可以删除掉了 73 | // babel:{ 74 | // presets:['es2015'], // 配置将es6语法转换成es5语法 75 | // plugins:['transform-runtime'] 76 | // }, 77 | plugins:[ 78 | new htmlwp({ 79 | title: '首页', //生成的页面标题首页 80 | filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能 81 | template: 'index1.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成) 82 | }), 83 | new webpack.ProvidePlugin({ 84 | $: "jquery", 85 | jQuery: "jquery" 86 | }), 87 | // 代码压缩 88 | new webpack.optimize.UglifyJsPlugin({ 89 | compress: { 90 | warnings: false 91 | } 92 | }), 93 | new webpack.optimize.CommonsChunkPlugin({ 94 | // 这里写的时候要和定义的时候相反，也就是定义的时候是先定义vendor1，那么在使用的时候就要后使用vendor1 95 | names: ['vendor5','vendor4','vendor2','vendor1'] 96 | }), 97 | new ExtractTextPlugin("site.css"), //打包完成后最终输出一个名称叫做site.css的文件到dist中 98 | ] 99 | } -------------------------------------------------------------------------------- /src/components/site/account/login.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 96 | 97 | -------------------------------------------------------------------------------- /src/components/site/subcom/contentsildtophot.vue: -------------------------------------------------------------------------------- 1 | 65 | 66 | 94 | 95 | -------------------------------------------------------------------------------- /src/stores/shopcar/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // 购物车状态管理 3 | 4 | //状态 5 | const state = { 6 | // 1 枚举 7 | //1.1 增加商品 8 | addGoodsFlag : 'addGoods', 9 | updateGoodsFlag : 'updateGoods', 10 | removeGoodsFlag : 'removeGoods', 11 | storageKey : 'storageKey', 12 | //2 具体值 13 | // 加入购物车的商品列表 14 | /* 15 | cargoods 格式： 16 | { 17 | goodsID:商品id, 18 | buyCount:购买数量 19 | } 20 | */ 21 | carGoodsObj : {}, 22 | goodslist:[], 23 | // goodsidList:[] //在购物车中选中的商品id 24 | } 25 | 26 | function hashkey(obj){ 27 | var hskey = false; 28 | for(let key in obj){ 29 | hskey = true; 30 | break; 31 | } 32 | return hskey; 33 | } 34 | 35 | const mutations = { 36 | // 添加商品到购物车 37 | addGoods(state,cardataobj){ 38 | // 如果存在当前商品，则加值 39 | 40 | if(!hashkey(state.carGoodsObj)){ 41 | state.carGoodsObj = JSON.parse(localStorage.getItem(state.storageKey)) || {}; 42 | } 43 | 44 | if(state.carGoodsObj[cardataobj.goodsID]){ 45 | state.carGoodsObj[cardataobj.goodsID] = state.carGoodsObj[cardataobj.goodsID] + cardataobj.buyCount; 46 | 47 | }else{ 48 | // 如果商品在购买的商品中不存在，则加入 49 | state.carGoodsObj[cardataobj.goodsID] = cardataobj.buyCount; 50 | } 51 | state.goodslist.push(cardataobj); 52 | state.goodslist.pop(); 53 | 54 | localStorage.setItem(state.storageKey,JSON.stringify(state.carGoodsObj)); 55 | }, 56 | 57 | // 修改购物车中购买的商品数量 58 | updateGoods(state,cardataobj){ 59 | if(!hashkey(state.carGoodsObj)){ 60 | state.carGoodsObj = JSON.parse(localStorage.getItem(state.storageKey)) || {}; 61 | } 62 | 63 | if(state.carGoodsObj[cardataobj.goodsID]){ 64 | state.carGoodsObj[cardataobj.goodsID] += cardataobj.buyCount; 65 | 66 | localStorage.setItem(state.storageKey,JSON.stringify(state.carGoodsObj)); 67 | } 68 | state.goodslist.push(cardataobj); 69 | state.goodslist.pop(); 70 | }, 71 | 72 | // 删除购物车中的商品 73 | removeGoods(state,cardataobj){ 74 | if(!hashkey(state.carGoodsObj)){ 75 | state.carGoodsObj = JSON.parse(localStorage.getItem(state.storageKey)) || {}; 76 | } 77 | 78 | if(state.carGoodsObj[cardataobj.goodsID]){ 79 | delete state.carGoodsObj[cardataobj.goodsID]; 80 | localStorage.setItem(state.storageKey,JSON.stringify(state.carGoodsObj)); 81 | } 82 | state.goodslist.push(cardataobj); 83 | state.goodslist.pop(); 84 | } 85 | } 86 | 87 | const actions = { 88 | addGoods({commit},cardataobj){ 89 | commit(state.addGoodsFlag,cardataobj); 90 | }, 91 | updateGoods({commit},cardataobj){ 92 | commit(state.updateGoodsFlag,cardataobj); 93 | }, 94 | removeGoods({commit},cardataobj){ 95 | commit(state.removeGoodsFlag,cardataobj); 96 | } 97 | } 98 | 99 | /* 注意：在调用的时候请使用属性方式调用 100 | 正确： 101 | this.$store.getters.getCarGoodsCount 102 | 错误： 103 | this.$store.getters.getCarGoodsCount(); 104 | 105 | 注意！注意！注意！ 106 | getters中的方法类似于计算属性，一定要 依赖于goodslist，当goodslist发生改变才会被触发计算 107 | */ 108 | const getters = { 109 | getgoodsids:state => { 110 | // 类似于计算属性， 依赖于goodslist，当goodslist发生改变才会被触发计算 111 | var arr = state.goodslist; 112 | var obj = JSON.parse(localStorage.getItem(state.storageKey)) || {}; 113 | // if(!obj) 114 | // { 115 | // obj = JSON.parse(localStorage.getItem(state.storageKey)) || {}; 116 | // } 117 | 118 | var ids = "0,"; 119 | for(let key in obj){ 120 | ids+=key+","; 121 | } 122 | 123 | return ids+'0'; 124 | }, 125 | getCarGoods:state => { 126 | // 类似于计算属性， 依赖于goodslist，当goodslist发生改变才会被触发计算 127 | var arr = state.goodslist; 128 | var obj = JSON.parse(localStorage.getItem(state.storageKey)) || {}; 129 | // if(!obj) 130 | // { 131 | // obj = JSON.parse(localStorage.getItem(state.storageKey)) || {}; 132 | // } 133 | return obj; 134 | }, 135 | getCarGoodsCount:state => { 136 | // 注意：========》类似于计算属性， 依赖于goodslist，当goodslist发生改变才会被触发计算 137 | var arr = state.goodslist; 138 | let count = 0; 139 | var obj = JSON.parse(localStorage.getItem(state.storageKey)) || {}; 140 | // if(!obj) 141 | // { 142 | // obj = JSON.parse(localStorage.getItem(state.storageKey)) || {}; 143 | // } 144 | 145 | for(let key in obj){ 146 | count+=obj[key]; 147 | } 148 | return count; 149 | } 150 | } 151 | 152 | export default { 153 | state,mutations,actions,getters 154 | }; -------------------------------------------------------------------------------- /statics/site/css/flexslider.css: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery FlexSlider v2.2.0 3 | * http://www.woothemes.com/flexslider/ 4 | * 5 | * Copyright 2012 WooThemes 6 | * Free to use under the GPLv2 license. 7 | * http://www.gnu.org/licenses/gpl-2.0.html 8 | * 9 | * Contributing author: Tyler Smith (@mbmufffin) 10 | */ 11 | 12 | 13 | /* Browser Resets 14 | *********************************/ 15 | .flex-container a:active, 16 | .flexslider a:active, 17 | .flex-container a:focus, 18 | .flexslider a:focus {outline: none;} 19 | .slides, 20 | .flex-control-nav, 21 | .flex-direction-nav {margin: 0; padding: 0; list-style: none;} 22 | 23 | /* Icon Fonts 24 | *********************************/ 25 | /* Font-face Icons */ 26 | @font-face { 27 | font-family: 'flexslider-icon'; 28 | src:url('fonts/flexslider-icon.eot'); 29 | src:url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), 30 | url('fonts/flexslider-icon.woff') format('woff'), 31 | url('fonts/flexslider-icon.ttf') format('truetype'), 32 | url('fonts/flexslider-icon.svg#flexslider-icon') format('svg'); 33 | font-weight: normal; 34 | font-style: normal; 35 | } 36 | 37 | /* FlexSlider Necessary Styles 38 | *********************************/ 39 | .flexslider {margin: 0; padding: 0;} 40 | .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ 41 | .flexslider .slides img {width: 100%; display: block;} 42 | .flex-pauseplay span {text-transform: capitalize;} 43 | 44 | /* Clearfix for the .slides element */ 45 | .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 46 | html[xmlns] .slides {display: block;} 47 | * html .slides {height: 1%;} 48 | 49 | /* No JavaScript Fallback */ 50 | /* If you are not using another script, such as Modernizr, make sure you 51 | * include js that eliminates this class on page load */ 52 | .no-js .slides > li:first-child {display: block;} 53 | 54 | /* FlexSlider Default Theme 55 | *********************************/ 56 | .flexslider { margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; } 57 | .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } 58 | .loading .flex-viewport { max-height: 300px; } 59 | .flexslider .slides { zoom: 1; } 60 | .carousel li { margin-right: 5px; } 61 | 62 | /* Direction Nav */ 63 | .flex-direction-nav {*height: 0;} 64 | .flex-direction-nav a { text-decoration:none; display: block; width: 40px; height: 40px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; } 65 | .flex-direction-nav .flex-prev { left: -50px; } 66 | .flex-direction-nav .flex-next { right: -50px; text-align: right; } 67 | .flexslider:hover .flex-prev { opacity: 0.7; left: 10px; } 68 | .flexslider:hover .flex-next { opacity: 0.7; right: 10px; } 69 | .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; } 70 | .flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; } 71 | .flex-direction-nav a:before { font-family: "flexslider-icon"; font-size: 40px; line-height:1; display: inline-block; content: '\f001'; } 72 | .flex-direction-nav a.flex-next:before { content: '\f002'; } 73 | 74 | /* Pause/Play */ 75 | .flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; } 76 | .flex-pauseplay a:before { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; } 77 | .flex-pauseplay a:hover { opacity: 1; } 78 | .flex-pauseplay a.flex-play:before { content: '\f003'; } 79 | 80 | /* Control Nav */ 81 | .flex-control-nav {width: 100%; position: absolute; bottom: 10px; text-align: center; z-index:2;} 82 | .flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;} 83 | .flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); } 84 | .flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); } 85 | .flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; } 86 | 87 | .flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;} 88 | .flex-control-thumbs li {width: 25%; float: left; margin: 0;} 89 | .flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;} 90 | .flex-control-thumbs img:hover {opacity: 1;} 91 | .flex-control-thumbs .flex-active {opacity: 1; cursor: default;} 92 | 93 | @media screen and (max-width: 860px) { 94 | .flex-direction-nav .flex-prev { opacity: 1; left: 10px;} 95 | .flex-direction-nav .flex-next { opacity: 1; right: 10px;} 96 | } 97 | -------------------------------------------------------------------------------- /src/components/site/goods/goodsmore.vue: -------------------------------------------------------------------------------- 1 | 69 | 70 | 129 | 130 | -------------------------------------------------------------------------------- /src/components/site/member/center.vue: -------------------------------------------------------------------------------- 1 | 116 | 117 | 132 | 133 | -------------------------------------------------------------------------------- /src/components/site/goods/payment.vue: -------------------------------------------------------------------------------- 1 | 86 | 87 | 159 | 160 | -------------------------------------------------------------------------------- /statics/site/css/viewer.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Viewer.js v0.3.1 3 | * https://github.com/fengyuanchen/viewerjs 4 | * 5 | * Copyright (c) 2015-2016 Fengyuan Chen 6 | * Released under the MIT license 7 | * 8 | * Date: 2016-02-02T11:35:36.273Z 9 | */.viewer-container,.viewer-navbar{background-color:#000;overflow:hidden}.viewer-canvas,.viewer-container,.viewer-footer,.viewer-player{right:0;bottom:0;left:0}.viewer-button,.viewer-canvas,.viewer-container,.viewer-footer,.viewer-list,.viewer-navbar,.viewer-open,.viewer-title,.viewer-toolbar,.viewer-toolbar>li{overflow:hidden}.viewer-close:before,.viewer-flip-horizontal:before,.viewer-flip-vertical:before,.viewer-fullscreen-exit:before,.viewer-fullscreen:before,.viewer-next:before,.viewer-one-to-one:before,.viewer-play:before,.viewer-prev:before,.viewer-reset:before,.viewer-rotate-left:before,.viewer-rotate-right:before,.viewer-zoom-in:before,.viewer-zoom-out:before{font-size:0;line-height:0;display:block;width:20px;height:20px;color:transparent;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC);background-repeat:no-repeat}.viewer-zoom-in:before{content:'Zoom In';background-position:0 0}.viewer-zoom-out:before{content:'Zoom Out';background-position:-20px 0}.viewer-one-to-one:before{content:'One to One';background-position:-40px 0}.viewer-reset:before{content:'Reset';background-position:-60px 0}.viewer-prev:before{content:'Previous';background-position:-80px 0}.viewer-play:before{content:'Play';background-position:-100px 0}.viewer-next:before{content:'Next';background-position:-120px 0}.viewer-rotate-left:before{content:'Rotate Left';background-position:-140px 0}.viewer-rotate-right:before{content:'Rotate Right';background-position:-160px 0}.viewer-flip-horizontal:before{content:'Flip Horizontal';background-position:-180px 0}.viewer-flip-vertical:before{content:'Flip Vertical';background-position:-200px 0}.viewer-fullscreen:before{content:'Enter Full Screen';background-position:-220px 0}.viewer-fullscreen-exit:before{content:'Exit Full Screen';background-position:-240px 0}.viewer-close:before{content:'Close';background-position:-260px 0}.viewer-container{font-size:0;line-height:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:rgba(0,0,0,.5);direction:ltr!important;-ms-touch-action:none;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.viewer-container ::-moz-selection,.viewer-container::-moz-selection{background-color:transparent}.viewer-container ::selection,.viewer-container::selection{background-color:transparent}.viewer-container img{display:block;width:100%;min-width:0!important;max-width:none!important;height:auto;min-height:0!important;max-height:none!important}.viewer-player,.viewer-tooltip{display:none;position:absolute}.viewer-canvas{position:absolute;top:0}.viewer-canvas>img{width:auto;max-width:90%!important;height:auto;margin:15px auto}.viewer-footer{position:absolute;text-align:center}.viewer-navbar{background-color:rgba(0,0,0,.5)}.viewer-list{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:50px;margin:0;padding:1px 0}.viewer-list>li{font-size:0;line-height:0;float:left;overflow:hidden;width:30px;height:50px;cursor:pointer;opacity:.5;color:transparent;filter:alpha(opacity=50)}.viewer-list>li+li{margin-left:1px}.viewer-list>.viewer-active{opacity:1;filter:alpha(opacity=100)}.viewer-player{top:0;cursor:none;background-color:#000}.viewer-player>img{position:absolute;top:0;left:0}.viewer-toolbar{width:280px;margin:0 auto 5px;padding:3px 0}.viewer-toolbar>li{float:left;width:24px;height:24px;cursor:pointer;border-radius:50%;background-color:#000;background-color:rgba(0,0,0,.5)}.viewer-toolbar>li:hover{background-color:#000;background-color:rgba(0,0,0,.8)}.viewer-toolbar>li:before{margin:2px}.viewer-toolbar>li+li{margin-left:1px}.viewer-toolbar>.viewer-play{width:30px;height:30px;margin-top:-3px;margin-bottom:-3px}.viewer-toolbar>.viewer-play:before{margin:5px}.viewer-tooltip{font-size:12px;line-height:20px;top:50%;left:50%;width:50px;height:20px;margin-top:-10px;margin-left:-25px;text-align:center;color:#fff;border-radius:10px;background-color:#000;background-color:rgba(0,0,0,.8)}.viewer-title{font-size:12px;line-height:1;display:inline-block;max-width:90%;margin:0 5% 5px;white-space:nowrap;text-overflow:ellipsis;opacity:.8;color:#ccc;filter:alpha(opacity=80)}.viewer-title:hover{opacity:1;filter:alpha(opacity=100)}.viewer-button{position:absolute;top:-40px;right:-40px;width:80px;height:80px;cursor:pointer;border-radius:50%;background-color:#000;background-color:rgba(0,0,0,.5)}.viewer-button:before{position:absolute;bottom:15px;left:15px}.viewer-fixed{position:fixed}.viewer-show{display:block}.viewer-hide{display:none}.viewer-invisible{visibility:hidden}.viewer-move{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.viewer-fade{opacity:0;filter:alpha(opacity=0)}.viewer-in{opacity:1;filter:alpha(opacity=100)}.viewer-transition{-webkit-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}@media (max-width:767px){.viewer-hide-xs-down{display:none}}@media (max-width:991px){.viewer-hide-sm-down{display:none}}@media (max-width:1199px){.viewer-hide-md-down{display:none}} -------------------------------------------------------------------------------- /statics/site/js/magnifier.js: -------------------------------------------------------------------------------- 1 | (function($){ 2 | 3 | var fnName = 'magnifier'; 4 | var magnifier = { 5 | magnifier : ".magnifier",//最外层的大容器 6 | 7 | container : ".magnifier-container",//选择当前主图的承载容器 8 | 9 | containerImg : '.images-cover',//图片的容器 10 | 11 | view : ".magnifier-view",//图片放大后承载容器 12 | 13 | width : 368,//图片放大后承载容器宽度 14 | 15 | height : 368,//图片放大后承载容器高度 16 | 17 | moveView : ".move-view",//跟随鼠标移动的容器 18 | 19 | moveWidth : null,//如果设置了移动盒子的宽度，则不计算缩放比例 20 | 21 | zoom : 3,//缩放比例 22 | 23 | thumbnail : ".magnifier-line > ul",//缩略图容器 24 | 25 | assembly : ".magnifier-btn",//按钮组 26 | 27 | index : 0//当前图片的索引 28 | }; 29 | 30 | 31 | $.fn.imgzoon = function(magnifierAttr){ 32 | 33 | //设置属性值 34 | if(typeof(magnifierAttr) == "object"){ 35 | 36 | for( var n in magnifierAttr){ 37 | 38 | magnifier[n] = magnifierAttr[n]; 39 | } 40 | } 41 | 42 | var _this = {}; 43 | //绑定容器 44 | 45 | _this.magnifier = $(magnifier.magnifier); 46 | _this.container = _this.magnifier.find(magnifier.container); 47 | _this.view = _this.magnifier.find(magnifier.view); 48 | _this.moveView = _this.magnifier.find(magnifier.moveView); 49 | _this.thumbnail = _this.magnifier.find(magnifier.thumbnail); 50 | _this.assembly = _this.magnifier.find(magnifier.assembly); 51 | _this.containerImg = _this.magnifier.find(magnifier.containerImg); 52 | var imgBox = _this.containerImg; 53 | 54 | //設置寬高 55 | _this.magnifier.css({ 56 | "width" : magnifier.width 57 | }); 58 | _this.container.css({ 59 | "width" : magnifier.width, 60 | "height" : magnifier.height 61 | }); 62 | _this.view.css({ 63 | "width" : magnifier.width, 64 | "height" : magnifier.height 65 | }); 66 | 67 | var boxMoveViewWidth,boxMoveViewHeight; 68 | if(magnifier.moveWidth){ 69 | 70 | boxMoveViewWidth = magnifier.moveWidth; 71 | }else{ 72 | 73 | boxMoveViewWidth = magnifier.width/magnifier.zoom; 74 | } 75 | boxMoveViewHeight = boxMoveViewWidth; 76 | 77 | _this.moveView.css({ 78 | "width" : boxMoveViewWidth, 79 | "height" : boxMoveViewHeight 80 | }); 81 | 82 | //计算体积碰撞的变量 83 | var deviationXl, 84 | deviationXr, 85 | deviationYt, 86 | deviationYb, 87 | imgWidth, 88 | imgHieght, 89 | multiple; 90 | 91 | _this.eqImg = function(){ 92 | 93 | var img = new Image(), 94 | src = _this.thumbnail.find("img").eq(magnifier.index).attr('src'); 95 | 96 | console.log(_this.thumbnail.find("img")); 97 | img.src = src; 98 | 99 | //承载容器的宽高 100 | var containerWidth = magnifier.width; 101 | var containerHeight = magnifier.height; 102 | 103 | _this.thumbnail.find('>*').removeClass('active').eq(magnifier.index).addClass('active'); 104 | 105 | function imgLoadEnd(){ 106 | 107 | if(img.width == 0){ 108 | 109 | img.onload = imgLoadEnd; 110 | } 111 | 112 | var styleCss; 113 | if(img.width > img.height){ 114 | 115 | imgWidth = magnifier.width; 116 | imgHieght = img.height / (img.width / magnifier.width); 117 | // styleCss = "top:50%;margin-top:"+(-imgHieght/2)+"px"; 118 | }else{ 119 | 120 | imgWidth = img.width / (img.height / magnifier.width); 121 | imgHieght = magnifier.width; 122 | 123 | // styleCss = "left:50%;margin-left:"+(-imgWidth/2)+"px"; 124 | } 125 | 126 | imgBox.empty().append(''); 127 | 128 | //重新计算移动盒子与图片的倍数 129 | multiple = magnifier.width / boxMoveViewWidth; 130 | 131 | //容器加载图片 132 | _this.view.empty().append(''); 133 | 134 | //偏移量 135 | deviationXl = (magnifier.width - imgWidth) /2; 136 | deviationXr = magnifier.width - deviationXl - boxMoveViewWidth + 1;//这里额外+1的是要计算容器的左边框 137 | deviationYt = (magnifier.height - imgHieght) /2; 138 | deviationYb = magnifier.height - deviationYt - boxMoveViewHeight + 1;//这里额外+1的是要计算容器的上边框 139 | 140 | } 141 | 142 | imgLoadEnd(); 143 | } 144 | //完成后执行 145 | _this.eqImg(); 146 | 147 | _this.moveFn = function(e){ 148 | 149 | var X = (e.clientX-_this.magnifier.offset().left)-boxMoveViewWidth/2, 150 | Y = (e.clientY-_this.magnifier.offset().top + $(document).scrollTop())-boxMoveViewHeight/2; 151 | 152 | endX = (X > deviationXl) ? (X < deviationXr) ? X : deviationXr : deviationXl; 153 | endY = (Y > deviationYt) ? (Y < deviationYb) ? Y : deviationYb : deviationYt; 154 | 155 | //当Y轴超出容器 156 | endY = (endY > 0) ? (endY > (magnifier.width-boxMoveViewHeight)) ? (magnifier.height-boxMoveViewHeight) : endY : 0; 157 | _this.moveView.css({ 158 | 'left' : endX, 159 | 'top' : endY, 160 | 'display' : "block" 161 | }); 162 | 163 | positionX = (endX - (magnifier.width-imgWidth)/2)*multiple; 164 | positionY = (endY - (magnifier.height-imgHieght)/2)*multiple; 165 | 166 | _this.view.css({ 167 | 'display' : "block" 168 | }).find('img').css({ 169 | 'margin-left' : -positionX, 170 | 'margin-top' : -positionY 171 | }); 172 | } 173 | 174 | _this.container.on('mousemove',function(e){ 175 | 176 | _this.moveFn(e); 177 | 178 | }).on('mouseleave',function(){ 179 | 180 | _this.moveView.hide(); 181 | _this.view.hide(); 182 | }); 183 | 184 | var thumbnailImg = _this.thumbnail.find('>*'), 185 | lineLenght = thumbnailImg.length; 186 | _this.imgMove = function(_boole){ 187 | 188 | (_boole) ? magnifier.index++ : magnifier.index--; 189 | 190 | var _deviation = Math.ceil(magnifier.width / thumbnailImg.width() /2); 191 | if(lineLenght < _deviation){ 192 | return false; 193 | } 194 | 195 | (magnifier.index < 0) ? magnifier.index = 0 : (magnifier.index > lineLenght-_deviation) ? magnifier.index = lineLenght - _deviation : magnifier.index; 196 | 197 | var endLeft = (thumbnailImg.width() * magnifier.index) - thumbnailImg.width(); 198 | 199 | _this.thumbnail.css({ 200 | 201 | "left" : ((endLeft > 0) ? -endLeft : 0)+"px" 202 | }); 203 | } 204 | 205 | //按钮组动作 206 | _this.assembly.find(">*").on('click',function(){ 207 | 208 | _this.imgMove($(this).index()); 209 | }); 210 | 211 | thumbnailImg.on('click',function(){ 212 | 213 | magnifier.index = $(this).index(); 214 | 215 | //显示图片 216 | _this.eqImg(); 217 | 218 | //缩略图位置移动 219 | _this.imgMove(magnifier.index); 220 | }); 221 | 222 | _this.setIndex = function(n){ 223 | 224 | magnifier.index = (n) ? n : 0; 225 | } 226 | 227 | $.myimgzoomobj = _this; 228 | // return _this; 229 | } 230 | })(jQuery); -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // 1.0 导入vue核心包 2 | import Vue from 'vue'; 3 | // Vue.config.debug = true; 4 | // 导入axios来替代vue-resource进行ajax请求 5 | import axios from 'axios'; 6 | // 全局请求的基本url 7 | // Vue.prototype.dataAPI = axios.defaults.baseURL = 'http://139.199.192.48:6060'; 8 | // Vue.prototype.siteServer = 'http://139.199.192.48/vuermssite'; 9 | 10 | // Vue.prototype.dataAPI = axios.defaults.baseURL = 'http://127.0.0.1:8899'; 11 | // Vue.prototype.siteServer = 'http://127.0.0.1:5009'; 12 | 13 | Vue.prototype.dataAPI = axios.defaults.baseURL = 'http://157.122.54.189:9095'; 14 | Vue.prototype.siteServer = 'http://157.122.54.189:9092/vuermssite'; 15 | 16 | //post请求内容类型 17 | axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 18 | 19 | // withCredentials配置为true表示在ajax请求中携带cookie信息，默认是false 20 | axios.defaults.withCredentials = true; 21 | 22 | Vue.prototype.$http = axios; 23 | 24 | // 导入elementui 25 | import ElementUI from 'element-ui'; 26 | Vue.use(ElementUI); 27 | // import '../statics/theme_rms/index.css'; 28 | 29 | // 将iview中的图钉组件注册成全局组件 30 | import Affix from 'iview/src/components/affix'; 31 | Vue.component(Affix.name, Affix); 32 | 33 | // 美观的滚动条组件 34 | // import EasyScroll from 'easyscroll'; 35 | // Vue.use(EasyScroll); 36 | 37 | // 2.0 导入App.vue的vue对象 38 | import App from './App.vue'; 39 | 40 | // 导入网站前台组件 41 | import slayout from './components/site/slayout.vue'; 42 | 43 | // 导入功能组件 44 | import questionlist from './components/site/question/list.vue'; 45 | import pointlist from './components/site/point/list.vue'; 46 | import homelist from './components/site/home/list.vue'; 47 | import downlist from './components/site/down/list.vue'; 48 | import commonlist from './components/site/common/list.vue'; 49 | import goodslist from './components/site/goods/goodslist.vue'; 50 | import goodsmore from './components/site/goods/goodsmore.vue'; 51 | import goodsinfo from './components/site/goods/goodsinfo.vue'; 52 | import car from './components/site/goods/car.vue'; 53 | import shopping from './components/site/goods/shopping.vue'; 54 | import payment from './components/site/goods/payment.vue'; 55 | import pay from './components/pay.vue'; 56 | import successpay from './components/site/goods/successpay.vue'; 57 | 58 | // 登录注册 59 | import register from './components/site/account/register.vue'; 60 | import login from './components/site/account/login.vue'; 61 | 62 | // 会员中心 63 | import membercenter from './components/site/member/center.vue'; 64 | import orderlist from './components/site/member/orderlist.vue'; 65 | import orderinfo from './components/site/member/orderinfo.vue'; 66 | 67 | // 3.0 将vue-router集成到这个项目中来 68 | import vueRouter from 'vue-router'; 69 | // 3.0.1 将vueRouter对象绑定到Vue对象上 70 | Vue.use(vueRouter); 71 | 72 | import store from './stores/index.js'; 73 | 74 | // 3.0.2 定义路由规则 75 | var router = new vueRouter({ 76 | linkActiveClass: '', 77 | routes: [ 78 | // {name:'login',path:'/admin/login',component:login,meta:{nologin:true}}, //登录组件 79 | { path: '/', redirect: '/site/home/list' }, 80 | { name: 'pay', path: '/pay/:orderid/:totalamount', component: pay }, 81 | { 82 | path: '/site', 83 | component: slayout, 84 | children: [ 85 | // {name:'questionarticlelist',path:'questionarticlelist/',component:questionarticlelist, meta: { menuno:'1-1'}}, //TODO:注意 articlelist/ 后面写上 / 才生效 86 | { name: 'questionlist', path: 'question/list/', component: questionlist }, 87 | { name: 'pointlist', path: 'point/list/', component: pointlist }, 88 | { name: 'homelist', path: 'home/list/', component: homelist }, 89 | { name: 'downlist', path: 'down/list/', component: downlist }, 90 | { name: 'commonlist', path: 'common/list/', component: commonlist }, 91 | { name: 'goodslist', path: 'goods/list/', component: goodslist }, //商品首页列表组件 92 | { name: 'goodsmore', path: 'goods/more/:id', component: goodsmore }, //商品更多分类搜索列表页面,id表示分类id 93 | { name: 'goodsinfo', path: 'goods/info/:id', component: goodsinfo }, //商品详情页面id表示商品id 94 | { name: 'car', path: 'goods/car', component: car }, //购物车页面 95 | { name: 'shopping', path: 'goods/shopping/:ids', component: shopping,meta:{checklogin:true} }, //订单数据填写下单 96 | { name: 'payment', path: 'goods/payment/:orderid', component: payment,meta:{checklogin:true} }, //支付页面 97 | { name: 'successpay', path: 'goods/successpay', component: successpay }, //支付成功页面 98 | { name: 'register', path: 'account/register', component: register }, //注册页面 99 | { name: 'login', path: 'account/login', component: login }, //注册页面 100 | { name: 'membercenter', path: 'member/center', component: membercenter,meta:{checklogin:true} }, //会员中心 101 | { name: 'orderlist', path: 'member/orderlist', component: orderlist,meta:{checklogin:true} }, //我的订单 102 | { name: 'orderinfo', path: 'member/orderinfo/:orderid', component: orderinfo,meta:{checklogin:true} }, //订单详情 103 | 104 | ] 105 | } 106 | ] 107 | }); 108 | 109 | // 路由钩子,实现菜单的改变给全局变量赋值 110 | router.beforeEach((to, from, next) => { 111 | // 如果路由元数据中没有设置checklogin:true则表示要检查登录 112 | if (to.meta.checklogin) { 113 | // store.dispatch(store.state.global.ChangeMenuActiveNoFlag,to.meta.menuno); 114 | 115 | axios.get('/site/account/islogin').then(res=>{ 116 | if(res.data.code =='nologin'){ 117 | store.dispatch(store.state.global.isloginedFlag,0); 118 | router.push({name:'login'}); 119 | } 120 | if(res.data.code =='logined'){ 121 | next(); 122 | } 123 | }); 124 | }else{ 125 | next(); 126 | } 127 | 128 | 129 | 130 | // 检查登录 131 | // if(!to.meta.nologin){//如果路由元数据中没有设置nologin:true则表示要检查登录 132 | // axios.get('/admin/account/islogin').then(res=>{ 133 | // if(res.data.code =='nologin'){ 134 | // router.push({name:'login'}); 135 | // } 136 | // if(res.data.code =='logined'){ 137 | // next(); 138 | // } 139 | // }); 140 | // }else{ 141 | // next(); 142 | // } 143 | 144 | 145 | }); 146 | 147 | // 全局过滤器 148 | // import moment from 'moment'; 149 | Vue.filter('datefmt', (input, fmtstring) => { 150 | // return moment(input).format(fmtstring); 151 | return fmtdate(input,fmtstring); 152 | }); 153 | 154 | // 格式化日期 155 | function fmtdate(input, fmtstring) { 156 | var now = new Date(input); 157 | var y = now.getFullYear(); 158 | var m = now.getMonth() + 1; 159 | m = m < 10 ? '0' + m : m; 160 | var d = now.getDate(); 161 | d = d < 10 ? '0' + d : d; 162 | var h = now.getHours(); 163 | var mm = now.getMinutes(); 164 | var sec = now.getSeconds(); 165 | 166 | var res = y + '-' + m + '-' + d; 167 | 168 | switch (fmtstring) { 169 | case 'YYYY-MM-DD': 170 | res = y + '-' + m + '-' + d; 171 | break; 172 | 173 | case 'YYYY-MM-DD HH:MM:ss': 174 | res = y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + sec; 175 | break; 176 | } 177 | return res; 178 | 179 | } 180 | 181 | // 4.0 注册mint-ui 182 | // 导入mint-ui的css文件 183 | // import 'mint-ui/lib/style.min.css'; 184 | // // 导入mint-ui组件对象 185 | // import mintui from 'mint-ui'; 186 | // 在Vue中全局使用mintui 187 | // Vue.use(mintui); 188 | 189 | // 5.0 注册mui的css样式 190 | // import '../statics/mui/css/mui.css'; 191 | // import '../statics/css/site.css'; 192 | // import 'iview/dist/styles/iview.css'; 193 | 194 | // import '../statics/site/css/style.css'; 195 | // 5.0 利用Vue对象进行解析渲染 196 | new Vue({ 197 | el: '#app', 198 | // 使用路由对象实例 199 | router: router, 200 | store, 201 | // render:function(create){create(App)} //es5的写法 202 | render: c => c(App) // es6的函数写法 =>：goes to 203 | }); -------------------------------------------------------------------------------- /statics/site/css/icon/demo_fontclass.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 10 | 11 |
12 |

IconFont 图标

13 | 160 | 161 |

font-class引用

162 |
163 | 164 |

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

165 |

与unicode使用方式相比，具有如下特点：

166 | 172 |

使用步骤如下：

173 |

第一步：引入项目下面生成的fontclass代码：

174 | 175 | 176 | 
<link rel="stylesheet" type="text/css" href="./iconfont.css">
177 |

第二步：挑选相应图标并获取类名，应用于页面：

178 | 
<i class="iconfont icon-xxx"></i>
179 |
180 |

"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。

181 |
182 |
183 | 184 | 185 | -------------------------------------------------------------------------------- /statics/site/css/icon/demo.css: -------------------------------------------------------------------------------- 1 | *{margin: 0;padding: 0;list-style: none;} 2 | /* 3 | KISSY CSS Reset 4 | 理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。 5 | 2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。 6 | 3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。 7 | 特色：1. 适应中文；2. 基于最新主流浏览器。 8 | 维护：玉伯, 正淳 9 | */ 10 | 11 | /** 清除内外边距 **/ 12 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ 13 | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ 14 | pre, /* text formatting elements 文本格式元素 */ 15 | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ 16 | th, td /* table elements 表格元素 */ { 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | /** 设置默认字体 **/ 22 | body, 23 | button, input, select, textarea /* for ie */ { 24 | font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; 25 | } 26 | h1, h2, h3, h4, h5, h6 { font-size: 100%; } 27 | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ 28 | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */ 29 | small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */ 30 | 31 | /** 重置列表元素 **/ 32 | ul, ol { list-style: none; } 33 | 34 | /** 重置文本格式元素 **/ 35 | a { text-decoration: none; } 36 | a:hover { text-decoration: underline; } 37 | 38 | 39 | /** 重置表单元素 **/ 40 | legend { color: #000; } /* for ie6 */ 41 | fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */ 42 | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */ 43 | /* 注：optgroup 无法扶正 */ 44 | 45 | /** 重置表格元素 **/ 46 | table { border-collapse: collapse; border-spacing: 0; } 47 | 48 | /* 清除浮动 */ 49 | .ks-clear:after, .clear:after { 50 | content: '\20'; 51 | display: block; 52 | height: 0; 53 | clear: both; 54 | } 55 | .ks-clear, .clear { 56 | *zoom: 1; 57 | } 58 | 59 | .main { 60 | padding: 30px 100px; 61 | width: 960px; 62 | margin: 0 auto; 63 | } 64 | .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;} 65 | 66 | .helps{margin-top:40px;} 67 | .helps pre{ 68 | padding:20px; 69 | margin:10px 0; 70 | border:solid 1px #e7e1cd; 71 | background-color: #fffdef; 72 | overflow: auto; 73 | } 74 | 75 | .icon_lists{ 76 | width: 100% !important; 77 | 78 | } 79 | 80 | .icon_lists li{ 81 | float:left; 82 | width: 100px; 83 | height:180px; 84 | text-align: center; 85 | list-style: none !important; 86 | } 87 | .icon_lists .icon{ 88 | font-size: 42px; 89 | line-height: 100px; 90 | margin: 10px 0; 91 | color:#333; 92 | -webkit-transition: font-size 0.25s ease-out 0s; 93 | -moz-transition: font-size 0.25s ease-out 0s; 94 | transition: font-size 0.25s ease-out 0s; 95 | 96 | } 97 | .icon_lists .icon:hover{ 98 | font-size: 100px; 99 | } 100 | 101 | 102 | 103 | .markdown { 104 | color: #666; 105 | font-size: 14px; 106 | line-height: 1.8; 107 | } 108 | 109 | .highlight { 110 | line-height: 1.5; 111 | } 112 | 113 | .markdown img { 114 | vertical-align: middle; 115 | max-width: 100%; 116 | } 117 | 118 | .markdown h1 { 119 | color: #404040; 120 | font-weight: 500; 121 | line-height: 40px; 122 | margin-bottom: 24px; 123 | } 124 | 125 | .markdown h2, 126 | .markdown h3, 127 | .markdown h4, 128 | .markdown h5, 129 | .markdown h6 { 130 | color: #404040; 131 | margin: 1.6em 0 0.6em 0; 132 | font-weight: 500; 133 | clear: both; 134 | } 135 | 136 | .markdown h1 { 137 | font-size: 28px; 138 | } 139 | 140 | .markdown h2 { 141 | font-size: 22px; 142 | } 143 | 144 | .markdown h3 { 145 | font-size: 16px; 146 | } 147 | 148 | .markdown h4 { 149 | font-size: 14px; 150 | } 151 | 152 | .markdown h5 { 153 | font-size: 12px; 154 | } 155 | 156 | .markdown h6 { 157 | font-size: 12px; 158 | } 159 | 160 | .markdown hr { 161 | height: 1px; 162 | border: 0; 163 | background: #e9e9e9; 164 | margin: 16px 0; 165 | clear: both; 166 | } 167 | 168 | .markdown p, 169 | .markdown pre { 170 | margin: 1em 0; 171 | } 172 | 173 | .markdown > p, 174 | .markdown > blockquote, 175 | .markdown > .highlight, 176 | .markdown > ol, 177 | .markdown > ul { 178 | width: 80%; 179 | } 180 | 181 | .markdown ul > li { 182 | list-style: circle; 183 | } 184 | 185 | .markdown > ul li, 186 | .markdown blockquote ul > li { 187 | margin-left: 20px; 188 | padding-left: 4px; 189 | } 190 | 191 | .markdown > ul li p, 192 | .markdown > ol li p { 193 | margin: 0.6em 0; 194 | } 195 | 196 | .markdown ol > li { 197 | list-style: decimal; 198 | } 199 | 200 | .markdown > ol li, 201 | .markdown blockquote ol > li { 202 | margin-left: 20px; 203 | padding-left: 4px; 204 | } 205 | 206 | .markdown code { 207 | margin: 0 3px; 208 | padding: 0 5px; 209 | background: #eee; 210 | border-radius: 3px; 211 | } 212 | 213 | .markdown pre { 214 | border-radius: 6px; 215 | background: #f7f7f7; 216 | padding: 20px; 217 | } 218 | 219 | .markdown pre code { 220 | border: none; 221 | background: #f7f7f7; 222 | margin: 0; 223 | } 224 | 225 | .markdown strong, 226 | .markdown b { 227 | font-weight: 600; 228 | } 229 | 230 | .markdown > table { 231 | border-collapse: collapse; 232 | border-spacing: 0px; 233 | empty-cells: show; 234 | border: 1px solid #e9e9e9; 235 | width: 95%; 236 | margin-bottom: 24px; 237 | } 238 | 239 | .markdown > table th { 240 | white-space: nowrap; 241 | color: #333; 242 | font-weight: 600; 243 | 244 | } 245 | 246 | .markdown > table th, 247 | .markdown > table td { 248 | border: 1px solid #e9e9e9; 249 | padding: 8px 16px; 250 | text-align: left; 251 | } 252 | 253 | .markdown > table th { 254 | background: #F7F7F7; 255 | } 256 | 257 | .markdown blockquote { 258 | font-size: 90%; 259 | color: #999; 260 | border-left: 4px solid #e9e9e9; 261 | padding-left: 0.8em; 262 | margin: 1em 0; 263 | font-style: italic; 264 | } 265 | 266 | .markdown blockquote p { 267 | margin: 0; 268 | } 269 | 270 | .markdown .anchor { 271 | opacity: 0; 272 | transition: opacity 0.3s ease; 273 | margin-left: 8px; 274 | } 275 | 276 | .markdown .waiting { 277 | color: #ccc; 278 | } 279 | 280 | .markdown h1:hover .anchor, 281 | .markdown h2:hover .anchor, 282 | .markdown h3:hover .anchor, 283 | .markdown h4:hover .anchor, 284 | .markdown h5:hover .anchor, 285 | .markdown h6:hover .anchor { 286 | opacity: 1; 287 | display: inline-block; 288 | } 289 | 290 | .markdown > br, 291 | .markdown > p > br { 292 | clear: both; 293 | } 294 | 295 | 296 | .hljs { 297 | display: block; 298 | background: white; 299 | padding: 0.5em; 300 | color: #333333; 301 | overflow-x: auto; 302 | } 303 | 304 | .hljs-comment, 305 | .hljs-meta { 306 | color: #969896; 307 | } 308 | 309 | .hljs-string, 310 | .hljs-variable, 311 | .hljs-template-variable, 312 | .hljs-strong, 313 | .hljs-emphasis, 314 | .hljs-quote { 315 | color: #df5000; 316 | } 317 | 318 | .hljs-keyword, 319 | .hljs-selector-tag, 320 | .hljs-type { 321 | color: #a71d5d; 322 | } 323 | 324 | .hljs-literal, 325 | .hljs-symbol, 326 | .hljs-bullet, 327 | .hljs-attribute { 328 | color: #0086b3; 329 | } 330 | 331 | .hljs-section, 332 | .hljs-name { 333 | color: #63a35c; 334 | } 335 | 336 | .hljs-tag { 337 | color: #333333; 338 | } 339 | 340 | .hljs-title, 341 | .hljs-attr, 342 | .hljs-selector-id, 343 | .hljs-selector-class, 344 | .hljs-selector-attr, 345 | .hljs-selector-pseudo { 346 | color: #795da3; 347 | } 348 | 349 | .hljs-addition { 350 | color: #55a532; 351 | background-color: #eaffea; 352 | } 353 | 354 | .hljs-deletion { 355 | color: #bd2c00; 356 | background-color: #ffecec; 357 | } 358 | 359 | .hljs-link { 360 | text-decoration: underline; 361 | } 362 | 363 | pre{ 364 | background: #fff; 365 | } 366 | 367 | 368 | 369 | 370 | 371 | -------------------------------------------------------------------------------- /src/components/site/goods/goodslist.vue: -------------------------------------------------------------------------------- 1 | 133 | 134 | 171 | 172 | -------------------------------------------------------------------------------- /src/components/site/goods/goodsinfobottom.vue: -------------------------------------------------------------------------------- 1 | 75 | 76 | 183 | 184 | -------------------------------------------------------------------------------- /src/components/site/member/orderlist.vue: -------------------------------------------------------------------------------- 1 | 136 | 137 | 188 | 189 | -------------------------------------------------------------------------------- /src/components/site/slayout.vue: -------------------------------------------------------------------------------- 1 | 105 | 106 | 184 | 185 | -------------------------------------------------------------------------------- /statics/site/css/icon/demo_unicode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 29 | 30 | 31 |
32 |

IconFont 图标

33 |
    34 | 35 |
  • 36 | 37 |
    Error
    38 |
    &#xe600;
    39 |
    • 40 | 41 |
  • 42 | 43 |
    返回
    44 |
    &#xe607;
    45 |
    • 46 | 47 |
  • 48 | 49 |
    购物车
    50 |
    &#xe601;
    51 |
    • 52 | 53 |
  • 54 | 55 |
    加号
    56 |
    &#xe676;
    57 |
    • 58 | 59 |
  • 60 | 61 |
    播放
    62 |
    &#xe602;
    63 |
    • 64 | 65 |
  • 66 | 67 |
    电话
    68 |
    &#xe603;
    69 |
    • 70 | 71 |
  • 72 | 73 |
    用户
    74 |
    &#xe6ce;
    75 |
    • 76 | 77 |
  • 78 | 79 |
    User
    80 |
    &#xe6f5;
    81 |
    • 82 | 83 |
  • 84 | 85 |
    close
    86 |
    &#xe659;
    87 |
    • 88 | 89 |
  • 90 | 91 |
    正确
    92 |
    &#xe61f;
    93 |
    • 94 | 95 |
  • 96 | 97 |
    查看
    98 |
    &#xe61b;
    99 |
    • 100 | 101 |
  • 102 | 103 |
    日期
    104 |
    &#xe721;
    105 |
    • 106 | 107 |
  • 108 | 109 |
    标签
    110 |
    &#xe60d;
    111 |
    • 112 | 113 |
  • 114 | 115 |
    购物
    116 |
    &#xe62a;
    117 |
    • 118 | 119 |
  • 120 | 121 |
    评论
    122 |
    &#xe7e9;
    123 |
    • 124 | 125 |
  • 126 | 127 |
    放大镜
    128 |
    &#xe629;
    129 |
    • 130 | 131 |
  • 132 | 133 |
    标签
    134 |
    &#xe628;
    135 |
    • 136 | 137 |
  • 138 | 139 |
    积分
    140 |
    &#xe606;
    141 |
    • 142 | 143 |
  • 144 | 145 |
    arrow
    146 |
    &#xe604;
    147 |
    • 148 | 149 |
  • 150 | 151 |
    09附件
    152 |
    &#xe644;
    153 |
    • 154 | 155 |
  • 156 | 157 |
    下载
    158 |
    &#xe87a;
    159 |
    • 160 | 161 |
  • 162 | 163 |
    tip
    164 |
    &#xe605;
    165 |
    • 166 | 167 |
  • 168 | 169 |
    余额
    170 |
    &#xe6a0;
    171 |
    • 172 | 173 |
  • 174 | 175 |
    arrow
    176 |
    &#xe87b;
    177 |
    • 178 | 179 |
180 |

unicode引用

181 |
182 | 183 |

unicode是字体在网页端最原始的应用方式，特点是：

184 |
    185 |
  • 兼容性最好，支持ie6+，及所有现代浏览器。
    • 186 |
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • 187 |
  • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
    • 188 |
189 |
190 |

注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式

191 |
192 |

unicode使用步骤如下：

193 |

第一步：拷贝项目下面生成的font-face

194 | 
@font-face {
195 |   font-family: 'iconfont';
196 |   src: url('iconfont.eot');
197 |   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
198 |   url('iconfont.woff') format('woff'),
199 |   url('iconfont.ttf') format('truetype'),
200 |   url('iconfont.svg#iconfont') format('svg');
201 | }
202 |
203 |

第二步：定义使用iconfont的样式

204 | 
.iconfont{
205 |   font-family:"iconfont" !important;
206 |   font-size:16px;font-style:normal;
207 |   -webkit-font-smoothing: antialiased;
208 |   -webkit-text-stroke-width: 0.2px;
209 |   -moz-osx-font-smoothing: grayscale;
210 | }
211 |
212 |

第三步：挑选相应图标并获取字体编码，应用于页面

213 | 
<i class="iconfont">&#x33;</i>
214 | 215 |
216 |

"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。

217 |
218 |
219 | 220 | 221 | 222 | 223 | -------------------------------------------------------------------------------- /src/components/site/subcom/categroupcontent静态结构.vue: -------------------------------------------------------------------------------- 1 | 181 | 182 | 187 | -------------------------------------------------------------------------------- /src/components/site/account/register.vue: -------------------------------------------------------------------------------- 1 | 67 | 68 | 211 | 212 | -------------------------------------------------------------------------------- /src/components/site/goods/car.vue: -------------------------------------------------------------------------------- 1 | 113 | 114 | 244 | 245 | -------------------------------------------------------------------------------- /src/components/site/slayout_jquery版本.vue: -------------------------------------------------------------------------------- 1 | 196 | 197 | 234 | 235 | -------------------------------------------------------------------------------- /statics/site/css/icon/demo_symbol.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 10 | 24 | 25 | 26 |
27 |

IconFont 图标

28 |
    29 | 30 |
  • 31 | 34 |
    Error
    35 |
    #icon-error
    36 |
    • 37 | 38 |
  • 39 | 42 |
    返回
    43 |
    #icon-reply
    44 |
    • 45 | 46 |
  • 47 | 50 |
    购物车
    51 |
    #icon-cart
    52 |
    • 53 | 54 |
  • 55 | 58 |
    加号
    59 |
    #icon-plus
    60 |
    • 61 | 62 |
  • 63 | 66 |
    播放
    67 |
    #icon-play
    68 |
    • 69 | 70 |
  • 71 | 74 |
    电话
    75 |
    #icon-phone
    76 |
    • 77 | 78 |
  • 79 | 82 |
    用户
    83 |
    #icon-user-full
    84 |
    • 85 | 86 |
  • 87 | 90 |
    User
    91 |
    #icon-user
    92 |
    • 93 | 94 |
  • 95 | 98 |
    close
    99 |
    #icon-close
    100 |
    • 101 | 102 |
  • 103 | 106 |
    正确
    107 |
    #icon-check
    108 |
    • 109 | 110 |
  • 111 | 114 |
    查看
    115 |
    #icon-view
    116 |
    • 117 | 118 |
  • 119 | 122 |
    日期
    123 |
    #icon-date
    124 |
    • 125 | 126 |
  • 127 | 130 |
    标签
    131 |
    #icon-top-label
    132 |
    • 133 | 134 |
  • 135 | 138 |
    购物
    139 |
    #icon-order
    140 |
    • 141 | 142 |
  • 143 | 146 |
    评论
    147 |
    #icon-comment
    148 |
    • 149 | 150 |
  • 151 | 154 |
    放大镜
    155 |
    #icon-search
    156 |
    • 157 | 158 |
  • 159 | 162 |
    标签
    163 |
    #icon-right-label
    164 |
    • 165 | 166 |
  • 167 | 170 |
    积分
    171 |
    #icon-point
    172 |
    • 173 | 174 |
  • 175 | 178 |
    arrow
    179 |
    #icon-arrow-left
    180 |
    • 181 | 182 |
  • 183 | 186 |
    09附件
    187 |
    #icon-attach
    188 |
    • 189 | 190 |
  • 191 | 194 |
    下载
    195 |
    #icon-down
    196 |
    • 197 | 198 |
  • 199 | 202 |
    tip
    203 |
    #icon-tip
    204 |
    • 205 | 206 |
  • 207 | 210 |
    余额
    211 |
    #icon-amount
    212 |
    • 213 | 214 |
  • 215 | 218 |
    arrow
    219 |
    #icon-arrow-right
    220 |
    • 221 | 222 |
223 | 224 | 225 |

symbol引用

226 |
227 | 228 |

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 229 | 这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：

230 |
    231 |
  • 支持多色图标了，不再受单色限制。
    • 232 |
  • 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
    • 233 |
  • 兼容性较差，支持 ie9+,及现代浏览器。
    • 234 |
  • 浏览器渲染svg的性能一般，还不如png。
    • 235 |
236 |

使用步骤如下：

237 |

第一步：引入项目下面生成的symbol代码：

238 | 
<script src="./iconfont.js"></script>
239 |

第二步：加入通用css代码（引入一次就行）：

240 | 
<style type="text/css">
241 | .icon {
242 |    width: 1em; height: 1em;
243 |    vertical-align: -0.15em;
244 |    fill: currentColor;
245 |    overflow: hidden;
246 | }
247 | </style>
248 |

第三步：挑选相应图标并获取类名，应用于页面：

249 | 
<svg class="icon" aria-hidden="true">
250 |   <use xlink:href="#icon-xxx"></use>
251 | </svg>
252 |
253 |
254 | 255 | 256 | -------------------------------------------------------------------------------- /src/components/site/member/orderinfo.vue: -------------------------------------------------------------------------------- 1 | 227 | 228 | 273 | 274 | --------------------------------------------------------------------------------