- 去掉侧边栏，全宽沉浸式布局 - 首屏：大卡片分类入口页（渐变图标+hover上浮+逐卡淡入动画） - 点击后：一级胶囊Tab+返回按钮+二级边框Tab+3列产品卡片 - 产品卡片stagger滑入动画（animation-delay逐卡递增） - 顶部渐变背景（蓝白渐变） - JS逻辑完全不变 - 域名搜索功能完整保留
This commit is contained in:
yiqiu
File diff suppressed because it is too large
Load Diff
@@ -13,431 +13,426 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="template">
|
<div class="template">
|
||||||
<el-container>
|
<el-container>
|
||||||
<aside-menu @getruleslist="getRule"></aside-menu>
|
|
||||||
<el-container>
|
<el-container>
|
||||||
<top-menu></top-menu>
|
<top-menu></top-menu>
|
||||||
<el-main>
|
<el-main class="immersive-main">
|
||||||
<div class="goods-page">
|
<div class="goods-page" :class="{'show-products': select_first_obj.id}">
|
||||||
<!-- 顶部说明 -->
|
|
||||||
<div v-if="commonData.cart_instruction == 1 && commonData.cart_instruction_content" class="cart-des"
|
|
||||||
v-html="commonData.cart_instruction_content">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- ========== 一级分类 · 胶囊 Tab ========== -->
|
<!-- ========== 状态一：分类入口页 ========== -->
|
||||||
<div class="primary-nav">
|
<div class="category-landing" v-show="!select_first_obj.id">
|
||||||
<div class="primary-tabs">
|
<!-- 顶部说明 -->
|
||||||
<div class="primary-tab"
|
<div v-if="commonData.cart_instruction == 1 && commonData.cart_instruction_content" class="cart-des"
|
||||||
:class="{'primary-tab-active': select_first_obj.id === item.id}"
|
v-html="commonData.cart_instruction_content">
|
||||||
v-for="item in first_group_list" :key="item.id"
|
</div>
|
||||||
|
<div class="landing-hero">
|
||||||
|
<h1 class="landing-title">{{commonData.website_name || '产品中心'}}</h1>
|
||||||
|
<p class="landing-subtitle">为您提供全球优质的云计算服务</p>
|
||||||
|
</div>
|
||||||
|
<div class="category-grid">
|
||||||
|
<div class="category-card"
|
||||||
|
v-for="(item, index) in first_group_list" :key="item.id"
|
||||||
|
:style="{'animation-delay': (index * 0.08) + 's'}"
|
||||||
@click="select_first_obj.id = item.id; selectFirstType(item.id)">
|
@click="select_first_obj.id = item.id; selectFirstType(item.id)">
|
||||||
{{item.name}}
|
<div class="category-icon" :class="'category-icon-' + (index % 5)">
|
||||||
|
<svg v-if="index % 5 === 0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="36" height="36"><path d="M2 15a7 7 0 0 1 7-7h0a5 5 0 0 1 10 0h0a6 6 0 0 1 3 11H4a5 5 0 0 1-2-4z"/></svg>
|
||||||
|
<svg v-else-if="index % 5 === 1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="36" height="36"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
||||||
|
<svg v-else-if="index % 5 === 2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="36" height="36"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
|
||||||
|
<svg v-else-if="index % 5 === 3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="36" height="36"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
||||||
|
<svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="36" height="36"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
|
||||||
|
</div>
|
||||||
|
<h2 class="category-name">{{item.name}}</h2>
|
||||||
|
<div class="category-arrow">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ========== 二级分类 · 底部边框 Tab + 搜索 ========== -->
|
<!-- ========== 状态二：产品浏览区 ========== -->
|
||||||
<div class="secondary-nav">
|
<div class="products-view" v-show="select_first_obj.id">
|
||||||
<div class="secondary-tabs" v-loading="secondLoading">
|
|
||||||
<div class="secondary-tab"
|
|
||||||
:class="{'secondary-tab-active': select_second_obj.id === item.id}"
|
|
||||||
v-for="item in second_group_list" :key="item.id"
|
|
||||||
@click="selectSecondType(item.id)">
|
|
||||||
{{item.name}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="secondary-right">
|
|
||||||
<el-input :placeholder="lang.goods_search_placeholder" v-if="!isDomain" clearable
|
|
||||||
v-model="searchValue" class="search-input" size="small"
|
|
||||||
@keyup.enter.native="searchGoods">
|
|
||||||
<el-button slot="append" icon="el-icon-search" @click="searchGoods"
|
|
||||||
:loading="searchLoading"></el-button>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 二级描述滚动条 -->
|
<!-- 一级 Tab 导航 -->
|
||||||
<div class="second-desc" v-if="select_second_obj.description">
|
<div class="primary-bar">
|
||||||
<scroll-text mode="loop">
|
<div class="primary-bar-inner">
|
||||||
{{select_second_obj.description}}
|
<div class="primary-back" @click="select_first_obj.id = ''; goodsList = []; second_group_list = [];">
|
||||||
</scroll-text>
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><path d="M15 18l-6-6 6-6"/></svg>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="primary-tabs">
|
||||||
<!-- ========== 商品列表区域 ========== -->
|
<div class="primary-tab"
|
||||||
<div class="goods-container" v-loading="goodSLoading">
|
:class="{'primary-tab-active': select_first_obj.id === item.id}"
|
||||||
<template v-if="!isDomain">
|
v-for="item in first_group_list" :key="item.id"
|
||||||
<!-- 空状态 -->
|
@click="selectFirstType(item.id)">
|
||||||
<div class="empty-state" v-if="goodsList.length === 0 && !goodSLoading">
|
{{item.name}}
|
||||||
<el-empty :description="lang.no_goods"></el-empty>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 三级产品 · 3列卡片网格 -->
|
|
||||||
<div v-else class="goods-grid">
|
|
||||||
<div class="product-card"
|
|
||||||
:class="{'product-card-disabled': item.stock_control === 1 && item.qty <= 0}"
|
|
||||||
v-for="(item,index) in goodsList" :key="index">
|
|
||||||
|
|
||||||
<!-- 卡片头部：名称 + 标签 -->
|
|
||||||
<div class="card-header">
|
|
||||||
<h3 class="card-title">{{ item.name }}</h3>
|
|
||||||
<div class="card-badges">
|
|
||||||
<span class="badge badge-stock-low"
|
|
||||||
v-if="item.stock_control === 1 && item.qty > 0 && item.qty <= 5">
|
|
||||||
{{lang.stock}}：{{item.qty}}
|
|
||||||
</span>
|
|
||||||
<span class="badge badge-sold-out"
|
|
||||||
v-if="item.stock_control === 1 && item.qty <= 0">
|
|
||||||
<img src="/{$template_catalog_cart}/template/{$themes_cart}/img/sold_out.svg" alt="" class="sold-icon">
|
|
||||||
{{lang.shoppingCar_tip_text13 || '已售罄'}}
|
|
||||||
</span>
|
|
||||||
<span class="badge badge-level"
|
|
||||||
v-if="item.client_level_name && item.client_level_name !== ''">
|
|
||||||
{{lang.shoppingCar_tip_text15}}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 活动标签 -->
|
|
||||||
<div class="card-tags"
|
|
||||||
v-if="(item.pay_ontrial && item.pay_ontrial?.status === 1) || item.aodun_firewall_product || item.activeList.length > 0 || item.addon_coin === 1">
|
|
||||||
<span class="tag tag-trial"
|
|
||||||
v-if="item.pay_ontrial && item.pay_ontrial?.status === 1">
|
|
||||||
{{lang.support_trial}}
|
|
||||||
</span>
|
|
||||||
<span class="tag tag-firewall" v-if="item.aodun_firewall_product">
|
|
||||||
{{lang.firewall_text1}}
|
|
||||||
</span>
|
|
||||||
<span class="tag tag-coin" v-if="item.addon_coin === 1">
|
|
||||||
{{lang.coin_text10}}{{item.addon_coin_name}}
|
|
||||||
</span>
|
|
||||||
<template v-for="active in item.activeList">
|
|
||||||
<el-popover placement="top-start" trigger="hover">
|
|
||||||
<div class="active-item">
|
|
||||||
<span v-if="active.type === 'percent'">{{lang.goods_text1}} {{active.value}}%</span>
|
|
||||||
<span v-if="active.type === 'reduce'">{{lang.goods_text2}} {{active.full}} {{lang.goods_text3}} {{active.value}}</span>
|
|
||||||
</div>
|
|
||||||
<span class="tag tag-promo" slot="reference">{{active.name}}</span>
|
|
||||||
</el-popover>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 描述 -->
|
|
||||||
<div class="card-desc" v-html="item.description"></div>
|
|
||||||
|
|
||||||
<!-- 卡片底部：价格 + 按钮 -->
|
|
||||||
<div class="card-footer">
|
|
||||||
<div class="card-price">
|
|
||||||
<div class="price-current">
|
|
||||||
<span class="price-symbol">{{commonData.currency_prefix}}</span>
|
|
||||||
<span class="price-amount">{{item.price_discounted || item.price}}</span>
|
|
||||||
<span class="price-cycle">{{item.cycle ? '/' + item.cycle : ''}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="price-original"
|
|
||||||
v-if="item.price_discounted && item.price != item.price_discounted">
|
|
||||||
{{commonData.currency_prefix}}{{item.price}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-button class="card-buy-btn" type="primary"
|
|
||||||
:disabled="item.stock_control === 1 && item.qty <= 0"
|
|
||||||
@click="goOrder(item)">
|
|
||||||
{{lang.buy}}
|
|
||||||
</el-button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
|
|
||||||
<!-- ====== 域名搜索区域（保持原有功能和结构） ====== -->
|
<!-- 二级 Tab + 搜索 -->
|
||||||
<template v-else>
|
<div class="secondary-bar">
|
||||||
<div class="domain-box">
|
<div class="secondary-bar-inner">
|
||||||
<div class="register-type">
|
<div class="secondary-tabs" v-loading="secondLoading">
|
||||||
<span class="reg-ridio" :class="regType === '1' ? 'isActice' : ''"
|
<div class="secondary-tab"
|
||||||
@click="regType = '1'">{{lang.template_text93}}</span>
|
:class="{'secondary-tab-active': select_second_obj.id === item.id}"
|
||||||
<template v-if="domainConfig.batch_search_domain === 1">
|
v-for="item in second_group_list" :key="item.id"
|
||||||
<el-divider direction="vertical"></el-divider>
|
@click="selectSecondType(item.id)">
|
||||||
<span class="reg-ridio" :class="regType === '2' ? 'isActice' : ''"
|
{{item.name}}
|
||||||
@click="regType = '2'">{{lang.template_text94}}</span>
|
</div>
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="domain-search" v-if="regType === '1'">
|
<div class="secondary-right" v-if="!isDomain">
|
||||||
<el-input :placeholder="lang.template_text92" v-model="domainInput" clearable
|
<el-input :placeholder="lang.goods_search_placeholder" clearable
|
||||||
@keyup.enter.native="handelDomainSearch">
|
v-model="searchValue" class="search-input" size="small"
|
||||||
<div class="suffix-box" slot="append" @click="isShowSuffixBox = !isShowSuffixBox">
|
@keyup.enter.native="searchGoods">
|
||||||
{{selectSuffix}}
|
<el-button slot="append" icon="el-icon-search" @click="searchGoods"
|
||||||
<i class="el-icon-arrow-down select-btn"></i>
|
:loading="searchLoading"></el-button>
|
||||||
</div>
|
|
||||||
</el-input>
|
</el-input>
|
||||||
<el-button class="search-button" @click="handelDomainSearch"
|
|
||||||
:loading="isSearching">{{lang.template_text95}}</el-button>
|
|
||||||
<div class="suffix-list" v-show="isShowSuffixBox">
|
|
||||||
<div class="suffix-item" @click="handelSelectSuffix(item.suffix)"
|
|
||||||
:class="selectSuffix === item.suffix ? 'suffix-active' : ''" v-for="item in suffixList"
|
|
||||||
:key="item.suffix">{{item.suffix}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="batch-search-box" v-if="regType === '2'">
|
</div>
|
||||||
<div class="batch-tips" v-loading="batchLoading">
|
</div>
|
||||||
<el-input v-model="textarea2" resize="none" class="input-batch" type="textarea"
|
|
||||||
:placeholder="`${lang.template_text106}\n${lang.template_text107}${domainConfig.number_limit}${lang.template_text108}${domainConfig.number_limit}${lang.template_text109}\n${lang.template_text110}\n${lang.template_text111}`">
|
<!-- 二级描述 -->
|
||||||
</el-input>
|
<div class="second-desc" v-if="select_second_obj.description">
|
||||||
</div>
|
<scroll-text mode="loop">
|
||||||
<div class="batch-btn">
|
{{select_second_obj.description}}
|
||||||
<div class="upload-btn" @click="isShowUpload = true">
|
</scroll-text>
|
||||||
<svg t="1750672276335" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
</div>
|
||||||
xmlns="http://www.w3.org/2000/svg" p-id="10857" width="16" height="16">
|
|
||||||
<path
|
<!-- 商品列表 -->
|
||||||
d="M938.855808 638.776382l0 270.299169c0 27.41028-22.210861 49.634444-49.621141 49.634444l-754.442728 0c-27.41028 0-49.647747-22.224164-49.647747-49.634444L85.144192 638.776382c0-27.41028 22.224164-49.634444 49.634444-49.634444s49.634444 22.224164 49.634444 49.634444l0 220.664725 655.17384 0L839.58692 638.776382c0-27.41028 22.224164-49.634444 49.634444-49.634444S938.855808 611.366102 938.855808 638.776382zM349.445764 351.817788l112.918769-115.288746 0 429.77837c0 27.411303 22.224164 49.634444 49.634444 49.634444 27.41028 0 49.634444-22.223141 49.634444-49.634444L561.633421 236.534158 674.547073 351.812671c9.722432 9.927093 22.591531 14.904455 35.470863 14.904455 12.524245 0 25.071002-4.716418 34.725896-14.172791 19.583011-19.184945 19.913539-50.608631 0.733711-70.190619L547.478026 80.195483c-9.335622-9.535167-22.116717-14.905478-35.46063-14.905478-13.338796 0-26.120914 5.370311-35.456536 14.900362L278.542924 282.3486c-19.184945 19.588127-18.86465 51.010791 0.722454 70.190619C298.847365 371.724163 330.271052 371.394658 349.445764 351.817788z"
|
<div class="goods-container" v-loading="goodSLoading">
|
||||||
p-id="10858" fill="var(--color-primary)"></path>
|
<template v-if="!isDomain">
|
||||||
</svg>
|
<div class="empty-state" v-if="goodsList.length === 0 && !goodSLoading">
|
||||||
{{lang.template_text132}}
|
<el-empty :description="lang.no_goods"></el-empty>
|
||||||
</div>
|
|
||||||
<el-button @click="batchSearchDomain" type="primary"
|
|
||||||
:loading="batchLoading">{{lang.template_text112}}</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="domain-content">
|
|
||||||
<div class="domain-left">
|
<div v-else class="goods-grid">
|
||||||
<div class="domain-one" v-if="regType === '1'">
|
<div class="product-card"
|
||||||
<div class="domain-one-list" v-if="domainList.length !==0" v-loading="isSearching">
|
:class="{'product-card-disabled': item.stock_control === 1 && item.qty <= 0}"
|
||||||
<div class="search-title">
|
:style="{'animation-delay': (index * 0.06) + 's'}"
|
||||||
<span>{{lang.template_text96}}</span>
|
v-for="(item,index) in goodsList" :key="index">
|
||||||
<span class="search-fillter is_select" @click="openFilter"><i
|
|
||||||
class="el-icon-search"></i>{{isShowFilrer ? lang.wx_tip15: lang.wx_tip14}}</span>
|
<div class="card-header">
|
||||||
</div>
|
<h3 class="card-title">{{ item.name }}</h3>
|
||||||
<div class="fillter-list" v-if="isShowFilrer && fillterDomainSuffix.length > 0">
|
<div class="card-badges">
|
||||||
<div class="fillter-item" :class="{'is_select':selectFilterSuffix.includes(item)}"
|
<span class="badge badge-stock-low"
|
||||||
v-for="item in fillterDomainSuffix" :key="item" @click="handelFilterSuffix(item)">
|
v-if="item.stock_control === 1 && item.qty > 0 && item.qty <= 5">
|
||||||
{{item}}
|
{{lang.stock}}：{{item.qty}}
|
||||||
</div>
|
</span>
|
||||||
</div>
|
<span class="badge badge-sold-out"
|
||||||
<div class="domain-list">
|
v-if="item.stock_control === 1 && item.qty <= 0">
|
||||||
<div class="domain-item" v-for="(item,index) in calcDomainList" :key="index">
|
{{lang.shoppingCar_tip_text13 || '已售罄'}}
|
||||||
<div class="item-left">
|
</span>
|
||||||
<span class="domain-name">{{item.name}}</span>
|
<span class="badge badge-level"
|
||||||
<span class="domain-status" v-if="item.avail === 0">{{lang.template_text97}}</span>
|
v-if="item.client_level_name && item.client_level_name !== ''">
|
||||||
<span class="domain-status"
|
{{lang.shoppingCar_tip_text15}}
|
||||||
v-if="(item.avail === 1 || item.avail === -2) && item.description">{{item.description}}</span>
|
</span>
|
||||||
</div>
|
|
||||||
<div class="item-right">
|
|
||||||
<div class="premium-type" v-if="item.type && item.type === 'premium'">
|
|
||||||
{{lang.template_text98}}
|
|
||||||
</div>
|
|
||||||
<el-popover placement="bottom" trigger="hover" v-if="item.avail === 1">
|
|
||||||
<div class="pirce-box" slot="reference" v-loading="item.priceLoading">
|
|
||||||
<span class="now-price">{{commonData.currency_prefix}}<span
|
|
||||||
style="font-size: 0.18rem; color: var(--color-price-text);">{{item.showPrice}}
|
|
||||||
</span><span style="color: #485169;">/{{lang.common_cloud_text112}}</span>
|
|
||||||
</span>
|
|
||||||
<i style="margin-left: 0.1rem;color: #F6F7FB;" class="el-icon-arrow-down"></i>
|
|
||||||
</div>
|
|
||||||
<div class="price-list">
|
|
||||||
<div class="price-item">
|
|
||||||
<div class="price-year"></div>
|
|
||||||
<div class="price-new">{{lang.template_text99}}</div>
|
|
||||||
<div class="price-renew">{{lang.template_text100}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="price-item" v-for="items in item.priceArr" :key="items.buyyear">
|
|
||||||
<div class="price-year">{{items.buyyear}}{{lang.template_text101}}</div>
|
|
||||||
<div class="price-new">{{commonData.currency_prefix}}{{items.buyprice}}</div>
|
|
||||||
<div class="price-renew">{{commonData.currency_prefix}}{{items.renewprice}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-popover>
|
|
||||||
<el-button class="add-btn" type="primary" :plain="isAddCart(item)"
|
|
||||||
:disabled="isAddCart(item)" v-if="item.avail === 1"
|
|
||||||
@click="addCart(item)">{{lang.template_text102}}</el-button>
|
|
||||||
<div class="whois-box" v-if="item.avail === 0" @click="goWhois(item)">
|
|
||||||
{{lang.template_text103}}
|
|
||||||
</div>
|
|
||||||
<div v-if="item.avail === -1">{{lang.template_text104}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<template v-else>
|
</div>
|
||||||
<div class="search-title">{{lang.template_text93}}</div>
|
|
||||||
<div class="start-search" v-loading="isSearching">
|
<div class="card-tags"
|
||||||
<img src="/{$template_catalog}/template/{$themes}/img/goodsList/search_domain.png" alt="">
|
v-if="(item.pay_ontrial && item.pay_ontrial?.status === 1) || item.aodun_firewall_product || item.activeList.length > 0 || item.addon_coin === 1">
|
||||||
<p>{{lang.template_text105}}</p>
|
<span class="tag tag-trial"
|
||||||
</div>
|
v-if="item.pay_ontrial && item.pay_ontrial?.status === 1">
|
||||||
|
{{lang.support_trial}}
|
||||||
|
</span>
|
||||||
|
<span class="tag tag-firewall" v-if="item.aodun_firewall_product">
|
||||||
|
{{lang.firewall_text1}}
|
||||||
|
</span>
|
||||||
|
<span class="tag tag-coin" v-if="item.addon_coin === 1">
|
||||||
|
{{lang.coin_text10}}{{item.addon_coin_name}}
|
||||||
|
</span>
|
||||||
|
<template v-for="active in item.activeList">
|
||||||
|
<el-popover placement="top-start" trigger="hover">
|
||||||
|
<div class="active-item">
|
||||||
|
<span v-if="active.type === 'percent'">{{lang.goods_text1}} {{active.value}}%</span>
|
||||||
|
<span v-if="active.type === 'reduce'">{{lang.goods_text2}} {{active.full}} {{lang.goods_text3}} {{active.value}}</span>
|
||||||
|
</div>
|
||||||
|
<span class="tag tag-promo" slot="reference">{{active.name}}</span>
|
||||||
|
</el-popover>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="batch-box" v-else>
|
|
||||||
<div class="batch-main">
|
<div class="card-desc" v-html="item.description"></div>
|
||||||
<template v-if="availList.length !== 0 || unavailList.length !==0 || faillList.length !== 0">
|
|
||||||
<div class="search-title">{{lang.template_text113}}({{availList.length}})</div>
|
<div class="card-footer">
|
||||||
<div class="avail-list" v-loading="batchLoading">
|
<div class="card-price">
|
||||||
<el-checkbox-group v-model="batchCheckGroup" @change="handleBatchChange">
|
<div class="price-current">
|
||||||
<div class="batch-item" v-for="(item,index) in availList" :key="index">
|
<span class="price-symbol">{{commonData.currency_prefix}}</span>
|
||||||
<div class="item-left">
|
<span class="price-amount">{{item.price_discounted || item.price}}</span>
|
||||||
<el-checkbox :label="item.name">
|
<span class="price-cycle">{{item.cycle ? '/' + item.cycle : ''}}</span>
|
||||||
<span class="domain-name">{{item.name}}</span>
|
</div>
|
||||||
</el-checkbox>
|
<div class="price-original"
|
||||||
<span class="domain-status" v-if="item.avail === 0">{{lang.template_text114}}</span>
|
v-if="item.price_discounted && item.price != item.price_discounted">
|
||||||
<span class="domain-status"
|
{{commonData.currency_prefix}}{{item.price}}
|
||||||
v-if="(item.avail === 1 || item.avail === -2) && item.description">{{item.description}}</span>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="item-right">
|
|
||||||
<div class="premium-type" v-if="item.type && item.type === 'premium'">
|
|
||||||
{{lang.template_text115}}
|
|
||||||
</div>
|
|
||||||
<el-popover placement="bottom" trigger="hover" v-if="item.avail === 1">
|
|
||||||
<div class="pirce-box" slot="reference" v-loading="item.priceLoading">
|
|
||||||
<span class="now-price">{{commonData.currency_prefix}}<span
|
|
||||||
style="font-size: 0.18rem; color: var(--color-price-text);">{{item.showPrice}}
|
|
||||||
</span><span style="color: #485169;">/{{lang.common_cloud_text112}}</span>
|
|
||||||
</span>
|
|
||||||
<i style="margin-left: 0.1rem;color: #F6F7FB;" class="el-icon-arrow-down"></i>
|
|
||||||
</div>
|
|
||||||
<div class="price-list">
|
|
||||||
<div class="price-item">
|
|
||||||
<div class="price-year"></div>
|
|
||||||
<div class="price-new">{{lang.template_text99}}</div>
|
|
||||||
<div class="price-renew">{{lang.template_text100}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="price-item" v-for="items in item.priceArr" :key="items.buyyear">
|
|
||||||
<div class="price-year">{{items.buyyear}}{{lang.template_text101}}</div>
|
|
||||||
<div class="price-new">{{commonData.currency_prefix}}{{items.buyprice}}</div>
|
|
||||||
<div class="price-renew">{{commonData.currency_prefix}}{{items.renewprice}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-popover>
|
|
||||||
<el-button class="add-btn" type="primary" :plain="isAddCart(item)"
|
|
||||||
:disabled="isAddCart(item)" v-if="item.avail === 1"
|
|
||||||
@click="addCart(item)">{{lang.template_text102}}</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-checkbox-group>
|
|
||||||
</div>
|
|
||||||
<div class="all-check" v-if="availList.length > 0">
|
|
||||||
<el-checkbox :indeterminate="isBatchIndeterminate" v-model="isBatchAllCheck"
|
|
||||||
@change="handleBatchCheckAllChange">{{lang.template_text116}}</el-checkbox>
|
|
||||||
<el-button @click="addAllCart" type="primary"
|
|
||||||
:loading="addAllLoading">{{lang.template_text117}}</el-button>
|
|
||||||
</div>
|
|
||||||
<el-collapse v-model="activeNames" v-loading="batchLoading">
|
|
||||||
<el-collapse-item name="1" style="margin-top: 0.6rem;" v-show="unavailList.length > 0">
|
|
||||||
<template slot="title">
|
|
||||||
<div class="unavail-title">
|
|
||||||
<span>{{lang.template_text118}}({{unavailList.length}})</span>
|
|
||||||
<span class="open-text" v-if="activeNames.includes('1')">{{lang.template_text119}}</span>
|
|
||||||
<span class="open-text" v-else>{{lang.template_text120}}</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div class="unavail-list">
|
|
||||||
<div class="unavail-item" v-for="(item,index) in unavailList" :key="index">
|
|
||||||
<span class="unavail-name">{{item.name}}</span>
|
|
||||||
<span class="unavail-reason">{{item.reason}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
<el-collapse-item name="2" style="margin-top: 0.4rem;" v-show="faillList.length > 0">
|
|
||||||
<template slot="title">
|
|
||||||
<div class="unavail-title">
|
|
||||||
<span>{{lang.template_text121}}({{faillList.length}})</span>
|
|
||||||
<span class="open-text" v-if="activeNames.includes('2')">{{lang.template_text119}}</span>
|
|
||||||
<span class="open-text" v-else>{{lang.template_text120}}</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div class="unavail-list">
|
|
||||||
<div class="unavail-item" v-for="(item,index) in faillList" :key="index">
|
|
||||||
<span class="unavail-name">{{item.name}}</span>
|
|
||||||
<span class="unavail-reason">{{item.reason}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
</el-collapse>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<div class="search-title">{{lang.template_text94}}</div>
|
|
||||||
<div class="batch-search" v-loading="batchLoading">
|
|
||||||
<img src="/{$template_catalog}/template/{$themes}/img/goodsList/search_domain.png" alt="">
|
|
||||||
<p>{{lang.template_text122}}</p>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<el-button class="card-buy-btn" type="primary"
|
||||||
</div>
|
:disabled="item.stock_control === 1 && item.qty <= 0"
|
||||||
<div class="domain-right">
|
@click="goOrder(item)">
|
||||||
<div class="car-top">
|
{{lang.buy}}
|
||||||
<span>{{lang.template_text123}}</span>
|
</el-button>
|
||||||
<span class="clear-car" @click="deleteClearCart()">
|
|
||||||
<svg t="1750669572885" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
|
||||||
xmlns="http://www.w3.org/2000/svg" p-id="9781" width="16" height="16">
|
|
||||||
<path
|
|
||||||
d="M895.398771 267.822944 671.950695 267.822944 671.950695 100.238145c0-46.261745-37.501958-83.792903-83.790889-83.792903l-167.583792 0c-46.287924 0-83.79391 37.531157-83.79391 83.792903l0 167.584799-223.445056 0c-61.698102 0-111.723535 50.024426-111.723535 111.723535l0 55.860257c0 41.398553 22.522722 77.540227 55.981082 96.841965 0.190299 56.371748-0.120825 280.654522-0.120825 377.979786 3.818059 112.787799 111.723535 111.723535 111.723535 111.723535l307.238966 0 0-0.872958 20.968111 0c2.225187 0.568883 4.557103 0.872958 6.961514 0.872958s4.736326-0.304075 6.961514-0.872958l181.59341 0c2.225187 0.568883 4.557103 0.872958 6.961514 0.872958s4.735319-0.304075 6.960507-0.872958l132.69366 0c0 0 107.902455 1.066278 111.721521-111.532229 0-97.144027-0.310117-320.985791-0.119818-377.298133 33.45836-19.301738 55.983096-55.443412 55.983096-96.842972L1007.1213 379.546479C1007.122306 317.84737 957.096873 267.822944 895.398771 267.822944zM811.604862 965.328556l-83.790889 0L727.813973 742.644695c0-15.43837-12.494276-27.929625-27.930632-27.929625-15.43837 0-27.932646 12.491255-27.932646 27.929625l0 222.683861-139.65316 0L532.297535 742.644695c0-15.43837-12.491255-27.929625-27.930632-27.929625-15.43837 0-27.929625 12.491255-27.929625 27.929625l0 223.44707c0 0-69.151976 0-139.654167 0L336.783111 742.644695c0-15.43837-12.491255-27.929625-27.930632-27.929625-15.43837 0-27.929625 12.491255-27.929625 27.929625l0 223.44707-83.79391 0c-47.459923 0-84.064758-31.259351-83.790889-83.792903 0.351398-71.180823 0.136935-263.033253 0.040275-335.168591l781.981174 0c-0.097667 72.050761-0.311123 263.506483 0.040275 334.540303C895.670627 934.122569 859.066799 965.328556 811.604862 965.328556zM951.260036 435.406736c0 30.849554-25.01171 55.860257-55.860257 55.860257L113.337047 491.266993c-30.849554 0-55.862271-25.01171-55.862271-55.860257L57.474777 379.546479c0-30.849554 25.013724-55.863278 55.862271-55.863278l279.308334 0 0-167.583792c0-46.259732 37.502965-83.792903 83.790889-83.792903l55.860257 0c46.287924 0 83.792903 37.533171 83.792903 83.792903l0 167.583792 279.308334 0c30.849554 0 55.860257 25.013724 55.860257 55.863278L951.258022 435.406736z"
|
|
||||||
p-id="9782"></path>
|
|
||||||
</svg>
|
|
||||||
{{lang.template_text124}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="car-box" v-loading="isCarLoading">
|
|
||||||
<div class="car-no" v-if="carList.length === 0">
|
|
||||||
{{lang.template_text125}}
|
|
||||||
<span v-show="carList.length === 0">{{lang.template_text126}}</span>
|
|
||||||
<span v-if="!isLogin" class="blue-a-text" @click="goLogin">{{lang.template_text127}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="car-list" v-else>
|
|
||||||
<el-checkbox-group v-model="checkList" @change="handleCheckedCitiesChange">
|
|
||||||
<div class="car-item" v-for="(item,index) in carList" :key="index">
|
|
||||||
<div class="caritem-top">
|
|
||||||
<div class="car-name">
|
|
||||||
<el-checkbox :label="item.positions">
|
|
||||||
<span class="shop-name">{{item.config_options.domain}}</span>
|
|
||||||
</el-checkbox>
|
|
||||||
<div class="car-del" @click="deleteCart(item)">
|
|
||||||
<svg t="1750669572885" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
|
||||||
xmlns="http://www.w3.org/2000/svg" p-id="9781" width="16" height="16">
|
|
||||||
<path
|
|
||||||
d="M895.398771 267.822944 671.950695 267.822944 671.950695 100.238145c0-46.261745-37.501958-83.792903-83.790889-83.792903l-167.583792 0c-46.287924 0-83.79391 37.531157-83.79391 83.792903l0 167.584799-223.445056 0c-61.698102 0-111.723535 50.024426-111.723535 111.723535l0 55.860257c0 41.398553 22.522722 77.540227 55.981082 96.841965 0.190299 56.371748-0.120825 280.654522-0.120825 377.979786 3.818059 112.787799 111.723535 111.723535 111.723535 111.723535l307.238966 0 0-0.872958 20.968111 0c2.225187 0.568883 4.557103 0.872958 6.961514 0.872958s4.736326-0.304075 6.961514-0.872958l181.59341 0c2.225187 0.568883 4.557103 0.872958 6.961514 0.872958s4.735319-0.304075 6.960507-0.872958l132.69366 0c0 0 107.902455 1.066278 111.721521-111.532229 0-97.144027-0.310117-320.985791-0.119818-377.298133 33.45836-19.301738 55.983096-55.443412 55.983096-96.842972L1007.1213 379.546479C1007.122306 317.84737 957.096873 267.822944 895.398771 267.822944zM811.604862 965.328556l-83.790889 0L727.813973 742.644695c0-15.43837-12.494276-27.929625-27.930632-27.929625-15.43837 0-27.932646 12.491255-27.932646 27.929625l0 222.683861-139.65316 0L532.297535 742.644695c0-15.43837-12.491255-27.929625-27.930632-27.929625-15.43837 0-27.929625 12.491255-27.929625 27.929625l0 223.44707c0 0-69.151976 0-139.654167 0L336.783111 742.644695c0-15.43837-12.491255-27.929625-27.930632-27.929625-15.43837 0-27.929625 12.491255-27.929625 27.929625l0 223.44707-83.79391 0c-47.459923 0-84.064758-31.259351-83.790889-83.792903 0.351398-71.180823 0.136935-263.033253 0.040275-335.168591l781.981174 0c-0.097667 72.050761-0.311123 263.506483 0.040275 334.540303C895.670627 934.122569 859.066799 965.328556 811.604862 965.328556zM951.260036 435.406736c0 30.849554-25.01171 55.860257-55.860257 55.860257L113.337047 491.266993c-30.849554 0-55.862271-25.01171-55.862271-55.860257L57.474777 379.546479c0-30.849554 25.013724-55.863278 55.862271-55.863278l279.308334 0 0-167.583792c0-46.259732 37.502965-83.792903 83.790889-83.792903l55.860257 0c46.287924 0 83.792903 37.533171 83.792903 83.792903l0 167.583792 279.308334 0c30.849554 0 55.860257 25.013724 55.860257 55.863278L951.258022 435.406736z"
|
|
||||||
p-id="9782"></path>
|
|
||||||
</svg>
|
|
||||||
{{lang.template_text128}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="car-year">
|
|
||||||
<el-select v-model="item.selectYear" @change="(val)=>changeCart(val,item)">
|
|
||||||
<el-option v-for="items in item.priceArr" :key="items.buyyear"
|
|
||||||
:label="items.buyyear + lang.template_text101" :value="items.buyyear">
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="car-bottom">
|
|
||||||
<span>{{lang.template_text87}}：</span>
|
|
||||||
<div v-loading="item.priceLoading" class="car-price">
|
|
||||||
{{commonData.currency_prefix}}<span
|
|
||||||
style="font-size: 0.18rem; margin-right: 0.02rem;">{{priceCalc(item)}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-checkbox-group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="car-money">
|
|
||||||
<el-checkbox :indeterminate="isIndeterminate" v-model="isAllCheck"
|
|
||||||
@change="handleCheckAllChange">{{lang.template_text129}}</el-checkbox>
|
|
||||||
<div class="mon-right">
|
|
||||||
<p class="now-price">
|
|
||||||
{{lang.template_text87}}:
|
|
||||||
<span class="money-text">{{commonData.currency_prefix}}<span
|
|
||||||
style="font-size: 0.24rem;">{{totalMoneyCalc.toFixed(2)}}</span>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
<p class="original-price" v-if="showOriginal">
|
|
||||||
<span class="hide">{{lang.template_text87}}:{{commonData.currency_prefix}}</span>
|
|
||||||
{{originalPrice}}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="car-settle">
|
|
||||||
<el-button type="primary" class="settle-btn"
|
|
||||||
@click="goBuyDomain">{{lang.template_text130}}</el-button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</template>
|
|
||||||
|
<!-- ====== 域名搜索区域 ====== -->
|
||||||
|
<template v-else>
|
||||||
|
<div class="domain-box">
|
||||||
|
<div class="register-type">
|
||||||
|
<span class="reg-ridio" :class="regType === '1' ? 'isActice' : ''"
|
||||||
|
@click="regType = '1'">{{lang.template_text93}}</span>
|
||||||
|
<template v-if="domainConfig.batch_search_domain === 1">
|
||||||
|
<el-divider direction="vertical"></el-divider>
|
||||||
|
<span class="reg-ridio" :class="regType === '2' ? 'isActice' : ''"
|
||||||
|
@click="regType = '2'">{{lang.template_text94}}</span>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div class="domain-search" v-if="regType === '1'">
|
||||||
|
<el-input :placeholder="lang.template_text92" v-model="domainInput" clearable
|
||||||
|
@keyup.enter.native="handelDomainSearch">
|
||||||
|
<div class="suffix-box" slot="append" @click="isShowSuffixBox = !isShowSuffixBox">
|
||||||
|
{{selectSuffix}}
|
||||||
|
<i class="el-icon-arrow-down select-btn"></i>
|
||||||
|
</div>
|
||||||
|
</el-input>
|
||||||
|
<el-button class="search-button" @click="handelDomainSearch"
|
||||||
|
:loading="isSearching">{{lang.template_text95}}</el-button>
|
||||||
|
<div class="suffix-list" v-show="isShowSuffixBox">
|
||||||
|
<div class="suffix-item" @click="handelSelectSuffix(item.suffix)"
|
||||||
|
:class="selectSuffix === item.suffix ? 'suffix-active' : ''" v-for="item in suffixList"
|
||||||
|
:key="item.suffix">{{item.suffix}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="batch-search-box" v-if="regType === '2'">
|
||||||
|
<div class="batch-tips" v-loading="batchLoading">
|
||||||
|
<el-input v-model="textarea2" resize="none" class="input-batch" type="textarea"
|
||||||
|
:placeholder="`${lang.template_text106}\n${lang.template_text107}${domainConfig.number_limit}${lang.template_text108}${domainConfig.number_limit}${lang.template_text109}\n${lang.template_text110}\n${lang.template_text111}`">
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<div class="batch-btn">
|
||||||
|
<div class="upload-btn" @click="isShowUpload = true">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="16" height="16"><path d="M938.855808 638.776382l0 270.299169c0 27.41028-22.210861 49.634444-49.621141 49.634444l-754.442728 0c-27.41028 0-49.647747-22.224164-49.647747-49.634444L85.144192 638.776382c0-27.41028 22.224164-49.634444 49.634444-49.634444s49.634444 22.224164 49.634444 49.634444l0 220.664725 655.17384 0L839.58692 638.776382c0-27.41028 22.224164-49.634444 49.634444-49.634444S938.855808 611.366102 938.855808 638.776382zM349.445764 351.817788l112.918769-115.288746 0 429.77837c0 27.411303 22.224164 49.634444 49.634444 49.634444 27.41028 0 49.634444-22.223141 49.634444-49.634444L561.633421 236.534158 674.547073 351.812671c9.722432 9.927093 22.591531 14.904455 35.470863 14.904455 12.524245 0 25.071002-4.716418 34.725896-14.172791 19.583011-19.184945 19.913539-50.608631 0.733711-70.190619L547.478026 80.195483c-9.335622-9.535167-22.116717-14.905478-35.46063-14.905478-13.338796 0-26.120914 5.370311-35.456536 14.900362L278.542924 282.3486c-19.184945 19.588127-18.86465 51.010791 0.722454 70.190619C298.847365 371.724163 330.271052 371.394658 349.445764 351.817788z" fill="var(--color-primary)"/></svg>
|
||||||
|
{{lang.template_text132}}
|
||||||
|
</div>
|
||||||
|
<el-button @click="batchSearchDomain" type="primary"
|
||||||
|
:loading="batchLoading">{{lang.template_text112}}</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="domain-content">
|
||||||
|
<div class="domain-left">
|
||||||
|
<div class="domain-one" v-if="regType === '1'">
|
||||||
|
<div class="domain-one-list" v-if="domainList.length !==0" v-loading="isSearching">
|
||||||
|
<div class="search-title">
|
||||||
|
<span>{{lang.template_text96}}</span>
|
||||||
|
<span class="search-fillter is_select" @click="openFilter"><i class="el-icon-search"></i>{{isShowFilrer ? lang.wx_tip15: lang.wx_tip14}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="fillter-list" v-if="isShowFilrer && fillterDomainSuffix.length > 0">
|
||||||
|
<div class="fillter-item" :class="{'is_select':selectFilterSuffix.includes(item)}"
|
||||||
|
v-for="item in fillterDomainSuffix" :key="item" @click="handelFilterSuffix(item)">
|
||||||
|
{{item}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="domain-list">
|
||||||
|
<div class="domain-item" v-for="(item,index) in calcDomainList" :key="index">
|
||||||
|
<div class="item-left">
|
||||||
|
<span class="domain-name">{{item.name}}</span>
|
||||||
|
<span class="domain-status" v-if="item.avail === 0">{{lang.template_text97}}</span>
|
||||||
|
<span class="domain-status" v-if="(item.avail === 1 || item.avail === -2) && item.description">{{item.description}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="item-right">
|
||||||
|
<div class="premium-type" v-if="item.type && item.type === 'premium'">{{lang.template_text98}}</div>
|
||||||
|
<el-popover placement="bottom" trigger="hover" v-if="item.avail === 1">
|
||||||
|
<div class="pirce-box" slot="reference" v-loading="item.priceLoading">
|
||||||
|
<span class="now-price">{{commonData.currency_prefix}}<span style="font-size: 0.18rem; color: var(--color-price-text);">{{item.showPrice}}</span><span style="color: #485169;">/{{lang.common_cloud_text112}}</span></span>
|
||||||
|
<i style="margin-left: 0.1rem;color: #F6F7FB;" class="el-icon-arrow-down"></i>
|
||||||
|
</div>
|
||||||
|
<div class="price-list">
|
||||||
|
<div class="price-item">
|
||||||
|
<div class="price-year"></div>
|
||||||
|
<div class="price-new">{{lang.template_text99}}</div>
|
||||||
|
<div class="price-renew">{{lang.template_text100}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="price-item" v-for="items in item.priceArr" :key="items.buyyear">
|
||||||
|
<div class="price-year">{{items.buyyear}}{{lang.template_text101}}</div>
|
||||||
|
<div class="price-new">{{commonData.currency_prefix}}{{items.buyprice}}</div>
|
||||||
|
<div class="price-renew">{{commonData.currency_prefix}}{{items.renewprice}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-popover>
|
||||||
|
<el-button class="add-btn" type="primary" :plain="isAddCart(item)"
|
||||||
|
:disabled="isAddCart(item)" v-if="item.avail === 1"
|
||||||
|
@click="addCart(item)">{{lang.template_text102}}</el-button>
|
||||||
|
<div class="whois-box" v-if="item.avail === 0" @click="goWhois(item)">{{lang.template_text103}}</div>
|
||||||
|
<div v-if="item.avail === -1">{{lang.template_text104}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<template v-else>
|
||||||
|
<div class="search-title">{{lang.template_text93}}</div>
|
||||||
|
<div class="start-search" v-loading="isSearching">
|
||||||
|
<img src="/{$template_catalog}/template/{$themes}/img/goodsList/search_domain.png" alt="">
|
||||||
|
<p>{{lang.template_text105}}</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div class="batch-box" v-else>
|
||||||
|
<div class="batch-main">
|
||||||
|
<template v-if="availList.length !== 0 || unavailList.length !==0 || faillList.length !== 0">
|
||||||
|
<div class="search-title">{{lang.template_text113}}({{availList.length}})</div>
|
||||||
|
<div class="avail-list" v-loading="batchLoading">
|
||||||
|
<el-checkbox-group v-model="batchCheckGroup" @change="handleBatchChange">
|
||||||
|
<div class="batch-item" v-for="(item,index) in availList" :key="index">
|
||||||
|
<div class="item-left">
|
||||||
|
<el-checkbox :label="item.name">
|
||||||
|
<span class="domain-name">{{item.name}}</span>
|
||||||
|
</el-checkbox>
|
||||||
|
<span class="domain-status" v-if="item.avail === 0">{{lang.template_text114}}</span>
|
||||||
|
<span class="domain-status" v-if="(item.avail === 1 || item.avail === -2) && item.description">{{item.description}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="item-right">
|
||||||
|
<div class="premium-type" v-if="item.type && item.type === 'premium'">{{lang.template_text115}}</div>
|
||||||
|
<el-popover placement="bottom" trigger="hover" v-if="item.avail === 1">
|
||||||
|
<div class="pirce-box" slot="reference" v-loading="item.priceLoading">
|
||||||
|
<span class="now-price">{{commonData.currency_prefix}}<span style="font-size: 0.18rem; color: var(--color-price-text);">{{item.showPrice}}</span><span style="color: #485169;">/{{lang.common_cloud_text112}}</span></span>
|
||||||
|
<i style="margin-left: 0.1rem;color: #F6F7FB;" class="el-icon-arrow-down"></i>
|
||||||
|
</div>
|
||||||
|
<div class="price-list">
|
||||||
|
<div class="price-item">
|
||||||
|
<div class="price-year"></div>
|
||||||
|
<div class="price-new">{{lang.template_text99}}</div>
|
||||||
|
<div class="price-renew">{{lang.template_text100}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="price-item" v-for="items in item.priceArr" :key="items.buyyear">
|
||||||
|
<div class="price-year">{{items.buyyear}}{{lang.template_text101}}</div>
|
||||||
|
<div class="price-new">{{commonData.currency_prefix}}{{items.buyprice}}</div>
|
||||||
|
<div class="price-renew">{{commonData.currency_prefix}}{{items.renewprice}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-popover>
|
||||||
|
<el-button class="add-btn" type="primary" :plain="isAddCart(item)"
|
||||||
|
:disabled="isAddCart(item)" v-if="item.avail === 1"
|
||||||
|
@click="addCart(item)">{{lang.template_text102}}</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</div>
|
||||||
|
<div class="all-check" v-if="availList.length > 0">
|
||||||
|
<el-checkbox :indeterminate="isBatchIndeterminate" v-model="isBatchAllCheck"
|
||||||
|
@change="handleBatchCheckAllChange">{{lang.template_text116}}</el-checkbox>
|
||||||
|
<el-button @click="addAllCart" type="primary"
|
||||||
|
:loading="addAllLoading">{{lang.template_text117}}</el-button>
|
||||||
|
</div>
|
||||||
|
<el-collapse v-model="activeNames" v-loading="batchLoading">
|
||||||
|
<el-collapse-item name="1" style="margin-top: 0.6rem;" v-show="unavailList.length > 0">
|
||||||
|
<template slot="title">
|
||||||
|
<div class="unavail-title">
|
||||||
|
<span>{{lang.template_text118}}({{unavailList.length}})</span>
|
||||||
|
<span class="open-text" v-if="activeNames.includes('1')">{{lang.template_text119}}</span>
|
||||||
|
<span class="open-text" v-else>{{lang.template_text120}}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="unavail-list">
|
||||||
|
<div class="unavail-item" v-for="(item,index) in unavailList" :key="index">
|
||||||
|
<span class="unavail-name">{{item.name}}</span>
|
||||||
|
<span class="unavail-reason">{{item.reason}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
<el-collapse-item name="2" style="margin-top: 0.4rem;" v-show="faillList.length > 0">
|
||||||
|
<template slot="title">
|
||||||
|
<div class="unavail-title">
|
||||||
|
<span>{{lang.template_text121}}({{faillList.length}})</span>
|
||||||
|
<span class="open-text" v-if="activeNames.includes('2')">{{lang.template_text119}}</span>
|
||||||
|
<span class="open-text" v-else>{{lang.template_text120}}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="unavail-list">
|
||||||
|
<div class="unavail-item" v-for="(item,index) in faillList" :key="index">
|
||||||
|
<span class="unavail-name">{{item.name}}</span>
|
||||||
|
<span class="unavail-reason">{{item.reason}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<div class="search-title">{{lang.template_text94}}</div>
|
||||||
|
<div class="batch-search" v-loading="batchLoading">
|
||||||
|
<img src="/{$template_catalog}/template/{$themes}/img/goodsList/search_domain.png" alt="">
|
||||||
|
<p>{{lang.template_text122}}</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="domain-right">
|
||||||
|
<div class="car-top">
|
||||||
|
<span>{{lang.template_text123}}</span>
|
||||||
|
<span class="clear-car" @click="deleteClearCart()">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="16" height="16"><path d="M895.398771 267.822944 671.950695 267.822944 671.950695 100.238145c0-46.261745-37.501958-83.792903-83.790889-83.792903l-167.583792 0c-46.287924 0-83.79391 37.531157-83.79391 83.792903l0 167.584799-223.445056 0c-61.698102 0-111.723535 50.024426-111.723535 111.723535l0 55.860257c0 41.398553 22.522722 77.540227 55.981082 96.841965 0.190299 56.371748-0.120825 280.654522-0.120825 377.979786 3.818059 112.787799 111.723535 111.723535 111.723535 111.723535l307.238966 0 0-0.872958 20.968111 0c2.225187 0.568883 4.557103 0.872958 6.961514 0.872958s4.736326-0.304075 6.961514-0.872958l181.59341 0c2.225187 0.568883 4.557103 0.872958 6.961514 0.872958s4.735319-0.304075 6.960507-0.872958l132.69366 0c0 0 107.902455 1.066278 111.721521-111.532229 0-97.144027-0.310117-320.985791-0.119818-377.298133 33.45836-19.301738 55.983096-55.443412 55.983096-96.842972L1007.1213 379.546479C1007.122306 317.84737 957.096873 267.822944 895.398771 267.822944z" fill="currentColor"/></svg>
|
||||||
|
{{lang.template_text124}}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="car-box" v-loading="isCarLoading">
|
||||||
|
<div class="car-no" v-if="carList.length === 0">
|
||||||
|
{{lang.template_text125}}
|
||||||
|
<span v-show="carList.length === 0">{{lang.template_text126}}</span>
|
||||||
|
<span v-if="!isLogin" class="blue-a-text" @click="goLogin">{{lang.template_text127}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="car-list" v-else>
|
||||||
|
<el-checkbox-group v-model="checkList" @change="handleCheckedCitiesChange">
|
||||||
|
<div class="car-item" v-for="(item,index) in carList" :key="index">
|
||||||
|
<div class="caritem-top">
|
||||||
|
<div class="car-name">
|
||||||
|
<el-checkbox :label="item.positions">
|
||||||
|
<span class="shop-name">{{item.config_options.domain}}</span>
|
||||||
|
</el-checkbox>
|
||||||
|
<div class="car-del" @click="deleteCart(item)">{{lang.template_text128}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="car-year">
|
||||||
|
<el-select v-model="item.selectYear" @change="(val)=>changeCart(val,item)">
|
||||||
|
<el-option v-for="items in item.priceArr" :key="items.buyyear"
|
||||||
|
:label="items.buyyear + lang.template_text101" :value="items.buyyear">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="car-bottom">
|
||||||
|
<span>{{lang.template_text87}}：</span>
|
||||||
|
<div v-loading="item.priceLoading" class="car-price">
|
||||||
|
{{commonData.currency_prefix}}<span style="font-size: 0.18rem; margin-right: 0.02rem;">{{priceCalc(item)}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="car-money">
|
||||||
|
<el-checkbox :indeterminate="isIndeterminate" v-model="isAllCheck"
|
||||||
|
@change="handleCheckAllChange">{{lang.template_text129}}</el-checkbox>
|
||||||
|
<div class="mon-right">
|
||||||
|
<p class="now-price">
|
||||||
|
{{lang.template_text87}}:
|
||||||
|
<span class="money-text">{{commonData.currency_prefix}}<span style="font-size: 0.24rem;">{{totalMoneyCalc.toFixed(2)}}</span></span>
|
||||||
|
</p>
|
||||||
|
<p class="original-price" v-if="showOriginal">
|
||||||
|
<span class="hide">{{lang.template_text87}}:{{commonData.currency_prefix}}</span>
|
||||||
|
{{originalPrice}}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="car-settle">
|
||||||
|
<el-button type="primary" class="settle-btn" @click="goBuyDomain">{{lang.template_text130}}</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<p v-if="!isDomain && !scrollDisabled && goodsList.length !==0" class="tips">{{lang.goods_loading}}</p>
|
||||||
</div>
|
</div>
|
||||||
<p v-if="!isDomain && !scrollDisabled && goodsList.length !==0" class="tips">{{lang.goods_loading}}</p>
|
|
||||||
</div>
|
</div>
|
||||||
</el-main>
|
</el-main>
|
||||||
<div class="up-dialog">
|
<div class="up-dialog">
|
||||||
@@ -446,8 +441,7 @@
|
|||||||
<div class="dia-concent">
|
<div class="dia-concent">
|
||||||
<p class="up-tips">{{lang.template_text132}}</p>
|
<p class="up-tips">{{lang.template_text132}}</p>
|
||||||
<div class="file-box">
|
<div class="file-box">
|
||||||
<input accept="text/plain" type="file" id="upFile" autocomplete="off" tabindex="-1"
|
<input accept="text/plain" type="file" id="upFile" autocomplete="off" tabindex="-1" style="display: none;">
|
||||||
style="display: none;">
|
|
||||||
<input class="file-name" :placeholder="lang.template_text133" readonly :value="fileName">
|
<input class="file-name" :placeholder="lang.template_text133" readonly :value="fileName">
|
||||||
<div class="file-btn" @click="selectFile">{{lang.template_text134}}</div>
|
<div class="file-btn" @click="selectFile">{{lang.template_text134}}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user