discounts-minapp/hotel/hotelImgList.vue

<template>
	<view class="hotelImgList">
		<view class="tab-box">
			<view class="tab" :class="[active === index?'active':'']" @click="handleTab(index)" v-for="(item,index) in pictures" :key="index">
				{{item.name}}({{item.list.length}})
			</view>
			
		</view>
		<view>
<!-- 			<view class="sub-title" :id="'the-'+index">
				{{`${item.name}(${item.list.length || 0})`}}
			</view> -->
			<view class="img-box">
				<zs-img class="img" :src="item" width="340rpx" height="340rpx" radius="full" v-for="(item,index) in list" :key="index" @click.native="preview(index)"></zs-img>
			</view>
		</view>
		
		<view class="btn-box">
			<button class="btn" type="default" @click="goIntroduce">酒店介绍</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active:0,
				pictures:[]
			}
		},
		computed: {
			list() {
				if(this.pictures.length){
				console.log(this.pictures[this.active].list);
					return this.pictures[this.active].list
				}else{
					return []
				}
			}
		},
		methods: {
			preview(index){
				uni.previewImage({
					urls:this.list,
					current:index,
					indicator:'number'
				})
			},
			handleTab(key) {
				this.active = key
				uni.pageScrollTo({
					selector:`#the-${key}`
				})
			},
			goIntroduce(){
				uni.navigateTo({
					url:`./introduce?id=${this.hotelId}`
				})
			},
		},
		onLoad(options) {
			this.hotelId = options.id
			this.pictures = JSON.parse(uni.getStorageSync('hotelImgList'))
		}
	}
</script>

<style lang="scss" scoped>
.hotelImgList{
	padding: 20rpx 24rpx 200rpx;
	.tab-box{
		display: flex;
		overflow-x: auto;
		.tab{
			padding: 4rpx 24rpx;
			background: #F0F0F0;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-size: 24rpx;
			color: #222222;
			flex-shrink: 0;
		}
		.tab+.tab{
			margin-left: 16rpx;
		}
		.tab.active{
			background: #FDECE8;
			color: #EE4320;
		}
	}
	
	.sub-title{
		font-weight: 600;
		font-size: 28rpx;
		color: #222222;
		margin-top: 20rpx;
	}
	.img-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.img{
			margin-top: 20rpx;
		}
	}
	
	.btn-box{
		position: fixed;
		bottom: 0%;
		left: 0%;
		background: #fff;
		z-index: 2;
		width: 100%;
		height: 98rpx;
		line-height: 98rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 0 env(safe-area-inset-bottom);
		border-top: 1rpx solid #EEEEEE;
		.btn{
			width: 702rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			font-weight: 600;
			font-size: 28rpx;
			background: #EE4320;
			color: #fff;
		}
	}
}
</style>