why_in_h5/pages/login/components/WhPopup.vue

<template>
	<view class="whpopup"catchtouchmove="true" :class="getValue()? 'show' : 'none'"
	 @click.stop="stop" @touchmove.stop.prevent="moveHandle">
		<view class="mask"></view>
		<view class="layer">
			<view class="specification-wrapper">
				<scroll-view class="specification-wrapper-content" scroll-y="true" >
					<!-- 隐私政策 -->
					<privacy v-if="mkey=='private'"></privacy>
					<!-- 协议 -->
					<protocol v-else-if="mkey=='prototal'"></protocol>
          <!--交易-->
					<trading v-else-if="mkey=='trading'"></trading>
          <!--文化-->
					<commission v-else-if="mkey=='commission'"></commission>
          <!--临时-->
					<business v-else-if="mkey=='business'"></business>
				</scroll-view>

				<!-- 关闭按钮 -->
				<view class="close" @click="close('close')" v-if="showClose != false">
				  <image class="close-item" :src="closeImage"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
  
  import privacy from '@/pages/help/private'
  import protocol from '@/pages/help/prototal'
  import trading from '@/pages/help/trading'
  import commission from '@/pages/help/commission'
  import business from '@/pages/help/business'

  export default {
    components: {
	  privacy,
	  protocol,
    trading,
    commission,
    business,
    },

    props: {
      // true 组件显示 false 组件隐藏
      value: {
        Type: Boolean,
        default: false
      },
	  popurl:{
		  Type:String,
		  default:""
	  },
	  // 关键词
	  mkey:{
		 Type:String,
		 default: ""
	  },
	  // 是否显示右上角关闭按钮
	  showClose: {
	    Type: Boolean,
	    default: true
	  },
	  // 关闭的x 图像
	  closeImage: {
	    Type: String,
	    default: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAEyUlEQVR42sSZeWwNURTGp4OqtBo7sSXELragdkpQsRRJ1Zr4hyJiJ9YgxNIg1qANiT+E1i5IY0kVVWtQEbuEKLFGUSH27/ANN5PXmTvzupzkl/tm8t6b7517lnvvC0lKSjJ8WmnQAUSDFqABqALKgl8gD7wE90E2SAeXwFf1SxISErQeVtKHwCgwFsSDSIf3hYFKoCkYDBaDdyAViHdueHmoF6FtwDLQ23b/E7gM7oIcejIERIDaoBFoC8qA8mA8SQNz6W1XC9GY+nCQCCYAk/c+gF0gBZwH312+IxR0BCPBUIaH2A+wHsxHCHxx+gLT5QGN6a2JfG8uvVCDws9oiDQYlxkMGfHyQvARlADTwcXk5OT6foV2kS8ATXidymlcyen1a/Jjl9IJh3hPkjELYqO8Cu0KjjNZvtETw5jFBWXPmGSTGQKSeOn5iQ0kVLL0CINfPNcPbDMKyRCbGzEMBJ+ZD8cChYFdqGTqfsWT8otPGoVsEHsMwxDFs3shNsxJ6BrQ0Po8OGUUkVHsNCVml+cntB1jUWwn2GEUsTEMrASbDK+2CCQ0kYX6nfLLisMmKqUr0S60M+jG10vAm+JSCa8+x7CKlzHwaktV6DiObzUzPJIxFO1BQ12wGtTReO9GetVgY/kjNJzZbcWmTjHfxw51AsRqvL8eOAtmsJuFu3g1l+1ZLB5eDTVZ3K0P7tL0TkWOpSg61kVkBtuuNRthGs+wtJST5aQI7cEbkkRXNYVKgX6kIdYuUhYzMQwxN8tiExCLFqHNeSF9/aem0BzGp5PYQCJ7c/Gsk1RfuSD6U1dNpcDf9ZigTmKbMRZ9iVTsHscGJluW2FMf1SSQWGnBmaB6kCJVTVVNJZE++Cx9drEllS1KMCINpURFmEbBWA63Fz9s95cGIdJgp/zXmT4pZcOvSUzuZttTbblmnc3PIjjmidDXvKgdhMh0JdbzuCjWrbNOVovjS5P7bkPJ/mBESkz2BO0166ybNeJ431S2q+01NntuIq3E0amzjiZtk9tssWyTDzO4525bACK9NAUn68TtkNhpEXpOSagRml+S6iLSSeweHv242Qhl13rRyvoDvDlKyTQny/ZQJ+1iH7vVbEx7OR5UiKVIO7VicgvHCtwrudloMIV7/0uadVYW57O4Wvvi8v4pymlKkrpwvsDeLLZAY2pkwbAB3PSQfC+4cH7l4k1ZH8zkZRq8ecO+Z5rN40JJqnXFuGfaxPCTLjcn0OZOpnArXw8HY4paIbw5CcMgXq6HN2/mt6+XGLrN15tBryIUGavMpCTrfKcDCKkAceA9S8nhAOehhSUyhXpkBxxnP4YM1InugP7cBkjBPcqVUWFYCEROxXiQz5JlXV+IfKh7mpfJac+lZ6V87QXVClBkTc7YWsWTPSDyitfzUTlJlj8TbvE6jluDOdwZ+jX57GLO3ADeuyZrDYi86vV81FD2UVGsmT+5Zl0BnkhoseOEaogL46pqO4v/IqUEyalIR4h85BgjHv6+aUWRMbb7EstX6O0cpT1Gco0ry8fWygLDMjmDnQeBt3Qe7uVfkeugDwVLcsVzGsuwLXbV+I63XNAkG5r/hvgRqgqWs6pJPKrsbvz/Q6yyun0w/h6lP+BnzrCpfPMT2L8FGAA7k1GZ/vnaqAAAAABJRU5ErkJggg=="
	  },
	  // 点击遮罩是否关闭组件 true 关闭 false 不关闭 默认true
	  maskCloseAble: {
	    Type: Boolean,
	    default: true
	  },
    },

    data() {
      return {
        // goodsInfo: {}
      }
    },


    methods: {
		// 用于阻止冒泡
		stop() {},
		moveHandle() {
		  //禁止父元素滑动
		},
		getValue() {
		  // #ifndef VUE3
		  return this.value;
		  // #endif
		
		  // #ifdef VUE3
		  return this.modelValue;
		  // #endif
		},
		// 监听 - 弹出层收起
		close(s) {
		  let that = this;
		  if (new Date().getTime() - that.openTime < 400) {
		    return false;
		  }
		  if (s == "mask") {
		    if (that.maskCloseAble !== false) {
		      that.$emit("input", false);
		      that.$emit("close", "mask");
		      that.$emit("update:modelValue", false);
		    }
		  } else {
		    that.$emit("input", false);
		    that.$emit("close", "close");
		    that.$emit("update:modelValue", false);
		  }
		},
    }
  }
