Commit 21bb7bf62d04c0fb1bac5cdce15090da4518f745
1 parent
65d81c4b
历史欠费缴纳
Showing
3 changed files
with
164 additions
and
39 deletions
src/api/parkRecord/parkRecord.js
@@ -7,3 +7,11 @@ export function parkRecordList(params) { | @@ -7,3 +7,11 @@ export function parkRecordList(params) { | ||
7 | data: params | 7 | data: params |
8 | }) | 8 | }) |
9 | } | 9 | } |
10 | + | ||
11 | +export function historyQuery(params) { | ||
12 | + return request({ | ||
13 | + url: '/api/queryParkOrder/queryArrearageStaForWXPublc', | ||
14 | + method: 'post', | ||
15 | + data: params | ||
16 | + }) | ||
17 | +} |
src/components/parkRecord.vue
@@ -14,33 +14,33 @@ | @@ -14,33 +14,33 @@ | ||
14 | <!--本次缴费--> | 14 | <!--本次缴费--> |
15 | <div v-show="currentTabActive==0"> | 15 | <div v-show="currentTabActive==0"> |
16 | 16 | ||
17 | - <div> | 17 | + <div v-if="parkingData.length>0"> |
18 | <p class="free-tip">您为会员卡车辆无需缴费,请直接离场。</p> | 18 | <p class="free-tip">您为会员卡车辆无需缴费,请直接离场。</p> |
19 | 19 | ||
20 | <div class="cost-main" > | 20 | <div class="cost-main" > |
21 | <ul class="cost-header"> | 21 | <ul class="cost-header"> |
22 | - <li :class="carColor | formateColor">蒙DMW169</li> | 22 | + <li :class="carColor | formateColor">{{i.carNumber}}</li> |
23 | <li>本次费用</li> | 23 | <li>本次费用</li> |
24 | </ul> | 24 | </ul> |
25 | 25 | ||
26 | <div class="cost-body"> | 26 | <div class="cost-body"> |
27 | <p>车辆类型:临停车</p> | 27 | <p>车辆类型:临停车</p> |
28 | - <p>车场名称:赤峰金店南 | 28 | + <p>车场名称:{{i.parkName}} |
29 | </p> | 29 | </p> |
30 | - <p> 进场时间:2020-12-19 12:59:18 | 30 | + <p> 进场时间:{{i.parkInTime}} |
31 | </p> | 31 | </p> |
32 | - <p>出场时间:2020-12-19 12:17:52 | 32 | + <p>出场时间:{{i.parkOutTime}} |
33 | </p> | 33 | </p> |
34 | - <p>停车时长:18分钟33秒</p> | 34 | + <p>停车时长:{{ $utils.dateFormat(i.parkDuration)}}</p> |
35 | <div class="out-wrap"> | 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 | <p class="out-btn">出场缴费</p> | 37 | <p class="out-btn">出场缴费</p> |
38 | </div> | 38 | </div> |
39 | </div> | 39 | </div> |
40 | </div> | 40 | </div> |
41 | </div> | 41 | </div> |
42 | <!--没有在停费用--> | 42 | <!--没有在停费用--> |
43 | - <div class="noRecord">暂无记录</div> | 43 | + <div class="noRecord" v-else>暂无记录</div> |
44 | 44 | ||
45 | 45 | ||
46 | </div> | 46 | </div> |
@@ -51,7 +51,7 @@ | @@ -51,7 +51,7 @@ | ||
51 | 51 | ||
52 | <div class="history-body"> | 52 | <div class="history-body"> |
53 | <p class="money-all">总欠费金额: | 53 | <p class="money-all">总欠费金额: |
54 | - <span>¥15.50</span> | 54 | + <span>¥{{(allMoney/100).toFixed(2)}}</span> |
55 | </p> | 55 | </p> |
56 | 56 | ||
57 | <div class="cost-main cost-main-history" style="padding-left: 50px;" | 57 | <div class="cost-main cost-main-history" style="padding-left: 50px;" |
@@ -61,22 +61,22 @@ | @@ -61,22 +61,22 @@ | ||
61 | :class="{isChecked: i.checked}" | 61 | :class="{isChecked: i.checked}" |
62 | > | 62 | > |
63 | <ul class="cost-header"> | 63 | <ul class="cost-header"> |
64 | - <li :class="carColor | formateColor">蒙DMW169</li> | 64 | + <li :class="carColor | formateColor">{{i.carNumber}}</li> |
65 | <li>欠费</li> | 65 | <li>欠费</li> |
66 | </ul> | 66 | </ul> |
67 | 67 | ||
68 | <div class="cost-body"> | 68 | <div class="cost-body"> |
69 | <p>车辆类型:临停车</p> | 69 | <p>车辆类型:临停车</p> |
70 | 70 | ||
71 | - <p>车场名称:赤峰金店南 | 71 | + <p>车场名称:{{i.parkName}} |
72 | </p> | 72 | </p> |
73 | - <p> 进场时间:2020-12-19 12:59:18 | 73 | + <p> 进场时间:{{i.parkInTime}} |
74 | </p> | 74 | </p> |
75 | - <p>出场时间:2020-12-19 12:17:52 | 75 | + <p>出场时间:{{i.parkOutTime}} |
76 | </p> | 76 | </p> |
77 | - <p>停车时长:18分钟33秒</p> | 77 | + <p>停车时长:{{ $utils.dateFormat(i.parkDuration)}}</p> |
78 | <div class="out-wrap"> | 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 | </div> | 80 | </div> |
81 | 81 | ||
82 | </div> | 82 | </div> |
@@ -88,7 +88,7 @@ | @@ -88,7 +88,7 @@ | ||
88 | <div class="history-footer"> | 88 | <div class="history-footer"> |
89 | <p class="statistical-data">您已选中 | 89 | <p class="statistical-data">您已选中 |
90 | <span>{{historyCheckedLen}}</span>笔交易 | 90 | <span>{{historyCheckedLen}}</span>笔交易 |
91 | - 合计:¥ <span>{{historyCheckedMon/100}}.00</span> | 91 | + 合计:¥ <span>{{(historyCheckedMon/100).toFixed(2)}}</span> |
92 | </p> | 92 | </p> |
93 | <div class="opration-wrap"> | 93 | <div class="opration-wrap"> |
94 | <p class="check-btn" :class="{isAllChecked:allChecked}" | 94 | <p class="check-btn" :class="{isAllChecked:allChecked}" |
@@ -123,7 +123,7 @@ | @@ -123,7 +123,7 @@ | ||
123 | </template> | 123 | </template> |
124 | 124 | ||
125 | <script> | 125 | <script> |
126 | -import { parkRecordList } from '@/api/parkRecord/parkRecord.js' | 126 | +import { parkRecordList, historyQuery } from '@/api/parkRecord/parkRecord.js' |
127 | import axios from 'axios' | 127 | import axios from 'axios' |
128 | 128 | ||
129 | export default { | 129 | export default { |
@@ -137,16 +137,17 @@ export default { | @@ -137,16 +137,17 @@ export default { | ||
137 | carColor: 1,// 车牌颜色 | 137 | carColor: 1,// 车牌颜色 |
138 | currentTabActive: 1, // 显示当前哪个 | 138 | currentTabActive: 1, // 显示当前哪个 |
139 | carNumber: '', // 车牌号码 | 139 | carNumber: '', // 车牌号码 |
140 | + parkingData:[], // 在停数据 | ||
140 | parkList: [], // 停车记录数据 | 141 | parkList: [], // 停车记录数据 |
141 | historyList:[ // 历史欠费数据 | 142 | historyList:[ // 历史欠费数据 |
142 | {money:100,checked:false, id: 1}, | 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 | allChecked:false, // 全部选择事件 | 146 | allChecked:false, // 全部选择事件 |
147 | + allMoney:0, // 欠费所有的费用 | ||
148 | historyCheckedLen:0, //选中了几笔交易 | 148 | historyCheckedLen:0, //选中了几笔交易 |
149 | historyCheckedMon: 0, //选中了待缴纳的金额 | 149 | historyCheckedMon: 0, //选中了待缴纳的金额 |
150 | + orderIds: [] // 选中数据的订单 数组 | ||
150 | } | 151 | } |
151 | }, | 152 | }, |
152 | mounted(){ | 153 | mounted(){ |
@@ -168,7 +169,9 @@ export default { | @@ -168,7 +169,9 @@ export default { | ||
168 | { keyname: 'pageSize', value: 1000 }, | 169 | { keyname: 'pageSize', value: 1000 }, |
169 | { keyname: 'parkState', value: 10 }, | 170 | { keyname: 'parkState', value: 10 }, |
170 | { keyname: 'terminalSource', value: 7 }, | 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 | var md5sign = this.$utils.myGetSign(sortd); | 176 | var md5sign = this.$utils.myGetSign(sortd); |
174 | var jsondata = { | 177 | var jsondata = { |
@@ -181,15 +184,30 @@ export default { | @@ -181,15 +184,30 @@ export default { | ||
181 | parkState: 10, | 184 | parkState: 10, |
182 | terminalSource: 7, | 185 | terminalSource: 7, |
183 | carNumber: this.carNumber, | 186 | carNumber: this.carNumber, |
184 | - sign: md5sign | 187 | + sign: md5sign, |
188 | + orgId: this.$utils.myOrgId | ||
185 | } | 189 | } |
190 | + | ||
191 | + | ||
192 | + // jsondata.sign = md5sign | ||
186 | console.log('停车记录传参 ' + JSON.stringify(jsondata)); | 193 | console.log('停车记录传参 ' + JSON.stringify(jsondata)); |
187 | parkRecordList(jsondata).then(response => { | 194 | parkRecordList(jsondata).then(response => { |
188 | console.log(response) | 195 | console.log(response) |
189 | this.parkList = response.data.dataList | 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,12 +219,17 @@ export default { | ||
201 | chooseHandle(i, index) { // 历史欠费单个选择事件 | 219 | chooseHandle(i, index) { // 历史欠费单个选择事件 |
202 | i.checked = !i.checked | 220 | i.checked = !i.checked |
203 | let me = this | 221 | let me = this |
222 | + | ||
204 | if(i.checked ){ //单个选中 | 223 | if(i.checked ){ //单个选中 |
205 | me.historyCheckedLen ++ | 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 | }else{ //单个不选中 | 229 | }else{ //单个不选中 |
230 | + this.allChecked = false | ||
208 | me.historyCheckedLen -- | 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,21 +237,22 @@ export default { | ||
214 | checkedAll() { // 全选选择事件 | 237 | checkedAll() { // 全选选择事件 |
215 | this.allChecked = !this.allChecked | 238 | this.allChecked = !this.allChecked |
216 | if(this.allChecked){ //全选 | 239 | if(this.allChecked){ //全选 |
217 | - let me = this | ||
218 | - me.historyCheckedMon = 0 | 240 | + let me = this |
219 | this.historyList.forEach(function(item){ | 241 | this.historyList.forEach(function(item){ |
220 | item.checked = true; | 242 | item.checked = true; |
221 | - me.historyCheckedMon += item.money | 243 | + me.orderIds.push(item.orderId) |
222 | }); | 244 | }); |
245 | + this.historyCheckedMon = this.allMoney | ||
223 | this.historyCheckedLen = this.historyList.length | 246 | this.historyCheckedLen = this.historyList.length |
224 | - }else{ //反选 | ||
225 | 247 | ||
248 | + }else{ //反选 | ||
226 | this.historyList.forEach(function(item){ | 249 | this.historyList.forEach(function(item){ |
227 | item.checked = false; | 250 | item.checked = false; |
228 | 251 | ||
229 | }); | 252 | }); |
230 | this.historyCheckedLen = 0 | 253 | this.historyCheckedLen = 0 |
231 | this.historyCheckedMon = 0 | 254 | this.historyCheckedMon = 0 |
255 | + this.orderIds = [] | ||
232 | } | 256 | } |
233 | }, | 257 | }, |
234 | toPayPage() { //缴纳费用 | 258 | toPayPage() { //缴纳费用 |
@@ -236,14 +260,55 @@ export default { | @@ -236,14 +260,55 @@ export default { | ||
236 | this.$refs.alert.open() | 260 | this.$refs.alert.open() |
237 | return | 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 | filters: { | 314 | filters: { |
src/utils/utils.js
@@ -38,8 +38,60 @@ export default { | @@ -38,8 +38,60 @@ export default { | ||
38 | return strmd5; | 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 | myVarAppid:'ud8yq5tv0inxupc05xfeau39jywlqoj2',// 公共请求Appid | 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 | } |