Files
BlackFruit-UI/clientarea/cart/hgcart/goodsList.php
yiqiu 0e3b695994
All checks were successful
continuous-integration/drone/push Build is passing
feat: 全宽沉浸式购物车
- 去掉侧边栏,全宽沉浸式布局
- 首屏:大卡片分类入口页(渐变图标+hover上浮+逐卡淡入动画)
- 点击后:一级胶囊Tab+返回按钮+二级边框Tab+3列产品卡片
- 产品卡片stagger滑入动画(animation-delay逐卡递增)
- 顶部渐变背景(蓝白渐变)
- JS逻辑完全不变
- 域名搜索功能完整保留
2026-03-23 11:05:55 +08:00

463 lines
32 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!-- 页面独有样式 -->
<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>
<el-container>
<top-menu></top-menu>
<el-main class="immersive-main">
<div class="goods-page" :class="{'show-products': select_first_obj.id}">
<!-- ========== 状态一:分类入口页 ========== -->
<div class="category-landing" v-show="!select_first_obj.id">
<!-- 顶部说明 -->
<div v-if="commonData.cart_instruction == 1 && commonData.cart_instruction_content" class="cart-des"
v-html="commonData.cart_instruction_content">
</div>
<div class="landing-hero">
<h1 class="landing-title">{{commonData.website_name || '产品中心'}}</h1>
<p class="landing-subtitle">为您提供全球优质的云计算服务</p>
</div>
<div class="category-grid">
<div class="category-card"
v-for="(item, index) in first_group_list" :key="item.id"
:style="{'animation-delay': (index * 0.08) + 's'}"
@click="select_first_obj.id = item.id; selectFirstType(item.id)">
<div class="category-icon" :class="'category-icon-' + (index % 5)">
<svg v-if="index % 5 === 0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="36" height="36"><path d="M2 15a7 7 0 0 1 7-7h0a5 5 0 0 1 10 0h0a6 6 0 0 1 3 11H4a5 5 0 0 1-2-4z"/></svg>
<svg v-else-if="index % 5 === 1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="36" height="36"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
<svg v-else-if="index % 5 === 2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="36" height="36"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
<svg v-else-if="index % 5 === 3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="36" height="36"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
<svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="36" height="36"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
</div>
<h2 class="category-name">{{item.name}}</h2>
<div class="category-arrow">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</div>
</div>
</div>
</div>
<!-- ========== 状态二:产品浏览区 ========== -->
<div class="products-view" v-show="select_first_obj.id">
<!-- 一级 Tab 导航 -->
<div class="primary-bar">
<div class="primary-bar-inner">
<div class="primary-back" @click="select_first_obj.id = ''; goodsList = []; second_group_list = [];">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><path d="M15 18l-6-6 6-6"/></svg>
</div>
<div class="primary-tabs">
<div class="primary-tab"
:class="{'primary-tab-active': select_first_obj.id === item.id}"
v-for="item in first_group_list" :key="item.id"
@click="selectFirstType(item.id)">
{{item.name}}
</div>
</div>
</div>
</div>
<!-- 二级 Tab + 搜索 -->
<div class="secondary-bar">
<div class="secondary-bar-inner">
<div class="secondary-tabs" v-loading="secondLoading">
<div class="secondary-tab"
:class="{'secondary-tab-active': select_second_obj.id === item.id}"
v-for="item in second_group_list" :key="item.id"
@click="selectSecondType(item.id)">
{{item.name}}
</div>
</div>
<div class="secondary-right" v-if="!isDomain">
<el-input :placeholder="lang.goods_search_placeholder" clearable
v-model="searchValue" class="search-input" size="small"
@keyup.enter.native="searchGoods">
<el-button slot="append" icon="el-icon-search" @click="searchGoods"
:loading="searchLoading"></el-button>
</el-input>
</div>
</div>
</div>
<!-- 二级描述 -->
<div class="second-desc" v-if="select_second_obj.description">
<scroll-text mode="loop">
{{select_second_obj.description}}
</scroll-text>
</div>
<!-- 商品列表 -->
<div class="goods-container" v-loading="goodSLoading">
<template v-if="!isDomain">
<div class="empty-state" v-if="goodsList.length === 0 && !goodSLoading">
<el-empty :description="lang.no_goods"></el-empty>
</div>
<div v-else class="goods-grid">
<div class="product-card"
:class="{'product-card-disabled': item.stock_control === 1 && item.qty <= 0}"
:style="{'animation-delay': (index * 0.06) + 's'}"
v-for="(item,index) in goodsList" :key="index">
<div class="card-header">
<h3 class="card-title">{{ item.name }}</h3>
<div class="card-badges">
<span class="badge badge-stock-low"
v-if="item.stock_control === 1 && item.qty > 0 && item.qty <= 5">
{{lang.stock}}{{item.qty}}
</span>
<span class="badge badge-sold-out"
v-if="item.stock_control === 1 && item.qty <= 0">
{{lang.shoppingCar_tip_text13 || '已售罄'}}
</span>
<span class="badge badge-level"
v-if="item.client_level_name && item.client_level_name !== ''">
{{lang.shoppingCar_tip_text15}}
</span>
</div>
</div>
<div class="card-tags"
v-if="(item.pay_ontrial && item.pay_ontrial?.status === 1) || item.aodun_firewall_product || item.activeList.length > 0 || item.addon_coin === 1">
<span class="tag tag-trial"
v-if="item.pay_ontrial && item.pay_ontrial?.status === 1">
{{lang.support_trial}}
</span>
<span class="tag tag-firewall" v-if="item.aodun_firewall_product">
{{lang.firewall_text1}}
</span>
<span class="tag tag-coin" v-if="item.addon_coin === 1">
{{lang.coin_text10}}{{item.addon_coin_name}}
</span>
<template v-for="active in item.activeList">
<el-popover placement="top-start" trigger="hover">
<div class="active-item">
<span v-if="active.type === 'percent'">{{lang.goods_text1}} {{active.value}}%</span>
<span v-if="active.type === 'reduce'">{{lang.goods_text2}} {{active.full}} {{lang.goods_text3}} {{active.value}}</span>
</div>
<span class="tag tag-promo" slot="reference">{{active.name}}</span>
</el-popover>
</template>
</div>
<div class="card-desc" v-html="item.description"></div>
<div class="card-footer">
<div class="card-price">
<div class="price-current">
<span class="price-symbol">{{commonData.currency_prefix}}</span>
<span class="price-amount">{{item.price_discounted || item.price}}</span>
<span class="price-cycle">{{item.cycle ? '/' + item.cycle : ''}}</span>
</div>
<div class="price-original"
v-if="item.price_discounted && item.price != item.price_discounted">
{{commonData.currency_prefix}}{{item.price}}
</div>
</div>
<el-button class="card-buy-btn" type="primary"
:disabled="item.stock_control === 1 && item.qty <= 0"
@click="goOrder(item)">
{{lang.buy}}
</el-button>
</div>
</div>
</div>
</template>
<!-- ====== 域名搜索区域 ====== -->
<template v-else>
<div class="domain-box">
<div class="register-type">
<span class="reg-ridio" :class="regType === '1' ? 'isActice' : ''"
@click="regType = '1'">{{lang.template_text93}}</span>
<template v-if="domainConfig.batch_search_domain === 1">
<el-divider direction="vertical"></el-divider>
<span class="reg-ridio" :class="regType === '2' ? 'isActice' : ''"
@click="regType = '2'">{{lang.template_text94}}</span>
</template>
</div>
<div class="domain-search" v-if="regType === '1'">
<el-input :placeholder="lang.template_text92" v-model="domainInput" clearable
@keyup.enter.native="handelDomainSearch">
<div class="suffix-box" slot="append" @click="isShowSuffixBox = !isShowSuffixBox">
{{selectSuffix}}
<i class="el-icon-arrow-down select-btn"></i>
</div>
</el-input>
<el-button class="search-button" @click="handelDomainSearch"
:loading="isSearching">{{lang.template_text95}}</el-button>
<div class="suffix-list" v-show="isShowSuffixBox">
<div class="suffix-item" @click="handelSelectSuffix(item.suffix)"
:class="selectSuffix === item.suffix ? 'suffix-active' : ''" v-for="item in suffixList"
:key="item.suffix">{{item.suffix}}</div>
</div>
</div>
<div class="batch-search-box" v-if="regType === '2'">
<div class="batch-tips" v-loading="batchLoading">
<el-input v-model="textarea2" resize="none" class="input-batch" type="textarea"
:placeholder="`${lang.template_text106}\n${lang.template_text107}${domainConfig.number_limit}${lang.template_text108}${domainConfig.number_limit}${lang.template_text109}\n${lang.template_text110}\n${lang.template_text111}`">
</el-input>
</div>
<div class="batch-btn">
<div class="upload-btn" @click="isShowUpload = true">
<svg viewBox="0 0 1024 1024" width="16" height="16"><path d="M938.855808 638.776382l0 270.299169c0 27.41028-22.210861 49.634444-49.621141 49.634444l-754.442728 0c-27.41028 0-49.647747-22.224164-49.647747-49.634444L85.144192 638.776382c0-27.41028 22.224164-49.634444 49.634444-49.634444s49.634444 22.224164 49.634444 49.634444l0 220.664725 655.17384 0L839.58692 638.776382c0-27.41028 22.224164-49.634444 49.634444-49.634444S938.855808 611.366102 938.855808 638.776382zM349.445764 351.817788l112.918769-115.288746 0 429.77837c0 27.411303 22.224164 49.634444 49.634444 49.634444 27.41028 0 49.634444-22.223141 49.634444-49.634444L561.633421 236.534158 674.547073 351.812671c9.722432 9.927093 22.591531 14.904455 35.470863 14.904455 12.524245 0 25.071002-4.716418 34.725896-14.172791 19.583011-19.184945 19.913539-50.608631 0.733711-70.190619L547.478026 80.195483c-9.335622-9.535167-22.116717-14.905478-35.46063-14.905478-13.338796 0-26.120914 5.370311-35.456536 14.900362L278.542924 282.3486c-19.184945 19.588127-18.86465 51.010791 0.722454 70.190619C298.847365 371.724163 330.271052 371.394658 349.445764 351.817788z" fill="var(--color-primary)"/></svg>
{{lang.template_text132}}
</div>
<el-button @click="batchSearchDomain" type="primary"
:loading="batchLoading">{{lang.template_text112}}</el-button>
</div>
</div>
<div class="domain-content">
<div class="domain-left">
<div class="domain-one" v-if="regType === '1'">
<div class="domain-one-list" v-if="domainList.length !==0" v-loading="isSearching">
<div class="search-title">
<span>{{lang.template_text96}}</span>
<span class="search-fillter is_select" @click="openFilter"><i class="el-icon-search"></i>{{isShowFilrer ? lang.wx_tip15: lang.wx_tip14}}</span>
</div>
<div class="fillter-list" v-if="isShowFilrer && fillterDomainSuffix.length > 0">
<div class="fillter-item" :class="{'is_select':selectFilterSuffix.includes(item)}"
v-for="item in fillterDomainSuffix" :key="item" @click="handelFilterSuffix(item)">
{{item}}
</div>
</div>
<div class="domain-list">
<div class="domain-item" v-for="(item,index) in calcDomainList" :key="index">
<div class="item-left">
<span class="domain-name">{{item.name}}</span>
<span class="domain-status" v-if="item.avail === 0">{{lang.template_text97}}</span>
<span class="domain-status" v-if="(item.avail === 1 || item.avail === -2) && item.description">{{item.description}}</span>
</div>
<div class="item-right">
<div class="premium-type" v-if="item.type && item.type === 'premium'">{{lang.template_text98}}</div>
<el-popover placement="bottom" trigger="hover" v-if="item.avail === 1">
<div class="pirce-box" slot="reference" v-loading="item.priceLoading">
<span class="now-price">{{commonData.currency_prefix}}<span style="font-size: 0.18rem; color: var(--color-price-text);">{{item.showPrice}}</span><span style="color: #485169;">/{{lang.common_cloud_text112}}</span></span>
<i style="margin-left: 0.1rem;color: #F6F7FB;" class="el-icon-arrow-down"></i>
</div>
<div class="price-list">
<div class="price-item">
<div class="price-year"></div>
<div class="price-new">{{lang.template_text99}}</div>
<div class="price-renew">{{lang.template_text100}}</div>
</div>
<div class="price-item" v-for="items in item.priceArr" :key="items.buyyear">
<div class="price-year">{{items.buyyear}}{{lang.template_text101}}</div>
<div class="price-new">{{commonData.currency_prefix}}{{items.buyprice}}</div>
<div class="price-renew">{{commonData.currency_prefix}}{{items.renewprice}}</div>
</div>
</div>
</el-popover>
<el-button class="add-btn" type="primary" :plain="isAddCart(item)"
:disabled="isAddCart(item)" v-if="item.avail === 1"
@click="addCart(item)">{{lang.template_text102}}</el-button>
<div class="whois-box" v-if="item.avail === 0" @click="goWhois(item)">{{lang.template_text103}}</div>
<div v-if="item.avail === -1">{{lang.template_text104}}</div>
</div>
</div>
</div>
</div>
<template v-else>
<div class="search-title">{{lang.template_text93}}</div>
<div class="start-search" v-loading="isSearching">
<img src="/{$template_catalog}/template/{$themes}/img/goodsList/search_domain.png" alt="">
<p>{{lang.template_text105}}</p>
</div>
</template>
</div>
<div class="batch-box" v-else>
<div class="batch-main">
<template v-if="availList.length !== 0 || unavailList.length !==0 || faillList.length !== 0">
<div class="search-title">{{lang.template_text113}}({{availList.length}})</div>
<div class="avail-list" v-loading="batchLoading">
<el-checkbox-group v-model="batchCheckGroup" @change="handleBatchChange">
<div class="batch-item" v-for="(item,index) in availList" :key="index">
<div class="item-left">
<el-checkbox :label="item.name">
<span class="domain-name">{{item.name}}</span>
</el-checkbox>
<span class="domain-status" v-if="item.avail === 0">{{lang.template_text114}}</span>
<span class="domain-status" v-if="(item.avail === 1 || item.avail === -2) && item.description">{{item.description}}</span>
</div>
<div class="item-right">
<div class="premium-type" v-if="item.type && item.type === 'premium'">{{lang.template_text115}}</div>
<el-popover placement="bottom" trigger="hover" v-if="item.avail === 1">
<div class="pirce-box" slot="reference" v-loading="item.priceLoading">
<span class="now-price">{{commonData.currency_prefix}}<span style="font-size: 0.18rem; color: var(--color-price-text);">{{item.showPrice}}</span><span style="color: #485169;">/{{lang.common_cloud_text112}}</span></span>
<i style="margin-left: 0.1rem;color: #F6F7FB;" class="el-icon-arrow-down"></i>
</div>
<div class="price-list">
<div class="price-item">
<div class="price-year"></div>
<div class="price-new">{{lang.template_text99}}</div>
<div class="price-renew">{{lang.template_text100}}</div>
</div>
<div class="price-item" v-for="items in item.priceArr" :key="items.buyyear">
<div class="price-year">{{items.buyyear}}{{lang.template_text101}}</div>
<div class="price-new">{{commonData.currency_prefix}}{{items.buyprice}}</div>
<div class="price-renew">{{commonData.currency_prefix}}{{items.renewprice}}</div>
</div>
</div>
</el-popover>
<el-button class="add-btn" type="primary" :plain="isAddCart(item)"
:disabled="isAddCart(item)" v-if="item.avail === 1"
@click="addCart(item)">{{lang.template_text102}}</el-button>
</div>
</div>
</el-checkbox-group>
</div>
<div class="all-check" v-if="availList.length > 0">
<el-checkbox :indeterminate="isBatchIndeterminate" v-model="isBatchAllCheck"
@change="handleBatchCheckAllChange">{{lang.template_text116}}</el-checkbox>
<el-button @click="addAllCart" type="primary"
:loading="addAllLoading">{{lang.template_text117}}</el-button>
</div>
<el-collapse v-model="activeNames" v-loading="batchLoading">
<el-collapse-item name="1" style="margin-top: 0.6rem;" v-show="unavailList.length > 0">
<template slot="title">
<div class="unavail-title">
<span>{{lang.template_text118}}({{unavailList.length}})</span>
<span class="open-text" v-if="activeNames.includes('1')">{{lang.template_text119}}</span>
<span class="open-text" v-else>{{lang.template_text120}}</span>
</div>
</template>
<div class="unavail-list">
<div class="unavail-item" v-for="(item,index) in unavailList" :key="index">
<span class="unavail-name">{{item.name}}</span>
<span class="unavail-reason">{{item.reason}}</span>
</div>
</div>
</el-collapse-item>
<el-collapse-item name="2" style="margin-top: 0.4rem;" v-show="faillList.length > 0">
<template slot="title">
<div class="unavail-title">
<span>{{lang.template_text121}}({{faillList.length}})</span>
<span class="open-text" v-if="activeNames.includes('2')">{{lang.template_text119}}</span>
<span class="open-text" v-else>{{lang.template_text120}}</span>
</div>
</template>
<div class="unavail-list">
<div class="unavail-item" v-for="(item,index) in faillList" :key="index">
<span class="unavail-name">{{item.name}}</span>
<span class="unavail-reason">{{item.reason}}</span>
</div>
</div>
</el-collapse-item>
</el-collapse>
</template>
<template v-else>
<div class="search-title">{{lang.template_text94}}</div>
<div class="batch-search" v-loading="batchLoading">
<img src="/{$template_catalog}/template/{$themes}/img/goodsList/search_domain.png" alt="">
<p>{{lang.template_text122}}</p>
</div>
</template>
</div>
</div>
</div>
<div class="domain-right">
<div class="car-top">
<span>{{lang.template_text123}}</span>
<span class="clear-car" @click="deleteClearCart()">
<svg viewBox="0 0 1024 1024" width="16" height="16"><path d="M895.398771 267.822944 671.950695 267.822944 671.950695 100.238145c0-46.261745-37.501958-83.792903-83.790889-83.792903l-167.583792 0c-46.287924 0-83.79391 37.531157-83.79391 83.792903l0 167.584799-223.445056 0c-61.698102 0-111.723535 50.024426-111.723535 111.723535l0 55.860257c0 41.398553 22.522722 77.540227 55.981082 96.841965 0.190299 56.371748-0.120825 280.654522-0.120825 377.979786 3.818059 112.787799 111.723535 111.723535 111.723535 111.723535l307.238966 0 0-0.872958 20.968111 0c2.225187 0.568883 4.557103 0.872958 6.961514 0.872958s4.736326-0.304075 6.961514-0.872958l181.59341 0c2.225187 0.568883 4.557103 0.872958 6.961514 0.872958s4.735319-0.304075 6.960507-0.872958l132.69366 0c0 0 107.902455 1.066278 111.721521-111.532229 0-97.144027-0.310117-320.985791-0.119818-377.298133 33.45836-19.301738 55.983096-55.443412 55.983096-96.842972L1007.1213 379.546479C1007.122306 317.84737 957.096873 267.822944 895.398771 267.822944z" fill="currentColor"/></svg>
{{lang.template_text124}}
</span>
</div>
<div class="car-box" v-loading="isCarLoading">
<div class="car-no" v-if="carList.length === 0">
{{lang.template_text125}}
<span v-show="carList.length === 0">{{lang.template_text126}}</span>
<span v-if="!isLogin" class="blue-a-text" @click="goLogin">{{lang.template_text127}}</span>
</div>
<div class="car-list" v-else>
<el-checkbox-group v-model="checkList" @change="handleCheckedCitiesChange">
<div class="car-item" v-for="(item,index) in carList" :key="index">
<div class="caritem-top">
<div class="car-name">
<el-checkbox :label="item.positions">
<span class="shop-name">{{item.config_options.domain}}</span>
</el-checkbox>
<div class="car-del" @click="deleteCart(item)">{{lang.template_text128}}</div>
</div>
<div class="car-year">
<el-select v-model="item.selectYear" @change="(val)=>changeCart(val,item)">
<el-option v-for="items in item.priceArr" :key="items.buyyear"
:label="items.buyyear + lang.template_text101" :value="items.buyyear">
</el-option>
</el-select>
</div>
</div>
<div class="car-bottom">
<span>{{lang.template_text87}}</span>
<div v-loading="item.priceLoading" class="car-price">
{{commonData.currency_prefix}}<span style="font-size: 0.18rem; margin-right: 0.02rem;">{{priceCalc(item)}}</span>
</div>
</div>
</div>
</el-checkbox-group>
</div>
</div>
<div class="car-money">
<el-checkbox :indeterminate="isIndeterminate" v-model="isAllCheck"
@change="handleCheckAllChange">{{lang.template_text129}}</el-checkbox>
<div class="mon-right">
<p class="now-price">
{{lang.template_text87}}:
<span class="money-text">{{commonData.currency_prefix}}<span style="font-size: 0.24rem;">{{totalMoneyCalc.toFixed(2)}}</span></span>
</p>
<p class="original-price" v-if="showOriginal">
<span class="hide">{{lang.template_text87}}:{{commonData.currency_prefix}}</span>
{{originalPrice}}
</p>
</div>
</div>
<div class="car-settle">
<el-button type="primary" class="settle-btn" @click="goBuyDomain">{{lang.template_text130}}</el-button>
</div>
</div>
</div>
</div>
</template>
</div>
<p v-if="!isDomain && !scrollDisabled && goodsList.length !==0" class="tips">{{lang.goods_loading}}</p>
</div>
</div>
</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>