Picker 选择器

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="Picker 选择器">
		<!-- 基础选择器 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 24rpx 0" text="基础选择器" />
			<zk-cell title="当前选择" :value="baseValue || '请选择'" is-link @click="showPicker('base')" />
		</zk-theme>

		<!-- 多列选择器 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 24rpx 0" text="多列选择器" />
			<zk-cell title="日期选择" :value="dateValue || '请选择'" is-link @click="showPicker('date')" />
		</zk-theme>

		<!-- 联动选择器 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 24rpx 0" text="联动选择器" />
			<zk-cell title="地区选择" :value="areaValue || '请选择'" is-link @click="showPicker('area')" />
		</zk-theme>

		<!-- 对象数组选择器 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 24rpx 0" text="对象数组选择器" />
			<zk-cell title="对象选择" :value="objectValue || '请选择'" is-link @click="showPicker('object')" />
		</zk-theme>

		<!-- 选择器组件 -->
		<zk-picker :show="baseShow" title="基础选择器" :columns="[baseColumns]" @confirm="onBaseConfirm"
			@cancel="baseShow=false" />

		<zk-picker :show="dateShow" title="日期选择" :columns="[years, months, days]" @confirm="onDateConfirm"
			@change="onDateChange" @cancel="dateShow=false" />

		<zk-picker :show="areaShow" title="地区选择" :columns="[provinces, cities, areas]" :default-index="areaIndex"
			@confirm="onAreaConfirm" @change="onAreaChange" @cancel="areaShow=false" />

		<zk-picker :show="objectShow" title="对象选择器" :columns="[objectColumns]" :default-index="[0]" label-key="text"
			value-key="value" @confirm="onObjectConfirm" @cancel="objectShow=false" />
	</zk-theme>
</template>

<script>
	export default {
		data() {
			return {
				// 基础选择器
				baseShow: false,
				baseValue: '',
				baseColumns: ['选项1', '选项2', '选项3', '选项4', '选项5'],

				// 日期选择器
				dateShow: false,
				dateValue: '',
				years: Array.from({
					length: 10
				}, (_, i) => `${2020 + i}年`),
				months: Array.from({
					length: 12
				}, (_, i) => `${i + 1}月`),
				days: Array.from({
					length: 31
				}, (_, i) => `${i + 1}日`),

				// 地区选择器
				areaShow: false,
				areaValue: '',
				areaIndex: [0, 0, 0],
				provinces: ['广东省', '湖南省', '江西省'],
				cities: ['广州市', '深圳市', '珠海市'],
				areas: ['天河区', '越秀区', '海珠区'],

				// 对象数组选择器
				objectShow: false,
				objectValue: '',
				objectColumns: [{
						text: '选项1',
						value: '1'
					},
					{
						text: '选项2',
						value: '2'
					},
					{
						text: '选项3',
						value: '3'
					}
				]
			}
		},

		methods: {
			// 显示选择器
			showPicker(type) {
				switch (type) {
					case 'base':
						this.baseShow = true
						break
					case 'date':
						this.dateShow = true
						break
					case 'area':
						this.areaShow = true
						break
					case 'object':
						this.objectShow = true
						break
				}
			},

			// 基础选择器确认
			onBaseConfirm(e) {
				this.baseValue = e.value[0]
				this.baseShow = false
			},

			// 日期选择器确认
			onDateConfirm(e) {
				this.dateValue = e.value.join('')
				this.dateShow = false
			},

			// 日期选择变化
			onDateChange(e) {

				const month = parseInt(e.value[1])
				if (month) {
					// 根据月份更新天数
					const daysInMonth = new Date(2020, month, 0).getDate()
					this.days = Array.from({
						length: daysInMonth
					}, (_, i) => `${i + 1}日`)
				}
			},

			// 地区选择器确认
			onAreaConfirm(e) {
				this.areaShow = false
				this.areaValue = e.value.join(' ')
				this.areaIndex = e.index
			},

			// 地区选择变化
			onAreaChange(e) {
				console.log("e: " + JSON.stringify(e));
				const [provinceIndex, cityIndex] = e.index
				// 模拟联动数据
				if (provinceIndex === 0) {
					this.cities = ['广州市', '深圳市', '珠海市']
					this.areas = ['天河区', '越秀区', '海珠区']
				} else if (provinceIndex === 1) {
					this.cities = ['长沙市', '株洲市', '湘潭市']
					this.areas = ['岳麓区', '芙蓉区', '天心区']
				} else {
					this.cities = ['南昌市', '九江市', '赣州市']
					this.areas = ['东湖区', '西湖区', '青山湖区']
				}
			},

			// 对象数组选择器确认
			onObjectConfirm(e) {
				this.objectShow = false
				const item = this.objectColumns[e.index[0]]
				this.objectValue = item.text
			}
		}
	}
</script>

<style lang="scss">
	/* #ifdef APP-NVUE */
	.zk-cell {
		width: 662rpx;
	}

	/* #endif */
</style>