BJ_web_developers / jy_parkingOS

Commit c0558ebaea4b385716d52333efe4fc4a3c2336a4

Authored by 刘淇
1 parent 3d60bab7

下拉框箭头

Inline Side-by-side
Showing 2 changed files with 414 additions and 416 deletions
pages/inputCarNumber/inputCarNumber.vue
  View file @c0558eb
1 <template> 1 <template>
2 2
3 - <view class="so-mask"> 3 + <view class="so-mask">
4 4
5 - <view class="bg-icon" :class="set">  
6 - <image :src="carBg" mode="" class="bac" />  
7 - <view class="bg-text">  
8 - <view class="bg-text-top">输 入 车 牌 号</view>  
9 - <view class="bg-text-bottom">输入完整车牌号，查询停车信息</view>  
10 - </view>  
11 - </view> 5 + <view class="bg-icon" :class="set">
  6 + <image :src="carBg" mode="" class="bac"/>
  7 + <view class="bg-text">
  8 + <view class="bg-text-top">输 入 车 牌 号</view>
  9 + <view class="bg-text-bottom">输入完整车牌号，查询停车信息</view>
  10 + </view>
  11 + </view>
12 12
13 - <view class="so-plate animation-scale-up">  
14 - <view class="so-plate-head">  
15 - <view class="so-plate-type">  
16 - <radio-group @change="typeChange">  
17 - <label>  
18 - <radio value="1" :checked="type===1" />  
19 - 普通车牌  
20 - </label>  
21 - <label>  
22 - <radio value="2" :checked="type===2" />  
23 - 新能源车牌  
24 - </label>  
25 - </radio-group>  
26 - </view>  
27 - </view>  
28 - <view class="so-plate-body" @click="plateShowOrHide = true">  
29 - <view class="so-plate-word" :class="{ active: currentInputIndex == 0 }" @tap="inputSwitch"  
30 - data-index="0">  
31 - <text>{{ currentInputValue[0] }}</text>  
32 - </view>  
33 - <view class="so-plate-word" :class="{ active: currentInputIndex == 1 }" @tap="inputSwitch"  
34 - data-index="1">  
35 - <text>{{ currentInputValue[1] }}</text>  
36 - </view>  
37 - <view class="so-plate-dot"></view>  
38 - <view class="so-plate-word" :class="{ active: currentInputIndex == 2 }" @tap="inputSwitch"  
39 - data-index="2">  
40 - <text>{{ currentInputValue[2] }}</text>  
41 - </view>  
42 - <view class="so-plate-word" :class="{ active: currentInputIndex == 3 }" @tap="inputSwitch"  
43 - data-index="3">  
44 - <text>{{ currentInputValue[3] }}</text>  
45 - </view>  
46 - <view class="so-plate-word" :class="{ active: currentInputIndex == 4 }" @tap="inputSwitch"  
47 - data-index="4">  
48 - <text>{{ currentInputValue[4] }}</text>  
49 - </view>  
50 - <view class="so-plate-word" :class="{ active: currentInputIndex == 5 }" @tap="inputSwitch"  
51 - data-index="5">  
52 - <text>{{ currentInputValue[5] }}</text>  
53 - </view>  
54 - <view class="so-plate-word" :class="{ active: currentInputIndex == 6 }" @tap="inputSwitch"  
55 - data-index="6">  
56 - <text>{{ currentInputValue[6] }}</text>  
57 - </view>  
58 - <view class="so-plate-word" :class="{ active: currentInputIndex == 7 }" @tap="inputSwitch"  
59 - v-if="type == 2" data-index="7">  
60 - <text>{{ currentInputValue[7] }}</text>  
61 - </view>  
62 - </view> 13 + <view class="so-plate animation-scale-up">
  14 + <view class="so-plate-head">
  15 + <view class="so-plate-type">
  16 + <radio-group @change="typeChange">
  17 + <label>
  18 + <radio value="1" :checked="type===1"/>
  19 + 普通车牌
  20 + </label>
  21 + <label>
  22 + <radio value="2" :checked="type===2"/>
  23 + 新能源车牌
  24 + </label>
  25 + </radio-group>
  26 + </view>
  27 + </view>
  28 + <view class="so-plate-body" @click="plateShowOrHide = true">
  29 + <view class="so-plate-word" :class="{ active: currentInputIndex == 0 }" @tap="inputSwitch"
  30 + data-index="0">
  31 + <text>{{ currentInputValue[0] }}</text>
  32 + </view>
  33 + <view class="so-plate-word" :class="{ active: currentInputIndex == 1 }" @tap="inputSwitch"
  34 + data-index="1">
  35 + <text>{{ currentInputValue[1] }}</text>
  36 + </view>
  37 + <view class="so-plate-dot"></view>
  38 + <view class="so-plate-word" :class="{ active: currentInputIndex == 2 }" @tap="inputSwitch"
  39 + data-index="2">
  40 + <text>{{ currentInputValue[2] }}</text>
  41 + </view>
  42 + <view class="so-plate-word" :class="{ active: currentInputIndex == 3 }" @tap="inputSwitch"
  43 + data-index="3">
  44 + <text>{{ currentInputValue[3] }}</text>
  45 + </view>
  46 + <view class="so-plate-word" :class="{ active: currentInputIndex == 4 }" @tap="inputSwitch"
  47 + data-index="4">
  48 + <text>{{ currentInputValue[4] }}</text>
  49 + </view>
  50 + <view class="so-plate-word" :class="{ active: currentInputIndex == 5 }" @tap="inputSwitch"
  51 + data-index="5">
  52 + <text>{{ currentInputValue[5] }}</text>
  53 + </view>
  54 + <view class="so-plate-word" :class="{ active: currentInputIndex == 6 }" @tap="inputSwitch"
  55 + data-index="6">
  56 + <text>{{ currentInputValue[6] }}</text>
  57 + </view>
  58 + <view class="so-plate-word" :class="{ active: currentInputIndex == 7 }" @tap="inputSwitch"
  59 + v-if="type == 2" data-index="7">
  60 + <text>{{ currentInputValue[7] }}</text>
  61 + </view>
  62 + </view>
