ykz-wx/pages/feedback/PickertType.vue

<template>
    <view class="picker-address">
        <uni-popup ref="popRef">
            <view class="picker-address-content">
                <view class="picker-address-top">
                    <view class="picker-address-action cancel" @click="onCancel">取消</view>
                    <view class="picker-address-action confirm" @click="onConfirm">确定</view>
                </view>
                <picker-view indicator-class='is-selected' :value="[selectedFeedbackIndex]" @change="onFeedbackChange">
                    <picker-view-column>
                        <view class="addr-item" :class="selectedFeedbackIndex == index ? 'selected' : ''"
                            v-for="(item, index) in feedbackList" :key="index">
                            {{ item.name }}
                        </view>
                    </picker-view-column>
                </picker-view>
            </view>
        </uni-popup>
    </view>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, watch } from 'vue';

const emits = defineEmits(['change']);
const props = defineProps({
    feedbackArray: {
        type: Array,
        default: () => []
    },
    feedbackType: {
        type: [String, Number],
        default: ""
    }
});

watch(() => props.feedbackType, () => {
    if (props.feedbackType) {
        updateFeedbackIndex(props.feedbackType);
    }
});

const popRef = ref();
const feedbackList = ref([]); // 反馈列表
const selectedFeedbackIndex = ref(0); // 选中的反馈索引

const selectedFeedback = computed(() => {
    return feedbackList.value[selectedFeedbackIndex.value] || { name: '反馈', value: null };
});

const onCancel = () => {
    popRef.value.close();
};

const onConfirm = () => {
    emits('change', selectedFeedback.value);
    onCancel();
};

const onFeedbackChange = (e) => {
    selectedFeedbackIndex.value = e.detail.value[0];
};

const openPop = () => {
	feedbackList.value = props.feedbackArray; 
    popRef.value.open('bottom');
};

const updateFeedbackIndex = (feedbackType) => {
    const index = feedbackList.value.findIndex(feedback => feedback.value === feedbackType);
    selectedFeedbackIndex.value = index !== -1 ? index : 0;
};

onMounted(() => {
    if (props.feedbackType) {
        updateFeedbackIndex(props.feedbackType);
    }
});

defineExpose({ openPop });
</script>


<style lang="scss" scoped>
.picker-address {
    .picker-address-content {
        background-color: #fff;
        border-radius: 16rpx 16rpx 0 0;

        .picker-address-top {
            height: 96rpx;
            @include flex-between;
            border-bottom: 1px solid $uni-border-color;

            .picker-address-action {
                font-size: $uni-font-size-xl;
                line-height: $uni-line-height-xl;
                @include flex;
                padding: 0 32rpx;

                &.cancel {
                    color: $uni-text-color !important;
                }

                &.confirm {
                    color: $uni-color-primary;
                }
            }
        }

        .addr-item {
            height: 96rpx !important;
            font-size: $uni-font-size-xl;
            line-height: $uni-line-height-xl;
            @include flex-center;

            &.selected {
                font-size: $uni-font-size-xxl;
                line-height: $uni-line-height-xxl;
            }
        }
    }

    :deep(uni-picker-view) {
        margin-top: 24rpx;
    }

    :deep(.is-selected) {
        height: 96rpx !important;
        color: $uni-text-color;
        font-size: $uni-font-size-xxl;
        line-height: $uni-line-height-xxl;
    }

    picker-view {
        width: 100%;
        height: 600rpx;
        padding: 0 32rpx;
        box-sizing: border-box;
        overflow: hidden;
    }
}
</style>