lcoco/components/en-utils/en-popup/en-popup.vue

<template>
  <view  @touchmove.stop.prevent="moveHandle">
    <uni-popup ref="popup"  @change="setTabBar" type="bottom" :mask-background-color="maskBackgroundColor">
      <view class="popup-box" v-show="showTop">
        <view class="popup-title" @click="close">
          <view class="popup-close">
            <image class="popup-close-img" src="/static/img/common/close.png" mode="widthFix" ></image>
          </view>
        </view>
        <slot name="popupInfo"></slot>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  name: "en-popup",
  components: {},
  props: {
    showTop:{
      type:Boolean,
      default:true
    },
    maskBackgroundColor:{
      default: 'rgba(0,0,0,0.4)'
    }
  },
  data() {
    return {
      popupShow:false
    }
  },
  watch: {},
  mounted() {

  },
  methods: {
    moveHandle() {
      return false
    },
    open(){
      this.$refs.popup.open('bottom')
    },
    setTabBar(e){
      if(e.show){
        this.popupShow = true;
        uni.hideTabBar()
      }else {
        this.popupShow = false;
        uni.showTabBar()
      }
    },
    close(){
      this.$refs.popup.close()
    }
  }
}
</script>

<style scoped lang="scss">
.popupShow {
  overflow: hidden;
  position: fixed;
}
.popup-box{
  background: #FFFFFF;
  border-radius: 30rpx 30rpx 0 0;
  box-shadow: 0px -8px 20px 0px rgba(0,0,0,0.04);
  padding: 42rpx 32rpx calc(16rxp + env(safe-area-inset-bottom));
  z-index: 999999;
  .popup-title{
    padding: 20rpx 0;
    width: 100%;
    .popup-close{
      width: 72rpx;
      margin: auto;
      border-radius: 30rpx;
      .popup-close-img {
        width: 72rpx;
      }
    }
  }
}

</style>