BJ_web_developers / jy_parkingOS

Commit ff4eb366bb1115d428ef6b0aa48c2c6a78efc14a

Authored by chenbiao
1 parent c017d0f8

add 初始化停车缴费页面 支付订单页成功后 跳转至停车缴费页面 优化代码

Inline Side-by-side
Showing 2 changed files with 243 additions and 205 deletions
pages/inputCarNumber/inputCarNumber.vue
  View file @ff4eb36
1 -  
2 <template> 1 <template>
3 2
4 <view class="so-mask"> 3 <view class="so-mask">
5 4
6 - <view class="bg-icon" :class="set" > 5 + <view class="bg-icon" :class="set">
7 <image :src="carBg" mode="" class="bac" /> 6 <image :src="carBg" mode="" class="bac" />
8 <view class="bg-text"> 7 <view class="bg-text">
9 <view class="bg-text-top">输 入 车 牌 号</view> 8 <view class="bg-text-top">输 入 车 牌 号</view>
@@ -27,29 +26,37 @@ @@ -27,29 +26,37 @@
27 </view> 26 </view>
28 </view> 27 </view>
29 <view class="so-plate-body" @click="plateShowOrHide = true"> 28 <view class="so-plate-body" @click="plateShowOrHide = true">
30 - <view class="so-plate-word" :class="{ active: currentInputIndex == 0 }" @tap="inputSwitch" data-index="0"> 29 + <view class="so-plate-word" :class="{ active: currentInputIndex == 0 }" @tap="inputSwitch"
  30 + data-index="0">
31 <text>{{ currentInputValue[0] }}</text> 31 <text>{{ currentInputValue[0] }}</text>
32 </view> 32 </view>
33 - <view class="so-plate-word" :class="{ active: currentInputIndex == 1 }" @tap="inputSwitch" data-index="1"> 33 + <view class="so-plate-word" :class="{ active: currentInputIndex == 1 }" @tap="inputSwitch"
  34 + data-index="1">
34 <text>{{ currentInputValue[1] }}</text> 35 <text>{{ currentInputValue[1] }}</text>
35 </view> 36 </view>
36 <view class="so-plate-dot"></view> 37 <view class="so-plate-dot"></view>
37 - <view class="so-plate-word" :class="{ active: currentInputIndex == 2 }" @tap="inputSwitch" data-index="2"> 38 + <view class="so-plate-word" :class="{ active: currentInputIndex == 2 }" @tap="inputSwitch"
  39 + data-index="2">
38 <text>{{ currentInputValue[2] }}</text> 40 <text>{{ currentInputValue[2] }}</text>
39 </view> 41 </view>
40 - <view class="so-plate-word" :class="{ active: currentInputIndex == 3 }" @tap="inputSwitch" data-index="3"> 42 + <view class="so-plate-word" :class="{ active: currentInputIndex == 3 }" @tap="inputSwitch"
  43 + data-index="3">
41 <text>{{ currentInputValue[3] }}</text> 44 <text>{{ currentInputValue[3] }}</text>
42 </view> 45 </view>
43 - <view class="so-plate-word" :class="{ active: currentInputIndex == 4 }" @tap="inputSwitch" data-index="4"> 46 + <view class="so-plate-word" :class="{ active: currentInputIndex == 4 }" @tap="inputSwitch"
  47 + data-index="4">
44 <text>{{ currentInputValue[4] }}</text> 48 <text>{{ currentInputValue[4] }}</text>
45 </view> 49 </view>
46 - <view class="so-plate-word" :class="{ active: currentInputIndex == 5 }" @tap="inputSwitch" data-index="5"> 50 + <view class="so-plate-word" :class="{ active: currentInputIndex == 5 }" @tap="inputSwitch"
  51 + data-index="5">
47 <text>{{ currentInputValue[5] }}</text> 52 <text>{{ currentInputValue[5] }}</text>
48 </view> 53 </view>
49 - <view class="so-plate-word" :class="{ active: currentInputIndex == 6 }" @tap="inputSwitch" data-index="6"> 54 + <view class="so-plate-word" :class="{ active: currentInputIndex == 6 }" @tap="inputSwitch"
  55 + data-index="6">
50 <text>{{ currentInputValue[6] }}</text> 56 <text>{{ currentInputValue[6] }}</text>
51 </view> 57 </view>
52 - <view class="so-plate-word" :class="{ active: currentInputIndex == 7 }" @tap="inputSwitch" v-if="type == 2" data-index="7"> 58 + <view class="so-plate-word" :class="{ active: currentInputIndex == 7 }" @tap="inputSwitch"
  59 + v-if="type == 2" data-index="7">
