feat: 添加hgcart购物车模板+Drone部署同步
All checks were successful
continuous-integration/drone/push Build is passing

- 解压default_npant.tar.gz到clientarea/cart/hgcart/
- .drone.yml增加hgcart同步到cart/template/pc/
This commit is contained in:
yiqiu
2026-03-22 20:36:15 +08:00
parent 2f0cf620a2
commit a82bf8baa5
29 changed files with 6832 additions and 0 deletions

View File

View File

@@ -0,0 +1,112 @@
// 获取商品一级分组
function productGroupFirst() {
return Axios.get(`/product/group/first`);
}
//获取商品二级分组
function productGroupSecond(id) {
return Axios.get(`/product/group/second?id=${id}`, id);
}
// 商品列表
function productGoods(params) {
return Axios.get(`/product`, { params });
}
// 获取可用域名后缀
function domainSuffix(id) {
return Axios.get(`/idcsmart_domain/domain_suffix?host_id=${id}`);
}
// 域名查询
function domainSearch(params) {
return Axios.get(`/idcsmart_domain/check_domain`, { params });
}
// 获取域名价格
function domainPrice(params) {
return Axios.get(`/idcsmart_domain/get_price`, { params });
}
// 获取whois信息
function domainWhois(params) {
return Axios.get(`/idcsmart_domain/whois`, { params });
}
// 加入购物车
function addToCart(params) {
return Axios.post(`/cart`, params, { timeout: 1000 * 60 * 20 });
}
// 结算购物车
function cartCheckout(params) {
return Axios.post(`/cart/settle`, params);
}
// 获取商品活动促销信息
function eventPromotion(params) {
return Axios.get(`/event_promotion/product/${params.id}/event_promotion`, {
params
});
}
// 编辑购物车商品
function updateCart(params) {
return Axios.put(`/cart/${params.position}`, params);
}
// 删除购物车商品
function deleteCart(params) {
return Axios.delete(`/cart/${params.position}`, params);
}
// 批量删除购物车商品
function deleteCartBatch(params) {
return Axios.delete(`/cart/batch`, { params });
}
// 信息模板列表
function templateList(params) {
return Axios.get(`/idcsmart_domain/info_template`, { params });
}
// 信息模板详情
function templateDetails(id) {
return Axios.get(`/idcsmart_domain/info_template/${id}`);
}
// 新建信息模板
function templateAdd(params) {
return Axios.post(`/idcsmart_domain/info_template`, params);
}
// 删除信息模板
function templateDelete(id) {
return Axios.delete(`/idcsmart_domain/info_template/${id}`);
}
// 信息模板实名认证
function templateAuth(params) {
return Axios.post(
`/idcsmart_domain/info_template/${params.id}/certifications`,
params
);
}
// 支持的信息模板
function templateSupport(params) {
return Axios.get(`/idcsmart_domain/info_template/support`, { params });
}
// 批量查询域名
function domainBatch(params) {
return Axios.get(`/idcsmart_domain/bulk_check`, {
params,
timeout: 1000 * 60 * 20
});
}
// 获取域名设置
function domainSetting() {
return Axios.get(`/idcsmart_domain/config`);
}

View File

@@ -0,0 +1,35 @@
// 获取商品列表页
function getProduct(id) {
return Axios.get(`/menu/${id}/host`);
}
// 获取详情
function getProductDetail(id) {
return Axios.get(`/host/${id}/view`);
}
// 获取订购页
function getOrederConfig(params) {
return Axios.get(`/product/${params.id}/config_option`, { params });
}
// 产品详情
function hostDetail(params) {
return Axios.get(`/host/${params.id}`, { params });
}
// 产品合同是否逾期
function timeoutStatus(id) {
return Axios.get(`/e_contract/host/${id}/timeout`);
}
// 商品详情
function apiProductDetail(params) {
return Axios.get(`/product/${params.id}`, { params });
}
//获取商品二级分组
function productGroupSecond(id) {
return Axios.get(`/product/group/second?id=${id}`, id);
}
// 商品列表
function productGoods(params) {
return Axios.get(`/product`, { params });
}

View File

@@ -0,0 +1,48 @@
// 获取购物车
function cartList() {
return Axios.get(`/cart`);
}
//修改购物车商品数量
function editGoodsNum(index, num) {
return Axios.put(`/cart/${index}/qty`, { qty: num });
}
//批量删除购物车商品
function deleteGoods(arr) {
const params = { positions: arr };
return Axios.delete(`/cart/batch`, { data: params });
}
// 修改配置计算价格
function configOption(id, params) {
return Axios.post(`/product/${id}/config_option`, params);
}
// 结算购物车
function cart_settle(params) {
return Axios.post(`/cart/settle`, params);
}
// 获取商品折扣金额
function clientLevelAmount(params) {
return Axios.get(`/client_level/product/${params.id}/amount`, { params });
}
// 结算商品
function product_settle(params) {
return Axios.post(`/product/settle`, params);
}
//支付接口
function payLisy() {
return Axios.get(`/gateway`);
}
// 修改购物车
function updateCart(params) {
return Axios.put(`/cart/${params.position}`, params);
}
// 商品列表
function productDetail(id) {
return Axios.get(`/product/${id}`);
}

View File

