forestry-wx/src/components/ut-action-sheet/ut-action-sheet.vue

<template>
    <template v-if="mode === 'picker'">
        <picker :range="options" range-key="name" @change="selectChange" :disabled="false">
            <slot></slot>
        </picker>
    </template>
    <template v-else-if="mode === 'custom'">
        <view @click="showModel = true" class="flex1">
            <slot></slot>
        </view>
        <up-popup v-model:show="showModel" mode="center" round="30rpx" closeable @close="showModel = false">
            <view class="w-700">
                <view class="pd-24">
                    <view class="f-s-32 c-#333 f-w-500">{{ title }}</view>
                </view>
                <scroll-view scroll-y style="max-height: 70vh">
                    <view class="pd3-10-24-24">
                        <ut-row gap="16rpx">
                            <template v-for="(item, index) in options" :key="index">
                                <ut-col :span="item.span">
                                    <view @click="clickCol(item)" class="ut-custom-item-sheet p-rtv" :class="{ active: checkeds[item.value] }"
                                        >{{ item?.name }}
                                        <image v-if="checkeds[item.value]" class="w-40 h-40 checked-icon" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-lm/price/checked1.png" mode="widthFix" />
                                    </view>
                                </ut-col>
                            </template>
                        </ut-row>
                    </view>
                </scroll-view>
            </view>
        </up-popup>
    </template>
</template>
<script setup lang="ts">
import { ref, watch, computed } from 'vue';

const props = defineProps({
    modelValue: {
        type: Array,
        default: () => [],
    },

    title: {
        type: String,
        default: '系统提示',
    },
    showTitle: {
        type: Boolean,
        default: true,
    },
    tabs: {
        type: Array,
        default: () => [],
    },
    mode: {
        type: String,
        default: 'picker', // 原生 picker 模式 或自定义弹窗模式 custom
    },
    // 是否多选
    multiple: {
        type: Boolean,
        default: false, // 只有自定义弹窗模式下生效
    },
});
const options = computed(() => {
    return props.tabs.map((item: any) => {
        return {
            name: item.label,
            value: item.value,
            span: item.elTagClass || 10,
        };
    });
});
const showModel = ref(false);
const emit = defineEmits(['close', 'confirm', 'open', 'update:show', 'update:modelValue', 'change']);
const checkeds = ref<any>({});
const close = () => {
    showModel.value = false;
    // 如果有初始值，恢复初始值
    checkeds.value = { ...initialCheckeds.value };
    emit('update:show', false);
    emit('close');
};
const clickCol = (item: any) => {
    // 判断是单选还是多选
    if (props.multiple) {
        // 多选
        if (checkeds.value[item.value]) {
            // 取消选择
            delete checkeds.value[item.value];
        } else {
            // 选择
            checkeds.value[item.value] = true;
        }
    } else {
        // 单选
        checkeds.value = {
            [item.value]: true,
        };
        emit('update:modelValue', item.value);
        emit('change', item.value);
        close();
    }
};
// 未选择之前的
const initialCheckeds = ref({});
const selectChange = (item: any) => {
    const selectedValues = options.value[item.detail.value].value;
    emit('update:modelValue', selectedValues);
    emit('change', selectedValues);
    close();
};
watch(
    () => props.modelValue,
    (newVal: any) => {
        // 初始化已选择项
        let selected: any = {};
        if (props.multiple && Array.isArray(newVal)) {
            newVal.forEach((val: any) => {
                selected[val] = true;
            });
        } else if (!props.multiple && newVal != null) {
            selected = {
                [newVal as string]: true,
            };
        }
        checkeds.value = selected;
    },
    { immediate: true },
);
onMounted(() => {
    // 初始化已选择项
    console.log(props.tabs);
});
</script>
<style lang="scss" scoped>
.ut-custom-item-sheet {
    padding: 18rpx 6rpx;
    border: 1rpx solid #f7f7f7;
    background-color: #f7f7f7;
    border-radius: 10rpx;
    text-align: center;
    font-size: 30rpx;
    color: #333;

    &.active {
        border-color: #37a954;
        background-color: #e6f4f0;
        color: #37a954;
    }
}
.checked-icon {
    position: absolute;
    right: 0;
    bottom: 0;
}
</style>