Jingde-town-wechat-uniapp/components/tourGuide/selectionPopup.vue

<template>
	<uv-popup ref="popup" :round="30" :customStyle="{height: '60vh'}">
		<view class="content">
			<view class="btn"
			@click="select({spotName : 'all'})">
				全部
			</view>
			<uv-vtabs
			:chain="chain" 
			:list="areaList"
			keyName="areaName"
			:barItemBadgeStyle="{right:'20px',top:'12px'}" 
			@change="change">
				<uv-vtabs-item>
					<view class="category-title">
						遗产点
					</view>
					<view class="list">
						<view class="item" v-for="(item,index) in list" :key="index"
						@click="select(item)">
							<view class="item-image">
								<image 
								:src="item.spotImage" 
								mode="aspectFill"></image>
							</view>
							<view class="item-unit">
								<text class="text">{{item.spotName}}</text>
							</view>
						</view>
					</view>
				</uv-vtabs-item>
			</uv-vtabs>
		</view>
	</uv-popup>
</template>

<script>
	import { mapState, mapGetters } from 'vuex'
	export default {
		data() {
			return {
				chain: false,
				areaList : [],
				areaIndex: 0,
			}
		},
		computed: {
			list(){
				return this.spotList.filter(n => {
					
					if(0 != n.categoryId){
						return false
					}
					
					if(!this.areaList[this.areaIndex]){
						return false
					}
					
					if(this.areaList[this.areaIndex].id != n.areaId){
						return false
					}
					
					return true
				})
				},
			...mapState(['spotList']),
		},
		created() {
			this.queryAreaList()
		},
		methods: {
			change(index) {
				this.areaIndex = index;
			},
			open(){
				this.$refs.popup.open('bottom');
			},
			select(e){
				this.$emit('select', e)
				this.$refs.popup.close();
			},
			queryAreaList(){
				this.$api('queryAreaList', res => {
					if(res.code == 200){
						this.areaList = res.result.records
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.content{
	/deep/ .uv-vtabs{
		height: 60vh !important;
	}
	/deep/ .uv-vtabs__bar{
		height: 60vh !important;
	}
	/deep/ .uv-vtabs__content{
		height: 60vh !important;
	}
	.btn{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1px solid #00000022;
	}
	.category-title{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 120rpx;
		
		&::before,
		&::after {
			position: absolute;
			top: 50%;
			content: '';
			width: 10%;
			border-top: 2rpx solid black;
		}
		
		&::before {
			left: 25%;
		}
		
		&::after {
			right: 25%;
		}
	}
	.list{
		display: flex;
		flex-wrap: wrap;
		margin: 0 auto;
		width: 490rpx;
		.item {
			padding: 10rpx 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-bottom: 20rpx;
			.item-image {
				width: 120rpx;
				height: 120rpx;
				image{
					height: 100%;
					width: 100%;
					border-radius: 50%;
				}
			}
		
			.item-unit {
				font-size: 24rpx;
				margin-top: 15rpx;
				color: #555;
			}
		}
		
		.gap {
			padding: 0 30rpx;
		}
	}
}
</style>