LocalLivingServicesUniapp/components/selectService.vue

<template>
	<view class="div">
		<view class="content">
			<view class="type">
				<view class="type_item" v-for="(item,index) in selectLocality" :key="item.id" @click="transmitType(item)">
					{{item.name}}
				</view>
			</view>
			<view class="btn" @click="cut">
				取消
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'selectService',
		data() {
			return {
				selectLocality: [],
			}
		},
		methods:{
			transmitType(item){
				this.$emit('transmitType',{id: item.id, name: item.name})
			},
			cut(){
				this.$emit('cutPopup')
			},
			getClass(){
				this.$http.get("/sys/category/childList?pid=" + '1889836358116098050').then(res => {
							console.log(res)
				    if (res.data.success) {
							this.selectLocality = res.data.result
				    }
				    else {
				    }
				})
			}
		},
		//
		mounted() {
			this.getClass()
		}
	}
</script>

<style scoped lang="scss">
	.div {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: end;

		.content {
			width: 100%;
			border-radius: 20rpx 20rpx 0px 0px;
			overflow-y: hidden;

			.type {
				width: 100%;
				height: 455rpx;
				margin-bottom: 20rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.type_item{
					display: flex;
					align-items: center;
					justify-content: center;
					flex: 1;
				}
			}

			.btn {
				width: 100%;
				height: 114rpx;
				background-color: #fff;
				font-weight: 500;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>