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 class="topFlex">
				<view class="topFline" @click="stBtn">
					<image src="../../static/img/pai.png" mode="" class="topFlineImg"></image>
					<view class="topFlineTxt">拍照识别</view>
				</view>
				<view class="topFline" @click="ckcAr">
					<image src="../../static/img/car@2x.png" mode="" class="topFlineImg"></image>
					<view class="topFlineTxt">选择车型</view>
				</view>
				<view class="topFline" @click="goSearch">
					<image src="../../static/img/vin@2x.png" mode="" class="topFlineImg"></image>
					<view class="topFlineTxt">输入VIN码</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>
						<view class="historylinecar">{{item.title}}</view>
						<view class="historyLineVin" v-if="item.ifVin">
						<!-- 	<view class="vinms">VIN</view> -->
							<view class="vinNum">{{item.vin}}</view>
						</view>
					</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>
</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: {
			ckcAr(){
				var e={'首字母':'热'}
				this.$refs.carModelView.bindToView(e);
				uni.showToast({
				    title: '请在下面选择车辆',
				    duration: 3000,
					icon:'none',
				});
			},
			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.$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;
				 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>
.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: 496rpx;
	background: url('http://dmsphoto.66km.com.cn/thFiles/5F251610-E452-47FE-8EE5-3C3AC74E081F.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/5F251610-E452-47FE-8EE5-3C3AC74E081F.png') no-repeat;
	background-size: 100%;
}
.searchInputBox{
	width: 702rpx;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;
	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: 80rpx;height: 80rpx;
	width: 500rpx;
}
.ip{
	color: #999999;
}
.shitu{
	font-weight: 400;
	color: #FFFFFF;font-size: 22rpx;
}

.historybox{
	padding: 0 18rpx;   margin-top: -30px;
}
.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: 20rpx;
}
.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: 36rpx;width: 590rpx;
}
.historyLine{
	display: flex;
	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;
		padding-right:24rpx ;
	}
.topFlineImg{
	width: 64rpx;height: 64rpx;
}
.topFlex{
	display: flex;
	justify-content: space-around;
	text-align: center;
	padding: 10rpx 0;
}
.topFlineTxt{
	font-size: 24rpx;
	color: #FFFFFF;
}
.vinms{
	width: 38rpx;
	height: 26rpx;
	background: linear-gradient(224deg, #FFDA28 0%, #FFBF35 100%);
	border-radius: 4rpx;
	text-align: center;
	line-height: 26rpx;
	font-weight: 600;
	color: #FFFFFF;
	font-size: 18rpx;
	margin-top: 2rpx;
}
.historyLineVin{
	display: flex;
}
.vinNum{
	font-weight: 400;font-size: 22rpx;/* padding-left: 10rpx; */
	color: #999999;line-height: 30rpx;
}
</style>