156 lines
3.5 KiB
Vue
156 lines
3.5 KiB
Vue
<template>
|
||
<div class="platform-select">
|
||
<div class="platform-select__header">
|
||
<h2 class="platform-select__title">选择签署平台</h2>
|
||
<p class="platform-select__desc">
|
||
企业信息已审核通过，请选择企业认证与合同签署使用的平台。选定后不可更改。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="platform-select__grid">
|
||
<button
|
||
v-for="item in platforms"
|
||
:key="item.platform"
|
||
type="button"
|
||
class="platform-card"
|
||
:class="{ 'is-active': selected === item.platform, 'is-disabled': !item.available }"
|
||
:disabled="!item.available || submitting"
|
||
@click="selected = item.platform"
|
||
>
|
||
<span class="platform-card__name">{{ item.name }}</span>
|
||
<span class="platform-card__desc">{{ item.description }}</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="platform-select__actions">
|
||
<el-button type="primary" size="large" :loading="submitting" :disabled="!selected" @click="confirm">
|
||
确认并开始企业认证
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { certificationApi } from '@/api/index.js'
|
||
import { ElMessage } from 'element-plus'
|
||
import { onMounted, ref } from 'vue'
|
||
|
||
const emit = defineEmits(['selected'])
|
||
|
||
const platforms = ref([])
|
||
const selected = ref('')
|
||
const submitting = ref(false)
|
||
|
||
onMounted(async () => {
|
||
try {
|
||
const res = await certificationApi.getSignPlatforms()
|
||
// 前端暂时只开放法大大，隐藏 e签宝
|
||
platforms.value = (res?.data?.platforms || []).filter((p) => p.platform === 'fadada')
|
||
if (platforms.value.length === 1) {
|
||
selected.value = platforms.value[0].platform
|
||
}
|
||
} catch (e) {
|
||
ElMessage.error(e?.message || '获取签署平台失败')
|
||
}
|
||
})
|
||
|
||
async function confirm() {
|
||
if (!selected.value) return
|
||
submitting.value = true
|
||
try {
|
||
const res = await certificationApi.selectSignPlatform({ sign_platform: selected.value })
|
||
ElMessage.success('已选择签署平台')
|
||
emit('selected', res?.data)
|
||
} catch (e) {
|
||
ElMessage.error(e?.message || '选择签署平台失败')
|
||
} finally {
|
||
submitting.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.platform-select {
|
||
max-width: 720px;
|
||
margin: 0 auto;
|
||
padding: 32px 20px 48px;
|
||
}
|
||
|
||
.platform-select__header {
|
||
margin-bottom: 28px;
|
||
text-align: center;
|
||
}
|
||
|
||
.platform-select__title {
|
||
margin: 0 0 8px;
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
color: #1f2937;
|
||
}
|
||
|
||
.platform-select__desc {
|
||
margin: 0;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.platform-select__grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr);
|
||
gap: 16px;
|
||
max-width: 360px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.platform-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
padding: 24px 20px;
|
||
text-align: left;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 12px;
|
||
background: #fff;
|
||
cursor: pointer;
|
||
transition: border-color 0.2s, box-shadow 0.2s;
|
||
}
|
||
|
||
.platform-card:hover:not(.is-disabled) {
|
||
border-color: #2563eb;
|
||
}
|
||
|
||
.platform-card.is-active {
|
||
border-color: #2563eb;
|
||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
|
||
}
|
||
|
||
.platform-card.is-disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.platform-card__name {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #111827;
|
||
}
|
||
|
||
.platform-card__desc {
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.platform-select__actions {
|
||
margin-top: 28px;
|
||
text-align: center;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.platform-select__grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|