illegalcheck.vue 4.7 KB

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