wang
3 months ago
15 changed files with 1917 additions and 537 deletions
Binary file not shown.
@ -0,0 +1,361 @@ |
|||
<template> |
|||
<div v-if="visible" class="agreement-modal-overlay" @click="handleCancel"> |
|||
<div class="agreement-modal" @click.stop> |
|||
<!-- 头部 --> |
|||
<div class="modal-header"> |
|||
<h3 class="modal-title">{{ noticeDetail.title || '平台协议' }}</h3> |
|||
</div> |
|||
|
|||
<!-- 内容 --> |
|||
<div class="modal-content"> |
|||
<div class="agreement-content" @scroll="handleScroll"> |
|||
<div v-if="noticeDetail.title" class="agreement-text"> |
|||
<div class="content-header"> |
|||
<h4>{{ noticeDetail.title }}</h4> |
|||
<div class="content-header-info"> |
|||
<span v-if="noticeDetail.author">作者：{{ noticeDetail.author }}</span> |
|||
<span v-if="noticeDetail.source">来源：{{ noticeDetail.source }}</span> |
|||
<span v-if="noticeDetail.publishTime">发布时间：{{ noticeDetail.publishTime }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="content-html" v-html="noticeDetail.contentHtml"></div> |
|||
<div v-if="!noticeDetail.contentHtml" class="default-content"> |
|||
<p>请仔细阅读本承诺书...</p> |
|||
</div> |
|||
<p class="important">请仔细阅读以上协议内容，点击"同意并继续"表示您已阅读并同意本协议。</p> |
|||
</div> |
|||
<div v-else class="agreement-text"> |
|||
<h4>用户协议与承诺书</h4> |
|||
<div class="default-content"> |
|||
<p>请仔细阅读本承诺书...</p> |
|||
</div> |
|||
<p class="important">请仔细阅读以上协议内容，点击"同意并继续"表示您已阅读并同意本协议。</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 底部按钮 --> |
|||
<div class="modal-footer"> |
|||
<button class="btn btn-secondary" @click="handleCancel">不同意</button> |
|||
<button |
|||
class="btn btn-primary" |
|||
@click="handleConfirm" |
|||
:disabled="!hasScrolledToBottom" |
|||
> |
|||
同意并继续 |
|||
<span v-if="!hasScrolledToBottom">(请阅读完全文后点击)</span> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, onMounted, reactive, watch } from 'vue' |
|||
import { useRouter } from 'vue-router' |
|||
import { message } from 'ant-design-vue' |
|||
import { letterApi } from '/@/api/business/letter/letter-api' |
|||
import { noticeApi } from '/@/api/business/oa/notice-api' |
|||
|
|||
const router = useRouter() |
|||
const emit = defineEmits(['confirm', 'cancel']) |
|||
|
|||
// 组件属性 |
|||
const props = defineProps({ |
|||
visible: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}) |
|||
|
|||
// 组件状态 |
|||
const loading = ref(false) |
|||
const hasScrolledToBottom = ref(false) |
|||
|
|||
// 公告详情数据 |
|||
const noticeDetail = reactive({ |
|||
title: '', |
|||
contentHtml: '', |
|||
author: '', |
|||
source: '', |
|||
publishTime: '' |
|||
}) |
|||
|
|||
// 监听visible变化 |
|||
watch(() => props.visible, (newVisible) => { |
|||
if (newVisible) { |
|||
getNoticeDetail() |
|||
} |
|||
}, { immediate: true }) |
|||
|
|||
onMounted(() => { |
|||
if (props.visible) { |
|||
getNoticeDetail() |
|||
} |
|||
}) |
|||
|
|||
// 获取承诺书详情 |
|||
async function getNoticeDetail() { |
|||
try { |
|||
loading.value = true |
|||
|
|||
// 调用获取承诺书详情接口 |
|||
const result = await noticeApi.getOne({}) |
|||
console.log('获取承诺书详情结果:', result) |
|||
|
|||
if (result.code === 0 && result.data) { |
|||
Object.assign(noticeDetail, result.data) |
|||
} else { |
|||
// 如果接口调用失败，显示默认内容 |
|||
Object.assign(noticeDetail, { |
|||
title: '用户协议与承诺书', |
|||
contentHtml: '', |
|||
author: '系统管理员', |
|||
source: '平台管理', |
|||
publishTime: new Date().toLocaleDateString() |
|||
}) |
|||
} |
|||
} catch (error) { |
|||
console.error('获取承诺书详情失败:', error) |
|||
// 接口调用失败，显示默认内容 |
|||
Object.assign(noticeDetail, { |
|||
title: '用户协议与承诺书', |
|||
contentHtml: '', |
|||
author: '系统管理员', |
|||
source: '平台管理', |
|||
publishTime: new Date().toLocaleDateString() |
|||
}) |
|||
} finally { |
|||
loading.value = false |
|||
} |
|||
} |
|||
|
|||
// 滚动事件处理 |
|||
function handleScroll(event) { |
|||
const element = event.target |
|||
// 检查是否滚动到底部 |
|||
if (element.scrollTop + element.clientHeight >= element.scrollHeight - 10) { |
|||
hasScrolledToBottom.value = true |
|||
} |
|||
} |
|||
|
|||
// 同意按钮点击处理 |
|||
async function handleConfirm() { |
|||
try { |
|||
// 调用签署承诺书接口 |
|||
const signRes = await letterApi.add() |
|||
|
|||
if (signRes.code === 0) { |
|||
message.success('承诺书签署成功') |
|||
emit('confirm') |
|||
} else { |
|||
message.error(signRes.msg || '承诺书签署失败') |
|||
} |
|||
} catch (error) { |
|||
console.error('签署承诺书失败:', error) |
|||
message.error('承诺书签署失败，请稍后重试') |
|||
} |
|||
} |
|||
|
|||
// 不同意按钮点击处理 |
|||
function handleCancel() { |
|||
emit('cancel') |
|||
// 跳转到登录页面 |
|||
router.push('/login') |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 遮罩层 */ |
|||
.agreement-modal-overlay { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background-color: rgba(0, 0, 0, 0.5); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 1000; |
|||
} |
|||
|
|||
/* 弹框容器 */ |
|||
.agreement-modal { |
|||
width: 90%; |
|||
max-width: 500px; |
|||
background-color: white; |
|||
border-radius: 12px; |
|||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15); |
|||
display: flex; |
|||
flex-direction: column; |
|||
max-height: 80vh; |
|||
} |
|||
|
|||
/* 头部 */ |
|||
.modal-header { |
|||
padding: 16px; |
|||
border-bottom: 1px solid #e8e8e8; |
|||
} |
|||
|
|||
.modal-title { |
|||
font-size: 18px; |
|||
font-weight: 600; |
|||
margin: 0; |
|||
text-align: center; |
|||
color: #333; |
|||
} |
|||
|
|||
/* 内容区域 */ |
|||
.modal-content { |
|||
flex: 1; |
|||
overflow: hidden; |
|||
padding: 0 16px; |
|||
} |
|||
|
|||
.agreement-content { |
|||
height: 50vh; |
|||
overflow-y: auto; |
|||
padding: 16px 0; |
|||
} |
|||
|
|||
/* 滚动条样式 */ |
|||
.agreement-content::-webkit-scrollbar { |
|||
width: 6px; |
|||
} |
|||
|
|||
.agreement-content::-webkit-scrollbar-track { |
|||
background: #f1f1f1; |
|||
border-radius: 3px; |
|||
} |
|||
|
|||
.agreement-content::-webkit-scrollbar-thumb { |
|||
background: #888; |
|||
border-radius: 3px; |
|||
} |
|||
|
|||
.agreement-content::-webkit-scrollbar-thumb:hover { |
|||
background: #555; |
|||
} |
|||
|
|||
/* 内容样式 */ |
|||
.agreement-text { |
|||
line-height: 1.6; |
|||
color: #555; |
|||
} |
|||
|
|||
.content-header { |
|||
margin-bottom: 16px; |
|||
padding-bottom: 12px; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
} |
|||
|
|||
.content-header h4 { |
|||
margin: 0 0 8px 0; |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.content-header-info { |
|||
font-size: 12px; |
|||
color: #999; |
|||
display: flex; |
|||
gap: 12px; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.content-html { |
|||
margin-bottom: 16px; |
|||
} |
|||
|
|||
/* 默认内容 */ |
|||
.default-content { |
|||
margin-bottom: 16px; |
|||
padding: 16px; |
|||
background-color: #fafafa; |
|||
border-radius: 6px; |
|||
font-size: 14px; |
|||
line-height: 1.6; |
|||
} |
|||
|
|||
/* 重要提示 */ |
|||
.important { |
|||
font-size: 14px; |
|||
color: #ff4d4f; |
|||
font-weight: 500; |
|||
text-align: center; |
|||
margin-top: 24px; |
|||
} |
|||
|
|||
/* 底部按钮 */ |
|||
.modal-footer { |
|||
padding: 16px; |
|||
border-top: 1px solid #e8e8e8; |
|||
display: flex; |
|||
gap: 12px; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.btn { |
|||
flex: 1; |
|||
padding: 12px; |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
border: none; |
|||
border-radius: 6px; |
|||
cursor: pointer; |
|||
transition: all 0.3s; |
|||
} |
|||
|
|||
.btn-primary { |
|||
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%); |
|||
color: white; |
|||
} |
|||
|
|||
.btn-primary:hover { |
|||
opacity: 0.9; |
|||
transform: translateY(-1px); |
|||
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3); |
|||
} |
|||
|
|||
.btn-primary:disabled { |
|||
opacity: 0.6; |
|||
cursor: not-allowed; |
|||
transform: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
.btn-secondary { |
|||
background-color: #f0f0f0; |
|||
color: #666; |
|||
border: 1px solid #d9d9d9; |
|||
} |
|||
|
|||
.btn-secondary:hover { |
|||
background-color: #e8e8e8; |
|||
transform: translateY(-1px); |
|||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
/* 响应式设计 */ |
|||
@media (max-width: 375px) { |
|||
.agreement-modal { |
|||
width: 95%; |
|||
max-width: none; |
|||
} |
|||
|
|||
.modal-title { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.modal-footer { |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.btn { |
|||
font-size: 14px; |
|||
padding: 10px; |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue