39 lines
2.6 KiB
Vue
39 lines
2.6 KiB
Vue
<script setup lang="ts">
|
||
import '@/styles/adminDensity.css'
|
||
import AppDialog from '@/shared/components/AppDialog.vue'
|
||
import type { Supplier } from '@/modules/suppliers/types'
|
||
|
||
defineProps<{ supplier: Supplier | null }>()
|
||
const open = defineModel<boolean>({ default: false })
|
||
</script>
|
||
|
||
<template>
|
||
<AppDialog class="admin-density-dialog" v-model="open" :title="`营业执照查看${supplier ? ` - ${supplier.name}` : ''}`" width="min(560px, calc(100vw - 24px))" :show-confirm="false" cancel-text="关闭">
|
||
<div v-if="supplier" class="license-dialog">
|
||
<p class="license-dialog__supplier">供应商：<strong>{{ supplier.name }}</strong></p>
|
||
<section class="license-card" aria-label="营业执照信息">
|
||
<h2>营业执照</h2><p class="license-card__copy">（副本）</p>
|
||
<dl>
|
||
<div><dt>名称：</dt><dd>{{ supplier.name }}</dd></div>
|
||
<div><dt>法定代表人：</dt><dd>{{ supplier.legalRepresentative }}</dd></div>
|
||
<div><dt>统一社会信用代码：</dt><dd>{{ supplier.businessLicenseNo || '—' }}</dd></div>
|
||
<div><dt>资质文件：</dt><dd>{{ supplier.licenseFileId ? '已关联' : '未上传' }}</dd></div>
|
||
</dl>
|
||
</section>
|
||
<el-alert v-if="supplier.licenseFileId" class="license-dialog__notice" type="info" :closable="false" show-icon title="资质文件已保留；平台公共供应商文件读取接口尚未提供，暂无法展示原始影像。" />
|
||
</div>
|
||
</AppDialog>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.license-dialog__supplier { margin: 0 0 var(--admin-space-5); color: var(--cc-muted); font-size: var(--admin-font-body); }
|
||
.license-card { max-width: 460px; margin: 0 auto; padding: var(--admin-space-7) var(--admin-space-7); border: 2px solid #c0392b; border-radius: var(--admin-radius); background: #fff; box-shadow: 0 4px 16px rgba(192,57,43,.12); }
|
||
.license-card h2 { margin: 0; color: #c0392b; font-size: 22px; letter-spacing: 6px; text-align: center; }
|
||
.license-card__copy { margin: 2px 0 var(--admin-space-6); color: #c0392b; font-size: var(--admin-font-caption); text-align: center; }
|
||
.license-card dl { margin: 0; }
|
||
.license-card dl div { display: grid; grid-template-columns: 126px minmax(0, 1fr); margin-bottom: var(--admin-space-4); font-size: var(--admin-font-body); }
|
||
.license-card dt { color: #444; font-weight: 700; }.license-card dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
|
||
.license-dialog__notice { margin-top: var(--admin-space-6); }
|
||
@media (max-width: 480px) { .license-card { padding: 20px 16px; } .license-card dl div { grid-template-columns: 1fr; gap: 3px; } .license-card h2 { font-size: 19px; } }
|
||
</style>
|