H5/pages/feedback/SelectClassify.vue

<template>
	<!-- 	<uni-popup ref="SelectMap" :isMaskClick='true' type="bottom" border-radius="10px 10px 0 0"
		maskBackgroundColor='rgba(0, 0, 0, 0.1)'>
		<view class="map-list">
			<view class="title">请选择问题分类</view>
			<view class="map-item" @click.stop="handlerFeedbackType(item.value)" v-for="item in list">
				{{item.label }}
			</view>
			<view class="map-item cancel" @click.stop="close()">
				取消
			</view>
		</view>
	</uni-popup> -->
	<uni-popup class="picker-popup" ref="popupRef" type="bottom" border-radius="10px 10px 0 0">
		<div class="picker-content">
			<div class="city-picker-btn">
				<text @click.stop="close()">取消</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 list" :key="index">{{item.label}}</view>
				</picker-view-column>
			</picker-view>
		</div>
	</uni-popup>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				value: undefined
			};
		},
		created() {

		},
		mounted() {
			// setTimeout(() => {
			// 	this.open()
			// }, 200)
		},
		methods: {
			open() {
				if (!this.value || this.value.length === 0) {
					this.value = [0]
				}
				this.$refs.popupRef.open()
			},
			close() {
				this.$refs.popupRef.close()
			},
			confirm() {
				if (this.value && this.value.length > 0) {
					const index = this.value[0];
					const value = this.list[index].value;
					this.$emit("chang", value)
					this.close()
				} else {
					uni.showToast({
						title: '请选择问题分类',
						icon: 'none'
					})
				}
			},
			bindChange(val) {
				const { value } = val.detail;
				this.value = value;
			},

		}
	}
</script>

<style lang="scss" scoped>
	.map-list {
		width: 100%;
		// height: 30vh;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		text-align: center;

		.title {
			width: 100%;
			text-align: center;
			padding: 30rpx 20rpx 50rpx 20rpx;
			font-size: 28rpx;
		}

		.map-item {
			width: 100%;
			padding: 30rpx 20rpx;
		}

		.cancel {
			padding: 50rpx 30rpx;
			color: #9f9f9f;
		}
	}
</style>