CommunityApp/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="http://139.9.103.171:1888/img/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:14upx 14upx 0upx 0upx;
  }
  
  .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 30upx;
      min-height: 90upx;
      font-size: 28upx;
      .title {
        width: 100%;
        font-size:30upx;
      }
      .title-center {
        text-align: center;
      }
      .close {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        padding: 30upx;
        width: 22upx;
        height: 22upx;
      }
    }
    .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>