shell/pages/index/carConfiguration.vue

<template>
	<view class="content">
	 <view class="topNavBox">
	 	<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
	 	<view class="indexnav">
			<view class="zdyNav">
				<view class="zdyNavLeft">
					<image src="../../static/img/navbackbs.png" mode="aspectFit" class="backImg" @click="goback"></image>
					<view class="navsx"></view>
					<image src="../../static/img/navhomebs.png" mode="" class="homeImg" @click="gohome"></image>
				</view>
				<view class="zdyNavTitle">车辆配置</view>
				<view style="width: 250rpx;"></view>
			</view>
		</view>
	 </view>
	 <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
	 <view style="height: 43px;"></view>
	  <view class="top" v-if="loading">
	  	 <view class="carBrand">{{info.brand}}</view>
		 <view class="carName">{{info.manufactor}}-{{info.carSeries}}-{{info.salesName}}</view>
	  </view>
	  <view class="box" v-if="loading">
		  <view class="line">
			  <view class="lineLeft">品牌</view>
			  <view class="lineRight">{{info.brand}}</view>
		  </view>
		  <view class="line">
			  <view class="lineLeft">车型</view>
			  <view class="lineRight">{{info.carModel}}</view>
		  </view>
		  <view class="line">
			  <view class="lineLeft">销售名称</view>
			  <view class="lineRight">{{info.salesName}}</view>
		  </view>
		  <view class="line">
			  <view class="lineLeft">款型年份</view>
			  <view class="lineRight">{{info.listedYear}}</view>
		  </view>
		  <view class="line">
			  <view class="lineLeft">生产年份</view>
			  <view class="lineRight">{{info.productionYear}}</view>
		  </view>
		  <view class="line">
			  <view class="lineLeft">停产年份</view>
			  <view class="lineRight">{{info.discontinuationYear}}</view>
		  </view>
		  <view class="line">
			  <view class="lineLeft">排量</view>
			  <view class="lineRight">{{info.brakeoilqty}}</view>
		  </view>
		  <view class="line">
			  <view class="lineLeft">进气形式</view>
			  <view class="lineRight">{{info.intakeForm}}</view>
		  </view>
		  <view class="line">
			  <view class="lineLeft">燃油类型</view>
			  <view class="lineRight">{{info.fuelLabeling}}</view>
		  </view>
		  <view class="line">
			  <view class="lineLeft">发动机型号</view>
			  <view class="lineRight">{{info.engineDescription}}</view>
		  </view>
	  </view>
	  
	</view>
</template>

<script>
	import homenav from "../../components/homenav/nav.vue"
	export default {
		components: {
			homenav
		},
		data() {
			return {
				nLevelIDs:'',
				info:'',
				loading:false,
				iStatusBarHeight:'',
			}
		},
		onLoad(opt) {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
            this.nLevelIDs=opt.nLevelID;
			this.queryCarModelBynLevelID()
		},
		methods: {
           queryCarModelBynLevelID(){
			   uni.showLoading({ title: '加载中'});
			   this.loading=false;
			   this.$http('matchingByOpen/queryCarModelBynLevelID', {
			     nLevelIDs:this.nLevelIDs,
			   
			     
			    },'POST').then(res => {
			   	  uni.hideLoading();
			   	  this.info=res.data;
				  this.loading=true;
			   })
		   },
		   goback() {
		   	uni.navigateBack({
		   	 	delta: 1
		   	})
		   },
		   gohome(){
		   	
		   		/* uni.switchTab({
		   			url:'../../pages/index/index'
		   		}) */
		   	uni.navigateTo({
		   		url:'/pages/index/index'
		   	})
		   	
		   },
		}
	}
</script>

<style scoped>
.topNavBox{
	background: #D53533;
	width: 750rpx;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 11;
	background: url('http://dmsphoto.66km.com.cn/thFiles/F421B62E-7B51-4AD9-AB01-A28A2FB21FCF.png') no-repeat;
	background-size: 100%;
}
.indexnav{
		height: 44px;
		line-height: 44px;
		text-align: center;
		font-size: 36rpx;
		color: #FFFFFF;
	}
.top{
	background: url('http://dmsphoto.66km.com.cn/thFiles/AFCBDA6F-03C0-46C0-9090-9A34C125D140.png') no-repeat;
	background-size: 100%;
	width: 750rpx;height: 250rpx;
	background-position: right bottom;
}
.carBrand{
	font-weight: 500;font-size: 44rpx;
	color: #FFFFFF;padding-left: 24rpx;
	line-height: 62rpx;padding-top: 30rpx;
}
.carName{
	font-weight: 400;font-size: 28rpx;
	color: #FFFFFF;padding-left: 24rpx;
	line-height: 40rpx;padding-top: 26rpx;
	padding-right: 24rpx;
}
.box{
	width: 750rpx;
	background: #FFFFFF;
	padding-top: 20rpx;
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	margin-top: -40rpx;
}
.line{
	display: flex;font-size: 28rpx;line-height: 40rpx;padding: 20rpx 24rpx;
}
.lineLeft{
	color: #999999;width: 180rpx;
}
.lineRight{
	color: #3C3C3C;
}
.zdyNav{
		height: 44px;
		display: flex;
		justify-content: space-between;
		
		align-items: center;
	}
	
	.backImg{
		width: 44rpx;
		height: 44rpx;
		/* margin-left: 10rpx; */
		/* margin-right: 20rpx; */
	}
	.navsx{
		width: 2rpx;
		height: 44rpx;
		background: #e1e1e1;
		margin: 0 26rpx 0rpx 18rpx;
	}
	.homeImg{
		width: 44rpx;
		height: 44rpx;
		
	}
	.zdyNavLeft{
		display: flex;
		align-items: center;
        border: 1px solid #e1e1e1;
		margin-left: 15rpx;
		border-radius: 35rpx;
		padding: 10rpx 23rpx 8rpx 13rpx;
		
	}
	.zdyNavTitle{
		width: 100vw;
		height: 44px;
		text-align: center;
		font-size: 34rpx;
		line-height: 44px;
	}
</style>