shell/pages/index/index.vue

<template>
	<view class="content">
		<view class="top">
			<view class="searchBox">
				<view class="searchInputBox" @click="goSearch">
					<image src="../../static/img/icon_search.png" mode="" class="simg"></image>
					<input type="text" placeholder="请输入车型品牌或车系名称" placeholder-class="ip" class="ssinput">
				</view>
				<view class="st" @click="stBtn">
				   <image src="../../static/img/icon_shitu.png" mode="" class="stimg"></image>
				   <view class="shitu">识图</view>
				</view>
				
			</view>
		</view>
		
		<!-- 历史查询 -->
		<view class="historybox ">
			<view class="history">
				<view class="historyTop" @click="gohistory">
					<view class="historyTitle">历史查询</view>
					<image src="../../static/img/icon_arrow.png" mode="" class="jiantouimg"></image>
				</view>
				<view class="historyLine" v-for="(item,index) in 3">
					<image src="http://img.db.66km.cn/carbrandlogo/B - 宝马.png" mode="" class="historylinecarImg"></image>
					<view class="historylinecar">华晨宝马iX3 G08 电动 HA001N0电动领先型 ( 改款 )（2021-2021）过长换行</view>
				</view>
			</view>
		</view>
		<carModel ref="carModelView" ></carModel>
		
		<!-- 选择车型 -->
		<view class="ckcarBox" v-if="ckCarShow">
			<view class="ckcar">
				<view class="ckcarTop flex">
					<view class="ckcarTitle">请选择车型</view>
					<image src="../../static/img/icon_quxiao.png" mode="" class="ckcarClose" @click="ckcarClose"></image>
				</view>
				<view class="ckcarlineBox"  v-for="(item,index) in moreVinList">
					<view class="ckcarline flex">
						<view class="ckcarLeft">{{item.title}}</view>
						<image src="../../static/img/icon_arrow.png" mode="" class="ckcarJtimg"></image>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import carModel from './carModel.vue'
	export default {
		components: {
			carModel, //注册子组件
			
		},
		data() {
			return {
				fileURl: '',
				ckCarShow:false,
				vinNum:'',
				moreVinList:[],
			}
		},
		onLoad() {
           var that=this;
           setTimeout(function(){
           			  that.$refs.carModelView.getdata();
           },500)
		},
		methods: {
             gohistory(){
				 uni.navigateTo({
				 	url:'/pages/index/history'
				 })
			 },
			 goSearch(){
				 uni.navigateTo({
				 	url:'/pages/index/search'
				 })
			 },
			 stBtn(){
				 var that = this;
				 uni.showLoading({ title: '加载中'});
				 uni.chooseImage({
				 	sourceType: ['album','camera'],
				 	count:1, 
				 	success: (chooseImageRes) => {
				 		console.log(chooseImageRes)
				 		const tempFilePaths = chooseImageRes.tempFilePaths;
				 		this.fileURl=tempFilePaths[0]
				 		
				 		 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;
										that.queryCarModelGroupByVinAggregation()
				 					}else{
				 						uni.showToast({
				 						    title: data.msg,
				 						    duration: 3000,
				 							icon:'none',
				 						});
				 					}
				 					
				 	                //console.log(JSON.parse(uploadFileRes.data).data );
				 					
				 	            }
				 	        }); 
				 
				 		
				 	}
				 });
			 },
			 queryCarModelGroupByVinAggregation(){
				 this.$http('matchingByOpen/queryCarModelGroupByVinAggregation', {
				 	vin: this.vinNum,type:2
				 }, 'POST').then(res => {
					if(res.code!=1){
						this.moreVinList=res.data;
						this.ckCarShow=true;
						
					}
				 	 else {
				 	
						 uni.showToast({
							 title: res.msg,
							 duration: 3000,
							 icon:'none',
						 });
				 	}
				 	
				 })
			 },
			 ckcarClose(){
				 this.ckCarShow=false;
			 }
		}
	}
</script>

<style scoped>
.ckcarJtimg{
	width: 26rpx;height: 26rpx;margin-top: 4rpx;
}
.ckcarlineBox{
  padding:24rpx ;	
  border-bottom: 1px solid #EEEEEE;
}
.ckcarLeft{
	font-weight: 400;line-height: 36rpx;
	color: #1A1A1A;font-size: 26rpx;
}
.ckcarBox{
	width: 100vw;height: 100vh;
	background:rgba(0, 0, 0, 0.4) ;
	position: fixed;top: 0;left: 0;
}
.ckcar{
	width: 750rpx;
	height: 772rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	position: absolute;
	left: 0;
	bottom: 0;
}
.ckcarClose{
	width: 30rpx;height: 30rpx;
}
.ckcarTitle{
	font-weight: 500;font-size: 28rpx;
	color: #1A1A1A;
	line-height: 40rpx;
}
.ckcarTop{
	padding: 40rpx 26rpx 20rpx 24rpx;
}
.content{
	min-height: 100vh;background: #F4F5F7;
}
.top{
	width: 100%;height: 230rpx;
	background: url('http://dmsphoto.66km.com.cn/thFiles/DE1573A0-1C08-4243-8313-C0BA094406D0.png') no-repeat;
	background-size: 100% 100%;
}
.searchInputBox{
	width: 634rpx;display: flex;
	height: 80rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
}
.simg{
	width: 34rpx;height: 34rpx;margin-top: 23rpx;margin-left:30rpx;
}
.stimg{
	width: 44rpx;height: 44rpx;
}
.searchBox{
	display: flex;padding: 30rpx 24rpx;
	justify-content: space-between;
}
.ssinput{
	font-size: 28rpx;font-weight: 400;padding-left: 24rpx;line-height: 80rpx;height: 80rpx;
}
.ip{
	color: #999999;
}
.shitu{
	font-weight: 400;
	color: #FFFFFF;font-size: 22rpx;
}
.st{
	text-align: center;
}
.historybox{
	padding: 0 24rpx;    margin-top: -80rpx;
}
.history{
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 30rpx;padding-bottom: 0;
}
.jiantouimg{
	width: 26rpx;height: 26rpx;margin-top: 7rpx;
}
.historyTop{
	display: flex;justify-content: space-between;
	padding-bottom: 30rpx;
}
.historyTitle{
	font-weight: 500;font-size: 28rpx;
	color: #1A1A1A;line-height: 40rpx;
}
.historylinecarImg{
	width: 46rpx;
	height: 46rpx;
}
.historylinecar{
	font-weight: 400;font-size: 26rpx;
	color: #1A1A1A;
	line-height: 37rpx;width: 576rpx;
}
.historyLine{
	display: flex;justify-content: space-between;
	padding: 30rpx 0;border-top: 1rpx solid #EEEEEE;
}
</style>