You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
211 lines
4.2 KiB
211 lines
4.2 KiB
<template>
|
|
<uni-popup ref="popup" type="bottom" background-color="#fff" :mask-click="false" class="bottom-popup">
|
|
<view class="popup-container">
|
|
<!-- 标题 -->
|
|
<view class="popup-title">用户隐私保护提示</view>
|
|
|
|
<!-- 内容 -->
|
|
<view class="popup-content">
|
|
在你使用瀚海回收服务之前，请仔细阅读
|
|
<text class="highlight" @click="openProtocol('service')">《用户服务协议》</text>
|
|
和
|
|
<text class="highlight" @click="openProtocol('privacy')">《隐私政策》</text>
|
|
。如你同意该指引，请点击"同意"开始使用本小程序。
|
|
</view>
|
|
|
|
<!-- 操作按钮 -->
|
|
<view class="popup-buttons">
|
|
<button class="popup-btn reject" @click="handleReject">拒绝</button>
|
|
<button
|
|
v-if="needPhone"
|
|
class="popup-btn agree"
|
|
open-type="getRealtimePhoneNumber"
|
|
@getrealtimephonenumber="getrealtimephonenumber"
|
|
@click="handleAgree"
|
|
>同意</button>
|
|
<button
|
|
v-else
|
|
class="popup-btn agree"
|
|
@click="handleAgree"
|
|
>同意</button>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
needPhone: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
methods: {
|
|
getrealtimephonenumber (e) {
|
|
console.log(e.detail.code,'11') // 动态令牌
|
|
console.log(e.detail.errMsg,'22') // 回调信息（成功失败都会返回）
|
|
console.log(e.detail.errno) // 错误码（失败时返回）
|
|
uni.reLaunch({
|
|
url:'/pages/wxUserInfo'
|
|
})
|
|
this.$api('bindPhone', {code:e.detail.code}, res => {
|
|
console.log(res,'res-phone',)
|
|
if (res.code == 200) {
|
|
console.log(JSON.parse(res.result),'phone')
|
|
getApp().globalData.phone = JSON.parse(res.result).phone_info.phoneNumber;
|
|
}
|
|
})
|
|
},
|
|
// 打开弹窗
|
|
open() {
|
|
this.$refs.popup.open()
|
|
},
|
|
// 关闭弹窗
|
|
close() {
|
|
this.$refs.popup.close()
|
|
},
|
|
// 同意处理
|
|
handleAgree() {
|
|
this.$emit('agree')
|
|
this.close()
|
|
},
|
|
// 拒绝处理
|
|
handleReject() {
|
|
this.$emit('reject')
|
|
this.close()
|
|
},
|
|
// 打开协议
|
|
openProtocol(type) {
|
|
this.$emit('open-protocol', type)
|
|
},
|
|
// 允许外部动态设置 needPhone
|
|
setNeedPhone(val) {
|
|
this.$emit('update:needPhone', val)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 底部弹窗容器 */
|
|
.bottom-popup {
|
|
border-radius: 24rpx 24rpx 0 0;
|
|
}
|
|
|
|
.popup-container {
|
|
padding: 40rpx;
|
|
background: #fff;
|
|
border-radius: 24rpx 24rpx 0 0;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
/* padding-bottom: env(safe-area-inset-bottom); */
|
|
}
|
|
|
|
/* 标题样式 */
|
|
.popup-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
margin-bottom: 30rpx;
|
|
color: #333;
|
|
}
|
|
|
|
/* 内容样式 */
|
|
.popup-content {
|
|
font-size: 28rpx;
|
|
line-height: 1.6;
|
|
color: #666;
|
|
margin-bottom: 40rpx;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.highlight {
|
|
color: #4c6eae;
|
|
display: inline;
|
|
}
|
|
|
|
/* 按钮容器 */
|
|
.popup-buttons {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 20rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
/* 按钮基础样式 */
|
|
.popup-btn {
|
|
width: 45%;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
font-size: 32rpx;
|
|
border-radius: 44rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 拒绝按钮 */
|
|
.popup-btn.reject {
|
|
background-color: #f5f5f5;
|
|
color: #666;
|
|
}
|
|
|
|
/* 同意按钮 */
|
|
.popup-btn.agree {
|
|
background-color: #07C160;
|
|
color: #fff;
|
|
}
|
|
|
|
/* 去除按钮默认样式 */
|
|
.popup-btn::after {
|
|
border: none;
|
|
}
|
|
|
|
/* 适配不同屏幕尺寸 */
|
|
@media screen and (max-height: 700px) {
|
|
.popup-container {
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.popup-title {
|
|
font-size: 28rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.popup-content {
|
|
font-size: 26rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.popup-btn {
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
/* 适配小屏幕 */
|
|
@media screen and (max-height: 600px) {
|
|
.popup-container {
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.popup-title {
|
|
font-size: 26rpx;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
.popup-content {
|
|
font-size: 24rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.popup-btn {
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
</style>
|