shell/pages/index/suit.vue

<template>
	<view class="mainCon">
	  <homenav :iStatusBarHeight="iStatusBarHeight" :title="'适配车型'"></homenav>
	  <view class="innerCon" v-if="loading">
	    <view class="detail-container">
	      <h2 class="title-2">{{ detail.brand }} {{ detail.categoryName }} {{ detail.name }}</h2>
	      <p class="info-2">{{ detail.partsCode }} | {{ detail.specificationModel }}</p>
	    </view>
	   	<view style="height: 20rpx;background: #F4F5F7;"></view>
	    <view class="detail-container mt10 spLogoLinebox">
	       <view class="spLogoLine">
	         <img src="../../static/img/home_icon_1.png" alt="" class="spLogoLineImg">
	         <view class="spLogoTitle">适用车型</view>
	       </view>
	    </view>
	    <view class="spcarlinebox" v-for="(item,index) in list">
	      <view class="spcarlineTop" @click="Ick(item)">
	        <view class="spcarlineCarBrad">{{item.brand}}</view>
	        <img v-if="item.ck" src="../../static/img/icon_arrow_up.png" alt="" class="spcarlineTopImg">
	        <img v-if="!item.ck" src="../../static/img/icon_arrow_down.png" alt="" class="spcarlineTopImg">
	      </view>
	      <view v-if="item.ck">
	         <view class="spcarline" v-for="(v,i) in item.list">{{v.title}}</view>
	      </view>
	
	    </view>
	
	  </view>
	</view>
</template>

<script>
	import homenav from "../../components/homenav/nav.vue"
	import nodata from '../../components/nodata/nodata.vue'
	export default {
		components: {
			homenav,nodata
		},
		data() {
			return {
				detail: {},
				current: 0,
				list:'',
				iStatusBarHeight:'',
				loading:false,
			}
		},
		onLoad(opt) {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.id=opt.id;
            this.getDetail()
		},
		methods: {
			Ick(item){
			  item.ck=!item.ck
			},
           getDetail(){
			 uni.showLoading({ title: '加载中'});
			 this.loading=false
			 this.$http('partsByOpen/queryCarModelGroupByPartsID', {
			   partsId:this.id,
			  },'POST').then(res => {
				  this.loading=true;
			 	uni.hideLoading();
				 res.data.forEach(item=>{
				   item.ck=false
				 })
				  this.list = res.data
			 })
			 this.$http('partsByOpen/queryPartDetail', {
			   id:this.id,
			  },'POST').then(res => {
			 					
			 	this.detail=res.data;
			 					
			 })
           },
		}
	}
</script>

<style scoped>
.detail-container{
	padding: 24rpx;
}
.info-2{
  font-size:24rpx;
  font-weight:400;
  color:rgba(153,153,153,1);
}
.title-2{
	font-size:30rpx;
	font-weight:500;
	color:rgba(51,51,51,1);
}
.spLogoLinebox{
   border-bottom: 1px solid #EEEEEE;
}
.spLogoLineImg{
  width: 44rpx;height: 44rpx;
}
.spLogoTitle{
  font-weight: 600;
  color: #333333;
  font-size: 28rpx;
  line-height: 44rpx;
  padding-left: 16rpx;
}
.spcarlineTop{
  display: flex;justify-content: space-between;
  background: #FFFFFF;
  padding: 30rpx 24rpx;font-weight: 500;
color: #333333;font-size: 28rpx;

}
.spcarlineTopImg{
 width: 24rpx;height: 24rpx;
}
.spcarline{
  font-weight: 400;
  color: #666666;
  font-size: 28rpx;
  padding: 16rpx 24rpx;
}
.spLogoLine{
  display: flex;

}
</style>