63 63
64 64
65 - </view> 65 + </view>
66 66
67 - <view style="padding: 0 10px;position: fixed;bottom: 0;left:0">  
68 - <view class="so-plate-foot" v-show="plateShowOrHide">  
69 - <view class="so-plate-keyboard" :style="{height:keyboardHeight}">  
70 - <view id="keyboard">  
71 - <block v-if="inputType == 1">  
72 - <view hover-class="hover" class="so-plate-key" v-for="el of provinceText" :key="el"  
73 - :data-value="el" @tap="chooseKey">{{ el }}</view>  
74 - </block>  
75 - <block v-if="inputType == 1">  
76 - <text class="so-plate-key fill-block"></text>  
77 - <text class="so-plate-key fill-block"></text>  
78 - </block>  
79 - <block v-if="inputType >= 3">  
80 - <view hover-class="hover" class="so-plate-key" v-for="el of numberText" :key="el"  
81 - :data-value="el" @tap="chooseKey">{{ el }}</view>  
82 - </block>  
83 - <block v-if="inputType >= 2">  
84 - <view hover-class="hover" class="so-plate-key" v-for="el of wordText" :key="el"  
85 - :data-value="el" @tap="chooseKey">{{ el }}</view>  
86 - </block>  
87 - <block v-if="inputType == 3">  
88 - <text v-for="el of fillBlock" :key="el.num" class="so-plate-key fill-block"></text>  
89 - </block>  
90 - <block v-if="inputType == 4">  
91 - <view hover-class="hover" class="so-plate-key" v-for="el of lastWordText" :key="el"  
92 - :data-value="el" @tap="chooseKey">{{ el }}</view>  
93 - </block>  
94 - <text v-if="inputType == 4" class="so-plate-key fill-block"></text>  
95 - </view>  
96 - </view>  
97 - <view class="so-plate-btn-group">  
98 - <view>  
99 - <button class="so-plate-btn so-plate-btn--cancel" @tap="plateShowOrHide = false">取消</button>  
100 - </view>  
101 - <view>  
102 - <button class="so-plate-btn so-plate-btn--delete" @tap="deleteKey">删除</button>  
103 - <button class="so-plate-btn so-plate-btn--submit" @tap="exportPlate">完成</button> 67 + <view style="padding: 0 10px;position: fixed;bottom: 0;left:0">
  68 + <view class="so-plate-foot" v-show="plateShowOrHide">
  69 + <view class="so-plate-keyboard" :style="{height:keyboardHeight}">
  70 + <view id="keyboard">
  71 + <block v-if="inputType == 1">
  72 + <view hover-class="hover" class="so-plate-key" v-for="el of provinceText" :key="el"
  73 + :data-value="el" @tap="chooseKey">{{ el }}
  74 + </view>
  75 + </block>
  76 + <block v-if="inputType == 1">
  77 + <text class="so-plate-key fill-block"></text>
  78 + <text class="so-plate-key fill-block"></text>
  79 + </block>
  80 + <block v-if="inputType >= 3">
  81 + <view hover-class="hover" class="so-plate-key" v-for="el of numberText" :key="el"
  82 + :data-value="el" @tap="chooseKey">{{ el }}
  83 + </view>
  84 + </block>
  85 + <block v-if="inputType >= 2">
  86 + <view hover-class="hover" class="so-plate-key" v-for="el of wordText" :key="el"
  87 + :data-value="el" @tap="chooseKey">{{ el }}
  88 + </view>
  89 + </block>
  90 + <block v-if="inputType == 3">
  91 + <text v-for="el of fillBlock" :key="el.num" class="so-plate-key fill-block"></text>
  92 + </block>
  93 + <block v-if="inputType == 4">
  94 + <view hover-class="hover" class="so-plate-key" v-for="el of lastWordText" :key="el"
  95 + :data-value="el" @tap="chooseKey">{{ el }}
  96 + </view>
  97 + </block>
  98 + <text v-if="inputType == 4" class="so-plate-key fill-block"></text>
  99 + </view>
  100 + </view>
  101 + <view class="so-plate-btn-group">
  102 + <view>
  103 + <button class="so-plate-btn so-plate-btn--cancel" @tap="plateShowOrHide = false">取消</button>
  104 + </view>
  105 + <view>
  106 + <button class="so-plate-btn so-plate-btn--delete" @tap="deleteKey">删除</button>
  107 + <button class="so-plate-btn so-plate-btn--submit" @tap="exportPlate">完成</button>
