查看报告增加隐私提示
yanzai
2 days ago
parent
443fe8a4e0
commit
2fdab1a39b
@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-popup ref="ys_popup" border-radius="20px" @change="popupChange">
|
||||
<view class="privacy-popup">
|
||||
<view class="privacy-title">隐私协议</view>
|
||||
<view class="privacy-content">
|
||||
<view class="privacy-text" v-html="YinSiContent.content">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="privacy-agree">
|
||||
<view class="checkbox-wrapper" @click="toggleAgree">
|
||||
<view class="checkbox" :class="{ 'checked': agree }">
|
||||
<text v-if="agree" class="checkbox-text">✓</text>
|
||||
</view>
|
||||
<text class="agree-text">我已阅读并同意隐私协议</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="privacy-buttons">
|
||||
<view class="cancel-button" @click="closePopup">取消</view>
|
||||
<view class="confirm-button" :class="{ 'disabled': !agree }" @click="confirmAgree">同意</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref, nextTick,watch
|
||||
} from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import {
|
||||
PostInfo,
|
||||
$response
|
||||
} from '@/api'
|
||||
|
||||
const emit = defineEmits(['agree', 'close'])
|
||||
|
||||
let ys_popup = ref(null)
|
||||
const agree = ref(false)
|
||||
const show = ref(false)
|
||||
const props = defineProps({
|
||||
IsOpenYinSi: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
watch(
|
||||
() => props.IsOpenYinSi,
|
||||
(newVal, oldVal) => {
|
||||
console.log('visible 从', oldVal, '变为', newVal)
|
||||
if (newVal) {
|
||||
if(newVal===true){
|
||||
openPopup()
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
let YinSiContent=ref('')
|
||||
const GetPostInfo = async () => {
|
||||
const response = await PostInfo({
|
||||
id: 1
|
||||
})
|
||||
$response(response, () => {
|
||||
YinSiContent.value=response.data.info
|
||||
})
|
||||
}
|
||||
|
||||
// 打开弹窗
|
||||
const openPopup = async() => {
|
||||
await GetPostInfo()
|
||||
agree.value = false
|
||||
show.value = true
|
||||
nextTick(() => {
|
||||
ys_popup.value.open('center')
|
||||
})
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
const closePopup = () => {
|
||||
show.value = false
|
||||
ys_popup.value.close()
|
||||
emit('close')
|
||||
}
|
||||
|
||||
// 切换同意状态
|
||||
const toggleAgree = () => {
|
||||
agree.value = !agree.value
|
||||
}
|
||||
|
||||
// 确认同意
|
||||
const confirmAgree = () => {
|
||||
if (agree.value) {
|
||||
closePopup()
|
||||
emit('agree','agree_report')
|
||||
}
|
||||
}
|
||||
|
||||
// 弹窗状态变化
|
||||
const popupChange = ({ show: popupShow }) => {
|
||||
show.value = popupShow
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.privacy-popup {
|
||||
width: 560rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.privacy-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.privacy-content {
|
||||
max-height: 600rpx;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.privacy-text {
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
line-height: 42rpx;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.privacy-agree {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.checkbox-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border: 2rpx solid #CCCCCC;
|
||||
border-radius: 6rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12rpx;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.checkbox.checked {
|
||||
background: #0BBACF;
|
||||
border-color: #0BBACF;
|
||||
}
|
||||
|
||||
.checkbox-text {
|
||||
font-size: 20rpx;
|
||||
color: #FFFFFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.agree-text {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.privacy-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
background: #F5F5F5;
|
||||
border-radius: 40rpx;
|
||||
font-size: 30rpx;
|
||||
color: #666666;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.confirm-button {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
background: #0BBACF;
|
||||
border-radius: 40rpx;
|
||||
font-size: 30rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.confirm-button.disabled {
|
||||
background: #CCCCCC;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue