H5/components/mapType/mapType.vue

<template>
	<uni-popup ref="mapTypePopupRef" type="bottom" border-radius="10px 10px 0 0">
		<div class="city-box">
			<div class="city-picker-btn">
				<text @click.stop="cancel()">取消</text>
				<text @click.stop="confirm()">确定</text>
			</div>
			<picker-view indicator-class="indicator-class" :value="value||[]" class="picker-view" @change="bindChange">
				<picker-view-column>
					<view class="item" v-for="(item,index) in mapTypeList" :key="index">{{item.typeName}}</view>
				</picker-view-column>
			</picker-view>
		</div>

	</uni-popup>

</template>

<script>
	import { getMaptypeList_Api } from "@/api/map.js";
	export default {
		name: "mapType",
		props: {
			mapTypeId: {
				type: String,
				default: null
			}
		},
		data() {
			return {
				value: [],
				defaultVal:[{
					mapTypeId:undefined,
					typeName:'全部'
				}],
				mapTypeList: []
			}
		},
		watch: {

		},
		created() {
			this.init()
		},
		mounted() {

		},
		methods: {
			init() {
				const parms = { typeStatus: 'ENABLE' }
				getMaptypeList_Api(parms).then(res => {
					this.mapTypeList = this.defaultVal.concat(res || []);
				})
			},
			open() {
				this.$refs.mapTypePopupRef.open()
			},
			bindChange(val) {
				const { value } = val.detail;
				this.value = value || [0]
			},
			confirm() {
				const in_ = this.value[0] || 0;
				const item = this.mapTypeList[in_]; 
				this.$emit("update:mapTypeId", item.mapTypeId);
				this.$emit("typeName", item.typeName);
				this.cancel();
			},
			cancel() {
				this.$refs.mapTypePopupRef.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-popup {
		z-index: 1002;

		.city-box {
			height: 55vh;
			background-color: #fff;
			border-radius: 30rpx 30rpx 0 0;

			.city-picker-btn {
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
			}

			.picker-view {
				height: calc(100% - 100rpx);
				text-align: center;

			}
		}
	}

	/deep/ .indicator-class {
		height: 100rpx;
	}

	/deep/ .uni-picker-view-content {
		.item {
			text-align: center;

			line-height: 100rpx;
		}
	}
</style>