Commit ea291b39fb2b7bfaf54f09203ccf0283d0e7b5fd
1 parent
9804b54b
提交登陆
Showing
13 changed files
with
990 additions
and
147 deletions
.env.development
src/api/cardticket.js
0 → 100644
src/api/mycar.js
0 → 100644
src/api/user.js
@@ -9,7 +9,6 @@ export function login(data) { | @@ -9,7 +9,6 @@ export function login(data) { | ||
9 | } | 9 | } |
10 | 10 | ||
11 | export function getInfo(token) { | 11 | export function getInfo(token) { |
12 | - debugger | ||
13 | return request({ | 12 | return request({ |
14 | url: '/personPc/getUserInfo', | 13 | url: '/personPc/getUserInfo', |
15 | method: 'post', | 14 | method: 'post', |
src/filters/index.js
0 → 100644
1 | +// import parseTime, formatTime and set to filter | ||
2 | +export { parseTime, formatTime } from '@/utils' | ||
3 | +let moment = require("moment"); | ||
4 | +/** | ||
5 | + * Show plural label if time is plural number | ||
6 | + * @param {number} time | ||
7 | + * @param {string} label | ||
8 | + * @return {string} | ||
9 | + */ | ||
10 | +function pluralize(time, label) { | ||
11 | + if (time === 1) { | ||
12 | + return time + label | ||
13 | + } | ||
14 | + return time + label + 's' | ||
15 | +} | ||
16 | + | ||
17 | +/** | ||
18 | + * @param {number} time | ||
19 | + */ | ||
20 | +export function timeAgo(time) { | ||
21 | + const between = Date.now() / 1000 - Number(time) | ||
22 | + if (between < 3600) { | ||
23 | + return pluralize(~~(between / 60), ' minute') | ||
24 | + } else if (between < 86400) { | ||
25 | + return pluralize(~~(between / 3600), ' hour') | ||
26 | + } else { | ||
27 | + return pluralize(~~(between / 86400), ' day') | ||
28 | + } | ||
29 | +} | ||
30 | + | ||
31 | +/** | ||
32 | + * Number formatting | ||
33 | + * like 10000 => 10k | ||
34 | + * @param {number} num | ||
35 | + * @param {number} digits | ||
36 | + */ | ||
37 | +export function numberFormatter(num, digits) { | ||
38 | + const si = [ | ||
39 | + { value: 1E18, symbol: 'E' }, | ||
40 | + { value: 1E15, symbol: 'P' }, | ||
41 | + { value: 1E12, symbol: 'T' }, | ||
42 | + { value: 1E9, symbol: 'G' }, | ||
43 | + { value: 1E6, symbol: 'M' }, | ||
44 | + { value: 1E3, symbol: 'k' } | ||
45 | + ] | ||
46 | + for (let i = 0; i < si.length; i++) { | ||
47 | + if (num >= si[i].value) { | ||
48 | + return (num / si[i].value + 0.1).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol | ||
49 | + } | ||
50 | + } | ||
51 | + return num.toString() | ||
52 | +} | ||
53 | + | ||
54 | +/** | ||
55 | + * 10000 => "10,000" | ||
56 | + * @param {number} num | ||
57 | + */ | ||
58 | +export function toThousandFilter(num) { | ||
59 | + return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ',')) | ||
60 | +} | ||
61 | + | ||
62 | +/** | ||
63 | + * 分转元 | ||
64 | + * @param {number} num | ||
65 | + */ | ||
66 | +export function fen2Yuan(num) { | ||
67 | + if(num == undefined || num == null){ | ||
68 | + return 0; | ||
69 | + } | ||
70 | + num = num / 100; | ||
71 | + return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ',')) | ||
72 | +} | ||
73 | + | ||
74 | +/** | ||
75 | + * Upper case first char | ||
76 | + * @param {String} string | ||
77 | + */ | ||
78 | +export function uppercaseFirst(string) { | ||
79 | + return string.charAt(0).toUpperCase() + string.slice(1) | ||
80 | +} | ||
81 | + | ||
82 | +/** | ||
83 | + * 将制定格式的时间字符串转换成long | ||
84 | + * <li>0-yyyyMMdd</li> | ||
85 | + * <li>1-yyyy-MM-dd</li> | ||
86 | + * <li>2-HHmmss</li> | ||
87 | + * <li>3-HH:mm:ss</li> | ||
88 | + * <li>4-HHmmssSSS</li> | ||
89 | + * <li>5-HH:mm:ss.SSS</li> | ||
90 | + * <li>6-yyyyMMddHHmmss</li> | ||
91 | + * <li>7-yyyy-MM-dd HH:mm:ss</li> | ||
92 | + * <li>8-yyyyMMddHHmmssSSS</li> | ||
93 | + * <li>9-yyyy-MM-dd HH:mm:ss.SSS</li> | ||
94 | + * <li>10-yyyy/MM/dd HH:mm</li> | ||
95 | + * <li>11-yyyy/MM/dd HH:mm:ss</li> | ||
96 | + * </ul> | ||
97 | + */ | ||
98 | +export function string2Long(str, format) { | ||
99 | + if (str == null || str == "") { | ||
100 | + return ""; | ||
101 | + } | ||
102 | + return date2Long(string2Date(str, format)); | ||
103 | +} | ||
104 | + | ||
105 | +export function date2Long (date) { | ||
106 | + return date.getTime(); | ||
107 | +} | ||
108 | + | ||
109 | +/** | ||
110 | + * 将字符串转化为相应时间 | ||
111 | + * | ||
112 | + * @param {} | ||
113 | + * dateStr 时间字符串 | ||
114 | + * @param {} | ||
115 | + * formatType 指定格式: | ||
116 | + * <ul> | ||
117 | + * <li>0-yyyyMMdd</li> | ||
118 | + * <li>1-yyyy-MM-dd</li> | ||
119 | + * <li>2-HHmmss</li> | ||
120 | + * <li>3-HH:mm:ss</li> | ||
121 | + * <li>4-HHmmssSSS</li> | ||
122 | + * <li>5-HH:mm:ss.SSS</li> | ||
123 | + * <li>6-yyyyMMddHHmmss</li> | ||
124 | + * <li>7-yyyy-MM-dd HH:mm:ss</li> | ||
125 | + * <li>8-yyyyMMddHHmmssSSS</li> | ||
126 | + * <li>9-yyyy-MM-dd HH:mm:ss.SSS</li> | ||
127 | + * <li>10-yyyy/MM/dd HH:mm</li> | ||
128 | + * <li>11-yyyy/MM/dd HH:mm:ss</li> | ||
129 | + | ||
130 | + * </ul> | ||
131 | + * @return 解析后的Date对象 | ||
132 | + */ | ||
133 | +export function string2Date(date,formatType) { | ||
134 | + let dateTime; | ||
135 | + switch (formatType) { | ||
136 | + case 0 : | ||
137 | + dateTime= moment(date).format("YYYYMMDD"); | ||
138 | + break; | ||
139 | + case 1 : | ||
140 | + dateTime= moment(date).format("YYYY-MM-DD"); | ||
141 | + break; | ||
142 | + case 2 : | ||
143 | + dateTime= moment(date).format("HHmmss"); | ||
144 | + break; | ||
145 | + case 3 : | ||
146 | + dateTime= moment(date).format("HH:mm:ss"); | ||
147 | + break; | ||
148 | + case 4 : | ||
149 | + dateTime= moment(date).format("HHmmssSSS"); | ||
150 | + break; | ||
151 | + case 5 : | ||
152 | + dateTime= moment(date).format("HH:mm:ss.SSS"); | ||
153 | + break; | ||
154 | + case 6 : | ||
155 | + dateTime= moment(date).format("YYYY-MM-DDHHmmss"); | ||
156 | + break; | ||
157 | + case 7 : | ||
158 | + dateTime= moment(date).format("YYYY-MM-DD HH:mm:ss"); | ||
159 | + | ||
160 | + break; | ||
161 | + case 8 : | ||
162 | + dateTime= moment(date).format("yyyyMMddHHmmssSSS"); | ||
163 | + break; | ||
164 | + case 9 : | ||
165 | + dateTime= moment(date).format("yyyy-MM-dd HH:mm:ss.SSS"); | ||
166 | + break; | ||
167 | + case 10 ://yyyy/MM/dd HH:mm | ||
168 | + dateTime= moment(date).format("yyyy/MM/dd HH:mm"); | ||
169 | + break; | ||
170 | + case 11 ://yyyy/MM/dd HH:mm:ss | ||
171 | + dateTime= moment(date).format("yyyy/MM/dd HH:mm:ss"); | ||
172 | + break; | ||
173 | + } | ||
174 | + return dateTime; | ||
175 | +} | ||
176 | + | ||
177 | +/**类型转换*/ | ||
178 | +export function busTypeFomatter(value){ | ||
179 | + //业务类型: 1:收入 2:退款 3:支出 | ||
180 | + if(value == 1){ | ||
181 | + return '交易'; | ||
182 | + }else if(value == 2){ | ||
183 | + return '退款'; | ||
184 | + }else if(value == 3){ | ||
185 | + return '支出'; | ||
186 | + }else{ | ||
187 | + return '未知'; | ||
188 | + } | ||
189 | +}; | ||
190 | +export function payTypeFomatter(value){ | ||
191 | + //业务类型: 1:收入 2:退款 3:支出 | ||
192 | + if(value == 1){ | ||
193 | + return '支付宝'; | ||
194 | + }else if(value == 2){ | ||
195 | + return '微信'; | ||
196 | + }else if(value == 3){ | ||
197 | + return '银联'; | ||
198 | + }else if(value == 4){ | ||
199 | + return '服务号'; | ||
200 | + }else{ | ||
201 | + return '未知'; | ||
202 | + } | ||
203 | +}; | ||
204 | +export function payOrderTypeFomatter(row,value){ | ||
205 | + //101:停车付款单,102:停车预付单,103:停车补缴单,104:共享车位;201:余额充值单,202:押金充值;301:会员卡购买单,302:会员卡续费 | ||
206 | + if(value == 101){ | ||
207 | + return '交易-临停支付'; | ||
208 | + }else if(value == 102){ | ||
209 | + return '交易-停车预付'; | ||
210 | + }else if(value == 103){ | ||
211 | + return '交易-停车补缴'; | ||
212 | + }else if(value == 104){ | ||
213 | + return '交易-共享车位预定'; | ||
214 | + }else if(value == 201){ | ||
215 | + if(row.terminalSource!='' ||row.terminalSource!=null ||row.terminalSource!=undefined||row.terminalSource!='null'){ | ||
216 | + if(row.terminalSource == 1){ | ||
217 | + return '交易-余额充值'; | ||
218 | + } else if(row.terminalSource == 2){ | ||
219 | + return '交易-收费员充值'; | ||
220 | + }else { | ||
221 | + return '交易-余额充值'; | ||
222 | + } | ||
223 | + } | ||
224 | + else{ | ||
225 | + return '交易-余额充值'; | ||
226 | + } | ||
227 | + | ||
228 | + }else if(value == 202){ | ||
229 | + return '交易-押金充值'; | ||
230 | + }else if(value == 301){ | ||
231 | + return '交易-会员卡购买'; | ||
232 | + }else if(value == 302){ | ||
233 | + return '交易-会员卡续费'; | ||
234 | + }else{ | ||
235 | + return '未知'; | ||
236 | + } | ||
237 | +}; |
src/main.js
@@ -11,6 +11,7 @@ import '@/styles/index.scss' // global css | @@ -11,6 +11,7 @@ import '@/styles/index.scss' // global css | ||
11 | import App from './App' | 11 | import App from './App' |
12 | import store from './store' | 12 | import store from './store' |
13 | import router from './router' | 13 | import router from './router' |
14 | +import * as filters from './filters' // global filters | ||
14 | 15 | ||
15 | import '@/icons' // icon | 16 | import '@/icons' // icon |
16 | import '@/permission' // permission control | 17 | import '@/permission' // permission control |
@@ -28,6 +29,10 @@ import '@/permission' // permission control | @@ -28,6 +29,10 @@ import '@/permission' // permission control | ||
28 | // mockXHR() | 29 | // mockXHR() |
29 | // } | 30 | // } |
30 | 31 | ||
32 | +// register global utility filters | ||
33 | +Object.keys(filters).forEach(key => { | ||
34 | + Vue.filter(key, filters[key]) | ||
35 | +}) | ||
31 | // set ElementUI lang to EN | 36 | // set ElementUI lang to EN |
32 | Vue.use(ElementUI, { locale }) | 37 | Vue.use(ElementUI, { locale }) |
33 | 38 |
src/store/modules/user.js
@@ -45,7 +45,6 @@ const actions = { | @@ -45,7 +45,6 @@ const actions = { | ||
45 | // get user info | 45 | // get user info |
46 | getInfo({ commit, state }) { | 46 | getInfo({ commit, state }) { |
47 | return new Promise((resolve, reject) => { | 47 | return new Promise((resolve, reject) => { |
48 | - debugger | ||
49 | getInfo(state.token).then(response => { | 48 | getInfo(state.token).then(response => { |
50 | const { data } = response | 49 | const { data } = response |
51 | 50 |
src/utils/DateUtils.js
0 → 100755
1 | +/** | ||
2 | + * 时间处理工具 | ||
3 | + * | ||
4 | + * @type | ||
5 | + * @author miaofc | ||
6 | + */ | ||
7 | +export default { | ||
8 | + | ||
9 | + /** | ||
10 | + * 日期对象转换为毫秒数 | ||
11 | + */ | ||
12 | + | ||
13 | + date2Long: function (date) { | ||
14 | + return date.getTime(); | ||
15 | + }, | ||
16 | + /** | ||
17 | + * 毫秒转换为日期对象 | ||
18 | + * @param dateVal number 日期的毫秒数 | ||
19 | + */ | ||
20 | + long2Date: function (dateVal) { | ||
21 | + return new Date(dateVal); | ||
22 | + }, | ||
23 | + | ||
24 | + /** | ||
25 | + * 将制定格式的时间字符串转换成long | ||
26 | + * <li>0-yyyyMMdd</li> | ||
27 | + * <li>1-yyyy-MM-dd</li> | ||
28 | + * <li>2-HHmmss</li> | ||
29 | + * <li>3-HH:mm:ss</li> | ||
30 | + * <li>4-HHmmssSSS</li> | ||
31 | + * <li>5-HH:mm:ss.SSS</li> | ||
32 | + * <li>6-yyyyMMddHHmmss</li> | ||
33 | + * <li>7-yyyy-MM-dd HH:mm:ss</li> | ||
34 | + * <li>8-yyyyMMddHHmmssSSS</li> | ||
35 | + * <li>9-yyyy-MM-dd HH:mm:ss.SSS</li> | ||
36 | + * <li>10-yyyy/MM/dd HH:mm</li> | ||
37 | + * <li>11-yyyy/MM/dd HH:mm:ss</li> | ||
38 | + * </ul> | ||
39 | + */ | ||
40 | + string2Long: function (str, format) { | ||
41 | + if (str == null || str == "") { | ||
42 | + return ""; | ||
43 | + } | ||
44 | + return this.date2Long(this.string2Date(str, format)); | ||
45 | + }, | ||
46 | + | ||
47 | + | ||
48 | + /** | ||
49 | + * 毫秒转换为日期对象 | ||
50 | + * | ||
51 | + * @param dateVal | ||
52 | + * | ||
53 | + | ||
54 | + */ | ||
55 | + long2String: function (dateVal, formatType) { | ||
56 | + if (dateVal == undefined || dateVal == null) { | ||
57 | + return '-' | ||
58 | + } | ||
59 | + return this.date2String(new Date(dateVal), formatType); | ||
60 | + }, | ||
61 | + | ||
62 | + | ||
63 | + /** | ||
64 | + * 将时间转化为相应字符串 | ||
65 | + * | ||
66 | + * @param {} | ||
67 | + * date 待格式化的Date对象 | ||
68 | + * @param {} | ||
69 | + * formatType 指定格式: | ||
70 | + * <ul> | ||
71 | + * <li>0-yyyyMMdd</li> | ||
72 | + * <li>1-yyyy-MM-dd</li> | ||
73 | + * <li>2-HHmmss</li> | ||
74 | + * <li>3-HH:mm:ss</li> | ||
75 | + * <li>4-HHmmssSSS</li> | ||
76 | + * <li>5-HH:mm:ss.SSS</li> | ||
77 | + * <li>6-yyyyMMddHHmmss</li> | ||
78 | + * <li>7-yyyy-MM-dd HH:mm:ss</li> | ||
79 | + * <li>8-yyyyMMddHHmmssSSS</li> | ||
80 | + * <li>9-yyyy-MM-dd HH:mm:ss.SSS</li> | ||
81 | + * <li>10-yyyy/MM/dd HH:mm</li> | ||
82 | + * </ul> | ||
83 | + * @return string 格式化后的字符串 | ||
84 | + */ | ||
85 | + date2String: function (date, formatType) { | ||
86 | + if (undefined == date || null == date) { | ||
87 | + return '-'; | ||
88 | + } | ||
89 | + // 格式化字符串数组 | ||
90 | + 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"]; | ||
91 | + return this.formatDate(date, patterns[formatType]); | ||
92 | + }, | ||
93 | + | ||
94 | + /** | ||
95 | + * 将字符串转化为相应时间 | ||
96 | + * | ||
97 | + * @param {} | ||
98 | + * dateStr 时间字符串 | ||
99 | + * @param {} | ||
100 | + * formatType 指定格式: | ||
101 | + * <ul> | ||
102 | + * <li>0-yyyyMMdd</li> | ||
103 | + * <li>1-yyyy-MM-dd</li> | ||
104 | + * <li>2-HHmmss</li> | ||
105 | + * <li>3-HH:mm:ss</li> | ||
106 | + * <li>4-HHmmssSSS</li> | ||
107 | + * <li>5-HH:mm:ss.SSS</li> | ||
108 | + * <li>6-yyyyMMddHHmmss</li> | ||
109 | + * <li>7-yyyy-MM-dd HH:mm:ss</li> | ||
110 | + * <li>8-yyyyMMddHHmmssSSS</li> | ||
111 | + * <li>9-yyyy-MM-dd HH:mm:ss.SSS</li> | ||
112 | + * <li>10-yyyy/MM/dd HH:mm</li> | ||
113 | + * <li>11-yyyy/MM/dd HH:mm:ss</li> | ||
114 | + | ||
115 | + * </ul> | ||
116 | + * @return 解析后的Date对象 | ||
117 | + */ | ||
118 | + string2Date:function (date,formatType) { | ||
119 | + let dateTime; | ||
120 | + switch (formatType) { | ||
121 | + case 0 : | ||
122 | + dateTime= moment(date).format("YYYYMMDD"); | ||
123 | + break; | ||
124 | + case 1 : | ||
125 | + dateTime= moment(date).format("YYYY-MM-DD"); | ||
126 | + break; | ||
127 | + case 2 : | ||
128 | + dateTime= moment(date).format("HHmmss"); | ||
129 | + break; | ||
130 | + case 3 : | ||
131 | + dateTime= moment(date).format("HH:mm:ss"); | ||
132 | + break; | ||
133 | + case 4 : | ||
134 | + dateTime= moment(date).format("HHmmssSSS"); | ||
135 | + break; | ||
136 | + case 5 : | ||
137 | + dateTime= moment(date).format("HH:mm:ss.SSS"); | ||
138 | + break; | ||
139 | + case 6 : | ||
140 | + dateTime= moment(date).format("YYYY-MM-DDHHmmss"); | ||
141 | + break; | ||
142 | + case 7 : | ||
143 | + dateTime= moment(date).format("YYYY-MM-DD HH:mm:ss"); | ||
144 | + | ||
145 | + break; | ||
146 | + case 8 : | ||
147 | + dateTime= moment(date).format("yyyyMMddHHmmssSSS"); | ||
148 | + break; | ||
149 | + case 9 : | ||
150 | + dateTime= moment(date).format("yyyy-MM-dd HH:mm:ss.SSS"); | ||
151 | + break; | ||
152 | + case 10 ://yyyy/MM/dd HH:mm | ||
153 | + dateTime= moment(date).format("yyyy/MM/dd HH:mm"); | ||
154 | + break; | ||
155 | + case 11 ://yyyy/MM/dd HH:mm:ss | ||
156 | + dateTime= moment(date).format("yyyy/MM/dd HH:mm:ss"); | ||
157 | + break; | ||
158 | + } | ||
159 | + return dateTime; | ||
160 | + }, | ||
161 | + /** | ||
162 | + * 格式化时间 | ||
163 | + * | ||
164 | + * @param {} | ||
165 | + * date 待格式化的Date对象 | ||
166 | + * @param {} | ||
167 | + * pattern 格式化模式,可能包含下列字母 | ||
168 | + * <ul> | ||
169 | + * <li> G 公元前/后 "G":"BC"/"AD" </li> | ||
170 | + * <li> y 年份 "yyyy":"1996";"yy":"96" </li> | ||
171 | + * <li> M 月份 "MMMM":July;"MMM":Jul;"MM":07 </li> | ||
172 | + * <li> d 在某月中的日期 "dd":"10" </li> | ||
173 | + * <li> a Am/pm "a":"AM"/"PM" </li> | ||
174 | + * <li> H 在某天中的小时(0-23) "HH":"13" </li> | ||
175 | + * <li> K 在上午或下午中的小时(0-11) "KK":"03" </li> | ||
176 | + * <li> m 分钟 "mm":"10" </li> | ||
177 | + * <li> s 秒钟 "ss":"09" </li> | ||
178 | + * <li> S 毫秒 "SSS":"978" </li> | ||
179 | + * </ul> | ||
180 | + * @return 格式化后的字符串 | ||
181 | + */ | ||
182 | + formatDate: function (date, pattern) { | ||
183 | + var dateStr = new String(pattern); | ||
184 | + // 格式化公元信息 | ||
185 | + dateStr = dateStr.replace("G", date.getFullYear() >= 0 ? "AD" : "BC"); | ||
186 | + // 格式化年份信息 | ||
187 | + var year = new String(date.getFullYear()); | ||
188 | + dateStr = dateStr.replace("yyyy", year); | ||
189 | + dateStr = dateStr.replace("yy", year.substring(year.length - 2, year.length)); | ||
190 | + // 格式化月份信息 | ||
191 | + var month = date.getMonth(); | ||
192 | + var monthFullNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; | ||
193 | + var monthShortNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; | ||
194 | + dateStr = dateStr.replace("MMMM", monthFullNames[month]); | ||
195 | + dateStr = dateStr.replace("MMM", monthShortNames[month]); | ||
196 | + dateStr = dateStr.replace("MM", month < 9 ? "0" + (month + 1) : month + 1); | ||
197 | + // 格式化月份中的日期 | ||
198 | + var day = date.getDate(); | ||
199 | + dateStr = dateStr.replace("dd", day < 10 ? "0" + day : day); | ||
200 | + // 格式化上下午 | ||
201 | + dateStr = dateStr.replace("a", date.getHours() < 12 ? "AM" : "PM"); | ||
202 | + // 格式化小时 | ||
203 | + var hour = date.getHours(); | ||
204 | + dateStr = dateStr.replace("HH", hour < 10 ? "0" + hour : hour); | ||
205 | + var khour = hour > 11 ? hour - 12 : hour; | ||
206 | + dateStr = dateStr.replace("KK", khour < 10 ? "0" + khour : khour); | ||
207 | + // 格式化分钟 | ||
208 | + var minute = date.getMinutes(); | ||
209 | + dateStr = dateStr.replace("mm", minute < 10 ? "0" + minute : minute); | ||
210 | + // 格式化秒钟 | ||
211 | + var second = date.getSeconds(); | ||
212 | + dateStr = dateStr.replace("ss", second < 10 ? "0" + second : second); | ||
213 | + // 格式化毫秒 | ||
214 | + var millisecond = date.getMilliseconds(); | ||
215 | + dateStr = dateStr.replace("SSS", millisecond < 10 ? "00" + millisecond : (millisecond < 100 ? "0" + millisecond : millisecond)); | ||
216 | + return dateStr; | ||
217 | + }, | ||
218 | + | ||
219 | + /** | ||
220 | + * 取得date在域field上偏移amount后的值 | ||
221 | + * | ||
222 | + * @param {} | ||
223 | + * date 原始时间 | ||
224 | + * @param {} | ||
225 | + * field 偏移域,可能的取值: | ||
226 | + * <ul> | ||
227 | + * <li>"year"/"y":年</li> | ||
228 | + * <li>"month"/"M":月</li> | ||
229 | + * <li>"day"/"d":日</li> | ||
230 | + * <li>"hour"/"h":时</li> | ||
231 | + * <li>"minute"/"m":分</li> | ||
232 | + * <li>"second"/"s":秒</li> | ||
233 | + * <li>"millisecond"/"ms"/"S":毫秒</li> | ||
234 | + * </ul> | ||
235 | + * @param {} | ||
236 | + * amount 偏移量 | ||
237 | + * @return 偏移后的时间 | ||
238 | + */ | ||
239 | + dateOffset: function (date, field, amount) { | ||
240 | + var mount = 0; | ||
241 | + switch (field) { | ||
242 | + // 以年为单位位移 | ||
243 | + case "year", "y": | ||
244 | + mount = 31536000 * 1000; | ||
245 | + // newDate.setFullYear(date.getFullYear()+amount); | ||
246 | + break; | ||
247 | + // 以月份为单位位移 | ||
248 | + case "month", "M": | ||
249 | + mount = 30 * 24 * 60 * 60 * 1000; | ||
250 | + // newDate.setMonth(date.getMonth()+amount); | ||
251 | + break; | ||
252 | + // 以天为单位位移 | ||
253 | + case "day", "d": | ||
254 | + mount = 24 * 60 * 60 * 1000; | ||
255 | + // newDate.setDate(date.getDate()+amount); | ||
256 | + break; | ||
257 | + // 以小时为单位位移 | ||
258 | + case "hour", "h": | ||
259 | + mount = 60 * 60 * 1000; | ||
260 | + // newDate.setHours(date.getHours()+amount); | ||
261 | + break; | ||
262 | + // 以分钟为单位位移 | ||
263 | + case "minute", "m": | ||
264 | + mount = 60 * 1000; | ||
265 | + // newDate.setMinutes(date.getMinutes()+amount); | ||
266 | + break; | ||
267 | + // 以秒为单位位移 | ||
268 | + case "second", "s": | ||
269 | + mount = 1000; | ||
270 | + // newDate.setSeconds(date.getSeconds+amount); | ||
271 | + break; | ||
272 | + // 以毫秒为单位位移 | ||
273 | + case "millisecond", "ms", "S": | ||
274 | + mount = 1; | ||
275 | + // newDate.setMilliseconds(date.getMilliseconds+amount); | ||
276 | + break; | ||
277 | + } | ||
278 | + var newDate = new Date(date.getTime() + Number(mount) * Number(amount)); | ||
279 | + return newDate; | ||
280 | + }, | ||
281 | + | ||
282 | + /** | ||
283 | + * 求两个日期间相差的毫秒数 | ||
284 | + * | ||
285 | + * @param {} | ||
286 | + * date1 时间1 | ||
287 | + * @param {} | ||
288 | + * date2 时间2 | ||
289 | + * @return 两个时间相差的毫秒数 | ||
290 | + */ | ||
291 | + getDiffMillis: function (date1, date2) { | ||
292 | + return date1.getTime() - date2.getTime(); | ||
293 | + }, | ||
294 | + | ||
295 | + /** | ||
296 | + * 求两个日期间相差的秒数 | ||
297 | + * | ||
298 | + * @param {} | ||
299 | + * date1 时间1 | ||
300 | + * @param {} | ||
301 | + * date2 时间2 | ||
302 | + * @return 两个时间相差的秒数 | ||
303 | + */ | ||
304 | + getDiffSeconds: function (date1, date2) { | ||
305 | + return Math.floor(this.getDiffMillis(date1, date2) / 1000); | ||
306 | + }, | ||
307 | + | ||
308 | + /** | ||
309 | + * 求两个日期间相差的分钟数目 | ||
310 | + * | ||
311 | + * @param {} | ||
312 | + * date1 时间1 | ||
313 | + * @param {} | ||
314 | + * date2 时间2 | ||
315 | + * @return 两个时间相差的分钟数 | ||
316 | + */ | ||
317 | + getDiffMinutes: function (date1, date2) { | ||
318 | + return Math.floor(this.getDiffSeconds(date1, date2) / 60); | ||
319 | + }, | ||
320 | + | ||
321 | + /** | ||
322 | + * 求两个日期间相差的小时数目 | ||
323 | + * | ||
324 | + * @param {} | ||
325 | + * date1 时间1 | ||
326 | + * @param {} | ||
327 | + * date2 时间2 | ||
328 | + * @return 两个时间相差的小时数 | ||
329 | + */ | ||
330 | + getDiffHours: function (date1, date2) { | ||
331 | + return Math.floor(this.getDiffMinutes(date1, date2) / 60); | ||
332 | + }, | ||
333 | + | ||
334 | + /** | ||
335 | + * 求两个日期间相差的天数 | ||
336 | + * | ||
337 | + * @param {} | ||
338 | + * date1 时间1 | ||
339 | + * @param {} | ||
340 | + * date2 时间2 | ||
341 | + * @return 两个时间相差的天数 | ||
342 | + */ | ||
343 | + getDiffDays: function (date1, date2) { | ||
344 | + return Math.floor(this.getDiffHours(date1, date2) / 24); | ||
345 | + }, | ||
346 | + | ||
347 | + /** | ||
348 | + * 求两个日期间相差的月数目。认为每个月均为30天。 | ||
349 | + * | ||
350 | + * @param {} | ||
351 | + * date1 时间1 | ||
352 | + * @param {} | ||
353 | + * date2 时间2 | ||
354 | + * @return 两个时间相差的月树 | ||
355 | + */ | ||
356 | + getDiffMonths: function (date1, date2) { | ||
357 | + return Math.floor(this.getDiffDays(date1, date2) / 30); | ||
358 | + }, | ||
359 | + | ||
360 | + /** | ||
361 | + * 求两个日期间相差的自然月数目 | ||
362 | + * | ||
363 | + * @param {} | ||
364 | + * date1 时间1 | ||
365 | + * @param {} | ||
366 | + * date2 时间2 | ||
367 | + * @return 两个时间相差的自然月数 | ||
368 | + */ | ||
369 | + getDiffNaturalMonth: function (date1, date2) { | ||
370 | + var month1 = date1.getMonth(); | ||
371 | + var month2 = date2.getMonth(); | ||
372 | + return this.getDiffYears(date1, date2) * 12 - (month2 - month1); | ||
373 | + }, | ||
374 | + | ||
375 | + /** | ||
376 | + * 求两个日期间相差的年数目 | ||
377 | + * | ||
378 | + * @param {} | ||
379 | + * date1 时间1 | ||
380 | + * @param {} | ||
381 | + * date2 时间2 | ||
382 | + * @return 两个时间相差的年数 | ||
383 | + */ | ||
384 | + getDiffYears: function (date1, date2) { | ||
385 | + return date1.getFullYear() - date2.getFullYear(); | ||
386 | + }, | ||
387 | + | ||
388 | + /** | ||
389 | + * 求日期为其所在月份的第几天 | ||
390 | + * | ||
391 | + * @param {} | ||
392 | + * day 目标日 | ||
393 | + * @return 目标日是第几天。天数从1开始 | ||
394 | + */ | ||
395 | + getOrinalOfDayInYear: function (day) { | ||
396 | + // 得到一年中的第一天 | ||
397 | + var firstDay = new Date(day.getFullYear, 0, 1); | ||
398 | + // 计算与第一天的差值 | ||
399 | + return this.getDiffDays(day, firstDay) + 1; | ||
400 | + }, | ||
401 | + | ||
402 | + /** | ||
403 | + * 求日期为其所在月份的第几天 | ||
404 | + * | ||
405 | + * @param {} | ||
406 | + * day 目标日 | ||
407 | + * @return 目标日是第几天。天数从1开始 | ||
408 | + */ | ||
409 | + getOrinalOfDayInMonth: function (day) { | ||
410 | + // 得到一个月中的第一天 | ||
411 | + var firstDay = new Date(day.getFullYear, day.getMonth(), 1); | ||
412 | + // 计算与第一天的差值 | ||
413 | + return this.getDiffDays(day, firstDay) + 1; | ||
414 | + }, | ||
415 | + | ||
416 | + /** | ||
417 | + * 求日期为其所在周的第几天 | ||
418 | + * | ||
419 | + * @param {} | ||
420 | + * day 目标日 | ||
421 | + * @return 目标日是第几天。天数从1开始 | ||
422 | + */ | ||
423 | + getOrinalOfDayInWeek: function (day) { | ||
424 | + return day.getDay() + 1; | ||
425 | + }, | ||
426 | + | ||
427 | + /** | ||
428 | + * 求某年共有多少天 | ||
429 | + * | ||
430 | + * @param {} | ||
431 | + * year 年份 | ||
432 | + * @return 该年份共有多少天 | ||
433 | + */ | ||
434 | + getNumberOfDaysInYear: function (year) { | ||
435 | + // 若该年份为闰年,返回366 | ||
436 | + if ((year % 100 != 0 && year % 4 == 0) || (year % 400 == 0)) { | ||
437 | + return 366; | ||
438 | + } | ||
439 | + // 普通年份返回365 | ||
440 | + return 365; | ||
441 | + }, | ||
442 | + | ||
443 | + /** | ||
444 | + * 求某月共有多少天 | ||
445 | + * | ||
446 | + * @param {} | ||
447 | + * year 年份 | ||
448 | + * @param {} | ||
449 | + * month 月份 | ||
450 | + * @return 该月内共有多少天 | ||
451 | + */ | ||
452 | + getNumberOfDaysInMonth: function (year, month) { | ||
453 | + // 得到该月份的第一天 | ||
454 | + var date1 = new Date(year, month - 1, 1); | ||
455 | + // 得到后一个月份的第一天 | ||
456 | + var date2 = ""; | ||
457 | + if (month != 11) { | ||
458 | + date2 = new Date(year, month, 1); | ||
459 | + } else { | ||
460 | + date2 = new Date(year - 1, 0, 1); | ||
461 | + } | ||
462 | + return this.getDiffDays(date1, date2); | ||
463 | + }, | ||
464 | + | ||
465 | + /** | ||
466 | + * 得到当前年份一共有多少天 | ||
467 | + * | ||
468 | + * @return 当前年份共有多少天 | ||
469 | + */ | ||
470 | + getNumberOfDaysInCurrentYear: function () { | ||
471 | + var date = new Date(); | ||
472 | + return this.getNumberOfDaysInYear(date.getYear()); | ||
473 | + }, | ||
474 | + | ||
475 | + /** | ||
476 | + * 得到当前月份一共有多少天 | ||
477 | + * | ||
478 | + * @return 当前月份共有多少天 | ||
479 | + */ | ||
480 | + getNumberOfDaysInCurrentMonth: function () { | ||
481 | + var date = new Date(); | ||
482 | + return this.getNumberOfDaysInMonth(date.getYear(), date.getMonth() + 1); | ||
483 | + }, | ||
484 | + | ||
485 | +// 金钱格式处理 | ||
486 | + moneyFormatter: function (value) { | ||
487 | + if (value == '0' || value == undefined || value == null || value === '') { | ||
488 | + return '0.00'; | ||
489 | + } else { | ||
490 | + return (value / 100).toFixed(2); | ||
491 | + } | ||
492 | + } | ||
493 | + | ||
494 | +}; |
src/utils/request.js
@@ -58,7 +58,6 @@ service.interceptors.response.use( | @@ -58,7 +58,6 @@ service.interceptors.response.use( | ||
58 | } | 58 | } |
59 | }, | 59 | }, |
60 | error => { | 60 | error => { |
61 | - debugger | ||
62 | console.log('err' + error) // for debug | 61 | console.log('err' + error) // for debug |
63 | Message({ | 62 | Message({ |
64 | message: error.message, | 63 | message: error.message, |
src/utils/utils.js
0 → 100644
1 | +import DateUtils from './DateUtils.js'; | ||
2 | + | ||
3 | +/** | ||
4 | + * 将制定格式的时间字符串转换成long | ||
5 | + * <li>0-yyyyMMdd</li> | ||
6 | + * <li>1-yyyy-MM-dd</li> | ||
7 | + * <li>2-HHmmss</li> | ||
8 | + * <li>3-HH:mm:ss</li> | ||
9 | + * <li>4-HHmmssSSS</li> | ||
10 | + * <li>5-HH:mm:ss.SSS</li> | ||
11 | + * <li>6-yyyyMMddHHmmss</li> | ||
12 | + * <li>7-yyyy-MM-dd HH:mm:ss</li> | ||
13 | + * <li>8-yyyyMMddHHmmssSSS</li> | ||
14 | + * <li>9-yyyy-MM-dd HH:mm:ss.SSS</li> | ||
15 | + * <li>10-yyyy/MM/dd HH:mm</li> | ||
16 | + * <li>11-yyyy/MM/dd HH:mm:ss</li> | ||
17 | + */ | ||
18 | +// 日期格式处理 精确到时分秒 如:2018-10-24 08:41:33 | ||
19 | +export function timeFormatter(value, row, index) { | ||
20 | + if (value == null || value == undefined || value == '') { | ||
21 | + return "-"; | ||
22 | + } else { | ||
23 | + return DateUtils.long2String(value, 7); | ||
24 | + } | ||
25 | +} | ||
26 | + | ||
27 | +// 日期格式处理 精确到年月日 如:2018-10-24 | ||
28 | +export function timeOneFormatter(value, row, index) { | ||
29 | + if (value == null || value == undefined || value == '') { | ||
30 | + return "-"; | ||
31 | + } else { | ||
32 | + return DateUtils.long2String(value, 1); | ||
33 | + } | ||
34 | +} | ||
35 | + | ||
36 | +// 时间处理,获取日期的当天开始时间:'2019-06-01 00:00:00' | ||
37 | +export function getBeginOfTheDay(value) { | ||
38 | + if (value == null || value == undefined || value == '') { | ||
39 | + return new Date(new Date(new Date().toLocaleDateString()).getTime()); | ||
40 | + } else { | ||
41 | + return new Date(new Date(value.toLocaleDateString()).getTime()); | ||
42 | + } | ||
43 | +} | ||
44 | + | ||
45 | +// 时间处理,获取日期的当天开始时间:'2019-06-01 23:59:59 | ||
46 | +export function getEndOfTheDay(value) { | ||
47 | + if (value == null || value == undefined || value == '') { | ||
48 | + return new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1); | ||
49 | + } else { | ||
50 | + return new Date(new Date(value.toLocaleDateString()).getTime()+24*60*60*1000-1); | ||
51 | + } | ||
52 | +} | ||
53 | + | ||
54 | +// 日期格式处理 精确到年月 如:2018-10 | ||
55 | +export function yearMonthFormatter(value, row, index) { | ||
56 | + if (value == null || value == undefined || value == '') { | ||
57 | + return "-"; | ||
58 | + } else { | ||
59 | + var str = DateUtils.long2String(value, 1); | ||
60 | + return str.substr(0, 7); | ||
61 | + } | ||
62 | +} | ||
63 | + | ||
64 | +// 金钱格式处理 | ||
65 | +export function moneyFormatter(value) { | ||
66 | + if (value == '0' || value == undefined || value == null || value === '') { | ||
67 | + return '0.00'; | ||
68 | + } else { | ||
69 | + return (value / 100).toFixed(2); | ||
70 | + } | ||
71 | +} | ||
72 | + | ||
73 | + | ||
74 | + | ||
75 | + | ||
76 | + | ||
77 | + | ||
78 | + | ||
79 | + | ||
80 | + | ||
81 | + |
src/views/cardticket/index.vue
@@ -5,17 +5,18 @@ | @@ -5,17 +5,18 @@ | ||
5 | <el-row :gutter="16" class=""> | 5 | <el-row :gutter="16" class=""> |
6 | <el-col :span="6" v-for="(ticket,id) in ticketList" :key="id" class="margin-bottom16"> | 6 | <el-col :span="6" v-for="(ticket,id) in ticketList" :key="id" class="margin-bottom16"> |
7 | <el-card class="box-card"> | 7 | <el-card class="box-card"> |
8 | - <div class="ticket-title boxshadow-4 " :class="ticket.ptype == 1 ?'eff-bgcolor': 'off-bgcolor'"> | ||
9 | - <div class=" float-left" :class="ticket.ptype == 1 ?'eff-icon': 'off-icon'"></div> | ||
10 | - <div class="ticket-name hs-hidden-nowrap hs-cursor-pointer float-left" >{{ticket.plname}}</div> | ||
11 | - <div class="ticket-oper float-right">{{ticket.pname}}</div> | 8 | + <div class="ticket-title boxshadow-4 eff-bgcolor " > |
9 | + <div class=" float-left eff-icon"></div> | ||
10 | + <div class="ticket-name hs-hidden-nowrap hs-cursor-pointer float-left" >{{ticket.orgName}}-{{ticket.cardName}}</div> | ||
11 | + <div class="ticket-oper float-right">有效</div> | ||
12 | </div> | 12 | </div> |
13 | <div class="ticket-content"> | 13 | <div class="ticket-content"> |
14 | - <div class="ticket-main clearfix"> | ||
15 | - <div class=" hs-hidden-nowrap hs-cursor-pointer float-left" :class="ticket.ptype == 1 ?'ticket-effmoney': 'ticket-offmoney'">{{ticket.pmoney}}</div> | 14 | + <div class="ticket-main clearfix" > |
15 | + <div class=" hs-hidden-nowrap hs-cursor-pointer float-left ticket-effmoney" >{{ticket.fullCutValue | fen2Yuan}}</div> | ||
16 | + | ||
16 | <div class="ticket-notes float-left">元 优惠券</div> | 17 | <div class="ticket-notes float-left">元 优惠券</div> |
17 | </div> | 18 | </div> |
18 | - <div class="ticket-time">有效时间:{{ticket.ptime}}</div> | 19 | + <div class="ticket-time">有效时间:{{ticket.endTime | string2Date(1)}}</div> |
19 | </div> | 20 | </div> |
20 | </el-card> | 21 | </el-card> |
21 | </el-col> | 22 | </el-col> |
@@ -24,82 +25,34 @@ | @@ -24,82 +25,34 @@ | ||
24 | </template> | 25 | </template> |
25 | 26 | ||
26 | <script> | 27 | <script> |
28 | + import {getCouponPerson} from '@/api/cardticket.js'; | ||
27 | export default { | 29 | export default { |
28 | - | ||
29 | data() { | 30 | data() { |
30 | return { | 31 | return { |
31 | ticketList:[ | 32 | ticketList:[ |
32 | - { | 33 | + /*{ |
33 | id:'123', | 34 | id:'123', |
34 | ptype:'1', | 35 | ptype:'1', |
35 | plname:'静雅地上停车场', | 36 | plname:'静雅地上停车场', |
36 | pname:'有效', | 37 | pname:'有效', |
37 | pmoney:'50', | 38 | pmoney:'50', |
38 | ptime:'2019/8/30', | 39 | ptime:'2019/8/30', |
39 | - }, | ||
40 | - { | ||
41 | - id:'123', | ||
42 | - ptype:'2', | ||
43 | - plname:'静雅地上停车场', | ||
44 | - pname:'无效', | ||
45 | - pmoney:'50', | ||
46 | - ptime:'2019/8/30', | ||
47 | - }, | ||
48 | - { | ||
49 | - id:'123', | ||
50 | - ptype:'2', | ||
51 | - plname:'静雅地上停车场', | ||
52 | - pname:'无效', | ||
53 | - pmoney:'50', | ||
54 | - ptime:'2019/8/30', | ||
55 | - }, | ||
56 | - { | ||
57 | - id:'123', | ||
58 | - ptype:'1', | ||
59 | - plname:'静雅地上停车场', | ||
60 | - pname:'有效', | ||
61 | - pmoney:'50', | ||
62 | - ptime:'2019/8/30', | ||
63 | - }, | ||
64 | - { | ||
65 | - id:'123', | ||
66 | - ptype:'1', | ||
67 | - plname:'静雅地上停车场', | ||
68 | - pname:'有效', | ||
69 | - pmoney:'50', | ||
70 | - ptime:'2019/8/30', | ||
71 | - }, | ||
72 | - { | ||
73 | - id:'123', | ||
74 | - ptype:'2', | ||
75 | - plname:'静雅地上停车场', | ||
76 | - pname:'无效', | ||
77 | - pmoney:'50', | ||
78 | - ptime:'2019/8/30', | ||
79 | - }, | ||
80 | - { | ||
81 | - id:'123', | ||
82 | - ptype:'2', | ||
83 | - plname:'静雅地上停车场', | ||
84 | - pname:'无效', | ||
85 | - pmoney:'50', | ||
86 | - ptime:'2019/8/30', | ||
87 | - }, | ||
88 | - { | ||
89 | - id:'123', | ||
90 | - ptype:'1', | ||
91 | - plname:'静雅地上停车场', | ||
92 | - pname:'有效', | ||
93 | - pmoney:'50', | ||
94 | - ptime:'2019/8/30', | ||
95 | - }, | 40 | + }*/ |
96 | ] | 41 | ] |
97 | } | 42 | } |
98 | }, | 43 | }, |
99 | - | ||
100 | - | ||
101 | methods: { | 44 | methods: { |
102 | - | 45 | + /**查询车主个人卡券*/ |
46 | + getCouponPerson:function () { | ||
47 | + getCouponPerson().then(response =>{ | ||
48 | + if(response.code='8888'){ | ||
49 | + this.ticketList=response.data; | ||
50 | + } | ||
51 | + }); | ||
52 | + } | ||
53 | + }, | ||
54 | + mounted:function () { | ||
55 | + this.getCouponPerson(); | ||
103 | } | 56 | } |
104 | } | 57 | } |
105 | </script> | 58 | </script> |
src/views/login/index.vue
@@ -109,14 +109,17 @@ export default { | @@ -109,14 +109,17 @@ export default { | ||
109 | //获取验证码 | 109 | //获取验证码 |
110 | else { | 110 | else { |
111 | sendValidatorCode(phone).then(response =>{ | 111 | sendValidatorCode(phone).then(response =>{ |
112 | - if(response.code=='8888'){ | 112 | + let data = response.data; |
113 | + debugger; | ||
114 | + if(data.code=='8888'){ | ||
113 | this.$message({ | 115 | this.$message({ |
114 | type: 'success', | 116 | type: 'success', |
115 | message: '验证码发送成功!' | 117 | message: '验证码发送成功!' |
116 | }); | 118 | }); |
117 | } | 119 | } |
118 | }); | 120 | }); |
119 | - this.validateBtn(); | 121 | + //this.validateBtn(); |
122 | + | ||
120 | } | 123 | } |
121 | }, | 124 | }, |
122 | validateBtn(){ | 125 | validateBtn(){ |
@@ -136,7 +139,6 @@ export default { | @@ -136,7 +139,6 @@ export default { | ||
136 | }, | 139 | }, |
137 | handleLogin() { | 140 | handleLogin() { |
138 | this.$refs.loginForm.validate(valid => { | 141 | this.$refs.loginForm.validate(valid => { |
139 | - debugger | ||
140 | if (valid) { | 142 | if (valid) { |
141 | this.loading = true | 143 | this.loading = true |
142 | this.$store.dispatch('user/login', this.loginForm).then(() => { | 144 | this.$store.dispatch('user/login', this.loginForm).then(() => { |
src/views/mycar/index.vue
@@ -5,113 +5,163 @@ | @@ -5,113 +5,163 @@ | ||
5 | <el-row :gutter="20"> | 5 | <el-row :gutter="20"> |
6 | <el-form ref="form" :model="form" label-width="60px" label-position="left"> | 6 | <el-form ref="form" :model="form" label-width="60px" label-position="left"> |
7 | <el-col :xs="8" :sm="6" :md="7" :lg="7" :xl="1"> | 7 | <el-col :xs="8" :sm="6" :md="7" :lg="7" :xl="1"> |
8 | - <el-form-item label="我的账户"> | ||
9 | - <el-input v-model="form.email" maxlength="20" readonly /> | 8 | + <el-form-item label="账户ID"> |
9 | + <el-input v-model="form.custId" maxlength="20" :disabled="true"/> | ||
10 | + </el-form-item> | ||
11 | + </el-col> | ||
12 | + <el-col :xs="8" :sm="6" :md="7" :lg="7" :xl="1" :offset="8"> | ||
13 | + <el-form-item label="手机号"> | ||
14 | + <el-input v-model="form.phone" maxlength="20" :disabled="true"/> | ||
10 | </el-form-item> | 15 | </el-form-item> |
11 | </el-col> | 16 | </el-col> |
12 | </el-form> | 17 | </el-form> |
13 | </el-row> | 18 | </el-row> |
14 | </div> | 19 | </div> |
20 | + <el-row :gutter="20" style="margin-top: 8px"> | ||
21 | + <el-col :span="12"> | ||
22 | + <el-card class="box-card" style="height: 300px"> | ||
23 | + <div slot="header" class="clearfix"> | ||
24 | + <span>车牌绑定</span> | ||
25 | + </div> | ||
26 | + <el-form ref="bondform" :model="bondform" label-width="60px" label-position="left" :rules="rules"> | ||
27 | + <el-row :gutter="20"> | ||
28 | + <el-col :span="12"> | ||
29 | + <el-form-item label="车牌号" prop="carNum"> | ||
30 | + <el-input type="text" v-model="bondform.carNum"/> | ||
31 | + </el-form-item> | ||
32 | + </el-col> | ||
33 | + <el-col :span="12"> | ||
34 | + <el-button type="primary" :loading="bondformBtnVisible" @click="bondCarNum('bondform')">绑定车牌</el-button> | ||
35 | + </el-col> | ||
36 | + </el-row> | ||
37 | + | ||
38 | + </el-form> | ||
39 | + | ||
40 | + </el-card> | ||
41 | + </el-col> | ||
42 | + <el-col :span="12"> | ||
43 | + <el-card class="box-card" style="height: 300px"> | ||
44 | + <div slot="header" class="clearfix"> | ||
45 | + <span>解绑车牌</span> | ||
46 | + </div> | ||
47 | + <el-form ref="form" :model="form" label-width="60px" label-position="left"> | ||
48 | + <el-row :gutter="20" v-for="item in alredyBoundCar" style="margin-top: 4px"> | ||
49 | + <el-col :span="12"> | ||
50 | + <el-form-item label="已绑车牌"> | ||
51 | + <el-input :value="item.carNumber"/> | ||
52 | + </el-form-item> | ||
53 | + </el-col> | ||
54 | + <el-col :span="12"> | ||
55 | + <el-button type="primary" @click="alredyBoundCarBtn(item.carNumber)">解绑车牌</el-button> | ||
56 | + </el-col> | ||
57 | + </el-row> | ||
58 | + | ||
59 | + </el-form> | ||
60 | + | ||
61 | + </el-card> | ||
62 | + </el-col> | ||
63 | + </el-row> | ||
64 | + | ||
15 | 65 | ||
16 | - <el-card shadow="always" class="card-second-top"> | ||
17 | - <div slot="header" class="clearfix" style="line-height: 32px;"> | ||
18 | - <span>我的车牌</span> | ||
19 | - <el-button type="primary" size="small" style="float: right" @click="dialogFormVisible = true">绑定车牌</el-button> | ||
20 | - </div> | ||
21 | - <el-form label-width="60px" style="margin-bottom: 55px;" label-position="left"> | ||
22 | - <el-col :xs="8" :sm="6" :md="7" :lg="7" :xl="1"> | ||
23 | - <el-form-item label=""> | ||
24 | - <el-select v-model="value" > | ||
25 | - <el-option | ||
26 | - v-for="item in region" | ||
27 | - :key="item.value" | ||
28 | - :label="item.label" | ||
29 | - :value="item.value" | ||
30 | - > | ||
31 | - </el-option> | ||
32 | - </el-select> | ||
33 | - </el-form-item> | ||
34 | - </el-col> | ||
35 | - <el-col :xs="8" :sm="6" :md="3" :lg="3" :xl="1"> | ||
36 | - <el-button type="primary" @click="onSubmit">解绑</el-button> | ||
37 | - </el-col> | ||
38 | - </el-form> | ||
39 | - </el-card> | ||
40 | - | ||
41 | - <el-dialog title="绑定车牌" :visible.sync="dialogFormVisible"> | ||
42 | - <el-form :model="problemform" label-width="60px" label-position="left"> | ||
43 | - <el-col :xs="8" :sm="6" :md="7" :lg="7" :xl="1"> | ||
44 | - <el-form-item label="车牌"> | ||
45 | - <el-input v-model="problemform.carnum" maxlength="20" /> | ||
46 | - </el-form-item> | ||
47 | - </el-col> | ||
48 | - </el-form> | ||
49 | - <div slot="footer" class="dialog-footer"> | ||
50 | - <el-button @click="dialogFormVisible = false">取 消</el-button> | ||
51 | - <el-button type="primary" @click="dialogFormVisible = false">绑定</el-button> | ||
52 | - </div> | ||
53 | - </el-dialog> | ||
54 | </div> | 66 | </div> |
55 | </template> | 67 | </template> |
56 | 68 | ||
57 | <script> | 69 | <script> |
70 | + import {getPersonCarNumPC} from '@/api/mycar.js'; | ||
58 | export default { | 71 | export default { |
59 | data() { | 72 | data() { |
73 | + var carNumValidator = (rule, value, callback) => { | ||
74 | + if (value === '') { | ||
75 | + callback(new Error('请输入车牌号')); | ||
76 | + } | ||
77 | + | ||
78 | + if ( !/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/.test(this.bondform.carNum)||this.bondform.carNum.length<8) { | ||
79 | + callback(new Error('请输入正确的车牌号')); | ||
80 | + } | ||
81 | + callback(); | ||
82 | + | ||
83 | + }; | ||
60 | return { | 84 | return { |
61 | form: { | 85 | form: { |
62 | - email: '13133415312', | 86 | + custId: '', |
87 | + phone: '' | ||
63 | }, | 88 | }, |
64 | - value:'京A32323', | ||
65 | - region: [ | ||
66 | - { | ||
67 | - value: '京A32323', | ||
68 | - label: '京A32323', | ||
69 | - },{ | ||
70 | - value: '京A93323', | ||
71 | - label: '京A93323', | ||
72 | - }, | ||
73 | - ], | ||
74 | - dialogFormVisible:false, | ||
75 | - problemform:{ | ||
76 | - carnum:'', | ||
77 | - } | 89 | + /**绑定车牌.*/ |
90 | + bondform: { | ||
91 | + carNum: '' | ||
92 | + }, | ||
93 | + | ||
94 | + /**已绑定车牌.*/ | ||
95 | + alredyBoundCar:[], | ||
96 | + bondformBtnVisible: false, | ||
97 | + dialogFormVisible: false, | ||
98 | + problemform: { | ||
99 | + carnum: '', | ||
100 | + }, | ||
101 | + rules:{ | ||
102 | + carNum:[{ validator: carNumValidator, trigger: 'blur' }] | ||
103 | + } | ||
78 | } | 104 | } |
105 | + | ||
106 | + | ||
79 | }, | 107 | }, |
80 | methods: { | 108 | methods: { |
81 | - onSubmit() { | ||
82 | - this.$message({ | ||
83 | - message: '解绑成功!', | ||
84 | - type: 'success' | 109 | + /**绑定车牌*/ |
110 | + bondCarNum:function(formName){ | ||
111 | + this.$refs[formName].validate((valid) => { | ||
112 | + if (valid) { | ||
113 | + alert('submit!'); | ||
114 | + } else { | ||
115 | + console.log('error submit!!'); | ||
116 | + return false; | ||
117 | + } | ||
85 | }); | 118 | }); |
86 | }, | 119 | }, |
87 | - problemonSubmit() { | ||
88 | - this.$message('提交成功!') | ||
89 | - }, | ||
90 | - onCancel() { | ||
91 | - this.$message({ | ||
92 | - message: 'cancel!', | ||
93 | - type: 'warning' | ||
94 | - }) | 120 | + /**获取车牌.*/ |
121 | + getPersonCarNumPC:function () { | ||
122 | + let that =this; | ||
123 | + getPersonCarNumPC().then(response =>{ | ||
124 | + | ||
125 | + if(response.code ='8888'){ | ||
126 | + that.alredyBoundCar=response.data; | ||
127 | + } | ||
128 | + }); | ||
95 | }, | 129 | }, |
130 | + /**解绑车牌.*/ | ||
131 | + alredyBoundCarBtn:function (carNum) { | ||
132 | + debugger | ||
133 | + } | ||
134 | + }, | ||
135 | + mounted:function(){ | ||
136 | + let userInfo = this.$store.state.user.userInfo; | ||
137 | + this.form={ | ||
138 | + custId: userInfo.custId, | ||
139 | + phone: userInfo.userPhone | ||
140 | + }; | ||
141 | + this.getPersonCarNumPC(); | ||
96 | } | 142 | } |
97 | } | 143 | } |
98 | </script> | 144 | </script> |
99 | 145 | ||
100 | <style lang="scss"> | 146 | <style lang="scss"> |
101 | - .search-wrap{ | 147 | + .search-wrap { |
102 | background-color: #FFF; | 148 | background-color: #FFF; |
103 | padding: 15px; | 149 | padding: 15px; |
104 | } | 150 | } |
105 | - .card-second-top{ | 151 | + |
152 | + .card-second-top { | ||
106 | margin-top: 15px; | 153 | margin-top: 15px; |
107 | } | 154 | } |
108 | - .el-card__header{ | 155 | + |
156 | + .el-card__header { | ||
109 | padding: 10px 20px; | 157 | padding: 10px 20px; |
110 | } | 158 | } |
111 | - .el-radio{ | 159 | + |
160 | + .el-radio { | ||
112 | margin-right: 80px; | 161 | margin-right: 80px; |
113 | } | 162 | } |
114 | - .el-radio.is-bordered+.el-radio.is-bordered{ | 163 | + |
164 | + .el-radio.is-bordered + .el-radio.is-bordered { | ||
115 | margin-left: 0px; | 165 | margin-left: 0px; |
116 | margin-top: 15px; | 166 | margin-top: 15px; |
117 | } | 167 | } |