zhongshuo/pages/vin/vinquery.vue

<template>
	<view class="vinbox">
		<view style="height: 90rpx;"></view>
		<view class="carSs">
			<view class="carssBox" @click="vinLog">
				<img src="../../static/img/icon_search.png" alt="" class="carSsImg">
				<input type="text" placeholder="请输入17位车架号查询" class="carssInput" v-model="vinNum" @confirm="vincx">
			</view>
			<view class="search-history" v-if="vinLogShow">
				<view class="historyLine" @click="vinLogBtn(item)" v-for="(item,index) in vinLogList">{{item.vin}}</view>
			</view>
		</view>
		
		<view class="vincxBox" @click.stop="vinLogShow=false">
			<view class="vinupbox">
				<img src="../../static/img/btn_pic.png" alt="" class="vinupImg" @click="upimg">
				<img :src="fileURl" alt=""  class="vinupImg2" v-if="fileURl">
				<img src="../../static/img/icon_search_del.png" v-if="fileURl" alt="" class="vinupNo" @click="fileURl=''">
			</view>
			<view class="vincxBtn" @click="vincx">查询</view>
		</view>
		<view class="vinmsbox" @click.stop="vinLogShow=false">
			<view class="vinms">*拍照时请将识别代码完整置于相机内</view>
			<view>
				<img src="../../static/img/bg_vin.png" alt="" class="vinmsImg">
			</view>
		</view>
		<view class="moreVinBox" v-if="moreVinShow" @click.stop="moreVinShow=false">
			<view class="moreVin">
				<view class="moreVinTop">选择车型</view>
				<view class="moreVinline" v-for="(item,index) in moreVinList"  @click.stop="golist(item)">
					<view class="moreVinlineTxt">{{item.title}}</view> 
					<img src="../../static/img/icon_jiantou@2x.png" alt="" class="moreVinJt">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {
				vinLogList:[],
				vinLogShow:false,
				vinNum:'',
				fileURl:'',
				moreVinShow:false,
				moreVinList:'',
			}
		},
		onLoad() {
       
		},
		methods: {
			golist(item){
				uni.navigateTo({
					url:'list?name='+item.value+'&nLevelID='+item.carModelInfo.nLevelID+'&id='+item.ids+'&vin='+this.vinNum
				})
			},
			upimg(){
				var that = this;
				uni.showLoading({ title: '加载中'});
				uni.chooseImage({
					sourceType: ['album','camera'],
					count:1, 
					success: (chooseImageRes) => {
						console.log(chooseImageRes)
						const tempFilePaths = chooseImageRes.tempFilePaths;
						//that.file=tempFilePaths[0];
						this.fileURl=tempFilePaths[0]
						/* that.$http('vinByOpenApi/scanner', {
							photo:chooseImageRes.tempFiles[0]
							
						}, 'POST').then(res => {
							if(res.code!=1){
								
							}else{
								uni.showToast({
								    title: res.msg,
								    duration: 3000,
									icon:'none',
								});
							}
							
						}) */
						 uni.uploadFile({
					            url: that.$baseURL+'scanner?action=/vinByOpenApi/scanner', //仅为示例，非真实的接口地址
					            filePath: tempFilePaths[0],
					            name: 'photo',
					           /* formData: {
					                'user': 'test'
					            }, */
					            success: (uploadFileRes) => {
									var data=JSON.parse(uploadFileRes.data);
									uni.hideLoading();
									if(data.code!=1){
										console.log(data.data)
										that.vinNum=data.data
									}else{
										uni.showToast({
										    title: data.msg,
										    duration: 3000,
											icon:'none',
										});
									}
									
					                //console.log(JSON.parse(uploadFileRes.data).data );
									
					            }
					        }); 
				
						
					}
				});
			},
          vinLog(){
			  this.$fetchPost('vinLog', {
			  	
			  }).then(res => {
			  	this.vinLogList=res.data;
				this.vinLogShow=true;
			  })
		  },
		  vinLogBtn(item){
			  this.vinNum=item.vin
			  this.onSearch()
		  },
		  vincx(){
			  this.onSearch()
		  },
		  onSearch(){
			  this.$http('matchingByOpen/queryCarModelGroupByVinAggregation', {
			  	vin: this.vinNum,type:2
			  }, 'POST').then(res => {
				if(res.code!=1){
					if (res.data.length === 1) {
					  this.saveVinLog({
					    vin: this.vinNum,
					    groupIDS: res.data[0].ids,
					    title: res.data[0].title,
					    nLevelID: res.data[0].nLevelIDs
					  })
					   this.vinLogShow = false;
					   var item=res.data[0]
					   uni.navigateTo({
					   	url:'list?name='+item.value+'&nLevelID='+item.carModelInfo.nLevelID+'&id='+item.ids+'&vin='+this.vinNum
					   })
					}else{
						this.moreVinList=res.data;
						this.moreVinShow=true;
					}
				}
			  	 else {
			  	  this.vinLogShow = false
			  	 // this.groupList = res
				 uni.showToast({
				     title: res.msg,
				     duration: 3000,
					 icon:'none',
				 });
			  	}
			  	
			  })
		  },
		  saveVinLog(item){
			  this.$fetchPost('saveVinLog', {
			  	vin: this.value,
			  	groupIDS: item.ids,
			  	title: item.title,
			  	nLevelID: item.nLevelIDs
			  }).then(res => {
			  	//this.vinLogList=res.data
			  })
		  }
		}
	}
