diff --git a/package.json b/package.json index e796101..dbf7ba3 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "build": "node build/build.js" }, "dependencies": { + "element-ui": "^2.10.1", "node-sass": "^4.12.0", "sass-loader": "^7.1.0", "vue": "^2.5.2", diff --git a/src/App.vue b/src/App.vue index 42d4c9e..46364a3 100644 --- a/src/App.vue +++ b/src/App.vue @@ -29,9 +29,16 @@ export default { -moz-osx-font-smoothing: grayscale; text-align: center; font-size: 14px; + display: -webkit-box; + display: -ms-flexbox; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column; + flex-flow: column; } .wrap { flex: 1; + height: 100%; } diff --git a/src/assets/service/icon_analyze.png b/src/assets/service/icon_analyze.png new file mode 100755 index 0000000..2f90ff4 --- /dev/null +++ b/src/assets/service/icon_analyze.png diff --git a/src/assets/service/icon_create.png b/src/assets/service/icon_create.png new file mode 100755 index 0000000..5602925 --- /dev/null +++ b/src/assets/service/icon_create.png diff --git a/src/assets/service/icon_home.png b/src/assets/service/icon_home.png new file mode 100755 index 0000000..670b62e --- /dev/null +++ b/src/assets/service/icon_home.png diff --git a/src/assets/service/icon_myact.png b/src/assets/service/icon_myact.png new file mode 100755 index 0000000..06b90e6 --- /dev/null +++ b/src/assets/service/icon_myact.png diff --git a/src/assets/service/icon_user.png b/src/assets/service/icon_user.png new file mode 100755 index 0000000..426ca80 --- /dev/null +++ b/src/assets/service/icon_user.png diff --git a/src/components/NavMenu.vue b/src/components/NavMenu.vue new file mode 100755 index 0000000..52086d3 --- /dev/null +++ b/src/components/NavMenu.vue @@ -0,0 +1,37 @@ + + + + diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue new file mode 100644 index 0000000..b07ded2 --- /dev/null +++ b/src/components/SvgIcon/index.vue @@ -0,0 +1,62 @@ + + + + + diff --git a/src/components/VFooter.vue b/src/components/VFooter.vue index d6cb06e..80832c9 100644 --- a/src/components/VFooter.vue +++ b/src/components/VFooter.vue @@ -14,7 +14,8 @@ export default { .footer{ height:64px; line-height: 64px; - background:rgba(6,8,10,1); + /*background:rgba(6,8,10,1);*/ + background:#545c64; color:rgba(255,255,255,0.65); } diff --git a/src/components/config.js b/src/components/config.js new file mode 100755 index 0000000..629df06 --- /dev/null +++ b/src/components/config.js @@ -0,0 +1,89 @@ +let config = { + "entity": null, + "childs": [ + { + "entity": { + "id": 1, //id标识 + "title": "中心首页", //菜单标题 + "icon": "el-icon-s-home",//菜单logo + "url": "/views/dashboard",//菜单路径 + }, + }, + { + "entity": { + "id": 2, + "title": "我的钱包", + "icon": "el-icon-bank-card", + "url": "example", + }, + "childs": [ + { + "entity": { + "id": 2-1, + "title": "我的账户", + "url": "account", + }, + "childs": null + }, + { + "entity": { + "id": 2-2, + "title": "我的卡券", + "url": "cardticket", + } + }, + ] + }, + { + "entity": { + "id": 3, + "title": "我的订单", + "icon": "el-icon-tickets", + "url": "order", + }, + + }, + { + "entity": { + "id": 4, + "title": "欠费补缴", + "icon": "el-icon-document-checked", + "url": "payback", + } + }, + { + "entity": { + "id": 5, + "title": "我的车辆", + "icon": "el-icon-truck", + "url": "mycar", + } + }, + { + "entity": { + "id": 6, + "title": "个人中心", + "icon": "el-icon-s-custom", + "url": "mycar", + }, + "childs": [ + { + "entity": { + "id": 6-1, + "title": "个人资料", + "url": "information", + }, + "childs": null + }, + { + "entity": { + "id": 6-2, + "title": "我的评价", + "url": "myevaluate", + } + }, + ] + }, + ] +} +export default config diff --git a/src/icons/index.js b/src/icons/index.js new file mode 100644 index 0000000..2c6b309 --- /dev/null +++ b/src/icons/index.js @@ -0,0 +1,9 @@ +import Vue from 'vue' +import SvgIcon from '@/components/SvgIcon'// svg component + +// register globally +Vue.component('svg-icon', SvgIcon) + +const req = require.context('./svg', false, /\.svg$/) +const requireAll = requireContext => requireContext.keys().map(requireContext) +requireAll(req) diff --git a/src/icons/svg/dashboard.svg b/src/icons/svg/dashboard.svg new file mode 100644 index 0000000..5317d37 --- /dev/null +++ b/src/icons/svg/dashboard.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/example.svg b/src/icons/svg/example.svg new file mode 100644 index 0000000..46f42b5 --- /dev/null +++ b/src/icons/svg/example.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/eye-open.svg b/src/icons/svg/eye-open.svg new file mode 100644 index 0000000..88dcc98 --- /dev/null +++ b/src/icons/svg/eye-open.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/eye.svg b/src/icons/svg/eye.svg new file mode 100644 index 0000000..16ed2d8 --- /dev/null +++ b/src/icons/svg/eye.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/form.svg b/src/icons/svg/form.svg new file mode 100644 index 0000000..dcbaa18 --- /dev/null +++ b/src/icons/svg/form.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/give.svg b/src/icons/svg/give.svg new file mode 100644 index 0000000..b75eec7 --- /dev/null +++ b/src/icons/svg/give.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/link.svg b/src/icons/svg/link.svg new file mode 100644 index 0000000..48197ba --- /dev/null +++ b/src/icons/svg/link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/money.svg b/src/icons/svg/money.svg new file mode 100644 index 0000000..c1580de --- /dev/null +++ b/src/icons/svg/money.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/nested.svg b/src/icons/svg/nested.svg new file mode 100644 index 0000000..06713a8 --- /dev/null +++ b/src/icons/svg/nested.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/password.svg b/src/icons/svg/password.svg new file mode 100644 index 0000000..e291d85 --- /dev/null +++ b/src/icons/svg/password.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/people.svg b/src/icons/svg/people.svg new file mode 100644 index 0000000..2bd54ae --- /dev/null +++ b/src/icons/svg/people.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/phone.svg b/src/icons/svg/phone.svg new file mode 100644 index 0000000..e69cdeb --- /dev/null +++ b/src/icons/svg/phone.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/recharge.svg b/src/icons/svg/recharge.svg new file mode 100644 index 0000000..512a49a --- /dev/null +++ b/src/icons/svg/recharge.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/user.svg b/src/icons/svg/user.svg new file mode 100644 index 0000000..0ba0716 --- /dev/null +++ b/src/icons/svg/user.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/yzm.svg b/src/icons/svg/yzm.svg new file mode 100644 index 0000000..0974c20 --- /dev/null +++ b/src/icons/svg/yzm.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svgo.yml b/src/icons/svgo.yml new file mode 100644 index 0000000..d11906a --- /dev/null +++ b/src/icons/svgo.yml @@ -0,0 +1,22 @@ +# replace default config + +# multipass: true +# full: true + +plugins: + + # - name + # + # or: + # - name: false + # - name: true + # + # or: + # - name: + # param1: 1 + # param2: 2 + +- removeAttrs: + attrs: + - 'fill' + - 'fill-rule' diff --git a/src/main.js b/src/main.js index 2ad6063..09d75f3 100644 --- a/src/main.js +++ b/src/main.js @@ -3,12 +3,14 @@ import Vue from 'vue' import App from './App' import router from './router' - +import ElementUI from 'element-ui' +import '@/icons' // icon require ('./style/reset.css') Vue.config.productionTip = false - +// set ElementUI lang to EN +Vue.use(ElementUI) /* eslint-disable no-new */ new Vue({ el: '#app', diff --git a/src/style/reset.css b/src/style/reset.css index c93e18a..48ce77a 100644 --- a/src/style/reset.css +++ b/src/style/reset.css @@ -2,7 +2,7 @@ v4.0 | 20180602 License: none (public domain) */ - +@import url("//unpkg.com/element-ui@2.10.1/lib/theme-chalk/index.css"); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -179,4 +179,80 @@ table { .anchorBL{display:none;} /*去掉百度地图logo*/ +.cursor{cursor: pointer;} +input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ + -webkit-appearance:textfield; +} +input[type="number"]{ + -moz-appearance:textfield; +} +/* 个别样式 */ + +/*.icon_home{ + display: inline-block; + width:20px; + height:20px; + background:url(../assets/service/icon_home.png) no-repeat center 2px; + background-size: cover; +} +.icon_create{ + display: inline-block; + width:19px; + height:19px; + background:url(../assets/service/icon_home.png) no-repeat center center; + background-size: cover; +} +.icon_myact{ + display: inline-block; + width:19px; + height:19px; + background:url(../assets/service/icon_myact.png) no-repeat center center; + background-size: cover; +} +.icon_analyze{ + display: inline-block; + width:19px; + height:19px; + background:url(../assets/service/icon_analyze.png) no-repeat center center; + background-size: cover; +} +.icon_user{ + display: inline-block; + width:19px; + height:19px; + background:url(../assets/service/icon_user.png) no-repeat; + background-size: cover; +}*/ +.app-wrapper { + position: relative; + height: 100%; + width: 100%; +} +/*侧边栏sta*/ +#app .sidebar-container { + -webkit-transition: width 0.28s; + transition: width 0.28s; + width: 210px !important; + background-color: #304156; + height: 100%; + position: relative; + font-size: 0px; + /* top: 80px; */ + /* left: 0; */ + float: left; + /* bottom: 64px; */ + z-index: 1001; + overflow: hidden; +} +/*右侧内容部分*/ +#app .main-container{ + min-height: 100%; + -webkit-transition: margin-left .28s; + transition: margin-left .28s; + margin-left: 210px; + position: relative; +} +.el-menu{ + border-right: none; +} diff --git a/src/utils/DateUtils.js b/src/utils/DateUtils.js new file mode 100755 index 0000000..8d5c547 --- /dev/null +++ b/src/utils/DateUtils.js @@ -0,0 +1,494 @@ +/** + * 时间处理工具 + * + * @type + * @author miaofc + */ +export default { + + /** + * 日期对象转换为毫秒数 + */ + + date2Long: function (date) { + return date.getTime(); + }, + /** + * 毫秒转换为日期对象 + * @param dateVal number 日期的毫秒数 + */ + long2Date: function (dateVal) { + return new Date(dateVal); + }, + + /** + * 将制定格式的时间字符串转换成long + *
  • 0-yyyyMMdd
    • + *
  • 1-yyyy-MM-dd
    • + *
  • 2-HHmmss
    • + *
  • 3-HH:mm:ss
    • + *
  • 4-HHmmssSSS
    • + *
  • 5-HH:mm:ss.SSS
    • + *
  • 6-yyyyMMddHHmmss
    • + *
  • 7-yyyy-MM-dd HH:mm:ss
    • + *
  • 8-yyyyMMddHHmmssSSS
    • + *
  • 9-yyyy-MM-dd HH:mm:ss.SSS
    • + *
  • 10-yyyy/MM/dd HH:mm
    • + *
  • 11-yyyy/MM/dd HH:mm:ss
    • + * + */ + string2Long: function (str, format) { + if (str == null || str == "") { + return ""; + } + return this.date2Long(this.string2Date(str, format)); + }, + + + /** + * 毫秒转换为日期对象 + * + * @param dateVal + * + + */ + long2String: function (dateVal, formatType) { + if (dateVal == undefined || dateVal == null) { + return '-' + } + return this.date2String(new Date(dateVal), formatType); + }, + + + /** + * 将时间转化为相应字符串 + * + * @param {} + * date 待格式化的Date对象 + * @param {} + * formatType 指定格式: + * + * @return string 格式化后的字符串 + */ + date2String: function (date, formatType) { + if (undefined == date || null == date) { + return '-'; + } + // 格式化字符串数组 + var patterns = ["yyyyMMdd", "yyyy-MM-dd", "HHmmss", "HH:mm:ss", "HHmmssSSS", "HH:mm:ss.SSS", "yyyyMMddHHmmss", "yyyy-MM-dd HH:mm:ss", "yyyyMMddHHmmssSSS", "yyyy-MM-dd HH:mm:ss.SSS", "yyyy/MM/dd HH:mm", "yyyy/MM/dd HH:mm:ss", "yyyy/MM/dd", "yyyy-MM", "HH:mm"]; + return this.formatDate(date, patterns[formatType]); + }, + + /** + * 将字符串转化为相应时间 + * + * @param {} + * dateStr 时间字符串 + * @param {} + * formatType 指定格式: + * + * @return 解析后的Date对象 + */ + string2Date:function (date,formatType) { + let dateTime; + switch (formatType) { + case 0 : + dateTime= moment(date).format("YYYYMMDD"); + break; + case 1 : + dateTime= moment(date).format("YYYY-MM-DD"); + break; + case 2 : + dateTime= moment(date).format("HHmmss"); + break; + case 3 : + dateTime= moment(date).format("HH:mm:ss"); + break; + case 4 : + dateTime= moment(date).format("HHmmssSSS"); + break; + case 5 : + dateTime= moment(date).format("HH:mm:ss.SSS"); + break; + case 6 : + dateTime= moment(date).format("YYYY-MM-DDHHmmss"); + break; + case 7 : + dateTime= moment(date).format("YYYY-MM-DD HH:mm:ss"); + + break; + case 8 : + dateTime= moment(date).format("yyyyMMddHHmmssSSS"); + break; + case 9 : + dateTime= moment(date).format("yyyy-MM-dd HH:mm:ss.SSS"); + break; + case 10 ://yyyy/MM/dd HH:mm + dateTime= moment(date).format("yyyy/MM/dd HH:mm"); + break; + case 11 ://yyyy/MM/dd HH:mm:ss + dateTime= moment(date).format("yyyy/MM/dd HH:mm:ss"); + break; + } + return dateTime; + }, + /** + * 格式化时间 + * + * @param {} + * date 待格式化的Date对象 + * @param {} + * pattern 格式化模式，可能包含下列字母 + * + * @return 格式化后的字符串 + */ + formatDate: function (date, pattern) { + var dateStr = new String(pattern); + // 格式化公元信息 + dateStr = dateStr.replace("G", date.getFullYear() >= 0 ? "AD" : "BC"); + // 格式化年份信息 + var year = new String(date.getFullYear()); + dateStr = dateStr.replace("yyyy", year); + dateStr = dateStr.replace("yy", year.substring(year.length - 2, year.length)); + // 格式化月份信息 + var month = date.getMonth(); + var monthFullNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; + var monthShortNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; + dateStr = dateStr.replace("MMMM", monthFullNames[month]); + dateStr = dateStr.replace("MMM", monthShortNames[month]); + dateStr = dateStr.replace("MM", month < 9 ? "0" + (month + 1) : month + 1); + // 格式化月份中的日期 + var day = date.getDate(); + dateStr = dateStr.replace("dd", day < 10 ? "0" + day : day); + // 格式化上下午 + dateStr = dateStr.replace("a", date.getHours() < 12 ? "AM" : "PM"); + // 格式化小时 + var hour = date.getHours(); + dateStr = dateStr.replace("HH", hour < 10 ? "0" + hour : hour); + var khour = hour > 11 ? hour - 12 : hour; + dateStr = dateStr.replace("KK", khour < 10 ? "0" + khour : khour); + // 格式化分钟 + var minute = date.getMinutes(); + dateStr = dateStr.replace("mm", minute < 10 ? "0" + minute : minute); + // 格式化秒钟 + var second = date.getSeconds(); + dateStr = dateStr.replace("ss", second < 10 ? "0" + second : second); + // 格式化毫秒 + var millisecond = date.getMilliseconds(); + dateStr = dateStr.replace("SSS", millisecond < 10 ? "00" + millisecond : (millisecond < 100 ? "0" + millisecond : millisecond)); + return dateStr; + }, + + /** + * 取得date在域field上偏移amount后的值 + * + * @param {} + * date 原始时间 + * @param {} + * field 偏移域，可能的取值: + * + * @param {} + * amount 偏移量 + * @return 偏移后的时间 + */ + dateOffset: function (date, field, amount) { + var mount = 0; + switch (field) { + // 以年为单位位移 + case "year", "y": + mount = 31536000 * 1000; + // newDate.setFullYear(date.getFullYear()+amount); + break; + // 以月份为单位位移 + case "month", "M": + mount = 30 * 24 * 60 * 60 * 1000; + // newDate.setMonth(date.getMonth()+amount); + break; + // 以天为单位位移 + case "day", "d": + mount = 24 * 60 * 60 * 1000; + // newDate.setDate(date.getDate()+amount); + break; + // 以小时为单位位移 + case "hour", "h": + mount = 60 * 60 * 1000; + // newDate.setHours(date.getHours()+amount); + break; + // 以分钟为单位位移 + case "minute", "m": + mount = 60 * 1000; + // newDate.setMinutes(date.getMinutes()+amount); + break; + // 以秒为单位位移 + case "second", "s": + mount = 1000; + // newDate.setSeconds(date.getSeconds+amount); + break; + // 以毫秒为单位位移 + case "millisecond", "ms", "S": + mount = 1; + // newDate.setMilliseconds(date.getMilliseconds+amount); + break; + } + var newDate = new Date(date.getTime() + Number(mount) * Number(amount)); + return newDate; + }, + + /** + * 求两个日期间相差的毫秒数 + * + * @param {} + * date1 时间1 + * @param {} + * date2 时间2 + * @return 两个时间相差的毫秒数 + */ + getDiffMillis: function (date1, date2) { + return date1.getTime() - date2.getTime(); + }, + + /** + * 求两个日期间相差的秒数 + * + * @param {} + * date1 时间1 + * @param {} + * date2 时间2 + * @return 两个时间相差的秒数 + */ + getDiffSeconds: function (date1, date2) { + return Math.floor(this.getDiffMillis(date1, date2) / 1000); + }, + + /** + * 求两个日期间相差的分钟数目 + * + * @param {} + * date1 时间1 + * @param {} + * date2 时间2 + * @return 两个时间相差的分钟数 + */ + getDiffMinutes: function (date1, date2) { + return Math.floor(this.getDiffSeconds(date1, date2) / 60); + }, + + /** + * 求两个日期间相差的小时数目 + * + * @param {} + * date1 时间1 + * @param {} + * date2 时间2 + * @return 两个时间相差的小时数 + */ + getDiffHours: function (date1, date2) { + return Math.floor(this.getDiffMinutes(date1, date2) / 60); + }, + + /** + * 求两个日期间相差的天数 + * + * @param {} + * date1 时间1 + * @param {} + * date2 时间2 + * @return 两个时间相差的天数 + */ + getDiffDays: function (date1, date2) { + return Math.floor(this.getDiffHours(date1, date2) / 24); + }, + + /** + * 求两个日期间相差的月数目。认为每个月均为30天。 + * + * @param {} + * date1 时间1 + * @param {} + * date2 时间2 + * @return 两个时间相差的月树 + */ + getDiffMonths: function (date1, date2) { + return Math.floor(this.getDiffDays(date1, date2) / 30); + }, + + /** + * 求两个日期间相差的自然月数目 + * + * @param {} + * date1 时间1 + * @param {} + * date2 时间2 + * @return 两个时间相差的自然月数 + */ + getDiffNaturalMonth: function (date1, date2) { + var month1 = date1.getMonth(); + var month2 = date2.getMonth(); + return this.getDiffYears(date1, date2) * 12 - (month2 - month1); + }, + + /** + * 求两个日期间相差的年数目 + * + * @param {} + * date1 时间1 + * @param {} + * date2 时间2 + * @return 两个时间相差的年数 + */ + getDiffYears: function (date1, date2) { + return date1.getFullYear() - date2.getFullYear(); + }, + + /** + * 求日期为其所在月份的第几天 + * + * @param {} + * day 目标日 + * @return 目标日是第几天。天数从1开始 + */ + getOrinalOfDayInYear: function (day) { + // 得到一年中的第一天 + var firstDay = new Date(day.getFullYear, 0, 1); + // 计算与第一天的差值 + return this.getDiffDays(day, firstDay) + 1; + }, + + /** + * 求日期为其所在月份的第几天 + * + * @param {} + * day 目标日 + * @return 目标日是第几天。天数从1开始 + */ + getOrinalOfDayInMonth: function (day) { + // 得到一个月中的第一天 + var firstDay = new Date(day.getFullYear, day.getMonth(), 1); + // 计算与第一天的差值 + return this.getDiffDays(day, firstDay) + 1; + }, + + /** + * 求日期为其所在周的第几天 + * + * @param {} + * day 目标日 + * @return 目标日是第几天。天数从1开始 + */ + getOrinalOfDayInWeek: function (day) { + return day.getDay() + 1; + }, + + /** + * 求某年共有多少天 + * + * @param {} + * year 年份 + * @return 该年份共有多少天 + */ + getNumberOfDaysInYear: function (year) { + // 若该年份为闰年，返回366 + if ((year % 100 != 0 && year % 4 == 0) || (year % 400 == 0)) { + return 366; + } + // 普通年份返回365 + return 365; + }, + + /** + * 求某月共有多少天 + * + * @param {} + * year 年份 + * @param {} + * month 月份 + * @return 该月内共有多少天 + */ + getNumberOfDaysInMonth: function (year, month) { + // 得到该月份的第一天 + var date1 = new Date(year, month - 1, 1); + // 得到后一个月份的第一天 + var date2 = ""; + if (month != 11) { + date2 = new Date(year, month, 1); + } else { + date2 = new Date(year - 1, 0, 1); + } + return this.getDiffDays(date1, date2); + }, + + /** + * 得到当前年份一共有多少天 + * + * @return 当前年份共有多少天 + */ + getNumberOfDaysInCurrentYear: function () { + var date = new Date(); + return this.getNumberOfDaysInYear(date.getYear()); + }, + + /** + * 得到当前月份一共有多少天 + * + * @return 当前月份共有多少天 + */ + getNumberOfDaysInCurrentMonth: function () { + var date = new Date(); + return this.getNumberOfDaysInMonth(date.getYear(), date.getMonth() + 1); + }, + +// 金钱格式处理 + moneyFormatter: function (value) { + if (value == '0' || value == undefined || value == null || value === '') { + return '0.00'; + } else { + return (value / 100).toFixed(2); + } + } + +}; diff --git a/src/utils/auth.js b/src/utils/auth.js new file mode 100644 index 0000000..059af18 --- /dev/null +++ b/src/utils/auth.js @@ -0,0 +1,15 @@ +import Cookies from 'js-cookie' + +const TokenKey = 'vue_admin_template_token' + +export function getToken() { + return Cookies.get(TokenKey) +} + +export function setToken(token) { + return Cookies.set(TokenKey, token) +} + +export function removeToken() { + return Cookies.remove(TokenKey) +} diff --git a/src/utils/get-page-title.js b/src/utils/get-page-title.js new file mode 100644 index 0000000..0d558d0 --- /dev/null +++ b/src/utils/get-page-title.js @@ -0,0 +1,10 @@ +import defaultSettings from '@/settings' + +const title = defaultSettings.title || '黄石停车系统' + +export default function getPageTitle(pageTitle) { + if (pageTitle) { + return `${pageTitle}` + } + return `${title}` +} diff --git a/src/utils/index.js b/src/utils/index.js new file mode 100644 index 0000000..cd14bd5 --- /dev/null +++ b/src/utils/index.js @@ -0,0 +1,110 @@ +/** + * Created by PanJiaChen on 16/11/18. + */ + +/** + * Parse the time to string + * @param {(Object|string|number)} time + * @param {string} cFormat + * @returns {string} + */ +export function parseTime(time, cFormat) { + if (arguments.length === 0) { + return null + } + const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}' + let date + if (typeof time === 'object') { + date = time + } else { + if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) { + time = parseInt(time) + } + if ((typeof time === 'number') && (time.toString().length === 10)) { + time = time * 1000 + } + date = new Date(time) + } + const formatObj = { + y: date.getFullYear(), + m: date.getMonth() + 1, + d: date.getDate(), + h: date.getHours(), + i: date.getMinutes(), + s: date.getSeconds(), + a: date.getDay() + } + const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => { + let value = formatObj[key] + // Note: getDay() returns 0 on Sunday + if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] } + if (result.length > 0 && value < 10) { + value = '0' + value + } + return value || 0 + }) + return time_str +} + +/** + * @param {number} time + * @param {string} option + * @returns {string} + */ +export function formatTime(time, option) { + if (('' + time).length === 10) { + time = parseInt(time) * 1000 + } else { + time = +time + } + const d = new Date(time) + const now = Date.now() + + const diff = (now - d) / 1000 + + if (diff < 30) { + return '刚刚' + } else if (diff < 3600) { + // less 1 hour + return Math.ceil(diff / 60) + '分钟前' + } else if (diff < 3600 * 24) { + return Math.ceil(diff / 3600) + '小时前' + } else if (diff < 3600 * 24 * 2) { + return '1天前' + } + if (option) { + return parseTime(time, option) + } else { + return ( + d.getMonth() + + 1 + + '月' + + d.getDate() + + '日' + + d.getHours() + + '时' + + d.getMinutes() + + '分' + ) + } +} + +/** + * @param {string} url + * @returns {Object} + */ +export function param2Obj(url) { + const search = url.split('?')[1] + if (!search) { + return {} + } + return JSON.parse( + '{"' + + decodeURIComponent(search) + .replace(/"/g, '\\"') + .replace(/&/g, '","') + .replace(/=/g, '":"') + .replace(/\+/g, ' ') + + '"}' + ) +} diff --git a/src/utils/request.js b/src/utils/request.js new file mode 100644 index 0000000..3d392d7 --- /dev/null +++ b/src/utils/request.js @@ -0,0 +1,71 @@ +import axios from 'axios' +import { MessageBox, Message } from 'element-ui' +import store from '@/store' +import { getToken } from '@/utils/auth' + +// create an axios instance +const service = axios.create({ + baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url + // withCredentials: true, // send cookies when cross-domain requests + timeout: 50000 // request timeout +}) + +// request interceptor +service.interceptors.request.use( + config => { + // do something before request is sent + + if (store.getters.token) { + // let each request carry token + // ['X-Token'] is a custom headers key + // please modify it according to the actual situation + config.headers['X-Auth-Token'] = getToken() + } + return config + }, + error => { + // do something with request error + console.log(error) // for debug + return Promise.reject(error) + } +) + +// response interceptor +service.interceptors.response.use( + /** + * If you want to get http information such as headers or status + * Please return response => response + */ + + /** + * Determine the request status by custom code + * Here is just an example + * You can also judge the status by HTTP Status Code + */ + response => { + const res = response.data + // if the custom code is not 20000, it is judged as an error. + if (res.code !='8888') { + Message({ + message: res.message || 'Error', + type: 'error', + duration: 5 * 1000 + }) + + return Promise.reject(new Error(res.message || 'Error')) + } else { + return res + } + }, + error => { + console.log('err' + error) // for debug + Message({ + message: error.message, + type: 'error', + duration: 5 * 1000 + }) + return Promise.reject(error) + } +) + +export default service diff --git a/src/utils/scroll-to.js b/src/utils/scroll-to.js new file mode 100644 index 0000000..c5d8e04 --- /dev/null +++ b/src/utils/scroll-to.js @@ -0,0 +1,58 @@ +Math.easeInOutQuad = function(t, b, c, d) { + t /= d / 2 + if (t < 1) { + return c / 2 * t * t + b + } + t-- + return -c / 2 * (t * (t - 2) - 1) + b +} + +// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts +var requestAnimFrame = (function() { + return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) } +})() + +/** + * Because it's so fucking difficult to detect the scrolling element, just move them all + * @param {number} amount + */ +function move(amount) { + document.documentElement.scrollTop = amount + document.body.parentNode.scrollTop = amount + document.body.scrollTop = amount +} + +function position() { + return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop +} + +/** + * @param {number} to + * @param {number} duration + * @param {Function} callback + */ +export function scrollTo(to, duration, callback) { + const start = position() + const change = to - start + const increment = 20 + let currentTime = 0 + duration = (typeof (duration) === 'undefined') ? 500 : duration + var animateScroll = function() { + // increment the time + currentTime += increment + // find the value with the quadratic in-out easing function + var val = Math.easeInOutQuad(currentTime, start, change, duration) + // move the document.body + move(val) + // do the animation unless its over + if (currentTime < duration) { + requestAnimFrame(animateScroll) + } else { + if (callback && typeof (callback) === 'function') { + // the animation is done so lets callback + callback() + } + } + } + animateScroll() +} diff --git a/src/utils/utils.js b/src/utils/utils.js new file mode 100644 index 0000000..253b5b1 --- /dev/null +++ b/src/utils/utils.js @@ -0,0 +1,81 @@ +import DateUtils from './DateUtils.js'; + +/** + * 将制定格式的时间字符串转换成long + *
  • 0-yyyyMMdd
    • + *
  • 1-yyyy-MM-dd
    • + *
  • 2-HHmmss
    • + *
  • 3-HH:mm:ss
    • + *
  • 4-HHmmssSSS
    • + *
  • 5-HH:mm:ss.SSS
    • + *
  • 6-yyyyMMddHHmmss
    • + *
  • 7-yyyy-MM-dd HH:mm:ss
    • + *
  • 8-yyyyMMddHHmmssSSS
    • + *
  • 9-yyyy-MM-dd HH:mm:ss.SSS
    • + *
  • 10-yyyy/MM/dd HH:mm
    • + *
  • 11-yyyy/MM/dd HH:mm:ss
    • + */ +// 日期格式处理 精确到时分秒 如：2018-10-24 08:41:33 +export function timeFormatter(value, row, index) { + if (value == null || value == undefined || value == '') { + return "-"; + } else { + return DateUtils.long2String(value, 7); + } +} + +// 日期格式处理 精确到年月日 如：2018-10-24 +export function timeOneFormatter(value, row, index) { + if (value == null || value == undefined || value == '') { + return "-"; + } else { + return DateUtils.long2String(value, 1); + } +} + +// 时间处理，获取日期的当天开始时间：'2019-06-01 00:00:00' +export function getBeginOfTheDay(value) { + if (value == null || value == undefined || value == '') { + return new Date(new Date(new Date().toLocaleDateString()).getTime()); + } else { + return new Date(new Date(value.toLocaleDateString()).getTime()); + } +} + +// 时间处理，获取日期的当天开始时间：'2019-06-01 23:59:59 +export function getEndOfTheDay(value) { + if (value == null || value == undefined || value == '') { + return new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1); + } else { + return new Date(new Date(value.toLocaleDateString()).getTime()+24*60*60*1000-1); + } +} + +// 日期格式处理 精确到年月 如：2018-10 +export function yearMonthFormatter(value, row, index) { + if (value == null || value == undefined || value == '') { + return "-"; + } else { + var str = DateUtils.long2String(value, 1); + return str.substr(0, 7); + } +} + +// 金钱格式处理 +export function moneyFormatter(value) { + if (value == '0' || value == undefined || value == null || value === '') { + return '0.00'; + } else { + return (value / 100).toFixed(2); + } +} + + + + + + + + + + diff --git a/src/utils/validate.js b/src/utils/validate.js new file mode 100644 index 0000000..8d962ad --- /dev/null +++ b/src/utils/validate.js @@ -0,0 +1,20 @@ +/** + * Created by PanJiaChen on 16/11/18. + */ + +/** + * @param {string} path + * @returns {Boolean} + */ +export function isExternal(path) { + return /^(https?:|mailto:|tel:)/.test(path) +} + +/** + * @param {string} str + * @returns {Boolean} + */ +export function validUsername(str) { + const valid_map = ['admin', 'editor'] + return valid_map.indexOf(str.trim()) >= 0 +} diff --git a/src/views/account/index.vue b/src/views/account/index.vue new file mode 100644 index 0000000..608ce0a --- /dev/null +++ b/src/views/account/index.vue @@ -0,0 +1,313 @@ + + + + diff --git a/src/views/cardticket/index.vue b/src/views/cardticket/index.vue new file mode 100644 index 0000000..553a402 --- /dev/null +++ b/src/views/cardticket/index.vue @@ -0,0 +1,159 @@ + + + + + + + diff --git a/src/views/dashboard/dashboard.vue b/src/views/dashboard/dashboard.vue new file mode 100644 index 0000000..cf704a7 --- /dev/null +++ b/src/views/dashboard/dashboard.vue @@ -0,0 +1,405 @@ + + + + + diff --git a/src/views/information/index.vue b/src/views/information/index.vue new file mode 100644 index 0000000..e12e5c8 --- /dev/null +++ b/src/views/information/index.vue @@ -0,0 +1,216 @@ + + + + + diff --git a/src/views/login/index.vue b/src/views/login/index.vue new file mode 100644 index 0000000..0b62a75 --- /dev/null +++ b/src/views/login/index.vue @@ -0,0 +1,286 @@ + + + + + + + diff --git a/src/views/mycar/index.vue b/src/views/mycar/index.vue new file mode 100644 index 0000000..fab6962 --- /dev/null +++ b/src/views/mycar/index.vue @@ -0,0 +1,214 @@ + + + + + + diff --git a/src/views/myevaluate/index.vue b/src/views/myevaluate/index.vue new file mode 100644 index 0000000..3e2c13a --- /dev/null +++ b/src/views/myevaluate/index.vue @@ -0,0 +1,236 @@ + + + + + + diff --git a/src/views/order/index.vue b/src/views/order/index.vue new file mode 100644 index 0000000..b2eb69c --- /dev/null +++ b/src/views/order/index.vue @@ -0,0 +1,206 @@ + + + + + + diff --git a/src/views/payback/index.vue b/src/views/payback/index.vue new file mode 100644 index 0000000..ed24181 --- /dev/null +++ b/src/views/payback/index.vue @@ -0,0 +1,327 @@ + + + + + + diff --git a/src/views/service.vue b/src/views/service.vue index c33f5f6..820e9ec 100644 --- a/src/views/service.vue +++ b/src/views/service.vue @@ -1,88 +1,91 @@ + import config from '../components/config' + import NavMenu from '../components/NavMenu'; - diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue new file mode 100644 index 0000000..b0a362e --- /dev/null +++ b/src/views/settings/index.vue @@ -0,0 +1,114 @@ + + + +