<template>
	<view class="body">
		<uni-nav-bar left-icon="left" @clickLeft="back()"  :title="title" />
	<view v-for="(item,index) in list " :key="item.zone_id">
		<view v-for="(item1,index1) in item.blocks " :key="item1.block_pic">
		<view class="ONEPIC" v-if="item.zone_code=='ONEPIC' && item.zone_status=='NORMAL'" :style="{height:(item.zone_code=='ONEPIC')?item.zone_column+'rpx':'200rpx'}">
			<!-- class="discount page_padding" -->
			<image :src="item1.block_pic" mode="" @click="imgTo()" ></image>
		</view>
		<view class="TWOPIC" v-if="item.zone_code =='TWOPIC'">
			<image :src="item1.block_pic"></image>
		</view>
		<!-- TWOPIC -->
		<view class="TWOPIC" :style="{height:(item.zone_code=='TWOPIC')?item.zone_column+'rpx':'200rpx'}" v-if="item.zone_code=='TWOPIC' && item.zone_status=='NORMAL'">
			<image :src="item1.block_pic" @click="imgTo(item1)"mode="" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image>
		</view>
		<!-- THREEPIC -->
		<view class="THREEPIC":style="{height:(item.zone_code=='THREEPIC')?item.zone_column+'rpx':'200rpx'}"   v-if="item.zone_code=='THREEPIC' && item.zone_status=='NORMAL'">
			<image :src="item1.block_pic"  @click="imgTo(item1)" mode="" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image>
		</view>
		<!-- FOURPIC -->
		<view class="FOURPIC":style="{height:(item.zone_code=='FOURPIC')?item.zone_column+'rpx':'200rpx'}"  v-if="item.zone_code=='FOURPIC' && item.zone_status=='NORMAL'">
			<image :src="item1.block_pic" mode=""  @click="imgTo(item1)" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image>
		</view>
		<!-- FIVEPIC -->
		<view class="FIVEPIC" :style="{height:(item.zone_code=='FIVEPIC')?item.zone_column+'rpx':'200rpx'}"  v-if="item.zone_code=='FIVEPIC' && item.zone_status=='NORMAL'">
			<image :src="item1.block_pic" mode=""  @click="imgTo(item1)" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image>
		</view>
		<!-- SIXPIC -->
		<view class="SIXPIC":style="{height:(item.zone_code=='SIXPIC')?item.zone_column+'rpx':'200rpx'}" v-if="item.zone_code=='SIXPIC' && item.zone_status=='NORMAL'">
			<image :src="item1.block_pic" mode="" @click="imgTo(item1)" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image>
		</view>
	</view>
	</view>
	</view>
</template>
<script>
	import {defaultRequest,defaultRequest4} from '../../api/index.js'
	export default {
		data() {
			return {
				list:[],
				data: {
					_action:'getpagedata',
					pagecode:''
				},
				title:''
			}
		},
		onLoad(e) {
			console.log(e)
			this.title = e.title
			this.data.pagecode = e.id
			this.getpage()
		},
		methods: {
			getpage(){
			
				let imglist 
				defaultRequest(this.data).then( res =>{
					if(res.error ==0){
						
						console.log(res,'数据')
						 this.list= res.data.zones
						console.log(this.list)
						this.list.map( item =>{
							console.log(item,'item')
						})
					}
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: aliceblue;
		margin: 20rpx;
	}
.ONEPIC{
		   width: 100%;
		  height: 480rpx;
		  margin-top: -1rpx;
		
		image{
			height: 100%;
			 width: 100%;
		}
	}
	.TWOPIC{
		width: 100%;
		display: flex;
		image{
			width: 50%;
		}
	}
	.THREEPIC{
		width: 100%;
		display: flex;
		margin: 0;
		justify-content: space-between;
		image{
			width: 100%;
		}
	}
	.FOURPIC{
		width: 100%;
		display: flex;
		justify-content: space-between;
		image{
			width: 100%;
		}
	}
	.FIVEPIC{
		width: 100%;
		display: flex;
		justify-content: space-between;
		image{
			width: 100%;
		}
	}
	.SIXPIC{
		width: 100%;
		display: flex;
		justify-content: space-between;
		image{
			width: 100%;
		}
	}
.body{
		padding-top: 50.33rpx;
	}
</style>
