epc/pages/mobile/modelTwo.vue

<template>
	<view class="content">
		<view class="top">
			<view class="topCont">
				<view class="carBox">
					<image src="../../static/img/nocar.png" mode="" class="carLogo"></image>
					<view class="carTxt">{{brand_name}}</view>
					<!-- <image src="../../static/img/jt.png" mode="" class="carJt"></image> -->
				</view>
				<view class="vinBox">
					<view class="vinBox2">
						<view class="vinB">VIN</view>
						<view class="vinNum">{{vin}}</view>
					</view>
					<view class="vinBox2">
						<view class="detail" @click="goCarDetail()">车辆详情</view>
						<image src="../../static/img/icon_arrow_blue_r@2x.png" mode="" style="width: 12rpx; height: 20rpx"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="mainBox">
			<view class="maintitle">{{caption}}
			   <view class="backBox">
			   	  <image src="../../static/img/icon_arrow_blue_l@2x.png" mode="" class="backImg"></image>
				  <view class="backTxt">返回总组</view>
			   </view>
			</view>
			<view class="searchBox" v-if="lastShow">
				<view class="inputBox">
					<img src="../../static/img/icon_search.png" alt="" class="searchImg">
					<input type="text" placeholder="快速查找子组" class="topInput" v-model="childrenss" @confirm="childrenkeyup">
				</view>
			</view>
			
			<view class="mainLine" v-for="(item,index) in childrenList" @click="goThree(item)" v-if="lastShow">
				<view class="lineLeft">
					<image class="lineIMg" :src="item.image_url" v-if="item.image_url" mode="aspectFit"></image>
					<image  class="lineIMg" src="../../static/img/noimg.png" v-else mode="aspectFit"></image>
				</view>
				<view class="lineRIght">
					<view class="lineName">{{item.caption}}</view>
					<view class="lineBm">{{item.code}}</view>
					<view class="linejs">{{item.remark}}</view>
				</view>
				
			
			</view>
			<view class="mainBox" v-if="restrainShow1">
				<view class="mainLine2" v-for="(item,index) in restrainList1" @click="restrainClickOne(item)">
					<view class="lineName2">{{item.caption}}</view>
					<image src="../../static/img/jt.png" mode="" class="mainLineJt"></image>
				</view>
			</view>
			<view class="mainBox" v-if="restrainShow2">
				<view class="mainLine2" v-for="(item,index) in restrainList2" @click="restrainClickTwo(item)">
					<view class="lineName2">{{item.caption}}</view>
					<image src="../../static/img/jt.png" mode="" class="mainLineJt"></image>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vin: '',
				brand_name:'',
				access_time:'',
				zzTime:'',
				caption:'',
				param:'',
				token:'',
				list:'',
				restrainShow1:false,
				restrainList1:'',
				restrainShow1:false,
				restrainList1:'',
				lastShow:false,
				childrenList:'',
				oldList:'',
				childrenss:'',
			}
		},
		onLoad(opt) {
           this.vin=opt.vin;
		   this.zzTime=opt.zzTime;
		   this.param=opt.param;
		   this.token=opt.token;
		   this.getData()
		},
		methods: {
			restrainClickOne(item){
				this.param=item.param;
				this.token=item.token;
				if(item.next_restrain==1){
				  this.getYsone()
				}else{
				 this.getYsDlist()
				}
			},
			
			restrainClickTwo(item){
				this.param=item.param;
				this.token=item.token;
				if(item.next_restrain==1){
				  this.getYsDlist()
				}else{
				  this.getYsDlist()
				}
			},
			getYsDlist(){
				uni.showLoading({
					title: '加载中'
				});
				this.$http('advancedEpc/getSubgroupPc', {
					vin:this.vin,
					access_time:this.access_time,
					param:this.param,
					token:this.token
					
				}, 'GET').then(res => {
					uni.hideLoading();
					//console.log(res.data.number);
					if(res.data.number==200||res.data.number==5212){
					     this.caption=res.data.result.caption;
						 this.brand_name=res.data.result.brand_name;
						 this.access_time=res.data.result.access_time;
						 this.restrainShow2=false;
						 this.restrainShow1=false;
						 this.lastShow=true;
						 this.childrenList=res.data.result.list;
						 this.oldList= this.childrenList
						
					}else{
					   uni.showToast({
					   	title: res.data.message,
					   	icon: 'none',
					   	duration: 3000
					   });
					}
							
				});
			},
			getYsone(){
				uni.showLoading({
					title: '加载中'
				});
				this.$http('advancedEpc/getSubgroupPc', {
					vin:this.vin,
					access_time:this.access_time,
					param:this.param,
					token:this.token
					
				}, 'GET').then(res => {
					uni.hideLoading();
					//console.log(res.data.number);
					if(res.data.number==200||res.data.number==5212){
					     this.caption=res.data.result.caption;
						 this.brand_name=res.data.result.brand_name;
						 this.access_time=res.data.result.access_time;
						if(res.data.result.level_identify=='group_restrain'||res.data.result.level_identify=='subgroup'){  //约束
						  console.log("约束2")
						  this.restrainShow2=true;
						  this.restrainShow1=false;
						  this.restrainList2=res.data.result.list;
						 
						}else{
						   this.lastShow=true;
						   this.childrenList=res.data.result.list;
						   this.oldList= this.childrenList
						}
					}else{
					   uni.showToast({
					   	title: res.data.message,
					   	icon: 'none',
					   	duration: 3000
					   });
					}
							
				});
			},
			getData(){
				uni.showLoading({
					title: '加载中'
				});
				this.$http('advancedEpc/getSubgroupPc', {
					vin:this.vin,
					access_time:this.zzTime,
					param:this.param,
					token:this.token
					
				}, 'GET').then(res => {
					uni.hideLoading();
					//console.log(res.data.number);
					if(res.data.number==200||res.data.number==5212){
					     this.caption=res.data.result.caption;
						 this.brand_name=res.data.result.brand_name;
						 this.access_time=res.data.result.access_time;
						if(res.data.result.level_identify=='group_restrain'||res.data.result.level_identify=='subgroup'){  //约束
						  console.log("约束1")
						  this.restrainShow1=true;
						  this.restrainList1=res.data.result.list;
						 
						}else{
						   this.lastShow=true;
						  
						   this.childrenList=res.data.result.list;
						   this.oldList= this.childrenList
						}
					}else{
					   uni.showToast({
					   	title: res.data.message,
					   	icon: 'none',
					   	duration: 3000
					   });
					}
							
				});
			},
			goCarDetail(){
				uni.navigateTo({
					url:'CarDetail'
				})
			},
             goThree(item){
				 uni.navigateTo({
				 	url:'modelThree?vin='+this.vin+'&token='+item.token+'&param='+item.param+'&access_time='+this.access_time
				 })
			 },
			 childrenkeyup(){
				 this.childrenList=this.oldList;
				 if(this.childrenss==''){
				 
				  this.childrenList=this.oldList;
				 }else{
				 
				     this.childrenList=this.query(this.childrenList,this.childrenss,'caption')
				 
				 }
			 },
			 query(list, keyWord, attribute = 'caption') {
			   const reg = new RegExp(keyWord) // 创建正则表达式
			   const arr = []
			   for (let i = 0; i < list.length; i++) {
			     if (reg.test(list[i][attribute])) {
			       arr.push(list[i])
			     }
			   }
			   return arr
			 
			 },
		}
	}
