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="zdyNavTitle">{{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">
				{{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:'',
			}
		},
		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;
			
			//获取缓存对象 epcChildrenTwo
			this.chlilds = uni.getStorageSync('epcChildrenTwo');
			uni.removeStorageSync('epcChildrenTwo');
			
		},
		methods: {
			goback() {
				 uni.navigateTo({
				 	url: 'epcSimpleDetailOne?type=2&token='+this.token+'&param='+this.param+'&access_time='+this.access_time
					+'&epc_id='+this.epc_id+'&brand_id='+this.brand_id+"&brand_name="+this.brand_name
				 })
			},
			//返回选品牌
			goToSelectCarModel(){
				uni.navigateTo({url:'SelectCarModel'});
			},
			toVinDetail(item,index){
				uni.showLoading({
					title: '加载中'
				});
				this.goThree(item);
			},
			goThree(item) {
				var that = this;
				
				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
				})
				// uni.setStorage({
				// 	key: 'childrenList',
				// 	data: that.childrenList,
				// 	success: function() {
				// 		uni.navigateTo({
				// 			url: 'SimpleOemSearch.vue?brand=' + that.brand + '&token=' + that.token + '&param=' +
				// 				that.param + '&access_time=' + that.access_time + '&title=' + index+'&epc_id='+that.epc_id
				// 		})
				// 	}
				// });
			}
		}
	}
</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;
	}
	
	
	.content{
		background: #F0F0F0;
	}
	.show{
		display: flex;
		flex-direction: column;
		width: 750rpx;
		padding-left: 10rpx;
		background: #FFFFFF;
		margin-bottom: 20rpx;
	}
	.show-title{
		margin-bottom: 10rpx;
		border-left: 10rpx solid #3F90F7;
		padding-left: 20rpx;
		margin: 20rpx 0;
	}
	.show-images{
		display: grid;
		grid-template-columns: repeat(4,1fr);
		
	}
	.show-images-item{
		
	}
	.item-box{
		
		
	}
	.item-image{
		justify-content: center;
		border-radius: 10rpx;
		border: 1rpx solid #999999;
		padding: 5rpx;
		margin: 10rpx 5rpx 10rpx 5rpx;
		width: 150rpx;
		display: flex;
	}
	.item-title{
		text-align: center;
	}
	
</style>