zhongshuo/pages/index/list.vue

<template>
	<view class="listcontent">
		<view style="height: 20rpx;"></view>
		<view class="carContTop">
			<img :src="cardata.logo" alt="" class="carimg">
			<view class="carContTopRight">
				<view class="cardataName">{{cardata.value}}</view>
				<view class="vin" v-if="urlData.vin">
					<view class="vinIcon">VIN</view>
					<view class="vinNUm">{{urlData.vin}}</view>
				</view>
			</view>
			
		</view>
		<view class="listtab">
			<view class="listTabline tabactive">
				保养件
			</view>
		</view>
		<view class="listBox">
			<view class="listLine" v-for="(item,index) in byjList" @click="godetail(item)">
				<img :src="item.imgs.split(',')[0]|| require('../../static/img/pic_def_bj.png')" alt="图片加载失败" class="lineIMg">
			    <view class="listlineRight">
			    	<view class="lineName">{{ item.brand }} {{ item.name }}</view>
					<view class="linespecificationModel">{{ item.specificationModel }} | {{ item.factoryNumber }}</view>
					<view class="linemodelRemark">备注：{{ item.modelRemark||'--' }}</view>
			    </view>
			</view>
			<view class="nodata" v-if="!byjList.length&&!loading">
				<img src="../../static/img/pic_empty_def.png" alt="" class="nodataImg">
				<view class="nodataTxt">暂无匹配商品</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex:1,
				urlData:'',
				cardata:'',
				byjList:[],
				loading:true,
			}
		},
		onLoad(opt) {
         //console.log(opt);
		 this.urlData=opt;
		 if(opt.type==2){
			 this.getData2()
		 }else{
			 //console.log(this.$store.state.listId);
			 this.getData()
		 }
		
		},
		methods: {
		  getData2(){
			  uni.showLoading({ title: '加载中'});
			  this.$http('matchingByOpen/queryCarModelGroupInfo', {
			    id:this.urlData.id,
			   },'post').then(res => {
			  //	uni.hideLoading();
				var obj={
					logo:res.data.carModelInfo.logo,
					value:res.data.value
				}
			  	this.cardata=obj;
				this.loading = true
				this.$http('partsByOpen/queryMaintainPartList', {
				  groupId:res.data.id,
				  componentCode: '001001,001002,001003,001004',
				 },'post').then(res2 => {
					this.loading = false
					this.byjList=res2.data
					uni.hideLoading();
				})
			  	//this.carGroupList=res.data.carGroupList
			  })
		  },
          getData(){
			  uni.showLoading({ title: '加载中'});
			  this.$http('matchingByOpen/queryCarModelBynLevelID', {
			    nLevelIDs:this.urlData.nLevelID,
			   },'post').then(res => {
			  	uni.hideLoading();
				this.cardata=res.data
				this.cardata.value=this.urlData.name
			  	//this.carGroupList=res.data.carGroupList
			  })
			   this.loading = true
			  this.$http('partsByOpen/queryMaintainPartList', {
			    groupId:this.urlData.id,
				componentCode: '001001,001002,001003,001004',
			   },'post').then(res => {
				    this.loading = false
			  	this.byjList=res.data
			  	//this.carGroupList=res.data.carGroupList
			  })
		  },
		  godetail(item){
			  uni.navigateTo({
			  	url:'datail?id='+item.id
			  })
		  }
		}
	}
</script>

<style scoped>
	.listcontent{
		min-height: 100vh;
		background: #F4F5F7;
	}
	.carContTop{
		width: 690rpx;
		padding: 30rpx 24rpx;
		background: #FFFFFF;
		display: flex;
		
	}
	.carimg{
		width: 72rpx;
		height: 72rpx;
	}
	.cardataName{
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		line-height: 36rpx;
		width: 600rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;				
		text-overflow: ellipsis;		
		display: -webkit-box;		
		-webkit-line-clamp: 2;		
		line-clamp: 2;					
		-webkit-box-orient: vertical;	
		height: 72rpx;
		padding-left: 24rpx;
		display: flex;
		 justify-content: center;
		        flex-direction: column;
	}
	.listtab{
		background: #FFFFFF;
		display: flex;
		margin-top: 20rpx;
		border-bottom: 1px solid #F4F5F7;
		padding-left: 30rpx;
	}
	.listTabline {
		color: #333333;
		font-size: 28rpx;
		line-height: 84rpx;
	}
	.tabactive{
		color: #3F90F7;
		border-bottom: 4rpx solid #3F90F7;
	}
	.listBox{
		padding: 0 24rpx;
		background: #FFFFFF;
	}
	.lineIMg{
		width: 110rpx;
		height: 110rpx;
	}
	.listLine{
		padding: 20rpx 0;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
	}
	.listlineRight{
		width: 600rpx;
		padding-left: 20rpx;
	}
	.lineName{
		color: #3C3C3C;font-size: 28rpx;
	}
	.linespecificationModel{
		color: #999999;font-size: 24rpx;padding-top: 5rpx;
	}
	.linemodelRemark{
		color: #999999;font-size: 24rpx;padding-top: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis; 
		white-space: nowrap; 
		width: 550rpx;
	}
	.nodataImg{
		width: 452rpx;
	}
	.nodata{
		text-align: center;
		height: calc(100vh - 310rpx );
	}
	.nodataTxt{
		color: #999999;
		line-height: 40px;
		font-size: 28rpx;
		padding-top: 12rpx;
	}
	.vinIcon{
		background-color: #F19D01;
		width: 50rpx;
		height: 30rpx;
		color: #FFFFFF;
		font-size: 20rpx;
		line-height: 30rpx;
		text-align: center;
		border-radius: 5rpx;
	
	}
	.vin{
		display: flex;
		padding-left: 24rpx;
	}
	.vinNUm{
		line-height: 30rpx;color: #999999;font-size: 24rpx;
		padding-left: 10rpx;
	}
</style>