调整弹框组件

components/popup/popup.vue

@@ -1,7 +1,23 @@
 <template>
-	<view>
-		{{popurl}}
-		<web-view :src="popurl"></web-view>
+	<view class="popup" catchtouchmove="true" :class="getValue() && complete ? 'show' : 'none'"
+    @touchmove.stop.prevent="moveHandle" @click.stop="stop">
+		<!-- 背景底色 -->
+		<view class="mask" @click="close('mask')"></view>
+		<view class="layer attr-content">
+			<view class="specification-wrapper">
+				<scroll-view class="specification-wrapper-content" scroll-y="true">
+					<view>{{popurl}}隆福大厦哦哦浪费到到啦f佛发大水了佛</view>
+					
+					<web-view src="http://localhost:8080/#/pages/help/private"></web-view>
+				</scroll-view>
+			</view>
+		
+		
+		</view>
+		<!-- 关闭按钮 -->
+		<view class="close" @click="close('close')" v-if="showClose != false">
+		  <image class="close-item" :src="closeImage"></image>
+		</view>
 	</view>
 </template>
 
@@ -13,8 +29,17 @@
 		// 		popurl:''
 		// 	}
 		// },
-		emits:["open","close"],
+		emits: ["input",  "open", "close"],
 		props:{
+			// true 组件显示 false 组件隐藏
+			value: {
+			  Type: Boolean,
+			  default: false
+			},
+			modelValue: {
+			  Type: Boolean,
+			  default: false
+			},
 			// 需要打开的地址
 			popurl:{
 				Type:String,
@@ -23,6 +48,22 @@
 			isshow:{
 				Type:Boolean,
 				defult:false
+			},
+			// 是否显示右上角关闭按钮
+			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=="
+			},
+		},
+		created() {
+		  let that = this;
+		  if (that.getValue()) {
+		    that.open();
 		  }
 		},
 		watch:{
@@ -32,27 +73,201 @@
 			  return that.popurl
 		  }
 		},
-		// onLoad(e) {
-		// 	console.log(e);
-		// 	if(e){
-		// 		this.popurl =e
-		// 	}
-		// }
-		created(e) {
-			let that = this
-			that.open(e)
-			// console.log("popup",e)
-			//this.popurl =
-		},
 		mounted() {},
 		methods: {
 			open(e) {
 				console.log("zujian popup open",e)
+			},
+			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>
+<style lang="scss" scoped>
+/*  弹出层 */
+.popup {
+	position: fixed;
+	left: var(--window-left);
+	right: var(--window-right);
+	bottom: var(--window-bottom);
+	top: var(--window-top);
+	// 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: fixed;
+	  left: var(--window-left);
+	  right: var(--window-right);
+	  bottom: var(--window-bottom);
+	  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: 300rpx;
+	  
+	      &::-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: 50rpx;
+	      height: 50rpx;
+	      text-align: center;
+	      line-height: 50rpx;
+	  
+	      .close-item {
+	        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>

components/wh-popup/index.vue

@@ -48,14 +48,7 @@
                 </view>
               </view>
             </view>
-            <view class="number-box-view">
-              <view style="flex: 1;">数量</view>
-              <view style="flex: 4;text-align: right;">
-                <number-box v-model="selectNum" :min="minBuyNum || 1" :max="maxBuyNumCom" :step="stepBuyNum || 1"
-                  :step-strictly="stepStrictly" :positive-integer="true">
-                </number-box>
-              </view>
-            </view>
+
           </view>
         </scroll-view>
         <view class="close" @click="close('close')" v-if="showClose != false">

pages/reg/reg.vue

@@ -50,9 +50,9 @@
 	</view>
 	
 	<!-- 弹框 -->
-	<!-- <popup @open="openPop" :popurl="murl"></popup> -->
+	<popup></popup>
 	
-	<whpop></whpop>
+	<!-- <whpop></whpop> -->
 
   </view>
 </template>
@@ -61,13 +61,13 @@
   import store from '@/store'
   import * as LoginApi from '@/api/login'
   import * as Verify from '@/utils/verify'
-  // import Popup from '@/components/popup/popup'
+  import Popup from '@/components/popup/popup'
   import whpop from './components/WhPopup'
   
   export default {
     components: {
       // nothing
-	  // "popup":Popup
+	  "popup":Popup,
 	  whpop
     },