104 108
105 - </view> 109 + </view>
106 110
107 - </view>  
108 - </view>  
109 - </view>  
110 - </view> 111 + </view>
  112 + </view>
  113 + </view>
  114 + </view>
111 </template> 115 </template>
112 <script> 116 <script>
113 - import carBg from 'static/inputCarNumber_pic/carBg.png' 117 +import carBg from 'static/inputCarNumber_pic/carBg.png'
  118 +export default {
  119 + name: 'uni-plate-input',
  120 + data() {
  121 + return {
  122 + plateShowOrHide: false,
  123 + type: 1, //车牌类型
  124 + currentInputIndex: 2, //当前编辑的输入框
  125 + currentInputValue: ['苏', 'B', '', '', '', '', ''],
  126 + fillBlock: [{
  127 + num: 11
  128 + }, {
  129 + num: 12
  130 + }, {
  131 + num: 13
  132 + }, {
  133 + num: 14
  134 + }, {
  135 + num: 15
  136 + }, {
  137 + num: 16
  138 + }], //避免:key报错
  139 + keyboardHeightInit: false,
  140 + keyboardHeight: 'auto',
  141 + carBg: '',
  142 + provinceText: [
  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 + '宁',
  173 + '新'
  174 + ],
  175 + numberText: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
  176 + wordText: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U',
  177 + 'V', 'W', 'X', 'Y', 'Z'
  178 + ],
  179 + lastWordText: ['港', '澳', '学', '领', '警'],
  180 + businessId: ''
  181 + };
  182 + },
  183 + props: {
  184 + // plate: {
  185 + // type: String
  186 + // }
  187 + },
  188 + onLoad() {
  189 + this.type = 1;
  190 + this.currentInputValue = ['苏', 'B', '', '', '', '', ''];
  191 + this.currentInputIndex = 2;
  192 + let indexInfo = uni.getStorageSync("indexInfo");
  193 + this.businessId = indexInfo.businessId;
  194 + },
  195 + onShow() {
  196 + this.carBg = carBg
  197 + },
  198 + computed: {
  199 + //输入框类型
  200 + inputType() {
  201 + switch (this.currentInputIndex) {
  202 + case 0:
  203 + return 1;
  204 + break;
  205 + case 1:
  206 + return 2;
  207 + break;
  208 + case 2:
  209 + return 3;
  210 + break;
  211 + case 3:
  212 + return 3;
  213 + break;
  214 + case 4:
  215 + return 3;
  216 + break;
  217 + case 5:
  218 + return 3;
  219 + break;
  220 + case 6:
  221 + return this.type == 2 ? 3 : 4;
  222 + break;
  223 + case 7:
  224 + return 4;
  225 + break;
  226 + default:
  227 + return 1;
  228 + break;
  229 + }
  230 + }
  231 + },
  232 + watch: {
  233 + // currentInputIndex:function(n,o){
  234 + // if(!this.keyboardHeightInit) return
  235 + // this.$nextTick(()=>{
  236 + // this.changeKeyboardHeight()
  237 + // })
  238 + // }
  239 + },
  240 + methods: {
  241 + //车牌类型切换
  242 + typeChange(e) {
  243 + const {
  244 + value
  245 + } = e.detail;
  246 + this.type = parseInt(value)
  247 + this.currentInputIndex = 0
  248 + if (value == 1) {
  249 + this.currentInputValue = ['苏', 'B', '', '', '', '', '']
  250 + } else {
  251 + this.currentInputValue = ['苏', 'B', '', '', '', '', '', '']
  252 + }
  253 + },
  254 + inputSwitch(e) {
  255 + const {
  256 + index
  257 + } = e.currentTarget.dataset;
  258 + this.currentInputIndex = parseInt(index);
  259 + },
  260 + chooseKey(e) {
  261 + const {
  262 + value
  263 + } = e.currentTarget.dataset;
  264 + this.$set(this.currentInputValue, this.currentInputIndex, value);
  265 + if (this.type == 1 && this.currentInputIndex < 6) {
  266 + this.currentInputIndex++
  267 + }
  268 + if (this.type == 2 && this.currentInputIndex < 7) {
  269 + this.currentInputIndex++
  270 + }
  271 + },
  272 + deleteKey() {
  273 + this.$set(this.currentInputValue, this.currentInputIndex, '')
  274 + if (this.currentInputIndex != 0) this.currentInputIndex--
  275 + },
  276 + exportPlate() {
  277 + const plate = this.currentInputValue.join('')
  278 + let err = false
  279 + if (this.type === 1 && plate.length != 7) {
  280 + err = true
  281 + } else if (this.type === 2 && plate.length != 8) {
  282 + err = true
  283 + }
  284 + if (err) return uni.showToast({
  285 + title: '请输入完整的车牌号码',
  286 + icon: 'error'
  287 + })
  288 + console.log(plate)
  289 + this.getbBillQueryInfo(plate);
  290 + },
  291 + getbBillQueryInfo(plate) {
  292 + let that = this
  293 + let paramsData = {
  294 + carNumber: plate,
  295 + pageNum: '1',
  296 + pageSize: '10',
  297 + businessId: that.businessId,
  298 + parkState: '10',
  299 + }
  300 + // 获取 接口
  301 + that.$myRequest({
  302 + url: that.$common.queryParkingRecordByCarNumbers,
  303 + method: 'POST',
  304 + data: that.$common.requestSign(paramsData)
  305 + }).then(res => {
  306 + console.log(res)
  307 + console.log(res.data.dataList[0])
  308 + if(res.code == '0'){
  309 + let data = res.data.dataList[0]
  310 + // that.parkName = data.parkName;
  311 + // that.parkInTime = data.parkInTime;
  312 + // that.staytime = data.parkDuration;
  313 + // that.due = data.totalFee;
  314 + // that.orderFee = data.unPayFee;
  315 + // that.orderId = data.orderId;
  316 + uni.navigateTo({
  317 + url: '../parkPay/parkPay?optionData=' + JSON.stringify(data)
  318 + })
  319 + }
114 320
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 = ['苏', 'B', '', '', '', '', '']  
244 - } else {  
245 - this.currentInputValue = ['苏', 'B','', '', '', '', '', '']  
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 - })  
282 -  
283 - console.log(plate)  
284 -  
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 - }  
313 -  
314 - setTimeout(() => { //在动画结束之后才开始获取  
315 - this.$nextTick(() => {  
316 - this.changeKeyboardHeight()  
317 - })  
318 - }, 500);  
319 - }  
320 - }; 321 + })
  322 + },
  323 + changeKeyboardHeight() {
  324 + const that = this
  325 + const query = uni.createSelectorQuery().in(this);
  326 + query.select('#keyboard').boundingClientRect();
  327 + query.exec(function (res) {
  328 + if (res && res[0]) {
  329 + that.keyboardHeight = res[0].height + uni.upx2px(30) + 'px'
  330 + that.keyboardHeightInit = true
  331 + }
  332 + });
  333 + }
  334 + },
  335 + mounted() {
  336 + console.log(this.plate);
  337 + const plateKey = this.plate.split('')
  338 + if (plateKey.length === 7) {
  339 + this.type = 1
  340 + } else if (plateKey.length === 8) {
  341 + this.type = 2
  342 + }
  343 + if (plateKey.length === 7 || plateKey.length === 8) {
  344 + this.currentInputValue = plateKey
  345 + this.currentInputIndex = plateKey.length - 1
  346 + }
  347 + setTimeout(() => { //在动画结束之后才开始获取
  348 + this.$nextTick(() => {
  349 + this.changeKeyboardHeight()
  350 + })
  351 + }, 500);
  352 + }
  353 +};