</script>

<style scoped>
	.searchImg{
		width: 40rpx;
		height: 40rpx;
		margin-top: 16rpx;
		margin-left: 20rpx;
	}
	.searchBox{
		padding-top:24rpx ;
	}
	.inputBox{
		width: 702rpx;
		height: 72rpx;
		background: #F4F5F7;
		border-radius: 36rpx;
		margin-left: 24rpx;
		display:flex;
		position: relative;
	}
	.topInput{
		font-size: 28rpx;
		height: 72rpx;
		line-height: 72rpx;
		padding-left: 16rpx;
		width: 500rpx;
	}
	.content{
		background: #F4F5F7;
		min-height: 100vh;
	}
	.top{
		padding: 20rpx 0;
	}
	.topCont{
		width: 750rpx;
		height: 185rpx;
		background: #FFFFFF;
	}
	.carLogo{
		width: 72rpx;height: 72rpx;
	}
	.carTxt{
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 36rpx;
		width: 606rpx;
	}
	.carJt{
		width: 25rpx;
		height: 24rpx;
		margin-top: 6rpx;
	}
	.carBox{
		display: flex;
		justify-content: space-between;
		padding: 30rpx 24rpx 24rpx 24rpx;
	}
	.vinBox{
		display: flex;
		justify-content: space-between;
		padding-left: 120rpx;
		padding-right: 24rpx;
	}
	.vinBox2{
		display: flex;	
		align-items: center;
	}
	.detail{
		color: #3F90F7;
		font-size: 24rpx;
		margin-right: 10rpx;
	}
	.vinB{
		background: #F19D01;
		width: 60rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
		color: #FFFFFF;
		font-size: 22rpx;
		border-radius: 5rpx;
	}
	.vinNum{
		color: #999999;font-size: 24rpx;line-height: 30rpx;padding-left: 10rpx;
	}
	.mainBox{
		background: #FFFFFF;
	}
	.maintitle{
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		text-align: center;
		line-height: 88rpx;
		border-bottom: 1px solid #EEEEEE;
		position: relative;
	}
	.backImg{
		width: 25rpx;height: 24rpx;margin-top: 4rpx;
	}
	.backBox{
		display: flex;position: absolute;
		left: 23rpx;top: 28rpx;
	}
	.backTxt{
		color: #3F90F7;font-weight: 400;font-size: 24rpx;line-height: 33rpx;
	}
	.mainLineJt{
		width: 25rpx;
		height: 24rpx;
		margin-top: 8rpx;
	}
	.mainLine{
		display: flex;
		
		border-bottom: 1px solid #EEEEEE;
		padding: 29rpx 24rpx;
	}
	.lineName{
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 40rpx;
		width: 570rpx;
		word-wrap: break-word; /*强制换行*/
		  overflow: hidden; /*超出隐藏*/
		  text-overflow: ellipsis;/*隐藏后添加省略号*/
		  white-space: nowrap;/*强制不换行*/
	}
	.mainLine2{
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #EEEEEE;
		padding:24rpx;
	}
	.lineName2{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
	}
	.lineIMg{
		width: 110rpx;height: 110rpx;
	}
	.lineRIght{
		padding-left: 20rpx;
	}
	.lineBm{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		padding: 10rpx 0;
	}
	.linejs{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		width: 570rpx;
		word-wrap: break-word; /*强制换行*/
		  overflow: hidden; /*超出隐藏*/
		  text-overflow: ellipsis;/*隐藏后添加省略号*/
		  white-space: nowrap;/*强制不换行*/
	}
</style>