shell/pages/index/displacement.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}}
			</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 displacementList" @click="gocarGroup(item)">
				{{item}}
			</view>
		</view> 
	</view>
</template>

<script>
	import homenav from "../../components/homenav/nav.vue"
	export default {
		components: {
			homenav
		},
		data() {
			return {
				brand:'',
				manufactor:'',
				carSeries:'',
				logo:'',
				optdata:'',
				displacementList:[],
				iStatusBarHeight:'',
				type:'',
			}
		},
		onLoad(opt) {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
          this.optdata=opt;
		  this.type=opt.type
		  this.getdisplacementList()
		},
		methods: {
           getdisplacementList(){
           	uni.showLoading({ title: '加载中'});
           	this.$http('matchingByOpen/queryCarModelGroupPackage', {
           	  brand:this.optdata.brand,
           	  manufactor:this.optdata.manufactor,
           	  carSeries:this.optdata.carSeries
           	 },'POST').then(res => {
           		uni.hideLoading();
           		this.displacementList=res.data.displacementList
           	})
           },
		   gocarGroup(item){
			   uni.navigateTo({
			   	url:'/pages/index/carGroup?logo='+this.optdata.logo+'&manufactor='+this.optdata.manufactor+'&carSeries='+this.optdata.carSeries+'&brand='+this.optdata.brand+'&displacement='+item+"&type="+this.type
			   })
		   }
		}
	}
</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: #254A90;
	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;
}
</style>