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