yinchuan-community-all/mini-program/smart-city-yinchuan-wx/comps/foot_dialog.vue

<template>
    <!-- 人数拼座 -->
    <view class="dialog-wrap" :style="'z-index:'+zIndex">
        <!-- 遮罩 -->
        <view class="mask" :class="{ show: visible }" @tap="tapDialogShow"></view>

        <view class="content-mn"
              :class="{
        bottom:direction=='bottom',
        top:direction=='top', 
        right:direction=='right',
        left:direction=='left',
        center:direction=='center',
        show: visible, 
        isRadius:isRadius
      }"
              :style="{'background-color':conf.mainBgColor,'padding-bottom':safeAreaBottom+'px'}">
            <view v-if="isTitle" class="head-wrap">
                <view :class="'title ' + titleClass">{{ title }}</view>
                <image
                        v-if="isCloseBtn"
                        @tap="tapDialogShow"
                        class="close"
                        src="https://szsq.nxzhsq.cn/community/miniofile/image/close.png"
                        mode="widthFix"
                ></image>
            </view>
            <view class="main-wrap">
                <slot name="main"></slot>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        props: {
            direction: {
                type: String,
                default: 'bottom' // top
            },
            isTitle: {
                type: Boolean,
                default: true
            },
            isCloseBtn: {
                type: Boolean,
                default: true
            },
            isRadius: {
                type: Boolean,
                default: true
            },
            titleClass: {
                type: String,
                default: ""
            },
            title: {
                type: String,
                default: "标题"
            },
            visible: {
                type: Boolean,
                default: false
            },
            zIndex: {
                type: [Number, String],
                default: 100
            },
            config: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        watch: {
            config: {
                deep: true,
                handler: (n, o) => {
                    console.log(79, n)
                    if (n) {
                        this.conf = Object.assign({}, n)
                    }
                }
            }
        },
        data() {
            return {
                conf: {}
            }
        },
        methods: {
            tapDialogShow() {
                this.$emit("update:visible", false);
                this.$emit("close")
            }
        },
        created() {
            console.log(99, 'safeAreaBottom', this.safeAreaBottom)
            console.log(93, this.conf, this.config)
            this.conf = Object.assign({}, this.config)
        },
    };
</script>
<style lang="scss">
    // 弹窗 选择人数拼车
    .dialog-wrap {
        position: relative;
        width: 100%;
        z-index: 100;

        .mask.show {
            visibility: visible;
            opacity: 1;
        }

        .mask {
            position: fixed;
            top: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            visibility: hidden;
            opacity: 0;
        }

        .isRadius {
            border-radius: 14 upx 14 upx 0 upx 0 upx;
        }

        .content-mn {
            position: fixed;
            left: 0;
            width: 100%;
            background-color: #fff;
            // padding-bottom: 1upx;
            transition: all 0.3s ease;
            z-index: 102;

            .head-wrap {
                position: relative;
                display: flex;
                align-items: center;
                padding: 0 30 upx;
                min-height: 90 upx;
                font-size: 28 upx;

                .title {
                    width: 100%;
                    font-size: 30 upx;
                }

                .title-center {
                    text-align: center;
                }

                .close {
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    padding: 30 upx;
                    width: 22 upx;
                    height: 22 upx;
                }
            }

            .main-wrap {
                width: 100%;
            }
        }

        .center {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.5);
            opacity: 0;
            visibility: hidden;
        }

        .top {
            top: 0;
            transform: translateY(-100%);
        }

        .right {
            top: 0;
            right: 0;
            transform: translateX(100%);
        }

        .bottom {
            bottom: 0;
            transform: translateY(100%);
        }

        .left {
            top: 0;
            left: 0;
            transform: translateX(-100%);
        }

        .center.show {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
            visibility: visible;
        }

        .top.show,
        .bottom.show {
            transform: translateY(0);
        }

        .right.show,
        .left.show {
            transform: translateX(0);
        }
    }
</style>