|
|
|
@ -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,7 +48,23 @@ |
|
|
|
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:{ |
|
|
|
popurl(){ |
|
|
|
@ -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> |
453530270@qq.com
2 years ago