pet-system-merchant-app/components/center-select/index.vue

<template>
	<view class="center-select-mask" v-if="modelValue" @click="onClose" @touchmove.stop.prevent>
		<view class="center-select-container" @click.stop>
			<view class="select-header">
				<text class="select-title">{{ title }}</text>
				<!-- CSS 绘制的关闭按钮 @Author: Antigravity -->
				<view class="close-btn" @click="onClose">
					<view class="line line1"></view>
					<view class="line line2"></view>
				</view>
			</view>
			<scroll-view scroll-y class="select-content">
				<view 
					v-for="(item, index) in options" 
					:key="index" 
					class="select-item"
					:class="{ 'active': isSelected(item) }"
					@click="onSelect(item)"
				>
					<text class="item-label">{{ getLabel(item) }}</text>
					<!-- CSS 绘制的选中对勾 @Author: Antigravity -->
					<view class="checkmark" v-if="isSelected(item)"></view>
				</view>
				<view class="empty-tip" v-if="options.length === 0">暂无选项</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
/**
 * @Author: Antigravity
 */
import { ref } from 'vue'

const props = defineProps({
	modelValue: Boolean, // 控制显示隐藏
	title: {
		type: String,
		default: '请选择'
	},
	options: {
		type: Array,
		default: () => []
	},
	value: {
		type: [String, Number],
		default: ''
	},
	labelKey: {
		type: String,
		default: 'label'
	},
	valueKey: {
		type: String,
		default: 'value'
	}
})

const emit = defineEmits(['update:modelValue', 'select'])

const getLabel = (item) => {
	if (typeof item === 'string' || typeof item === 'number') return item
	return item[props.labelKey]
}

const getValue = (item) => {
	if (typeof item === 'string' || typeof item === 'number') return item
	return item[props.valueKey]
}

const isSelected = (item) => {
	return getValue(item) === props.value
}

const onSelect = (item) => {
	emit('select', item)
	emit('update:modelValue', false)
}

const onClose = () => {
	emit('update:modelValue', false)
}
</script>

<style lang="scss" scoped>
.center-select-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	backdrop-filter: blur(2px);
}

.center-select-container {
	width: 600rpx;
	background: #ffffff;
	border-radius: 32rpx;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	max-height: 70vh;
	animation: popIn 0.25s ease-out;
}

@keyframes popIn {
	from { transform: scale(0.8); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

.select-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx 40rpx;
	border-bottom: 2rpx solid #f2f2f2;
	
	.select-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
}

/* 原生 CSS 关闭按钮 X @Author: Antigravity */
.close-btn {
	width: 40rpx;
	height: 40rpx;
	position: relative;
	.line {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 30rpx;
		height: 4rpx;
		background: #999;
		border-radius: 4rpx;
	}
	.line1 { transform: translate(-50%, -50%) rotate(45deg); }
	.line2 { transform: translate(-50%, -50%) rotate(-45deg); }
}

.select-content {
	flex: 1;
	padding: 10rpx 0;
}

.select-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx 40rpx;
	min-height: 100rpx;
	box-sizing: border-box;
	
	&:active { background: #f7f8fa; }
	
	&.active {
		.item-label { color: #ff9500; font-weight: bold; }
	}
	
	.item-label { font-size: 30rpx; color: #444; }
}

/* 原生 CSS 对勾 @Author: Antigravity */
.checkmark {
	width: 12rpx;
	height: 24rpx;
	border-right: 4rpx solid #ff9500;
	border-bottom: 4rpx solid #ff9500;
	transform: rotate(45deg);
	margin-right: 10rpx;
}

.empty-tip {
	padding: 60rpx 0;
	text-align: center;
	color: #999;
	font-size: 26rpx;
}
</style>