美化新建域名所有者对话框修复圆角不完整的问题
This commit is contained in:
parent
4a87758b16
commit
0b3bd56d16
@ -1,12 +1,13 @@
|
||||
<template>
|
||||
<div v-if="visible" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div class="bg-white rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto">
|
||||
<div class="p-6 border-b border-gray-200">
|
||||
<div class="bg-white rounded-lg shadow-2xl max-w-4xl w-full mx-4 max-h-[90vh] flex flex-col overflow-hidden">
|
||||
<!-- 固定标题栏 -->
|
||||
<div class="p-6 border-b border-gray-200 bg-white rounded-t-lg flex-shrink-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-lg font-medium text-gray-900">新建域名所有者</h3>
|
||||
<button
|
||||
@click="closeDialog"
|
||||
class="text-gray-400 hover:text-gray-600"
|
||||
class="text-gray-400 hover:text-gray-600 transition-colors duration-200"
|
||||
>
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
@ -15,7 +16,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<!-- 可滚动内容区域 -->
|
||||
<div class="p-6 overflow-y-auto flex-1">
|
||||
<!-- 重要提醒 -->
|
||||
<div class="mb-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
|
||||
<div class="flex">
|
||||
@ -58,198 +60,209 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 国家选择 -->
|
||||
<div class="mb-6">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">国家/地区 *</label>
|
||||
<select
|
||||
v-model="selectedCountry"
|
||||
@change="onCountryChange"
|
||||
class="w-full border rounded px-3 py-2"
|
||||
>
|
||||
<option value="">请选择国家/地区</option>
|
||||
<option v-for="country in countryList" :key="country.code" :value="country.code">
|
||||
{{ country.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 中文信息 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- 单位名称（企业时显示） -->
|
||||
<div v-if="formData.c_regtype === 'E'">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">所有者单位名称（中文） *</label>
|
||||
<div class="space-y-4">
|
||||
<!-- 单位名称（企业时显示）- 单独一行 -->
|
||||
<div v-if="formData.c_regtype === 'E'" class="w-full">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">所有者单位名称 *</label>
|
||||
<input
|
||||
v-model="formData.c_org_m"
|
||||
type="text"
|
||||
class="w-full border rounded px-3 py-2"
|
||||
class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="请输入单位名称"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 姓名 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">姓（中文） *</label>
|
||||
<input
|
||||
v-model="formData.c_ln_m"
|
||||
type="text"
|
||||
class="w-full border rounded px-3 py-2"
|
||||
placeholder="请输入姓"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">名（中文） *</label>
|
||||
<input
|
||||
v-model="formData.c_fn_m"
|
||||
type="text"
|
||||
class="w-full border rounded px-3 py-2"
|
||||
placeholder="请输入名"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 所属区域 - 仅中国显示 -->
|
||||
<div v-if="selectedCountry === 'CN'">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">所属省份 *</label>
|
||||
<select
|
||||
v-model="selectedProvince"
|
||||
@change="onProvinceChange"
|
||||
class="w-full border rounded px-3 py-2"
|
||||
>
|
||||
<option value="">请选择省份</option>
|
||||
<option v-for="province in chinaRegions" :key="province.code" :value="province.name">
|
||||
{{ province.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedCountry === 'CN'">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">所属城市 *</label>
|
||||
<select
|
||||
v-model="selectedCity"
|
||||
@change="onCityChange"
|
||||
class="w-full border rounded px-3 py-2"
|
||||
:disabled="!selectedProvince"
|
||||
>
|
||||
<option value="">请选择城市</option>
|
||||
<option v-for="city in getCurrentCities()" :key="city.code" :value="city.name">
|
||||
{{ city.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedCountry === 'CN'">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">所属区县</label>
|
||||
<select
|
||||
v-model="selectedDistrict"
|
||||
@change="onDistrictChange"
|
||||
class="w-full border rounded px-3 py-2"
|
||||
:disabled="!selectedCity"
|
||||
>
|
||||
<option value="">请选择区县</option>
|
||||
<option v-for="district in getCurrentDistricts()" :key="district.code" :value="district.name">
|
||||
{{ district.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 非中国地区的省份/州输入框 -->
|
||||
<div v-if="selectedCountry && selectedCountry !== 'CN'">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">省份/州 *</label>
|
||||
<input
|
||||
v-model="formData.c_st_m"
|
||||
type="text"
|
||||
class="w-full border rounded px-3 py-2"
|
||||
placeholder="请输入省份/州"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 非中国地区的城市输入框 -->
|
||||
<div v-if="selectedCountry && selectedCountry !== 'CN'">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">城市 *</label>
|
||||
<input
|
||||
v-model="formData.c_ct_m"
|
||||
type="text"
|
||||
class="w-full border rounded px-3 py-2"
|
||||
placeholder="请输入城市"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 通讯地址 -->
|
||||
<div class="md:col-span-2">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">通讯地址（中文） *</label>
|
||||
<input
|
||||
v-model="formData.c_adr_m"
|
||||
type="text"
|
||||
class="w-full border rounded px-3 py-2"
|
||||
placeholder="请输入详细地址"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 邮编 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">邮编 *</label>
|
||||
<input
|
||||
v-model="formData.c_pc"
|
||||
type="text"
|
||||
class="w-full border rounded px-3 py-2"
|
||||
placeholder="请输入邮编"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 手机号码 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">手机号码 *</label>
|
||||
<div class="flex">
|
||||
<span class="inline-flex items-center px-3 py-2 border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm rounded-l-md">
|
||||
+86
|
||||
</span>
|
||||
<!-- 姓名部分 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">姓 *</label>
|
||||
<input
|
||||
v-model="formData.c_ph"
|
||||
v-model="formData.c_ln_m"
|
||||
type="text"
|
||||
class="flex-1 border rounded-r-md px-3 py-2"
|
||||
placeholder="请输入手机号码"
|
||||
class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="请输入姓"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">名 *</label>
|
||||
<input
|
||||
v-model="formData.c_fn_m"
|
||||
type="text"
|
||||
class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="请输入名"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 区域选择 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<!-- 国家/地区选择 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">国家/地区 *</label>
|
||||
<select
|
||||
v-model="selectedCountry"
|
||||
@change="onCountryChange"
|
||||
class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
>
|
||||
<option value="">请选择国家/地区</option>
|
||||
<option v-for="country in countryList" :key="country.code" :value="country.code">
|
||||
{{ country.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 所属区域 - 仅中国显示 -->
|
||||
<div v-if="selectedCountry === 'CN'">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">所属省份 *</label>
|
||||
<select
|
||||
v-model="selectedProvince"
|
||||
@change="onProvinceChange"
|
||||
class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
>
|
||||
<option value="">请选择省份</option>
|
||||
<option v-for="province in chinaRegions" :key="province.code" :value="province.name">
|
||||
{{ province.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedCountry === 'CN'">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">所属城市 *</label>
|
||||
<select
|
||||
v-model="selectedCity"
|
||||
@change="onCityChange"
|
||||
class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
:disabled="!selectedProvince"
|
||||
>
|
||||
<option value="">请选择城市</option>
|
||||
<option v-for="city in getCurrentCities()" :key="city.code" :value="city.name">
|
||||
{{ city.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedCountry === 'CN'">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">所属区县</label>
|
||||
<select
|
||||
v-model="selectedDistrict"
|
||||
@change="onDistrictChange"
|
||||
class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
:disabled="!selectedCity"
|
||||
>
|
||||
<option value="">请选择区县</option>
|
||||
<option v-for="district in getCurrentDistricts()" :key="district.code" :value="district.name">
|
||||
{{ district.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 非中国地区的省份/州输入框 -->
|
||||
<div v-if="selectedCountry && selectedCountry !== 'CN'">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">省份/州 *</label>
|
||||
<input
|
||||
v-model="formData.c_st_m"
|
||||
type="text"
|
||||
class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="请输入省份/州"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 非中国地区的城市输入框 -->
|
||||
<div v-if="selectedCountry && selectedCountry !== 'CN'">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">城市 *</label>
|
||||
<input
|
||||
v-model="formData.c_ct_m"
|
||||
type="text"
|
||||
class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="请输入城市"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 通讯地址 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">通讯地址 *</label>
|
||||
<input
|
||||
v-model="formData.c_adr_m"
|
||||
type="text"
|
||||
class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="请输入详细地址"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 联系信息 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- 邮编 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">邮编 *</label>
|
||||
<input
|
||||
v-model="formData.c_pc"
|
||||
type="text"
|
||||
class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="请输入邮编"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 手机号码 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">手机号码 *</label>
|
||||
<div class="flex">
|
||||
<span class="inline-flex items-center px-3 py-2 border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm rounded-l-lg">
|
||||
+86
|
||||
</span>
|
||||
<input
|
||||
v-model="formData.c_ph"
|
||||
type="text"
|
||||
class="flex-1 border rounded-r-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="请输入手机号码"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 电子邮箱 -->
|
||||
<div class="md:col-span-2">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">电子邮箱 *</label>
|
||||
<input
|
||||
v-model="formData.c_em"
|
||||
type="email"
|
||||
class="w-full border rounded px-3 py-2"
|
||||
class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="请输入邮箱地址"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 证件类型 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">证件类型 *</label>
|
||||
<select
|
||||
v-model="formData.c_idtype_gswl"
|
||||
@change="onCertificateTypeChange"
|
||||
class="w-full border rounded px-3 py-2"
|
||||
>
|
||||
<option value="">请选择证件类型</option>
|
||||
<option v-for="option in getCertificateTypeOptions()" :key="option.value" :value="option.value">
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- 证件信息 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- 证件类型 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">证件类型 *</label>
|
||||
<select
|
||||
v-model="formData.c_idtype_gswl"
|
||||
@change="onCertificateTypeChange"
|
||||
class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
>
|
||||
<option value="">请选择证件类型</option>
|
||||
<option v-for="option in getCertificateTypeOptions()" :key="option.value" :value="option.value">
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 证件号码 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">证件号码 *</label>
|
||||
<input
|
||||
v-model="formData.c_idnum_gswl"
|
||||
type="text"
|
||||
class="w-full border rounded px-3 py-2"
|
||||
:placeholder="getCertificatePlaceholder()"
|
||||
@input="validateIdNumber"
|
||||
>
|
||||
<div v-if="idNumberError" class="text-red-500 text-xs mt-1">
|
||||
{{ idNumberError }}
|
||||
<!-- 证件号码 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">证件号码 *</label>
|
||||
<input
|
||||
v-model="formData.c_idnum_gswl"
|
||||
type="text"
|
||||
class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
:placeholder="getCertificatePlaceholder()"
|
||||
@input="validateIdNumber"
|
||||
>
|
||||
<div v-if="idNumberError" class="text-red-500 text-xs mt-1">
|
||||
{{ idNumberError }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -266,14 +279,14 @@
|
||||
<button
|
||||
type="button"
|
||||
@click="closeDialog"
|
||||
class="px-4 py-2 border border-gray-300 bg-white text-gray-700 rounded hover:bg-gray-50"
|
||||
class="px-6 py-2 border border-gray-300 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors duration-200"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="isLoading"
|
||||
class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-gray-300"
|
||||
class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-300 transition-colors duration-200"
|
||||
>
|
||||
{{ isLoading ? '创建中...' : '立即保存' }}
|
||||
</button>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user