shell/pages/index/index.vue

<template>
	<view class="content">
		<!-- <view class="top">
			
			<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> -->
		<!-- <view @click="wy">asdfasdfasdfas</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 class="viewBox" v-if="tabIndex==1">
			 <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			 <view style="height: 43px;"></view>
			 <view class="topNavBox">
			 	<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			 	<view class="indexnav">精准用油</view>
			 </view>
			 <!-- 轮播-->
			 <view class="swpBox">
			 			 <swiper class="swiperTk" circular  :autoplay="true" :interval="interval"
			 			 				:duration="duration" :indicator-dots="true" indicator-color="#CCCCCC" :indicator-active-color="'#'+themeColor">
			 			 	<swiper-item >
			 			 		<view class="swiper-itemTk" >
			 			 			<image class="tkHdImg" src="http://dmsphoto.66km.com.cn/thFiles/084CAE69-DFFC-48FC-9F82-04E94696AE56.png" mode="widthFix"></image>
			 			 		</view>	
			 			 	</swiper-item>
			 				<swiper-item >
			 					<view class="swiper-itemTk" >
			 						<image class="tkHdImg" src="http://dmsphoto.66km.com.cn/thFiles/37B94D9D-5D8A-4754-9BBF-5715C1B5F665.jpg" mode="widthFix"></image>
			 					</view>	
			 				</swiper-item>
			 			 </swiper>
			 </view>
			 
			 <view class="contBox">
			 			 <view class="vincar">
			 				 <view class="vincarTab">
			 					  <view class="vincarTabLine anVin">按VIN</view>
			 					  <view class="vincarTabLine" @click="goCarModel">按车型</view>
			 				 </view>
			 				 <view class="inputsBox">
			 					 <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="inputsBtn">查询</view>
			 				 </view>
			 				 <view class="historyBox" >
			 					 <view class="historyLeft" >
			 						 <view class="historyLeftTxt">历史查询：</view>
									 <view v-if="historyvinLoding">
										 <view class="historyLeftNum" @click="gocarDetail" v-if="historyvin">{{historyvin}}	</view>
										 <view class="historyLeftNum" v-else>暂无</view>
									 </view>
			 						
			 					 </view>
			 					 <view class="historyMore" @click="gohistory">更多
			 					   <image src="../../static/img/lanjt.png" mode="" class="lanjt"></image>
			 					 </view>
			 				 </view>
			 			 </view>
			 			 
			 			 <view class="productBox">
			 			 		<view class="productTitle">产品列表</view>
			 					<view class="productLinBox">
			 						<view class="productLine" @click="goCarModelType(1)">
			 							<image class="productImg" src="/static/img/jiyou.png" mode=""></image>
			 							<view class="productTxt" >机油</view>
			 						</view>
			 						<view class="productLine" @click="goCarModelType(2)">
			 							<image class="productImg" src="/static/img/bsxy.png" mode=""></image>
			 							<view class="productTxt" >变速箱油</view>
			 						</view>
			 						<view class="productLine" @click="goCarModelType(3)">
			 							<image class="productImg" src="/static/img/bsxglq.png" mode=""></image>
			 							<view class="productTxt" >变速箱滤清器</view>
			 						</view>
			 						<view class="productLine" @click="goCarModelType(4)">
			 							<image class="productImg" src="/static/img/yusha.png" mode=""></image>
			 							<view class="productTxt" >雨刮</view>
			 						</view>
			 					</view>
			 			 </view>
			 			 
			 			 
			 </view>
			 
		 </view>
	    <user v-if="tabIndex==2" :iStatusBarHeight="iStatusBarHeight"></user>
		<view class="bTabBox">
			<view class="btabLine" @click="tabFn(1)">
				<image class="btabLineImg" v-if="tabIndex==1" src="/static/img/index1.png" mode=""></image>
				<image class="btabLineImg" v-if="tabIndex==2" src="/static/img/index2.png" mode=""></image>
				<view class="btabLineTxt">首页</view>
			</view>
			<view class="btabLine">
				<image @click="stBtn" class="btabLineImg2" src="/static/img/vin.png" mode=""></image>
			</view>
			<view class="btabLine" @click="tabFn(2)">
				<image class="btabLineImg"  v-if="tabIndex==2"  src="/static/img/user1.png" mode=""></image>
				<image class="btabLineImg"  v-if="tabIndex==1"  src="/static/img/user2.png" mode=""></image>
				<view class="btabLineTxt">我的</view>
			</view>
		</view>
		 
	</view>
</template>

