|
|
@@ -0,0 +1,788 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ <van-cell
|
|
|
+ is-link
|
|
|
+ :title=name
|
|
|
+ @click="show = true"
|
|
|
+ />
|
|
|
+ <van-action-sheet
|
|
|
+ v-model="show"
|
|
|
+ :actions="actions"
|
|
|
+ cancel-text="取消"
|
|
|
+ close-on-click-action
|
|
|
+ @cancel="onCancel"
|
|
|
+ @select="onSelect"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="image_style">
|
|
|
+ <van-image :src="require('@/assets/img/img_car.png')" />
|
|
|
+ </div>
|
|
|
+ <!-- 查询订单 -->
|
|
|
+ <div v-show="textinput">
|
|
|
+
|
|
|
+ <div class="textinput">
|
|
|
+ <van-row>
|
|
|
+ <van-col span="24">
|
|
|
+ <span style="display: flex; justify-content: center;">请输入真实有效的车牌号</span>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ <template>
|
|
|
+ <div class="keyboard">
|
|
|
+ <div
|
|
|
+ class="input-box"
|
|
|
+ @click="clickShowKeyboard"
|
|
|
+ >
|
|
|
+ <li>{{ first }}</li>
|
|
|
+ <li>{{ numArr[0] }}</li>
|
|
|
+ <li>{{ numArr[1] }}</li>
|
|
|
+ <li>{{ numArr[2] }}</li>
|
|
|
+ <li>{{ numArr[3] }}</li>
|
|
|
+ <li>{{ numArr[4] }}</li>
|
|
|
+ <li>{{ numArr[5] }}</li>
|
|
|
+ <li><img
|
|
|
+ src="../assets/img/icon_newEnergy.png"
|
|
|
+ alt=""
|
|
|
+ style="width: 20px"
|
|
|
+ /></li>
|
|
|
+ </div>
|
|
|
+ <!-- 选择车牌号 首个汉字键盘 弹出层 -->
|
|
|
+ <div class="plate_number">
|
|
|
+ <van-popup
|
|
|
+ v-model="show_chinese"
|
|
|
+ position="bottom"
|
|
|
+ :overlay="true"
|
|
|
+ overlay-class="displayNone"
|
|
|
+ >
|
|
|
+ <div class="plate_chinese_box">
|
|
|
+ <!-- 点击对应的汉字，进行输入 -->
|
|
|
+ <van-button
|
|
|
+ size="small"
|
|
|
+ v-for="(item, index) in ChineseList"
|
|
|
+ :key="item.id"
|
|
|
+ @click="checkChinese(index)"
|
|
|
+ >{{ item.name }}</van-button>
|
|
|
+ <div
|
|
|
+ class="close-box"
|
|
|
+ @click.stop="close_keyboard"
|
|
|
+ >
|
|
|
+ <div>╳</div>
|
|
|
+ <li></li>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+ <!-- 英文 数字 键盘 -->
|
|
|
+ <div class="allBoard">
|
|
|
+ <van-popup
|
|
|
+ v-model="show_allBoard"
|
|
|
+ position="bottom"
|
|
|
+ :overlay="true"
|
|
|
+ overlay-class="displayNone"
|
|
|
+ >
|
|
|
+ <div class="plate_number_box">
|
|
|
+ <!-- 点击对应的字母或数字，进行输入 -->
|
|
|
+ <van-button
|
|
|
+ size="small"
|
|
|
+ v-for="(item, index) in English_Number"
|
|
|
+ :key="item.id"
|
|
|
+ @click="checkEnglish_num(index)"
|
|
|
+ >{{ item.name }}</van-button>
|
|
|
+ <div
|
|
|
+ class="close-box"
|
|
|
+ @click.stop="close_keyboard"
|
|
|
+ >
|
|
|
+ <div>╳</div>
|
|
|
+ <li></li>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- 历史记录 -->
|
|
|
+ <div v-show="licenseHistory.length == 0 ? false : true">
|
|
|
+ <div class="historical-records">历史记录</div>
|
|
|
+ <template>
|
|
|
+ <van-row style="padding: 6px 6px 30px;">
|
|
|
+ <van-col
|
|
|
+ span="8"
|
|
|
+ v-for="(iu,ix) in licenseHistory"
|
|
|
+ :key="ix"
|
|
|
+ >
|
|
|
+ <van-button
|
|
|
+ type="default"
|
|
|
+ @click="btn(iu)"
|
|
|
+ >{{iu}}</van-button>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="query-Parking">
|
|
|
+ <van-button
|
|
|
+ type="primary"
|
|
|
+ block
|
|
|
+ :disabled='dis'
|
|
|
+ @click="queryParkingFee"
|
|
|
+ ><span style="color:#FFFFFF">查询停车费</span></van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 缴费订单 -->
|
|
|
+ <div v-show="queryParking">
|
|
|
+ <div class="textinputes">
|
|
|
+ <van-row>
|
|
|
+ <van-col
|
|
|
+ span="24"
|
|
|
+ class="query-Parking"
|
|
|
+ >
|
|
|
+ <van-button
|
|
|
+ type="primary"
|
|
|
+ block
|
|
|
+ >
|
|
|
+ <span style="color: #FFFFFF;line-height: 22px; font-size: 20px;">{{this.licenseNumber}}</span>
|
|
|
+ </van-button>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ <van-row
|
|
|
+ v-for="(iv,ix) in parkingLotInformation"
|
|
|
+ :key="ix"
|
|
|
+ style="padding: 0 5px; margin-bottom: 15px;"
|
|
|
+ >
|
|
|
+ <van-col
|
|
|
+ span="12"
|
|
|
+ style="color: #686B78; font-size: 14px;"
|
|
|
+ >{{iv.name}}</van-col>
|
|
|
+ <van-col
|
|
|
+ span="12"
|
|
|
+ style="text-align: right; color: #373B49; font-size: 14px;"
|
|
|
+ >{{iv.label}}</van-col>
|
|
|
+ </van-row>
|
|
|
+ <p style="font-size: 30px; font-weight: 600; color: #0Fafff; line-height: 42px; text-align: center;">￥15.00</p>
|
|
|
+ </div>
|
|
|
+ <div class="query-Parking">
|
|
|
+ <van-button
|
|
|
+ type="primary"
|
|
|
+ block
|
|
|
+ ><span style="color: #FFFFFF;line-height: 22px; font-size: 15px;">去缴费</span></van-button>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <van-row>
|
|
|
+ <van-col span="24">
|
|
|
+ <span style="font-size: 12px; color: #4b4e5b;">收费标准：2元/小时，前20分钟内免费，超过1小时按照2元收费。缴费15分钟后请立场，15分钟后将重新计费。</span>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 错误的提示 -->
|
|
|
+ <div>
|
|
|
+ <van-popup v-model="showPopup">
|
|
|
+ <van-row>
|
|
|
+ <van-col span="24">
|
|
|
+ <h2 style="text-align: center; margin: 0 ; padding: 0;">{{this.licenseNumber}}</h2>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="24">
|
|
|
+ <p style="text-align: center; margin: 30px; color: #686B78;line-height: 24px;">未查询到该车的订单</p>
|
|
|
+ </van-col>
|
|
|
+ <van-col
|
|
|
+ span="24"
|
|
|
+ class="query-Parking"
|
|
|
+ >
|
|
|
+
|
|
|
+ <van-button
|
|
|
+ type="primary"
|
|
|
+ block
|
|
|
+ @click="noVehicle"
|
|
|
+ >
|
|
|
+ <span style="color: #FFFFFF;line-height: 22px;">知道了</span>
|
|
|
+ </van-button>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+ <!-- 底部 -->
|
|
|
+ <div class="switch_page">
|
|
|
+ <van-tabbar v-model="active">
|
|
|
+ <van-col span="12">
|
|
|
+ <van-tabbar-item
|
|
|
+ @click="tabbarbtn"
|
|
|
+ to="/ParkingFee"
|
|
|
+ >
|
|
|
+
|
|
|
+ <p
|
|
|
+ style="margin: 0; padding: 0; text-align: center; margin-bottom: 5px ;"
|
|
|
+ v-if="tabbarbtnimage"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="../assets/img/navigationBar_icon_parking_visited.png"
|
|
|
+ alt=""
|
|
|
+ >
|
|
|
+ </p>
|
|
|
+ <p
|
|
|
+ style="margin: 0; padding: 0; text-align: center; margin-bottom: 5px ;"
|
|
|
+ v-else
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="../assets/img/navigationBar_icon_parking_normal.png"
|
|
|
+ alt=""
|
|
|
+ >
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <span>停车缴费</span>
|
|
|
+ </van-tabbar-item>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="12">
|
|
|
+ <van-tabbar-item
|
|
|
+ @click="tabbarbtns"
|
|
|
+ to="/paymentrecord"
|
|
|
+ >
|
|
|
+ <p
|
|
|
+ style="margin: 0; padding: 0; text-align: center; margin-bottom: 5px ;"
|
|
|
+ v-if="tabbarbtnsimg"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="../assets/img/navigationBar_icon_bills_normal.png"
|
|
|
+ alt=""
|
|
|
+ >
|
|
|
+ </p>
|
|
|
+ <p
|
|
|
+ style="margin: 0; padding: 0; text-align: center; margin-bottom: 5px ;"
|
|
|
+ v-else
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="../assets/img/navigationBar_icon_bills_visited.png"
|
|
|
+ alt=""
|
|
|
+ >
|
|
|
+ </p>
|
|
|
+ <span>缴费记录</span>
|
|
|
+ </van-tabbar-item>
|
|
|
+ </van-col>
|
|
|
+ </van-tabbar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ active: 0,
|
|
|
+ textinput: true,//查询
|
|
|
+ queryParking: false,//缴费订单
|
|
|
+ showPopup: false,
|
|
|
+ show: false,
|
|
|
+ actions: [{ name: '选项一', value: '1' }, { name: '选项二', value: '2' }, { name: '选项三', value: '3' }],
|
|
|
+ name: '请选择停车场',
|
|
|
+ showKeyboard: true, //车牌号输入框是否聚焦
|
|
|
+ show_chinese: false, //是否显示汉字键盘
|
|
|
+ show_allBoard: false, //是否显示英文数字键盘
|
|
|
+ ChineseList: [
|
|
|
+ { name: "京", id: 1 },
|
|
|
+ { name: "津", id: 2 },
|
|
|
+ { name: "冀", id: 3 },
|
|
|
+ { name: "晋", id: 4 },
|
|
|
+ { name: "蒙", id: 5 },
|
|
|
+ { name: "辽", id: 6 },
|
|
|
+ { name: "吉", id: 7 },
|
|
|
+ { name: "黑", id: 8 },
|
|
|
+ { name: "沪", id: 9 },
|
|
|
+ { name: "苏", id: 10 },
|
|
|
+ { name: "浙", id: 11 },
|
|
|
+ { name: "皖", id: 12 },
|
|
|
+ { name: "闽", id: 13 },
|
|
|
+ { name: "赣", id: 14 },
|
|
|
+ { name: "鲁", id: 15 },
|
|
|
+ { name: "豫", id: 16 },
|
|
|
+ { name: "鄂", id: 17 },
|
|
|
+ { name: "湘", id: 18 },
|
|
|
+ { name: "粤", id: 19 },
|
|
|
+ { name: "桂", id: 20 },
|
|
|
+ { name: "琼", id: 21 },
|
|
|
+ { name: "渝", id: 22 },
|
|
|
+ { name: "川", id: 23 },
|
|
|
+ { name: "贵", id: 24 },
|
|
|
+ { name: "云", id: 25 },
|
|
|
+ { name: "藏", id: 26 },
|
|
|
+ { name: "陕", id: 27 },
|
|
|
+ { name: "甘", id: 28 },
|
|
|
+ { name: "青", id: 29 },
|
|
|
+ { name: "宁", id: 30 },
|
|
|
+ { name: "新", id: 31 },
|
|
|
+ { name: "←", id: 99 },
|
|
|
+ ],
|
|
|
+ English_Number: [
|
|
|
+ { name: "1", id: 28 },
|
|
|
+ { name: "2", id: 29 },
|
|
|
+ { name: "3", id: 30 },
|
|
|
+ { name: "4", id: 31 },
|
|
|
+ { name: "5", id: 32 },
|
|
|
+ { name: "6", id: 33 },
|
|
|
+ { name: "7", id: 34 },
|
|
|
+ { name: "8", id: 35 },
|
|
|
+ { name: "9", id: 36 },
|
|
|
+ { name: "0", id: 37 },
|
|
|
+ { name: "Q", id: 38 },
|
|
|
+ { name: "W", id: 39 },
|
|
|
+ { name: "E", id: 40 },
|
|
|
+ { name: "R", id: 41 },
|
|
|
+ { name: "T", id: 42 },
|
|
|
+ { name: "Y", id: 43 },
|
|
|
+ { name: "U", id: 44 },
|
|
|
+ { name: "I", id: 45 },
|
|
|
+ { name: "O", id: 46 },
|
|
|
+ { name: "P", id: 47 },
|
|
|
+ { name: "A", id: 48 },
|
|
|
+ { name: "S", id: 49 },
|
|
|
+ { name: "D", id: 50 },
|
|
|
+ { name: "F", id: 51 },
|
|
|
+ { name: "G", id: 52 },
|
|
|
+ { name: "H", id: 53 },
|
|
|
+ { name: "J", id: 54 },
|
|
|
+ { name: "K", id: 55 },
|
|
|
+ { name: "L", id: 56 },
|
|
|
+ { name: "Z", id: 57 },
|
|
|
+ { name: "X", id: 58 },
|
|
|
+ { name: "C", id: 59 },
|
|
|
+ { name: "V", id: 60 },
|
|
|
+ { name: "B", id: 61 },
|
|
|
+ { name: "N", id: 62 },
|
|
|
+ { name: "M", id: 63 },
|
|
|
+ { name: "←", id: 99 },
|
|
|
+ ],
|
|
|
+ // plate_number: "", //车牌号
|
|
|
+ first: "",//车牌首字母
|
|
|
+ numArr: [],//车牌号
|
|
|
+ dis: true,
|
|
|
+ dies: true,//用于区分
|
|
|
+ // 车牌历史记录
|
|
|
+ licenseHistory: [],
|
|
|
+ licenseNumber: '粤A80358',
|
|
|
+ parkingLotInformation: [
|
|
|
+ {
|
|
|
+ name: '车场信息',
|
|
|
+ label: '滨江华府停车场'
|
|
|
+ }, {
|
|
|
+ name: '车牌类型',
|
|
|
+ label: '临时车'
|
|
|
+ }, {
|
|
|
+ name: "进场时间",
|
|
|
+ label: '2022/04/01 10:15:00'
|
|
|
+ }, {
|
|
|
+ name: '已停时长',
|
|
|
+ label: '10小时23分钟'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tabbarbtnimage: true,
|
|
|
+ tabbarbtnsimg: true,
|
|
|
+
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ tabbarbtn () {
|
|
|
+ this.tabbarbtnimage = this.dies;
|
|
|
+ this.tabbarbtnsimg = this.dies;
|
|
|
+
|
|
|
+ },
|
|
|
+ tabbarbtns () {
|
|
|
+ this.tabbarbtnimage = !this.dies;
|
|
|
+ this.tabbarbtnsimg = !this.dies;
|
|
|
+ },
|
|
|
+ noVehicle () {
|
|
|
+ this.showPopup = !this.dies;
|
|
|
+ },
|
|
|
+ btn (item) {
|
|
|
+ this.first = '';
|
|
|
+ this.numArr = [];
|
|
|
+ for (let i = 0; i < item.length; i++) {
|
|
|
+ this.first = item[0];
|
|
|
+ this.numArr.push(item[i + 1])
|
|
|
+ }
|
|
|
+ this.dis = !this.dies
|
|
|
+ },
|
|
|
+ // 停车场名称
|
|
|
+ onSelect (item) {
|
|
|
+ console.log(item)
|
|
|
+ this.name = item.name
|
|
|
+ },
|
|
|
+ onCancel () {
|
|
|
+ Toast('取消');
|
|
|
+ },
|
|
|
+ // 唤起键盘
|
|
|
+ clickShowKeyboard () {
|
|
|
+ if (!this.first) {
|
|
|
+ this.show_chinese = true;
|
|
|
+ } else {
|
|
|
+ this.show_chinese = false;
|
|
|
+ this.show_allBoard = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 选择车牌号前面的汉字
|
|
|
+ checkChinese (index) {
|
|
|
+ // 如果点击删除键，删除第一个格的内容
|
|
|
+ if (this.ChineseList[index].id == 99) {
|
|
|
+ this.first = "";
|
|
|
+ } else {
|
|
|
+ // 把选中的字赋值给第一个格，并且切换键盘
|
|
|
+ this.first = this.ChineseList[index].name;
|
|
|
+ this.show_chinese = false;
|
|
|
+ this.show_allBoard = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 选择车牌号后面的数字和字母
|
|
|
+ checkEnglish_num (index) {
|
|
|
+ // 如果点击删除键，删除 numArr 的最后一个值
|
|
|
+ if (this.English_Number[index].id == 99) {
|
|
|
+ this.numArr.pop();
|
|
|
+ // 如果 numArr 里面被删的没有值了，切换键盘
|
|
|
+ if (this.numArr.length == 0) {
|
|
|
+ this.show_chinese = true;
|
|
|
+ this.show_allBoard = false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 把选中的值 push 到 numArr 内
|
|
|
+ this.numArr.push(this.English_Number[index].name);
|
|
|
+ // 如果 numArr 中的值超过 7 个（车牌号的最大位数），删除最后一个
|
|
|
+ if (this.numArr.length > 6) {
|
|
|
+ this.numArr.pop();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 关闭虚拟键盘
|
|
|
+ close_keyboard () {
|
|
|
+ this.show_chinese = false;
|
|
|
+ this.show_allBoard = false;
|
|
|
+ },
|
|
|
+ // 拼接成正确的车牌
|
|
|
+ license () {
|
|
|
+ this.licenseNumber = '' + this.first;
|
|
|
+ for (let i = 0; i < this.numArr.length; i++) {
|
|
|
+ this.licenseNumber = this.licenseNumber + this.numArr[i];
|
|
|
+ }
|
|
|
+ console.log('licenseNumber', this.licenseNumber);
|
|
|
+ },
|
|
|
+ queryParkingFee () {
|
|
|
+ var regExp = /(^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$)/;
|
|
|
+ if (!regExp.test(this.licenseNumber)) {
|
|
|
+ this.$toast.fail("请输入正确的车牌号");
|
|
|
+ } else {
|
|
|
+ // console.log("车牌号正确")
|
|
|
+ this.licenseHistory.push(this.licenseNumber);
|
|
|
+ if (this.licenseHistory.length > 3) {
|
|
|
+ this.licenseHistory.splice(0, 1);
|
|
|
+ }
|
|
|
+ // 接口查询无数据
|
|
|
+ // this.showPopup = this.dies;
|
|
|
+ // textinput: true,//查询
|
|
|
+ // queryParking: false,//缴费订单
|
|
|
+ // 查询到有信息
|
|
|
+ this.textinput = !this.dies;
|
|
|
+ this.queryParking = this.dies;
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // async queryPark () {
|
|
|
+ // if (sessionStorage.getItem("openid") && sessionStorage.getItem("openid") != "undefined") {
|
|
|
+ // return false;
|
|
|
+ // }
|
|
|
+ // var code = getUrlParam('code') // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
|
|
|
+ // var local = 'http://localhost:8080/';
|
|
|
+ // var APPID = 'wx7b149cb31979a667';
|
|
|
+ // if (code == null || code === '') {
|
|
|
+ // alert(1)
|
|
|
+ // window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + APPID + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_base&state=#wechat_redirect'
|
|
|
+ // } else {
|
|
|
+ // alert(2)
|
|
|
+ // getOpenId(code) //把code传给后台获取用户信息
|
|
|
+ // }
|
|
|
+ // const { data: res } = await this.$axios.get('/carManageController/getPublicCommunity', { params: { opendId: '57_GM_uQTi1vhS4Hs5D_U0_9omui1x4Uc7dNst7AQLQIAcuz_4P9tqjolQB-7h65YdDJUqHbp305rOGiS876upzEMHtAKbCCaATmjFyLmAUHWWgOkL0YoCQBkrnxjwsKieCQtzIWKdHw146jAhhIZRhAFADUM' } })
|
|
|
+ // https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
|
|
|
+ // const { data: res } = await this.$axios.get('https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx7b149cb31979a667&redirect_uri=http://localhost:8080/&response_type=code&scope=SCOPE&state=STATE#wechat_redirect')
|
|
|
+ // }
|
|
|
+
|
|
|
+ // 57_Mf5XGWrA0x0-3aTjfuqjWWjH8FvVrDPk-6SPPS2jzw0F3EK2P1tm12vFHY5mBRLu-9LVmG3wprTeH9QW2ZMDV1AJ5yap685iEgGQC9hYOm9hWjgIDfNcDJSAx1DC-MktWL_iSwidw75AxeqxGCFiAIAWSV
|
|
|
+ // https://open.weixin.qq.com/connect/oauth2/authorize?appid='wxa1cc618cbb47fcba'&redirect_uri=''&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
|
|
|
+ // async getOpenId () {
|
|
|
+ // // const { data: res } = await this.$axios.get('/carManageController/getOpenId', { tenantId: '499807838130229248' });
|
|
|
+ // const { data: res } = await this.$axios.get("https://open.weixin.qq.com/connect/oauth2/authorize?appid='wxa1cc618cbb47fcba'&redirect_uri='http://localhost:8081/parkingFee'&response_type=code&scope=SCOPE&state=STATE#wechat_redirect");
|
|
|
+ // }
|
|
|
+
|
|
|
+ gotoWXLogin () {
|
|
|
+ let appid = "wxa1cc618cbb47fcba";
|
|
|
+ // let url = "127.0.0.1:8081/parkingFee";
|
|
|
+ let url = 'http://localhost:8081'
|
|
|
+ // window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + url + "&response_type=code&scope=snsapi_userinfo&state=bc17befd6d5060f16de95e38f6eaf69c&connect_redirect=1#wechat_redirect";
|
|
|
+ window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + encodeURIComponent(url) + '&response_type=code&scope=snsapi_base&state=#wechat_redirect'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ numArr: function (newVal, oldVal) {
|
|
|
+ // console.log("newVal", newVal);
|
|
|
+ // console.log("oldVal", oldVal);
|
|
|
+ if (newVal.length == 6) {
|
|
|
+ this.dis = !this.dies;//启用按钮
|
|
|
+ this.close_keyboard();//关闭虚拟键盘
|
|
|
+ this.license();//车牌
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ // this.queryPark();
|
|
|
+ // this.getOpenId();
|
|
|
+ // this.gotoWXLogin();
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+p img {
|
|
|
+ width: 20px !important;
|
|
|
+}
|
|
|
+body {
|
|
|
+ background: #fafcff !important;
|
|
|
+ // background: #323233 !important;
|
|
|
+ padding: 20px !important;
|
|
|
+ position: relative !important;
|
|
|
+}
|
|
|
+.van-cell--clickable {
|
|
|
+ box-shadow: 0px 0px 10px 0px rgba(222, 229, 239, 0.5);
|
|
|
+}
|
|
|
+.image_style {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+.textinput {
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ width: 335px;
|
|
|
+ // height: 139px;
|
|
|
+ min-height: 139px;
|
|
|
+ height: 100%;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 0px 10px 0px rgba(222, 229, 239, 0.5);
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+.textinputes {
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ width: 335px;
|
|
|
+ // height: 139px;
|
|
|
+ min-height: 290px;
|
|
|
+ height: 100%;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 0px 10px 0px rgba(222, 229, 239, 0.5);
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+.van-row {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.historical-records {
|
|
|
+ font-size: 15px;
|
|
|
+ position: relative;
|
|
|
+ margin-left: 37px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ &::before {
|
|
|
+ position: absolute;
|
|
|
+ left: -14px;
|
|
|
+ top: 4px;
|
|
|
+ width: 6px;
|
|
|
+ height: 15px;
|
|
|
+ border-radius: 2px;
|
|
|
+ display: block;
|
|
|
+ // background: $mainBgColor;
|
|
|
+ background: linear-gradient(180deg, #31ddff 0%, #0eaeff 100%);
|
|
|
+ content: " ";
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// background: #FAFCFF;
|
|
|
+.van-button {
|
|
|
+ background: #fafcff !important;
|
|
|
+}
|
|
|
+.van-button__text {
|
|
|
+ font-size: 15px !important;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400 !important;
|
|
|
+ color: #686b78 !important;
|
|
|
+ line-height: 21px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.textinput {
|
|
|
+ .van-button:focus {
|
|
|
+ // background: #0fafff !important;
|
|
|
+ border: 1px solid #0fafff;
|
|
|
+ }
|
|
|
+}
|
|
|
+.textinput {
|
|
|
+ .van-button:focus:focus > .van-button__content > .van-button__text {
|
|
|
+ color: #0fafff !important;
|
|
|
+ font-size: 15px !important;
|
|
|
+ font-weight: 500 !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.query-Parking > .van-button {
|
|
|
+ background: linear-gradient(90deg, #22d8ff 0%, #0fafff 100%) !important;
|
|
|
+ border-radius: 8px;
|
|
|
+ border-color: "" !important;
|
|
|
+}
|
|
|
+
|
|
|
+.switch_page {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.van-popup--center {
|
|
|
+ width: 300px;
|
|
|
+ height: 200px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.van-button--primary {
|
|
|
+ border: 0 !important;
|
|
|
+}
|
|
|
+/* 车牌 */
|
|
|
+.keyboard {
|
|
|
+ width: 100%;
|
|
|
+ // position: absolute;
|
|
|
+}
|
|
|
+/* // 车牌号 & 虚拟键盘 */
|
|
|
+.input-box {
|
|
|
+ width: 18rem;
|
|
|
+ height: 3.2rem;
|
|
|
+ margin: auto;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ box-shadow: 0px 6px 8px 0px rgba(96, 100, 112, 0.1);
|
|
|
+ border-radius: 0.4rem;
|
|
|
+ border: 1px solid rgba(206, 208, 210, 1);
|
|
|
+ margin: 0 auto 2rem;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ li {
|
|
|
+ flex: 1;
|
|
|
+ border-right: 1px solid rgba(206, 208, 210, 1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-left: -1px;
|
|
|
+ font-size: 1.5rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #323233;
|
|
|
+ }
|
|
|
+ li:last-child {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.class-close-box {
|
|
|
+ width: 2rem;
|
|
|
+ height: 1.5rem;
|
|
|
+ position: absolute;
|
|
|
+ right: 0.5rem;
|
|
|
+ top: -1.3rem;
|
|
|
+}
|
|
|
+.class-close-box-div {
|
|
|
+ width: 1rem;
|
|
|
+ height: 1rem;
|
|
|
+ font-size: 0.8rem;
|
|
|
+ line-height: 1rem;
|
|
|
+ margin: auto;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid #666;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+.class-close-box-li {
|
|
|
+ width: 1px;
|
|
|
+ height: 0.5rem;
|
|
|
+ background: #666;
|
|
|
+ margin: auto;
|
|
|
+}
|
|
|
+.overflow-y {
|
|
|
+ overflow-y: inherit;
|
|
|
+}
|
|
|
+.class-van-button-small {
|
|
|
+ min-width: 0;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin: 5px 2px;
|
|
|
+ box-shadow: 5px 5px 5px #aaa;
|
|
|
+}
|
|
|
+.class-plate-box {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0.7rem 0.5rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #eaf1f9;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.plate_number {
|
|
|
+ .van-popup {
|
|
|
+ @extend .overflow-y;
|
|
|
+ }
|
|
|
+ .van-popup--bottom {
|
|
|
+ background: #eee;
|
|
|
+ }
|
|
|
+ .plate_chinese_box {
|
|
|
+ width: 100%;
|
|
|
+ @extend .class-plate-box;
|
|
|
+ .close-box {
|
|
|
+ @extend .class-close-box;
|
|
|
+ div {
|
|
|
+ @extend .class-close-box-div;
|
|
|
+ }
|
|
|
+ li {
|
|
|
+ @extend .class-close-box-li;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .van-button--small {
|
|
|
+ width: 11.3%;
|
|
|
+ height: 3.5rem;
|
|
|
+ @extend .class-van-button-small;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.allBoard {
|
|
|
+ .van-popup {
|
|
|
+ @extend .overflow-y;
|
|
|
+ }
|
|
|
+ .plate_number_box {
|
|
|
+ width: 100%;
|
|
|
+ @extend .class-plate-box;
|
|
|
+ .close-box {
|
|
|
+ @extend .class-close-box;
|
|
|
+ div {
|
|
|
+ @extend .class-close-box-div;
|
|
|
+ }
|
|
|
+ li {
|
|
|
+ @extend .class-close-box-li;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .van-button--small {
|
|
|
+ width: 8.8%;
|
|
|
+ height: 3rem;
|
|
|
+ @extend .class-van-button-small;
|
|
|
+ }
|
|
|
+ .van-button--small:nth-child(1) {
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ .van-button--small:nth-child(21) {
|
|
|
+ margin-left: 5%;
|
|
|
+ }
|
|
|
+ .van-button--small:nth-child(30) {
|
|
|
+ margin-left: 10%;
|
|
|
+ }
|
|
|
+ .van-button--small:last-child {
|
|
|
+ width: 13%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
