ZF sun
1bf8a4a9b2
1. 移除多处重复的@click和@tap事件，只保留必要的@tap 2. 修复scoped样式穿透语法，补全样式文件末尾换行 3. 统一调整隐私弹窗、搜索页等页面的样式写法
366 lines
8.5 KiB
Vue
366 lines
8.5 KiB
Vue
<template>
|
|
<view>
|
|
<view class="privacy-mask" v-if="showPop">
|
|
<view class="privacy-wrap">
|
|
<view class="privacy-title">{{ $lang('components.privacyPopup.title') }}</view>
|
|
<view class="privacy-desc">
|
|
{{ $lang('components.privacyPopup.descPrefix', { appName: appName }) }}
|
|
<text class="privacy-link" @tap="openPrivacyContract">{{ privacyContractName }}</text>
|
|
<!-- #ifdef QUICKAPP-WEBVIEW || H5 -->
|
|
<text class="privacy-link" @tap="openPrivacyService">{{ privacyServiceName }}</text>
|
|
<!-- #endif -->
|
|
{{ $lang('components.privacyPopup.descSuffix', { appName: appName }) }}
|
|
</view>
|
|
<view class="privacy-button-flex">
|
|
<button class="privacy-button-btn bg-disagree" @tap="handleDisagree">{{ $lang('components.privacyPopup.disagreeBtn') }}</button>
|
|
<!-- #ifdef QUICKAPP-WEBVIEW || MP-WEIXIN -->
|
|
<button id="agree-btn" class="privacy-button-btn bg-agree" open-type="agreePrivacyAuthorization"
|
|
@agreeprivacyauthorization="handleAgree">{{ $lang('components.privacyPopup.agreeBtn') }}</button>
|
|
<!-- #endif -->
|
|
<!-- #ifdef WEB || H5 -->
|
|
<button id="agree-btn" class="privacy-button-btn bg-agree" @tap="handleAgree">{{ $lang('components.privacyPopup.agreeBtn') }}</button>
|
|
<!-- #endif -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// #ifdef QUICKAPP-WEBVIEW
|
|
import has from '@system.has'
|
|
// #endif
|
|
|
|
const closeOtherPagePopUpHooks = new Set();
|
|
const privacyContractPage = '/pages_tool/agreement/contenr?type=0';
|
|
const privacyServicePage = '/pages_tool/agreement/contenr?type=1';
|
|
|
|
export default {
|
|
name: 'PrivacyPopup',
|
|
data() {
|
|
return {
|
|
agree: false,
|
|
showPop: false,
|
|
privacyAuthorization: null,
|
|
privacyResolves: new Set(),
|
|
privacyContractName: this.$lang('components.privacyPopup.defaultContractNameMp'),
|
|
appName: this.$lang('components.privacyPopup.defaultAppNameMp'),
|
|
// #ifdef WEB || H5
|
|
appName: this.$lang('components.privacyPopup.defaultAppNameH5'),
|
|
privacyContractName: this.$lang('components.privacyPopup.defaultContractNameH5'),
|
|
privacyServiceName: this.$lang('components.privacyPopup.defaultServiceNameH5'),
|
|
// #endif
|
|
}
|
|
},
|
|
mounted() {
|
|
this.listenPrivacySettingChange()
|
|
this.curPageShow()
|
|
this.proactive()
|
|
},
|
|
created() {
|
|
try {
|
|
// #ifdef MP-WEIXIN
|
|
wx.getPrivacySetting({
|
|
success: (res) => {
|
|
this.privacyContractName = res.privacyContractName
|
|
}
|
|
});
|
|
// #endif
|
|
|
|
// #ifdef QUICKAPP-WEBVIEW || H5
|
|
if (this.$util.isQuickApp() && typeof has != 'undefined' && has?.getPrivacySetting) {
|
|
has.getPrivacySetting({
|
|
success: (res) => {
|
|
if (res.privacyContractName) {
|
|
this.privacyContractName = res.privacyContractName
|
|
}
|
|
},
|
|
})
|
|
}
|
|
// #endif
|
|
} catch (e) {
|
|
console.error("=========低版本基础库==========", e)
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 统一弹窗 + 关闭其他页面的弹窗
|
|
*/
|
|
showPrivacyPopup() {
|
|
this.popUp()
|
|
this.closeOtherPagePopUp(this.disPopUp)
|
|
},
|
|
|
|
/**
|
|
* 根据是否需要授权决定弹窗或 emit agree
|
|
*/
|
|
checkAndShow(needAuthorization) {
|
|
if (uni.getStorageSync('skipPrivacyCheck')) {
|
|
uni.removeStorageSync('skipPrivacyCheck');
|
|
this.$emit('agree');
|
|
return;
|
|
}
|
|
|
|
if (needAuthorization) {
|
|
const privacyAgreed = uni.getStorageSync('privacyAgreed');
|
|
if (privacyAgreed) {
|
|
this.$emit('agree')
|
|
} else {
|
|
this.showPrivacyPopup()
|
|
}
|
|
} else {
|
|
this.$emit('agree')
|
|
}
|
|
},
|
|
|
|
getPrivacySettingByQuickApp() {
|
|
// #ifdef QUICKAPP-WEBVIEW || H5 || WEB
|
|
if (!this.$util.isQuickApp()) return;
|
|
if (typeof has != 'undefined' && has?.getPrivacySetting) {
|
|
has.getPrivacySetting({
|
|
success: (res) => {
|
|
this.checkAndShow(res.needAuthorization)
|
|
},
|
|
})
|
|
} else {
|
|
this.checkAndShow(!uni.getStorageSync('privacyAgreed'))
|
|
}
|
|
// #endif
|
|
},
|
|
|
|
/**
|
|
* 监听平台侧的隐私授权事件
|
|
*/
|
|
listenPrivacySettingChange() {
|
|
// #ifdef MP-WEIXIN
|
|
if (wx.onNeedPrivacyAuthorization) {
|
|
wx.onNeedPrivacyAuthorization((resolve) => {
|
|
if (typeof this.privacyAuthorization === 'function') {
|
|
this.privacyAuthorization(resolve)
|
|
}
|
|
})
|
|
}
|
|
// #endif
|
|
|
|
// #ifdef QUICKAPP-WEBVIEW || H5 || WEB
|
|
if (this.$util.isQuickApp() && typeof has != 'undefined' && has?.onPrivacySettingChange) {
|
|
has.onPrivacySettingChange((res) => {
|
|
this.checkAndShow(res.needAuthorization)
|
|
})
|
|
}
|
|
// #endif
|
|
},
|
|
|
|
/**
|
|
* 主动查询隐私授权状态并弹窗
|
|
*/
|
|
proactive() {
|
|
// #ifdef MP-WEIXIN
|
|
if (wx.getPrivacySetting) {
|
|
wx.getPrivacySetting({
|
|
success: (res) => {
|
|
this.checkAndShow(res.needAuthorization)
|
|
},
|
|
});
|
|
} else {
|
|
// 低版本基础库直接检查本地存储
|
|
this.checkAndShow(!uni.getStorageSync('privacyAgreed'))
|
|
}
|
|
// #endif
|
|
|
|
// #ifdef QUICKAPP-WEBVIEW
|
|
this.getPrivacySettingByQuickApp();
|
|
// #endif
|
|
|
|
// #ifdef H5 || WEB
|
|
this.checkAndShow(!uni.getStorageSync('privacyAgreed'))
|
|
// #endif
|
|
},
|
|
|
|
/**
|
|
* 初始化监听程序（页面级）
|
|
*/
|
|
curPageShow() {
|
|
closeOtherPagePopUpHooks.add(this.disPopUp)
|
|
this.privacyAuthorization = resolve => {
|
|
this.privacyResolves.add(resolve)
|
|
this.showPrivacyPopup()
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 弹窗时关掉其他页面的隐私弹窗，避免重叠
|
|
*/
|
|
closeOtherPagePopUp(closePopUp) {
|
|
closeOtherPagePopUpHooks.forEach(hook => {
|
|
if (closePopUp !== hook) {
|
|
hook()
|
|
}
|
|
})
|
|
},
|
|
|
|
openPrivacyContract() {
|
|
// #ifdef MP-WEIXIN
|
|
wx.openPrivacyContract({
|
|
success(res) {},
|
|
fail(err) {}
|
|
});
|
|
// #endif
|
|
|
|
// #ifdef QUICKAPP-WEBVIEW || H5 || WEB
|
|
if (this.$util.isQuickApp()) {
|
|
if (typeof has != 'undefined' && has?.openPrivacySetting) {
|
|
has.openPrivacySetting({
|
|
success: (res) => {},
|
|
fail: (err) => {}
|
|
});
|
|
} else {
|
|
this.$util.redirectTo(privacyContractPage);
|
|
}
|
|
} else {
|
|
this.$util.redirectTo(privacyContractPage);
|
|
}
|
|
// #endif
|
|
},
|
|
|
|
openPrivacyService() {
|
|
// #ifdef QUICKAPP-WEBVIEW || H5 || WEB
|
|
if (this.$util.isQuickApp()) {
|
|
if (typeof has != 'undefined' && has?.openPrivacySetting) {
|
|
has.openPrivacySetting({
|
|
success: (res) => {},
|
|
fail: (err) => {}
|
|
});
|
|
} else {
|
|
this.$util.redirectTo(privacyServicePage);
|
|
}
|
|
} else {
|
|
this.$util.redirectTo(privacyServicePage);
|
|
}
|
|
// #endif
|
|
},
|
|
|
|
handleDisagree() {
|
|
this.privacyResolves.forEach(resolve => {
|
|
resolve({ event: 'disagree' })
|
|
})
|
|
this.privacyResolves.clear()
|
|
this.disPopUp()
|
|
|
|
uni.setStorageSync('privacyAgreed', true);
|
|
|
|
uni.showModal({
|
|
content: this.$lang('components.privacyPopup.disagreeTip'),
|
|
success: () => {
|
|
this.$emit('disagree')
|
|
}
|
|
})
|
|
},
|
|
|
|
handleAgree() {
|
|
this.privacyResolves.forEach(resolve => {
|
|
resolve({
|
|
event: 'agree',
|
|
buttonId: 'agree-btn'
|
|
})
|
|
})
|
|
this.privacyResolves.clear()
|
|
this.disPopUp()
|
|
|
|
uni.setStorageSync('privacyAgreed', true);
|
|
this.$emit('agree')
|
|
},
|
|
|
|
popUp() {
|
|
this.showPop = true;
|
|
},
|
|
|
|
disPopUp() {
|
|
this.showPop = false;
|
|
},
|
|
},
|
|
beforeDestroy() {
|
|
this.privacyResolves.clear()
|
|
closeOtherPagePopUpHooks.delete(this.disPopUp)
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.privacy-mask {
|
|
position: fixed;
|
|
z-index: 5000;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.privacy-wrap {
|
|
width: 632rpx;
|
|
padding: 48rpx 30rpx;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.privacy-title {
|
|
padding: 0rpx 30rpx 40rpx 30rpx;
|
|
font-weight: 700;
|
|
font-size: 36rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.privacy-desc {
|
|
font-size: 30rpx;
|
|
color: #555;
|
|
line-height: 2;
|
|
text-align: left;
|
|
padding: 0 40rpx;
|
|
}
|
|
|
|
.privacy-link {
|
|
color: #2f80ed;
|
|
}
|
|
|
|
.privacy-button-flex {
|
|
display: flex;
|
|
padding: 20rpx 40rpx;
|
|
}
|
|
|
|
.privacy-button-btn {
|
|
color: #FFF;
|
|
font-size: 30rpx;
|
|
// #ifdef QUICKAPP-WEBVIEW || H5 || WEB
|
|
font-size: 28rpx;
|
|
// #endif
|
|
font-weight: 500;
|
|
line-height: 100rpx;
|
|
text-align: center;
|
|
height: 100rpx;
|
|
border-radius: 20rpx;
|
|
border: none;
|
|
background: #07c160;
|
|
flex: 1;
|
|
margin-right: 30rpx;
|
|
justify-content: center;
|
|
}
|
|
|
|
.privacy-button-btn::after {
|
|
border: none;
|
|
}
|
|
|
|
.bg-disagree {
|
|
color: #07c160;
|
|
background: #f2f2f2;
|
|
}
|
|
|
|
.bg-agree {
|
|
margin-right: 0rpx;
|
|
}
|
|
</style>
|