80 lines
2.2 KiB
Vue
80 lines
2.2 KiB
Vue
<template>
|
|
<uni-popup ref="popup" type="center" :mask-click="false">
|
|
<view class="bg-white rounded overflow-hidden" style="width: 690rpx;">
|
|
<view class="flex text-center border-b">
|
|
<view class="relative px-15 py-12 flex-grow text-lg"
|
|
:class="type == 'agree' ? 'text-primary active-title' : 'text-dark'" @click="type = 'agree'">
|
|
用户协议
|
|
</view>
|
|
<view class="relative px-15 py-12 flex-grow text-lg"
|
|
:class="type != 'agree' ? 'text-primary active-title' : 'text-dark'" @click="type = 'privacyPolicy'">
|
|
隐私政策
|
|
</view>
|
|
</view>
|
|
<scroll-view v-if="type === 'agree'" scroll-y="true" class="popup-content-scroll">
|
|
<view class="px-15 py-12 text-base leading-normal" style="white-space: pre-wrap;">
|
|
{{ userAgreement }}
|
|
</view>
|
|
</scroll-view>
|
|
<scroll-view v-else scroll-y="true" class="popup-content-scroll">
|
|
<view class="px-15 py-12 text-base leading-normal text-dark" style="white-space: pre-wrap;">
|
|
{{ privacy }}
|
|
</view>
|
|
</scroll-view>
|
|
<view class="footer-buttons">
|
|
<button-footer hideden-shadow confirmText="我已阅读并同意" @cancel="close" @confirm="confirm()" />
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from 'vue';
|
|
import privacy from './privacy-policy.js';
|
|
import userAgreement from './user-agreement.js';
|
|
import ButtonFooter from '@/components/button-footer.vue';
|
|
|
|
const emits = defineEmits(['close', 'confirm'])
|
|
const props = defineProps({
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
const popup = ref()
|
|
const type = ref('agree')
|
|
|
|
function close() {
|
|
emits('close')
|
|
}
|
|
|
|
function confirm() {
|
|
emits('confirm')
|
|
}
|
|
|
|
watch(() => props.visible, n => {
|
|
if (n) {
|
|
popup.value && popup.value.open();
|
|
type.value = 'agree'
|
|
} else {
|
|
popup.value && popup.value.close()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.active-title::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 4rpx;
|
|
left: calc(50% - 40rpx);
|
|
width: 80rpx;
|
|
height: 8rpx;
|
|
background: #0074ff;
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
.popup-content-scroll {
|
|
max-height: 50vh;
|
|
}
|
|
</style> |