添加部分功能
This commit is contained in:
@@ -114,28 +114,16 @@
|
||||
<el-form-item prop="agreement">
|
||||
<el-checkbox
|
||||
v-model="registerForm.agreement"
|
||||
@change="handleAgreementChange"
|
||||
@click.prevent="showAgreementDialog"
|
||||
:disabled="true"
|
||||
>
|
||||
我已阅读并同意
|
||||
<el-link
|
||||
type="primary"
|
||||
@click="showAgreement"
|
||||
:class="{ viewed: agreementViewed }"
|
||||
>
|
||||
《用户协议》
|
||||
</el-link>
|
||||
和
|
||||
<el-link
|
||||
type="primary"
|
||||
@click="showPrivacy"
|
||||
:class="{ viewed: privacyViewed }"
|
||||
>
|
||||
《隐私政策》
|
||||
</el-link>
|
||||
<span @click="showAgreementDialog" class="agreement-text">
|
||||
我已阅读并同意《用户协议》和《隐私政策》
|
||||
</span>
|
||||
</el-checkbox>
|
||||
<div v-if="!canCheckAgreement" class="agreement-hint">
|
||||
<div class="agreement-hint">
|
||||
<el-icon><InfoFilled /></el-icon>
|
||||
<span>请先点击查看用户协议和隐私政策</span>
|
||||
<span>请点击查看用户协议和隐私政策</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
@@ -170,6 +158,64 @@
|
||||
<div class="decoration-shape shape-3"></div>
|
||||
<div class="decoration-shape shape-4"></div>
|
||||
</div>
|
||||
|
||||
<!-- 协议弹窗 -->
|
||||
<el-dialog
|
||||
v-model="showAgreementDialogVisible"
|
||||
title="用户协议和隐私政策"
|
||||
width="90%"
|
||||
:style="{ maxWidth: '600px' }"
|
||||
:show-close="true"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
center
|
||||
class="agreement-dialog"
|
||||
position="bottom"
|
||||
>
|
||||
<div class="agreement-content">
|
||||
<el-tabs v-model="activeTab" @tab-change="handleTabChange">
|
||||
<el-tab-pane name="agreement">
|
||||
<template #label>
|
||||
<span>用户协议</span>
|
||||
<el-icon v-if="agreementViewed" class="check-icon"><Check /></el-icon>
|
||||
</template>
|
||||
<div class="agreement-text-content" ref="agreementContent">
|
||||
<h3>用户协议</h3>
|
||||
<p>1. 用户应当遵守法律法规，不得发布违法违规内容。</p>
|
||||
<p>2. 用户对自己发布的内容承担全部责任。</p>
|
||||
<p>3. 平台有权对违规内容进行删除或限制。</p>
|
||||
<p>4. 用户应当保护好自己的账号安全。</p>
|
||||
<p>5. 平台保留修改本协议的权利。</p>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="privacy">
|
||||
<template #label>
|
||||
<span>隐私政策</span>
|
||||
<el-icon v-if="privacyViewed" class="check-icon"><Check /></el-icon>
|
||||
</template>
|
||||
<div class="privacy-text-content" ref="privacyContent">
|
||||
<h3>隐私政策</h3>
|
||||
<p>1. 我们重视用户隐私保护。</p>
|
||||
<p>2. 我们只收集必要的用户信息。</p>
|
||||
<p>3. 用户信息仅用于提供服务。</p>
|
||||
<p>4. 我们不会向第三方泄露用户信息。</p>
|
||||
<p>5. 用户有权查看、修改或删除个人信息。</p>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<div class="read-status">
|
||||
|
||||
</div>
|
||||
<div class="dialog-buttons">
|
||||
<el-button @click="closeAgreementDialog">取消</el-button>
|
||||
<el-button type="primary" @click="confirmAgreement" :disabled="!(agreementViewed && privacyViewed)">确认已阅读</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -187,6 +233,7 @@ import {
|
||||
CreditCard,
|
||||
Location,
|
||||
InfoFilled,
|
||||
Check,
|
||||
} from '@element-plus/icons-vue';
|
||||
import Captcha from '@/components/Captcha.vue';
|
||||
import api from '@/utils/api'
|
||||
@@ -218,9 +265,12 @@ const registerForm = reactive({
|
||||
// 协议查看状态
|
||||
const agreementViewed = ref(false);
|
||||
const privacyViewed = ref(false);
|
||||
const canCheckAgreement = computed(
|
||||
() => agreementViewed.value && privacyViewed.value
|
||||
);
|
||||
|
||||
// 协议弹窗相关状态
|
||||
const showAgreementDialogVisible = ref(false);
|
||||
const activeTab = ref('agreement');
|
||||
const agreementContent = ref();
|
||||
const privacyContent = ref();
|
||||
|
||||
// 短信验证码相关状态
|
||||
const sendingSMS = ref(false);
|
||||
@@ -477,62 +527,45 @@ const handleRegister = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 显示用户协议
|
||||
const showAgreement = () => {
|
||||
ElMessageBox.alert(
|
||||
`<div style="text-align: left; line-height: 1.6;">
|
||||
<h3>用户协议</h3>
|
||||
<p>1. 用户应当遵守法律法规，不得发布违法违规内容。</p>
|
||||
<p>2. 用户对自己发布的内容承担全部责任。</p>
|
||||
<p>3. 平台有权对违规内容进行删除或限制。</p>
|
||||
<p>4. 用户应当保护好自己的账号安全。</p>
|
||||
<p>5. 平台保留修改本协议的权利。</p>
|
||||
</div>`,
|
||||
'用户协议',
|
||||
{
|
||||
confirmButtonText: '我已了解',
|
||||
dangerouslyUseHTMLString: true,
|
||||
customClass: 'agreement-dialog',
|
||||
}
|
||||
).then(() => {
|
||||
agreementViewed.value = true;
|
||||
ElMessage.success('已查看用户协议');
|
||||
});
|
||||
// 显示协议弹窗
|
||||
const showAgreementDialog = () => {
|
||||
showAgreementDialogVisible.value = true;
|
||||
activeTab.value = 'agreement';
|
||||
// 弹窗打开时默认用户协议已读
|
||||
agreementViewed.value = true;
|
||||
};
|
||||
|
||||
// 显示隐私政策
|
||||
const showPrivacy = () => {
|
||||
ElMessageBox.alert(
|
||||
`<div style="text-align: left; line-height: 1.6;">
|
||||
<h3>隐私政策</h3>
|
||||
<p>1. 我们重视用户隐私保护。</p>
|
||||
<p>2. 我们只收集必要的用户信息。</p>
|
||||
<p>3. 用户信息仅用于提供服务。</p>
|
||||
<p>4. 我们不会向第三方泄露用户信息。</p>
|
||||
<p>5. 用户有权查看、修改或删除个人信息。</p>
|
||||
</div>`,
|
||||
'隐私政策',
|
||||
{
|
||||
confirmButtonText: '我已了解',
|
||||
dangerouslyUseHTMLString: true,
|
||||
customClass: 'privacy-dialog',
|
||||
}
|
||||
).then(() => {
|
||||
privacyViewed.value = true;
|
||||
ElMessage.success('已查看隐私政策');
|
||||
});
|
||||
// 关闭协议弹窗
|
||||
const closeAgreementDialog = () => {
|
||||
showAgreementDialogVisible.value = false;
|
||||
};
|
||||
|
||||
// 处理协议勾选
|
||||
const handleAgreementChange = (value) => {
|
||||
if (value && !canCheckAgreement.value) {
|
||||
registerForm.agreement = false;
|
||||
ElMessage.warning('请先查看用户协议和隐私政策后再勾选');
|
||||
return false;
|
||||
// 确认已阅读协议
|
||||
const confirmAgreement = () => {
|
||||
if (agreementViewed.value && privacyViewed.value) {
|
||||
registerForm.agreement = true;
|
||||
showAgreementDialogVisible.value = false;
|
||||
ElMessage.success('已确认阅读用户协议和隐私政策');
|
||||
} else {
|
||||
ElMessage.warning('请先查看用户协议和隐私政策');
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
// 处理选项卡切换
|
||||
const handleTabChange = (tabName) => {
|
||||
if (tabName === 'agreement') {
|
||||
// 切换到用户协议时，标记为已读
|
||||
agreementViewed.value = true;
|
||||
} else if (tabName === 'privacy') {
|
||||
// 切换到隐私政策时，标记为已读
|
||||
privacyViewed.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 图片上传成功处理
|
||||
const handleUploadSuccess = (response, field) => {
|
||||
ElMessage.success('图片上传成功');
|
||||
@@ -888,9 +921,94 @@ onMounted(() => {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:deep(.el-link.viewed) {
|
||||
color: #67c23a !important;
|
||||
font-weight: 500;
|
||||
.agreement-text {
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.agreement-text:hover {
|
||||
color: #66b1ff;
|
||||
}
|
||||
|
||||
/* 协议弹窗样式 */
|
||||
:deep(.agreement-dialog) {
|
||||
.el-dialog__body {
|
||||
padding: 20px;
|
||||
max-height: 60vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.agreement-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.agreement-text-content,
|
||||
.privacy-text-content {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
line-height: 1.6;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 8px;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.agreement-text-content h3,
|
||||
.privacy-text-content h3 {
|
||||
color: #303133;
|
||||
margin-bottom: 16px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.agreement-text-content p,
|
||||
.privacy-text-content p {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.agreement-text-content strong,
|
||||
.privacy-text-content strong {
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
color: #67c23a;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
.agreement-text-content::-webkit-scrollbar,
|
||||
.privacy-text-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.agreement-text-content::-webkit-scrollbar-track,
|
||||
.privacy-text-content::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.agreement-text-content::-webkit-scrollbar-thumb,
|
||||
.privacy-text-content::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.agreement-text-content::-webkit-scrollbar-thumb:hover,
|
||||
.privacy-text-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
|
||||
:deep(.el-link.viewed:hover) {
|
||||
|
||||
Reference in New Issue
Block a user