shell/pages/index/carGroup.vue

<template>
	<view class="content">
		<homenav :iStatusBarHeight="iStatusBarHeight" :title="'车型选择'"></homenav>
		<view class="top">
			<image :src="optdata.logo" mode="" class="logoImg"></image>
			<view class="topname">
				{{optdata.brand}}-{{optdata.manufactor}}-{{optdata.carSeries}}-{{optdata.displacement}}
			</view>
		</view>
		<view class="ts">
			<image src="../../static/img/icon_xuanze.png" mode="" class="tsImg"></image>
			<view class="tsTxt">请选择车型</view>
		</view>
		<view class="linebox">
			<view class="line" v-for="(item,index) in carGroupList" @click="goItem(item)">
				{{item.title}}
			</view>
		</view> 
		<uni-popup ref="popup" type="bottom" background-color="#fff">
				  <view class="popupTitle">请选择发动机</view>
				  <view style="popupLineBox">
					   <view @click="ckengin(item)" class="popupLine" v-for="(item,index) in engineList">{{item.engineModel}}</view>
					 
				  </view>
		
		</uni-popup>
	</view>
</template>

<script>
	import homenav from "../../components/homenav/nav.vue"
	export default {
		components: {
			homenav
		},
		data() {
			return {
				brand:'',
				manufactor:'',
				carSeries:'',
				logo:'',
				optdata:'',
				carGroupList:[],
				iStatusBarHeight:'',
				type:'',
				engineList:'',
			}
		},
		onLoad(opt) {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
            this.optdata=opt;
			this.type=opt.type
		    this.getmodelList();
		},
		methods: {
		   goItem(e){
			  if(this.type==1){
				  this.optdata.value=e.value
			  		this.queryEnginemodel(e)	
			  }else if(this.type==2){
				  uni.navigateTo({
				  	url:'/pages/index/gearboxOil?nLevelID='+this.optdata.nLevelID+'&logo='+this.optdata.logo+'&value='+e.value+'&id='+e.id+'&isVin='+this.optdata.isVin+'&vin='+this.optdata.vin
				  })
			  }else{
				 uni.navigateTo({
				 	url:'/pages/index/byItem?nLevelID='+e.carModelInfo.nLevelID+'&logo='+this.optdata.logo+'&manufactor='+this.optdata.manufactor+'&carSeries='+this.optdata.carSeries+'&brand='+this.optdata.brand+'&value='+e.value+'&id='+e.id
				 })  
			  }
			  
		   },
		   queryEnginemodel(e){
				   this.$http('matchingByOpen/queryEnginemodel', {
					 ids:this.optdata.id,
					
					},'POST').then(res => {
						this.engineList=res.data
						 if(this.engineList.length>1){
						 	his.$refs.popup.open()
						 }else{
						   uni.navigateTo({
							url:'/pages/index/engineOil?nLevelID='+this.optdata.nLevelID+'&logo='+this.optdata.logo+'&value='+this.optdata.value+'&id='+e.id+'&isVin='+this.optdata.isVin+'&vin='+this.optdata.vin
						   })
						 }
				   })
		   },
		   ckengin(item){
		   			   console.log(item)
		   			   uni.navigateTo({
		   			   	url:'/pages/index/engineOil?nLevelID='+this.optdata.nLevelID+'&logo='+this.optdata.logo+'&value='+this.optdata.value+'&id='+item.ids+'&isVin='+this.optdata.isVin+'&vin='+this.optdata.vin
		   			   })
		   },
           getmodelList(){
           	uni.showLoading({ title: '加载中'});
           	this.$http('matchingByOpen/queryCarModelGroupPackage', {
           	  brand:this.optdata.brand,
           	  manufactor:this.optdata.manufactor,
           	  carSeries:this.optdata.carSeries,
           	  displacement:this.optdata.displacement
           	 },'post').then(res => {
           		uni.hideLoading();
           		this.carGroupList=res.data.carGroupList
           	})
           },
		}
	}
</script>

<style scoped>
.content{
	background: #F4F5F7;min-height: 100vh;
}
.top{
	display: flex;background: #ffffff;
	padding: 34rpx 24rpx;
}
.logoImg{
	width: 46rpx;
	height: 46rpx;
}
.topname{
	font-weight: 500;font-size: 28rpx;line-height: 46rpx;
	color: #1A1A1A;padding-left: 20rpx;
}
.tsImg{
	width: 27rpx;height: 28rpx;
}
.tsTxt{
	font-weight: 500;padding-left: 16rpx;
	color: #FFBF35;
	font-size: 28rpx;line-height: 28rpx;
}
.ts{
	padding: 36rpx 24rpx;display: flex;
}
.linebox{
	background: #ffffff;
	padding: 0 24rpx;
}
.line{
	border-bottom: 1rpx solid #EEEEEE;
	font-weight: 400;
	color: #333333;font-size: 26rpx;
	padding: 30rpx 0;
}
.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}
	.popupLine {
		line-height: 100rpx;
		text-align: center;
		font-size: 28rpx;
	    display: block;
	}
	.popupLineBox{
		 padding-bottom: env(safe-area-inset-bottom);
	}
	.popupTitle{
		line-height: 100rpx;
		text-align: center;
		font-size: 30rpx;
		color: #999999;
	}
</style>