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 1 <template>
3 2  
4 3 <view class="so-mask">
5 4  
6   - <view class="bg-icon" :class="set" >
  5 + <view class="bg-icon" :class="set">
7 6 <image :src="carBg" mode="" class="bac" />
8 7 <view class="bg-text">
9 8 <view class="bg-text-top">输 入 车 牌 号</view>
... ... @@ -27,29 +26,37 @@
27 26 </view>
28 27 </view>
29 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 31 <text>{{ currentInputValue[0] }}</text>
32 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 35 <text>{{ currentInputValue[1] }}</text>
35 36 </view>
36 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 40 <text>{{ currentInputValue[2] }}</text>
39 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 44 <text>{{ currentInputValue[3] }}</text>
42 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 48 <text>{{ currentInputValue[4] }}</text>
45 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 52 <text>{{ currentInputValue[5] }}</text>
48 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 56 <text>{{ currentInputValue[6] }}</text>
51 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 60 <text>{{ currentInputValue[7] }}</text>
54 61 </view>
55 62 </view>
... ... @@ -59,26 +66,30 @@
59 66  
60 67 <view style="padding: 0 10px;position: fixed;bottom: 0;left:0">
61 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 70 <view id="keyboard">
64 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 74 </block>
67 75 <block v-if="inputType == 1">
68 76 <text class="so-plate-key fill-block"></text>
69 77 <text class="so-plate-key fill-block"></text>
70 78 </block>
71 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 82 </block>
74 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 86 </block>
77 87 <block v-if="inputType == 3">
78 88 <text v-for="el of fillBlock" :key="el.num" class="so-plate-key fill-block"></text>
79 89 </block>
80 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 93 </block>
83 94 <text v-if="inputType == 4" class="so-plate-key fill-block"></text>
84 95 </view>
... ... @@ -99,214 +110,237 @@
99 110 </view>
100 111 </template>
101 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 321 </script>
287 322 <style scoped lang="less">
288 323 @import 'uni-plate-input';
289   - .bg-icon{
  324 +
  325 + .bg-icon {
290 326 /*padding: 10px 0;*/
291 327 height: 60px;
292 328 /*background: url("../../static/inputCarNumber_pic/carBg.png") no-repeat;*/
293 329 /*background-size: 100% 100%;*/
294 330 color: #FFF;
295 331 }
296   - .bac{
  332 +
  333 + .bac {
297 334 position: absolute;
298 335 width: 100%;
299 336 height: 60px;
300 337 }
301   - .bg-text{
  338 +
  339 + .bg-text {
302 340 width: 100%;
303 341 position: absolute;
304   - top:10px;
  342 + top: 10px;
305 343 text-align: center;
306 344  
307 345 }
308 346 </style>
309   -
310   -
311   -
312   -
... ...
pages/parkPay/parkPay.vue
  View file @ff4eb36
... ... @@ -118,8 +118,12 @@
118 118 duration: 2000
119 119 });
120 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 128 }, 2000);
125 129  
... ...