getcarno.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <template>
  2. <view>
  3. <view class="taking-pictures" @click="getPic">
  4. </view>
  5. <view class="wrap">
  6. <view class="title">手输车牌号</view>
  7. <view class="new-plate-number">
  8. <view class="message-input-wrap" @click="messageInputClick">
  9. <u-message-input :maxlength="8" width="70" font-size="50" :disabled-keyboard="true" v-model="newPlateNumber"></u-message-input>
  10. </view>
  11. <u-keyboard ref="uKeyboard" mode="car" @change="keyboardChange" @backspace="backspace" v-model="keyboardshow"></u-keyboard>
  12. </view>
  13. <view class="bottom-btn" @click="submit">确认</view>
  14. </view>
  15. <u-toast ref="uToast" />
  16. </view>
  17. </template>
  18. <script>
  19. import getUrlParams from "../../utils/getUrlParams.js";
  20. export default{
  21. data(){
  22. return{
  23. keyboardshow:false,
  24. newPlateNumber:'',
  25. spaceId:'',
  26. vehicleClor:''
  27. }
  28. },
  29. onLoad(){
  30. let locationLocaturl = window.location.hash;
  31. // console.log('locationLocaturl',locationLocaturl)
  32. this.spaceId = getUrlParams(locationLocaturl,"spaceId");
  33. },
  34. methods:{
  35. getPic(){
  36. let that = this;
  37. uni.chooseImage({
  38. count: 1, //默认9
  39. sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有
  40. sourceType: ['camera'], //
  41. success: function (res) {
  42. // console.log('img',res)
  43. uni.showLoading({});
  44. const tempFilePaths = res.tempFilePaths;
  45. // 若多选,需循环调用uni.uploadFile ,因微信小程序只支持单文件上传
  46. uni.uploadFile({
  47. url: `${that.config.fileUrl}/baidu/ocr`,
  48. filePath: tempFilePaths[0],
  49. name: 'file',
  50. formData: {
  51. 'test': 'test' // 上传附带参数
  52. },
  53. success: (res) => {
  54. // 根据接口具体返回格式 赋值具体对应url
  55. // alert(uploadFileRes.data);
  56. let resobj=eval("("+res.data+")");
  57. uni.hideLoading();
  58. if(resobj.code==200){
  59. console.log(resobj);
  60. that.newPlateNumber = resobj.data.vehicleNo;
  61. that.vehicleClor = resobj.data.vehicleClor;
  62. }else{
  63. that.$refs.uToast.show({
  64. title: resobj.msg,
  65. type: 'error'
  66. });
  67. }
  68. console.log(res);
  69. },
  70. fail: (err) => {
  71. that.$refs.uToast.show({
  72. title:err.msg,
  73. type: 'error'
  74. });
  75. uni.hideLoading();
  76. }
  77. });
  78. }
  79. });
  80. },
  81. messageInputClick(){
  82. this.keyboardshow = true;
  83. },
  84. // 按键被点击(点击退格键不会触发此事件)
  85. keyboardChange(val) {
  86. // 将每次按键的值拼接到value变量中,注意+=写法
  87. this.newPlateNumber += val;
  88. console.log(this.newPlateNumber);
  89. },
  90. // 退格键被点击
  91. backspace() {
  92. // 删除value的最后一个字符
  93. if(this.newPlateNumber.length) this.newPlateNumber = this.newPlateNumber.substr(0, this.newPlateNumber.length - 1);
  94. console.log(this.newPlateNumber);
  95. },
  96. submit(){
  97. let param ={
  98. spaceId:this.spaceId,
  99. vehicleNo:this.newPlateNumber,
  100. };
  101. this.$u.api.entrance(param)
  102. .then(res=>{
  103. this.$refs.uToast.show({
  104. title: res.msg,
  105. type: 'success',
  106. url:'pages/getout/getout'
  107. });
  108. console.log('entrance',res)
  109. }).catch(err=>{
  110. this.$refs.uToast.show({
  111. title: err.msg,
  112. type: 'error',
  113. url:'pages/parking/parking'
  114. });
  115. console.log('entrance ',err)
  116. });
  117. }
  118. }
  119. }
  120. </script>
  121. <style lang="scss" scoped>
  122. @import "./getcarno.scss";
  123. </style>