539 lines
11 KiB
Vue
539 lines
11 KiB
Vue
<template>
|
||
<el-card class="step-card">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<div class="header-icon">
|
||
<el-icon class="text-green-600">
|
||
<CheckCircleIcon />
|
||
</el-icon>
|
||
</div>
|
||
<div class="header-content">
|
||
<h2 class="header-title">入驻完成</h2>
|
||
<p class="header-subtitle">恭喜您完成企业入驻，现在可以使用完整的API服务功能</p>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="completion-content">
|
||
<div class="success-card">
|
||
<div class="success-icon">
|
||
<div class="icon-wrapper">
|
||
<el-icon class="text-green-500">
|
||
<CheckCircleIcon />
|
||
</el-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="success-text">
|
||
<h2 class="success-title">恭喜！企业入驻已完成</h2>
|
||
<p class="success-desc">您的企业已完成入驻，现在可以使用完整的API服务功能。</p>
|
||
<p class="success-desc">下一步，您只需要订阅贵司需要的api接口就可以实现在线调试和使用</p>
|
||
<div class="completion-info">
|
||
<h3 class="info-title">入驻信息</h3>
|
||
<div class="info-grid">
|
||
<div class="info-item">
|
||
<label class="info-label">入驻状态</label>
|
||
<div class="info-value">
|
||
<el-tag type="success" size="large" class="status-tag">已入驻</el-tag>
|
||
</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<label class="info-label">入驻时间</label>
|
||
<div class="info-value">
|
||
{{ formatDate(certificationData.completed_at || formatDate(new Date())) }}
|
||
</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<label class="info-label">企业名称</label>
|
||
<div class="info-value">{{ enterpriseInfo.company_name || '' }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<label class="info-label">统一社会信用代码</label>
|
||
<div class="info-value">{{ enterpriseInfo.unified_social_code || '' }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="completion-actions">
|
||
<el-button
|
||
type="primary"
|
||
size="large"
|
||
@click="showContract"
|
||
class="action-btn primary-btn"
|
||
>
|
||
<el-icon class="mr-2">
|
||
<DocumentTextIcon />
|
||
</el-icon>
|
||
查看合同
|
||
</el-button>
|
||
<el-button size="large" @click="goToProfile" class="action-btn secondary-btn">
|
||
<el-icon class="mr-2">
|
||
<UserIcon />
|
||
</el-icon>
|
||
返回账户中心
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 合同查看弹窗 -->
|
||
<el-dialog
|
||
v-model="contractDialogVisible"
|
||
title="合同查看"
|
||
width="70%"
|
||
:close-on-click-modal="false"
|
||
:close-on-press-escape="true"
|
||
class="contract-dialog"
|
||
>
|
||
<div class="contract-container">
|
||
<iframe
|
||
v-if="contractUrl"
|
||
:src="contractUrl"
|
||
class="contract-iframe"
|
||
frameborder="0"
|
||
allowfullscreen
|
||
></iframe>
|
||
<div v-else class="no-contract">
|
||
<el-icon class="text-gray-400" size="48">
|
||
<DocumentIcon />
|
||
</el-icon>
|
||
<p>暂无合同文件</p>
|
||
</div>
|
||
</div>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="contractDialogVisible = false">关闭</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</el-card>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { useUserStore } from '@/stores/user'
|
||
import { CheckCircleIcon, DocumentIcon, DocumentTextIcon, UserIcon } from '@heroicons/vue/24/outline'
|
||
import { ElMessage } from 'element-plus'
|
||
import { computed, onMounted, ref } from 'vue'
|
||
|
||
const userStore = useUserStore()
|
||
const { enterpriseForm, certificationData } = defineProps({
|
||
enterpriseForm: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
certificationData: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
})
|
||
|
||
const emit = defineEmits(['go-dashboard', 'go-profile'])
|
||
|
||
// 合同弹窗状态
|
||
const contractDialogVisible = ref(false)
|
||
|
||
// 响应式获取企业信息
|
||
const enterpriseInfo = computed(() => {
|
||
return userStore.userInfo?.enterprise_info || {}
|
||
})
|
||
|
||
// 获取合同URL
|
||
const contractUrl = computed(() => {
|
||
return certificationData?.metadata?.contract_url || ''
|
||
})
|
||
|
||
// 显示合同
|
||
const showContract = () => {
|
||
if (contractUrl.value) {
|
||
contractDialogVisible.value = true
|
||
} else {
|
||
ElMessage.warning('暂无合同文件')
|
||
}
|
||
}
|
||
|
||
// 跳转到控制台
|
||
const goToDashboard = () => {
|
||
emit('go-dashboard')
|
||
}
|
||
|
||
// 跳转到账户中心
|
||
const goToProfile = () => {
|
||
emit('go-profile')
|
||
}
|
||
|
||
// 格式化日期
|
||
const formatDate = (date) => {
|
||
return new Date(date).toLocaleString('zh-CN', {
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
})
|
||
}
|
||
|
||
// 格式化手机号
|
||
const formatPhone = (phone) => {
|
||
if (!phone) return ''
|
||
return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
|
||
}
|
||
|
||
// 组件挂载时重新获取用户信息
|
||
onMounted(async () => {
|
||
try {
|
||
await userStore.fetchUserProfile()
|
||
console.log('认证完成页面：已重新获取用户信息')
|
||
} catch (error) {
|
||
console.error('认证完成页面：重新获取用户信息失败:', error)
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.step-card {
|
||
border-radius: 20px;
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
|
||
border: none;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
/* 卡片头部 */
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
padding: 8px 0;
|
||
}
|
||
|
||
.header-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 12px;
|
||
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.header-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
color: #1e293b;
|
||
margin: 0 0 4px 0;
|
||
}
|
||
|
||
.header-subtitle {
|
||
font-size: 14px;
|
||
color: #64748b;
|
||
margin: 0;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 完成内容 */
|
||
.completion-content {
|
||
text-align: center;
|
||
padding: 40px 0;
|
||
}
|
||
|
||
.success-card {
|
||
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
|
||
border-radius: 24px;
|
||
padding: 48px;
|
||
border: 1px solid rgba(34, 197, 94, 0.2);
|
||
box-shadow: 0 16px 48px rgba(34, 197, 94, 0.15);
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.success-icon {
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.icon-wrapper {
|
||
width: 120px;
|
||
height: 120px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto;
|
||
font-size: 60px;
|
||
box-shadow: 0 16px 32px rgba(34, 197, 94, 0.3);
|
||
animation: successPulse 2s ease-in-out infinite;
|
||
}
|
||
|
||
.success-text {
|
||
max-width: 700px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.success-title {
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
color: #166534;
|
||
margin: 0 0 16px 0;
|
||
background: linear-gradient(135deg, #166534 0%, #16a34a 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.success-desc {
|
||
font-size: 18px;
|
||
color: #16a34a;
|
||
margin: 0 0 40px 0;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 认证信息 */
|
||
.completion-info {
|
||
text-align: left;
|
||
margin: 40px 0;
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 32px;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
|
||
border: 1px solid #e2e8f0;
|
||
}
|
||
|
||
.info-title {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
color: #1e293b;
|
||
margin: 0 0 24px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.info-title::before {
|
||
content: '';
|
||
width: 4px;
|
||
height: 20px;
|
||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.info-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 24px;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 14px;
|
||
color: #64748b;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 16px;
|
||
color: #1e293b;
|
||
font-weight: 600;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.status-tag {
|
||
font-weight: 600;
|
||
border-radius: 8px;
|
||
padding: 6px 16px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 操作按钮 */
|
||
.completion-actions {
|
||
display: flex;
|
||
gap: 20px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.action-btn {
|
||
min-width: 180px;
|
||
height: 56px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
border-radius: 12px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.primary-btn {
|
||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||
border: none;
|
||
box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
|
||
color: white;
|
||
}
|
||
|
||
.primary-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 12px 32px rgba(16, 185, 129, 0.4);
|
||
}
|
||
|
||
.secondary-btn {
|
||
border: 2px solid #e2e8f0;
|
||
background: white;
|
||
color: #64748b;
|
||
}
|
||
|
||
.secondary-btn:hover {
|
||
border-color: #10b981;
|
||
color: #10b981;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 24px rgba(16, 185, 129, 0.15);
|
||
}
|
||
|
||
/* 合同弹窗样式 */
|
||
.contract-dialog {
|
||
border-radius: 16px;
|
||
}
|
||
|
||
.contract-container {
|
||
height: 70vh;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.contract-iframe {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: none;
|
||
background: white;
|
||
}
|
||
|
||
.no-contract {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
color: #64748b;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.no-contract p {
|
||
margin-top: 16px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.dialog-footer {
|
||
text-align: right;
|
||
padding-top: 16px;
|
||
}
|
||
|
||
/* 动画效果 */
|
||
@keyframes successPulse {
|
||
0%,
|
||
100% {
|
||
transform: scale(1);
|
||
box-shadow: 0 16px 32px rgba(34, 197, 94, 0.3);
|
||
}
|
||
50% {
|
||
transform: scale(1.05);
|
||
box-shadow: 0 20px 40px rgba(34, 197, 94, 0.4);
|
||
}
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.completion-content {
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.success-card {
|
||
padding: 32px 24px;
|
||
margin: 0 16px;
|
||
}
|
||
|
||
.success-title {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.success-desc {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.icon-wrapper {
|
||
width: 80px;
|
||
height: 80px;
|
||
font-size: 40px;
|
||
}
|
||
|
||
.card-header {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.header-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.completion-info {
|
||
padding: 24px;
|
||
margin: 24px 0;
|
||
}
|
||
|
||
.info-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 16px;
|
||
}
|
||
|
||
.completion-actions {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.action-btn {
|
||
min-width: 100%;
|
||
}
|
||
|
||
.contract-container {
|
||
height: 60vh;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.success-card {
|
||
padding: 24px 16px;
|
||
}
|
||
|
||
.success-title {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.icon-wrapper {
|
||
width: 60px;
|
||
height: 60px;
|
||
font-size: 30px;
|
||
}
|
||
|
||
.contract-container {
|
||
height: 50vh;
|
||
}
|
||
}
|
||
</style>
|