uniProject/pages/login/agreeContentDialog.vue

<template>
	  <uni-popup ref="agreeContentPopup" :animation="false" :is-mask-click="false"
	  mask-background-color="rgba(255, 255, 255, 0.6);">
	  <view class="agree-content-dialog">
		<view class="agree-content-box">
			<view class="agree-title">用户许可协议</view>
			<view class="agree-close-btn" @click="handleClose"></view>
			<view class="agree-section-box" v-html="formatText(agreementSections)"></view>
		</view>
	  </view>
	 </uni-popup>
</template>

<script setup>
import { ref } from 'vue';
const agreeContentPopup = ref(null); // 索引
// 模拟从图片中提取的协议内容，这里使用您提供的文字文本进行简单处理
const agreementSections = ref(`一、总则
      1.1 用户应当同意本协议的条款并按照提示完成全部的注册程序。用户在过程中点击或勾选“同意”按钮即表示用户与大连栋科软件工程有限公司(下称“栋科软件”)达成协议，完全接受本协议项下的全部条款。
      1.2 用户注册成功后，栋科软件将给予每个用户一个用户帐号及相应的密码，该用户帐号和密码由用户负责保管;用户应当对以其用户帐号进行的所有活动和事件负法律责任。
      1.3 栋科软件用户服务协议以及各个产品的单项服务条款和公告可由栋科软件随时更新，且无需另行通知。您在使用相关服务时，应关注并遵守其所适用的相关条款。
      1.4 您在使用栋科软件提供的各项服务之前，应仔细阅读本服务协议。如您不同意本服务协议及，或随时对其的修改，您可以主动取消栋科软件提供的服务。
    `);
function formatText(text) {
	return text.replace(/\n/g, '<br/>');
}
// 打开弹窗
function handleShow() {
	agreeContentPopup.value.open();
}
// 关闭弹窗
function handleClose() {
	agreeContentPopup.value.close();
}
defineExpose({
		handleShow
	})
</script>