</script>

<style lang="scss" scoped>
/*  弹出层 */
.whpopup {
	position: fixed;
	left: var(--window-left);
	right: var(--window-right);
	bottom: var(--window-bottom);
	top: 10%;
	// height: 60%;
	z-index: 21;
	overflow: hidden;
	
	&.show {
	  display: block;
	
	  .mask {
	    animation: showPopup 0.2s linear both;
	  }
	
	  .layer {
	    animation: showLayer 0.2s linear both;
	    // bottom: var(--window-bottom);
	  }
	}
	
	&.hide {
	  .mask {
	    animation: hidePopup 0.2s linear both;
	  }
	
	  .layer {
	    animation: hideLayer 0.2s linear both;
	  }
	}
	
	&.none {
	  display: none;
	}
	
	.mask {
	  position: fixed;
	  left: var(--window-left);
	  right: var(--window-right);
	  top: 0;
	  height: 100%;
	  z-index: 1;
	  background-color: rgba(0, 0, 0, 0.65);
	}
	
	.layer {
	  display: flex;
	  flex-direction: column;
	  position: absolute;
	  left: 5%;
	  right: 5%;
	  bottom: 20%;
	  z-index: 99;
	  border-radius: 10rpx 10rpx 0 0;
	  background-color: #fff;
	  // 设置ios刘海屏底部横线安全区域
	  padding-bottom: constant(safe-area-inset-bottom);
	  padding-bottom: env(safe-area-inset-bottom);
	  
	  .specification-wrapper {
	    width: 100%;
	    padding: 30rpx 25rpx;
	    box-sizing: border-box;
	  
	    .specification-wrapper-content 
		{
	      width: 100%;
	      max-height: 900rpx;
	      min-height: 400rpx;
	  
	      &::-webkit-scrollbar {
	        /*隐藏滚轮*/
	        display: none;
	      }
	  
	      .specification-header {
	        width: 100%;
	        display: flex;
	        flex-direction: row;
	        position: relative;
	        margin-bottom: 40rpx;

	      }
	  
	      .specification-content {
	        font-weight: 500;
	  
	        .specification-item {
	          margin-bottom: 40rpx;
	  
	          &:last-child {
	            margin-bottom: 0;
	          }
	        }
	      }
	    }
	  
	    .close {
	      position: absolute;
	      top: -30rpx;
	      right: 25rpx;
	      width: 60rpx;
	      height: 60rpx;
	      text-align: center;
	      line-height: 60rpx;
		  background-color: #fff;
		  border-radius: 50%;
	  
	      .close-item {
			margin: 10rpx;
	        width: 40rpx;
	        height: 40rpx;
	      }
	    }
	  }
	  

	}
	
	@keyframes showPopup {
	  0% {
	    opacity: 0;
	  }
	
	  100% {
	    opacity: 1;
	  }
	}
	
	@keyframes hidePopup {
	  0% {
	    opacity: 1;
	  }
	
	  100% {
	    opacity: 0;
	  }
	}
	
	@keyframes showLayer {
	  0% {
	    transform: translateY(120%);
	  }
	
	  100% {
	    transform: translateY(0%);
	  }
	}
	
	@keyframes hideLayer {
	  0% {
	    transform: translateY(0);
	  }
	
	  100% {
	    transform: translateY(120%);
	  }
	}
	
}
</style>