<div class="goodsDetail">
<div class="indexWrap centerWrap">
<div class="top_bar">
<!-- 顶部条开始 -->
<div class="top">
<div class="left">
<div class="pageleft">
<!-- #if($!user)
<a href="http://newtest.sdfa.org.cn/" style="float: left">返回山东省足球运动协会</a>
<span class="pxlr">$!CommUtil.substring("$!{user.userName}",12)</span>
<a style="cursor:pointer;" onclick="logout();" class="lightblue">[退出]</a>
#else -->
<span class="pxlr">
欢迎 <a href="http://newtest.sdfa.org.cn/">王叶波</a>
</span>
<span class="line"></span>
<span class="pxlr">
<a href="$!webPath/user/login.htm" class="lightblue">登录</a>
</span>
<span class="pxlr">
<a href="$!webPath/register.htm" class="lightblue">注册</a>
</span>
<!-- #end -->
</div>
</div>
<div class="right">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- <div class="collapse navbar-collapse" id="navbarNavDropdown"> -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
首页
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="my_order" role="button"
data-toggle="dropdown" aria-haspopup="true">我的订单</a>
<div class="dropdown-menu" aria-labelledby="my_order">
<a class="dropdown-item" href="#">已购买的宝贝</a>
<a class="dropdown-item" href="#">店铺动态</a>
<a class="dropdown-item" href="#">好友动态</a>
<a class="dropdown-item" href="#">待支付</a>
<a class="dropdown-item" href="#">待收货</a>
<a class="dropdown-item" href="#">待评价</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="business_support" role="button"
data-toggle="dropdown" aria-haspopup="true">商家支持</a>
<div class="dropdown-menu" aria-labelledby="business_support">
<a class="dropdown-item" href="#">商家中心</a>
<a class="dropdown-item" href="#">商家订单</a>
<a class="dropdown-item" href="#">商家商品</a>
<a class="dropdown-item" href="#">我的店铺</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="business_support" role="button"
data-toggle="dropdown" aria-haspopup="true">购物车</a>
<div class="dropdown-menu" aria-labelledby="business_support">
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
站内短信(<span>1</span>)
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">联系我们:400-000-2989 </a>
</li>
</ul>
<!-- </div> -->
</nav>
</div>
<script>
// top部分,鼠标移入移除事件(展示二级菜单)
$(document).ready(function () {
$('li.dropdown').stop().mouseover(function () {
$(this).addClass('open');
// $(this).find('a').attr('aria-expanded', true)
$(this).find('.dropdown-menu').addClass('show')
}).stop().mouseout(function () {
$(this).removeClass('open');
// $(this).find('a').attr('aria-expanded', true)
$(this).find('.dropdown-menu').removeClass('show')
});
});
</script>
</div>
<!-- 顶部条结束 -->
</div>
<!-- logo区域 -->
<div class="center_logo_box" style="margin-bottom: 0;">
<div class="center_main_wrap">
<div class="center_left_logo">
<img src="" class="logo" alt="">
<div>/ 谁知盘中餐 粒粒皆辛苦</div>
</div>
<div class="center_right_cover"></div>
</div>
</div>
<!-- logo区域结束 -->
</div>
<div class="navigatorBar">
<div class="bar_main">
<div>首页</div>
<div class="active">商品详情</div>
</div>
</div>
<div class="content_wrap">
<div class="content_main">
<div class="top">
<!-- 放大镜 -->
<div class="colOne">
<div id="box">
<img src="../resources/style/system/front/default/images/sg.png" class="middle" alt="">
<div id="filter"></div>
</div>
<div class="bigImg" id="max">
<img src="../resources/style/system/front/default/images/sg.png" id="maxImg" alt="">
</div>
<div class="thumb">
<!-- <div class="prev"><img src="../resources/style/system/front/default/images/prev.png" alt=""></div> -->
<div><img src="../resources/style/system/front/default/images/1.png" class="small"
data-url="../resources/style/system/front/default/images/1.png" alt=""></div>
<div><img src="../resources/style/system/front/default/images/2.png" class="small"
data-url="../resources/style/system/front/default/images/2.png" alt=""></div>
<div><img src="../resources/style/system/front/default/images/loginbg.png" class="small"
data-url="../resources/style/system/front/default/images/loginbg.png" alt=""></div>
<div><img src="../resources/style/system/front/default/images/vegetables.png" class="small"
data-url="../resources/style/system/front/default/images/vegetables.png" alt="">
</div>
<div><img src="../resources/style/system/front/default/images/fruits.png" class="small"
data-url="../resources/style/system/front/default/images/fruits.png" alt=""></div>
<!-- <div class="next"><img src="../resources/style/system/front/default/images/next.png" alt=""></div> -->
</div>
</div>
<!-- 规格选择 -->
<div class="colTwo">
<div class="title">新鲜荔枝 玉荷包荔枝 原筐装 净重5.5斤 生鲜 新鲜水果</div>
<div class="specification">
<div class="info_item origin_price">
<label>商品原价</label>
<div class="content" style="text-decoration: line-through;">¥10.01</div>
</div>
<div class="info_item item_price">
<label>店铺价格</label>
<div class="content">¥10.01</div>
</div>
<div class="info_item">
<label>商品重量</label>
<div class="content">1.1kg</div>
</div>
<div class="info_item">
<label>物流运费</label>
<div class="content">¥10.01</div>
</div>
<div class="info_item">
<label>销售情况</label>
<div class="content">售出1件(0条评论)</div>
</div>
<div class="info_item">
<label>关注次数</label>
<div class="content">23次</div>
</div>
<div class="info_item">
<label>种类</label>
<div class="content">
<div class="type" data-type='0'>500g</div>
<div class="type" data-type='1'>1kg</div>
<div class="type" data-type='2'>1.5kg</div>
</div>
</div>
</div>
<div class="js-mode">
<div class="counter">
<input type="text" value="1" id="goods_count">
<div>
<div class="counter_add"><img style="width: 13px;height:13px;"
src="../resources/style/system/front/default/images/count_add.png" alt="">
</div>
<div class="counter_reduce"><img style="width: 13px;height: 13px;"
src="../resources/style/system/front/default/images/reduce.png" alt="">
</div>
</div>
</div>
<div class="addToShop" id="open">加入购物车</div>
<div class="bugImediate">立即购买</div>
</div>
</div>
<!-- 看了又看 -->
<div class="colThree">
<div class="title">看了又看</div>
<div class="goods_list">
<div class="goods_item">
<div class="imgWrap">
<img src="../resources/style/system/front/default/images/sg.png" alt="">
</div>
<div class="ps">海南 妃子笑荔枝2斤装</div>
<div class="price">¥99.00</div>
</div>
<div class="goods_item">
<div class="imgWrap">
<img src="../resources/style/system/front/default/images/sg.png" alt="">
</div>
<div class="ps">海南 妃子笑荔枝2斤装</div>
<div class="price">¥99.00</div>
</div>
</div>
</div>
</div>
<div class="shop_info">
<div class="left">
<div class="modeItem">
<div class="title">
玫瑰与鹿旗舰店
</div>
<div class="content">
<div class="inShop">
<div class="imgWrap"><img
src="../resources/style/system/front/default/images/jdgg.png" alt=""></div>
进店逛逛
</div>
<div class="conncetSalor">
<div class="imgWrap"><img
src="../resources/style/system/front/default/images/lxmj.png" alt=""></div>
联系卖家
</div>
</div>
</div>
<div class="modeItem">
<div class="title">
店内搜索
</div>
<div style="padding: 10px 10px;">
<div class="form-group"
style="display: flex;align-items: center;margin: 0 auto;margin-bottom: 10px;">
<span
style="width: 50px;font-size: 12px;color: #4D4D4D;display: inline-block;">关键字:</span>
<input style="flex-shrink: 0;width: calc(100% - 70px);" type="text"
class="form-control">
</div>
<div class="form-group" style="display: flex;margin:0;align-items: center;">
<span style="width: 50px;"></span>
<div class="search-btn">搜索</div>
</div>
</div>
</div>
<div class="modeItem">
<div class="title">
店内分类
</div>
<div class="body">
<div class="item">
<span>所有商品</span>
<div class="imgWrap">
<img src="../resources/style/system/front/default/images/xy.png" alt="">
</div>
</div>
<div class="item">
<span>水果专区</span>
<div class="imgWrap">
<img src="../resources/style/system/front/default/images/xy.png" alt="">
</div>
</div>
<div class="item">
<span>蔬菜专区</span>
<div class="imgWrap">
<img src="../resources/style/system/front/default/images/xy.png" alt="">
</div>
</div>
<div class="item">
<span>蛋类专区</span>
<div class="imgWrap">
<img src="../resources/style/system/front/default/images/xy.png" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="right">
<ul class="nav nav-tabs" style="border: 1px solid rgba(238,238,238,1);">
<li style="border-right: 1px solid rgba(238,238,238,1);"><a href="#goods_detail" class="active" data-toggle="tab">商品详情</a></li>
<li style="border-right: 1px solid rgba(238,238,238,1);"><a href="#evaluate_detail" class="" data-toggle="tab">评价详情</a></li>
</ul>
<div class="tab-content">
<div id="goods_detail" class="tab-pane active">
<!-- 如果有数据,展示这个 -->
<div class="imgList">
<div class="imgItem">
<a href="goodsDetail.html"><img
src="../resources/style/system/front/default/images/sg.png" alt=""></a>
</div>
<div class="imgItem">
<a href="goodsDetail.html"><img
src="../resources/style/system/front/default/images/sg.png" alt=""></a>
</div>
</div>
<!-- 如果没有数据,展示这个 -->
<!-- <div class="noData">
<div class="imgWrap">
<img src="../resources/style/system/front/default/images/zanwushangpin.png" alt="">
</div>
<div>暂无商品详情</div>
</div> -->
</div>
<div id="evaluate_detail" class="tab-pane">
<div class="evaluateLevel">
<div class="desc">
<div>与描述相符</div>
<div class="point">0.0</div>
</div>
<div class="line"></div>
<div class="levelComponent">
<div class="eva_bar_right">
<div class="eva_scroller"> <span style="width:0.0%;"> <em>0.0</em> </span>
</div>
<ul class="scroller_ul">
<li>非常不满意</li>
<li>不满意</li>
<li>一般</li>
<li>满意</li>
<li>非常满意</li>
</ul>
</div>
</div>
</div>
<div class="evaluate_info">
<div class="tabs">
<div class="active">全部评价(2)</div>
<div>好评(2)</div>
<div>中评(0)</div>
<div>差评(0)</div>
</div>
<div class="evaluateList">
<div class="ecaluateItem">
<div class="left_tx">
<div class="imgWrap">
<!-- 头像 -->
<img src="./resources/style/system/front/default/images/touxiang.png"
alt="">
</div>
<span>热心网友</span>
</div>
<div class="right_pj">
<div class="star">
<!-- xx.png是激活状态 -->
<!-- xx1.png是默认状态 -->
<img src="./resources/style/system/front/default/images/xx.png"
alt="">
<img src="./resources/style/system/front/default/images/xx.png"
alt="">
<img src="./resources/style/system/front/default/images/xx.png"
alt="">
<img src="./resources/style/system/front/default/images/xx.png"
alt="">
<img src="./resources/style/system/front/default/images/xx1.png"
alt="">
</div>
<div class="content">看起来很多的样子 喜欢的没商量 想吃荔枝了 果断下订单看起来很多的样子 喜欢的没商量 想吃荔枝了
果断下订单看起来很多的样子 喜欢的没商量 想吃荔枝了 果断下订单</div>
<div class="imgList">
<img src="./resources/style/system/front/default/images/touxiang.png"
alt="">
<img src="./resources/style/system/front/default/images/touxiang.png"
alt="">
<img src="./resources/style/system/front/default/images/touxiang.png"
alt="">
</div>
</div>
</div>
<div class="ecaluateItem">
<div class="left_tx">
<div class="imgWrap">
<!-- 头像 -->
<img src="./resources/style/system/front/default/images/touxiang.png"
alt="">
</div>
<span>热心网友</span>
</div>
<div class="right_pj">
<div class="star">
<!-- xx.png是激活状态 -->
<!-- xx1.png是默认状态 -->
<img src="./resources/style/system/front/default/images/xx.png"
alt="">
<img src="./resources/style/system/front/default/images/xx.png"
alt="">
<img src="./resources/style/system/front/default/images/xx.png"
alt="">
<img src="./resources/style/system/front/default/images/xx.png"
alt="">
<img src="./resources/style/system/front/default/images/xx1.png"
alt="">
</div>
<div class="content">看起来很多的样子 喜欢的没商量 想吃荔枝了 果断下订单看起来很多的样子 喜欢的没商量 想吃荔枝了
果断下订单看起来很多的样子 喜欢的没商量 想吃荔枝了 果断下订单</div>
<div class="imgList">
<img src="./resources/style/system/front/default/images/touxiang.png"
alt="">
<img src="./resources/style/system/front/default/images/touxiang.png"
alt="">
<img src="./resources/style/system/front/default/images/touxiang.png"
alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hotSale">
<div class="tit">
<div class="title">
<span class="line"></span>
商家热卖
</div>
<div style="font-size: 18px;color: #F5B937;">更多></div>
</div>
<div class="pro_list">
<div class="pro_list_item">
<div class="img">
<img src="../resources/style/system/front/default/images/1.png" alt="">
</div>
<div>这也不是不知道叫什么的水果这也不是不知道叫什么的水果</div>
<div style="font-size: 14px;color: #E1251B;">¥<span style="font-size: 17px;">31</span>.00</div>
</div>
<div class="pro_list_item">
<div class="img">
<img src="../resources/style/system/front/default/images/rexiao.png" alt="">
</div>
<div>这也不是不知道叫什么的水果</div>
<div style="font-size: 14px;color: #E1251B;">¥<span style="font-size: 17px;">31</span>.00</div>
</div>
<div class="pro_list_item">
<div class="img">
<img src="../resources/style/system/front/default/images/fruits.png" alt="">
</div>
<div>这也不是不知道叫什么的水果</div>
<div style="font-size: 14px;color: #E1251B;">¥<span style="font-size: 17px;">31</span>.00</div>
</div>
<div class="pro_list_item">
<div class="img">
<img src="../resources/style/system/front/default/images/bj.png" alt="">
</div>
<div>这也不是不知道叫什么的水果</div>
<div style="font-size: 14px;color: #E1251B;">¥<span style="font-size: 17px;">31</span>.00</div>
</div>
</div>
</div>
</div>
<!-- 弹窗 -->
<div id="dialog-layer-wrap" class="dialog-layer" style="display:none;">
<div class="dialog-cover"></div>
<div class="dialog-cont-wrap">
<div class="dialog-cont-inner">
<div id="dialog-close-btn" class="close-btn">
<img src="../resources/style/system/front/default/images/close.png" alt="" id="closeImg">
</div>
<div class="m-dialog_body">
<div class="m-imgWrap">
<img src="../resources/style/system/front/default/images/success.png" alt="">
</div>
<div class="m-msg">
<p>已成功添加到购物车!</p>
<p>购物车共有<span>2</span>件商品等待结算</p>
</div>
<div class="m-btns">去购物车结算</div>
<div class="m-closeCounter">
<span class="m-second" id="m-second">5</span>
<span>秒后关闭改页面</span>
</div>
</div>
</div>
</div>
</div>
js部分:
// 提示信息弹出框(比如修改成功,保存成功等操作提示)
var timer = null;
window.onload = function () {
var bd = document.getElementsByTagName('body')[0] || document;
bd.onclick = function (event) {
event && event.preventDefault && event.preventDefault()
event = event || window.event;
var ele = event.target || event.srcElement;
var dis;
if (ele.id == "open") {
jQuery("#dialog-layer-wrap").animate({
opacity: "toggle",
height: "toggle"
}, 'slow')
// dis = 'block';
document.getElementById("m-second").innerHTML = 5//初始化时间
timer = window.setInterval("countDown()", 1000);//开始计时
document.documentElement.style.overflow = 'hidden';//禁止屏幕滚动
} else if (ele.id == "closeImg") {
jQuery("#dialog-layer-wrap").animate({
opacity: "toggle",
height: "toggle"
}, 'slow')
// dis = 'none';
clearInterval(timer)//关闭计时器
document.getElementById("m-second").innerHTML = 5//初始化时间
document.documentElement.style.overflow = 'auto';
}
// document.getElementById('dialog-layer-wrap').style.display = dis;
};
};
jQuery('.evaluate_info .tabs div').click(function(e){
// 输出点击的是什么类型的评价
// console.log(e.currentTarget.dataset.value)
jQuery(this).addClass('active').siblings().removeClass('active')
// 进行数据渲染
})
// 设置与描述相符的百分比
function setPercent(){
jQuery('.eva_scroller span').width('20%');
}
//倒计时
function countDown() {
var time = document.getElementById("m-second");
//获取到id为time标签中的内容,现进行判断
if (time.innerHTML == 0) {
jQuery("#dialog-layer-wrap").animate({
opacity: "toggle",
height: "toggle"
}, 'slow')
//等于0时清除计时
clearInterval(timer)
document.getElementById('dialog-layer-wrap').style.display = 'none'
} else {
time.innerHTML = time.innerHTML - 1;
}
}
var goodsType;//商品规格
jQuery('.type').click(function (e) {
jQuery(this).addClass('active').siblings().removeClass('active');
goodsType = e.currentTarget.dataset.type
})
jQuery('.bugImediate').click(function () {
if (!goodsType) {
jQuery.alert('请选择商品规格!', '提示');
return
}
var goods_num = jQuery('#goods_count').val()
alert('商品规格:' + goodsType);
alert('商品数量:' + goods_num)
})
var aSmall = document.querySelectorAll(".small");
// colOne
var oColOne = document.querySelector(".colOne");
var omiddle = document.querySelector(".middle");
var oBox = document.getElementById("box");
var oFilter = document.getElementById("filter");
var maxImg = document.getElementById("maxImg");
var max = document.getElementById('max')
// 鼠标移入小图片,在中图片中显示选择的图片
for (var i = 0; i < aSmall.length; i++) {
aSmall[i].onmouseover = function () {
var src = this.getAttribute("data-url");
omiddle.src = src;
maxImg.src = src;
}
}
/放大镜//
maxImg.style.display = "none";
oBox.onmouseover = function () {
maxImg.style.display = "block";
oFilter.style.display = "block";
max.style.display = 'block'
this.onmousemove = function (e) {
console.log(oColOne.offsetLeft)
var e = e || event;
var l = e.pageX - oColOne.offsetLeft - oFilter.offsetWidth / 2;
var t = e.pageY - oColOne.offsetTop - oFilter.offsetHeight / 2;
l = l >= oBox.offsetWidth - oFilter.offsetWidth ? l = oBox.offsetWidth - oFilter.offsetWidth : (l <= 0 ? l = 0 : l = l);
t = t >= oBox.offsetHeight - oFilter.offsetHeight ? t = oBox.offsetHeight - oFilter.offsetHeight : (t <= 0 ? t = 0 : t = t);
oFilter.style.left = l + 'px';
oFilter.style.top = t + 'px';
maxImg.style.left = -2 * l + 'px';
maxImg.style.top = -2 * t + 'px';
}
};
oBox.onmouseout = function () {
oFilter.style.display = "none";
maxImg.style.display = "none";
max.style.display = 'none'
}
// 点击增加数量
jQuery('.counter_add').click(function () {
vertifyNum()
if(vertifyNum()){
var num = jQuery('#goods_count').val()
num++
jQuery('#goods_count').val(num)
} else {
jQuery.alert({
title:'提示',
content:"请输入有效数字!",
buttons:{
ok:{
text:"确定",
action:function(){
jQuery('#goods_count').val(1)
}
}
}
})
}
})
// 数量减少
jQuery('.counter_reduce').click(function () {
if(vertifyNum()){
var num = jQuery('#goods_count').val()
// 拿到当前值时先判断极值
if (num <= 1) {
jQuery.alert('商品数量不能小于1!', '提示')
return
}
num--
jQuery('#goods_count').val(num)
} else {
jQuery.alert({
title:'提示',
content:"请输入有效数字!",
buttons:{
ok:{
text:"确定",
action:function(){
jQuery('#goods_count').val(1)
}
}
}
})
}
})
// 进行数字验证:
function vertifyNum(){
var num = jQuery('#goods_count').val();
var re = /^[1-9]+[0-9]*]*$/ ; //判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/
if(!re.test(num)){
return false;
} else {
return true
}
}
其他静态资源:
<link rel="stylesheet" href="./resources/style/system/front/default/css/reset.css">
<link rel="stylesheet" href="./resources/style/system/front/default/css/common.css">
<link rel="stylesheet" href="./resources/style/system/front/default/css/goodsDetail.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.3/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>