53 <text>{{ currentInputValue[7] }}</text> 60 <text>{{ currentInputValue[7] }}</text>
54 </view> 61 </view>
55 </view> 62 </view>
@@ -59,26 +66,30 @@ @@ -59,26 +66,30 @@
59 66
60 <view style="padding: 0 10px;position: fixed;bottom: 0;left:0"> 67 <view style="padding: 0 10px;position: fixed;bottom: 0;left:0">
61 <view class="so-plate-foot" v-show="plateShowOrHide"> 68 <view class="so-plate-foot" v-show="plateShowOrHide">
62 - <view class="so-plate-keyboard" :style="{height:keyboardHeight}"> 69 + <view class="so-plate-keyboard" :style="{height:keyboardHeight}">
63 <view id="keyboard"> 70 <view id="keyboard">
64 <block v-if="inputType == 1"> 71 <block v-if="inputType == 1">
65 - <view hover-class="hover" class="so-plate-key" v-for="el of provinceText" :key="el" :data-value="el" @tap="chooseKey">{{ el }}</view> 72 + <view hover-class="hover" class="so-plate-key" v-for="el of provinceText" :key="el"
  73 + :data-value="el" @tap="chooseKey">{{ el }}</view>
66 </block> 74 </block>
67 <block v-if="inputType == 1"> 75 <block v-if="inputType == 1">
68 <text class="so-plate-key fill-block"></text> 76 <text class="so-plate-key fill-block"></text>
69 <text class="so-plate-key fill-block"></text> 77 <text class="so-plate-key fill-block"></text>
70 </block> 78 </block>
71 <block v-if="inputType >= 3"> 79 <block v-if="inputType >= 3">
72 - <view hover-class="hover" class="so-plate-key" v-for="el of numberText" :key="el" :data-value="el" @tap="chooseKey">{{ el }}</view> 80 + <view hover-class="hover" class="so-plate-key" v-for="el of numberText" :key="el"
  81 + :data-value="el" @tap="chooseKey">{{ el }}</view>
73 </block> 82 </block>
74 <block v-if="inputType >= 2"> 83 <block v-if="inputType >= 2">
75 - <view hover-class="hover" class="so-plate-key" v-for="el of wordText" :key="el" :data-value="el" @tap="chooseKey">{{ el }}</view> 84 + <view hover-class="hover" class="so-plate-key" v-for="el of wordText" :key="el"
  85 + :data-value="el" @tap="chooseKey">{{ el }}</view>
76 </block> 86 </block>
77 <block v-if="inputType == 3"> 87 <block v-if="inputType == 3">
78 <text v-for="el of fillBlock" :key="el.num" class="so-plate-key fill-block"></text> 88 <text v-for="el of fillBlock" :key="el.num" class="so-plate-key fill-block"></text>
79 </block> 89 </block>
80 <block v-if="inputType == 4"> 90 <block v-if="inputType == 4">
81 - <view hover-class="hover" class="so-plate-key" v-for="el of lastWordText" :key="el" :data-value="el" @tap="chooseKey">{{ el }}</view> 91 + <view hover-class="hover" class="so-plate-key" v-for="el of lastWordText" :key="el"
  92 + :data-value="el" @tap="chooseKey">{{ el }}</view>
82 </block> 93 </block>
83 <text v-if="inputType == 4" class="so-plate-key fill-block"></text> 94 <text v-if="inputType == 4" class="so-plate-key fill-block"></text>
84 </view> 95 </view>
@@ -99,214 +110,237 @@ @@ -99,214 +110,237 @@
99 </view> 110 </view>
100 </template> 111 </template>
101 <script> 112 <script>
  113 + import carBg from 'static/inputCarNumber_pic/carBg.png'
