consumoption/subpkg/uni_modules/custom-search-picker_0.0.1_example/pages/index/index.vue

<template>
	<view class="content">
		<!-- 标题区域 -->
		<view class="demo-header">
			<text class="demo-title">自定义选择器演示</text>
			<text class="demo-subtitle">CustomPicker Component Examples</text>
		</view>

		<!-- 演示按钮区域 -->
		<view class="demo-buttons">
			<view class="button-row">
				<button class="demo-btn primary" @tap="showCityPicker">
					<text class="btn-icon">🏙️</text>
					<text class="btn-text">城市选择（单选）</text>
				</button>
				<button class="demo-btn success" @tap="showHobbyPicker">
					<text class="btn-icon">🎯</text>
					<text class="btn-text">兴趣选择（多选）</text>
				</button>
			</view>
			<view class="button-row">
				<button class="demo-btn info" @tap="showUserPicker">
					<text class="btn-icon">👤</text>
					<text class="btn-text">用户选择（自定义字段）</text>
				</button>
				<button class="demo-btn warning" @tap="showSimplePicker">
					<text class="btn-icon">✅</text>
					<text class="btn-text">简单选择（无搜索）</text>
				</button>
			</view>
		</view>

		<!-- 结果显示区域 -->
		<view class="result-container" v-if="lastResult">
			<view class="result-header">
				<text class="result-title">最新选择结果</text>
				<text class="result-type">[{{ currentPickerType }}]</text>
			</view>
			<view class="result-content">
				<text class="result-text">{{ formatResult(lastResult) }}</text>
			</view>
		</view>

		<!-- 自定义选择器组件 -->
		<customPicker
			:visible="pickerVisible"
			:title="pickerConfig.title"
			:options="pickerConfig.options"
			:displayKey="pickerConfig.displayKey"
			:valueKey="pickerConfig.valueKey"
			:multiple="pickerConfig.multiple"
			:searchable="pickerConfig.searchable"
			:value="pickerConfig.value"
			@confirm="handleConfirm"
			@cancel="handleCancel"
		/>
	</view>
</template>

