| @ -1,118 +1,148 @@ | |||||
| <template> | <template> | ||||
| <uv-popup ref="privacyPopup"> | |||||
| <uv-popup ref="popup" z-index="99999" :closeOnClickOverlay="false" :customStyle="{ backgroundColor: 'transparent' }"> | |||||
| <view class="privacyPopup"> | <view class="privacyPopup"> | ||||
| <view class="title"> | <view class="title"> | ||||
| <view class="title_circle"></view> | |||||
| <view>{{ title }}</view> | |||||
| <view>协议与隐私政策</view> | |||||
| </view> | </view> | ||||
| <view class="content_pri"> | <view class="content_pri"> | ||||
| <text>在你使用【{{ title }}】服务之前,请仔细阅读</text> | |||||
| <text style="color: #1793ee;" @click="goToPrivacy">《{{ title }}小程序隐私保护指引》</text>。 | |||||
| <text>如你同意{{ title }}小程序隐私保护指引,请点击“同意”开始使用【{{ title }}】。</text> | |||||
| <view class="text"> | |||||
| 欢迎来到车队佳油!我们根据最新的法律法规、监管政策要求,更新了《用户协议》和《隐私政策》,请您认真阅读。 | |||||
| </view> | |||||
| </view> | |||||
| <view class="config"> | |||||
| <uv-checkbox-group v-model="checkboxValue" shape="circle"> | |||||
| <view class="content"> | |||||
| <view style="display: flex;"> | |||||
| <uv-checkbox size="30rpx" :name="1"></uv-checkbox> | |||||
| 同意<text @click="goToPrivacy">《车队佳油隐私政策》</text> | |||||
| </view> | |||||
| <view class=""> | |||||
| 以及<text @click="goToPrivacy">《用户协议》</text> | |||||
| </view> | |||||
| </view> | |||||
| </uv-checkbox-group> | |||||
| </view> | </view> | ||||
| <view class="pri_btn"> | <view class="pri_btn"> | ||||
| <button class="confuse_btn" @click="confusePrivacy">拒绝</button> | |||||
| <button class="confirm_btn" id="agree-btn" open-type="agreePrivacyAuthorization" | |||||
| @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button> | |||||
| <!-- <button class="confuse_btn" @click="confusePrivacy">拒绝</button> --> | |||||
| <button | |||||
| class="confirm_btn" id="agree-btn" | |||||
| open-type="agreePrivacyAuthorization" | |||||
| @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button> | |||||
| </view> | </view> | ||||
| </view> | </view> | ||||
| </uv-popup> | </uv-popup> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| export default { | export default { | ||||
| data(){ | |||||
| return{ | |||||
| title : '帧视界', | |||||
| name: 'PrivacyAgreementPoup', | |||||
| data() { | |||||
| return { | |||||
| resolvePrivacyAuthorization: {}, | |||||
| checkboxValue : false | |||||
| } | |||||
| }, | |||||
| mounted() { | |||||
| if(wx.getPrivacySetting){ | |||||
| wx.getPrivacySetting({ | |||||
| success: res => { | |||||
| console.log(res) | |||||
| if (res.needAuthorization) { | |||||
| // 需要弹出隐私协议 | |||||
| this.init() | |||||
| } | |||||
| }, | |||||
| fail: () => {} | |||||
| }) | |||||
| } | } | ||||
| }, | }, | ||||
| methods:{ | |||||
| init(resolve){ | |||||
| this.$refs.privacyPopup.open() | |||||
| methods: { | |||||
| //初始化 | |||||
| init(resolve) { | |||||
| this.$refs.popup.open('center') | |||||
| this.resolvePrivacyAuthorization = resolve | this.resolvePrivacyAuthorization = resolve | ||||
| }, | }, | ||||
| // 打开隐私协议 | // 打开隐私协议 | ||||
| goToPrivacy(){ | |||||
| goToPrivacy() { | |||||
| wx.openPrivacyContract({ | wx.openPrivacyContract({ | ||||
| success: () => { | |||||
| success: () => { | |||||
| console.log('打开成功'); | console.log('打开成功'); | ||||
| }, // 打开成功 | }, // 打开成功 | ||||
| fail: () => { | |||||
| fail: () => { | |||||
| uni.showToast({ | uni.showToast({ | ||||
| title:'打开失败,稍后重试', | |||||
| title: '打开失败,稍后重试', | |||||
| icon: 'none' | icon: 'none' | ||||
| }) | }) | ||||
| } // 打开失败 | } // 打开失败 | ||||
| }) | }) | ||||
| }, | }, | ||||
| // 拒绝 | // 拒绝 | ||||
| confusePrivacy(){ | |||||
| this.$refs.privacyPopup.close() | |||||
| this.resolvePrivacyAuthorization({ event:'disagree' }) | |||||
| confusePrivacy() { | |||||
| this.$refs.popup.close() | |||||
| this.resolvePrivacyAuthorization({ | |||||
| event: 'disagree' | |||||
| }) | |||||
| }, | }, | ||||
| // 同意 | // 同意 | ||||
| handleAgreePrivacyAuthorization(){ | |||||
| handleAgreePrivacyAuthorization() { | |||||
| // 告知平台用户已经同意,参数传同意按钮的id | // 告知平台用户已经同意,参数传同意按钮的id | ||||
| this.resolvePrivacyAuthorization({ buttonId: 'agree-btn', event: 'agree' }) | |||||
| this.$refs.privacyPopup.close() | |||||
| // this.resolvePrivacyAuthorization({ | |||||
| // buttonId: 'agree-btn', | |||||
| // event: 'agree' | |||||
| // }) | |||||
| this.$refs.popup.close() | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| </script> | </script> | ||||
| <style scoped lang="scss"> | |||||
| *{ | |||||
| box-sizing: border-box; | |||||
| } | |||||
| .privacyPopup{ | |||||
| width: 520rpx; | |||||
| /* height: 500rpx; */ | |||||
| background-color: #fff; | |||||
| border-radius: 50rpx; | |||||
| padding: 20rpx 40rpx; | |||||
| } | |||||
| .title{ | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: start; | |||||
| margin: 20rpx 0; | |||||
| font-size: 38rpx; | |||||
| font-weight: 600; | |||||
| } | |||||
| .title .title_circle{ | |||||
| width: 60rpx; | |||||
| height: 60rpx; | |||||
| background-color: #efefef; | |||||
| border-radius: 50%; | |||||
| margin-right: 20rpx; | |||||
| } | |||||
| .content_pri{ | |||||
| width: 480rpx; | |||||
| margin: 0 auto; | |||||
| font-size: 34rpx; | |||||
| line-height: 1.5; | |||||
| } | |||||
| .pri_btn{ | |||||
| width: 100%; | |||||
| height: 158rpx; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: space-evenly; | |||||
| } | |||||
| .pri_btn .confuse_btn,.pri_btn .confirm_btn{ | |||||
| width: 200rpx; | |||||
| height: 90rpx; | |||||
| <style lang="scss" scoped> | |||||
| .privacyPopup { | |||||
| width: 90%; | |||||
| margin: 0rpx auto; | |||||
| background: white; | |||||
| border-radius: 20rpx; | border-radius: 20rpx; | ||||
| font-size: 34rpx; | |||||
| } | |||||
| .pri_btn .confuse_btn{ | |||||
| background-color: #eee; | |||||
| color: #52bf6b; | |||||
| } | |||||
| .pri_btn .confirm_btn{ | |||||
| background-color: #52bf6b; | |||||
| color: #fff; | |||||
| box-sizing: border-box; | |||||
| padding: 40rpx 30rpx; | |||||
| .title { | |||||
| text-align: center; | |||||
| font-size: 36rpx; | |||||
| } | |||||
| .content_pri { | |||||
| padding: 30rpx 0rpx; | |||||
| font-size: 28rpx; | |||||
| } | |||||
| .config { | |||||
| font-size: 28rpx; | |||||
| text-align: center; | |||||
| line-height: 40rpx; | |||||
| margin-bottom: 30rpx; | |||||
| text { | |||||
| color: #00aaff; | |||||
| } | |||||
| .content{ | |||||
| display: flex; | |||||
| } | |||||
| } | |||||
| .pri_btn { | |||||
| button { | |||||
| background: #00aaff; | |||||
| outline: none; | |||||
| color: white; | |||||
| font-size: 30rpx; | |||||
| } | |||||
| } | |||||
| } | } | ||||
| </style> | |||||
| </style> | |||||