</script>

<style scoped>
	
	.carSs{
		width: 750rpx;
		height: 96rpx;
		background: #FFFFFF;
		padding-top: 24rpx;
		position: relative;
	}
	.carssBox{
		width: 702rpx;
		height: 72rpx;
		background: #F4F5F7;
		border-radius: 36rpx;
		margin: 0 auto;
		
	}
	.carSsImg{
		width: 40rpx;
		height: 40rpx;
		margin-top: 16rpx;
		margin-left: 20rpx;
	}
	.carssInput{
		line-height:72rpx;
		font-size: 28rpx;
		height:72rpx;
		padding-left: 16rpx;
		width: 600rpx;
	}
	.carssBox{
		display: flex;
	}
	.vinupImg{
		width: 208rpx;height: 203rpx;
		
	}
	.vincxBox{
		background: #FFFFFF;
		margin-top: 20rpx;
		padding: 30rpx;
	}
	.vinupbox{
		text-align: center;
		position: relative;
	}
	.vincxBtn{
		width: 560rpx;
		height: 74rpx;
		background: #3F90F7;
		border-radius: 37rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 30rpx;
		line-height: 74rpx;
		margin: 0 auto;
		margin-top: 40rpx;
	}
	.vinmsImg{
		width: 460rpx;
		
	}
	.vinupImg2{
		width: 160rpx;
		height: 160rpx;
		position: absolute;
		top:0;
		left: 270rpx;
	}
	.vinupNo{
		width: 35rpx;
		height: 35rpx;
		position: absolute;
		top: -18rpx;
		left: 420rpx;
		z-index: 10;
	}
	.vinmsbox{
		text-align: center;
		background: #FFFFFF;
		margin-top: 20rpx;
		padding-top: 30rpx;
		 height: calc(100vh - 800rpx); 
	}
	.vinms{
		color: #666666;
		font-size: 26rpx;
		padding-bottom: 20rpx;
	}
	.search-history{
		background: #FFFFFF;
		border: 1px solid #f0f0f0;
		z-index: 10;
		position: absolute;
		width: 600rpx;
		left: 75rpx;
		top: 100rpx;
	}
	.historyLine{
		color: #323233;
		padding: 15rpx;
		border-bottom: 1px solid #ebedf0;
	}
	.moreVinBox{
		position: fixed;
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,0.5);
		top: 0;
		left: 0;
		z-index: 9999;
	}
	.moreVinTop{
		color: #FFFFFF;
		background: #3f90f7;
		border-radius: 20rpx 20rpx 0 0;
		line-height: 100rpx;
		padding-left: 24rpx;
		font-size: 28rpx;
	}
	.moreVin{
		background: #FFFFFF;
		width: 600rpx;
		margin-left: 75rpx;
		margin-top: 40vh;
		border-radius: 20rpx;
		overflow: hidden;
	}
	.moreVinline{
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #323233;
		padding: 30rpx 24rpx;
		border-bottom: 1px solid #ebedf0;
	}
	.moreVinJt{
		width: 12rpx;
		height: 20rpx;
		margin-top: 8rpx;
	}
</style>