102 114
103 -import carBg from 'static/inputCarNumber_pic/carBg.png'  
104 -  
105 -export default {  
106 - name: 'uni-plate-input',  
107 - data() {  
108 - return {  
109 - plateShowOrHide: false,  
110 - type: 1, //车牌类型  
111 - currentInputIndex: 2, //当前编辑的输入框  
112 - currentInputValue: ['苏', 'B', '', '', '', '', ''],  
113 - fillBlock:[{num:11},{num:12},{num:13},{num:14},{num:15},{num:16}], //避免:key报错  
114 - keyboardHeightInit:false,  
115 - keyboardHeight:'auto',  
116 - carBg: '',  
117 - provinceText: [  
118 - '粤',  
119 - '京',  
120 - '冀',  
121 - '沪',  
122 - '津',  
123 - '晋',  
124 - '蒙',  
125 - '辽',  
126 - '吉',  
127 - '黑',  
128 - '苏',  
129 - '浙',  
130 - '皖',  
131 - '闽',  
132 - '赣',  
133 - '鲁',  
134 - '豫',  
135 - '鄂',  
136 - '湘',  
137 - '桂',  
138 - '琼',  
139 - '渝',  
140 - '川',  
141 - '贵',  
142 - '云',  
143 - '藏',  
144 - '陕',  
145 - '甘',  
146 - '青',  
147 - '宁',  
148 - '新'  
149 - ],  
150 - numberText: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],  
151 - wordText: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],  
152 - lastWordText: ['港', '澳', '学', '领', '警']  
153 - };  
154 - },  
155 - props: {  
156 - // plate: {  
157 - // type: String  
158 - // }  
159 - },  
160 - onShow(){  
161 - this.carBg = carBg  
162 - },  
163 - computed: {  
164 - //输入框类型  
165 - inputType() {  
166 - switch (this.currentInputIndex) {  
167 - case 0:  
168 - return 1;  
169 - break;  
170 - case 1:  
171 - return 2;  
172 - break;  
173 - case 2:  
174 - return 3;  
175 - break;  
176 - case 3:  
177 - return 3;  
178 - break;  
179 - case 4:  
180 - return 3;  
181 - break;  
182 - case 5:  
183 - return 3;  
184 - break;  
185 - case 6:  
186 - return this.type==2 ? 3 :4 ;  
187 - break;  
188 - case 7:  
189 - return 4;  
190 - break;  
191 - default:  
192 - return 1;  
193 - break;  
194 - }  
195 - }  
196 - },  
197 - watch:{  
198 - // currentInputIndex:function(n,o){  
199 - // if(!this.keyboardHeightInit) return  
200 - // this.$nextTick(()=>{  
201 - // this.changeKeyboardHeight()  
202 - // })  
203 - // }  
204 - },  
205 - methods: {  
206 - //车牌类型切换  
207 - typeChange(e) {  
208 - const {value} = e.detail;  
209 - this.type = parseInt(value)  
210 - this.currentInputIndex = 0  
211 - if(value==1){  
212 - this.currentInputValue = ['','','','','','','']  
213 - }else{  
214 - this.currentInputValue = ['','','','','','','','']  
215 - }  
216 - },  
217 - inputSwitch(e) {  
218 - const { index } = e.currentTarget.dataset;  
219 - this.currentInputIndex = parseInt(index);  
220 - },  
221 - chooseKey(e) {  
222 - const { value } = e.currentTarget.dataset;  
223 - this.$set(this.currentInputValue, this.currentInputIndex, value);  
224 - if(this.type==1 && this.currentInputIndex<6){  
225 - this.currentInputIndex++  
226 - }  
227 - if(this.type==2 && this.currentInputIndex<7){  
228 - this.currentInputIndex++  
229 - }  
230 - },  
231 - deleteKey(){  
232 - this.$set(this.currentInputValue,this.currentInputIndex,'')  
233 - if(this.currentInputIndex!=0) this.currentInputIndex--  
234 - },  
235 - exportPlate(){  
236 - const plate = this.currentInputValue.join('')  
237 - let err = false  
238 - if(this.type===1&&plate.length!=7){  
239 - err = true  
240 - }else if(this.type===2&&plate.length!=8){  
241 - err = true  
242 - }  
243 - if(err) return uni.showToast({  
244 - title:'请输入完整的车牌号码',  
245 - icon:'error'  
246 - }) 115 + export default {
  116 + name: 'uni-plate-input',
  117 + data() {
  118 + return {
  119 + plateShowOrHide: false,
  120 + type: 1, //车牌类型
  121 + currentInputIndex: 2, //当前编辑的输入框
  122 + currentInputValue: ['苏', 'B', '', '', '', '', ''],
  123 + fillBlock: [{
  124 + num: 11
  125 + }, {
  126 + num: 12
  127 + }, {
  128 + num: 13
  129 + }, {
  130 + num: 14
  131 + }, {
  132 + num: 15
  133 + }, {
  134 + num: 16
  135 + }], //避免:key报错
  136 + keyboardHeightInit: false,
  137 + keyboardHeight: 'auto',
  138 + carBg: '',
  139 + provinceText: [
  140 + '粤',
  141 + '京',
  142 + '冀',
  143 + '沪',
  144 + '津',
  145 + '晋',
  146 + '蒙',
  147 + '辽',
  148 + '吉',
  149 + '黑',
  150 + '苏',
  151 + '浙',
  152 + '皖',
  153 + '闽',
  154 + '赣',
  155 + '鲁',
  156 + '豫',
  157 + '鄂',
  158 + '湘',
  159 + '桂',
  160 + '琼',
  161 + '渝',
  162 + '川',
  163 + '贵',
  164 + '云',
  165 + '藏',
  166 + '陕',
  167 + '甘',
  168 + '青',
  169 + '宁',
  170 + '新'
  171 + ],
  172 + numberText: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
  173 + wordText: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U',
  174 + 'V', 'W', 'X', 'Y', 'Z'
  175 + ],
  176 + lastWordText: ['港', '澳', '学', '领', '警']
  177 + };
  178 + },
  179 + props: {
  180 + // plate: {
  181 + // type: String
  182 + // }
  183 + },
  184 + onLoad() {
  185 + this.type = 1;
  186 + this.currentInputValue = ['苏', 'B', '', '', '', '', ''];
  187 + this.currentInputIndex = 2;
  188 + },
  189 + onShow() {
  190 + this.carBg = carBg
  191 + },
  192 + computed: {
  193 + //输入框类型
  194 + inputType() {
  195 + switch (this.currentInputIndex) {
  196 + case 0:
  197 + return 1;
  198 + break;
  199 + case 1:
  200 + return 2;
  201 + break;
  202 + case 2:
  203 + return 3;
  204 + break;
  205 + case 3:
  206 + return 3;
  207 + break;
  208 + case 4:
  209 + return 3;
  210 + break;
  211 + case 5:
  212 + return 3;
  213 + break;
  214 + case 6:
  215 + return this.type == 2 ? 3 : 4;
  216 + break;
  217 + case 7:
  218 + return 4;
  219 + break;
  220 + default:
  221 + return 1;
  222 + break;
  223 + }
  224 + }
  225 + },
  226 + watch: {
  227 + // currentInputIndex:function(n,o){
  228 + // if(!this.keyboardHeightInit) return
  229 + // this.$nextTick(()=>{
  230 + // this.changeKeyboardHeight()
  231 + // })
  232 + // }
  233 + },
  234 + methods: {
  235 + //车牌类型切换
  236 + typeChange(e) {
  237 + const {
  238 + value
  239 + } = e.detail;
  240 + this.type = parseInt(value)
  241 + this.currentInputIndex = 0
  242 + if (value == 1) {
  243 + this.currentInputValue = ['', '', '', '', '', '', '']
  244 + } else {
  245 + this.currentInputValue = ['', '', '', '', '', '', '', '']
  246 + }
  247 + },
  248 + inputSwitch(e) {
  249 + const {
  250 + index
  251 + } = e.currentTarget.dataset;
  252 + this.currentInputIndex = parseInt(index);
  253 + },
  254 + chooseKey(e) {
  255 + const {
  256 + value
  257 + } = e.currentTarget.dataset;
  258 + this.$set(this.currentInputValue, this.currentInputIndex, value);
  259 + if (this.type == 1 && this.currentInputIndex < 6) {
  260 + this.currentInputIndex++
  261 + }
  262 + if (this.type == 2 && this.currentInputIndex < 7) {
  263 + this.currentInputIndex++
  264 + }
  265 + },
  266 + deleteKey() {
  267 + this.$set(this.currentInputValue, this.currentInputIndex, '')
  268 + if (this.currentInputIndex != 0) this.currentInputIndex--
  269 + },
  270 + exportPlate() {
  271 + const plate = this.currentInputValue.join('')
  272 + let err = false
  273 + if (this.type === 1 && plate.length != 7) {
  274 + err = true
  275 + } else if (this.type === 2 && plate.length != 8) {
  276 + err = true
  277 + }
  278 + if (err) return uni.showToast({
  279 + title: '请输入完整的车牌号码',
  280 + icon: 'error'
  281 + })
247 282
248 - console.log(plate) 283 + console.log(plate)
249 284
250 - uni.navigateTo({  
251 - url: '../parkPay/parkPay?carNumber='+plate  
252 - })  
253 - },  
254 - changeKeyboardHeight(){  
255 - const that = this  
256 - const query = uni.createSelectorQuery().in(this);  
257 - query.select('#keyboard').boundingClientRect();  
258 - query.exec(function(res) {  
259 - if(res&&res[0]){  
260 - that.keyboardHeight = res[0].height + uni.upx2px(30) + 'px'  
261 - that.keyboardHeightInit = true  
262 - }  
263 - });  
264 - }  
265 - },  
266 - mounted() {  
267 - console.log(this.plate);  
268 - const plateKey = this.plate.split('')  
269 - if(plateKey.length===7){  
270 - this.type=1  
271 - }else if(plateKey.length===8){  
272 - this.type=2  
273 - }  
274 - if(plateKey.length===7 || plateKey.length===8){  
275 - this.currentInputValue = plateKey  
276 - this.currentInputIndex = plateKey.length-1  
277 - } 285 + uni.navigateTo({
  286 + url: '../parkPay/parkPay?carNumber=' + plate
  287 + })
  288 + },
  289 + changeKeyboardHeight() {
  290 + const that = this
  291 + const query = uni.createSelectorQuery().in(this);
  292 + query.select('#keyboard').boundingClientRect();
  293 + query.exec(function(res) {
  294 + if (res && res[0]) {
  295 + that.keyboardHeight = res[0].height + uni.upx2px(30) + 'px'
  296 + that.keyboardHeightInit = true
  297 + }
  298 + });
  299 + }
  300 + },
  301 + mounted() {
  302 + console.log(this.plate);
  303 + const plateKey = this.plate.split('')
  304 + if (plateKey.length === 7) {
  305 + this.type = 1
  306 + } else if (plateKey.length === 8) {
  307 + this.type = 2
  308 + }
  309 + if (plateKey.length === 7 || plateKey.length === 8) {
  310 + this.currentInputValue = plateKey
  311 + this.currentInputIndex = plateKey.length - 1
  312 + }
278 313
279 - setTimeout(() => { //在动画结束之后才开始获取  
280 - this.$nextTick(()=>{  
281 - this.changeKeyboardHeight()  
282 - })  
283 - }, 500);  
284 - }  
285 -}; 314 + setTimeout(() => { //在动画结束之后才开始获取
  315 + this.$nextTick(() => {
  316 + this.changeKeyboardHeight()
  317 + })
  318 + }, 500);
  319 + }
  320 + };
