<template>
	<view>
		<scroll-view scroll-y="true" class="hotel-pic">
			<view class="content">
				<view class="left">
					<view v-for="(x,i) in jiList" :key="i" class="image-box" @click="previewImage(x.picUrl)">
						<image :src="x.picUrl" mode="widthFix"></image>
					</view>
				</view>
				<view class="right">
					<view v-for="(x,i) in ouList" :key="i" class="image-box" @click="previewImage(x.picUrl)">
						<image :src="x.picUrl" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageList:[
					{
						picUrl:"https://ak-d.tripcdn.com/images/200j13000000v60wjE77D_R_1080_808_R5_D.jpg",
						type:"酒店"
					},
					{
						picUrl:"https://ak-d.tripcdn.com/images/t1/hotel/533000/532930/3fcc6398b3c44c08bb1b57aef579793e_R_1080_808_R5_D.jpg",
						type:"酒店"
					},
					{
						picUrl:"https://ak-d.tripcdn.com/images/20010r000000hmqk32EF2_R_1080_808_R5_D.jpg",
						type:"酒店"
					},
					{
						picUrl:"https://ak-d.tripcdn.com/images/200v0f0000007d6wgBCD6_R_1080_808_R5_D.jpg",
						type:"酒店"
					},
					{
						picUrl:"http://imgfile.oytour.com/Upload/DMC/202105251114114560000000058.png",
						type:"酒店"
					},
					{
						picUrl:"https://dimg07.c-ctrip.com/images/01066120008jk5bcc94AC_C_1600_1200.jpg",
						type:"酒店"
					},
					{
						picUrl:"https://ak-d.tripcdn.com/images/200j13000000v60wjE77D_R_1080_808_R5_D.jpg",
						type:"酒店"
					},
					{
						picUrl:"https://ak-d.tripcdn.com/images/t1/hotel/533000/532930/3fcc6398b3c44c08bb1b57aef579793e_R_1080_808_R5_D.jpg",
						type:"酒店"
					},
					{
						picUrl:"https://ak-d.tripcdn.com/images/20010r000000hmqk32EF2_R_1080_808_R5_D.jpg",
						type:"酒店"
					},
					{
						picUrl:"https://ak-d.tripcdn.com/images/200v0f0000007d6wgBCD6_R_1080_808_R5_D.jpg",
						type:"酒店"
					},
					{
						picUrl:"http://imgfile.oytour.com/Upload/DMC/202105251114114560000000058.png",
						type:"酒店"
					},
					{
						picUrl:"https://dimg07.c-ctrip.com/images/01066120008jk5bcc94AC_C_1600_1200.jpg",
						type:"酒店"
					},
					{
						picUrl:"https://ak-d.tripcdn.com/images/200j13000000v60wjE77D_R_1080_808_R5_D.jpg",
						type:"酒店"
					},
					{
						picUrl:"https://ak-d.tripcdn.com/images/t1/hotel/533000/532930/3fcc6398b3c44c08bb1b57aef579793e_R_1080_808_R5_D.jpg",
						type:"酒店"
					},
					{
						picUrl:"https://ak-d.tripcdn.com/images/20010r000000hmqk32EF2_R_1080_808_R5_D.jpg",
						type:"酒店"
					},
					{
						picUrl:"https://ak-d.tripcdn.com/images/200v0f0000007d6wgBCD6_R_1080_808_R5_D.jpg",
						type:"酒店"
					},
					{
						picUrl:"http://imgfile.oytour.com/Upload/DMC/202105251114114560000000058.png",
						type:"酒店"
					},
					{
						picUrl:"https://dimg07.c-ctrip.com/images/01066120008jk5bcc94AC_C_1600_1200.jpg",
						type:"酒店"
					},{
						picUrl:"https://ak-d.tripcdn.com/images/200j13000000v60wjE77D_R_1080_808_R5_D.jpg",
						type:"酒店"
					},
					{
						picUrl:"https://ak-d.tripcdn.com/images/t1/hotel/533000/532930/3fcc6398b3c44c08bb1b57aef579793e_R_1080_808_R5_D.jpg",
						type:"酒店"
					},
					{
						picUrl:"https://ak-d.tripcdn.com/images/20010r000000hmqk32EF2_R_1080_808_R5_D.jpg",
						type:"酒店"
					},
					{
						picUrl:"https://ak-d.tripcdn.com/images/200v0f0000007d6wgBCD6_R_1080_808_R5_D.jpg",
						type:"酒店"
					},
					{
						picUrl:"http://imgfile.oytour.com/Upload/DMC/202105251114114560000000058.png",
						type:"酒店"
					},
					{
						picUrl:"https://dimg07.c-ctrip.com/images/01066120008jk5bcc94AC_C_1600_1200.jpg",
						type:"酒店"
					}
				],
				jiList:[],
				ouList:[],
				allImageSrc:[]
			}
		},
		created() {
			uni.setNavigationBarTitle({
				title: "酒店图片",
			});
			this.imageList.forEach((x,i)=>{
				this.allImageSrc.push(x.picUrl)
				if(i%2==0){
					this.jiList.push(x)
				}else{
					this.ouList.push(x)
				}
			})
			console.log(this.jiList,this.ouList)
		},
		mounted () {
			
		},
		methods: {
			previewImage(src) {
				uni.previewImage({
					urls: this.allImageSrc,
					current: src,
					longPressActions: {
						itemList: ["发送给朋友", "保存图片", "收藏"],
						success: function(data) {},
						fail: function(err) {
							console.log(err.errMsg);
						},
					},
				});
			}
		},
	}
</script>

<style>
	.hotel-pic{
		height: 100vh;
		width: 100vw;
	}
	.hotel-pic .content{
		display: flex;
		align-items: flex-start;
		padding: 44rpx;
		padding-top: 14rpx;
	}
	.hotel-pic .content .left{
		flex:1;
		margin-right: 15rpx;
	}
	.hotel-pic .content .right{
		flex:1;
		margin-left: 15rpx;
	}
	.hotel-pic .content .image-box{
		width:100%;
		margin-top: 30rpx;
	}
	.hotel-pic .content .image-box image{
		width: 100%;
		border-radius: 20rpx;
	}
</style>
