优化域名注册界面
This commit is contained in:
parent
98456a3fcf
commit
20870a9fec
@ -34,10 +34,22 @@
|
||||
class="flex-1 border rounded px-3 py-2"
|
||||
@keyup.enter="checkDomain"
|
||||
/>
|
||||
<div class="relative">
|
||||
<button
|
||||
@click="showSuffixSelector = !showSuffixSelector"
|
||||
class="suffix-selector-btn px-4 py-2 border border-gray-300 bg-white text-gray-700 rounded-l-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 whitespace-nowrap flex items-center gap-2"
|
||||
>
|
||||
{{ selectedSuffix }}
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<button
|
||||
@click="checkDomain"
|
||||
:disabled="isChecking"
|
||||
class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-gray-300 whitespace-nowrap"
|
||||
class="px-4 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700 disabled:bg-gray-300 whitespace-nowrap"
|
||||
>
|
||||
{{ isChecking ? '查询中...' : '查询域名' }}
|
||||
</button>
|
||||
@ -45,29 +57,29 @@
|
||||
</div>
|
||||
|
||||
<!-- 域名后缀选择区域 -->
|
||||
<div class="border rounded-lg p-4 bg-gray-50">
|
||||
<div v-if="showSuffixSelector" class="border rounded-lg p-4 bg-gray-50">
|
||||
<div class="mb-4">
|
||||
<h3 class="text-sm font-medium text-gray-700 mb-3">选择域名后缀</h3>
|
||||
|
||||
<!-- 搜索和排序 -->
|
||||
<div class="flex flex-col sm:flex-row gap-2 mb-4">
|
||||
<div class="search-container">
|
||||
<input
|
||||
v-model="suffixSearch"
|
||||
type="text"
|
||||
placeholder="搜索后缀"
|
||||
class="search-input"
|
||||
/>
|
||||
<svg class="search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<select v-model="suffixSort" class="px-3 py-2 text-sm border rounded-md bg-white min-w-[120px]">
|
||||
<option value="default">默认排序</option>
|
||||
<option value="popular">热门优先</option>
|
||||
<option value="alphabetical">字母排序</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- 搜索和排序 -->
|
||||
<div class="flex flex-col sm:flex-row gap-2 mb-4">
|
||||
<div class="search-container">
|
||||
<input
|
||||
v-model="suffixSearch"
|
||||
type="text"
|
||||
placeholder="搜索后缀"
|
||||
class="search-input"
|
||||
/>
|
||||
<svg class="search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<select v-model="suffixSort" class="px-3 py-2 text-sm border rounded-md bg-white min-w-[120px]">
|
||||
<option value="default">默认排序</option>
|
||||
<option value="popular">热门优先</option>
|
||||
<option value="alphabetical">字母排序</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 分类标签 -->
|
||||
<div class="category-tabs overflow-x-auto">
|
||||
@ -85,26 +97,26 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 域名后缀网格 -->
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10 gap-2 domain-suffix-grid">
|
||||
<button
|
||||
<!-- 域名后缀网格 -->
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10 gap-2 domain-suffix-grid">
|
||||
<button
|
||||
v-for="suffix in filteredSuffixes"
|
||||
:key="suffix.value"
|
||||
@click="selectedSuffix = suffix.value"
|
||||
@click="selectSuffix(suffix.value)"
|
||||
class="domain-suffix-item p-3 text-center rounded-lg border transition-all duration-200"
|
||||
:class="selectedSuffix === suffix.value
|
||||
? 'border-blue-500 border-2 shadow-sm bg-blue-50'
|
||||
: 'bg-white border-gray-200 hover:border-blue-300 hover:bg-gray-50'"
|
||||
>
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<span class="text-sm font-medium" :class="selectedSuffix === suffix.value ? 'text-blue-700' : 'text-gray-800'">{{ suffix.value }}</span>
|
||||
<span v-if="suffix.hot" class="hot-tag">
|
||||
HOT
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<span class="text-sm font-medium" :class="selectedSuffix === suffix.value ? 'text-blue-700' : 'text-gray-800'">{{ suffix.value }}</span>
|
||||
<span v-if="suffix.hot" class="hot-tag">
|
||||
HOT
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 域名查询结果 -->
|
||||
@ -359,9 +371,9 @@ export default {
|
||||
// 域名后缀相关
|
||||
suffixSearch: '',
|
||||
suffixSort: 'default',
|
||||
selectedCategory: 'all',
|
||||
selectedCategory: 'popular',
|
||||
showSuffixSelector: false,
|
||||
suffixCategories: [
|
||||
{ key: 'all', label: '全部域名' },
|
||||
{ key: 'popular', label: '热门域名' },
|
||||
{ key: 'gtd', label: '通用顶级域名' },
|
||||
{ key: 'ntd', label: '新顶级域名' },
|
||||
@ -371,7 +383,8 @@ export default {
|
||||
{ key: 'business', label: '商业域名' },
|
||||
{ key: 'tech', label: '科技域名' },
|
||||
{ key: 'creative', label: '创意域名' },
|
||||
{ key: 'lifestyle', label: '生活域名' }
|
||||
{ key: 'lifestyle', label: '生活域名' },
|
||||
{ key: 'all', label: '全部域名' }
|
||||
],
|
||||
allSuffixes: [
|
||||
// 通用顶级域名 (gtd)
|
||||
@ -886,8 +899,13 @@ export default {
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 添加点击外部关闭域名后缀选择区块的功能
|
||||
document.addEventListener('click', this.handleClickOutside);
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.stopPaymentCheck();
|
||||
document.removeEventListener('click', this.handleClickOutside);
|
||||
},
|
||||
methods: {
|
||||
async checkDomain() {
|
||||
@ -981,7 +999,22 @@ export default {
|
||||
getTotalAmount() {
|
||||
const yearlyPrice = this.domainPrice || 0;
|
||||
return (yearlyPrice * this.period).toFixed(2);
|
||||
}
|
||||
},
|
||||
selectSuffix(suffix) {
|
||||
this.selectedSuffix = suffix;
|
||||
this.showSuffixSelector = false;
|
||||
},
|
||||
handleClickOutside(event) {
|
||||
const suffixButton = event.target.closest('button');
|
||||
const suffixSelector = event.target.closest('.border.rounded-lg.p-4.bg-gray-50');
|
||||
|
||||
if (!suffixButton || !suffixButton.classList.contains('suffix-selector-btn')) {
|
||||
if (!suffixSelector) {
|
||||
this.showSuffixSelector = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1125,6 +1158,8 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 640px) {
|
||||
.domain-suffix-grid {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user