shell/pages/index/index.vue

<template>
	<view class="content">
		
		<view class="bigBox">
			<!-- <image class="bigImg" src="http://dmsphoto.66km.com.cn/thFiles/A9157023-4939-48B7-BB49-D9D8113EF953.jpg" mode=""></image> -->
			<image class="bigImg" src="/static/img/index.png" mode="widthFix"></image>
		    <view class="ssBox"  v-if="bIndex==2">
				<view class="ssTab">
					<view class="ssTableLine" :class="{sstabActive:ssType==1}" @click="sstabFn(1)">按车型</view>
					<view class="ssTableLine" :class="{sstabActive:ssType==2}" @click="sstabFn(2)">编号</view>
				</view>
		    	<view class="ssView" @click="goSearch">
					<image class="newSImg" src="/static/img/newS.png" mode=""></image>
					<input type="text" class="sInput" placeholder-style="color:#C4C4C4" placeholder="请输入车辆品牌、车系"/>
				</view>
		    </view>
			<view class="ssBox"  v-if="bIndex==3">
				<view class="ssView" >
					<image @click="goSearch" class="newSImg" src="/static/img/newS.png" mode=""></image>
					<input @click="goSearch" type="text" class="sInput" placeholder-style="color:#C4C4C4" placeholder="请输入VIN码"/>
				    <image @click="stBtn" class="newSbImg" src="/static/img/newSb.png" mode=""></image>
				</view>
			</view>
		</view>
		
		
		 <view class="bottomBox">
			 <view class="bottomLine" @click="bFn(1)">
				 <image class="indexbg" v-if="bIndex==1" src="/static/img/indexbg.png" mode=""></image>
				 <span class="bottomLineTxt" :class="{bAciveTxt:bIndex==1}">车型</span> 
			 </view>
			 <view class="bottomLine" @click="bFn(2)">
			 <image class="indexbg" v-if="bIndex==2" src="/static/img/indexbg.png" mode=""></image>
			 <span class="bottomLineTxt" :class="{bAciveTxt:bIndex==2}">搜索</span> 
			 </view>
			 <view class="bottomLine" @click="bFn(3)">
				 <image class="indexbg" v-if="bIndex==3" src="/static/img/indexbg.png" mode=""></image>
				 <span class="bottomLineTxt" :class="{bAciveTxt:bIndex==3}">VIN码</span> 
			 </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,
				vincarActiveNum:1,
				bIndex:2,
				ssType:1,
			}
		},
		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() {
			this.bIndex=2
			if(this.openId){
				this.queryHistory()
			}
		},
		methods: {
			bFn(num){
			  this.bIndex=num	
			  if(num==1){
				  uni.navigateTo({
				  	  url:'carModel2'
				  })
			  }
			},
			vincarActiveFn(num){
				this.vincarActiveNum=num
			},
			goSgoods(){
				uni.navigateTo({
					  url:'sgoodsList'
				})
			},
			sstabFn(num){
			  this.ssType=num	
			},
			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
				 }) */
				 uni.navigateTo({
				 	url:'/pages/index/goodsList?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(){
				 if(this.ssType==1){
					uni.navigateTo({
						url:'/pages/index/search'
					}) 
				 }else{
					 uni.navigateTo({
					 	  url:'sgoodsList'
					 })
				 }
				 
			 },
			 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>
.bottomBox{
	width: 100%;
	height: 87rpx;
	background: #39434F;
	position: fixed;
	left: 0;
	bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	display: flex;
	z-index: 11;
}	
.bottomLine{
	width: 250rpx;
	line-height: 87rpx;
	text-align: center;
	font-weight: 400;
	font-size: 29rpx;
	color: #7A8490;
	position: relative;
}
.bAciveTxt{
	font-weight: 500;
	font-size: 34rpx;
	color: #FFFFFF;
	position: relative;
	z-index: 111;
}
.indexbg{
	width: 250rpx;
	height: 87rpx;
	position: absolute;
	top: 0;
	left: 0;
}
.bigBox{
	width: 100%;
	height: 100vh;
	position: relative;
	/* background: url('http://dmsphoto.66km.com.cn/thFiles/A9157023-4939-48B7-BB49-D9D8113EF953.jpg') no-repeat;
	background-size: 100%; */
}
.bigImg{
	position: absolute;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
.ssBox{
	width: 676rpx;
	background: rgba(0, 0, 0, 0.4);
	position: absolute;
	left: 37rpx;
	top: 200rpx;
	padding: 26rpx 0 26rpx 0;
}
.ssView{
	width: 595rpx;
	height: 78rpx;
	background: #636466;
	display: flex;
	margin-left: 40rpx;
}
.newSImg{
	width: 40rpx;height: 40rpx;
	margin-top: 20rpx;margin-left: 10rpx;
}
.sInput{
 height: 78rpx;line-height: 78rpx;padding-left: 20rpx;font-size: 28rpx;
 width: 400rpx;
}
.newSbImg{
	width: 45rpx;height: 42rpx;
	padding-top: 20rpx;
	padding-right: 20rpx;
	padding-left: 50rpx;
}
/*  */	
.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: 125rpx;height: 44rpx;
}
.productLine{
	text-align: center;
	padding-top: 24rpx;
}
.productTxt{
	text-align: center;
	font-size: 26rpx;
	color: #1A1A1A;
	padding-top: 22rpx;
}
.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;
	
	margin-right: 50rpx;
	
}
.vincarActive{
	color: #FF4F00;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;
	}
.ssTab{
	display: flex;justify-content: center;
	padding-bottom: 20rpx;
}
.ssTableLine{
	width: 114rpx;
	height: 56rpx;
	border: 2rpx solid #254A90;
	font-size: 28rpx;
	color: #EEF0F1;
	line-height: 56rpx;
	text-align: center;
}
.sstabActive{
	background: #254A90;
}
</style>