shell/pages/index/index.vue

<template>
	<view class="content">
		<view class="top">
			<view class="topNavBox">
				<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
				<view class="indexnav">用油查询</view>
			</view>
			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			<view style="height: 43px;"></view>
			<view class="searchBox">
				<view class="searchInputBox" @click="goSearch">
					<image src="../../static/img/icon_search.png" mode="" class="simg"></image>
					<input type="text" placeholder="请输入车辆品牌、车系或VIN码" 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 historyList" v-if="index<3" @click="gocarDetail(item)">
					<view class="historyLogoBox">
						<image :src="item.logo" mode="" class="historylinecarImg"></image>
					</view>
					
					<view class="historylinecar">{{item.title}}</view>
				</view>
			</view>
		</view>
		<!-- <view :style="{height: aaa}" class="aaaaa"></view> -->
		<carModel ref="carModelView" :iStatusBarHeight="iStatusBarHeight" :svHeight="aaa"></carModel>
		
		<!-- 选择车型 -->
		<view class="ckcarBox" v-if="ckCarShow" >
			<view class="ckcar" @click.stop="">
				<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" @click="gobyItem(item)">
					<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:[],
				historyList:[],
				iStatusBarHeight:'',
				openId:'',
				aaa:'',
			}
		},
		onLoad() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
           var that=this;
		   this.uniLogin()
           setTimeout(function(){
           		that.$refs.carModelView.getdata();
           },500)
		   var bb= this.iStatusBarHeight + 44 + 'px';
		  
		   var cc= '520rpx'
		   this.aaa= `calc(100vh - ${bb} - ${cc})`
		},
		onShow() {
				
			if(this.openId){
				this.queryHistory()
			}
		},
		methods: {
			
			 uniLogin(){
				 var that=this;
				 uni.login({
				   provider: 'weixin',
				   success: function (loginRes) {
				     console.log(loginRes);
				 		that.getWxOpenID(loginRes)
				   }
				 });
			 },
			 getWxOpenID(e){
			 	var that=this;
				this.$http2('sys/getWxOpenID', {
				  code:e.code,
				 
				 },'GET').then(res => {
					 this.openId=res.data.openId;
					 uni.setStorage({
					 	key: 'wxdata',
					 	data: res.data,
					 	 success: function () {
					 	    that.queryHistory()
					 	 
					 	 }
					 }); 
				 })
			 },
			 queryHistory(){
				 this.$http2('queryHistory', {
				   
				  
				  },'POST').then(res => {
				 				
				 	this.historyList=res.data
					var bb= this.iStatusBarHeight + 44 + 'px';
					var cc='520rpx'
					if(this.historyList.length==0){
						cc= '240rpx'	   
					}else
					if(this.historyList.length==1){
						cc= '352rpx'	   
					}else
					if(this.historyList.length==2){
						cc= '418rpx'	   
					}
				
					this.aaa= `calc(100vh - ${bb} - ${cc})`
				 })
			 },
			 gocarDetail(e){
				 uni.navigateTo({
				 	url:'/pages/index/byItem?nLevelID='+e.nLevelID+'&logo='+e.logo+'&value='+e.title+'&id='+e.groupID+'&isVin='+e.ifVin+'&vin='+e.vin
				 })
			 },
			 gobyItem(e){
				 var nLevelID=e.nLevelIDs.split(',')[0]
				 uni.navigateTo({
				 	url:'/pages/index/byItem?nLevelID='+nLevelID+'&logo='+e.carModelInfo.logo+'&value='+e.title+'&id='+e.ids+'&isVin=1&vin='+this.vinNum
				 })
			 },
             gohistory(){
				 uni.navigateTo({
				 	url:'/pages/index/history'
				 })
			 },
			 goSearch(){
				 uni.navigateTo({
				 	url:'/pages/index/search'
				 })
			 },
			 stBtn(){
				 var that = this;
				
				 uni.chooseImage({
				 	sourceType: ['album','camera'],
				 	count:1, 
				 	success: (chooseImageRes) => {
				 		console.log(chooseImageRes)
				 		const tempFilePaths = chooseImageRes.tempFilePaths;
				 		this.fileURl=tempFilePaths[0]
				 		 uni.showLoading({ title: '加载中'});
				 		 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;
						if(this.moreVinList.length>1){
								this.ckCarShow=true;
						}else{
							this.gobyItem(this.moreVinList[0])
						}
					
						
					}
				 	 else {
				 	
						 uni.showToast({
							 title: res.msg,
							 duration: 3000,
							 icon:'none',
						 });
				 	}
				 	
				 })
			 },
			 ckcarClose(){
				 this.ckCarShow=false;
			 }
		},
		onShareAppMessage(){
				   
		}
	}
</script>

<style scoped>
.aaaaa{
	width: 500rpx;
	background-color: #1A1A1A;
}
.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: 385rpx;
	background: url('http://dmsphoto.66km.com.cn/thFiles/DE1573A0-1C08-4243-8313-C0BA094406D0.png') no-repeat;
	background-size: 100% 100%;
}
.topNavBox{
	background: #D53533;
	width: 750rpx;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 111;
	background: url('http://dmsphoto.66km.com.cn/thFiles/DE1573A0-1C08-4243-8313-C0BA094406D0.png') no-repeat;
	background-size: 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: 20rpx 24rpx;
	justify-content: space-between;
}
.ssinput{
	font-size: 28rpx;font-weight: 400;padding-left: 24rpx;line-height: 80rpx;height: 80rpx;
	width: 500rpx;
}
.ip{
	color: #999999;
}
.shitu{
	font-weight: 400;
	color: #FFFFFF;font-size: 22rpx;
}
.st{
	text-align: center;
}
.historybox{
	padding: 0 24rpx;    margin-top: -88rpx;
}
.history{
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 20rpx;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: 54rpx;
	height: 54rpx;
}
.historylinecar{
	font-weight: 400;font-size: 26rpx;
	color: #1A1A1A;
	line-height: 46rpx;width: 576rpx;
}
.historyLine{
	display: flex;justify-content: space-between;
	padding: 15rpx 0;border-top: 1rpx solid #EEEEEE;
}
.indexnav{
		height: 44px;
		line-height: 44px;
		text-align: center;
		font-size: 36rpx;
		color: #FFFFFF;
	}
	.historyLogoBox{
		display: flex;align-items: center;
	}
</style>