carcheck.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <template>
  2. <view class="check">
  3. <view class="cbox">
  4. <view class="chtop flexc">
  5. <image :src="line"></image>
  6. <view>车辆信息</view>
  7. </view>
  8. <view class="chmain">
  9. <view class="upbox" @click="getaddImage">
  10. <!-- <image :src="baseUrl+datainfo.front" class="img" v-if="datainfo.front"></image> -->
  11. <image :src="car" class="addimg"></image>
  12. <view>拍摄车辆照片自动识别</view>
  13. </view>
  14. <uni-forms ref="form" :model="datainfo">
  15. <uni-forms-item label="车牌号码" name="realName">
  16. <uni-easyinput v-model="datainfo.realName" disabled :inputBorder='false' placeholder="自动识别" />
  17. </uni-forms-item>
  18. <uni-forms-item label="来访门户" name="phonenumber">
  19. <uni-easyinput v-model="datainfo.phonenumber" :inputBorder='false' placeholder="请输入门户号" />
  20. </uni-forms-item>
  21. <uni-forms-item label="手机号码" name="phonenumber">
  22. <uni-easyinput v-model="datainfo.phonenumber" :inputBorder='false' placeholder="请输入手机号码" />
  23. </uni-forms-item>
  24. </uni-forms>
  25. <view class="rhbtn mt63" @click="getNext">确定添加</view>
  26. </view>
  27. </view>
  28. <loading></loading>
  29. </view>
  30. </template>
  31. <script>
  32. import config from '@/config'
  33. import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
  34. import {uploadIdentify} from '@/utils/common.js'
  35. export default{
  36. components:{},
  37. data(){
  38. return{
  39. line:require('@/car/static/car/line.png'),
  40. car:require('@/car/static/car/carico.png'),
  41. baseUrl:config.baseUrl,
  42. datainfo:{
  43. realName:'',
  44. phonenumber:'',
  45. front:'',
  46. },
  47. }
  48. },
  49. onLoad: function() {
  50. },
  51. methods:{
  52. checkPermi, checkRole,
  53. getaddImage(e){
  54. let that = this;
  55. // var rs=['D:\\idcard.png']
  56. // if(rs&&rs.length>0){
  57. // var obj={
  58. // type:e,
  59. // // url:baseUrl+rs.join(',')
  60. // url:rs.join(',')
  61. // }
  62. // that.getOcrIdCard(obj)
  63. // }
  64. // return
  65. let file =[],count=9
  66. uni.chooseImage({
  67. count: 1,
  68. success:function(res){
  69. let img= res.tempFilePaths;
  70. if(img.length + file.length > count){
  71. uni.showToast({
  72. title: '最多上传'+count+'张图片',
  73. icon: 'none',
  74. duration: 2000
  75. })
  76. }else{
  77. let imglen = res.tempFilePaths.length;
  78. var fuwufile = [];
  79. uploadIdentify('/common/upload',img,0,0,0,imglen,fuwufile,function(rs){
  80. var resurl=rs[0];
  81. if(e=='front'){
  82. that.datainfo.front=resurl.fileName;
  83. }else{
  84. that.datainfo.back=resurl.fileName;
  85. }
  86. if(rs&&rs.length>0){
  87. var obj={
  88. type:e,
  89. url:resurl.urlOnline
  90. }
  91. that.getOcrIdCard(obj)
  92. }
  93. })
  94. }
  95. }
  96. });
  97. },
  98. getOcrIdCard(obj){
  99. var params={
  100. image:obj.url,
  101. idCardSide:obj.type
  102. }
  103. getOcrIdCard(params).then(res=>{
  104. if(res.code==200){
  105. var datainfo=res.data;
  106. if(obj.type=='front'){
  107. this.datainfo.realName=datainfo.realName;
  108. this.datainfo.idCard=datainfo.idCard;
  109. this.datainfo.address=datainfo.address;
  110. }else{
  111. this.datainfo.expirationDate=datainfo.expirationDate
  112. }
  113. }
  114. })
  115. }
  116. }
  117. }
  118. </script>
  119. <style>
  120. page{background: #F3F3F0;}
  121. </style>
  122. <style lang="scss" scoped>
  123. .check /deep/ .uni-forms-item{min-height: 106rpx;box-sizing: border-box;display: flex;align-items: center;margin-bottom: 0;border-bottom: 2rpx solid #E6E6E6;padding:10rpx 0;}
  124. .check /deep/ .uni-forms-item__label{font-weight: bold;font-size: 26rpx;color: #222327;flex: 0 0 auto;width: auto !important;}
  125. .check /deep/ .uni-easyinput{flex: 1;text-align: right;font-size: 26rpx;color: #222327;}
  126. .check /deep/ .uni-easyinput__content-textarea{min-height: 40rpx;font-size: 26rpx;}
  127. .check /deep/ .uni-easyinput__placeholder-class{font-size: 26rpx;color: #AAAAAA;}
  128. .check /deep/ .uni-input-input{font-size: 26rpx;}
  129. .check /deep/ .uni-textarea-textarea{font-size: 26rpx;}
  130. .check /deep/ .is-disabled{color: #222327;background-color: #ffffff !important;}
  131. .check{min-height: 100vh;padding: 20rpx 24rpx 24rpx;box-sizing: border-box;display: flex;box-sizing: border-box;}
  132. .cbox{background: #FFFFFF;border-radius: 20rpx;flex: 1;padding-bottom: 32rpx;
  133. .chtop{padding-top: 32rpx;margin-bottom: 32rpx;
  134. image{width: 14rpx;height: 48rpx;margin-right: 20rpx;}
  135. view{font-weight: bold;font-size: 32rpx;color: #272727;}
  136. }
  137. .chmain{
  138. padding: 0 24rpx;
  139. .upbox{height: 224rpx;background: #EFF4FF;border-radius: 20rpx;display: flex;align-items: center;justify-content: center;flex-direction: column;margin-bottom: 8rpx;overflow: auto;
  140. .img{width: 100%;height: 100%;}
  141. .addimg{width: 70rpx;height: 70rpx;margin-bottom: 16rpx;}
  142. view{font-weight: bold;font-size: 26rpx;color: #4C6686;}
  143. }
  144. }
  145. }
  146. </style>