wxThird/pages/user/addCar/carModel.vue

<template>
	<view class="box">
		
		 <!-- 自定义头部 -->
		<view class="zdyNav">
			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			<view class="zdyNavCont">
				<view class="zdyNavContLeft">
					<image src="../../../static/img/baiheiback.png" mode="" class="baiheibackImg" @click="gofhj"></image>
					<!-- <image src="../../static/img/chahao.png" mode="" class="gaunbiIMg" @click="goback"></image> -->
				</view>
				<view class="zdyNavContTitle">自主选车</view>
				<view class="zdyNavContRight"></view>
			</view>
		</view>
		<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
		<view style="height: 44px;"></view>
		
		<!-- <view class="tab">
			<view class="tabLine" :class="{activeTab:tabIndex==1}" @click="tabIndex=1">手动选车</view>
			<view class="tabLine" :class="{activeTab:tabIndex==2}" @click="tabIndex=2">VIN识别</view>
		</view> -->
		
		<view class="tab1 " v-if="tabIndex==1">
			 <scroll-view  class="scroll-view" :scroll-into-view="toView" scroll-y="true" >
				<view class="brand-select">
					<template v-for="item in carModelList">
					  <view :id="item['首字母']" v-if="item['首字母']!='热门'">
						<view class="brand-select-title" :id="item['首字母']+'-model'">
						  <h5 :class="{'brand-select-titleselect':item['首字母']==toView}">{{item['首字母']}}</h5>
						</view>
					   
							<view class="brand-select-wrapper">
								<a class="brand-select-item" v-for="item2 in item['品牌列表']" @click="selectBrand(item2)" :id="item2.brand">
								  <img :src="item2.logo" class="brand-select-item-icon">
								  <span>{{item2.brand||item2.name}}</span>
								</a>
							</view>
					   
					  </view>
					  <view :id="'rm'" v-if="item['首字母']=='热门'">
						<view class="brand-select-title" :id="item['首字母']+'-model'">
						  <h5 :class="{'brand-select-titleselect':item['首字母']==toView}">{{item['首字母']}}</h5>
						</view>
   
							<view class="brand-select-wrapper">
								<a class="brand-select-item" v-for="item2 in item['品牌列表']" @click="selectBrand(item2)" :id="item2.brand">
								  <img :src="item2.logo" class="brand-select-item-icon">
								  <span>{{item2.brand||item2.name}}</span>
								</a>
							</view>
					   
					  </view>
					</template>
				 </view>
	        </scroll-view >
			<div class="fast-navigation">
			  <a class="fast-navigation-sel" :class="{'select':item['首字母']==toView}" v-for="item in carModelList" @tap="bindToView(item)">{{item['首字母']}}</a>
			</div>
			
		</view>
		<uni-popup ref="popup" type="right" :mask-click="true">
			<view class="popup-content" >
				<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
				<view style="height: 44px;"></view>
				<h3 class="carModel-nav-title cell-logo">
				  <img :src="selectedCarBrand.logo" class="carModel-nav-title-img">
				  <span class="carModel-nav-title-msg">{{ selectedCarBrand.brand }}</span>
				</h3>
				<scroll-view class="brandList" scroll-y="true">
					<view v-for="item in carSeriesList" :key="item.manufactor" >
					  <h3 class="cell-item-title">{{ item.manufactor }}</h3>
					  <span v-for="item2 in item.carSeries" :key="item2" :title="item2" class="span-cell" @click="selectCarFactory(item.manufactor,item2)" >{{item2}}</span>
					</view>
				</scroll-view>
				
			</view>
		</uni-popup>
		
		<!-- 排量 -->
		<view class="displacementListBox" v-show="displacementListShow">
			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			<view style="height: 44px;"></view>
			<h3 class="carModel-nav-title">
			  <img :src="selectedCarBrand.logo" class="carModel-nav-title-img" @click="$emit('changeStep', 1)">
			  <span class="carModel-nav-title-msg">{{ selectedCarBrand.brand }} {{ carSeries }}</span>
			</h3>
			<scroll-view scroll-y="true" class="brandList">
			  <view @click="selectDisplacement(item)" v-for="item in displacementList" class="displacementListLine" >
			    {{item}}
			  </view>
			</scroll-view>
		</view>
		
		<!-- 离合器 -->
		<view class="carGroupListBox" v-show="carGroupListShow">
			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			<view style="height: 44px;"></view>
			<h3 class="carModel-nav-title">
			  <img :src="selectedCarBrand.logo" class="carModel-nav-title-img" @click="$emit('changeStep', 1)">
			  <span class="carModel-nav-title-msg">{{ selectedCarBrand.brand }} {{ carSeries }}{{displacement}}</span>
			</h3>
			<scroll-view scroll-y="true" class="brandList">
			  <view @click="goAddCar(item)" v-for="item in carGroupList" class="displacementListLine" >
			    {{item.title}}
			  </view>
			</scroll-view>
		</view>
		<!-- 离合器 -->
		
		
		<view class="tab2" v-if="tabIndex==2">
			<view class="vinboxone" v-if="vinboxoneShow">
				<view class="smvin">请扫描VIN</view>
				<view class="smvin2">扫描时请保持环境光线充足不要反光</view>
				<view class="sltp">
					<!-- <image src="../../static/img/vin.png" mode="" class="sltpImg" ></image> --><!-- v-if="!vinImg" -->
					<!-- <image :src="vinImg" mode="widthFix" class="vinImg" v-if="vinImg"></image> -->
				</view>
				<view class="vinSc" @click="scVinIMg">上传图片</view>
			</view>
			<view class="vinboxTwo" v-if="vinboxtwoShow">
				 <view class="vinboxTwoTopFh" @click="vinboxtwoShow=false"> 返回扫描 </view>
				<view class="vinboxTwoTopVIn">车辆识别代码：{{vin}}</view>
				<view class="vinCxNum"> 共{{vinSbList.length}}条查询结果</view>
				<view class="vinXzBox">
					<!-- <view class="vinXzLine">
					 <view class="vinXzLineCx">品牌+车系+排量+变速器描述</view>
					 <image src="../../static/img/icon_checked.png" mode="" class="loginLogo"></image>
					</view> -->
					<view class="vinXzLine" v-for="(vinItem,vIndex) in vinSbList" @click="ckVin(vinItem,vIndex)">
					 <view class="vinXzLineCx">{{vinItem.title}}</view>
					 <view class="vinXzLineyk" v-if="vinIndex!=vIndex"></view>
					<!-- <image src="../../static/img/icon_checked.png" mode="" v-if="vinIndex==vIndex" class="loginLogo"></image> -->
					</view>
					<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
				</view>
			</view>
			<view class="vinboxTwoBottom" v-if="vinboxtwoShow" :style="{bottom:iStatusBarHeight+'px'}">
				<view class="shoudonng" @click="shoudong">都不是，手动选车</view>
				<view class="qrcx" @click="qrcx">确认车型</view>
			</view>
			
		</view>
		
		
	</view>