321 </script> 354 </script>
322 <style scoped lang="less"> 355 <style scoped lang="less">
323 - @import 'uni-plate-input'; 356 + @import 'uni-plate-input';
324 357
325 - .bg-icon {  
326 - /*padding: 10px 0;*/  
327 - height: 60px;  
328 - /*background: url("../../static/inputCarNumber_pic/carBg.png") no-repeat;*/  
329 - /*background-size: 100% 100%;*/  
330 - color: #FFF;  
331 - } 358 + .bg-icon {
  359 + /*padding: 10px 0;*/
  360 + height: 60px;
  361 + /*background: url("../../static/inputCarNumber_pic/carBg.png") no-repeat;*/
  362 + /*background-size: 100% 100%;*/
  363 + color: #FFF;
  364 + }
332 365
333 - .bac {  
334 - position: absolute;  
335 - width: 100%;  
336 - height: 60px;  
337 - } 366 + .bac {
  367 + position: absolute;
  368 + width: 100%;
  369 + height: 60px;
  370 + }
338 371
339 - .bg-text {  
340 - width: 100%;  
341 - position: absolute;  
342 - top: 10px;  
343 - text-align: center; 372 + .bg-text {
  373 + width: 100%;
  374 + position: absolute;
  375 + top: 10px;
  376 + text-align: center;
344 377
345 - } 378 + }
346 </style> 379 </style>
pages/parkPay/parkPay.vue
  View file @c0558eb
