overseas/components/privacyAgreementPopup/index.vue

195 lines
4.3 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view :style="viewColor">
<view class="mask" @touchmove.prevent :hidden="isShow == false" @click="rejectAgreement"></view>
<view class="product-window" :class="{'on':isShow}">
<view class="mp-data">
<text class="mp-name">{{site_name}}服务与隐私协议</text>
</view>
<view class="trip-msg">
<view class="trip">
欢迎您使用{{site_name}}请仔细阅读以下内容并作出适当的选择
</view>
</view>
<view class="trip-title">
隐私政策概要
</view>
<view class="trip-msg">
<view class="trip">
当您点击同意并开始时用产品服务时即表示您已理解并同息该条款内容该条款将对您产生法律约束力如您拒绝将无法继续下一步操作
</view>
</view>
<view class="main-color" @click.stop="privacy(3)">点击阅读{{agreementName}}</view>
<view class="bottom">
<button class="save open" type="default" id="agree-btn" open-type="agreePrivacyAuthorization"
@agreeprivacyauthorization="handleAgree">同意并继续</button>
<button class="reject" @click="rejectAgreement">
取消
</button>
</view>
</view>
</view>
</template>
<script>
const app = getApp();
import { mapGetters } from 'vuex';
import { configMap } from "@/utils";
import Routine from '../../libs/routine';
export default {
data() {
return {
isShow: false,
agreementName: '',
mpData: uni.getStorageSync('copyRight'),
};
},
computed: {
...configMap({site_name: ''}, mapGetters(['viewColor'])),
},
mounted() {
wx.getPrivacySetting({
success: res => {
console.log(res.needAuthorization)
if (res.needAuthorization) {
// 需要弹出隐私协议
this.isShow = true
this.agreementName = res.privacyContractName
} else {
this.$emit('onAgree');
// 用户已经同意过隐私协议,所以不需要再弹出隐私协议,也能调用已声明过的隐私接口
}
},
fail: () => {},
complete: () => {}
})
},
methods: {
// 同意
handleAgree() {
this.isShow = false
this.$emit('onclose');
},
// 拒绝
rejectAgreement() {
this.isShow = false
this.$emit('onReject');
},
// 跳转协议
privacy(type) {
uni.navigateTo({
url: "/pages/users/privacy/index?type=" + type
})
},
}
}
</script>
<style>
.pl-sty {
color: #999999;
font-size: 30rpx;
}
</style>
<style scoped lang="scss">
.product-window.on {
transform: translate3d(0, 0, 0);
}
.product-window {
position: fixed;
bottom: 0;
width: 100%;
left: 0;
background-color: #fff;
z-index: 1000;
border-radius: 40rpx 40rpx 0 0;
transform: translate3d(0, 100%, 0);
transition: all .3s cubic-bezier(.25, .5, .5, .9);
padding: 64rpx 40rpx;
padding-bottom: 38rpx;
padding-bottom: calc(38rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
padding-bottom: calc(38rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
.icon-guanbi {
position: absolute;
top: 40rpx;
right: 40rpx;
font-size: 24rpx;
font-weight: bold;
color: #999;
}
.mp-data {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40rpx;
.mp-name {
font-size: 34rpx;
font-weight: 500;
color: #333333;
line-height: 48rpx;
}
}
.trip-msg {
padding-bottom: 32rpx;
.title {
font-size: 30rpx;
font-weight: bold;
color: #000;
margin-bottom: 6rpx;
}
.trip {
color: #333333;
font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
}
}
.trip-title {
font-size: 28rpx;
font-weight: 500;
color: #333333;
margin-bottom: 8rpx;
}
.main-color {
font-size: 28rpx;
font-weight: 400;
color: var(--view-theme);
margin-bottom: 40rpx;
}
.bottom {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.save,
.reject {
display: flex;
align-items: center;
justify-content: center;
width: 670rpx;
height: 80rpx;
border-radius: 80rpx;
background-color: #F5F5F5;
color: #333;
font-size: 30rpx;
font-weight: 500;
}
.save {
background-color: var(--view-theme);
color: #fff;
margin-bottom: 24rpx;
}
}
}
</style>