Commit 21bb7bf62d04c0fb1bac5cdce15090da4518f745
1 parent
65d81c4b
历史欠费缴纳
Showing
3 changed files
with
164 additions
and
39 deletions
src/api/parkRecord/parkRecord.js
src/components/parkRecord.vue
... | ... | @@ -14,33 +14,33 @@ |
14 | 14 | <!--本次缴费--> |
15 | 15 | <div v-show="currentTabActive==0"> |
16 | 16 | |
17 | - <div> | |
17 | + <div v-if="parkingData.length>0"> | |
18 | 18 | <p class="free-tip">您为会员卡车辆无需缴费,请直接离场。</p> |
19 | 19 | |
20 | 20 | <div class="cost-main" > |
21 | 21 | <ul class="cost-header"> |
22 | - <li :class="carColor | formateColor">蒙DMW169</li> | |
22 | + <li :class="carColor | formateColor">{{i.carNumber}}</li> | |
23 | 23 | <li>本次费用</li> |
24 | 24 | </ul> |
25 | 25 | |
26 | 26 | <div class="cost-body"> |
27 | 27 | <p>车辆类型:临停车</p> |
28 | - <p>车场名称:赤峰金店南 | |
28 | + <p>车场名称:{{i.parkName}} | |
29 | 29 | </p> |
30 | - <p> 进场时间:2020-12-19 12:59:18 | |
30 | + <p> 进场时间:{{i.parkInTime}} | |
31 | 31 | </p> |
32 | - <p>出场时间:2020-12-19 12:17:52 | |
32 | + <p>出场时间:{{i.parkOutTime}} | |
33 | 33 | </p> |
34 | - <p>停车时长:18分钟33秒</p> | |
34 | + <p>停车时长:{{ $utils.dateFormat(i.parkDuration)}}</p> | |
35 | 35 | <div class="out-wrap"> |
36 | - <p class="mon-wrap">¥1.50</p> | |
36 | + <p class="mon-wrap">¥{{(i.totalFee/100).toFixed(2)}}</p> | |
37 | 37 | <p class="out-btn">出场缴费</p> |
38 | 38 | </div> |
39 | 39 | </div> |
40 | 40 | </div> |
41 | 41 | </div> |
42 | 42 | <!--没有在停费用--> |
43 | - <div class="noRecord">暂无记录</div> | |
43 | + <div class="noRecord" v-else>暂无记录</div> | |
44 | 44 | |
45 | 45 | |
46 | 46 | </div> |
... | ... | @@ -51,7 +51,7 @@ |
51 | 51 | |
52 | 52 | <div class="history-body"> |
53 | 53 | <p class="money-all">总欠费金额: |
54 | - <span>¥15.50</span> | |
54 | + <span>¥{{(allMoney/100).toFixed(2)}}</span> | |
55 | 55 | </p> |
56 | 56 | |
57 | 57 | <div class="cost-main cost-main-history" style="padding-left: 50px;" |
... | ... | @@ -61,22 +61,22 @@ |
61 | 61 | :class="{isChecked: i.checked}" |
62 | 62 | > |
63 | 63 | <ul class="cost-header"> |
64 | - <li :class="carColor | formateColor">蒙DMW169</li> | |
64 | + <li :class="carColor | formateColor">{{i.carNumber}}</li> | |
65 | 65 | <li>欠费</li> |
66 | 66 | </ul> |
67 | 67 | |
68 | 68 | <div class="cost-body"> |
69 | 69 | <p>车辆类型:临停车</p> |
70 | 70 | |
71 | - <p>车场名称:赤峰金店南 | |
71 | + <p>车场名称:{{i.parkName}} | |
72 | 72 | </p> |
73 | - <p> 进场时间:2020-12-19 12:59:18 | |
73 | + <p> 进场时间:{{i.parkInTime}} | |
74 | 74 | </p> |
75 | - <p>出场时间:2020-12-19 12:17:52 | |
75 | + <p>出场时间:{{i.parkOutTime}} | |
76 | 76 | </p> |
77 | - <p>停车时长:18分钟33秒</p> | |
77 | + <p>停车时长:{{ $utils.dateFormat(i.parkDuration)}}</p> | |
78 | 78 | <div class="out-wrap"> |
79 | - <p class="mon-wrap">¥1.50</p> | |
79 | + <p class="mon-wrap">¥{{(i.totalFee/100).toFixed(2)}}</p> | |
80 | 80 | </div> |
81 | 81 | |
82 | 82 | </div> |
... | ... | @@ -88,7 +88,7 @@ |
88 | 88 | <div class="history-footer"> |
89 | 89 | <p class="statistical-data">您已选中 |
90 | 90 | <span>{{historyCheckedLen}}</span>笔交易 |
91 | - 合计:¥ <span>{{historyCheckedMon/100}}.00</span> | |
91 | + 合计:¥ <span>{{(historyCheckedMon/100).toFixed(2)}}</span> | |
92 | 92 | </p> |
93 | 93 | <div class="opration-wrap"> |
94 | 94 | <p class="check-btn" :class="{isAllChecked:allChecked}" |
... | ... | @@ -123,7 +123,7 @@ |
123 | 123 | </template> |
124 | 124 | |
125 | 125 | <script> |
126 | -import { parkRecordList } from '@/api/parkRecord/parkRecord.js' | |
126 | +import { parkRecordList, historyQuery } from '@/api/parkRecord/parkRecord.js' | |
127 | 127 | import axios from 'axios' |
128 | 128 | |
129 | 129 | export default { |
... | ... | @@ -137,16 +137,17 @@ export default { |
137 | 137 | carColor: 1,// 车牌颜色 |
138 | 138 | currentTabActive: 1, // 显示当前哪个 |
139 | 139 | carNumber: '', // 车牌号码 |
140 | + parkingData:[], // 在停数据 | |
140 | 141 | parkList: [], // 停车记录数据 |
141 | 142 | historyList:[ // 历史欠费数据 |
142 | 143 | {money:100,checked:false, id: 1}, |
143 | - {money:200,checked:false, id: 2}, | |
144 | - {money:300,checked:false, id: 3}, | |
145 | - {money:400,checked:false, id: 4}, | |
144 | + | |
146 | 145 | ] , |
147 | 146 | allChecked:false, // 全部选择事件 |
147 | + allMoney:0, // 欠费所有的费用 | |
148 | 148 | historyCheckedLen:0, //选中了几笔交易 |
149 | 149 | historyCheckedMon: 0, //选中了待缴纳的金额 |
150 | + orderIds: [] // 选中数据的订单 数组 | |
150 | 151 | } |
151 | 152 | }, |
152 | 153 | mounted(){ |
... | ... | @@ -168,7 +169,9 @@ export default { |
168 | 169 | { keyname: 'pageSize', value: 1000 }, |
169 | 170 | { keyname: 'parkState', value: 10 }, |
170 | 171 | { keyname: 'terminalSource', value: 7 }, |
171 | - { keyname: 'carNumber', value: this.carNumber } | |
172 | + { keyname: 'carNumber', value: this.carNumber }, | |
173 | + { keyname: 'orgId', value: this.$utils.myOrgId }, | |
174 | + | |
172 | 175 | ]; |
173 | 176 | var md5sign = this.$utils.myGetSign(sortd); |
174 | 177 | var jsondata = { |
... | ... | @@ -181,15 +184,30 @@ export default { |
181 | 184 | parkState: 10, |
182 | 185 | terminalSource: 7, |
183 | 186 | carNumber: this.carNumber, |
184 | - sign: md5sign | |
187 | + sign: md5sign, | |
188 | + orgId: this.$utils.myOrgId | |
185 | 189 | } |
190 | + | |
191 | + | |
192 | + // jsondata.sign = md5sign | |
186 | 193 | console.log('停车记录传参 ' + JSON.stringify(jsondata)); |
187 | 194 | parkRecordList(jsondata).then(response => { |
188 | 195 | console.log(response) |
189 | 196 | this.parkList = response.data.dataList |
190 | - this.historyList = this.parkList.filter((item) => { | |
191 | - return item.parkState = '20' | |
197 | + | |
198 | + | |
199 | + this.parkingData = this.parkList.filter(item => { | |
200 | + return item.parkState == '10' | |
192 | 201 | }) |
202 | + console.log(this.parkingData) | |
203 | + this.historyList = this.parkList.filter(item => { | |
204 | + return item.parkState == '20' | |
205 | + }) | |
206 | + this.historyList.forEach( i => { | |
207 | + this.allMoney += Number(i.totalFee) | |
208 | + }) | |
209 | + | |
210 | + console.log(this.historyList) | |
193 | 211 | }) |
194 | 212 | }, |
195 | 213 | |
... | ... | @@ -201,12 +219,17 @@ export default { |
201 | 219 | chooseHandle(i, index) { // 历史欠费单个选择事件 |
202 | 220 | i.checked = !i.checked |
203 | 221 | let me = this |
222 | + | |
204 | 223 | if(i.checked ){ //单个选中 |
205 | 224 | me.historyCheckedLen ++ |
206 | - me.historyCheckedMon += i.money | |
225 | + if(me.historyCheckedLen == this.historyList.length){ | |
226 | + this.allChecked = true | |
227 | + } | |
228 | + me.historyCheckedMon += Number(i.totalFee) | |
207 | 229 | }else{ //单个不选中 |
230 | + this.allChecked = false | |
208 | 231 | me.historyCheckedLen -- |
209 | - me.historyCheckedMon -= i.money | |
232 | + me.historyCheckedMon -= Number(i.totalFee) | |
210 | 233 | } |
211 | 234 | |
212 | 235 | |
... | ... | @@ -214,21 +237,22 @@ export default { |
214 | 237 | checkedAll() { // 全选选择事件 |
215 | 238 | this.allChecked = !this.allChecked |
216 | 239 | if(this.allChecked){ //全选 |
217 | - let me = this | |
218 | - me.historyCheckedMon = 0 | |
240 | + let me = this | |
219 | 241 | this.historyList.forEach(function(item){ |
220 | 242 | item.checked = true; |
221 | - me.historyCheckedMon += item.money | |
243 | + me.orderIds.push(item.orderId) | |
222 | 244 | }); |
245 | + this.historyCheckedMon = this.allMoney | |
223 | 246 | this.historyCheckedLen = this.historyList.length |
224 | - }else{ //反选 | |
225 | 247 | |
248 | + }else{ //反选 | |
226 | 249 | this.historyList.forEach(function(item){ |
227 | 250 | item.checked = false; |
228 | 251 | |
229 | 252 | }); |
230 | 253 | this.historyCheckedLen = 0 |
231 | 254 | this.historyCheckedMon = 0 |
255 | + this.orderIds = [] | |
232 | 256 | } |
233 | 257 | }, |
234 | 258 | toPayPage() { //缴纳费用 |
... | ... | @@ -236,14 +260,55 @@ export default { |
236 | 260 | this.$refs.alert.open() |
237 | 261 | return |
238 | 262 | } |
239 | - this.$router.push( | |
240 | - { | |
241 | - path:'orderPay', | |
242 | - query:{ | |
243 | - carColor:0 | |
244 | - } | |
245 | - } | |
246 | - ) | |
263 | + var salt = this.$utils.myCommonSalt(32); | |
264 | + | |
265 | + var list = "[" + this.orderIds + "]" | |
266 | + // var orderlist = this.orderIds | |
267 | + // var codes = "[" + fun.parkCodes + "]" | |
268 | + | |
269 | + var sortd = [ | |
270 | + | |
271 | + { keyname: 'app_id', value: this.$utils.myVarAppid }, | |
272 | + { keyname: 'deviceInfo', value: this.$utils.myDeviceInfo }, | |
273 | + { keyname: 'salt', value: salt }, | |
274 | + { keyname: 'sign_type', value: 'md5' }, | |
275 | + { keyname: 'orderIds', value: list }, | |
276 | + { keyname: 'terminalSource', value: 7 }, | |
277 | + { keyname: 'orgId', value: this.$utils.myOrgId }, | |
278 | + { keyname: 'payType', value:4 }, | |
279 | + { keyname: 'appId', value: this.$utils.myVxAppId } | |
280 | + | |
281 | + ]; | |
282 | + var md5sign = this.$utils.myGetSign(sortd); | |
283 | + | |
284 | + var jsondata = { | |
285 | + app_id: this.$utils.myVarAppid, | |
286 | + deviceInfo: this.$utils.myDeviceInfo, | |
287 | + salt: salt, | |
288 | + sign: md5sign, | |
289 | + sign_type: "md5", | |
290 | + appId: this.$utils.myVxAppId, | |
291 | + orderIds: list, | |
292 | + terminalSource: '7', | |
293 | + payType: 4, | |
294 | + orgId: this.$utils.myOrgId, | |
295 | + } | |
296 | + | |
297 | + historyQuery(jsondata).then(response => { | |
298 | + console.log(response) | |
299 | + | |
300 | + }) | |
301 | + | |
302 | + | |
303 | + | |
304 | + // this.$router.push( | |
305 | + // { | |
306 | + // path:'orderPay', | |
307 | + // query:{ | |
308 | + // carColor:0 | |
309 | + // } | |
310 | + // } | |
311 | + // ) | |
247 | 312 | } |
248 | 313 | }, |
249 | 314 | filters: { | ... | ... |
src/utils/utils.js
... | ... | @@ -38,8 +38,60 @@ export default { |
38 | 38 | return strmd5; |
39 | 39 | }, |
40 | 40 | |
41 | + dateFormat: function (msd) { // 时间转换 | |
42 | + var time = msd | |
43 | + | |
44 | + if (null != time && "" != time) { | |
45 | + | |
46 | + if (time > 60 && time < 60 * 60) { | |
47 | + | |
48 | + time = parseInt(time / 60.0) + "分钟" + parseInt((parseFloat(time / 60.0) - | |
49 | + | |
50 | + parseInt(time / 60.0)) * 60) + "秒"; | |
51 | + | |
52 | + } | |
53 | + | |
54 | + else if (time >= 60 * 60 && time < 60 * 60 * 24) { | |
55 | + | |
56 | + time = parseInt(time / 3600.0) + "小时" + parseInt((parseFloat(time / 3600.0) - | |
57 | + | |
58 | + parseInt(time / 3600.0)) * 60) + "分钟" + | |
59 | + | |
60 | + parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) - | |
61 | + | |
62 | + parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60) + "秒"; | |
63 | + | |
64 | + } else if (time >= 60 * 60 * 24) { | |
65 | + | |
66 | + time = parseInt(time / 3600.0 / 24) + "天" + parseInt((parseFloat(time / 3600.0 / 24) - | |
67 | + | |
68 | + parseInt(time / 3600.0 / 24)) * 24) + "小时" + parseInt((parseFloat(time / 3600.0) - | |
69 | + | |
70 | + parseInt(time / 3600.0)) * 60) + "分钟" + | |
71 | + | |
72 | + parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) - | |
73 | + | |
74 | + parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60) + "秒"; | |
75 | + | |
76 | + } | |
77 | + | |
78 | + else { | |
79 | + | |
80 | + time = parseInt(time) + "秒"; | |
81 | + | |
82 | + } | |
83 | + | |
84 | + } | |
85 | + | |
86 | + return time; | |
87 | + }, | |
88 | + | |
41 | 89 | myVarAppid:'ud8yq5tv0inxupc05xfeau39jywlqoj2',// 公共请求Appid |
42 | 90 | |
43 | - myDeviceInfo: 'BC0703A4-AFB0-4B51-9089-9B7487C0CC6E' // 公共请求设备信息 | |
91 | + myDeviceInfo: 'BC0703A4-AFB0-4B51-9089-9B7487C0CC6E', // 公共请求设备信息 | |
92 | + | |
93 | + myVxAppId: 'wx2af2bab90d433c86' , // 微信赤峰 appid | |
94 | + | |
95 | + myOrgId: '10003' // 归属地 赤峰id | |
44 | 96 | |
45 | 97 | } | ... | ... |