<script>
	import customPicker from './customPicker.vue'
	export default {
	 components:{
		 customPicker
	 },
	  data() {
	    return {
	      // 选择器显示状态
	      pickerVisible: false,
	      // 当前选择器类型
	      currentPickerType: '',
	      // 最新选择结果
	      lastResult: null,
	      
	      // 选择器配置
	      pickerConfig: {
	        title: '请选择',
	        options: [],
	        displayKey: 'label',
	        valueKey: 'value',
	        multiple: false,
	        searchable: true,
	        value: ''
	      },
	      
	      // 城市选项数据
	      cityOptions: [
	        { label: '北京', value: 'beijing', code: 'BJ' },
	        { label: '上海', value: 'shanghai', code: 'SH' },
	        { label: '深圳', value: 'shenzhen', code: 'SZ' },
	        { label: '广州', value: 'guangzhou', code: 'GZ' },
	        { label: '杭州', value: 'hangzhou', code: 'HZ' },
	        { label: '成都', value: 'chengdu', code: 'CD' },
	        { label: '西安', value: 'xian', code: 'XA' },
	        { label: '武汉', value: 'wuhan', code: 'WH' },
	        { label: '南京', value: 'nanjing', code: 'NJ' },
	        { label: '重庆', value: 'chongqing', code: 'CQ' }
	      ],
	      
	      // 兴趣爱好选项数据
	      hobbyOptions: [
	        { label: '阅读', value: 'reading' },
	        { label: '旅行', value: 'travel' },
	        { label: '摄影', value: 'photography' },
	        { label: '音乐', value: 'music' },
	        { label: '运动', value: 'sports' },
	        { label: '绘画', value: 'painting' },
	        { label: '烹饪', value: 'cooking' },
	        { label: '游戏', value: 'gaming' },
	        { label: '电影', value: 'movies' },
	        { label: '编程', value: 'programming' }
	      ],
	      
	      // 用户选项数据（自定义字段）
	      userOptions: [
	        { name: '张三', id: 'user001', department: '技术部', email: 'zhangsan@example.com' },
	        { name: '李四', id: 'user002', department: '产品部', email: 'lisi@example.com' },
	        { name: '王五', id: 'user003', department: '设计部', email: 'wangwu@example.com' },
	        { name: '赵六', id: 'user004', department: '运营部', email: 'zhaoliu@example.com' },
	        { name: '钱七', id: 'user005', department: '市场部', email: 'qianqi@example.com' }
	      ],
	      
	      // 简单选项数据
	      simpleOptions: [
	        { label: '是', value: true },
	        { label: '否', value: false }
	      ]
	    }
	  },
	  methods: {
	    // 显示城市选择器
	    showCityPicker() {
	      this.currentPickerType = '城市选择'
	      this.pickerConfig = {
	        title: '选择城市',
	        options: this.cityOptions,
	        displayKey: 'label',
	        valueKey: 'value',
	        multiple: false,
	        searchable: true,
	        value: ''
	      }
	      this.pickerVisible = true
	    },
	    
	    // 显示兴趣爱好选择器（多选）
	    showHobbyPicker() {
	      this.currentPickerType = '兴趣选择'
	      this.pickerConfig = {
	        title: '选择兴趣爱好',
	        options: this.hobbyOptions,
	        displayKey: 'label',
	        valueKey: 'value',
	        multiple: true,
	        searchable: true,
	        value: []
	      }
	      this.pickerVisible = true
	    },
	    
	    // 显示用户选择器（自定义字段）
	    showUserPicker() {
	      this.currentPickerType = '用户选择'
	      this.pickerConfig = {
	        title: '选择用户',
	        options: this.userOptions,
	        displayKey: 'name',
	        valueKey: 'id',
	        multiple: false,
	        searchable: true,
	        value: ''
	      }
	      this.pickerVisible = true
	    },
	    
	    // 显示简单选择器（无搜索）
	    showSimplePicker() {
	      this.currentPickerType = '简单选择'
	      this.pickerConfig = {
	        title: '确认操作',
	        options: this.simpleOptions,
	        displayKey: 'label',
	        valueKey: 'value',
	        multiple: false,
	        searchable: false,
	        value: ''
	      }
	      this.pickerVisible = true
	    },
	    
	    // 处理确认选择
	    handleConfirm(result) {
	      this.lastResult = result
	      console.log(`${this.currentPickerType}结果:`, result)
	      this.pickerVisible = false
	    },
	    
	    // 处理取消选择
	    handleCancel() {
	      console.log('取消选择')
	      this.pickerVisible = false
	    },
	    
	    // 格式化结果显示
	    formatResult(result) {
	      if (!result) return ''
	      
	      if (result.selectedItems) {
	        // 多选结果
	        const items = result.selectedItems.map(item => 
	          item[this.pickerConfig.displayKey] || item.label || item.name || item
	        ).join('、')
	        return `已选择 ${result.selectedItems.length} 项：${items}`
	      } else {
	        // 单选结果
	        const itemText = result.selectedItem 
	          ? (result.selectedItem[this.pickerConfig.displayKey] || result.selectedItem.label || result.selectedItem.name || result.selectedItem)
	          : result.selectedValue
	        return `已选择：${itemText}`
	      }
	    }
	  }
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		min-height: 100vh;
		background: #11998e;
		padding: 40rpx 30rpx;
	}

	// 演示标题区域
	.demo-header {
		text-align: center;
		margin-bottom: 60rpx;
		
		.demo-title {
			display: block;
			font-size: 48rpx;
			font-weight: 700;
			color: #fff;
			margin-bottom: 16rpx;
			text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
		}
		
		.demo-subtitle {
			display: block;
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.8);
			letter-spacing: 2rpx;
		}
	}

	// 按钮区域
	.demo-buttons {
		width: 100%;
		max-width: 680rpx;
		margin-bottom: 60rpx;
		
		.button-row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;
			gap: 20rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
		}
		
		.demo-btn {
			flex: 1;
			background: #fff;
			border: none;
			border-radius: 24rpx;
			padding: 40rpx 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
			transition: all 0.3s ease;
			min-height: 160rpx;
			position: relative;
			overflow: hidden;
			
			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
				transform: translateX(-100%);
				transition: transform 0.6s ease;
			}
			
			&:active {
				transform: translateY(2rpx);
				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
				
				&::before {
					transform: translateX(100%);
				}
			}
			
			.btn-icon {
				font-size: 40rpx;
				margin-bottom: 16rpx;
				display: block;
			}
			
			.btn-text {
				font-size: 24rpx;
				color: #333;
				font-weight: 500;
				text-align: center;
				line-height: 1.4;
			}
			
			&.primary {
				background: linear-gradient(135deg, #667eea, #764ba2);
				
				.btn-text {
					color: #fff;
				}
			}
			
			&.success {
				background: linear-gradient(135deg, #11998e, #38ef7d);
				
				.btn-text {
					color: #fff;
				}
			}
			
			&.info {
				background: linear-gradient(135deg, #3498db, #2980b9);
				
				.btn-text {
					color: #fff;
				}
			}
			
			&.warning {
				background: linear-gradient(135deg, #f39c12, #d35400);
				
				.btn-text {
					color: #fff;
				}
			}
		}
	}

	// 结果显示区域
	.result-container {
		width: 100%;
		max-width: 680rpx;
		background: #fff;
		border-radius: 24rpx;
		padding: 40rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
		margin-bottom: 40rpx;
		
		.result-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;
			
			.result-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}
			
			.result-type {
				font-size: 24rpx;
				color: #12b792;
				background: rgba(18, 183, 146, 0.1);
				padding: 8rpx 16rpx;
				border-radius: 12rpx;
				font-weight: 500;
			}
		}
		
		.result-content {
			.result-text {
				font-size: 28rpx;
				color: #666;
				line-height: 1.6;
				display: block;
			}
		}
	}

	// 移除原有的不必要样式
	.logo {
		display: none;
	}

	.text-area {
		display: none;
	}

	.title {
		display: none;
	}
</style>