1 <template> 1 <template>
2 <view> 2 <view>
3 - <view v-show="showFlag" style="padding: 20px; text-align: center">  
4 - 该车没有停放在该车场  
5 - </view>  
6 - <view v-else>  
7 - <!-- <view class="order-time"> 3 +
  4 + <!-- <view class="order-time">
8 剩余支付时间: {{appOrderTimeout}} 5 剩余支付时间: {{appOrderTimeout}}
9 </view> --> 6 </view> -->
10 7
11 - <view class="order-title">  
12 - 订单详情  
13 - </view>  
14 - <view class="order-info">  
15 - 车牌号：{{mycarNumber | tranNull}}  
16 - </view>  
17 - <view class="order-line"></view>  
18 - <view class="order-info">  
19 - 停车场：{{parkName | tranNull}}  
20 - </view>  
21 - <view class="order-line"></view>  
22 - <view class="order-info">  
23 - 进场时间：{{parkInTime | tranNull}}  
24 - </view>  
25 - <view class="order-line"></view>  
26 - <view class="order-info">  
27 - 停车时间：{{staytime | timeFormatter}}  
28 - </view>  
29 - <view class="order-line"></view> 8 + <view class="order-title">
  9 + 订单详情
  10 + </view>
  11 + <view class="order-info">
  12 + 车牌号：{{mycarNumber | tranNull}}
  13 + </view>
  14 + <view class="order-line"></view>
  15 + <view class="order-info">
  16 + 停车场：{{parkName | tranNull}}
  17 + </view>
  18 + <view class="order-line"></view>
  19 + <view class="order-info">
  20 + 进场时间：{{parkInTime | tranNull}}
  21 + </view>
  22 + <view class="order-line"></view>
  23 + <view class="order-info">
  24 + 停车时间：{{staytime | timeFormatter}}
  25 + </view>
  26 + <view class="order-line"></view>
  27 + <view class="order-info">
  28 + 总计费用：{{due |toFixed2}}元
  29 + </view>
  30 + <view class="order-line"></view>
  31 +
  32 + <view class="flex-row-justify-between">