</template>

	
<script>

export default {
	 components: {  
	       
	 },
	data() {
		return {
			carList:'',
			tabIndex:1,
			carModelList:'',
			toView:'',
			type:'right',
			brand:'',
			carSeriesList:'',
			selectedCarBrand:'',
			manufactor:'',
			carSeries:'',
			displacementList:'',
			displacementListShow:false,
			selectedCarSeries:'',
			displacement:'',
			carGroupList:'',
			carGroupListShow:false,
			type:'',
			delId:'',
			vinImg:'',
			file:'',
			vin:'',
			vinboxoneShow:true,
			vinboxtwoShow:false,
			addNum:'',
			iStatusBarHeight:'',
			popupShow:false,
			vinSbList:[],
			vinIndex:0,
			vincarModelInfo:'',
		}
	},
	onLoad(opt) {
	  this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	  if(opt.type==2){
		  this.type=2
	  }
	  if(opt.add){
		  this.addNum=opt.add
	  }
	  this.delId=opt.delId;
      this.queryCarModelGroupPackage();
	},
	methods: {
		ckVin(vinItem,vIndex){
			this.vinIndex=vIndex;
			this.vincarModelInfo=vinItem
		},
		qrcx(){
			this.goAddCar(this.vincarModelInfo)
		},
		shoudong(){
			this.vinboxtwoShow=false;
			this.tabIndex=1;
		},
		goback(){
			uni.navigateBack({
				delta:1
			})
		},
		gofhj(){
			if(this.carGroupListShow){
				this.carGroupListShow=false
			}else if(this.displacementListShow){
				this.displacementListShow=false
			}else if(this.popupShow){
				this.popupShow=false
				this.$refs.popup.close()
			}else{
				uni.navigateBack({
					delta:1
				})
			}
		},
		scVinIMg(){
			var that = this;
			uni.chooseImage({
				sourceType: ['album','camera'],
				count:1, 
				success: (chooseImageRes) => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					that.file=tempFilePaths[0]
					 uni.uploadFile({
				            url: that.$request.baseUrl+'accompany/SuperCheckSheet/uploadFile', //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
				                console.log(JSON.parse(uploadFileRes.data).data );
								//that.imgArr=that.imgArr.concat(JSON.parse(uploadFileRes.data).data) ;
								that.vinImg=JSON.parse(uploadFileRes.data).data[0];
								that.vinScanner()
				            }
				        });
			
					/* that.$http('accompany/SuperCheckSheet/uploadFile', tempFilePaths[0], 'POST').then(res => {
						
					}) */
				}
			});
		},
		vinScanner(){
			uni.showLoading({
				title:'正在识别中'
			});
			/* 
			this.$http('miniAppMyBMemberCar/vinScanner', {
			  photo:this.file,
			
			 },'POST').then(res => {
				uni.hideLoading();
				//this.carGroupList=res.data.carGroupList
			}) */
			var that=this;
			uni.uploadFile({
			       url: that.$request.baseUrl+'miniAppMyBMemberCar/vinScanner', 
			       filePath: that.file,
			       name: 'photo',
			       formData: {
			           'user': 'test'
			       },
			       success: (uploadFileRes) => {
					   uni.hideLoading();
			           console.log(JSON.parse(uploadFileRes.data) );
					   if(JSON.parse(uploadFileRes.data).code==0){
						   	that.vin = JSON.parse(uploadFileRes.data).data;
							that.queryCarModelGroupByVin()
					   }else{
						   uni.showToast({
						   	title: JSON.parse(uploadFileRes.data).msg,
						   	icon: 'none',
						   	duration: 2000,
						   });
					   }
					   	
			       }
			   });
		},
		queryCarModelGroupByVin(){
			uni.showLoading({ });
			this.$http('miniAppMyBMemberCar/queryCarModelGroupByVin', {
			  vin:this.vin,
			
			 },'GET').then(res => {
				uni.hideLoading();
				if(res.code!=0){
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000,
					});
				}else{
					this.vinboxtwoShow=true
					this.vinSbList=res.data;
					this.vincarModelInfo=this.vinSbList[0]
				}
				
			})
			
		},
		goAddCar(item){
			console.log(item)
			var carModelInfo=item;
			var that=this;
			uni.setStorage({
				key: 'carModelInfo',
				data: carModelInfo,
				success: function () {
					
					
						uni.navigateBack({
							delta:1
						})
					
					 
				}
			}); 
		},
		selectBrand(item){
			console.log(item)
			this.selectedCarBrand=item;
			this.$refs.popup.open("right")
			this.popupShow=true;
			this.brand=item.brand
			this.getbrand()
		},
		selectCarFactory(manufactor,item){
			this.manufactor=manufactor;
			this.carSeries=item;
			//this.selectedCarSeries=item
			this.displacementListShow=true;
			this.getdisplacementList()
		},
		selectDisplacement(item){
			this.displacement=item;
			this.carGroupListShow=true;
			this.getmodelList();
		},
		getmodelList(){
			uni.showLoading({
				title: '加载中'
			})
			this.$http('opencarInfoOwner/queryCarModelGroupPackage', {
			  brand:this.brand,
			  manufactor:this.manufactor,
			  carSeries:this.carSeries,
			  displacement:this.displacement
			 },'POST').then(res => {
				uni.hideLoading();
				this.carGroupList=res.data.carGroupList
			})
		},
		getdisplacementList(){
			uni.showLoading({
				title: '加载中'
			})
			this.$http('opencarInfoOwner/queryCarModelGroupPackage', {
			  brand:this.brand,
			  manufactor:this.manufactor,
			  carSeries:this.carSeries
			 },'POST').then(res => {
				uni.hideLoading();
				this.displacementList=res.data.displacementList
			})
		},
		queryCarModelGroupPackage(){
			uni.showLoading({
				title: '加载中'
			})
			this.$http('opencarInfoOwner/queryCarModelGroupPackage', {
			  
			 },'POST').then(res => {
				uni.hideLoading();
				this.carModelList=res.data.brands
			})
		},
		bindToView(item){
			console.log(item)
			if(item['首字母']=='热门'){
					this.toView ='rm'
			}else{
					this.toView = item['首字母']
			}
		
			console.log(this.toView)
			//this.scrollTop = 0
		
		},
       /* login(){
			uni.navigateTo({
				url:'../login/login'
			})
		} */
		close(){
			this.$refs.popup.close()
		},
		getbrand(){
			uni.showLoading({
				title: '加载中'
			})
			this.$http('opencarInfoOwner/queryCarModelGroupPackage', {
			  brand:this.brand
			 },'POST').then(res => {
				uni.hideLoading();
				this.carSeriesList=res.data.carSeriesList
			})
		}
	}
}
</script>

