H5/components/mapType/mapType.vue

<template>
	<uni-popup class="picker-popup" ref="mapTypePopupRef" type="bottom" border-radius="10px 10px 0 0">
		<div class="picker-content">
			<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>
	
</style>