30 <view class="order-info"> 33 <view class="order-info">
31 - 总计费用：{{due |toFixed2}}元 34 + 支付金额
32 </view> 35 </view>
33 - <view class="order-line"></view>  
34 -  
35 - <view class="flex-row-justify-between">  
36 - <view class="order-info">  
37 - 支付金额 36 + <view class="flex-row-justify-end">
  37 + <view class="order-info" style="font-weight:bold;font-size:17px ;">
  38 + {{orderFee | toFixed2}}
38 </view> 39 </view>
39 - <view class="flex-row-justify-end">  
40 - <view class="order-info" style="font-weight:bold;font-size:17px ;">  
41 - {{orderFee | toFixed2}}  
42 - </view>  
43 - <view class="order-info" style="margin-right: 50upx;margin-left: 0px;">  
44 - 元  
45 - </view> 40 + <view class="order-info" style="margin-right: 50upx;margin-left: 0px;">
  41 + 元
46 </view> 42 </view>
47 </view> 43 </view>
  44 + </view>
48 45
49 - <view class="order-line-bold"></view> 46 + <view class="order-line-bold"></view>
50 47
51 - <view class="order-title">  
52 - 支付方法  
53 - </view>  
54 - <view class="order-line"></view>  
55 -  
56 - <view class="orderwaysview">  
57 - <!--<image src="../../static/orderInfo/orderinfo-wechat.png" class="orderways"></image>-->  
58 - <view class="order-info" style="margin-left: 15px;">  
59 - 商户余额  
60 - </view>  
61 - <image src="../../static/orderInfo/orderinfo-sel.png" class="orderwaysSel"></image> 48 + <view class="order-title">
  49 + 支付方法
  50 + </view>
  51 + <view class="order-line"></view>
