epc/pages/mobile/epcSimpleDetailTwo.vue

<template>
	<view class="content">
		<!-- 自定义导航 -->
		<view class="zdyNavBox">
			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			<view class="zdyNav">
				<!-- <view class="zdyNavLeft">
					<div @click="goback" class="uni-page-head-btn"><i class="uni-btn-icon"
							style="color: rgb(0, 0, 0); font-size: 27px;"></i></div>
		
				</view>
				<view class="xx" style="position: absolute;left:100rpx;color: black;font-size: 23px;" @click="goToSelectCarModel">X</view> -->
				<view class="zdyNavLeft">
					<div @click="goback" class="uni-page-head-btn"><i class="uni-btn-icon"
							style="color: #333333; font-size: 27px;" ></i></div>
				</view>
				<view class="xx" style="margin-left: -70rpx;" @click="goToSelectCarModel">
					<image src="/static/img/group2.png" style="width: 27rpx;height: 27rpx;"></image>
				</view>
				<view class="tab-box">{{title}}</view>
				<view v-if="param.length != 0" class="zdyNavRight"></view>
				<view v-else style="width: 120rpx;"></view>
		
			</view>
		</view>
		<view class="show" v-for="parent in chlilds" >
			<view class="show-title-left">
				
			</view>
			<view class="show-title">
				{{parent.title}}
			</view>
			<view class="show-images">
				<view class="show-images-item" v-for="(item,index) in parent.children" @click="toVinDetail(item,index)">
					<view class="item-box">
						<view class="item-image">
							<image :src="item.image" mode="aspectFit" style="width: 150rpx;height: 150rpx;"></image>
						</view>
						<view class="item-title">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"",
				chlilds:[],
				childrenList:[],
				token:'',
				param:'',
				access_time:'',
				epc_id:'',
				brand_id:"",
				brand_name:"",
				caption:'',
				vin:'',
			}
		},
		onLoad(opt){
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.title = opt.title;
			this.token = opt.token;
			this.param = opt.param;
			this.access_time = opt.access_time;
			this.epc_id = opt.epc_id;
			this.brand_id = opt.brand_id;
			this.brand_name = opt.brand_name;
			this.caption = opt.caption;
			this.vin = opt.vin;
			//获取缓存对象 epcChildrenTwo
			this.chlilds = uni.getStorageSync('epcChildrenTwo');
		},
		methods: {
			goback() {
			  uni.navigateBack({
				delta: 1,
				success: (res) => {
				  console.log("返回成功", res);
				}
			  });
			},
			
			//返回选品牌
			goToSelectCarModel(){
				let vin = this.vin;
				if(vin == undefined || vin =='' ||vin == 'undefined' ){
					uni.navigateTo({url:'SelectCarModel'});
				}else{
					uni.navigateTo({url:'index'});
				}
			},
			toVinDetail(item,index){
				uni.showLoading({
					title: '加载中'
				});
				this.goThree(item);
			},
			goThree(item) {
				console.log(item);
				var that = this;
				console.log(item);
				let url = "/simpleEpc/getCustomDetail";
				let data = {
					brand_id : this.brand_id,
					epc_id : this.epc_id,
					custom_id : item.id,
					token : this.token,
					access_time : this.access_time,
					param : this.param,
					vin:''
					
				};
				let res = this.textJieKou(url,data);
				res.then(response =>{
					let number = response.data.number;
					if(number != 200 ){
						uni.navigateTo({
							url: 'SimpleOemSearch?brand=' + undefined + '&token=' + this.token + '&param=' +
								this.param + '&access_time=' + this.access_time + '&title=' + item.title+'&epc_id='+this.epc_id+"&brand_name="+this.brand_name
								+"&caption="+this.caption
						})
						return;
					}
					
					let data = response.data.result.data.list;
					if(data.length > 1){//跳子组页
						uni.navigateTo({
							url: 'modelTwoSimple?brand=' + undefined + '&token=' + this.token + '&param=' +
								this.param + '&zzTime=' + this.access_time + '&title=' + item.title+'&epc_id='+this.epc_id+"&brand_name="+this.brand_name
								+"&caption="+this.caption
						})
					}else if(data.length == 1){//跳配件展示页
						uni.navigateTo({
							url: 'vinDetail?brand=' + undefined + '&token=' + data[0].token + '&param=' +
								data[0].param + '&access_time=' + response.data.result.data.access_time + '&title=' + item.title+'&epc_id='+this.epc_id+"&brand_name="+this.brand_name
								+"&tabIndex=0"
						})
					}
				})
				
				// uni.navigateTo({
				// 	url: 'SimpleOemSearch?brand=' + that.brand + '&token=' + that.token + '&param=' +
				// 		that.param + '&access_time=' + that.access_time + '&title=' + item.title+'&epc_id='+that.epc_id+"&brand_name="+this.brand_name
				// 		+"&caption="+this.caption
				// })
				
			},
			async textJieKou(url,data){
				let returnRes ;
				await this.$http(url,data, 'GET').then(res => {
					 returnRes = res;
					 console.log("方法内部返回:",res);
				});
				
				return returnRes; 
			},
		}
	}
</script>

<style>
.zdyNavBox {
		width: 100vw;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999999;

	}

	.zdyNav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 14rpx 6rpx;
	}

	.zdyNavLeft {
		width: 120rpx;
	}

	.zdyNavTitle {
		background: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
	}

	.zdyNavRight {
		background: #FFFFFF;
		text-align: center;
		font-size: 28rpx;
		color: #3F90F7;
		width: 120rpx;
	}
	.tab-box{
		width: 360rpx;
		display: flex;
		height: 65rpx;
		align-items: center;
		justify-content: center;
		
	}
	
	
	.content{
		background: #F0F0F0;
	}
	.show{
		display: flex;
		flex-direction: column;
		width: 750rpx;
		padding-left: 10rpx;
		background: #FFFFFF;
		margin-bottom: 20rpx;
	}
	.show-title-left{
		width: 6rpx;
		height: 27rpx;
		background: #1777FF;
		border-radius: 3rpx;
		position: relative;
		top: 57rpx;
		margin-left: 15rpx;
	}
	.show-title{
		margin-bottom: 10rpx;
		/* border-left: 10rpx solid #3F90F7; */
		margin: 20rpx 35rpx;
		font-size: 30rpx;
		font-weight: 500;
		font-family: PingFangSC, PingFang SC;
	}
	.show-images{
		display: flex;
		flex-wrap: wrap;
	}
	.show-images-item{
		
		margin-left: 12rpx;
	}
	.item-box{
		
		
	}
	.item-image{
		justify-content: center;
		border-radius: 14rpx;
		border: 1rpx solid #E2E2E2;
		padding: 5rpx;
		margin: 10rpx 5rpx 10rpx 5rpx;
		width: 150rpx;
		display: flex;
	}
	.item-title{
		text-align: center;
		font-size: 24rpx;
		
		margin: 10rpx 0 14rpx 0;
	}
	
</style>