muzhiyu-ui 1.0.0

package/components/muzhiyu/mu-picker/mu-picker.vue

@@ -0,0 +1,297 @@
+<template>
+	<view v-if="visible" class="mu-picker" :class="[panelShow && 'mu-picker--open']">
+		<!-- 遮罩层 -->
+		<view class="mu-picker__mask" @tap="handleClose"></view>
+
+		<!-- 底部面板 Panel -->
+		<view class="mu-picker__panel" :class="[panelShow && 'mu-picker__panel--show']" @tap.stop>
+			<!-- 顶部工具栏 Toolbar -->
+			<view class="mu-picker__toolbar">
+				<view class="mu-picker__btn mu-picker__btn--cancel mu-touchable-flat" @tap="handleClose">
+					<text class="mu-picker__btn-text">取消</text>
+				</view>
+				<text class="mu-picker__title">{{ title }}</text>
+				<view class="mu-picker__btn mu-picker__btn--confirm mu-touchable-flat" @tap="handleConfirm">
+					<text class="mu-picker__btn-text mu-picker__btn-text--confirm">确定</text>
+				</view>
+			</view>
+
+			<!-- 选单 View 区域 -->
+			<view class="mu-picker__body">
+				<picker-view
+					:value="pickerValue"
+					class="mu-picker__view"
+					indicator-style="height: 88rpx; border-top: 1rpx solid rgba(226, 232, 240, 0.8); border-bottom: 1rpx solid rgba(226, 232, 240, 0.8);"
+					@change="onPickerChange"
+				>
+					<picker-view-column v-for="(col, ci) in formattedColumns" :key="ci">
+						<view v-for="(item, ii) in col" :key="ii" class="mu-picker__col-item">
+							<text class="mu-picker__col-text" :class="{ 'mu-picker__col-text--active': pickerValue[ci] === ii }">
+								{{ getItemLabel(item) }}
+							</text>
+						</view>
+					</picker-view-column>
+				</picker-view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+	show: { type: Boolean, default: false },
+	modelValue: { type: Array, default: () => [] },
+	value: { type: Array, default: () => [] },             // 兼容旧属性
+	columns: { type: Array, default: () => [] },
+	title: { type: String, default: '请选择' },
+	labelKey: { type: String, default: 'label' },
+	valueKey: { type: String, default: 'value' },
+	childrenKey: { type: String, default: 'children' },
+	mode: { type: String, default: 'auto' }                // auto | single | multi | cascade
+})
+
+const emit = defineEmits(['confirm', 'change', 'close', 'cancel', 'update:show', 'update:modelValue', 'update:value'])
+
+const visible = ref(false)
+const panelShow = ref(false)
+const pickerValue = ref([])
+
+function getItemLabel(item) {
+	if (typeof item === 'object' && item !== null) {
+		return (item[props.labelKey] !== undefined ? item[props.labelKey] : (item.label !== undefined ? item.label : String(item)))
+	}
+	return String(item)
+}
+
+function getItemValue(item) {
+	if (typeof item === 'object' && item !== null) {
+		return (item[props.valueKey] !== undefined ? item[props.valueKey] : (item.value !== undefined ? item.value : item))
+	}
+	return item
+}
+
+// 格式化后的多列列数据
+const formattedColumns = computed(() => {
+	if (!props.columns || props.columns.length === 0) return []
+
+	// 1. 独立单列 / 简单一维数组 ['男', '女']
+	if (!Array.isArray(props.columns[0])) {
+		// 判断是否为级联数据 (包含 childrenKey)
+		if (props.columns[0] && typeof props.columns[0] === 'object' && props.columns[0][props.childrenKey]) {
+			// 级联模式 (Cascade)
+			const cols = []
+			let list = props.columns
+			let depth = 0
+			while (list && list.length && depth < 4) {
+				cols.push(list)
+				const selectedIdx = pickerValue.value[depth] || 0
+				const currentItem = list[selectedIdx] || list[0]
+				if (currentItem && currentItem[props.childrenKey]) {
+					list = currentItem[props.childrenKey]
+				} else {
+					break
+				}
+				depth++
+			}
+			return cols
+		}
+		// 普通单列
+		return [props.columns]
+	}
+
+	// 2. 多列二维数组 [['周一', '周二'], ['上午', '下午']]
+	return props.columns
+})
+
+function onPickerChange(e) {
+	const vals = e.detail.value || []
+	pickerValue.value = vals
+
+	// 安全防越界校准
+	const selectedItems = []
+	const selectedValues = []
+
+	for (let colIdx = 0; colIdx < formattedColumns.value.length; colIdx++) {
+		const col = formattedColumns.value[colIdx] || []
+		let idx = vals[colIdx] || 0
+		if (idx >= col.length) {
+			idx = 0
+			pickerValue.value[colIdx] = 0
+		}
+		const item = col[idx]
+		if (item != null) {
+			selectedItems.push(item)
+			selectedValues.push(getItemValue(item))
+		}
+	}
+
+	emit('change', { indexs: [...pickerValue.value], items: selectedItems, values: selectedValues })
+}
+
+function getSelectedResult() {
+	const items = pickerValue.value.map((idx, colIdx) => (formattedColumns.value[colIdx] && formattedColumns.value[colIdx][idx]) || (formattedColumns.value[colIdx] && formattedColumns.value[colIdx][0]))
+	const values = items.map(item => item != null ? getItemValue(item) : '')
+	return { indexs: [...pickerValue.value], items, values }
+}
+
+function handleConfirm() {
+	const result = getSelectedResult()
+	emit('confirm', result)
+	emit('update:modelValue', result.values)
+	emit('update:value', result.values)
+	handleClose()
+}
+
+function handleClose() {
+	panelShow.value = false
+	emit('update:show', false)
+	emit('cancel')
+	setTimeout(() => {
+		visible.value = false
+		emit('close')
+	}, 250)
+}
+
+watch(() => props.show, (val) => {
+	if (val) {
+		visible.value = true
+		const initVal = props.modelValue.length ? props.modelValue : props.value
+		pickerValue.value = initVal.length ? [...initVal] : [0, 0, 0]
+		setTimeout(() => {
+			panelShow.value = true
+		}, 30)
+	} else {
+		panelShow.value = false
+		setTimeout(() => {
+			visible.value = false
+		}, 250)
+	}
+}, { immediate: true })
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-picker {
+	position: fixed;
+	inset: 0;
+	z-index: $mu-z-popup;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+	box-sizing: border-box;
+
+	&__mask {
+		position: absolute;
+		inset: 0;
+		background: rgba(15, 23, 42, 0.45);
+		backdrop-filter: none !important;
+		opacity: 0;
+		transition: opacity 0.25s ease;
+	}
+
+	&--open &__mask {
+		opacity: 1;
+	}
+
+	&__panel {
+		position: relative;
+		background: #ffffff;
+		border-radius: 32rpx 32rpx 0 0;
+		transform: translateY(100%);
+		transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
+		z-index: 2;
+		overflow: hidden;
+
+		&--show {
+			transform: translateY(0);
+		}
+	}
+
+	&__toolbar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 28rpx 32rpx;
+		border-bottom: 1rpx solid rgba(226, 232, 240, 0.8);
+	}
+
+	&__btn {
+		padding: 8rpx 16rpx;
+
+		&-text {
+			font-size: 28rpx;
+			color: #64748B;
+			font-weight: 600;
+
+			&--confirm {
+				color: #171717;
+				font-weight: 700;
+			}
+		}
+	}
+
+	&__title {
+		font-size: 30rpx;
+		color: $mu-text-primary;
+		font-weight: 800;
+		letter-spacing: -0.5rpx;
+	}
+
+	&__body {
+		height: 480rpx;
+		padding: 0 16rpx;
+	}
+
+	&__view {
+		width: 100%;
+		height: 100%;
+	}
+
+	&__col-item {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 88rpx;
+	}
+
+	&__col-text {
+		font-size: 30rpx;
+		color: #94A3B8;
+		font-weight: 500;
+		transition: all 0.2s ease;
+
+		&--active {
+			color: $mu-text-primary;
+			font-weight: 700;
+			font-size: 32rpx;
+		}
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-picker {
+		&__mask { background: rgba(0, 0, 0, 0.65); }
+		&__panel { background: #14141E !important; }
+		&__toolbar { border-color: rgba(255, 255, 255, 0.08); }
+		&__title { color: $mu-dark-text-primary; }
+		&__btn-text { color: $mu-dark-text-secondary; &--confirm { color: #FFFFFF; } }
+		&__col-text { color: rgba(255, 255, 255, 0.4); &--active { color: $mu-dark-text-primary; } }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-picker {
+		&__mask { background: rgba(0, 0, 0, 0.65); }
+		&__panel { background: #14141E !important; }
+		&__toolbar { border-color: rgba(255, 255, 255, 0.08); }
+		&__title { color: $mu-dark-text-primary; }
+		&__btn-text { color: $mu-dark-text-secondary; &--confirm { color: #FFFFFF; } }
+		&__col-text { color: rgba(255, 255, 255, 0.4); &--active { color: $mu-dark-text-primary; } }
+	}
+}
+</style>

package/components/muzhiyu/mu-popup/mu-popup.vue

@@ -0,0 +1,297 @@
+<template>
+	<view v-if="visible" class="mu-popup" :class="[`mu-popup--${position}`]">
+		<!-- 背景遮罩层 -->
+		<view
+			v-if="mask"
+			class="mu-popup__mask"
+			:class="[animating && 'mu-popup__mask--show']"
+			:style="maskStyle"
+			@tap="handleMaskClick"
+		></view>
+
+		<!-- 弹窗主体内容 Panel -->
+		<view
+			class="mu-popup__content"
+			:class="[
+				contentClass,
+				transparent && 'mu-popup__content--transparent'
+			]"
+			:style="contentStyle"
+			@tap.stop
+		>
+			<!-- 内置右上角/左上角/正下方关闭按钮 -->
+			<view
+				v-if="closable"
+				class="mu-popup__close"
+				:class="[`mu-popup__close--${closePosition}`]"
+				@tap="handleClose"
+			>
+				<mu-icon name="close" :size="closeIconSize" :color="closeIconColor" />
+			</view>
+
+			<!-- 弹窗卡片内容插槽 -->
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+	show: { type: Boolean, default: false },
+	position: { type: String, default: 'center' },      // top | center | bottom | left | right
+	mask: { type: Boolean, default: true },             // 是否显示背景遮罩
+	maskClosable: { type: Boolean, default: true },     // 点击遮罩是否关闭
+	maskColor: { type: String, default: '' },
+	closable: { type: Boolean, default: false },        // 是否显示关闭按键
+	closePosition: { type: String, default: 'top-right' }, // top-right | top-left | bottom (活动海报弹窗下方圈圈按键)
+	transparent: { type: Boolean, default: false },    // 是否透明背景（无背景/无阴影，专用于图片/活动卡片）
+	background: { type: String, default: '' },
+	round: { type: Boolean, default: false },
+	width: { type: String, default: '' },
+	height: { type: String, default: '' },
+	zIndex: { type: [Number, String], default: 1000 },
+	duration: { type: Number, default: 300 }
+})
+
+const emit = defineEmits(['close', 'open', 'update:show'])
+
+const visible = ref(false)
+const animating = ref(false)
+
+const contentClass = computed(() => ({
+	'mu-popup__content--show': animating.value,
+	'mu-popup__content--round': props.round
+}))
+
+const closeIconColor = computed(() => {
+	if (props.closePosition === 'bottom') return '#FFFFFF'
+	return props.transparent ? '#FFFFFF' : '#64748B'
+})
+
+const closeIconSize = computed(() => {
+	if (props.closePosition === 'bottom') return 20
+	return 16
+})
+
+const maskStyle = computed(() => {
+	if (props.maskColor) return { background: props.maskColor }
+	return {}
+})
+
+const contentStyle = computed(() => {
+	const style = { zIndex: props.zIndex }
+	if (props.width) style.width = props.width
+	if (props.height) style.height = props.height
+
+	if (props.transparent) {
+		style.background = 'transparent'
+		style.boxShadow = 'none'
+		style.border = 'none'
+	} else if (props.background) {
+		style.background = props.background
+	}
+
+	return style
+})
+
+function handleMaskClick() {
+	if (props.maskClosable) handleClose()
+}
+
+function handleClose() {
+	animating.value = false
+	emit('update:show', false)
+	setTimeout(() => {
+		visible.value = false
+		emit('close')
+	}, props.duration)
+}
+
+watch(() => props.show, (val) => {
+	if (val) {
+		visible.value = true
+		setTimeout(() => {
+			animating.value = true
+			emit('open')
+		}, 30)
+	} else {
+		animating.value = false
+		setTimeout(() => {
+			visible.value = false
+			emit('close')
+		}, props.duration)
+	}
+}, { immediate: true })
+
+defineExpose({ close: handleClose, open: () => { visible.value = true } })
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-popup {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	z-index: $mu-z-popup;
+	display: flex;
+	pointer-events: none;
+
+	&--bottom { align-items: flex-end; justify-content: center; }
+	&--top { align-items: flex-start; justify-content: center; }
+	&--left { align-items: stretch; justify-content: flex-start; }
+	&--right { align-items: stretch; justify-content: flex-end; }
+	&--center { align-items: center; justify-content: center; }
+
+	&__mask {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		background: rgba(15, 23, 42, 0.55);
+		backdrop-filter: blur(12px);
+		opacity: 0;
+		transition: opacity 0.3s ease;
+		pointer-events: auto;
+
+		&--show {
+			opacity: 1;
+		}
+	}
+
+	&__content {
+		position: relative;
+		background: #ffffff;
+		pointer-events: auto;
+		transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
+		max-height: 100vh;
+		max-width: 100vw;
+		box-shadow: 0 24rpx 60rpx -12rpx rgba(15, 23, 42, 0.25);
+		box-sizing: border-box;
+
+		&--round {
+			border-radius: 36rpx;
+		}
+
+		&--transparent {
+			background: transparent !important;
+			box-shadow: none !important;
+			border: none !important;
+		}
+	}
+
+	&--bottom .mu-popup__content {
+		width: 100%;
+		transform: translateY(100%);
+		border-radius: 36rpx 36rpx 0 0;
+		&.mu-popup__content--show { transform: translateY(0); }
+	}
+
+	&--top .mu-popup__content {
+		width: 100%;
+		transform: translateY(-100%);
+		border-radius: 0 0 36rpx 36rpx;
+		&.mu-popup__content--show { transform: translateY(0); }
+	}
+
+	&--left .mu-popup__content {
+		height: 100%;
+		transform: translateX(-100%);
+		&.mu-popup__content--show { transform: translateX(0); }
+	}
+
+	&--right .mu-popup__content {
+		height: 100%;
+		transform: translateX(100%);
+		&.mu-popup__content--show { transform: translateX(0); }
+	}
+
+	&--center .mu-popup__content {
+		opacity: 0;
+		transform: scale(0.85);
+		border-radius: 36rpx;
+		&.mu-popup__content--show { opacity: 1; transform: scale(1); }
+	}
+
+	/* 关闭按钮定位 */
+	&__close {
+		position: absolute;
+		z-index: 20;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		transition: transform 0.2s ease;
+
+		&:active {
+			transform: scale(0.88);
+		}
+
+		&--top-right {
+			top: 24rpx;
+			right: 24rpx;
+			width: 48rpx;
+			height: 48rpx;
+			border-radius: 50%;
+			background: rgba(148, 163, 184, 0.15);
+		}
+
+		&--top-left {
+			top: 24rpx;
+			left: 24rpx;
+			width: 48rpx;
+			height: 48rpx;
+			border-radius: 50%;
+			background: rgba(148, 163, 184, 0.15);
+		}
+
+		/* 活动海报弹窗专用的下方挂载圆形关闭按钮 */
+		&--bottom {
+			bottom: -100rpx;
+			left: 50%;
+			transform: translateX(-50%);
+			width: 72rpx;
+			height: 72rpx;
+			border-radius: 50%;
+			background: rgba(255, 255, 255, 0.2);
+			border: 2rpx solid rgba(255, 255, 255, 0.6);
+			backdrop-filter: blur(10px);
+
+			&:active {
+				transform: translateX(-50%) scale(0.88);
+			}
+		}
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-popup {
+		&__content {
+			background: $mu-dark-bg-base;
+			box-shadow: 0 32rpx 64rpx rgba(0, 0, 0, 0.6);
+		}
+		&__close--top-right, &__close--top-left {
+			background: rgba(255, 255, 255, 0.12);
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-popup {
+		&__content {
+			background: $mu-dark-bg-base;
+			box-shadow: 0 32rpx 64rpx rgba(0, 0, 0, 0.6);
+		}
+		&__close--top-right, &__close--top-left {
+			background: rgba(255, 255, 255, 0.12);
+		}
+	}
+}
+</style>