62 52
  53 + <view class="orderwaysview">
  54 + <!--<image src="../../static/orderInfo/orderinfo-wechat.png" class="orderways"></image>-->
  55 + <view class="order-info" style="margin-left: 15px;">
  56 + 商户余额
63 </view> 57 </view>
  58 + <image src="../../static/orderInfo/orderinfo-sel.png" class="orderwaysSel"></image>
64 59
65 - <view class="order-line"></view>  
66 - <button @click="payClick" class="button-sp-area" type="primary" plain="true">确认支付</button>  
67 </view> 60 </view>
68 61
69 - 62 + <view class="order-line"></view>
  63 + <button @click="payClick" class="button-sp-area" type="primary" plain="true">确认支付</button>
70 64
71 </view> 65 </view>
72 </template> 66 </template>
@@ -85,21 +79,22 @@ export default { @@ -85,21 +79,22 @@ export default {
85 orderFee: '', 79 orderFee: '',
86 // appOrderTimeout:'0', 80 // appOrderTimeout:'0',
87 totalFee: '', //应收 81 totalFee: '', //应收
88 - showFlag: false,  
89 } 82 }
90 }, 83 },
91 onLoad(params) { 84 onLoad(params) {
92 wx.showShareMenu({ 85 wx.showShareMenu({
93 withShareTicket: true 86 withShareTicket: true
94 }) 87 })
95 - this.mycarNumber = params.carNumber;  
96 - let indexInfo = uni.getStorageSync("indexInfo");  
97 - this.businessId = indexInfo.businessId;  
98 - console.log(this.mycarNumber, this.businessId)  
99 - this.getbBillQueryInfo(); 88 + let data = JSON.parse(params.optionData)
  89 + this.mycarNumber = data.carNumber
  90 + this.parkName = data.parkName;
  91 + this.parkInTime = data.parkInTime;
  92 + this.staytime = data.parkDuration;
  93 + this.due = data.totalFee;
  94 + this.orderFee = data.unPayFee;
  95 + this.orderId = data.orderId;
100 }, 96 },
101 onShow() { 97 onShow() {
102 -  
103 }, 98 },
104 methods: { 99 methods: {
105 payClick() { 100 payClick() {
@@ -133,36 +128,6 @@ export default { @@ -133,36 +128,6 @@ export default {
133 }, 2000); 128 }, 2000);
134 }) 129 })
135 }, 130 },
136 - getbBillQueryInfo() {  
137 - let that = this  
138 - let paramsData = {  
139 - carNumber: that.mycarNumber,  
140 - pageNum: '1',  
141 - pageSize: '10',  
142 - businessId: that.businessId,  
143 - parkState: '10',  
144 - }  
145 - // 获取 接口  
146 - that.$myRequest({  
147 - url: that.$common.queryParkingRecordByCarNumbers,  
148 - method: 'POST',  
149 - data: that.$common.requestSign(paramsData)  
150 - }).then(res => {  
151 - console.log(res.data.dataList[0])  
152 - if (res.data.dataList.length > 0) {  
153 - let data = res.data.dataList[0]  
154 - that.parkName = data.parkName;  
155 - that.parkInTime = data.parkInTime;  
156 - that.staytime = data.parkDuration;  
157 - that.due = data.totalFee;  
158 - that.orderFee = data.unPayFee;  
159 - that.orderId = data.orderId;  
160 - that.showFlag = false  
161 - } else {  
162 - that.showFlag = true  
163 - }  
164 - })  
165 - },  
166 } 131 }
167 } 132 }
168 </script> 133 </script>