getin.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  1. <template>
  2. <view class="">
  3. <u-navbar
  4. title="车辆入场"
  5. title-color="#fff"
  6. :custom-back="customBack"
  7. :border-bottom="false"
  8. back-icon-color="#CCE8FF"
  9. :background="{background: 'linear-gradient(145deg, #41AFF9 0%, #2D8CFB 100%)' }"></u-navbar>
  10. <view class="car-info u-flex">
  11. <view class="car-info-img" @click="getPic">
  12. <u-image :src="carImg" mode="aspectFit" width="100%" height="100%"></u-image>
  13. </view>
  14. <view class="car-info-text u-flex-1">
  15. <view class="text-item position-wrap">
  16. <view class="position">车位:{{spaceName}}</view>
  17. </view>
  18. <view class="text-item u-flex u-flex u-row-between">
  19. <view class="">车辆类型</view>
  20. <view class="" @click="carTypeShow = true">{{vehicleType|filterCarType}}</view>
  21. </view>
  22. <view class="text-item u-flex u-flex u-row-between">
  23. <view class="">余额:<span class="balance">{{balance||'暂无'}}</span></view>
  24. <!-- <view class="recharge" @click="$refs.uToast.show({title: '建设中'})">充值</view> -->
  25. </view>
  26. <view class="text-item">{{$u.timeFormat(currentTime, 'yyyy-mm-dd hh:MM:ss')}}</view>
  27. </view>
  28. </view>
  29. <view class="other-info">
  30. <view class="other-info-item u-flex">
  31. <u-input v-model="vehicleNo" height="80" type="text" placeholder="输入车牌号" />
  32. <u-button type="primary" @click="handleParkInInfo">确认</u-button>
  33. </view>
  34. <!-- <view class="other-info-item">
  35. <u-input style="width: 100%;" v-model="depositAmount" height="80" type="text" placeholder="输入进场押金" />
  36. </view> -->
  37. </view>
  38. <view class="upload-wrap">
  39. <u-upload
  40. ref="uUpload"
  41. :action="uploadAction"
  42. :show-progress="false"
  43. upload-text="拍照取证" ></u-upload>
  44. </view>
  45. <view class="bottom-btn-wrap">
  46. <view class="bottom-btn-box u-flex">
  47. <view class="bottom-btn bg-blue" @click="submit">入场</view>
  48. <view class="bottom-btn bg-gray" @click="openPage('pages/getout/getout')">取消</view>
  49. </view>
  50. </view>
  51. <u-select v-model="carTypeShow" :default-value="[vehicleType]" :list="carTypeList" @confirm="carTypeConfirm"></u-select>
  52. <u-toast ref="uToast" />
  53. </view>
  54. </template>
  55. <script>
  56. import { config } from '@/common/config.js';
  57. //#ifdef APP-PLUS
  58. import speak from '@/utils/speaks.js';
  59. let ALog = uni.requireNativePlugin("AndroidLog");
  60. let device = uni.requireNativePlugin("DeviceInfo");
  61. //#endif
  62. export default {
  63. data() {
  64. return {
  65. carImg:'/static/img/default-car.png',
  66. uploadAction:config.baseUrl+'/file/tencent/upload',
  67. spaceId:'',
  68. spaceName:'',
  69. carTypeShow:false,
  70. carTypeList:[
  71. {label: '小车',value:0}
  72. ,{label: '大车',value:1}
  73. ,{label: '超大型车',value:2}
  74. ,{label: '摩托车',value:3}
  75. ,{label: '非机动车',value:4}
  76. ,{label: '其他',value:5}
  77. ],
  78. vehicleType:0,
  79. currentTime: new Date(), // 获取当前时间
  80. vehicleNo:null,
  81. vehicleColor:null,
  82. vehicleImage:null,
  83. memberId:null,
  84. depositAmount:null,
  85. balance:null,
  86. images:[]
  87. }
  88. },
  89. onLoad(page) {
  90. this.spaceId = page.spaceId;
  91. this.orderInTime = page.orderInTime;
  92. this.spaceName = page.spaceName;
  93. this.roadNo = page.roadNo;
  94. },
  95. onShow() {
  96. },
  97. methods:{
  98. customBack(){
  99. this.$u.route({
  100. // type:'switchTab',
  101. url: 'pages/parking/parking'
  102. });
  103. },
  104. openPage(path) {
  105. console.log('path',path);
  106. this.$u.route({
  107. url: path
  108. })
  109. },
  110. carTypeConfirm(e){
  111. // console.log('carTypeConfirm',e[0].label);
  112. // this.carType = e[0].label;
  113. this.carType = e[0].value;
  114. this.vehicleType = e[0].value;
  115. },
  116. submit(){
  117. let files = [];
  118. let that = this;
  119. // 通过filter,筛选出上传进度为100的文件(因为某些上传失败的文件,进度值不为100,这个是可选的操作)
  120. files = this.$refs.uUpload.lists.filter(val => {
  121. return val.progress == 100;
  122. });
  123. // 如果不需要进行太多的处理,直接如下即可
  124. // files = this.$refs.uUpload.lists;
  125. files.forEach(function(element) {
  126. that.images.push(element.response.data.url);
  127. });
  128. let param ={
  129. spaceId:this.spaceId,
  130. vehicleNo:this.vehicleNo,
  131. vehicleColor:this.vehicleColor,
  132. vehicleImage:this.vehicleImage,
  133. vehicleType:this.vehicleType,
  134. memberId:this.memberId,
  135. depositAmount:this.depositAmount,
  136. images:this.images
  137. };
  138. this.$u.api.entrance(param)
  139. .then(res=>{
  140. this.$refs.uToast.show({
  141. title: res.msg,
  142. type: 'success',
  143. url:'pages/getout/getout'
  144. });
  145. //#ifdef APP-PLUS
  146. device.print(res.data.print);
  147. speak(res.data.speak);
  148. //#endif
  149. console.log('entrance',res)
  150. }).catch(err=>{
  151. this.$refs.uToast.show({
  152. title: err.msg,
  153. type: 'error',
  154. // url:'pages/parking/parking'
  155. });
  156. console.log('entrance ',err)
  157. });
  158. },
  159. handleParkInInfo(){
  160. let param ={
  161. vehicleNo:this.vehicleNo,
  162. roadNo:this.roadNo
  163. };
  164. this.$u.api.parkInInfo(param)
  165. .then(res=>{
  166. this.$refs.uToast.show({
  167. title: res.msg,
  168. type: 'success',
  169. // url:'pages/getout/getout'
  170. });
  171. //#ifdef APP-PLUS
  172. speak(this.vehicleNo);
  173. //#endif
  174. this.vehicleType = res?.data?.vehicleType??"0";
  175. this.balance = res?.data?.balance;
  176. console.log('parkInInfo',res);
  177. console.log('this.vehicleType',this.vehicleType)
  178. }).catch(err=>{
  179. this.$refs.uToast.show({
  180. title: err.msg,
  181. type: 'error',
  182. // url:'pages/parking/parking'
  183. });
  184. console.log('parkInInfo ',err)
  185. });
  186. },
  187. getPic(){
  188. let that = this;
  189. uni.chooseImage({
  190. count: 1, //默认9
  191. sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有
  192. sourceType: ['camera'], //
  193. success: function (res) {
  194. console.log('img',res)
  195. that.carImg = res.tempFilePaths[0];
  196. uni.showLoading({});
  197. const tempFilePaths = res.tempFilePaths;
  198. // 若多选,需循环调用uni.uploadFile ,因微信小程序只支持单文件上传
  199. uni.uploadFile({
  200. url: `${that.config.fileUrl}/baidu/ocr`,
  201. filePath: tempFilePaths[0],
  202. name: 'file',
  203. formData: {
  204. 'test': 'test' // 上传附带参数
  205. },
  206. success: (res) => {
  207. // 根据接口具体返回格式 赋值具体对应url
  208. // alert(uploadFileRes.data);
  209. let resobj=eval("("+res.data+")");
  210. uni.hideLoading();
  211. if(resobj.code==200){
  212. console.log(resobj);
  213. //#ifdef APP-PLUS
  214. speak(resobj.data.vehicleNo);
  215. //#endif
  216. that.vehicleNo = resobj.data.vehicleNo;
  217. that.vehicleClor = resobj.data.vehicleClor;
  218. that.vehicleImage = resobj.data.url;
  219. }else{
  220. that.$refs.uToast.show({
  221. title: resobj.msg,
  222. type: 'error'
  223. });
  224. };
  225. console.log('resobj',resobj);
  226. },
  227. fail: (err) => {
  228. that.$refs.uToast.show({
  229. title:err.msg,
  230. type: 'error'
  231. });
  232. uni.hideLoading();
  233. }
  234. });
  235. }
  236. });
  237. }
  238. }
  239. }
  240. </script>
  241. <style lang="scss">
  242. @import "./getin.scss";
  243. </style>