286 </script> 321 </script>
287 <style scoped lang="less"> 322 <style scoped lang="less">
288 @import 'uni-plate-input'; 323 @import 'uni-plate-input';
289 - .bg-icon{ 324 +
  325 + .bg-icon {
290 /*padding: 10px 0;*/ 326 /*padding: 10px 0;*/
291 height: 60px; 327 height: 60px;
292 /*background: url("../../static/inputCarNumber_pic/carBg.png") no-repeat;*/ 328 /*background: url("../../static/inputCarNumber_pic/carBg.png") no-repeat;*/
293 /*background-size: 100% 100%;*/ 329 /*background-size: 100% 100%;*/
294 color: #FFF; 330 color: #FFF;
295 } 331 }
296 - .bac{ 332 +
  333 + .bac {
297 position: absolute; 334 position: absolute;
298 width: 100%; 335 width: 100%;
299 height: 60px; 336 height: 60px;
300 } 337 }
301 - .bg-text{ 338 +
  339 + .bg-text {
302 width: 100%; 340 width: 100%;
303 position: absolute; 341 position: absolute;
304 - top:10px; 342 + top: 10px;
305 text-align: center; 343 text-align: center;
306 344
307 } 345 }
308 </style> 346 </style>
309 -  
310 -  
311 -  
312 -  
pages/parkPay/parkPay.vue
  View file @ff4eb36
@@ -118,8 +118,12 @@ @@ -118,8 +118,12 @@
118 duration: 2000 118 duration: 2000
119 }); 119 });
120 setTimeout(function() { 120 setTimeout(function() {
121 - uni.navigateTo({  
122 - url: '../inputCarNumber/inputCarNumber' 121 + let pages = getCurrentPages(); //当前页
  122 + let beforePage = pages[pages.length - 2];
  123 + uni.navigateBack({
  124 + success: function() {
  125 + beforePage.onLoad();
  126 + }
123 }) 127 })
124 }, 2000); 128 }, 2000);
125 129