<style scoped lang="scss">
	.box{
		min-height: 100vh;
		background:#F4F5F7 ;
	}
	.vinboxTwoTopFh{
		font-size: 26rpx;
	    padding: 30rpx 24rpx;
		color: #3F90F7;
	}
	.vinboxTwoBottom{
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px -2px 20px 0px rgba(153, 153, 153, 0.2);
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
	}
	.shoudonng{
		width: 336rpx;
		height: 74rpx;
		border-radius: 37rpx;
		border: 1px solid #FF4F00;
		line-height: 74rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FF4F00;
		margin-top: 23rpx;
	}
	.qrcx{
		width: 336rpx;
		height: 74rpx;
		background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
		border-radius: 37rpx;
		line-height: 74rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
			margin-top: 23rpx;
	}
	.vinXzBox{
		padding-bottom: 120rpx;
	}
	.loginLogo{
		width: 28rpx;
		height: 28rpx;
	}
	.vinXzLineyk{
		width: 24rpx;
		height: 24rpx;
		border: 2rpx solid #999999;
		border-radius: 50%;
	}
	.vinXzLine{
		padding: 30rpx 24rpx;
		display: flex;
		justify-content: space-between;
		color: #3C3C3C;
		font-size: 28rpx;
		line-height: 28rpx;
		border-bottom: 1px solid #DDDDDD;
	}
	.vinboxTwoTopVIn{
		font-size: 28rpx;
		color: #666666;
		padding-left: 24rpx;
		padding-bottom: 30rpx;
	}
	.zdyNav{
		width: 100vw;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1111111;
	}
	.zdyNavCont{
		height: 44px;
		font-size: 28rpx;
		// font-weight: bold;
		display: flex;
		justify-content: space-between;
		line-height: 44px;
	}
	.vinCxNum{
		background: #F4F5F7;
		font-size: 26rpx;
		padding: 18rpx 24rpx;
		color: #999999;
	}
	.baiheibackImg{
		width: 70px;
		height: 44px;
	}
	.gaunbiIMg{
		width: 20px;
		height: 20px;
		padding: 12px;
	}
	.zdyNavContLeft{
		
	}
	.zdyNavContTitle{
		color: #000000;
		font-size: 30rpx;
		font-weight: bold;
	}
	.zdyNavContRight{
		width: 100px;
	}
	.smvin{
		color: #3C3C3C;
		font-size: 30rpx;
	}
	.smvin2{
		color: #999999;
		font-size: 26rpx;
	}
	.tab2{
		padding: 30rpx 24rpx;
		min-height: calc(100vh - 150rpx - 44px);
		background: #FFFFFF;
		position: relative;
	}
	.vinboxTwo{
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		min-height: calc(100vh - 150rpx - 44px);
		background: #FFFFFF;
	}
	.sltpImg{
		width: 704rpx;
		height: 353rpx;
	}
	.vinImg{
		width: 704rpx;
	}
	.sltp{
		padding-top: 20rpx;
	}
	.vinSc{
		width: 690rpx;
		height: 74rpx;
		background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
		border-radius: 37rpx;
		text-align: center;
		line-height: 74rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		margin-top: 70rpx;
	}
	.nodataImg{
	  width: 400rpx;
	  padding-top: 100rpx;
	}
	.noTxt{
		font-size: 36rpx;
		color: #999999;
		padding-top: 50rpx;
	}
	.nodataBox{
		text-align: center;
	}
	.addBtn{
		width: 690rpx;
		height: 74rpx;
		background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
		border-radius: 37rpx;
		line-height: 74rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 30rpx;
		position: fixed;
		bottom: 23rpx;
		left: 30rpx;
	}
	.carlistBox{
		padding-bottom: 120rpx;
	}
	.tab{
		background: #FFFFFF;
		display: flex;
		justify-content: space-around;
		line-height: 93rpx;
		color: #3C3C3C;
		font-size: 30rpx;
		border-bottom: 1px solid #F4F5F7;
	}
	.activeTab{
		color: #FF4F00;text-decoration: underline
	}
	/* .brand-select-title{
		height: 80px;
		background:rgba(247,247,247,1);
		position: relative;
	} */
	.brand-select{
	  .brand-select-title{
	    height: 80rpx;
	    background:rgba(247,247,247,1);
	    position: relative;
	    h5{
	      position: absolute;
	      height:40rpx;
	      font-size:28rpx;
	      font-weight:500;
	      color:rgba(102,102,102,1);
	      line-height:40rpx;
	      top: 20rpx;
	      left: 30rpx;
	    }
	  }
	  .brand-select-wrapper{
	    display: flex;
	    flex-wrap: wrap;
	    background:rgba(255,255,255,1);
		width: 100vw;
	    .brand-select-item{
	      display: block;
	      width: 80rpx;
	      height: 100rpx;
	      padding: 30rpx;
	      img{
	        display: inline-block;
	        margin-left: 10rpx;
	        width: 60rpx;
	        height: 60rpx;
	      }
	      span{
	        display: inline-block;
	        text-align: center;
	        height:33rpx;
	        width: 90rpx;
	        font-size:24rpx;
	        font-weight:400;
	        color:rgba(51,51,51,1);
	        line-height:33rpx;
	      }
	    }
	
	  }
	}
	.fast-navigation{
	  position: fixed;
	  text-align: center;
	  right: 16rpx;
	  top: 360rpx;
	  width: 23rpx;
	  font-size:24rpx;
	  font-weight:500;
	  line-height:35rpx;
	  color: rgb(153, 153, 153);
	  a{
	    display: block;
	  }
	  .select{
	    color: #FF4F00;
	  }
	}
	.scroll-view{
		height: calc(100vh - 93rpx);
	}
	.popup-height {
	
		width: 200px;
	}
	.popup-content{
		width: 590rpx;
		background: #FFFFFF;
		height: 100vh;
	}
	.carModel-nav-title{
	  height:100rpx;
	  background: linear-gradient(134deg, #FF8635 0%, #FF4828 100%);
	  line-height: 100rpx;
	  display: flex;
	  z-index: 500;
	  &.cell-logo{
	    position: sticky;
	    top: 0;
	   background: linear-gradient(134deg, #FF8635 0%, #FF4828 100%);
	  }
	  .carModel-nav-title-box{
	    width: 100%;
	    display: flex;
	  }
	  .carModel-nav-title-img{
	    margin: 20rpx;
	    width: 60rpx;
	    height: 60rpx;
	  }
	  .carModel-nav-title-msg{
	    font-size:30rpx;
	    font-weight:400;
	    color:rgba(255,255,255,1);
	    display: block;
	    padding-right: 20rpx;
	  }
	}
	.cell-item-title{
	  height:60rpx;
	  background:rgba(250,250,250,1);
	  font-size:28rpx;
	  font-weight:400;
	  color:rgba(102,102,102,1);
	  line-height:60rpx;
	  padding-left: 26rpx;
	}
	.span-cell{
	  position: relative;
	  display: -webkit-box;
	  display: -webkit-flex;
	  display: flex;
	  box-sizing: border-box;
	  width: 100%;
	  padding: 6rpx 30rpx;
	  overflow: hidden;
	  color: #323233;
	  font-size: 3.73333vw;
	  line-height: 82rpx;
	  height: 82rpx;
	  background-color: #fff;
	  border-bottom: 1px solid #ebedf0;
	
	}
	.carModel-nav-title{
	  height:100rpx;
	 background: linear-gradient(134deg, #FF8635 0%, #FF4828 100%);
	 line-height: 100rpx;
	  display: flex;
	  z-index: 500;
	  &.cell-logo{
	    position: sticky;
	    top: 0;
	    background: linear-gradient(134deg, #FF8635 0%, #FF4828 100%);
	  }
	  .carModel-nav-title-box{
	    width: 100%;
	    display: flex;
	  }
	  .carModel-nav-title-img{
	    margin: 20rpx;
	    width: 60rpx;
	    height: 60rpx;
	  }
	  .carModel-nav-title-msg{
	    font-size:30rpx;
	    font-weight:400;
	    color:rgba(255,255,255,1);
	    display: block;
	    padding-right: 20px;
	  }
	}
	.displacementListLine{
		min-height: 50rpx;
		padding: 20rpx 20rpx 20rpx 30rpx;
		font-size:28rpx;
		font-weight:600;
		color:rgba(51,51,51,1);
		line-height:50rpx;
		border-top: 2rpx solid rgb(238, 238, 238);
		background-color: rgb(255, 255, 255);
	}
	.displacementListBox{
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background:#F4F5F7 ;
		z-index: 11111;
		/*  #ifdef H5 */
		top:44px;
		/*  #endif  */
	}
	.carGroupListBox{
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background:#F4F5F7 ;
		z-index: 11111;
		/*  #ifdef H5 */
		top:44px;
		/*  #endif  */
	}
	.brandList{
		height: calc(100vh - 250rpx);
	}
	.brand-select-titleselect{
		    color: #FF4F00 !important;
	}
</style>