@@ -0,0 +1,52 @@
.template {
height: 100%;
}
.main-card {
height: 100%;
}
.config-box {
height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
.goods-item-name {
cursor: pointer;
padding: 6px 12px;
border: 1px solid var(--color-primary);
color: var(--color-primary);
border-radius: 3px;
margin-bottom: 30px;
display: inline-block;
}
.goods-change-box {
max-width: 100%;
}
.goods-change-box .goods-item-box {
max-height: 500px;
overflow-y: auto;
padding: 0.2rem;
}
.goods-change-box .goods-item-box .goods-group-item {
margin-bottom: 0.3rem;
}
.goods-change-box .goods-item-box .goods-group-item .goods-group-name {
font-weight: 700;
font-size: 0.18rem;
margin-bottom: 0.15rem;
}
.goods-change-box .goods-item-box .goods-group-item .goods-group-info {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 15px;
row-gap: 0.1rem;
}
.goods-change-box .goods-item-box .goods-group-item .goods-group-info .option-name {
cursor: pointer;
font-size: 0.14rem;
}
.goods-change-box .goods-item-box .goods-group-item .goods-group-info .option-name:hover {
color: var(--color-primary);
}

View File

@@ -0,0 +1,68 @@
.template {
height: 100%;
}
.main-card {
height: 100%;
}
.config-box {
height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1
}
.goods-item-name {
cursor: pointer;
padding: 6px 12px;
border: 1px solid var(--color-primary);
color: var(--color-primary);
border-radius: 3px;
margin-bottom: 30px;
display: inline-block;
}
.goods-change-box {
max-width: 100%;
.goods-item-box {
max-height: 500px;
overflow-y: auto;
padding: .2rem;
.goods-group-item {
margin-bottom: .3rem;
.goods-group-name {
font-weight: 700;
font-size: .18rem;
margin-bottom: .15rem;
}
.goods-group-info {
// 一行4个 grid 布局
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 15px;
row-gap: .1rem;
.option-name {
cursor: pointer;
font-size: .14rem;
&:hover {
color: var(--color-primary);
}
}
}
}
}
}

View File

@@ -0,0 +1,968 @@
.main-title {
font-size: 0.28rem;
color: #171725;
}
.cart-des {
padding: 0.1rem;
border-radius: 0.03rem;
border: 1px solid #e6e7eb;
box-sizing: border-box;
overflow-y: auto;
margin-bottom: 0.24rem;
}
.cart-des * {
all: revert;
}
.main-content-box {
box-sizing: border-box;
padding-bottom: 0.1rem;
width: 100%;
border-radius: 0.03rem;
}
.search-box {
display: flex;
justify-content: center;
align-items: center;
}
.search-box .el-select {
width: 3.2rem;
font-size: 0.15rem;
}
.search-box .el-select .el-input__inner {
height: 0.46rem !important;
line-height: 0.46rem;
}
.search-box .el-select .el-input__suffix .el-input__icon {
line-height: 1;
}
.second-select {
margin: 0 0.1rem;
}
.second-select .el-input__inner {
height: 0.46rem;
line-height: 0.46rem;
}
.search-input {
width: 3.2rem;
}
.search-input .el-input__inner {
height: 0.46rem !important;
line-height: 0.46rem;
}
.search-btn {
margin-left: 0.1rem;
width: 0.8rem;
height: 0.46rem;
background: var(--color-primary);
border-radius: 0.03rem;
border: none;
font-size: 0.16rem;
color: rgba(255, 255, 255, 0.9);
}
.second-desc {
height: 0.4rem;
font-size: 0.14rem;
color: var(--color-danger);
background: rgba(220, 45, 45, 0.1);
margin-top: 0.24rem;
border-radius: 0.04rem;
}
.shopping-box {
box-sizing: border-box;
margin-top: 0.24rem;
min-height: 3rem;
}
.goods-list-div {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
row-gap: 0.2rem;
column-gap: 0.2rem;
}
.shopping-item {
position: relative;
box-sizing: border-box;
min-height: 2.75rem;
border: 1px solid #EDEDED;
border-radius: 0.08rem;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 0.16rem;
}
.shopping-item .client-box {
position: absolute;
top: 0;
right: 0;
background-color: var(--color-primary);
padding: 0 0.08rem;
color: #fff;
font-size: 14px;
border-radius: 0px 0px 0px 8px;
}
.shopping-item .goods-name {
margin-top: 0.18rem;
display: flex;
justify-content: space-between;
align-items: center;
column-gap: 0.3rem;
padding: 0 0.16rem;
}
.shopping-item .goods-name .goods-name-text {
font-size: 16px;
font-weight: 700;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.shopping-item .goods-name .qty-box {
font-size: 12px;
color: #CFD2E1;
flex-shrink: 0;
position: relative;
}
.shopping-item .goods-name .qty-box img {
position: absolute;
top: -0.2rem;
right: 0;
width: 0.55rem;
height: 0.48rem;
}
.shopping-item .goods-name.sold-out .goods-name-text {
color: #CFD2E1;
}
.shopping-item .goods-name.sold-out .qty-box {
width: 0.55rem;
}
.shopping-item .goods-content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.shopping-item .goods-active {
margin-top: 0.12rem;
padding: 0 0.16rem;
display: flex;
flex-wrap: wrap;
column-gap: 0.08rem;
row-gap: 0.08rem;
}
.shopping-item .goods-active .active-name {
font-size: 12px;
color: var(--color-primary);
background: rgba(57, 124, 252, 0.1);
padding: 0.03rem 0.08rem;
border-radius: 2px;
}
.shopping-item .goods-tag {
box-sizing: border-box;
height: 0.36rem;
display: flex;
flex-wrap: wrap;
align-items: center;
row-gap: 0.08rem;
column-gap: 0.16rem;
background: rgba(57, 124, 252, 0.15);
padding: 0 0.16rem;
}
.shopping-item .goods-tag .tag-item {
position: relative;
font-size: 12px;
flex-shrink: 0;
color: var(--color-primary);
padding-left: 0.08rem;
}
.shopping-item .goods-tag .tag-item::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 0.04rem;
height: 0.04rem;
transform: translateY(-50%);
border-radius: 50%;
background: rgba(57, 124, 252, 0.45);
}
.shopping-item .goods-description {
box-sizing: border-box;
padding: 0.24rem 0.21rem 0.22rem 0.16rem;
max-height: 400px;
min-height: 150px;
flex: 1;
overflow: auto;
font-size: 14px;
white-space: normal;
background: #F4F4F4;
}
.shopping-item .goods-description * {
all: revert;
}
.shopping-item .goods-description ul {
padding-left: 0.16rem;
margin: 0;
}
.shopping-item .goods-description img {
max-width: 100%;
}
.shopping-item .goods-description::-webkit-scrollbar {
/*滚动条整体样式*/
width: 0px;
}
.shopping-item .goods-description:hover::-webkit-scrollbar {
width: 4px;
}
.shopping-item .price-box {
margin-top: 0.18rem;
padding: 0 0.16rem;
display: flex;
justify-content: space-between;
align-items: center;
column-gap: 0.1rem;
}
.shopping-item .price-box .price-box-left {
text-align: right;
display: flex;
align-items: flex-end;
column-gap: 0.04rem;
}
.shopping-item .price-box .original-price {
font-size: 12px;
color: #CFD2E1;
text-decoration: line-through;
}
.shopping-item .price-box .item-price {
font-size: 24px;
color: var(--color-price-text);
}
.shopping-item .price-box .item-price .item-price-prefix {
font-size: 12px;
}
.shopping-item .price-box .item-price .item-price-cycle {
font-size: 14px;
color: #485169;
}
.shopping-item .price-box .buy-btn {
height: 0.3rem;
}
.tips {
color: #8692b0;
font-size: 0.13rem;
text-align: center;
}
.domain-box .register-type {
display: flex;
align-items: center;
}
.domain-box .register-type .el-divider {
background-color: #D8D8D8;
margin: 0 0.24rem;
}
.domain-box .register-type .reg-ridio {
font-size: 0.14rem;
color: #646464;
cursor: pointer;
}
.domain-box .register-type .isActice {
color: var(--color-primary);
}
.domain-box .domain-search {
margin-top: 0.32rem;
position: relative;
display: flex;
align-items: center;
}
.domain-box .domain-search .el-input {
height: 0.56rem;
}
.domain-box .domain-search .el-input .el-input__inner {
height: 0.56rem;
line-height: 0.56rem;
}
.domain-box .domain-search .el-input-group__append {
padding: 0;
background: #ffffff;
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.domain-box .domain-search .input-btn {
width: 1.7rem;
}
.domain-box .domain-search .suffix-box {
width: 1.7rem;
display: flex;
justify-content: center;
align-items: center;
color: #2B2B2B;
font-size: 0.16rem;
cursor: pointer;
}
.domain-box .domain-search .suffix-box .el-icon-arrow-down {
font-size: 0.14rem;
color: #8692b0;
margin-left: 0.1rem;
}
.domain-box .domain-search .search-button {
height: 0.56rem;
padding-left: 0.7rem;
padding-right: 0.7rem;
border: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
background: var(--color-primary);
color: #ffffff;
font-size: 0.16rem;
}
.domain-box .domain-search .suffix-list {
z-index: 2;
position: absolute;
top: 0.56rem;
left: 0;
display: flex;
flex-wrap: wrap;
width: calc(100% - 2.7rem);
padding: 0.3rem 0.23rem 0.3rem 0.46rem;
background: #feffff;
box-shadow: 0rem 0.05rem 0.1rem 0.01rem rgba(0, 0, 0, 0.1);
border-radius: 0.03rem 0.03rem 0.03rem 0.03rem;
}
.domain-box .domain-search .suffix-list .suffix-item {
margin-right: 0.16rem;
margin-bottom: 0.16rem;
width: 1.1rem;
height: 0.4rem;
border: 0.01rem solid #e6eaed;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.16rem;
color: #2B2B2B;
cursor: pointer;
}
.domain-box .domain-search .suffix-list .suffix-item:hover {
background: rgba(0, 88, 255, 0.08);
}
.domain-box .domain-search .suffix-list .suffix-active {
background: rgba(0, 88, 255, 0.08);
border: 0.01rem solid var(--color-primary);
color: var(--color-primary);
}
.domain-box .batch-search-box {
margin-top: 0.32rem;
}
.domain-box .batch-search-box .batch-tips {
box-sizing: border-box;
color: #8692b0;
font-size: 0.14rem;
padding: 0.16rem;
border-radius: 0.04rem;
border: 0.01rem solid #EAEAEA;
}
.domain-box .batch-search-box .batch-tips .input-batch .el-textarea__inner {
height: 1.3rem;
border: none;
padding: 0;
}
.domain-box .batch-search-box .batch-btn {
margin-top: 0.16rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.domain-box .batch-search-box .batch-btn .upload-btn {
display: flex;
align-items: center;
column-gap: 0.08rem;
font-size: 0.12rem;
color: var(--color-primary);
cursor: pointer;
}
.domain-box .batch-search-box .batch-btn .el-button {
height: 0.36rem;
}
.domain-box .domain-content {
margin-top: 0.24rem;
display: flex;
column-gap: 0.4rem;
}
.domain-box .domain-content .domain-left {
flex: 1;
}
.domain-box .domain-content .domain-left .domain-one {
height: 100%;
}
.domain-box .domain-content .domain-left .domain-one .domain-one-list {
height: 100%;
display: flex;
flex-direction: column;
}
.domain-box .domain-content .domain-left .domain-one .search-title {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.16rem;
color: #2B2B2B;
}
.domain-box .domain-content .domain-left .domain-one .search-title .search-fillter {
display: flex;
align-items: center;
column-gap: 0.08rem;
cursor: pointer;
}
.domain-box .domain-content .domain-left .domain-one .search-title .search-fillter.is_select {
color: var(--color-primary);
}
.domain-box .domain-content .domain-left .domain-one .fillter-list {
margin-top: 0.24rem;
border-radius: 8px;
box-sizing: border-box;
border: 1px solid #EAEAEA;
padding: 0.24rem;
display: flex;
flex-wrap: wrap;
gap: 0.24rem;
}
.domain-box .domain-content .domain-left .domain-one .fillter-list .fillter-item {
width: 1rem;
height: 0.4rem;
border: 0.01rem solid #e6eaed;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.14rem;
color: #2B2B2B;
cursor: pointer;
border-radius: 0.04rem;
}
.domain-box .domain-content .domain-left .domain-one .fillter-list .fillter-item:hover {
background: rgba(0, 88, 255, 0.08);
}
.domain-box .domain-content .domain-left .domain-one .fillter-list .fillter-item.is_select {
background: rgba(0, 88, 255, 0.08);
border-color: var(--color-primary);
color: var(--color-primary);
}
.domain-box .domain-content .domain-left .domain-one .start-search {
margin-top: 0.24rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 93%;
border-radius: 8px;
border: 0.01rem solid #EAEAEA;
}
.domain-box .domain-content .domain-left .domain-one .start-search img {
width: 0.58rem;
height: 0.57rem;
}
.domain-box .domain-content .domain-left .domain-one .start-search p {
text-align: center;
margin-top: 0.19rem;
font-size: 0.18rem;
color: #2B2B2B;
}
.domain-box .domain-content .domain-left .domain-one .domain-list {
margin-top: 0.24rem;
background: #ffffff;
border: 1px solid #EAEAEA;
border-radius: 8px;
flex: 1;
overflow-y: auto;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item {
height: 0.6rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 0.01rem solid #ededed;
padding: 0 0.33rem 0 0.3rem;
transition: background-color 0.25s ease;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item:hover {
background-color: #f5f7fa;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item .item-left .domain-name {
font-size: 0.16rem;
color: #2B2B2B;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item .item-left .domain-status {
margin-left: 0.42rem;
font-size: 0.13rem;
color: rgba(0, 0, 0, 0.6);
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item .item-right {
display: flex;
align-items: center;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item .item-right .premium-type {
padding: 0.06rem 0.12rem;
margin-right: 0.25rem;
font-size: 0.14rem;
color: #8692b0;
border-radius: 0.16rem 0.16rem 0.16rem 0.16rem;
background: #f3f3f5;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item .item-right .whois-box {
font-size: 0.14rem;
color: #2B2B2B;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item .item-right .whois-box:hover {
color: var(--color-primary);
cursor: pointer;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item .item-right .pirce-box {
cursor: pointer;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item .item-right .pirce-box .original-price {
color: #8692b0;
font-size: 0.12rem;
text-decoration: line-through;
margin-right: 0.17rem;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item .item-right .pirce-box .now-price {
font-size: 0.12rem;
color: var(--color-price-text);
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item .item-right .add-btn {
margin-left: 0.4rem;
height: 0.36rem;
}
.domain-box .domain-content .domain-left .batch-box {
height: 100%;
}
.domain-box .domain-content .domain-left .batch-box .batch-main {
height: 100%;
display: flex;
flex-direction: column;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-search {
margin-top: 0.24rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
background: #ffffff;
border: 0.01rem solid #EAEAEA;
border-radius: 0.08rem;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-search img {
width: 0.58rem;
height: 0.57rem;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-search p {
text-align: center;
margin-top: 0.19rem;
font-size: 0.18rem;
color: #2B2B2B;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .search-title {
font-size: 0.16rem;
color: #2B2B2B;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .avail-list {
margin-top: 0.24rem;
background: #ffffff;
border: 0.01rem solid #EAEAEA;
border-radius: 0.08rem 0.08rem 0 0;
border-bottom: none;
max-height: 5rem;
overflow-y: auto;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .el-collapse {
border: none;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item {
height: 0.64rem;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 0.01rem solid #EAEAEA;
padding: 0 0.24rem;
transition: background-color 0.25s ease;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item:hover {
background-color: #f5f7fa;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item:nth-last-of-type(1) {
border-bottom: none;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-left .domain-name {
font-size: 0.14rem;
color: #2B2B2B;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-left .domain-status {
margin-left: 0.42rem;
font-size: 0.14rem;
color: rgba(0, 0, 0, 0.6);
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-right {
display: flex;
align-items: center;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-right .premium-type {
padding: 0.06rem 0.12rem;
margin-right: 0.25rem;
font-size: 0.14rem;
color: #8692b0;
border-radius: 0.16rem 0.16rem 0.16rem 0.16rem;
background: #f3f3f5;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-right .whois-box {
font-size: 0.14rem;
color: #2B2B2B;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-right .whois-box:hover {
color: var(--color-primary);
cursor: pointer;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-right .pirce-box {
cursor: pointer;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-right .pirce-box .oir-price {
color: #8692b0;
font-size: 0.14rem;
text-decoration: line-through;
margin-right: 0.17rem;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-right .pirce-box .now-price {
font-size: 0.12rem;
color: var(--color-price-text);
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-right .pirce-box .el-icon-arrow-down {
font-size: 0.12rem;
color: #8692b0;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-right .add-btn {
margin-left: 0.4rem;
border-radius: 0.04rem;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .all-check {
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0 0.24rem;
height: 0.64rem;
background: #F9F9F9;
color: #2B2B2B;
font-size: 0.14rem;
border: 0.01rem solid #EAEAEA;
border-top: none;
border-radius: 0 0 0.08rem 0.08rem;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .all-check .el-button {
color: #ffffff;
font-size: 0.14rem;
background: var(--color-primary);
}
.domain-box .domain-content .domain-left .batch-box .unavail-title {
width: 100%;
font-size: 0.16rem;
color: #2B2B2B;
display: flex;
align-items: center;
justify-content: space-between;
}
.domain-box .domain-content .domain-left .batch-box .unavail-title .open-text {
cursor: pointer;
font-size: 0.14rem;
color: var(--color-primary);
}
.domain-box .domain-content .domain-left .batch-box .unavail-list {
margin-top: 0.24rem;
display: flex;
flex-wrap: wrap;
border-radius: 0.08rem;
border: 0.01rem solid #e6e7eb;
}
.domain-box .domain-content .domain-left .batch-box .unavail-list .unavail-item {
width: 50%;
height: 0.64rem;
box-sizing: border-box;
padding: 0.17rem 0.24rem;
border-bottom: 0.01rem solid #ededed;
}
.domain-box .domain-content .domain-left .batch-box .unavail-list .unavail-item:nth-child(odd) {
position: relative;
}
.domain-box .domain-content .domain-left .batch-box .unavail-list .unavail-item:nth-child(odd)::after {
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 0.01rem;
height: 0.32rem;
background: #ededed;
}
.domain-box .domain-content .domain-left .batch-box .unavail-list .unavail-item .unavail-name {
font-size: 0.14rem;
color: #2B2B2B;
}
.domain-box .domain-content .domain-left .batch-box .unavail-list .unavail-item .unavail-reason {
margin-left: 0.4rem;
color: rgba(0, 0, 0, 0.6);
font-size: 0.14rem;
}
.domain-box .domain-content .domain-right {
box-sizing: border-box;
width: 5.33rem;
height: 7rem;
flex-shrink: 0;
}
.domain-box .domain-content .domain-right .car-top {
display: flex;
justify-content: space-between;
color: #2B2B2B;
font-size: 0.16rem;
}
.domain-box .domain-content .domain-right .car-top .clear-car {
cursor: pointer;
color: #A2A2A2;
}
.domain-box .domain-content .domain-right .car-top .clear-car .icon {
fill: #A2A2A2;
margin-right: 0.08rem;
}
.domain-box .domain-content .domain-right .car-top .clear-car:hover {
color: var(--color-danger);
}
.domain-box .domain-content .domain-right .car-top .clear-car:hover .icon {
fill: var(--color-danger);
}
.domain-box .domain-content .domain-right .car-box {
box-sizing: border-box;
margin-top: 0.24rem;
height: 5.3rem;
border-radius: 8px;
border: 0.01rem solid #EAEAEA;
background: #ffffff;
overflow-y: auto;
}
.domain-box .domain-content .domain-right .car-no {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.14rem;
color: #8692b0;
}
.domain-box .domain-content .domain-right .car-list .car-item {
padding: 0.16rem 0.32rem;
border-bottom: 0.01rem solid #F6F7FB;
}
.domain-box .domain-content .domain-right .car-list .car-item:hover {
background: #F7F8F9;
}
.domain-box .domain-content .domain-right .car-list .car-item:hover .car-del {
display: block;
}
.domain-box .domain-content .domain-right .car-list .car-item:nth-last-of-type(1) {
border-bottom: none;
}
.domain-box .domain-content .domain-right .car-list .car-item .caritem-top,
.domain-box .domain-content .domain-right .car-list .car-item .car-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.domain-box .domain-content .domain-right .car-list .car-item .car-bottom {
color: #2B2B2B;
margin-top: 0.16rem;
}
.domain-box .domain-content .domain-right .car-list .car-item .car-name {
display: flex;
align-items: center;
column-gap: 0.16rem;
}
.domain-box .domain-content .domain-right .car-list .car-item .car-name .shop-name {
font-size: 0.14rem;
color: #2B2B2B;
}
.domain-box .domain-content .domain-right .car-list .car-item .car-del {
display: none;
cursor: pointer;
color: #9E9E9E;
font-size: 0.14rem;
}
.domain-box .domain-content .domain-right .car-list .car-item .car-del .icon {
fill: #9E9E9E;
margin-right: 0.04rem;
}
.domain-box .domain-content .domain-right .car-list .car-item .car-del:hover {
color: var(--color-danger);
}
.domain-box .domain-content .domain-right .car-list .car-item .car-del:hover .icon {
fill: var(--color-danger);
margin-right: 0.04rem;
}
.domain-box .domain-content .domain-right .car-list .car-item .car-year .el-select {
width: 0.96rem;
height: 0.36rem;
border-radius: 0.04rem;
}
.domain-box .domain-content .domain-right .car-list .car-item .car-price {
font-size: 0.14rem;
color: var(--color-price-text);
}
.car-money {
padding: 0 0.2rem;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.26rem;
font-size: 0.16rem;
font-weight: 400;
color: rgba(0, 0, 0, 0.9);
}
.car-money .mon-right {
font-size: 0.14rem;
}
.car-money .mon-right p {
margin: 0;
}
.car-money .mon-right .original-price {
text-decoration: line-through;
color: #999;
}
.car-money .mon-right .original-price .hide {
visibility: hidden;
}
.car-money .money-text {
color: var(--color-price-text);
}
.car-settle {
margin-top: 0.2rem;
}
.car-settle .settle-btn {
width: 100%;
background: var(--color-primary);
font-size: 0.16rem;
color: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 0;
}
.price-list {
display: flex;
font-size: 0.14rem;
}
.price-list .price-item > div {
width: 0.85rem;
height: 0.45rem;
display: flex;
justify-content: center;
align-items: center;
}
.price-list .price-item .price-year {
background: #f8fafc;
}
.price-list .price-item .price-new {
border-bottom: 1px solid #e6e7eb;
}
.blue-a-text {
color: var(--color-primary);
cursor: pointer;
}
.up-dialog .el-dialog__header {
display: none;
}
.up-dialog .el-dialog__body {
padding: 0.6rem 0.8rem;
}
.up-dialog .dia-title {
font-size: 0.24rem;
color: #171725;
}
.up-dialog .dia-concent {
margin-top: 0.3rem;
}
.up-dialog .dia-concent .up-tips {
font-size: 0.16rem;
color: #1e2736;
}
.up-dialog .dia-concent .file-box {
margin-top: 0.1rem;
display: flex;
align-items: center;
}
.up-dialog .dia-concent .file-box .file-name {
flex: 1;
border: 0.01rem solid #e6e7eb;
height: 0.46rem;
line-height: 0.46rem;
padding: 0 0.16rem;
background: rgba(102, 107, 128, 0.08);
font-size: 0.15rem;
}
.up-dialog .dia-concent .file-box .file-name:focus {
outline: none;
border: 0.01rem solid #e6e7eb;
}
.up-dialog .dia-concent .file-box .file-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 0.12rem 0.28rem;
height: 0.46rem;
box-sizing: border-box;
color: #4e5259;
font-size: 0.16rem;
border: 0.01rem solid #e6e7eb;
margin-left: 0.1rem;
cursor: pointer;
}
.up-dialog .dia-foter {
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 0.4rem;
}
.up-dialog .dia-foter .confim-btn,
.up-dialog .dia-foter .cancel-btn {
min-width: 1.12rem;
border: none;
border-radius: 0.03rem 0.03rem 0.03rem 0.03rem;
font-size: 0.16rem;
}
.up-dialog .dia-foter .confim-btn {
background: var(--color-primary);
color: rgba(255, 255, 255, 0.9);
}
.up-dialog .dia-foter .cancel-btn {
margin-left: 0.12rem;
background: #e7e7e7;
color: #1e2736;
}
.el-popover {
max-width: none;
}
@media screen and (max-width: 915px) {
.goods-list-div {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 750px) {
.goods-list-div {
grid-template-columns: repeat(1, 1fr);
}
.search-box .el-select .el-input__inner {
height: 40px !important;
line-height: 40px;
}
.second-select .el-input__inner {
height: 40px !important;
line-height: 40px;
}
.search-input .el-input__inner {
height: 40px !important;
line-height: 40px;
}
.search-btn {
height: 40px;
}
}

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,34 @@
.template {
height: 100%;
}
.config-box {
height: 100%;
}
.content {
height: 100%;
background: #fff;
}
.ifram-hiden {
display: none !important;
}
.l-empty {
width: 0 !important;
}
html {
font-size: 100px !important;
}
.template > .tit {
display: none;
}
.template .main-card {
max-width: inherit;
}
.common-config .common-box .order-right {
right: -0.2rem;
}
.config-box .f-order {
width: 100%;
}
.config-box .f-order .main-card {
height: 100%;
}

View File

@@ -0,0 +1,42 @@
.template {
height: 100%;
}
.config-box {
height: 100%;
}
.content {
height: 100%;
background: #fff;
}
.ifram-hiden {
display: none !important;
}
.l-empty {
width: 0 !important;
}
html {
font-size: 100px !important;
}
.template>.tit{
display: none;
}
.template .main-card{
max-width: inherit;
}
.common-config .common-box .order-right{
right: -.2rem;
}
.config-box .f-order{
width: 100%;
.main-card{
height: 100%;
}
}

View File

@@ -0,0 +1,295 @@
.main-title {
color: #171725;
font-size: 0.28rem;
margin-bottom: 0.4rem;
}
.table-name {
display: flex;
align-items: center;
}
.goods-name {
color: #171725;
font-weight: bold;
font-size: 0.16rem;
}
.goods-info {
margin-bottom: 0.1rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
font-size: 0.14rem;
}
.goodsInfo-price {
color: #1E2736;
}
.goodsInfo-name {
color: #757575;
}
.radio-box {
/* width: 80%; */
}
.table-content {
font-size: 0.14rem;
}
.goods-table {
margin-top: 0.16rem;
width: 100%;
text-align: left;
border: 1px solid #E6E7EB;
border-radius: 0.03rem;
border-collapse: collapse;
}
.info-box {
width: 90%;
}
.goods-table thead {
line-height: 0.46rem;
background: #EEF4FF;
height: 0.46rem;
color: #757575;
}
.goods-table tbody tr td {
padding-top: 0.29rem;
padding-bottom: 0.3rem;
}
.description-box {
width: 5.5rem;
}
.price-box,
.num-box {
width: 2.4rem;
}
.total-box {
width: 1rem;
}
.delete-btn {
cursor: pointer;
font-size: 0.18rem;
color: #F0142F;
}
.item-price {
color: #171725;
}
.item-total {
font-weight: bold;
color: #171725;
}
.shopping-goods {
margin-bottom: 0.4rem;
}
.goods-box {
padding-bottom: 2.6rem;
}
.el-footer {
width: calc(100vw - 160px);
padding-left: 2.1rem;
padding-right: 1.2rem;
box-sizing: border-box;
display: flex;
align-items: center;
font-size: 0.18rem;
box-shadow: 0rem 0rem 0.2rem rgba(0, 0, 0, 0.15);
position: fixed;
bottom: 0;
background-color: #fff;
z-index: 9;
}
.footer-box {
width: 100%;
height: 100%;
margin: 0 auto;
max-width: 1500px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.goodsInfo-type {
overflow: hidden;
text-overflow: ellipsis;
/* white-space: nowrap; */
color: #1E2736;
}
.footer-left {
color: #333333;
font-size: 0.18rem;
display: flex;
justify-content: start;
}
.radio-box .el-radio .el-radio__input .el-radio__inner {
width: 0.24rem;
height: 0.24rem;
background-color: #fff;
}
.radio-box .el-radio .el-radio__input .el-radio__inner::after {
width: 0.12rem;
height: 0.12rem;
background: var(--color-primary);
}
.radio-box .el-radio {
margin-bottom: 0.2rem;
}
.footer-left .radio-box .el-radio .el-radio__label {
font-size: 0.16rem;
color: #1E2736;
}
.footer-right {
font-size: 0.14rem;
color: #1E2736;
display: flex;
}
.total-price {
font-weight: bold;
font-size: 0.28rem;
color: var(--color-price-text);
}
.text-red {
color: var(--color-warning);
}
.btn-box {
position: relative;
margin-left: 0.4rem;
}
.pay-text {
white-space: nowrap;
margin-right: 0.31rem;
color: #333333;
font-size: 0.18rem;
font-weight: 300;
}
.buy-btn {
width: 2.04rem;
height: 0.46rem;
background: var(--color-primary);
border-radius: 0.04rem;
font-size: 0.16rem;
font-weight: 500;
color: #FFFFFF;
}
.delect-btn {
margin: 0 0.4rem;
}
.all-check .el-checkbox__label {
color: #333333;
font-size: 0.18rem;
}
.qty-num {
color: #4E5259;
height: 0.13rem;
margin-top: 0.1rem;
}
.qty-tips {
margin-top: 0.2rem;
font-size: 0.13rem;
color: var(--color-primary);
}
.check-box {
margin-top: 0.1rem;
}
.bule-text {
cursor: pointer;
color: var(--color-primary);
}
.totalprice-box {
white-space: nowrap;
}
.red-text {
color: var(--color-danger);
}
.original-price {
text-decoration: line-through;
color: #999999;
}
.discount-codeNumber {
margin-top: 0.08rem;
font-size: 0.14rem;
font-weight: bold;
color: var(--color-discount-num);
}
.cash-box {
margin-top: 0.08rem;
}
.remove-discountCode {
margin-left: 0.09rem;
}
.cash-codeNumber {
margin-top: 0.08rem;
cursor: pointer;
height: 0.32rem;
line-height: 0.32rem;
background: rgba(240, 20, 46, 0.12);
padding: 0 0.14rem;
color: var(--color-cash-num);
font-weight: bold;
font-size: 0.14rem;
}
@media screen and (max-width: 750px) {
.footer-box {
display: block;
}
.table-content {
overflow-x: auto;
}
.description-box {
min-width: 5.5rem;
}
.price-box {
min-width: 2.4rem;
}
.num-box {
min-width: 2.4rem;
}
.total-box {
min-width: 2.4rem;
}
.el-footer {
padding: 0.3rem;
width: 100%;
height: auto !important;
}
.el-input .el-input__inner {
font-size: inherit !important;
}
.bule-text {
cursor: pointer;
color: var(--color-primary);
}
.check-box {
margin-top: 0.1rem;
}
.footer-left {
display: none;
flex-direction: column;
color: #333333;
font-size: 0.18rem;
}
.btn-box {
display: flex;
margin-left: 0;
flex-direction: column-reverse;
align-items: self-end;
}
.delect-btn {
margin: 0;
}
.footer-right {
font-size: 0.14rem;
color: #1E2736;
display: block;
text-align: right;
}
.delect-goods {
color: var(--color-danger);
}
.buy-btn {
margin-left: 0;
margin-top: 0.2rem;
width: 2.04rem;
height: 0.46rem;
background: var(--color-primary);
border-radius: 0.04rem;
font-size: 0.16rem;
font-weight: 500;
color: #FFFFFF;
}
}

View File

@@ -0,0 +1,364 @@
.main-title {
color: #171725;
font-size: 0.28rem;
margin-bottom: 0.4rem;
}
.table-name {
display: flex;
align-items: center;
}
.goods-name {
color: #171725;
font-weight: bold;
font-size: 0.16rem;
}
.goods-info {
margin-bottom: 0.1rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
font-size: 0.14rem;
}
.goodsInfo-price {
color: #1E2736;
}
.goodsInfo-name {
color: #757575;
}
.radio-box {
/* width: 80%; */
}
.table-content {
font-size: 0.14rem;
}
.goods-table {
margin-top: 0.16rem;
width: 100%;
text-align: left;
border: 1px solid #E6E7EB;
border-radius: 0.03rem;
border-collapse: collapse;
}
.info-box {
width: 90%;
}
.goods-table thead {
line-height: 0.46rem;
background: #EEF4FF;
height: 0.46rem;
color: #757575;
}
.goods-table tbody tr td {
padding-top: 0.29rem;
padding-bottom: 0.3rem;
}
.description-box {
width: 5.5rem;
}
.price-box,
.num-box {
width: 2.4rem;
}
.total-box {
width: 1rem;
}
.delete-btn {
cursor: pointer;
font-size: 0.18rem;
color: #F0142F;
}
.item-price {
color: #171725;
}
.item-total {
font-weight: bold;
color: #171725;
}
.shopping-goods {
margin-bottom: 0.4rem;
}
.goods-box {
padding-bottom: 2.6rem;
}
.el-footer {
width: calc(100vw - 160px);
padding-left: 2.1rem;
padding-right: 1.2rem;
box-sizing: border-box;
display: flex;
align-items: center;
font-size: 0.18rem;
box-shadow: 0rem 0rem 0.2rem rgba(0, 0, 0, 0.15);
position: fixed;
bottom: 0;
background-color: #fff;
z-index: 9;
}
.footer-box {
width: 100%;
height: 100%;
margin: 0 auto;
max-width: 1500px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.goodsInfo-type {
overflow: hidden;
text-overflow: ellipsis;
/* white-space: nowrap; */
color: #1E2736;
}
.footer-left {
color: #333333;
font-size: 0.18rem;
display: flex;
justify-content: start;
}
.radio-box .el-radio .el-radio__input .el-radio__inner {
width: 0.24rem;
height: 0.24rem;
background-color: #fff;
}
.radio-box .el-radio .el-radio__input .el-radio__inner::after {
width: 0.12rem;
height: 0.12rem;
background: var(--color-primary);
}
.radio-box .el-radio {
margin-bottom: 0.2rem;
}
.footer-left .radio-box .el-radio .el-radio__label {
font-size: 0.16rem;
color: #1E2736;
}
.footer-right {
font-size: 0.14rem;
color: #1E2736;
display: flex;
}
.total-price {
font-weight: bold;
font-size: 0.28rem;
color: var(--color-price-text);
}
.text-red {
color: var(--color-warning);
}
.btn-box {
position: relative;
margin-left: 0.4rem;
}
.pay-text {
white-space: nowrap;
margin-right: 0.31rem;
color: #333333;
font-size: 0.18rem;
font-weight: 300;
}
.buy-btn {
width: 2.04rem;
height: 0.46rem;
background: var(--color-primary);
border-radius: 0.04rem;
font-size: 0.16rem;
font-weight: 500;
color: #FFFFFF;
}
.delect-btn {
margin: 0 0.4rem;
}
.all-check .el-checkbox__label {
color: #333333;
font-size: 0.18rem;
}
.qty-num {
color: #4E5259;
height: 0.13rem;
margin-top: 0.1rem;
}
.qty-tips {
margin-top: 0.2rem;
font-size: 0.13rem;
color: var(--color-primary);
}
.check-box {
margin-top: 0.1rem;
}
.bule-text {
cursor: pointer;
color: var(--color-primary);
}
.totalprice-box {
white-space: nowrap;
}
.red-text {
color: var(--color-danger);
}
.original-price {
text-decoration: line-through;
color: #999999;
}
.discount-codeNumber {
margin-top: 0.08rem;
font-size: 0.14rem;
font-weight: bold;
color: var(--color-discount-num);
}
.cash-box {
margin-top: 0.08rem;
}
.remove-discountCode {
margin-left: 0.09rem;
}
.cash-codeNumber {
margin-top: 0.08rem;
cursor: pointer;
height: 0.32rem;
line-height: 0.32rem;
background: rgba(240, 20, 46, 0.12);
padding: 0 0.14rem;
color: var(--color-cash-num);
font-weight: bold;
font-size: 0.14rem;
}
@media screen and (max-width: 750px) {
.footer-box {
display: block;
}
.table-content {
overflow-x: auto;
}
.description-box {
min-width: 5.5rem;
}
.price-box {
min-width: 2.4rem;
}
.num-box {
min-width: 2.4rem;
}
.total-box {
min-width: 2.4rem;
}
.el-footer {
padding: 0.3rem;
width: 100%;
height: auto !important;
}
.el-input .el-input__inner {
font-size: inherit !important;
}
.bule-text {
cursor: pointer;
color: var(--color-primary);
}
.check-box {
margin-top: 0.1rem;
}
.footer-left {
display: none;
flex-direction: column;
color: #333333;
font-size: 0.18rem;
}
.btn-box {
display: flex;
margin-left: 0;
flex-direction: column-reverse;
align-items: self-end;
}
.delect-btn {
margin: 0;
}
.footer-right {
font-size: 0.14rem;
color: #1E2736;
display: block;
text-align: right;
}
.delect-goods {
color: var(--color-danger);
}
.buy-btn {
margin-left: 0;
margin-top: 0.2rem;
width: 2.04rem;
height: 0.46rem;
background: var(--color-primary);
border-radius: 0.04rem;
font-size: 0.16rem;
font-weight: 500;
color: #FFFFFF;
}
}

View File

@@ -0,0 +1,281 @@
.main-title {
color: #171725;
font-size: 0.28rem;
margin-bottom: 0.4rem;
}
.search-box {
margin-top: -0.62rem;
margin-bottom: 0.1rem;
text-align: right;
}
.search-box .el-input {
width: 3.2rem;
}
.search-box .el-input .el-input__inner {
height: 46px;
line-height: 46px;
}
.table-name {
display: flex;
align-items: center;
}
.goods-name {
color: #171725;
font-weight: bold;
font-size: 0.16rem;
}
.el-link.el-link--primary {
margin-left: 0.08rem;
color: var(--color-primary);
font-size: 0.14rem;
}
.table-content {
font-size: 0.14rem;
}
.goods-table {
margin-top: 0.16rem;
width: 100%;
text-align: left;
border: 1px solid #e6e7eb;
border-radius: 0.03rem;
border-collapse: collapse;
}
.goods-table thead {
line-height: 0.46rem;
background: #eef4ff;
height: 0.46rem;
color: #757575;
}
.goods-table tbody tr td {
padding-top: 0.29rem;
padding-bottom: 0.3rem;
}
.description-box {
width: 5.5rem;
}
.price-box {
width: 4rem;
}
.total-box {
min-width: 1.5rem;
}
.num-box {
width: 2.4rem;
}
.action-box {
width: 1rem;
}
.delete-btn {
cursor: pointer;
font-size: 0.18rem;
color: var(--color-danger);
}
.item-price {
color: #171725;
}
.item-total {
font-size: 0.14rem;
font-weight: bold;
color: #171725;
}
.original-price {
text-decoration: line-through;
color: #999999;
}
.discount-codeNumber {
font-size: 0.12rem;
font-weight: bold;
color: var(--color-discount-num);
}
.remove-discountCode {
cursor: pointer;
margin-left: 0.09rem;
}
.shopping-goods {
margin-bottom: 0.4rem;
}
.goods-box {
padding-bottom: 1.6rem;
}
.el-footer {
width: calc(100vw - 160px);
padding-left: 2.1rem;
padding-right: 1.2rem;
box-sizing: border-box;
font-size: 0.18rem;
box-shadow: 0rem 0rem 0.2rem rgba(0, 0, 0, 0.15);
height: 1.6rem !important;
position: fixed;
bottom: 0;
background-color: #fff;
z-index: 9;
}
.footer-box {
height: 100%;
margin: 0 auto;
max-width: 1500px;
display: flex;
align-items: center;
justify-content: space-between;
}
.no-goods-td {
display: flex;
align-items: center;
width: 4.8rem;
}
.no-goods-tips {
color: #8692b0;
font-size: 0.13rem;
font-weight: 500;
white-space: nowrap;
}
.buy-again-btn {
margin-left: 0.1rem;
background: #e1f0ff;
height: 0.32rem;
min-width: 0.6rem;
border-radius: 0.03rem;
font-size: 0.14rem;
font-weight: 400;
color: var(--color-primary);
}
.footer-left {
color: #333333;
font-size: 0.18rem;
}
.footer-right {
font-size: 0.14rem;
color: #1e2736;
display: flex;
align-items: center;
}
.total-price {
font-weight: bold;
font-size: 0.28rem;
color: var(--color-price-text);
}
.text-red {
color: var(--color-warning);
}
.goods-info {
margin-bottom: 0.1rem;
display: flex;
justify-content: space-between;
font-size: 0.14rem;
}
.goodsInfo-price {
color: #1e2736;
}
.goodsInfo-type {
overflow: hidden;
text-overflow: ellipsis;
/* white-space: nowrap; */
width: 80%;
color: #1e2736;
}
.goodsInfo-name {
color: #757575;
}
.buy-btn {
margin-left: 0.4rem;
width: 2.04rem;
height: 0.46rem;
background: var(--color-primary);
border-radius: 0.04rem;
font-size: 0.16rem;
font-weight: 500;
color: #ffffff;
}
.delect-btn {
margin: 0 0.4rem;
}
.mar-left-24 {
margin-left: 24px;
}
.info-box {
width: 90%;
}
.all-check .el-checkbox__label {
color: #333333;
font-size: 0.18rem;
}
.qty-num {
color: #4e5259;
height: 0.13rem;
margin-top: 0.1rem;
}
.qty-tips {
margin-top: 0.2rem;
font-size: 0.13rem;
color: #3699ff;
}
.red-text {
color: var(--color-danger);
}
.discount-box {
margin-top: 0.08rem;
font-size: 0.14rem;
font-weight: 400;
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 0.05rem;
row-gap: 0.05rem;
}
@media screen and (max-width: 750px) {
.table-content {
overflow-x: auto;
}
.search-box .el-input {
width: 4.2rem;
}
.description-box {
min-width: 5.5rem;
}
.price-box {
min-width: 4rem;
}
.num-box {
min-width: 2.5rem;
}
.action-box {
min-width: 1.5rem;
}
.el-footer {
padding: 0 0.3rem;
width: 100%;
}
.el-input .el-input__inner {
font-size: inherit !important;
}
.footer-left {
display: flex;
flex-direction: column;
color: #333333;
font-size: 0.18rem;
}
.delect-btn {
margin: 0;
}
.footer-right {
font-size: 0.14rem;
color: #1e2736;
display: flex;
flex-direction: column;
align-items: center;
}
.delect-goods {
color: var(--color-danger);
}
.buy-btn {
margin-left: 0;
margin-top: 0.2rem;
width: 2.04rem;
height: 0.46rem;
background: var(--color-primary);
border-radius: 0.04rem;
font-size: 0.16rem;
font-weight: 500;
color: #ffffff;
}
}

View File

@@ -0,0 +1,339 @@
.main-title {
color: #171725;
font-size: 0.28rem;
margin-bottom: 0.4rem;
}
.search-box {
margin-top: -0.62rem;
margin-bottom: 0.1rem;
text-align: right;
}
.search-box .el-input {
width: 3.2rem;
}
.search-box .el-input .el-input__inner {
height: 46px;
line-height: 46px;
}
.table-name {
display: flex;
align-items: center;
}
.goods-name {
color: #171725;
font-weight: bold;
font-size: 0.16rem;
}
.el-link.el-link--primary {
margin-left: 0.08rem;
color: var(--color-primary);
font-size: 0.14rem;
}
.table-content {
font-size: 0.14rem;
}
.goods-table {
margin-top: 0.16rem;
width: 100%;
text-align: left;
border: 1px solid #e6e7eb;
border-radius: 0.03rem;
border-collapse: collapse;
}
.goods-table thead {
line-height: 0.46rem;
background: #eef4ff;
height: 0.46rem;
color: #757575;
}
.goods-table tbody tr td {
padding-top: 0.29rem;
padding-bottom: 0.3rem;
}
.description-box {
width: 5.5rem;
}
.price-box {
width: 4rem;
}
.total-box {
min-width: 1.5rem;
}
.num-box {
width: 2.4rem;
}
.action-box {
width: 1rem;
}
.delete-btn {
cursor: pointer;
font-size: 0.18rem;
color: var(--color-danger);
}
.item-price {
color: #171725;
}
.item-total {
font-size: 0.14rem;
font-weight: bold;
color: #171725;
}
.original-price {
text-decoration: line-through;
color: #999999;
}
.discount-codeNumber {
font-size: 0.12rem;
font-weight: bold;
color: var(--color-discount-num);
}
.remove-discountCode {
cursor: pointer;
margin-left: 0.09rem;
}
.shopping-goods {
margin-bottom: 0.4rem;
}
.goods-box {
padding-bottom: 1.6rem;
}
.el-footer {
width: calc(100vw - 160px);
padding-left: 2.1rem;
padding-right: 1.2rem;
box-sizing: border-box;
font-size: 0.18rem;
box-shadow: 0rem 0rem 0.2rem rgba(0, 0, 0, 0.15);
height: 1.6rem !important;
position: fixed;
bottom: 0;
background-color: #fff;
z-index: 9;
}
.footer-box {
height: 100%;
margin: 0 auto;
max-width: 1500px;
display: flex;
align-items: center;
justify-content: space-between;
}
.no-goods-td {
display: flex;
align-items: center;
width: 4.8rem;
}
.no-goods-tips {
color: #8692b0;
font-size: 0.13rem;
font-weight: 500;
white-space: nowrap;
}
.buy-again-btn {
margin-left: 0.1rem;
background: #e1f0ff;
height: 0.32rem;
min-width: 0.6rem;
border-radius: 0.03rem;
font-size: 0.14rem;
font-weight: 400;
color: var(--color-primary);
}
.footer-left {
color: #333333;
font-size: 0.18rem;
}
.footer-right {
font-size: 0.14rem;
color: #1e2736;
display: flex;
align-items: center;
}
.total-price {
font-weight: bold;
font-size: 0.28rem;
color: var(--color-price-text);
}
.text-red {
color: var(--color-warning);
}
.goods-info {
margin-bottom: 0.1rem;
display: flex;
justify-content: space-between;
font-size: 0.14rem;
}
.goodsInfo-price {
color: #1e2736;
}
.goodsInfo-type {
overflow: hidden;
text-overflow: ellipsis;
/* white-space: nowrap; */
width: 80%;
color: #1e2736;
}
.goodsInfo-name {
color: #757575;
}
.buy-btn {
margin-left: 0.4rem;
width: 2.04rem;
height: 0.46rem;
background: var(--color-primary);
border-radius: 0.04rem;
font-size: 0.16rem;
font-weight: 500;
color: #ffffff;
}
.delect-btn {
margin: 0 0.4rem;
}
.mar-left-24 {
margin-left: 24px;
}
.info-box {
width: 90%;
}
.all-check .el-checkbox__label {
color: #333333;
font-size: 0.18rem;
}
.qty-num {
color: #4e5259;
height: 0.13rem;
margin-top: 0.1rem;
}
.qty-tips {
margin-top: 0.2rem;
font-size: 0.13rem;
color: #3699ff;
}
.red-text {
color: var(--color-danger);
}
.discount-box {
margin-top: 0.08rem;
font-size: 0.14rem;
font-weight: 400;
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 0.05rem;
row-gap: 0.05rem;
}
@media screen and (max-width: 750px) {
.table-content {
overflow-x: auto;
}
.search-box .el-input {
width: 4.2rem;
}
.description-box {
min-width: 5.5rem;
}
.price-box {
min-width: 4rem;
}
.num-box {
min-width: 2.5rem;
}
.action-box {
min-width: 1.5rem;
}
.el-footer {
padding: 0 0.3rem;
width: 100%;
}
.el-input .el-input__inner {
font-size: inherit !important;
}
.footer-left {
display: flex;
flex-direction: column;
color: #333333;
font-size: 0.18rem;
}
.delect-btn {
margin: 0;
}
.footer-right {
font-size: 0.14rem;
color: #1e2736;
display: flex;
flex-direction: column;
align-items: center;
}
.delect-goods {
color: var(--color-danger);
}
.buy-btn {
margin-left: 0;
margin-top: 0.2rem;
width: 2.04rem;
height: 0.46rem;
background: var(--color-primary);
border-radius: 0.04rem;
font-size: 0.16rem;
font-weight: 500;
color: #ffffff;
}
}

View File

@@ -0,0 +1,57 @@
<script src="/{$template_catalog}/template/{$themes}/js/common/jquery.mini.js"></script>
<link rel="stylesheet" href="/{$template_catalog_cart}/template/{$themes_cart}/css/goods.css">
</head>
<body>
<!-- mounted之前显示 -->
<div id="mainLoading">
<div class="ddr ddr1"></div>
<div class="ddr ddr2"></div>
<div class="ddr ddr3"></div>
<div class="ddr ddr4"></div>
<div class="ddr ddr5"></div>
</div>
<div class="goods">
<el-container>
<aside-menu></aside-menu>
<el-container>
<top-menu :num="shoppingCarNum"></top-menu>
<el-main>
<!-- 自己的东西 -->
<!-- 后端渲染出来的配置页面 -->
<div class="config-box">
<el-popover placement="bottom-start" trigger="hover" popper-class="goods-change-box"
v-if="commonData.cart_change_product == 1">
<div class="goods-item-name" slot="reference">
{{secProductGroupList[0]?.goodsList[0]?.product_group_name_first}}
<i class="el-icon-arrow-down el-icon--right"></i>
</div>
<div class="goods-item-box">
<el-input style="width:2rem; margin-bottom: .2rem;" v-model="fillterKey" suffix-icon="el-icon-search"
clearable :placeholder="lang.search_placeholder">
</el-input>
<div class="goods-group-item" v-for="item in calcProductGroup" :key="item.id">
<div class="goods-group-name">{{item.name}}</div>
<div class="goods-group-info">
<div class="option-name" v-for="option in item.goodsList" @click="handleCommand(option.id)">
{{option.name}}
</div>
</div>
</div>
</div>
</el-popover>
<div class="content"></div>
</div>
</el-main>
</el-container>
</el-container>
</div>
<!-- =======页面独有======= -->
<script src="/{$template_catalog}/template/{$themes}/components/payDialog/payDialog.js"></script>
<script src="/{$template_catalog_cart}/template/{$themes_cart}/api/product.js"></script>
<script src="/{$template_catalog}/template/{$themes}/components/pagination/pagination.js"></script>
<script src="/{$template_catalog}/template/{$themes}/components/discountCode/discountCode.js"></script>
<script src="/{$template_catalog}/template/{$themes}/components/eventCode/eventCode.js"></script>
<script src="/{$template_catalog}/template/{$themes}/components/customGoods/customGoods.js"></script>
<script src="/{$template_catalog_cart}/template/{$themes_cart}/js/goods.js"></script>

View File

@@ -0,0 +1,457 @@
<!-- 页面独有样式 -->
<link rel="stylesheet" href="/{$template_catalog_cart}/template/{$themes_cart}/css/goodsList.css">
</head>
<body>
<!-- mounted之前显示 -->
<div id="mainLoading">
<div class="ddr ddr1"></div>
<div class="ddr ddr2"></div>
<div class="ddr ddr3"></div>
<div class="ddr ddr4"></div>
<div class="ddr ddr5"></div>
</div>
<div class="template">
<el-container>
<aside-menu @getruleslist="getRule"></aside-menu>
<el-container>
<top-menu></top-menu>
<el-main>
<!-- 自己的东西 -->
<div class="main-card">
<div v-if="commonData.cart_instruction == 1 && commonData.cart_instruction_content" class="cart-des"
v-html="commonData.cart_instruction_content">
</div>
<div class="main-title" v-else>{{lang.new_goods}}</div>
<div class="main-content-box">
<div class="search-box">
<el-select v-model="select_first_obj.id" :placeholder="lang.first_level" @change="selectFirstType">
<el-option v-for="item in first_group_list" :key="item.id " :label="item.name" :value="item.id">
</el-option>
</el-select>
<el-select v-model="select_second_obj.id" :placeholder="lang.second_level" :disabled="secondLoading"
:loading="secondLoading" @change="selectSecondType" class="second-select">
<el-option v-for="item in second_group_list" :key="item.name " :label="item.name" :value="item.id">
</el-option>
</el-select>
<el-input :placeholder="lang.goods_search_placeholder" v-if="!isDomain" clearable v-model="searchValue"
class="search-input" @keyup.enter.native="searchGoods"></el-input>
<el-button class="search-btn" type="primary" key="ddd" @click="searchGoods" :loading="searchLoading"
v-if="!isDomain">{{lang.search}}</el-button>
</div>
<div class="second-desc" v-if="select_second_obj.description">
<scroll-text mode="loop">
{{select_second_obj.description}}
</scroll-text>
</div>
<div class="shopping-box" v-loading="goodSLoading">
<template v-if="!isDomain">
<div class="no-goods" v-if="goodsList.length === 0 && !goodSLoading">
<el-empty :description="lang.no_goods"></el-empty>
</div>
<div v-else class="goods-list-div">
<template v-for="(item,index) in goodsList">
<div class="shopping-item">
<div class="client-box" v-if="item.client_level_name && item.client_level_name !== ''">
<span>{{lang.shoppingCar_tip_text15}}</span>
</div>
<div v-html="item.description" class="goods-description"></div>
<div class="goods-content">
<div class="goods-tag"
v-if="item.pay_ontrial && item.pay_ontrial?.status === 1 || item.aodun_firewall_product">
<div class="tag-item" v-if="item.pay_ontrial && item.pay_ontrial?.status === 1 ">
{{lang.support_trial}}
</div>
<div class="tag-item" v-if="item.aodun_firewall_product">
{{lang.firewall_text1}}
</div>
</div>
<div class="goods-name" :class="{'sold-out':item.stock_control === 1 && item.qty <= 0}">
<div class="goods-name-text">{{ item.name }}</div>
<div class="qty-box" v-if="item.stock_control === 1">
<span v-if="item.qty > 0">{{lang.stock}}<span
class="stock-num">{{item.qty}}</span></span>
<img src="/{$template_catalog_cart}/template/{$themes_cart}/img/sold_out.svg" alt=""
v-else>
</div>
</div>
<div class="goods-active">
<template v-if="item.activeList.length > 0 || item.addon_coin === 1">
<div class="active-name" v-if="item.addon_coin === 1">
{{lang.coin_text10}}{{item.addon_coin_name}}
</div>
<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>
<div class="active-name" slot="reference">
{{active.name}}
</div>
</el-popover>
</template>
</template>
<template v-else>
<div class="active-name" style="opacity: 0;">
{{lang.subaccount_text55}}
</div>
</template>
</div>
<div class="price-box">
<div class="price-box-left">
<span class="item-price">
<span
class="item-price-prefix">{{commonData.currency_prefix}}</span>{{item.price_discounted || item.price}}<span
class="item-price-cycle">{{item.cycle ? '/' + item.cycle : ''}}</span>
</span>
<span class="original-price"
v-if="item.price_discounted && item.price != item.price_discounted">
<span class="item-price-prefix">{{commonData.currency_prefix}}</span> {{item.price}}
</span>
</div>
<el-button :disabled="item.stock_control === 1 && item.qty <= 0" class="buy-btn"
type="primary" @click="goOrder(item)">{{lang.buy}}</el-button>
</div>
</div>
</div>
</template>
</div>
</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 t="1750672276335" class="icon" viewBox="0 0 1024 1024" version="1.1"
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"
p-id="10858" fill="var(--color-primary)"></path>
</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 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>
</template>
</div>
<p v-if="!isDomain && !scrollDisabled && goodsList.length !==0" class="tips">{{lang.goods_loading}}</p>
<!-- <p v-if="!isDomain && scrollDisabled && goodsList.length !== 0" class="tips">{{lang.no_more_goods}}</p> -->
</div>
</div>
</el-main>
<div class="up-dialog">
<el-dialog width="6.8rem" :visible.sync="isShowUpload" :show-close=false>
<div class="dia-title">{{lang.template_text131}}</div>
<div class="dia-concent">
<p class="up-tips">{{lang.template_text132}}</p>
<div class="file-box">
<input accept="text/plain" type="file" id="upFile" autocomplete="off" tabindex="-1"
style="display: none;">
<input class="file-name" :placeholder="lang.template_text133" readonly :value="fileName">
<!-- 选择文件按钮 -->
<div class="file-btn" @click="selectFile">{{lang.template_text134}}</div>
</div>
</div>
<div class="dia-foter">
<el-button class="confim-btn" @click="confirmUpload">{{lang.template_text135}}</el-button>
<el-button class="cancel-btn" @click="cancelUpload">{{lang.template_text136}}</el-button>
</div>
</el-dialog>
</div>
</el-container>
</el-container>
</div>
<!-- =======页面独有======= -->
<script src="/{$template_catalog}/template/{$themes}/components/scrollText/scrollText.js"></script>
<script src="/{$template_catalog_cart}/template/{$themes_cart}/api/goodsList.js"></script>
<script src="/{$template_catalog_cart}/template/{$themes_cart}/js/goodsList.js"></script>
<script src="/{$template_catalog_cart}/template/{$themes_cart}/api/product.js"></script>

View File

@@ -0,0 +1,34 @@
<script src="/{$template_catalog}/template/{$themes}/js/common/jquery.mini.js"></script>
<link rel="stylesheet" href="/{$template_catalog_cart}/template/{$themes_cart}/css/goods_iframe.css">
</head>
<body>
<!-- mounted之前显示 -->
<div id="mainLoading">
<div class="ddr ddr1"></div>
<div class="ddr ddr2"></div>
<div class="ddr ddr3"></div>
<div class="ddr ddr4"></div>
<div class="ddr ddr5"></div>
</div>
<div class="goods">
<el-container>
<aside-menu v-show="false"></aside-menu>
<el-container>
<top-menu :num="shoppingCarNum" v-show="false"></top-menu>
<!-- 自己的东西 -->
<!-- 后端渲染出来的配置页面 -->
<div class="config-box">
<div class="content"></div>
</div>
</el-container>
</el-container>
</div>
<!-- =======页面独有======= -->
<script src="/{$template_catalog}/template/{$themes}/components/payDialog/payDialog.js"></script>
<script src="/{$template_catalog_cart}/template/{$themes_cart}/api/product.js"></script>
<script src="/{$template_catalog_cart}/template/{$themes_cart}/js/goods.js"></script>
<script src="/{$template_catalog}/template/{$themes}/components/pagination/pagination.js"></script>
<script src="/{$template_catalog}/template/{$themes}/components/discountCode/discountCode.js"></script>
<script src="/{$template_catalog}/template/{$themes}/components/eventCode/eventCode.js"></script>
<script src="/{$template_catalog}/template/{$themes}/components/customGoods/customGoods.js"></script>

Binary file not shown.

After

Width:  |  Height:  |  Size: 121 KiB

View File

@@ -0,0 +1,24 @@
<svg id="shield" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="10 6 30 36">
<defs>
<style>
.vi-accent {
stroke: #fff;
stroke-linecap: round;
stroke-width: 0;
fill-rule: evenodd;
}
.vi-primary {
fill: none;
stroke: #fff;
stroke-width: 2;
}
.vi-accent {
fill: #fff;
}
</style>
</defs>
<path class="vi-primary" d="M24.516,41C8.586,34.828,10.032,13.8,10.032,13.8,19.675,15.578,24.516,7,24.516,7s4.83,8.578,14.452,6.8C38.968,13.8,40.411,34.828,24.516,41Z"/>
<path class="vi-accent" d="M17,25l5,5L32,20l-2-2-8,8-3-3Z"/>
</svg>

After

Width:  |  Height:  |  Size: 661 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -0,0 +1,37 @@
<!-- 页面引入样式位置 -->
<script src="/{$template_catalog}/template/{$themes}/js/common/jquery.mini.js"></script>
<link rel="stylesheet" href="/{$template_catalog_cart}/template/{$themes_cart}/css/index_iframe.css">
</head>
<body>
<div class="goods" v-cloak>
<el-container>
<aside-menu></aside-menu>
<el-container>
<el-header>
<top-menu :num="shoppingCarNum"></top-menu>
</el-header>
<el-main>
<el-card>
<!-- 后端渲染出来的配置页面 -->
<div class="config-box">
<div class="content"></div>
</div>
</el-card>
</el-main>
</el-container>
</el-container>
</div>
<!-- =======页面引入js和相关组件位置======= -->
<!-- 系统组件 -->
<script src="/{$template_catalog}/template/{$themes}/components/payDialog/payDialog.js"></script>
<script src="/{$template_catalog}/template/{$themes}/components/pagination/pagination.js"></script>
<script src="/{$template_catalog}/template/{$themes}/components/discountCode/discountCode.js"></script>
<script src="/{$template_catalog}/template/{$themes}/components/customGoods/customGoods.js"></script>
<script src="/{$template_catalog}/template/{$themes}/components/eventCode/eventCode.js"></script>
<!-- 购物车文件 -->
<script src="/{$template_catalog_cart}/template/{$themes_cart}/api/product.js"></script>
<script src="/{$template_catalog_cart}/template/{$themes_cart}/js/goods.js"></script>

View File

@@ -0,0 +1,179 @@
var orignalSetItem = localStorage.setItem;
localStorage.setItem = function (key, newValue) {
var setItemEvent = new Event("setItemEvent");
setItemEvent.newValue = newValue;
window.dispatchEvent(setItemEvent);
orignalSetItem.apply(this, arguments);
};
(function (window, undefined) {
var old_onload = window.onload;
window.onload = function () {
const template = document.getElementsByClassName("goods")[0];
Vue.prototype.lang = window.lang;
window.addEventListener("setItemEvent", function (e) {
if (e.newValue && String(e.newValue).indexOf("cartNum") !== -1) {
vm._data.shoppingCarNum = e.newValue.split("-")[1] * 1;
}
});
const vm = new Vue({
components: {
asideMenu,
topMenu,
pagination,
},
created() {
const params = getUrlParams();
if (params.token) {
localStorage.setItem("jwt", params.token);
}
this.id = params.id;
// 只获取 commonData 配置,不触发 getGoodDetail
this.commonData = JSON.parse(
localStorage.getItem("common_set_before")
);
},
mounted() {
if (window.self !== window.top) {
this.isIfram = true;
}
// 先加载 content完成后再加载 popover 数据,避免并发请求过多
this.getList().then(() => {
if (this.commonData.cart_change_product == 1) {
this.getGoodDetail(this.id);
}
});
},
updated() {
// // 关闭loading
document.getElementById("mainLoading").style.display = "none";
document.getElementsByClassName("goods")[0].style.display = "block";
},
computed: {
calcProductGroup() {
// fillterKey 过滤关键字 secProductGroupList
const fillterKey = this.fillterKey.trim().toLowerCase();
const originList = JSON.parse(
JSON.stringify(this.secProductGroupList)
);
const arr = originList
.filter((item) => {
return (
item.goodsList.filter((i) => {
return i.name.toLowerCase().indexOf(fillterKey) !== -1;
}).length > 0
);
})
.map((item) => {
item.goodsList = item.goodsList.filter((i) => {
return i.name.toLowerCase().indexOf(fillterKey) !== -1;
});
return item;
});
return arr;
},
},
data() {
return {
id: "",
isIfram: false,
shoppingCarNum: 0,
fillterKey: "",
params: {
page: 1,
limit: 20,
pageSizes: [20, 50, 100],
total: 200,
orderby: "id",
sort: "desc",
keywords: "",
},
commonData: {},
content: "",
productInfo: {},
secProductGroupList: [],
};
},
filters: {
formateTime(time) {
if (time && time !== 0) {
return formateDate(time * 1000);
} else {
return "--";
}
},
},
methods: {
async getList() {
try {
const params = { id: this.id, flag: this.isIfram };
const res = await getOrederConfig(params);
this.$nextTick(() => {
// 解决Jquery加载JS会在文件末尾添加时间戳的问题
$.ajaxSetup({
cache: true,
});
$(".config-box .content").html(res.data.data.content);
});
this.content = res.data.data.content;
} catch (error) {}
},
handleCommand(id) {
// 打开新页面 替换id
location.href = `goods.htm?id=${id}`;
},
getGoodDetail(id) {
apiProductDetail({ id }).then((res) => {
this.productInfo = res.data.data.product;
this.getProductGroup_second(
this.productInfo.product_group_id_first
);
});
},
// 获取二级分类
getProductGroup_second(id) {
productGroupSecond(id).then((res) => {
this.secProductGroupList = res.data.data.list.map((item) => {
item.goodsList = [];
return item;
});
this.getProductGoodList();
});
},
// 获取商品列表
getProductGoodList() {
this.secProductGroupList.forEach((item) => {
const params = {
page: 1,
limit: 999999,
id: item.id,
};
productGoods(params).then((res) => {
item.goodsList = res.data.data.list;
});
});
},
// 每页展示数改变
sizeChange(e) {
this.params.limit = e;
this.params.page = 1;
// 获取列表
},
// 当前页改变
currentChange(e) {
this.params.page = e;
},
// 获取通用配置
getCommonData() {
this.commonData = JSON.parse(
localStorage.getItem("common_set_before")
);
if (this.commonData.cart_change_product == 1) {
this.getGoodDetail(this.id);
}
},
},
}).$mount(template);
typeof old_onload == "function" && old_onload();
};
})(window);

View File

@@ -0,0 +1,949 @@
(function (window, undefined) {
var old_onload = window.onload;
window.onload = function () {
const template = document.getElementsByClassName("template")[0];
Vue.prototype.lang = window.lang;
new Vue({
components: {
asideMenu,
topMenu,
scrollText,
},
created() {
window.addEventListener("scroll", this.scrollBottom);
// 监听 页面点击事件 用于关闭 isShowSuffixBox
document.addEventListener("click", (e) => {
const classNameArr = [
"suffix-list",
"suffix-box",
"suffix-item",
"suffix-item suffix-active",
"el-icon-arrow-down select-btn",
];
if (!classNameArr.includes(e.target.className)) {
this.isShowSuffixBox = false;
}
});
this.getCommonData();
this.getCarList();
sessionStorage.removeItem("product_information");
this.fpg_id = this.getQuery("fpg_id") * 1;
this.spg_id = this.getQuery("spg_id") * 1;
this.host_id = this.getQuery("host_id") * 1;
this.domainInput = this.getQuery("domain");
},
mounted() {
const addons_js_arr = JSON.parse(
document.querySelector("#addons_js").getAttribute("addons_js")
); // 插件列表
const arr = addons_js_arr.map((item) => {
return item.name;
});
if (arr.includes("EventPromotion")) {
// 开启活动满减
this.isShowFull = true;
}
this.initData();
},
updated() {
// 关闭loading
document.getElementById("mainLoading").style.display = "none";
document.getElementsByClassName("template")[0].style.display = "block";
},
destroyed() {
window.removeEventListener("scroll", this.scrollBottom);
},
data() {
return {
isShowView: false,
searchValue: "", // 搜索内容
searchLoading: false,
select_first_obj: {
id: "", // 一级分组ID
type: "", // 一级分组类型
}, // 选中的一级分类对象
select_second_obj: {
id: "", // 二级分组ID
type: "", // 二级分组类型
description: "", // 二级分组描述
}, // 选中的一级分类对象
first_group_list: [], // 一级分类数组
second_group_list: [], // 二级分类数组
commonData: {},
scrollDisabled: false,
secondLoading: false, // 二级分类加载
goodSLoading: false,
goodsParmas: {
keywords: "", // 关键字,搜索范围:商品ID,商品名,描述
id: "", // 二级分组ID
page: 1, // 页数
limit: 12, // 每页条数
},
goodsList: [], // 商品列表数组
regType: "1",
domainInput: "",
selectSuffix: "",
isAllCheck: false,
isShowFull: false,
suffixList: [],
domainList: [],
isSearching: false,
isShowSuffixBox: false,
carList: [],
checkList: [],
product_id: "",
isCarLoading: false,
isIndeterminate: false,
isBatchIndeterminate: false,
isBatchAllCheck: false,
batchLoading: false,
addAllLoading: false,
textarea2: "",
batchCheckGroup: [],
availList: [],
unavailList: [],
faillList: [],
activeNames: [],
domainConfig: {},
isShowUpload: false,
fileName: "",
fileContent: "",
originalPrice: 0.0,
/* 传参搜索 */
fpg_id: "",
spg_id: "",
host_id: "",
isShowFilrer: false,
selectFilterSuffix: [],
};
},
filters: {
formateTime(time) {
if (time && time !== 0) {
return formateDate(time * 1000);
} else {
return "--";
}
},
},
computed: {
// 是否选中的分类为域名
isDomain() {
return this.select_second_obj.type === "domain";
},
// 计算购物车选中的商品的总价
totalMoneyCalc() {
let total = 0;
this.carList.forEach((item) => {
if (this.checkList.includes(item.positions)) {
total += this.priceCalc(item) * 1000;
}
});
const firstDiscount = this.carList.filter(
(item) => this.checkList[0] === item.positions
);
let domainDiscount = 0;
if (firstDiscount.length > 0) {
domainDiscount = firstDiscount[0]?.priceArr[0]?.discount;
}
this.originalPrice = (total / 1000).toFixed(2);
let temp = (total - domainDiscount * 1000) / 1000;
if (isNaN(temp)) {
temp = 0.0;
}
return temp;
},
showDomainList() {
return (
this.domainList.filter((item) => {
return (
item.avail === 0 ||
(item.avail === 1 && item.priceArr.length > 0)
);
}) || []
);
},
// 是否登录
isLogin() {
return window.localStorage.jwt ? true : false;
},
calcDomainList() {
if (this.selectFilterSuffix.length === 0) {
return this.showDomainList;
} else {
return this.showDomainList.filter((item) => {
return this.selectFilterSuffix.includes(
this.getDomainSuffix(item.name).suffix
);
});
}
},
fillterDomainSuffix() {
// 根据域名后缀分类
return [
...new Set(
this.showDomainList.map((item) => {
return this.getDomainSuffix(item.name).suffix;
})
),
];
},
showOriginal() {
const firstDiscount = this.carList.filter(
(item) => this.checkList[0] === item.positions
);
const domainDiscount = firstDiscount[0]?.priceArr[0]?.discount;
if (this.checkList.length > 0 && domainDiscount > 0) {
return true;
} else {
return false;
}
},
},
methods: {
openFilter() {
this.isShowFilrer = !this.isShowFilrer;
this.selectFilterSuffix = [];
},
handelFilterSuffix(item) {
const index = this.selectFilterSuffix.indexOf(item);
if (index !== -1) {
this.selectFilterSuffix.splice(index, 1);
} else {
this.selectFilterSuffix.push(item);
}
},
calcEvent(eventList) {},
getQuery(name) {
const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
const r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURI(r[2]);
return null;
},
goLogin() {
sessionStorage.redirectUrl = "/cart/goodsList.htm";
location.href = "/login.htm";
},
// 选择文件
selectFile() {
document.getElementById("upFile").click();
// 监听文件上传
document.getElementById("upFile").addEventListener("change", (e) => {
// 获取文件
const file = e.target.files[0];
// 判断文件类型
if (file.type !== "text/plain") {
this.$message.warning(lang.template_text137);
return;
}
// 读取文件名
this.fileName = file.name;
// 读取文件
const reader = new FileReader();
// 判断txt文件编码格式
reader.readAsText(file, "utf-8");
reader.onload = (e) => {
const txtString = e.target.result;
// utf-8 的 中文编码 正则表达式
const patrn = /[\u4E00-\u9FA5]/gi;
// 检测当前文本是否含有中文(如果没有,则当乱码处理)
// 两个格式的英文编码一样,所以纯英文文件也当成乱码再处理一次
if (!patrn.exec(txtString)) {
let reader_gb2312 = new FileReader();
// 再拿一次纯文本,这一次拿到的文本一定不会乱码
reader_gb2312.readAsText(file, "gb2312");
reader_gb2312.onload = (e2) => {
this.fileContent = e2.target.result;
};
} else {
this.fileContent = txtString;
}
};
});
},
confirmUpload() {
// 解析输入框中的换行 把换行替换成\n 传字符串
let params = this.fileContent
.replace(/[\r\n]/g, ",")
.split(",")
.filter((item) => {
return item !== "";
});
const maxLimt = this.domainConfig.number_limit || 500;
if (params.length > maxLimt) {
// 截取前500个
params = params.slice(0, maxLimt);
}
this.textarea2 = params.join("\n");
this.cancelUpload();
},
cancelUpload() {
document.getElementById("upFile").value = "";
document
.getElementById("upFile")
.removeEventListener("change", () => {});
this.fileName = "";
this.fileContent = "";
this.isShowUpload = false;
},
// 获取域名设置
getDomainSet() {
domainSetting().then((res) => {
this.domainConfig = res.data.data;
this.selectSuffix = res.data.data.default_search_domain || "";
const suffixArr = this.suffixList.reduce((all, cur) => {
all.push(cur.suffix);
return all;
}, []);
if (
suffixArr.length > 0 &&
!suffixArr.includes(this.selectSuffix)
) {
this.selectSuffix = this.suffixList[0].suffix;
}
// 官网跳转查询
if (location.href.indexOf("suffix") !== -1) {
this.selectSuffix = this.getQuery("suffix");
this.handelDomainSearch();
}
});
},
// 是否已经加入购物车
isAddCart(item) {
const isHave = this.carList.find((cartItem) => {
return cartItem.config_options.domain === item.name;
});
return Boolean(isHave);
},
// 价格计算
priceCalc(item) {
if (item.priceArr.length === 0) {
return 0;
}
const price =
item.priceArr.find((priceItem) => {
return priceItem.buyyear === item.selectYear;
}) || [];
return price.buyprice;
},
goBuyDomain() {
if (this.checkList.length === 0) {
this.$message.warning(lang.template_text138);
return;
}
if (!this.isLogin) {
this.$message.warning(lang.template_text139);
sessionStorage.redirectUrl = "/cart/goodsList.htm";
this.goLogin();
return;
}
sessionStorage.setItem(
"buyDomainPosition",
JSON.stringify(this.checkList)
);
if (this.host_id) {
location.href = `/plugin/${getPluginId(
"IdcsmartDomain"
)}/buyDomain.htm?host_id=${this.host_id}`;
} else {
location.href = `/plugin/${getPluginId(
"IdcsmartDomain"
)}/buyDomain.htm`;
}
},
// 批量查询域名
batchSearchDomain() {
if (!this.textarea2) {
this.$message.warning(lang.template_text140);
return;
}
// 解析输入框中的换行 把换行替换成\n 传字符串
const params = this.textarea2
.replace(/[\r\n]/g, ",")
.split(",")
.filter((item) => {
return item !== "";
})
.join(",");
const maxLimt = this.domainConfig.number_limit || 500;
if (params.split(",").length - 1 >= maxLimt) {
this.$message.warning(
`${lang.template_text141}${maxLimt}${lang.template_text142}`
);
return;
}
this.batchLoading = true;
domainBatch({domains: params})
.then((res) => {
this.availList = res.data.data.avail.map((item) => {
item.priceArr = [];
item.showPrice = 0;
item.priceLoading = true;
return item;
});
// 查询可注册的域名价格
this.availList.forEach((item) => {
domainPrice({name: item.name, host_id: this.host_id})
.then((res) => {
item.priceArr = res.data.data || [];
item.showPrice = res.data.data[0]?.buyprice || 0;
})
.finally(() => {
item.priceLoading = false;
});
});
this.unavailList = res.data.data.unavail;
this.faillList = res.data.data.fail;
})
.catch((err) => {})
.finally(() => {
this.batchLoading = false;
});
},
handleBatchChange(val) {
let checkedCount = val.length;
this.isBatchAllCheck = checkedCount === this.availList.length;
this.isBatchIndeterminate =
checkedCount > 0 && checkedCount < this.availList.length;
},
handleBatchCheckAllChange(val) {
this.batchCheckGroup = val
? this.availList.map((item) => {
return item.name;
})
: [];
this.isBatchIndeterminate = false;
},
// 购物车列表
getCarList() {
this.isCarLoading = true;
cartList().then((res) => {
const arr = res.data.data.list
.map((item, index) => {
return {
...item,
positions: index,
selectYear: item.config_options.year,
priceArr: [],
showPrice: 0,
priceLoading: true,
};
})
.filter((item) => {
return item.customfield.is_domain === 1;
});
// 拉取价格
this.carList = arr;
this.isCarLoading = false;
this.carList.forEach((item) => {
domainPrice({
name: item.config_options.domain,
host_id: this.host_id,
})
.then((res) => {
item.priceArr = res.data.data || [];
item.showPrice = res.data.data[0]?.buyprice || 0;
})
.catch((err) => {})
.finally(() => {
item.priceLoading = false;
});
});
});
},
handleCheckAllChange(val) {
this.checkList = val
? this.carList.map((item) => {
return item.positions;
})
: [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.isAllCheck = checkedCount === this.carList.length;
this.isIndeterminate =
checkedCount > 0 && checkedCount < this.carList.length;
},
// 加入购物车
addCart(item) {
if (this.isAddCart(item)) {
return;
}
this.isCarLoading = true;
const params = {
product_id: this.product_id,
config_options: {
domain: item.name,
year: 1,
},
qty: 1,
customfield: {
is_domain: 1, // 是否域名商品
},
};
addToCart(params)
.then((res) => {
if (res.data.status === 200) {
this.getCarList();
}
})
.catch((err) => {
this.$message.error(err.data.msg);
})
.finally(() => {
this.isCarLoading = false;
});
},
// 批量加入购物车
addAllCart() {
// 判断是否有选中的域名
if (this.batchCheckGroup.length === 0) {
this.$message.warning(lang.template_text138);
return;
}
if (this.addAllLoading) {
return;
}
this.addAllLoading = true;
// 筛选出选中的域名
const arr = this.availList.filter((item) => {
return this.batchCheckGroup.includes(item.name);
});
// 循环调用加入购物车接口
const productsArr = [];
arr.forEach((item) => {
const params = {
product_id: this.product_id,
config_options: {
domain: item.name,
year: 1,
},
qty: 1,
customfield: {
is_domain: 1, // 是否域名商品
},
};
productsArr.push(params);
});
addToCart({products: productsArr})
.then((res) => {
if (res.data.status === 200) {
this.getCarList();
}
})
.catch((err) => {
this.$message.error(err.data.msg);
})
.finally(() => {
this.addAllLoading = false;
});
},
// 修改购物车
changeCart(val, item) {
const params = {
position: item.positions,
product_id: item.product_id,
qty: 1,
config_options: {
domain: item.config_options.domain,
year: val,
},
customfield: {
is_domain: 1, // 是否域名商品
},
};
updateCart(params)
.then((res) => {
if (res.data.status === 200) {
// this.getCarList()
}
})
.catch((err) => {
this.$message.error(err.data.msg);
});
},
// 删除购物车
async deleteCart(item) {
this.isCarLoading = true;
const params = {
position: item.positions,
};
const res = await deleteCart(params);
if (res.data.status === 200) {
this.isCarLoading = false;
this.getCarList();
}
},
// 批量删除购物车
async deleteClearCart() {
if (this.carList.length === 0) {
return;
}
this.isCarLoading = true;
const params = {
positions: this.carList.map((item) => {
return item.positions;
}),
};
const res = await deleteCartBatch(params);
if (res.data.status === 200) {
this.isCarLoading = false;
this.getCarList();
}
},
// 获取后缀
async getSuffix() {
// DA购买域名需要传入产品ID筛选对于的后缀
try {
const res = await domainSuffix(this.host_id);
this.suffixList = res.data.data || [];
this.getDomainSet();
} catch (error) {
this.getDomainSet();
}
},
// 选择后缀
handelSelectSuffix(item) {
this.selectSuffix = item;
},
// 域名截断 return domain suffix baidu.com => baidu .com
getDomainSuffix(str) {
const domainStr = str.trim();
const domainRegex = /^[^.]+(\.[^.]+)+$/;
const domainData = {
domain: domainStr,
suffix: "",
};
if (domainRegex.test(domainStr)) {
const parts = domainStr.split(".");
domainData.domain = parts[0];
domainData.suffix =
parts.length >= 2 ? "." + parts.slice(1).join(".") : "";
}
return domainData;
},
handelDomainSearch() {
// 去除前后空格
this.domainInput = this.domainInput.trim();
if (!this.domainInput) {
this.$message.warning(lang.template_text140);
return;
}
const suffix = this.getDomainSuffix(this.domainInput).suffix;
if (
suffix &&
this.suffixList.find((item) => item.suffix === suffix)
) {
this.selectSuffix = suffix;
}
this.isShowSuffixBox = false;
this.isSearching = true;
this.domainList = [];
this.domainInput = this.getDomainSuffix(this.domainInput).domain;
domainSearch({
domain: this.domainInput,
suffix: this.selectSuffix,
host_id: this.host_id,
})
.then((res) => {
if (res.data.status === 200) {
const list = res.data.data;
this.domainList = list.map((item) => {
item.priceArr = [];
item.showPrice = 0;
item.priceLoading = true;
return item;
});
this.isSearching = false;
this.domainList.forEach((item) => {
if (item.avail === 1) {
domainPrice({name: item.name, host_id: this.host_id})
.then((res) => {
item.priceArr = res.data.data || [];
item.showPrice = res.data.data[0]?.buyprice || 0;
})
.finally(() => {
item.priceLoading = false;
});
}
});
// 判断当前选中的域名后缀是否支持中文
const isChinese =
this.suffixList.find((item) => {
return item.suffix === this.selectSuffix;
}).allow_zh === 0;
// 判断输入的是否是中文
const chineseReg = /[\u4e00-\u9fa5]/g;
if (isChinese && chineseReg.test(this.domainInput)) {
this.domainList.unshift({
// 添加一条不支持中文的提示
name: this.domainInput + this.selectSuffix,
avail: -2,
description: lang.template_text143,
});
}
}
})
.catch((err) => {
this.isSearching = false;
});
},
// 获取域名价格
getDomainPrice() {},
goWhois(item) {
window.open(
`/plugin/${getPluginId("IdcsmartDomain")}/whois.htm?domain=${
item.name
}`
);
},
getRule(arr) {
let isHave = this.showFun(arr, "CartController::index");
if (isHave) {
this.isShowView = true;
}
if (!this.isShowView) {
// 没有权限
location.href = "/noPermissions.htm";
}
},
showFun(arr, str) {
if (typeof arr == "string") {
return true;
} else {
let isShow = "";
isShow = arr.find((item) => {
let isHave = item.includes(str);
if (isHave) {
return isHave;
}
});
return isShow;
}
},
// 获取一级分类
getProductGroup_first() {
productGroupFirst().then((res) => {
this.first_group_list = res.data.data.list;
});
},
// 搜索
searchGoods() {
this.searchLoading = true;
this.goodsParmas.keywords = this.searchValue;
this.goodsParmas.id = "";
this.goodsParmas.page = 1;
this.goodsList = [];
this.getProductGoodList();
},
// 获取二级分类
getProductGroup_second(id) {
productGroupSecond(id).then((res) => {
this.secondLoading = false;
this.second_group_list = res.data.data.list;
if (res.data.data.list[0]) {
this.select_second_obj.id = res.data.data.list[0].id;
this.select_second_obj.type = res.data.data.list[0].type;
this.select_second_obj.description =
res.data.data.list[0]?.description;
this.goodsParmas.id = this.select_second_obj.id;
if (this.select_second_obj.type === "domain") {
this.getSuffix();
}
this.getProductGoodList();
}
});
},
// 获取商品列表
getProductGoodList() {
this.goodSLoading = true;
productGoods(this.goodsParmas).then((res) => {
if (
this.select_second_obj.type === "domain" &&
res.data.data.list[0]
) {
this.product_id = res.data.data.list[0].id;
}
this.searchLoading = false;
const list = res.data.data.list.map((item) => {
item.activeList = [];
return item;
});
if (this.isShowFull) {
list.forEach((item) => {
eventPromotion({id: item.id}).then((res) => {
item.activeList = res.data.list;
});
});
}
this.goodsList = this.goodsList.concat(list);
this.goodSLoading = false;
this.scrollDisabled =
res.data.data.list.length < this.goodsParmas.limit;
this.$nextTick(() => {
// 判断当前列表是否达到滚动加载的条件
this.needScroll();
});
});
},
needScroll() {
const scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
const clientHeight = document.documentElement.clientHeight;
const scrollHeight = document.documentElement.scrollHeight;
if (
scrollTop + clientHeight >= scrollHeight &&
!this.scrollDisabled
) {
this.goodsParmas.page++;
this.getProductGoodList();
}
},
// 初始化
async initData() {
// 获取一级分类
await productGroupFirst().then((res) => {
this.first_group_list = res.data.data.list;
});
if (this.first_group_list[0]) {
this.select_first_obj.id =
this.fpg_id || this.first_group_list[0].id;
this.secondLoading = true;
// 获取二级分类
await productGroupSecond(this.select_first_obj.id).then((ress) => {
this.second_group_list = ress.data.data.list;
});
if (this.second_group_list[0]) {
this.select_second_obj.id =
this.spg_id || this.second_group_list[0].id;
const selectItem = this.second_group_list.find(
(item) => item.id === this.select_second_obj.id
);
this.select_second_obj.type = selectItem?.type;
this.select_second_obj.description = selectItem?.description;
this.goodsParmas.page = 1;
this.goodsParmas.id = this.spg_id || this.second_group_list[0].id;
this.secondLoading = false;
if (this.select_second_obj.type === "domain") {
this.getSuffix();
}
this.getProductGoodList();
} else {
this.goodSLoading = false;
this.goodsList = [];
}
} else {
this.goodSLoading = false;
this.goodsList = [];
}
},
// 点击一级分类
selectFirstType(val) {
this.select_first_obj.id = val;
this.secondLoading = true;
this.goodsParmas.page = 1;
this.second_group_list = [];
this.select_second_obj = {
id: "",
type: "",
description: "",
};
this.getProductGroup_second(val);
this.goodsList = [];
},
// 点击二级分类
selectSecondType(val) {
this.select_second_obj.id = val;
const clickItem = this.second_group_list.find((item) => {
return item.id === val;
});
this.select_second_obj.type = clickItem?.type;
this.select_second_obj.description = clickItem?.description;
this.goodsList = [];
this.goodsParmas.page = 1;
this.goodsParmas.id = val;
if (this.select_second_obj.type === "domain") {
this.getSuffix();
}
this.getProductGoodList();
},
// 获取通用配置
getCommonData() {
getCommon().then((res) => {
this.commonData = res.data.data;
localStorage.setItem(
"common_set_before",
JSON.stringify(res.data.data)
);
document.title =
this.commonData.website_name + "-" + lang.common_cloud_text301;
});
},
// 点击购买
goOrder(item) {
if (
Boolean(
(JSON.parse(localStorage.getItem("common_set_before")) || {})
.custom_fields?.before_settle === 1
)
) {
window.open("/account.htm");
return;
}
// 新窗口打开
window.open(`goods.htm?id=${item.id}`);
},
// 滚动计算
scrollBottom() {
if (this.select_second_obj.type === "domain") {
return;
}
const scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
const clientHeight = document.documentElement.clientHeight;
const scrollHeight = document.documentElement.scrollHeight;
if (scrollTop + clientHeight >= scrollHeight) {
if (this.scrollDisabled) {
} else {
this.goodsParmas.page++;
this.getProductGoodList();
}
}
},
},
watch: {
"select_first_obj.id": function (val) {
// 更改url 中fpg_id 和 spg_id 参数
const url = window.location.href;
// 拿到当前url中的参数
const params = new URLSearchParams(url.split("?")[1]);
// 改变参数
params.set("fpg_id", val);
// 重新组装url
const newUrl = `${url.split("?")[0]}?${params.toString()}`;
// 替换当前url
window.history.replaceState({}, "", newUrl);
},
"select_second_obj.id": function (val) {
// 更改url 中fpg_id 和 spg_id 参数
const url = window.location.href;
// 拿到当前url中的参数
const params = new URLSearchParams(url.split("?")[1]);
// 改变参数
params.set("spg_id", val);
// 重新组装url
const newUrl = `${url.split("?")[0]}?${params.toString()}`;
// 替换当前url
window.history.replaceState({}, "", newUrl);
},
},
}).$mount(template);
typeof old_onload == "function" && old_onload();
};
})(window);

View File

@@ -0,0 +1,367 @@
(function (window, undefined) {
var old_onload = window.onload;
window.onload = function () {
const template = document.getElementsByClassName("template")[0];
Vue.prototype.lang = window.lang;
const host = location.host;
const fir = location.pathname.split("/")[1];
const str = `${host}/${fir}/`;
new Vue({
components: {
asideMenu,
topMenu,
payDialog,
eventCode,
},
created() {
localStorage.frontMenusActiveId = "";
const temp = this.getQuery(location.search);
if (temp.cart) {
// 购物车过来
this.selectGoodsList = JSON.parse(sessionStorage.shoppingCartList);
this.isFormShoppingCart = true;
} else {
const obj = sessionStorage.product_information
? JSON.parse(sessionStorage.product_information)
: sessionStorage.settleItem
? JSON.parse(sessionStorage.settleItem)
: {};
sessionStorage.settleItem = sessionStorage.product_information;
sessionStorage.removeItem("product_information");
this.isFormShoppingCart = false;
this.productObj = {
product_id: temp.id ? temp.id : obj.id ? obj.id : "",
config_options: obj.config_options,
qty: Number(obj.qty),
customfield: obj.customfield,
self_defined_field: obj.self_defined_field,
};
productDetail(this.productObj.product_id).then((res) => {
this.productObj.name = res.data.data.product.name;
});
}
this.getCommonData();
// this.getPayLisy();
},
mounted() {
this.addons_js_arr = JSON.parse(
document.querySelector("#addons_js").getAttribute("addons_js")
); // 插件列表
const arr = this.addons_js_arr.map((item) => {
return item.name;
});
if (arr.includes("PromoCode")) {
// 开启了优惠码插件
this.isShowPromo = true;
}
if (arr.includes("IdcsmartClientLevel")) {
// 开启了等级优惠
this.isShowLevel = true;
}
if (arr.includes("EventPromotion")) {
// 开启活动满减
this.isShowFull = true;
}
this.getCartList();
},
updated() {
// 关闭loading
document.getElementById("mainLoading").style.display = "none";
document.getElementsByClassName("template")[0].style.display = "block";
},
data() {
return {
initArr: [],
commonData: {}, // 公告接口数据
addons_js_arr: [],
showPayBtn: false,
totalPriceLoading: false,
goodIdList: [],
isUseDiscountCode: false,
productObj: {
customfield: {},
}, // 单独结算的商品对象
shoppingList: [], // 所有购物车列表
listLoading: false,
selectGoodsList: [],
isFormShoppingCart: true, // 是否从购物车页面结算
showGoodsList: [], // 展示的列表
payTypeList: [], // 支付渠道数组
payType: "", // 选择的支付渠道
checked: false, // 勾选隐私协议
isShowPromo: false, // 是否开启优惠码
isShowLevel: false, // 是否开启等级优惠
isShowFull: false,
subBtnLoading: false, // 提交按钮loading
};
},
filters: {
formateTime(time) {
if (time && time !== 0) {
return formateDate(time * 1000);
} else {
return "--";
}
},
filterMoney(money) {
if (isNaN(money) || money * 1 < 0) {
return "0.00";
} else {
return formatNuberFiexd(money);
}
},
},
computed: {
finallyPrice() {
return this.totalPrice;
},
totalLevelDiscount() {
return formatNuberFiexd(
this.showGoodsList.reduce((pre, cur) => {
return pre + cur.level_discount * 1;
}, 0)
);
},
totalPrice() {
return formatNuberFiexd(
this.showGoodsList.reduce((pre, cur) => {
return pre + cur.calcItemPrice * 1;
}, 0)
);
},
orginPrice() {
return formatNuberFiexd(
this.showGoodsList.reduce((pre, cur) => {
return pre + cur.price * 1;
}, 0)
);
},
totalCodelDiscount() {
return formatNuberFiexd(
this.showGoodsList.reduce((pre, cur) => {
return pre + cur.code_discount * 1;
}, 0)
);
},
totalFullDiscount() {
return formatNuberFiexd(
this.showGoodsList.reduce((pre, cur) => {
return pre + cur.eventDiscount * 1;
}, 0)
);
},
},
methods: {
getRule(arr) {
let isHave = this.showFun(arr, "PayController::pay");
if (isHave) {
this.showPayBtn = true;
}
},
showFun(arr, str) {
if (typeof arr == "string") {
return true;
} else {
let isShow = "";
isShow = arr.find((item) => {
let isHave = item.includes(str);
if (isHave) {
return isHave;
}
});
return isShow;
}
},
// 获取购物车列表
async getCartList() {
this.listLoading = true;
this.initArr = [];
if (this.isFormShoppingCart) {
// 从购物车结算
await cartList().then((res) => {
this.shoppingList = res.data.data.list;
this.selectGoodsList.forEach((item) => {
const obj = this.shoppingList[item];
this.initArr.push(obj);
});
});
} else {
// 从商品详情结算
this.initArr.push(this.productObj);
}
this.initArr.forEach((item) => {
item.isLoading = true;
item.priceLoading = false;
item.price = 0; // 商品单价
item.code_discount = 0; // 商品优惠码抵扣金额
item.isUseDiscountCode = false;
item.level_discount = 0; // 商品等级优惠折扣金额
item.eventDiscount = 0;
item.calcItemPrice = 0;
this.goodIdList.push(item.product_id);
this.getConfigOption(item);
});
this.showGoodsList = [...this.initArr];
this.listLoading = false;
},
// 获取商品配置项价格
getConfigOption(item) {
const params = {
config_options: {
...item.config_options,
promo_code: item.customfield.promo_code,
event_promotion: item.customfield.event_promotion,
},
qty: item.qty,
};
item.priceLoading = true;
configOption(item.product_id, params)
.then(async (res) => {
item.info = res.data.data;
const son_previews = [];
if (res.data.data.other && res.data.data.other.son_previews) {
res.data.data.other.son_previews.forEach((i) => {
i.forEach((items) => {
son_previews.push(items);
});
});
}
if (res.data.data.sub_host && res.data.data.sub_host.length > 0) {
res.data.data.sub_host.forEach((i) => {
i.preview.forEach((items) => {
son_previews.push(items);
});
});
}
item.preview = res.data.data.preview.concat(son_previews);
item.price = res.data.data.price * 1;
item.calcItemPrice = res.data.data.price_total * 1;
item.level_discount =
res.data.data.price_client_level_discount * 1 || 0;
item.code_discount =
res.data.data.price_promo_code_discount * 1 || 0;
item.eventDiscount =
res.data.data.price_event_promotion_discount * 1 || 0;
})
.catch((err) => {
item.preview = [];
})
.finally(() => {
item.priceLoading = false;
item.isLoading = false;
this.showGoodsList = [...this.initArr];
this.$forceUpdate();
});
},
goPay() {
if (!this.checked) {
this.$message.warning(lang.shoppingCar_tip_text6);
return;
}
if (
Boolean(
(JSON.parse(localStorage.getItem("common_set_before")) || {})
.custom_fields?.before_settle === 1
)
) {
window.open("/account.htm");
return;
}
this.subBtnLoading = true;
const settleApi = this.isFormShoppingCart
? cart_settle
: product_settle;
const params = this.isFormShoppingCart
? {
positions: this.selectGoodsList,
}
: {
product_id: this.productObj.product_id,
config_options: this.productObj.config_options,
customfield: this.productObj.customfield,
self_defined_field: this.productObj.self_defined_field,
qty: this.productObj.qty,
};
settleApi(params)
.then((res) => {
this.$refs.payDialog.showPayDialog(
res.data.data.order_id,
res.data.data.amount,
this.payType
);
})
.catch((err) => {
if (err.data?.data?.certification === 0) {
this.$message.error({
duration: 0,
showClose: true,
dangerouslyUseHTMLString: true,
message: `${err.data.msg}
<a style="margin-left:5px;" target="_blank" href="/plugin/${getPluginId(
"IdcsmartCertification"
)}/authentication_select.htm">${lang.wx_tip7}</a>
`,
type: "error",
});
} else {
this.$message.error(err.data.msg);
}
})
.finally(() => {
this.subBtnLoading = false;
});
},
// 支付成功回调
paySuccess(e) {
location.href = "/finance.htm";
},
// 取消支付回调
payCancel(e) {
location.href = "/finance.htm";
},
getPayLisy() {
payLisy().then((res) => {
this.payTypeList = res.data.data.list;
this.payType = res.data.data.list[0].name;
});
},
// 解析url
getQuery(url) {
const str = url.substr(url.indexOf("?") + 1);
const arr = str.split("&");
const res = {};
for (let i = 0; i < arr.length; i++) {
const item = arr[i].split("=");
res[item[0]] = item[1];
}
return res;
},
goTermsServiceUrl() {
window.open(this.commonData.terms_service_url);
},
goTermsPrivacUrl() {
window.open(this.commonData.terms_privacy_url);
},
goHelpUrl(url) {
window.open(this.commonData[url]);
},
// 获取通用配置
getCommonData() {
this.commonData = JSON.parse(
localStorage.getItem("common_set_before")
);
document.title =
this.commonData.website_name + "-" + lang.shoppingCar_tip_text7;
},
},
}).$mount(template);
typeof old_onload == "function" && old_onload();
};
})(window);

View File

@@ -0,0 +1,510 @@
(function (window, undefined) {
var old_onload = window.onload;
window.onload = function () {
const template = document.getElementsByClassName("template")[0];
Vue.prototype.lang = window.lang;
new Vue({
components: {
asideMenu,
topMenu,
discountCode,
eventCode,
},
created() {
localStorage.frontMenusActiveId = "";
this.getCommonData();
},
mounted() {
this.addons_js_arr = JSON.parse(
document.querySelector("#addons_js").getAttribute("addons_js")
); // 插件列表
const arr = this.addons_js_arr.map((item) => {
return item.name;
});
if (arr.includes("PromoCode")) {
// 开启了优惠码插件
this.isShowPromo = true;
}
if (arr.includes("IdcsmartClientLevel")) {
// 开启了等级优惠
this.isShowLevel = true;
}
if (arr.includes("EventPromotion")) {
// 开启活动满减
this.isShowFull = true;
}
this.getCartList();
},
updated() {
// 关闭loading
document.getElementById("mainLoading").style.display = "none";
document.getElementsByClassName("template")[0].style.display = "block";
},
destroyed() { },
data() {
return {
timer1: null,
listLoding: false,
commonData: {},
searchVal: "",
checkedCities: [],
checkAll: false, // 是否全选
visible: false,
showList: [],
addons_js_arr: [], // 插件列表
shoppingList: [],
isShowPromo: false, // 是否开启优惠码
isShowLevel: false, // 是否开启等级优惠
isShowFull: false, // 是否开启满减优惠
settleLoading: false,
};
},
filters: {
formateTime(time) {
if (time && time !== 0) {
return formateDate(time * 1000);
} else {
return "--";
}
},
filterMoney(money) {
if (isNaN(money) || money * 1 < 0) {
return "0.00";
} else {
return formatNuberFiexd(money);
}
},
},
computed: {
totalPrice() {
return this.showList
.filter((item) => {
return this.checkedCities.includes(item.position);
})
.reduce((pre, cur) => {
return pre + cur.calcItemPrice * 1;
}, 0);
},
nowList() {
if (this.searchVal !== "") {
return this.showList.filter((item) =>
item.name.includes(this.searchVal)
);
} else {
return this.showList;
}
},
},
methods: {
// 获取购物车列表
getCartList() {
this.listLoding = true;
cartList()
.then((res) => {
this.shoppingList = res.data.data.list.map((item, index) => {
item.price = 0; // 商品单价
item.calcItemPrice = 0;
item.code_discount = 0; // 商品优惠码抵扣金额
item.level_discount = 0; // 商品等级优惠折扣金额
item.eventDiscount = 0; // 商品活动优惠金额
item.isUseDiscountCode = false; // 商品是否使用优惠码
item.position = index; // 商品所在购物车位置
item.isShowTips = false; // 是否提示商品库存不足
item.priceLoading = true; // 商品价格loading
if (item.stock_control === 1 && item.qty > item.stock_qty) {
item.isShowTips = true;
item.qty = item.stock_qty;
}
item.isLoading = true; // 商品loading
return item;
});
const arr = this.shoppingList.filter((arritem) => {
return arritem.customfield?.is_domain !== 1;
});
this.listLoding = false;
this.showList = [...arr];
this.showList.forEach((item) => {
this.getConfigOption(item);
});
})
.catch((err) => {
console.log(err);
this.listLoding = false;
});
},
// 获取商品配置项价格
getConfigOption(item) {
const params = {
config_options: {
...item.config_options,
promo_code: item.customfield.promo_code,
event_promotion: item.customfield.event_promotion,
},
qty: item.qty,
};
item.priceLoading = true;
configOption(item.product_id, params)
.then(async (res) => {
item.info = res.data.data;
const son_previews = [];
if (res.data.data.other && res.data.data.other.son_previews) {
res.data.data.other.son_previews.forEach((i) => {
i.forEach((items) => {
son_previews.push(items);
});
});
}
if (res.data.data.sub_host && res.data.data.sub_host.length > 0) {
res.data.data.sub_host.forEach((i) => {
i.preview.forEach((items) => {
son_previews.push(items);
});
});
}
item.preview = res.data.data.preview.concat(son_previews);
item.price = res.data.data.price * 1;
item.base_price = res.data.data.base_price * 1;
item.calcItemPrice = res.data.data.price_total * 1;
item.level_discount =
res.data.data.price_client_level_discount * 1 || 0;
item.code_discount =
res.data.data.price_promo_code_discount * 1 || 0;
item.eventDiscount =
res.data.data.price_event_promotion_discount * 1 || 0;
})
.catch((err) => {
item.preview = [];
})
.finally(() => {
item.priceLoading = false;
item.isLoading = false;
this.showList = [...this.showList];
this.$forceUpdate();
});
},
// 更改活动
changeEventCode(priceObj, item) {
if (item.customfield.event_promotion == priceObj.id) {
return;
}
item.customfield.event_promotion = priceObj.id;
const params = {
position: item.position,
product_id: item.product_id,
config_options: item.config_options, // 配置信息
qty: item.qty, // 商品数量
customfield: item.customfield,
self_defined_field: item.self_defined_field,
};
updateCart(params).then((res) => {
this.getConfigOption(item);
});
},
// 使用优惠码
getDiscount(data) {
this.showList.forEach((item) => {
if (item.position === data[2]) {
item.customfield.promo_code = data[1];
item.isUseDiscountCode = true;
const params = {
position: data[2],
product_id: item.product_id,
config_options: item.config_options, // 配置信息
qty: item.qty, // 商品数量
customfield: item.customfield,
self_defined_field: item.self_defined_field,
};
updateCart(params).then((res) => {
this.getConfigOption(item);
});
}
});
},
// 删除优惠码
removeDiscountCode(item) {
item.customfield.promo_code = "";
item.isUseDiscountCode = false;
let i;
this.showList.forEach((items, index) => {
if (items.position === item.position) {
i = index;
}
});
const params = {
position: i,
product_id: item.product_id,
config_options: item.config_options, // 配置信息
qty: item.qty, // 商品数量
customfield: item.customfield,
self_defined_field: item.self_defined_field,
};
updateCart(params).then((res) => {
this.getConfigOption(item);
});
},
// 搜索
searchValChange(value) {
this.checkedCities = [];
this.checkAll = false;
},
// 点击全选按钮
handleCheckAllChange(val) {
const arr = this.showList.filter((item) => {
return item.info;
});
const arrr = arr.map((item) => {
return item.position;
});
this.checkedCities = val ? arrr : [];
},
// 编辑商品数量
handelEditGoodsNum(index, num) {
return editGoodsNum(index, num);
},
// 编辑商品
goGoods(item) {
if (item.info) {
const obj = {
config_options: item.config_options, // 配置信息
position: item.position, // 修改接口要用的位置信息
qty: item.qty, // 商品数量
customfield: item.customfield,
self_defined_field: item.self_defined_field,
};
sessionStorage.setItem("product_information", JSON.stringify(obj));
}
location.href = `goods.htm?id=${item.product_id}&change=true&name=${item.name}`;
},
// 监听购物车选择数量变化
handleCheckedCitiesChange(value) {
this.checkAll = value.length === this.showList.length;
},
// 删除商品函数
deleteGoodsList(arr) {
deleteGoods(arr)
.then((res) => {
if (res.data.status === 200) {
this.$message.success(res.data.msg);
this.getCartList();
this.$refs.topMenu.getCartList();
}
})
.catch((err) => {
err.data.msg && this.$message.error(err.data.msg);
})
.finally(() => { });
},
// 点击删除按钮
handelDeleteGoods(item) {
// 调用删除接口
const p = item.position;
let shoppingList_index = 0;
let checkedCities_index = 0;
let show_index = 0;
// 删除列表中对应的商品
this.shoppingList.forEach((listItem, index) => {
if (listItem.position === p) {
shoppingList_index = index;
}
});
this.checkedCities.forEach((listItem, index) => {
if (listItem === p) {
checkedCities_index = index;
}
});
this.showList.forEach((listItem, index) => {
if (listItem === p) {
show_index = index;
}
});
this.showList.splice(show_index, 1);
this.checkedCities.splice(checkedCities_index, 1);
this.deleteGoodsList([item.position]);
},
// 删除选中的商品
deleteCheckGoods() {
if (this.checkedCities.length === 0) {
this.$message.warning(lang.referral_status9);
return;
} else {
this.deleteGoodsList(this.checkedCities);
this.checkedCities = [];
}
},
// 商品数量增加减少
handleChange(n, o, item) {
if (item.stock_control === 1 && n >= item.stock_qty) {
this.$message.error(lang.referral_status10);
return;
}
// 节个流
if (this.timer1) {
clearTimeout(this.timer1);
this.timer1 = null;
}
item.priceLoading = true;
this.timer1 = setTimeout(() => {
this.handelEditGoodsNum(item.position, n)
.then(async () => {
this.getConfigOption(item);
})
.catch((err) => {
err.data.msg && this.$message.error(err.data.msg);
})
.finally(() => {
item.priceLoading = false;
clearTimeout(this.timer1);
this.timer1 = null;
});
this.syncBindTool(item);
}, 500);
},
// 同步绑定工具函数
syncBindTool(item) {
if (
item.customfield.product_related_limit &&
item.customfield.product_related_limit?.related.length > 0
) {
const arr = item.customfield.product_related_limit.related || [];
// 循环判断是否有关联商品
// 过滤出关联商品
const relatedList = this.showList.filter((items) => {
return (
arr.includes(items.product_id * 1) ||
arr.includes(String(items.product_id))
);
});
// 过滤出和当前商品ID一样的列表
const someList = this.showList.filter((items) => {
return items.product_id == item.product_id;
});
// 对比关联商品和当前商品的数量
const relatedNum = relatedList.reduce((pre, cur) => {
return pre + cur.qty;
}, 0);
const someNum = someList.reduce((pre, cur) => {
return pre + cur.qty;
}, 0);
if (relatedNum != someNum && relatedNum !== 0) {
if (someNum > relatedNum) {
// 如果关联商品数量小于当前商品数量 给筛选出来的关联商品加1
this.handelEditGoodsNum(
relatedList[0].position,
relatedList[0].qty + (someNum - relatedNum)
).then(async () => {
this.showList.forEach((items) => {
if (items.position == relatedList[0].position) {
items.qty = relatedList[0].qty + (someNum - relatedNum);
this.getConfigOption(items);
this.$forceUpdate();
}
});
});
} else {
// 如果关联商品数量大于当前商品数量 给当前商品加1
this.handelEditGoodsNum(
relatedList[0].position,
relatedList[0].qty > relatedNum - someNum
? relatedList[0].qty - (relatedNum - someNum)
: 1
).then(async () => {
this.showList.forEach((items) => {
if (items.position == relatedList[0].position) {
items.qty =
relatedList[0].qty > relatedNum - someNum
? relatedList[0].qty - (relatedNum - someNum)
: 1;
this.getConfigOption(items);
this.$forceUpdate();
}
});
});
}
}
}
},
checkBindFun(selctedArr) {
let flag = true;
selctedArr.forEach((item) => {
if (
item.customfield.product_related_limit &&
item.customfield.product_related_limit?.related.length > 0
) {
const arr = item.customfield.product_related_limit.related || [];
// 循环判断是否有关联商品
// 过滤出关联商品
const relatedList = selctedArr.filter((items) => {
return (
arr.includes(items.product_id * 1) ||
arr.includes(String(items.product_id))
);
});
// 过滤出和当前商品ID一样的列表
const someList = selctedArr.filter((items) => {
return items.product_id == item.product_id;
});
// 对比关联商品和当前商品的数量
const relatedNum = relatedList.reduce((pre, cur) => {
return pre + cur.qty;
}, 0);
const someNum = someList.reduce((pre, cur) => {
return pre + cur.qty;
}, 0);
if (relatedNum != someNum) {
flag = false;
}
}
});
return flag;
},
// 结算
goSettle() {
// 判断是否需要先设置账户,如果需要则跳转到设置账户页面
if (
Boolean(
(JSON.parse(localStorage.getItem("common_set_before")) || {})
.custom_fields?.before_settle === 1
)
) {
window.open("/account.htm");
return;
}
if (this.checkedCities.length === 0) {
this.$message.warning(lang.referral_status11);
return;
}
const arr = []; // 装的是被选中的商品在购物位置的索引
this.showList.forEach((item) => {
this.checkedCities.forEach((items) => {
if (items == item.position) {
arr.push(item);
}
});
});
if (!this.checkBindFun(arr)) {
this.$message.warning(lang.cart_tip_text14);
return;
}
this.settleLoading = true;
sessionStorage.shoppingCartList = JSON.stringify(this.checkedCities);
setTimeout(() => {
location.href = `/cart/settlement.htm?cart=1`;
this.settleLoading = false;
}, 500);
},
// 获取通用配置
getCommonData() {
this.commonData = JSON.parse(
localStorage.getItem("common_set_before")
);
document.title =
this.commonData.website_name + "-" + lang.shoppingCar_title;
},
},
}).$mount(template);
typeof old_onload == "function" && old_onload();
};
})(window);

View File

@@ -0,0 +1,182 @@
<link rel="stylesheet" href="/{$template_catalog_cart}/template/{$themes_cart}/css/settlement.css">
</head>
<body>
<!-- mounted之前显示 -->
<div id="mainLoading">
<div class="ddr ddr1"></div>
<div class="ddr ddr2"></div>
<div class="ddr ddr3"></div>
<div class="ddr ddr4"></div>
<div class="ddr ddr5"></div>
</div>
<div class="template">
<el-container>
<aside-menu @getruleslist="getRule"></aside-menu>
<el-container>
<top-menu></top-menu>
<el-main>
<!-- 自己的东西 -->
<div class="main-card">
<div class="main-title">
{{lang.settlement_title}}
<p class="dont-save-password" v-if="commonData.donot_save_client_product_password === 1">
{{lang.dont_save_password_tip}}
</p>
</div>
<div class="goods-box">
<div class="goods-item" v-loading="listLoading">
<div v-for="(item,index) in showGoodsList" :key="index" class="shopping-goods"
v-loading="item.isLoading">
<div class="table-name">
<span class="goods-name">{{item.name}}</span>
</div>
<div class="table-content">
<table class="goods-table">
<thead>
<th class="description-box">{{lang.settlement_goodsInfo}}</th>
<th class="price-box">{{lang.settlement_goodsPrice}}</th>
<th class="num-box">{{lang.settlement_goodsNums}}</th>
<th class="total-box">{{lang.settlement_goodsTotalPrice}}</th>
</thead>
<tbody>
<tr>
<td>
<div class="info-box" v-if="item.info">
<div class="goods-info" v-if="false">
<span class="goodsInfo-type">
<span class="goodsInfo-name">{{item.name}}</span>
<span class="goodsInfo-val"></span>
</span>
<span
class="goodsInfo-price">{{commonData.currency_prefix}}{{item.info.base_price}}</span>
</div>
<div v-for="(infoItem,value,index) in item.preview" :key="index" class="goods-info">
<span class="goodsInfo-type">
<span class="goodsInfo-name">{{infoItem.name}}</span>
<span class="goodsInfo-val">{{infoItem.value}}</span>
</span>
<span class="goodsInfo-price">{{commonData.currency_prefix}}{{infoItem.price}}</span>
</div>
</div>
<div v-else></div>
</td>
<td class="item-price">
<template v-if="item.info?.host_billing_cycle === 'on_demand'">
{{commonData.currency_prefix}}<span
class="price">{{(item.info.base_price * 1).toFixed(2)}}</span>&nbsp;<span
class="default-color">{{lang.demand_text1}}</span><br>
{{commonData.currency_prefix}}<span
class="price">{{(item.info.base_renew_price * 1).toFixed(4)}}</span>&nbsp;<span
class="default-color">/{{lang.demand_text2}}</span><br>
<template v-if="item.info.base_on_demand_flow_price * 1">
{{commonData.currency_prefix}}<span
class="price">{{(item.info.base_on_demand_flow_price * 1).toFixed(4)}}</span>&nbsp;<span
class="default-color">/GB</span>
</template>
</template>
<template v-else>
{{commonData.currency_prefix}}{{Number(item.price * 1 / item.qty).toFixed(2)}}
<span v-if="item.info && item.info.billing_cycle">/
{{item.info.customfield?.multi_language?.billing_cycle || item.info.billing_cycle}}</span>
</template>
</td>
<td>
{{item.qty}}
</td>
<td class="item-total">
<span>{{commonData.currency_prefix}} {{item.calcItemPrice | filterMoney}}</span>
<el-popover placement="top-start" width="200" trigger="hover"
v-if="item.price != item.calcItemPrice">
<div class="show-config-list">
<p v-if="item.level_discount">
{{lang.shoppingCar_tip_text2}}{{commonData.currency_prefix}} {{
item.level_discount | filterMoney }}
</p>
<p v-if="item.code_discount">
{{lang.shoppingCar_tip_text4}}{{commonData.currency_prefix}} {{ item.code_discount |
filterMoney }}
</p>
<p v-if="item.eventDiscount">{{lang.goods_text4}}{{commonData.currency_prefix}} {{
item.eventDiscount | filterMoney }}</p>
</div>
<i class="el-icon-warning-outline total-icon" slot="reference"></i>
</el-popover>
<event-code v-if="item.info && item.info.duration !=='' && item.eventDiscount"
:id="item.customfield.event_promotion" :product_id="item.product_id" :qty="item.qty"
:amount="item.price" :billing_cycle_time="item.info.duration" disabled>
</event-code>
<p class="original-price" v-if="item.price != item.calcItemPrice">
{{commonData.currency_prefix}} {{item.price | filterMoney}}
</p>
<div v-show="item.customfield.promo_code" class="discount-codeNumber">
{{ item.customfield.promo_code }}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</el-main>
<el-footer v-if="!isNaN(Number(totalPrice).toFixed(2))" style="min-height: 1.6rem; height:auto;">
<div class="footer-box">
<div class="footer-left" v-if="false">
<span class="pay-text">{{lang.settlement_tip1}}</span>
<el-radio-group v-model="payType" class="radio-box" v-if="payTypeList.length!==0">
<el-radio :label="item.name" v-for="item in payTypeList" :key="item.id">{{item.title}}</el-radio>
</el-radio-group>
</div>
<div class="footer-right">
<div class="totalprice-box" v-loading="totalPriceLoading">
<div>
{{lang.settlement_tip2}}
<span class="total-price">{{commonData.currency_prefix}}{{finallyPrice | filterMoney}}</span>
<el-popover placement="top-start" width="200" trigger="hover"
v-if="orginPrice*1 != totalPrice*1 || finallyPrice*1 != totalPrice*1">
<div class="show-config-list">
<p v-if="totalLevelDiscount * 1 > 0">{{lang.shoppingCar_tip_text2}}{{commonData.currency_prefix}}
{{
totalLevelDiscount | filterMoney }}
</p>
<p v-if="totalCodelDiscount * 1 > 0">
{{lang.shoppingCar_tip_text4}}{{commonData.currency_prefix}} {{ totalCodelDiscount |
filterMoney }}
</p>
<p v-if="totalFullDiscount * 1 > 0">{{lang.goods_text4}}{{commonData.currency_prefix}}
{{ totalFullDiscount | filterMoney }}
</p>
</div>
<i class="el-icon-warning-outline total-icon" slot="reference"></i>
</el-popover>
</div>
</div>
<div class="btn-box" v-if="showPayBtn">
<el-button type="primary" class="buy-btn" @click="goPay"
:loading="subBtnLoading">{{lang.settlement_tip3}}</el-button>
<div class="check-box">
<el-checkbox v-model="checked"></el-checkbox>
{{lang.settlement_tip4}}
<span class="bule-text" @click="goHelpUrl('terms_service_url')">{{lang.read_service}}</span>
{{lang.settlement_tip6}}
<span class="bule-text" @click="goHelpUrl('terms_privacy_url')">{{lang.read_privacy}}</span>
</div>
</div>
</div>
</div>
</el-footer>
<!-- 支付弹窗 -->
<pay-dialog ref="payDialog" @payok="paySuccess" @paycancel="payCancel"></pay-dialog>
</el-container>
</el-container>
</div>
<!-- =======页面独有======= -->
<script src="/{$template_catalog_cart}/template/{$themes_cart}/api/shopping.js"></script>
<script src="/{$template_catalog}/template/{$themes}/components/payDialog/payDialog.js"></script>
<script src="/{$template_catalog}/template/{$themes}/components/eventCode/eventCode.js"></script>
<script src="/{$template_catalog_cart}/template/{$themes_cart}/js/settlement.js"></script>

View File

@@ -0,0 +1,187 @@
<!-- 页面独有样式 -->
<link rel="stylesheet" href="/{$template_catalog_cart}/template/{$themes_cart}/css/shoppingCar.css">
</head>
<body>
<!-- mounted之前显示 -->
<div id="mainLoading">
<div class="ddr ddr1"></div>
<div class="ddr ddr2"></div>
<div class="ddr ddr3"></div>
<div class="ddr ddr4"></div>
<div class="ddr ddr5"></div>
</div>
<div class="template">
<el-container>
<aside-menu></aside-menu>
<el-container>
<top-menu ref="topMenu"></top-menu>
<el-main>
<!-- 自己的东西 -->
<div class="main-card">
<div class="main-title">{{lang.shoppingCar_title}}</div>
<div class="search-box">
<el-input :placeholder="lang.shoppingCar_tip_text" suffix-icon="el-icon-search" @change="searchValChange"
v-model="searchVal">
</el-input>
</div>
<div class="goods-box" v-loading="listLoding">
<div class="goods-item" v-if="showList.length !== 0 || listLoding">
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<div v-for="item in nowList" :key="item.position" class="shopping-goods" v-loading="item.isLoading">
<div class="table-name">
<el-checkbox :label="item.position" v-if="item.info">
<span class="goods-name">{{item.name}}</span>
</el-checkbox>
<span class="goods-name mar-left-24" v-else>{{item.name}}</span>
<el-link type="primary" class="edit-goods" v-if="item.info"
@click="goGoods(item)">{{lang.shoppingCar_editGoods}}</el-link>
</div>
<div class="table-content">
<table class="goods-table">
<thead>
<th class="description-box">{{lang.shoppingCar_goodsInfo}}</th>
<th class="price-box">{{lang.shoppingCar_goodsPrice}}</th>
<th class="num-box">{{lang.shoppingCar_goodsNums}}</th>
<th class="total-box">{{lang.shoppingCar_goodsTotalPrice}}</th>
<th class="action-box">{{lang.shoppingCar_goodsAction}}</th>
</thead>
<tbody>
<tr v-if="item.info">
<td>
<div class="info-box">
<div class="goods-info" v-if="false">
<span class="goodsInfo-type">
<span class="goodsInfo-name">{{item.name}}</span>
<span class="goodsInfo-val"></span>
</span>
<span
class="goodsInfo-price">{{commonData.currency_prefix}}{{item.info.base_price}}</span>
</div>
<div v-for="(infoItem,value,index) in item.preview" :key="index" class="goods-info">
<span class="goodsInfo-type">
<span class="goodsInfo-name">{{infoItem.name}}</span>
<span class="goodsInfo-val">{{infoItem.value}}</span>
</span>
<span class="goodsInfo-price">{{commonData.currency_prefix}}{{infoItem.price}}</span>
</div>
</div>
</td>
<td class="item-price">
<template v-if="item.info.host_billing_cycle === 'on_demand'">
{{commonData.currency_prefix}}<span class="price">{{(item.info.base_price * 1).toFixed(2)}}</span>&nbsp;<span class="default-color">{{lang.demand_text1}}</span><br>
{{commonData.currency_prefix}}<span class="price">{{(item.info.base_renew_price * 1).toFixed(4)}}</span>&nbsp;<span class="default-color">/{{lang.demand_text2}}</span><br>
<template v-if="item.info.base_on_demand_flow_price * 1">
{{commonData.currency_prefix}}<span class="price">{{(item.info.base_on_demand_flow_price * 1).toFixed(4)}}</span>&nbsp;<span class="default-color">/GB</span>
</template>
</template>
<template v-else>
{{commonData.currency_prefix}}{{Number(item.price * 1 / item.qty).toFixed(2)}}
<span v-if="item.info.billing_cycle">/ {{ item.info.customfield?.multi_language?.billing_cycle || item.info.billing_cycle}}</span>
</template>
</td>
<td>
<el-input-number v-model="item.qty" size="small"
@change="(currentValue,oldValue)=>handleChange(currentValue,oldValue,item)" :min="1"
:max="item.stock_control === 1 ? item.stock_qty : 99999"></el-input-number>
<p v-if="item.stock_control === 1" :class="item.stock_qty === 0 ? 'red-text':''"
class="qty-num">{{lang.shoppingCar_goods_tock_qty}}{{ item.stock_qty }}</p>
<p v-if="item.isShowTips" class="qty-tips">{{lang.shoppingCar_tock_qty_tip}}</p>
</td>
<td class="item-total" v-loading="item.priceLoading">
<span>{{commonData.currency_prefix}} {{item.calcItemPrice | filterMoney}}</span>
<el-popover placement="top-start" width="200" trigger="hover"
v-if="item.calcItemPrice != item.price">
<div class="show-config-list">
<p v-if="item.level_discount">
{{lang.shoppingCar_tip_text2}}{{commonData.currency_prefix}} {{
item.level_discount | filterMoney }}
</p>
<p v-if="item.code_discount">
{{lang.shoppingCar_tip_text4}}{{commonData.currency_prefix}} {{ item.code_discount
| filterMoney }}
</p>
<p v-if="item.eventDiscount">{{lang.goods_text4}}{{commonData.currency_prefix}} {{
item.eventDiscount | filterMoney }}</p>
</div>
<i class="el-icon-warning-outline total-icon" slot="reference"></i>
</el-popover>
<p class="original-price" v-if="item.calcItemPrice != item.price">
{{commonData.currency_prefix}} {{item.price | filterMoney}}
</p>
<div class="discount-box">
<discount-code v-if="item.customfield && !item.customfield.promo_code && isShowPromo"
@get-discount="getDiscount(arguments)" scene='new' :product_id='item.product_id'
:qty="item.qty" :amount="item.price" :billing_cycle_time="item.info.duration"
:shopping_index="item.position">
</discount-code>
<div v-if="item.customfield && item.customfield.promo_code" class="discount-codeNumber">
{{ item.customfield.promo_code }}
<i class="el-icon-circle-close remove-discountCode"
@click="removeDiscountCode(item)"></i>
</div>
<event-code v-if="item.info && item.info.duration !=='' && isShowFull"
:id="item.customfield.event_promotion" :product_id='item.product_id' :qty="item.qty"
:amount="item.price" :billing_cycle_time="item.info.duration"
@change="(price) => changeEventCode(price,item)">
</event-code>
</div>
</td>
<td class="delete-btn">
<i class="el-icon-delete" @click="handelDeleteGoods(item)"></i>
</td>
</tr>
<tr v-else>
<td></td>
<td class="no-goods-td">
<span class="no-goods-tips">{{lang.shoppingCar_no_goods_tip}}</span>
<el-button class="buy-again-btn"
@click="goGoods(item)">{{lang.shoppingCar_buy_again}}</el-button>
</td>
<td></td>
<td></td>
<td class="delete-btn">
<i class="el-icon-delete" @click="handelDeleteGoods(item)"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</el-checkbox-group>
</div>
<div v-else>
<el-empty :description="lang.shoppingCar_no_goods_text"></el-empty>
</div>
</div>
</div>
</el-main>
<el-footer>
<div class="footer-box">
<div class="footer-left">
<el-checkbox class="all-check" v-model="checkAll"
@change="handleCheckAllChange">{{lang.shoppingCar_select_all}}</el-checkbox>
<span class="delect-btn">
<el-link type="danger" class="delect-goods"
@click="deleteCheckGoods">{{lang.shoppingCar_delete_select}}</el-link>
</span>
<span>{{lang.shoppingCar_selected}}<span
class="text-red">{{checkedCities.length}}</span>{{lang.shoppingCar_goods_text}}</span>
</div>
<div class="footer-right">
<p>{{lang.shoppingCar_tip_text3}}<span
class="total-price">{{commonData.currency_prefix}}{{totalPrice | filterMoney}}</span></p>
<el-button type="primary" class="buy-btn" @click="goSettle"
:loading="settleLoading">{{lang.shoppingCar_buy_text}}</el-button>
</div>
</div>
</el-footer>
</el-container>
</el-container>
</div>
<!-- =======页面独有======= -->
<script src="/{$template_catalog_cart}/template/{$themes_cart}/api/shopping.js"></script>
<script src="/{$template_catalog}/template/{$themes}/components/discountCode/discountCode.js"></script>
<script src="/{$template_catalog}/template/{$themes}/components/eventCode/eventCode.js"></script>
<script src="/{$template_catalog_cart}/template/{$themes_cart}/js/shoppingCar.js"></script>

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB