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">
          <image class="popup-close" src="@/static/img/pay/gb-p.png"></image>
        </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: 20rpx 20rpx 0 0;
  box-shadow: 0px -8px 20px 0px rgba(0,0,0,0.04);
  padding: 28rpx 32rpx 50rpx 32rpx;
  z-index: 100;
  .popup-title{
    padding: 20rpx;
    .popup-close{
      margin: 0 auto;
      width: 82rpx;
      height: 10rpx;
    }
  }
}

</style>