LocalLivingServicesUniapp/components/selectType.vue

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

<script>
	export default {
		name: 'selectType',
		data() {
			return {
				selectLocality: [{
						value: 1,
						label: '个人独资'
					},
					{
						value: 2,
						label: '个体工商户'
					},
					{
						value: 3,
						label: '有限责任公司'
					},
					{
						value: 4,
						label: '股份责任公司'
					},
					{
						value: 5,
						label: '合伙企业'
					}
				],
			}
		},
		methods:{
			transmitType(item){
				this.$emit('transmitType',{value: item.value, label: item.label})
			},
			cut(){
				this.$emit('cutPopup')
			}
		}
	}
</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>