client-app/components/hc-popup/index.vue

<template>
    <uni-popup background-color="#fff" ref="popupRef" type="bottom">
        <view class="h-88vh">
            <view class="hc-popup-nav-bar">
                <text class="cancel" @click="cancelClick">取消</text>
                <text class="title" v-if="popupTitle">{{popupTitle}}</text>
                <text class="sure" @click="confirmClick">确定</text>
            </view>
            <view class="hc-popup-content" :style="`background: ${bg}`">
                <scroll-view class="h-full" :scroll-x="scrollX" :scroll-y="scrollY" v-if="isScroll">
                    <slot/>
                </scroll-view>
                <template v-else>
                    <slot/>
                </template>
            </view>
        </view>
    </uni-popup>
</template>

<script setup>
import { ref, watch } from "vue";

//参数
const props = defineProps({
    scroll: {
        type: Boolean,
        default: true,
    },
    scrollX: {
        type: Boolean,
        default: true,
    },
    scrollY: {
        type: Boolean,
        default: true,
    },
    title: {
        type: String,
        default: '',
    },
    bg: {
        type: String,
        default: 'white',
    },
})

const popupRef = ref(null)
const isScroll = ref(props.scroll)
const popupTitle = ref(props.title)

//监听
watch(() => [
    props.title
], ([title]) => {
    popupTitle.value = title
})

const emit = defineEmits(['cancel', 'confirm'])

//取消
const cancelClick = () => {
    emit('cancel')
    popupRef.value?.close()
}

//确认
const confirmClick = () => {
    emit('confirm')
}

//设置标题
const setTitle = (val) => {
    popupTitle.value = val
}

//导出
defineExpose({
    open: () => {
        popupRef.value?.open()
    },
    close: () => {
        popupRef.value?.close()
    },
    setTitle
})
</script>

<style lang="scss" scoped>
.hc-popup-nav-bar {
    position: relative;
    padding: 0 28rpx;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90rpx;
}
.hc-popup-content {
    position: relative;
    height: calc(100% - 90rpx);
}
</style>