453530270@qq.com
2 years ago
2 changed files with 285 additions and 2 deletions
@ -0,0 +1,274 @@ |
|||
<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></protocol> |
|||
</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' |
|||
|
|||
export default { |
|||
components: { |
|||
privacy, |
|||
protocol |
|||
}, |
|||
|
|||
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: 14%; |
|||
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> |
|||
Loading…
Reference in new issue