book-hi/components/common-dialog.vue

<template>
    <u-popup v-model="showPopup" @close="closePopup" mode="center" border-radius="20" :width="width">
        <view class="dialog-content" :style="customStyle">
            <image v-if="bgImage" :src="bgImage" class="dialog-bg-image" mode="scaleToFill"></image>
            
            <!-- 标题 -->
            <view v-if="title" class="dialog-title">{{ title }}</view>

            <!-- 内容插槽 -->
            <view class="dialog-body">
                <slot></slot>
            </view>

            <!-- 按钮区域 -->
            <view class="dialog-footer" :class="{ 'single-btn': !showCancel }" v-if="showFooter" width="90%">
                <button v-if="showCancel" class="cancel-btn" @click="handleCancel">{{ cancelText }}</button>
                <button class="confirm-btn" @click="handleConfirm">{{ confirmText }}</button>
            </view>
        </view>
    </u-popup>
</template>

<script>
export default {
    props: {
        // 弹窗宽度
        width: {
            type: String,
            default: '580rpx'
        },
        // 弹窗标题
        title: {
            type: String,
            default: '温馨提示'
        },
        // 是否显示取消按钮
        showCancel: {
            type: Boolean,
            default: true
        },
        // 确认按钮文字
        confirmText: {
            type: String,
            default: '确定'
        },
        // 取消按钮文字
        cancelText: {
            type: String,
            default: '取消'
        },
        // 是否显示底部按钮
        showFooter: {
            type: Boolean,
            default: true
        },
        // 自定义弹窗样式
        customStyle: {
            type: Object,
            default: () => ({})
        },
        // 背景图片
        bgImage: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            showPopup: false
        }
    },
    methods: {
        openPopup() {
            this.showPopup = true
        },
        closePopup() {
            this.showPopup = false
        },
        handleConfirm() {
            this.$emit('confirm')
            this.closePopup()
        },
        handleCancel() {
            this.$emit('cancel')
            this.closePopup()
        }
    }
}
</script>

<style lang="scss">
.dialog-content {
    background: #FFFFFF;
    border-radius: 20rpx;
    overflow: hidden;
    position: relative;

    .dialog-bg-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .dialog-title {
        font-size: 32rpx;
        color: #333333;
        text-align: center;
        padding: 30rpx;
        font-family: PingFang SC;
        font-weight: bold;
        position: relative;
        z-index: 1;
    }

    .dialog-body {
        padding: 0 40rpx;
        text-align: center;
        line-height: 48rpx;
        position: relative;
        z-index: 1;
    }

    .dialog-footer {
        display: flex;
        gap: 30rpx;
        padding: 30rpx;
        padding-bottom: 40rpx;
        position: relative;
        z-index: 1;

        button {
            flex: 1;
            height: 88rpx;
            line-height: 88rpx;
            font-size: 32rpx;
            border: none;
            margin: 0;

            &::after {
                border: none;
            }

            &.cancel-btn {
                background-color: #F5F5F5;
                color: #333333;
            }

            &.confirm-btn {
                background-color: #38C148;
                color: #FFFFFF;
            }
        }

        &.single-btn {
            display: flex;
            justify-content: center;

            .confirm-btn {
                flex: 1;
                max-width: 280rpx;
            }
        }
    }
}
</style>