2 Star 0 Fork 2

tangze/operatorWeb

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
storemain.html 34.56 KB
一键复制 编辑 原始数据 按行查看 历史
tangze 提交于 2023-11-05 21:33 . 修改页面
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="js/jquery/jquery.min.js"></script>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="css/plugins.min.css">
<link rel="stylesheet" href="css/vendor.min.css">
<link rel="stylesheet" href="css/style.min.css">
<style>
html{
height: 100%;
overflow-y: hidden;
}
body{
height: 100%;
overflow-y: auto;
}
</style>
</head>
<body>
<div>
<!-- 轮播图 -->
<div style="background-color: white;margin:20px auto;min-height: 300px;">
<div class="layui-carousel" id="test1" style="margin: auto;">
<div carousel-item>
<div></div>
</div>
</div>
</div>
<!-- 按类别购物 -->
<div class="product-area section-space-top-70" style="margin-top: 50px;">
<div class="container">
<div class="section-title text-center pb-55">
<span class="sub-title text-primary">shop by category</span>
<h2 class="title mb-0" i18n="main.goodsType.class">按类别购物</h2>
</div>
<div class="row">
<div class="col-lg-12">
<div class="tab-content">
<div class="tab-pane fade show active" role="tabpanel" aria-labelledby="all-items-tab">
<div class="product-item-wrap row leibie">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 畅销区 -->
<div class="product-area section-space-top-75">
<div class="container">
<div class="section-title text-center pb-55">
<span class="sub-title text-primary">best sellers</span>
<h2 class="title mb-0" i18n="main.bestSellers">畅销区</h2>
</div>
<div class="row">
<div class="col-lg-12">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="all-items" role="tabpanel"
aria-labelledby="all-items-tab">
<div class="product-item-wrap row" id="aaa">
<div class="col-xl-3 col-lg-4 col-sm-6 pt-6 pt-sm-0">
<div class="product-item">
<div class="product-img img-zoom-effect">
<img class="img-full" src="img/shop/2.jpg">
</div>
<div class="product-content">
<div class="name-box" style="padding-bottom: 6px;" i18n="main.yygmhxz">易于购买或选择</div>
<div class="price-box pb-1">
<span class="new-price" i18n="index.sim">ETL SIM</span>
</div>
<div style="font-size: 14px;font-weight: 400;color: white;margin-top: 6px;">
<a href="ETL-SIM.html" style="color: white;">
<div style="border-radius: 5px;background-color: #033772;height: 50px;line-height: 50px;" i18n="index.sim">ETL SIM</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-sm-6 pt-6 pt-lg-0">
<div class="product-item">
<div class="product-img img-zoom-effect">
<img class="img-full" src="img/shop/3.png">
</div>
<div class="product-content">
<div class="name-box" style="padding-bottom: 6px;" i18n="main.wdkx">玩得开心</div>
<div class="price-box pb-1">
<span class="new-price" i18n="main.zccxb">注册程序包</span>
</div>
<div style="font-size: 14px;font-weight: 400;margin-top: 6px;">
<a href="popular-package.html" style="color: white;">
<div style="border-radius: 5px;background-color: #033772;height: 50px;line-height: 50px;" i18n="main.popularPackage">Popular Package</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-sm-6 pt-6 pt-xl-0">
<div class="product-item">
<div class="product-img img-zoom-effect">
<img class="img-full" src="img/shop/4.jpg">
</div>
<div class="product-content">
<div class="name-box" style="padding-bottom: 6px;" i18n="main.ljgd">了解更多</div>
<div class="price-box pb-1">
<span class="new-price" i18n="main.etlyycxfw">ETL应用程序服务</span>
</div>
<div style="font-size: 14px;font-weight: 400;margin-top: 6px;">
<a href="product-detail-ztapp.html" style="color: white;">
<div style="border-radius: 5px;background-color: #033772;height: 50px;line-height: 50px;" i18n="main.etlapp">ETL App</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-sm-6" id="oneGoods">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 新加入 -->
<div class="product-area" style="padding: 70px 0;">
<div class="container">
<div class="section-title text-center pb-55">
<span class="sub-title text-primary">New In</span>
<h2 class="title mb-0" i18n="main.newIn">新加入</h2>
</div>
<div class="row">
<div class="col-lg-12">
<div class="swiper-container product-slider swiper-arrow with-radius border-issue">
<div class="swiper-wrapper" id="bbb" style="width: 100%;"></div>
<div class="swiper-nav-wrap">
<div class="swiper-button-next"></div>
</div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 粉丝最爱 -->
<div class="product-area section-space-top-60">
<div class="container">
<div class="section-title text-center pb-55">
<span class="sub-title text-primary">Fan Favorites</span>
<h2 class="title mb-0" i18n="main.fan.favorites">粉丝最爱</h2>
</div>
<div class="row">
<div class="col-lg-12">
<div class="swiper-container product-slider swiper-arrow with-radius border-issue">
<div class="swiper-wrapper" id="ccc" style="width: 100%;"></div>
<div class="swiper-nav-wrap">
<div class="swiper-button-next"></div>
</div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 折扣区 -->
<div class="blog-area" style="padding: 70px 0;">
<div class="container">
<div class="section-title text-center pb-55">
<span class="sub-title text-primary">On Sale</span>
<h2 class="title mb-0" i18n="main.onSale">折扣区</h2>
</div>
<div class="row">
<div class="col-lg-12">
<div class="swiper-container product-slider swiper-arrow with-radius border-issue">
<div class="swiper-wrapper" id="ddd" style="width: 100%;"></div>
<div class="swiper-nav-wrap">
<div class="swiper-button-next"></div>
</div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer-area">
<div class="footer-bottom py-3" data-bg-color="#1EB9EE" style="background-color: rgb(30, 185, 238);">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="copyright">
<span class="copyright-text text-white">Copyright © 2023.LAO Asia Unicom All rights reserved.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="layui/layui.js"></script>
<script src="js/token.js"></script>
<script src="js/config.js"></script>
<script src="js/jquery.i18n.min.js"></script>
<script src="js/multi_lang_config.js"></script>
<script>
var layer = layui.layer;
var form = layui.form;
var carousel = layui.carousel;
var moduleName = "shop";
var defaultLang = layui.data('langTab').langType;
initLangConfig({
defaultLang:defaultLang,
filePath: "js/i18n/"+moduleName+"/",
module:moduleName,
base:"js/"
})
var i18np = null;
function changeLang(lang) {
defaultLang = lang;
reloadI18n({
defaultLang:lang,
filePath: "js/i18n/"+moduleName+"/",
module:moduleName,
})
i18np.loadProperties(moduleName);
goodsTypeInit();
oneGoodsInit();
salesInit();
$(".registerNow").html(i18np.prop("main.registerNow"));
}
layui.config({base: 'js/'})
// 继承treetable.js插件
.extend({i18np: 'i18n'}).use([ 'i18np','jquery'], function () {
i18np = layui.i18np;
i18np.loadProperties(moduleName);
// 获取轮播图
getBanner();
// 查询商品分类
getGoodsType();
// 查询一个商品
getOneGoods();
// 各类型商品信息(畅销区、新加入、粉丝最爱、折扣区域)
getTypeGoods();
});
// 获取轮播图
function getBanner(){
$.ajax({
url:HOST+"webapi/banners/getBanners",
data:{fenlei:2},
success:function (res) {
if(res.code==200 && res.data.length>0){
let s = ``;
for (let i = 0; i < res.data.length; i++) {
s += `<div><img
src="${res.data[i].images}"
alt="">
</div>`
}
$("#test1>div").html("")
$("#test1>div").html(s)
//建造实例
carousel.render({
elem: '#test1'
, width: '1400px' //设置容器宽度
, arrow: 'always' //始终显示箭头
// ,anim: 'updown' //切换动画方式
});
$("#test1").css("height", '350px')
}
}
})
}
var goodsTypeList = [];
function goodsTypeInit() {
let s='';
if (defaultLang == "en"){
for(let i=0;i<goodsTypeList.length;i++){
s+=`<div class="col-xl-3 col-lg-4 col-sm-6">
<div class="product-item">
<div class="product-img img-zoom-effect">
<a href="category.html?type=${goodsTypeList[i].id}">
<img class="img-full"
src="${goodsTypeList[i].picture}">
</a>
<div class="product-add-action">
<div class="inner-content">
<div class="button-wrap">
<a class="btn btn-primary btn-white-hover rounded-0"
href="category.html?type=${goodsTypeList[i].id}">${goodsTypeList[i].nameEn}</a>
</div>
</div>
</div>
</div>
</div>
</div>`;
$(".leibie").html("") // 请求成功后清除之前的内容
$(".leibie").html(s); // 再显示拼接后的内容
}
}else if (defaultLang == "zh"){
for(let i=0;i<goodsTypeList.length;i++){
s+=`<div class="col-xl-3 col-lg-4 col-sm-6">
<div class="product-item">
<div class="product-img img-zoom-effect">
<a href="category.html?type=${goodsTypeList[i].id}">
<img class="img-full"
src="${goodsTypeList[i].picture}">
</a>
<div class="product-add-action">
<div class="inner-content">
<div class="button-wrap">
<a class="btn btn-primary btn-white-hover rounded-0"
href="category.html?type=${goodsTypeList[i].id}">${goodsTypeList[i].nameZh}</a>
</div>
</div>
</div>
</div>
</div>
</div>`;
$(".leibie").html("") // 请求成功后清除之前的内容
$(".leibie").html(s); // 再显示拼接后的内容
}
}else{
for(let i=0;i<goodsTypeList.length;i++){
s+=`<div class="col-xl-3 col-lg-4 col-sm-6">
<div class="product-item">
<div class="product-img img-zoom-effect">
<a href="category.html?type=${goodsTypeList[i].id}">
<img class="img-full"
src="${goodsTypeList[i].picture}">
</a>
<div class="product-add-action">
<div class="inner-content">
<div class="button-wrap">
<a class="btn btn-primary btn-white-hover rounded-0"
href="category.html?type=${goodsTypeList[i].id}">${goodsTypeList[i].nameLao}</a>
</div>
</div>
</div>
</div>
</div>
</div>`;
$(".leibie").html("") // 请求成功后清除之前的内容
$(".leibie").html(s); // 再显示拼接后的内容
}
}
}
// 查询商品分类
function getGoodsType(){
$.ajax({
url: HOST + "webapi/goodsType/getGoodType",
success: function (res) {
if(res.code==200&res.data.length>0){
goodsTypeList = res.data;
goodsTypeInit();
}
}
});
}
let news = []; //新加入
let favorites = []; //粉丝收藏
let sales = []; //折扣区域
function salesInit() {
if (sales.length > 0) {
let d = '';
if (defaultLang == "en"){
for (let j=0;j<sales.length;j++){
d = d + "<div class=\"swiper-slide\" style=\"width: 23%;margin: 0 1%;\">\n" +
" <div class=\"product-item\">\n" +
" <div class=\"product-img img-zoom-effect\">\n" +
" <img class=\"img-full\" src=\""+sales[j].picture+"\">\n" +
" </div>\n" +
" <div class=\"product-content\">\n" +
sales[j].nameEn +
" <div class=\"price-box pb-1\" style='padding-top: 6px;'>\n" +
" <span class=\"new-price\">"+sales[j].price+"K</span>\n" +
" </div>\n" +
" <div style=\"font-size: 14px;font-weight: 400;color: white;margin-top: 6px;\" onclick=\"toGoodsDetail("+j+")\">\n" +
" <a href=\"#\" style=\"color: white;\">\n" +
" <div style=\"border-radius: 5px;background-color: #033772;height: 50px;line-height: 50px;\">"+i18np.prop("main.addCart")+"</div>\n" +
" </a>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" </div>";
}
}else if (defaultLang == "zh"){
for (let j=0;j<sales.length;j++){
d = d + "<div class=\"swiper-slide\" style=\"width: 23%;margin: 0 1%;\">\n" +
" <div class=\"product-item\">\n" +
" <div class=\"product-img img-zoom-effect\">\n" +
" <img class=\"img-full\" src=\""+sales[j].picture+"\">\n" +
" </div>\n" +
" <div class=\"product-content\">\n" +
sales[j].nameZh +
" <div class=\"price-box pb-1\" style='padding-top: 6px;'>\n" +
" <span class=\"new-price\">"+sales[j].price+"K</span>\n" +
" </div>\n" +
" <div style=\"font-size: 14px;font-weight: 400;color: white;margin-top: 6px;\" onclick=\"toGoodsDetail("+j+")\">\n" +
" <a href=\"#\" style=\"color: white;\">\n" +
" <div style=\"border-radius: 5px;background-color: #033772;height: 50px;line-height: 50px;\">"+i18np.prop("main.addCart")+"</div>\n" +
" </a>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" </div>";
}
}else{
for (let j=0;j<sales.length;j++){
d = d + "<div class=\"swiper-slide\" style=\"width: 23%;margin: 0 1%;\">\n" +
" <div class=\"product-item\">\n" +
" <div class=\"product-img img-zoom-effect\">\n" +
" <img class=\"img-full\" src=\""+sales[j].picture+"\">\n" +
" </div>\n" +
" <div class=\"product-content\">\n" +
sales[j].nameLao +
" <div class=\"price-box pb-1\" style='padding-top: 6px;'>\n" +
" <span class=\"new-price\">"+sales[j].price+"K</span>\n" +
" </div>\n" +
" <div style=\"font-size: 14px;font-weight: 400;color: white;margin-top: 6px;\" onclick=\"toGoodsDetail("+j+")\">\n" +
" <a href=\"#\" style=\"color: white;\">\n" +
" <div style=\"border-radius: 5px;background-color: #033772;height: 50px;line-height: 50px;\">"+i18np.prop("main.addCart")+"</div>\n" +
" </a>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" </div>";
}
}
$("#ddd").html(d);
}
}
// 各类型信息(畅销区、新加入、粉丝最爱、折扣区域)
function getTypeGoods() {
$.ajax({
url: HOST + "webapi/goods/getIndexGoods",
success: function (res) {
if(res.code==200){
for(let i=0;i<res.data.length;i++){
if (res.data[i].id == 2){//新品
news = res.data[i].data;
let b = '';
for (let j=0;j<res.data[i].data.length;j++){
b = b + "<div class=\"swiper-slide\" style=\"width: 23%;margin: 0 1%;\">\n" +
" <div class=\"product-item\">\n" +
" <div class=\"product-img img-zoom-effect\">\n" +
" <img class=\"img-full\" src=\""+res.data[i].data[j].picture+"\">\n" +
" </div>\n" +
" <div class=\"product-content\">\n" +
res.data[i].data[j].comboName +
" <div class=\"price-box pb-1\" style='padding-top: 6px;'>\n" +
" <span class=\"new-price\">"+res.data[i].data[j].price+"K</span>\n" +
" </div>\n" +
" <div style=\"font-size: 14px;font-weight: 400;color: white;margin-top: 6px;\" onclick=\"toPackageDetail("+j+",2"+")\">\n" +
" <a href=\"#\" style=\"color: white;\">\n" +
" <div class='registerNow' style=\"border-radius: 5px;background-color: #033772;height: 50px;line-height: 50px;\">"+i18np.prop("main.registerNow")+"</div>\n" +
" </a>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" </div>";
}
$("#bbb").html(b);
}
if (res.data[i].id == 3){//粉丝收藏
favorites = res.data[i].data;
let c = '';
for (let j=0;j<res.data[i].data.length;j++){
c = c + "<div class=\"swiper-slide\" style=\"width: 23%;margin: 0 1%;\">\n" +
" <div class=\"product-item\">\n" +
" <div class=\"product-img img-zoom-effect\">\n" +
" <img class=\"img-full\" style='height: 260px;' src=\""+res.data[i].data[j].picture+"\">\n" +
" </div>\n" +
" <div class=\"product-content\">\n" +
res.data[i].data[j].comboName +
" <div class=\"price-box pb-1\" style='padding-top: 6px;'>\n" +
" <span class=\"new-price\">"+res.data[i].data[j].price+"K</span>\n" +
" </div>\n" +
" <div style=\"font-size: 14px;font-weight: 400;color: white;margin-top: 6px;\" onclick=\"toPackageDetail("+j+",2"+")\">\n" +
" <a href=\"#\" style=\"color: white;\">\n" +
" <div class='registerNow' style=\"border-radius: 5px;background-color: #033772;height: 50px;line-height: 50px;\">"+i18np.prop("main.registerNow")+"</div>\n" +
" </a>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" </div>";
}
$("#ccc").html(c);
}
if (res.data[i].id == 4){//折扣区域
sales = res.data[i].data;
salesInit();
}
}
}
}
});
}
var oneGoods = {};
function oneGoodsInit(){
let s = "";
if (defaultLang == "en"){
s = " <div class=\"product-item\">\n" +
" <div class=\"product-img img-zoom-effect\">\n" +
" <img class=\"img-full\" src=\""+oneGoods.picture+"\">\n" +
" </div>\n" +
" <div class=\"product-content\">\n" +
" <div class=\"name-box\" style=\"padding-bottom: 6px;\">"+oneGoods.nameEn+"</div>\n" +
" <div class=\"price-box pb-1\">\n" +
" <span class=\"new-price\">"+oneGoods.brand+"</span>\n" +
" </div>\n" +
" <div style=\"font-size: 14px;font-weight: 400;color: white;margin-top: 6px;\">\n" +
" <a href=\""+"single-product.html?gid="+oneGoods.id+"\" style=\"color: white;\">\n" +
" <div style=\"border-radius: 5px;background-color: #033772;height: 50px;line-height: 50px;\">"+i18np.prop("main.addCart")+"</div>\n" +
" </a>\n" +
" </div>\n" +
" </div>\n" +
" </div>"
}else if (defaultLang == "zh"){
s = " <div class=\"product-item\">\n" +
" <div class=\"product-img img-zoom-effect\">\n" +
" <img class=\"img-full\" src=\""+oneGoods.picture+"\">\n" +
" </div>\n" +
" <div class=\"product-content\">\n" +
" <div class=\"name-box\" style=\"padding-bottom: 6px;\">"+oneGoods.nameZh+"</div>\n" +
" <div class=\"price-box pb-1\">\n" +
" <span class=\"new-price\">"+oneGoods.brand+"</span>\n" +
" </div>\n" +
" <div style=\"font-size: 14px;font-weight: 400;color: white;margin-top: 6px;\">\n" +
" <a href=\""+"single-product.html?gid="+oneGoods.id+"\" style=\"color: white;\">\n" +
" <div style=\"border-radius: 5px;background-color: #033772;height: 50px;line-height: 50px;\">"+i18np.prop('main.addCart')+"</div>\n" +
" </a>\n" +
" </div>\n" +
" </div>\n" +
" </div>"
}else{
s = " <div class=\"product-item\">\n" +
" <div class=\"product-img img-zoom-effect\">\n" +
" <img class=\"img-full\" src=\""+oneGoods.picture+"\">\n" +
" </div>\n" +
" <div class=\"product-content\">\n" +
" <div class=\"name-box\" style=\"padding-bottom: 6px;\">"+oneGoods.nameLao+"</div>\n" +
" <div class=\"price-box pb-1\">\n" +
" <span class=\"new-price\">"+oneGoods.brand+"</span>\n" +
" </div>\n" +
" <div style=\"font-size: 14px;font-weight: 400;color: white;margin-top: 6px;\">\n" +
" <a href=\""+"single-product.html?gid="+oneGoods.id+"\" style=\"color: white;\">\n" +
" <div style=\"border-radius: 5px;background-color: #033772;height: 50px;line-height: 50px;\">"+i18np.prop('main.addCart')+"</div>\n" +
" </a>\n" +
" </div>\n" +
" </div>\n" +
" </div>"
}
$("#oneGoods").html(s);
}
//查询一个商品
function getOneGoods(){
$.ajax({
url: HOST + "webapi/goods/getGoodsByPage?limit=1&page=1",
success: function (res) {
if (res.code == 200) {
oneGoods = res.data[0];
oneGoodsInit();
}
}
});
}
function toGoodsDetail(i) {
location.href = "single-product.html?gid=" + sales[i].id;
}
function toPackageDetail(j,i){
if (i==1){
window.open("popular-package-detail.html?id="+news[j].id);
// location.href = "packageDetail.html?id=" + news[j].id
}else if (i==2){
window.open("popular-package-detail.html?id="+favorites[j].id);
// location.href = "packageDetail.html?id=" + favorites[j].id
}
}
</script>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/woos/operator-web.git
[email protected]:woos/operator-web.git
woos
operator-web
operatorWeb
master

搜索帮助