<script>
	import carModel from './carModel.vue'
	import user from './user.vue'
	export default {
		components: {
			carModel, //注册子组件
			user
		},
		//props:['iStatusBarHeight',],
		data() {
			return {
				fileURl: '',
				ckCarShow:false,
				vinNum:'',
				moreVinList:[],
				historyList:[],
				iStatusBarHeight:'',
				openId:'',
				aaa:'',
				duration:500,
				interval:3000,
				historyvin:'',
				tabIndex:1,
				byItem:'',
				historyvinLoding:false,
			}
		},
		onLoad() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			//console.log(this.iStatusBarHeight) 
           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: {
			tabFn(num){
				this.tabIndex=num
			},
			goCarModel(){
			   uni.navigateTo({
			   	  url:'carModel2'
			   })	
			},
			goCarModelType(type){
				
				uni.navigateTo({
					  url:'carModel2?type='+type
				})
			},
			wy(){
				
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						console.log(JSON.stringify(res.tempFilePaths));
					}
				});
			},
			
			 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.historyvinLoding=false
				 this.$http2('queryHistory', {
				   
				  
				  },'POST').then(res => {
				 			
				 	this.historyList=res.data
					this.historyList.forEach(item=>{
						if(item.vin){
							if(!this.historyvin){
								this.historyvin=item.vin
								this.byItem=item
							}
							
						}
					})
					this.historyvinLoding=true	
					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(){
				  var e=this.byItem
				 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;
				 console.log("识图识图识图识图")
				 uni.authorize({
				     scope: 'scope.camera',
				     success() {
				        console.log("chengg");
						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 == 0){
												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 );
											
							            },fail(err) {
											uni.hideLoading();
								           console.log(err)
										   uni.showToast({
										       title: '拉取失败',
										   	   icon:'none',
										       duration: 3000,
										   });
							            },
										complete(obj){
											uni.hideLoading();
											if(obj.statusCode!=200){
												uni.showToast({
												    title: 'vin扫描失败，请重试',
													icon:'none',
												    duration: 3000,
												}); 
												console.log("vin扫描失败，请重试")
											}
											
											
										}
							        }); 
						
								
							},fail(err){
								console.log("上传失败")
								console.log(err)
							}
						});
				     },fail(err) {
						 uni.showToast({
						     title: '授权失败',
						 	   icon:'none',
						     duration: 3000,
						 });
				     	console.log("授权失败")
						uni.showModal({
							title: '是否重新授权识图功能',
							success(res) {
								if (res.confirm) {
									uni.openSetting({
										success() {
											console.log('开启权限成功');
										},
										fail() {
											console.log('开启权限失败');
										}
									});
								} else if (res.cancel) {
									console.log('拒绝开启开启权限');
								}
							}
						});
						
						
				     }
				 })
				
			 },
			 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>
.contBox{
	padding: 0 24rpx;
}
.productBox{
height: 520rpx;
background: #FFFFFF;
border-radius: 16rpx;
padding: 30rpx;
margin-top: 20rpx;
}
.productTitle{
	font-weight: 500;
	font-size: 28rpx;
	color: #1A1A1A;
	line-height: 40rpx;
}
.productLinBox{
	display: flex;justify-content: space-between;
}
.productImg{
	width: 90rpx;height: 90rpx;
}
.productLine{
	text-align: center;
	padding-top: 24rpx;
}
.productTxt{
	text-align: center;
	font-size: 26rpx;
	color: #1A1A1A;
}
.vincar{
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 24rpx 30rpx;
}
.vincarTab{
	display: flex;
}
.vincarTabLine{
	font-size: 26rpx;
	color: #333333;
	line-height: 37rpx;
}
.anVin{
	font-weight: 500;
	font-size: 28rpx;
	color: #FF4F00;
	margin-right: 50rpx;
	border-bottom: 4rpx solid  #FF4F00;
}
.inputsBox{
	border-radius: 10rpx;
	border: 2rpx solid #FF4F00;
	padding: 8rpx;
	display: flex;justify-content: space-between;
	margin-top: 27rpx;
}
.inputsBtn{
	width: 108rpx;
	height: 58rpx;
	background: #FF4F00;
	border-radius: 6rpx;
	text-align: center;
	line-height: 58rpx;
	font-size: 26rpx;
	color: #FFFFFF;
}
.lanjt{
	width: 8rpx;height: 15rpx;
	margin-top: 20rpx;margin-left: 6rpx;
}
.historyLeft{
	display: flex;
	font-size: 24rpx;
	color: #999999;
}
.historyLeftNum{
	height: 50rpx;
	background: #FAFAFA;
	padding: 0 10rpx;line-height: 50rpx;
}
.historyLeftTxt{
	line-height: 50rpx;
}
.historyMore{
	line-height: 50rpx;color: #3E86F0;font-size: 24rpx;display: flex;
}
.historyBox{
	display: flex;justify-content: space-between;padding-top: 24rpx;
}
.swpBox{
	height: 400rpx;
}
.swiperTk{
	height: 400rpx;
}
.swiper-itemTk{
	padding-top: 20rpx;text-align: center;
	overflow: hidden;height: 360rpx;
}
.tkHdImg{
	width: 702rpx;height: 360rpx;
}
.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: #FFFFFF;
	width: 750rpx;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 111;
    color: #333333;
}
.searchInputBox{
	width: 550rpx;display: flex;
	height: 58rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
}
.simg{
	width: 34rpx;height: 34rpx;margin-top: 13rpx;margin-left:30rpx;
}
.stimg{
	width: 44rpx;height: 44rpx;
}
.searchBox{
	display: flex;padding: 20rpx 24rpx;
	justify-content: space-between;
	padding-right: 0rpx;
}
.st{
	text-align: center;padding-left: 20rpx;padding-right: 24rpx;
}
.ssinput{
	font-size: 28rpx;font-weight: 400;padding-left: 24rpx;line-height: 58rpx;height: 58rpx;
	width: 450rpx;
}
.ip{
	color: #999999;
}
.shitu{
	font-weight: 400;
	color: #FFFFFF;font-size: 22rpx;
}

.historybox{
	padding: 0 18rpx;    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;
	}
	
	.bTabBox{
		width: 100vw;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(153,153,153,0.2);
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom); 
		display: flex;
		justify-content: space-around;
	}
	.btabLineImg{
		width: 42rpx;height: 42rpx;
	}
	.btabLineTxt{
		font-weight: 400;
		font-size: 22rpx;
		color: #1A1A1A;
		
	}
	.btabLine{
		padding-top: 21rpx;
	}
	.btabLineImg2{
		width: 140rpx;height: 140rpx;
		margin-top: -70rpx;
	}
</style>