peihaoyu/E-Buy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
裴浩宇 2020-02-21 19:00:13 +08:00
parent d54660f8cb
commit 3d660454a1
24 changed files with 939 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/main/java/com/phy/ebuy/controller/EbuyController.java
View File

@ -107,6 +107,12 @@ public class EbuyController {
return "/cart.html";
}
//商品页面
@RequestMapping("/commodity")
public String commodity() {
return "/commodity.html";
}
//验证登录
@ResponseBody
@RequestMapping("/verifyLogin")
@ -153,12 +159,28 @@ public class EbuyController {
//获取商品分类
@RequestMapping("/commodityType")
@ResponseBody
public List<Map<String,Object>> commodityType(String typeDowns) {
public Map<String,Object> commodityType(String typeDowns) {
String str = typeDowns.substring(typeDowns.indexOf("[")+2,typeDowns.indexOf("]")-1);
String[] typeDownsArr = str.split("\",\"");
List<Map<String,Object>> result = new ArrayList<>();
Map<String,Object> result = new HashMap<>();
result = ebuyService.typeDown(typeDownsArr);
return result;
}
//购物车
@RequestMapping("/getCartInfo")
@ResponseBody
public List<Map<String,Object>> getCartInfo(@RequestParam("userId")String userId) {
List<Map<String, Object>> result = ebuyService.getCartInfo(userId);
return result;
}
//查询商品
@RequestMapping("/commodityInfo")
@ResponseBody
public List<Map<String,Object>> commodityInfo(@RequestParam("keyword")String keyword) {
List<Map<String, Object>> result = ebuyService.commodityInfo(keyword);
return result;
}
}

11
src/main/java/com/phy/ebuy/dao/EbuyMapper.java
View File

@ -32,6 +32,15 @@ public interface EbuyMapper {
/**
* 获取商品分类
*/
String[] typeDown(String typeDown);
List<String> typeDown(String typeDown);
/**
* 获取购物车信息
*/
List<Map<String,Object>> getCartInfo(String userId);
/**
* 获取商品列表
*/
List<Map<String,Object>> commodityInfo(String keyword);
}

61
src/main/java/com/phy/ebuy/dao/mapping/EbuyMapper.xml
View File

@ -33,10 +33,13 @@
<!--获取所有订单-->
<select id="allOrderTable" resultType="map" parameterType="String">
SELECT
o.creat_time creat_time,
o.order_id order_id,
o.businesses_id businesses_id,
b.business_name businesses_name,
o.business_id business_id,
b.business_name business_name,
c.commodity_type commodity_type,
c.commodity_type_details commodity_type_details,
c.commodity_photo commodity_photo,
c.commodity_name commodity_name,
o.commodity_attribute commodity_attribute,
@ -45,7 +48,7 @@
o.order_status order_status
FROM
ebuy_order o
INNER JOIN ebuy_businesses b ON o.businesses_id = b.business_id
INNER JOIN ebuy_business b ON o.business_id = b.business_id
INNER JOIN ebuy_commodity c ON o.commodity_id = c.commodity_id
where 1 = 1
<if test="orderStatus != null and orderStatus != ''">
@ -75,4 +78,56 @@ FROM
WHERE
type_down = #{typeDown}
</select>
<!--获取购物车-->
<select id="getCartInfo" parameterType="string" resultType="map">
SELECT
ca.business_id business_id,
b.business_name business_name,
ca.commodity_id commodity_id,
co.commodity_type commodity_type,
co.commodity_type_details commodity_type_details,
co.commodity_photo commodity_photo,
co.commodity_name commodity_name,
ca.commodity_attribute commodity_attribute,
co.commodity_price commodity_price,
ca.commodity_amount commodity_amount,
co.commodity_amount commodity_amountall
from
ebuy_cart ca inner join ebuy_commodity co
on ca.commodity_id = co.commodity_id
inner join ebuy_business b
on ca.business_id = b.business_id
where
user_id = #{userId}
</select>
<!--获取商品列表-->
<select id="commodityInfo" parameterType="string" resultType="map">
SELECT
c.business_id business_id,
b.business_name business_name,
c.commodity_id commodity_id,
c.commodity_photo commodity_photo,
c.commodity_type commodity_type,
c.commodity_type_details commodity_type_details,
c.commodity_name commodity_name,
ca.commodity_attribute commodity_attribute,
c.commodity_price commodity_price,
c.commodity_amount commodity_amount,
c.commodity_describe commodity_describe,
c.paid_number paid_number,
b.business_address business_address
from
ebuy_commodity c inner join ebuy_business b on c.business_id = b.business_id
inner join ebuy_commodity_attribute ca on c.commodity_id = ca.commodity_id
where
1=1
<if test="keyword!=null and keyword!=''">
and c.commodity_name like concat('%',#{keyword},'%')
</if>
ORDER BY
c.commodity_type ,c.commodity_type_details
</select>
</mapper>

22
src/main/java/com/phy/ebuy/service/EbuyService.java
View File

@ -4,24 +4,34 @@ import java.util.HashMap;
import java.util.List;
import java.util.Map;
public interface EbuyService{
public interface EbuyService {
/**
* 验证登录
*/
Map<String,Object> verifyLogin(Map<String,Object> parameter);
Map<String, Object> verifyLogin(Map<String, Object> parameter);
/**
* 注册提交
*/
Map<String,Object> registerSub(Map<String,Object> parameter);
Map<String, Object> registerSub(Map<String, Object> parameter);
/**
* 所有订单Table
*/
List<Map<String,Object>> allOrderTable(String orderStatus);
List<Map<String, Object>> allOrderTable(String orderStatus);
/**
* 获取商品分类
*/
List<Map<String, Object>> typeDown(String[] typeDown);
}
Map<String, Object> typeDown(String[] typeDown);
/**
* 获取购物车信息
*/
List<Map<String, Object>> getCartInfo(String userId);
/**
* 获取商品列表
*/
List<Map<String, Object>> commodityInfo(String keyword);
}

19
src/main/java/com/phy/ebuy/service/impl/EbuyServiceImpl.java
View File

@ -68,12 +68,25 @@ public class EbuyServiceImpl implements EbuyService {
}
@Override
public List<Map<String, Object>> typeDown(String[] typeDowns) {
List<Map<String,Object>> result = new ArrayList<>();
public Map<String,Object> typeDown(String[] typeDowns) {
Map<String,Object> result = new HashMap<>();
for (int i = 0; i < typeDowns.length; i++) {
String[] one = {};
List<String> one = new ArrayList<>();
one = ebuyMapper.typeDown(typeDowns[i]);
result.put(typeDowns[i]+","+i,one);
}
return result;
}
@Override
public List<Map<String, Object>> getCartInfo(String userId) {
List<Map<String, Object>> result = ebuyMapper.getCartInfo(userId);
return result;
}
@Override
public List<Map<String, Object>> commodityInfo(String keyword) {
List<Map<String, Object>> result = ebuyMapper.commodityInfo(keyword);
return result;
}
}

4
src/main/webapp/WEB-INF/view/cart.html
View File

@ -38,7 +38,7 @@
<div class="operation">操作</div>
</div>
<div class="cart-info">
<div class="info-one">
<!-- <div class="info-one">
<div class="business-name">
<input type="checkbox" class="checkbox">
<span>店铺：</span>
@ -77,7 +77,7 @@
<p class="selection-text">相似宝贝</p>
</div>
</div>
</div>
</div>-->
</div>
</div>

127
src/main/webapp/WEB-INF/view/commodity.html Normal file
View File

@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="shortcut icon" type="image/x-icon" href="../../static/img/favicon.ico" rel="external nofollow" />
<link rel="stylesheet" href="../../static/css/index.css">
<link rel="stylesheet" href="../../static/layui/css/layui.css">
<link rel="stylesheet" href="../../static/css/commodity.css">
<link rel="stylesheet" href="../../static/css/public.css">
<script src="../../static/layui/layui.all.js"></script>
</head>
<body>
<div class="middle">
<div class="box">
<div class="search">
<div class="search-log">
<div class="log"></div>
</div>
<div class="search-box">
<div class="search-box-box">
<input type="text" class="search-box-input" placeholder="请输入搜索的宝贝">
<div class="search-text">搜索</div>
</div>
</div>
<div class="search-blank"></div>
</div>
<div class="strip"></div>
<div class="commodity-list">
<!--<div class="commodity">
<div class="business-name">
<input type="checkbox" class="checkbox">
<span>店铺：</span>
<span class="name selection-text">CEDY潮牌店</span>
<span class="gray-font">山东-济南</span>
<span class="gray-font">25人付款</span>
</div>
<div class="one-commodity">
<div class="check">
<input type="checkbox" class="checkbox">
</div>
<div class="commodity-info">
<img src="../../static/img/commodity/lingshi01.jpg"/>
<div class="commodity-name selection-text">
ins嘻哈国潮棉服oversize宽松大毛领连帽中长款男女情侣棉衣外套
</div>
</div>
<div class="commodity-attribute">
<span>颜色：</span>
<div class="attribute">
<select name="">
<option value="" selected="">请选择</option>
<option value="0">米白色（现货）</option>
<option value="1">黑色</option>
<option value="2">红色</option>
</select>
</div>
&lt;!&ndash;<span>米白色（现货）</span>&ndash;&gt;
&lt;!&ndash;<span>黑色</span>&ndash;&gt;
&lt;!&ndash;<span>红色</span>&ndash;&gt;
<span>尺码：</span>
<div class="attribute">
<select name="">
<option value="" selected="">请选择</option>
<option value="0">S</option>
<option value="1">M</option>
<option value="2">L</option>
<option value="3">XL</option>
</select>
</div>
</div>
<div class="commodity-price">
<span>￥268.00</span>
<div class="commodity-amount">
<div class="amount-box">
<div class="subtraction arithmetic hand-shape">-</div>
<input type="text" id="amount" value="1">
<div class="addition arithmetic hand-shape">+</div>
</div>
</div>
<span>(库存100件)</span>
</div>
<div class="commodity-describe">
<p>品牌： HSTYLE/韩都衣舍</p>
<p>适用年龄： 18-24周岁</p>
<p>尺码： S M L</p>
<p>风格： 通勤</p>
<p>通勤： 韩版</p>
<p>颜色分类： 红色 橘粉色</p>
<p>面料材质： 棉</p>
<p>袖型： 常规</p>
<p>组合形式： 单件</p>
<p>货号： EK9165</p>
<p>成分含量： 71%(含)-80%(含)</p>
<p>年份季节： 2019年秋季</p>
<p>袖长： 长袖</p>
<p>款式： 套头</p>
<p>厚薄： 加绒</p>
<p>衣长： 常规</p>
<p>服装版型： 宽松</p>
</div>
<div class="operation">
<p class="selection-text">加入购物车</p>
<p class="selection-text">立即购买</p>
<p class="selection-text">收藏宝贝</p>
<p class="selection-text">举报</p>
</div>
</div>
</div>-->
</div>
<div class="box-bottom"></div>
</div>
<div class="middle-botto">
</div>
</div>
</body>
<script src="../../static/js/jquery-1.12.2.js"></script>
<script src="../../static/layui/layui.js"></script>
<script src="../../static/js/commodity.js"></script>
</html>

2
src/main/webapp/WEB-INF/view/index.html
View File

@ -60,7 +60,7 @@
<a >
<div class="cart-photo"></div>
购物车
<span class="cart-number">1</span>
<span class="cart-number"></span>
</a>
<i id="icon3" class="layui-icon layui-icon-triangle-d"></i>
<div class="cart-content">

263
src/main/webapp/WEB-INF/view/middle.html
View File

@ -42,7 +42,7 @@
</li>
<li>
<a href="">童装玩具</a> / <a href="">孕产</a> / <a href="">奶粉</a><i class="layui-icon layui-icon-right"></i>
<a href="">童装玩具</a> / <a href="">孕产用品</a> / <a href="">奶粉</a><i class="layui-icon layui-icon-right"></i>
</li>
<li>
@ -87,69 +87,9 @@
</div>
<div id="li-1" class="li-content">
<div class="three-type">
<div class="type-1">
<div class="title">
<span>女装</span>
<div class="more">
更多
<i class="layui-icon layui-icon-right"></i>
</div>
</div>
<div class="type-content">
<span>羽绒服</span>
<span>棉衣棉服</span>
<span>毛呢大衣</span>
<span>毛衣针织</span>
<span>卫衣绒衫</span>
<span>皮衣皮草</span>
<span>裤裙</span>
<span>衬衫</span>
<span>半身裙</span>
<span>汉服</span>
</div>
</div>
<div class="type-1">
<div class="title">
<span>女装</span>
<div class="more">
更多
<i class="layui-icon layui-icon-right"></i>
</div>
</div>
<div class="type-content">
<span>羽绒服</span>
<span>棉衣棉服</span>
<span>毛呢大衣</span>
<span>毛衣针织</span>
<span>卫衣绒衫</span>
<span>皮衣皮草</span>
<span>裤裙</span>
<span>衬衫</span>
<span>半身裙</span>
<span>汉服</span>
</div>
</div>
<div class="type-1">
<div class="title">
<span>女装</span>
<div class="more">
更多
<i class="layui-icon layui-icon-right"></i>
</div>
</div>
<div class="type-content">
<span>羽绒服</span>
<span>棉衣棉服</span>
<span>毛呢大衣</span>
<span>毛衣针织</span>
<span>卫衣绒衫</span>
<span>皮衣皮草</span>
<span>裤裙</span>
<span>衬衫</span>
<span>半身裙</span>
<span>汉服</span>
</div>
</div>
<div class="type-1"></div>
<div class="type-1"></div>
<div class="type-1"></div>
</div>
<div class="you-like">
<sqan>猜你喜欢</sqan>
@ -197,126 +137,95 @@
</div>
</div>
</div>
<div id="li-2" class="li-content"></div>
<div id="li-2" class="li-content">
<div class="three-type">
<div class="type-1"></div>
<div class="type-1"></div>
<div class="type-1"></div>
</div>
<div class="you-like">
<sqan>猜你喜欢</sqan>
</div>
</div>
<div id="li-3" class="li-content">
<div class="three-type">
<div class="type-1">
<div class="title">
<span>女装</span>
<div class="more">
更多
<i class="layui-icon layui-icon-right"></i>
</div>
</div>
<div class="type-content">
<span>羽绒服</span>
<span>棉衣棉服</span>
<span>毛呢大衣</span>
<span>毛衣针织</span>
<span>卫衣绒衫</span>
<span>皮衣皮草</span>
<span>裤裙</span>
<span>衬衫</span>
<span>半身裙</span>
<span>汉服</span>
</div>
</div>
<div class="type-1">
<div class="title">
<span>女装</span>
<div class="more">
更多
<i class="layui-icon layui-icon-right"></i>
</div>
</div>
<div class="type-content">
<span>羽绒服</span>
<span>棉衣棉服</span>
<span>毛呢大衣</span>
<span>毛衣针织</span>
<span>卫衣绒衫</span>
<span>皮衣皮草</span>
<span>裤裙</span>
<span>衬衫</span>
<span>半身裙</span>
<span>汉服</span>
</div>
</div>
<div class="type-1">
<div class="title">
<span>女装</span>
<div class="more">
更多
<i class="layui-icon layui-icon-right"></i>
</div>
</div>
<div class="type-content">
<span>羽绒服</span>
<span>棉衣棉服</span>
<span>毛呢大衣</span>
<span>毛衣针织</span>
<span>卫衣绒衫</span>
<span>皮衣皮草</span>
<span>裤裙</span>
<span>衬衫</span>
<span>半身裙</span>
<span>汉服</span>
</div>
</div>
<div class="type-1"></div>
<div class="type-1"></div>
<div class="type-1"></div>
</div>
<div class="you-like">
<sqan>猜你喜欢</sqan>
</div>
</div>
<div id="li-4" class="li-content">
<div class="three-type">
<div class="type-1"></div>
<div class="type-1"></div>
<div class="type-1"></div>
</div>
<div class="you-like">
<sqan>猜你喜欢</sqan>
</div>
</div>
<div id="li-5" class="li-content">
<div class="three-type">
<div class="type-1"></div>
<div class="type-1"></div>
<div class="type-1"></div>
</div>
<div class="you-like">
<sqan>猜你喜欢</sqan>
</div></div>
<div id="li-6" class="li-content">
<div class="three-type">
<div class="type-1"></div>
<div class="type-1"></div>
<div class="type-1"></div>
</div>
<div class="you-like">
<sqan>猜你喜欢</sqan>
</div>
</div>
<div id="li-7" class="li-content">
<div class="three-type">
<div class="type-1"></div>
<div class="type-1"></div>
<div class="type-1"></div>
</div>
<div class="you-like">
<sqan>猜你喜欢</sqan>
</div>
</div>
<div id="li-8" class="li-content">
<div class="three-type">
<div class="type-1"></div>
<div class="type-1"></div>
<div class="type-1"></div>
</div>
<div class="you-like">
<sqan>猜你喜欢</sqan>
</div>
</div>
<div id="li-9" class="li-content">
<div class="three-type">
<div class="type-1"></div>
<div class="type-1"></div>
<div class="type-1"></div>
</div>
<div class="you-like">
<sqan>猜你喜欢</sqan>
</div>
</div>
<div id="li-10" class="li-content">
<div class="three-type">
<div class="type-1"></div>
<div class="type-1"></div>
<div class="type-1"></div>
</div>
<div class="you-like">
<sqan>猜你喜欢</sqan>
<div class="photo">
<div class="photo-one">
<div class="photo-1">
</div>
<span>AngelFields公主风睡裙纯棉宫廷睡衣全棉复古连衣裙家居服</span>
</div>
<div class="photo-one">
<div class="photo-one">
<div class="photo-1">
</div>
<span>AngelFields公主风睡裙纯棉宫廷睡衣全棉复古连衣裙家居服</span>
</div>
</div>
<div class="photo-one">
<div class="photo-one">
<div class="photo-1">
</div>
<span>AngelFields公主风睡裙纯棉宫廷睡衣全棉复古连衣裙家居服</span>
</div>
</div>
<div class="photo-one">
<div class="photo-one">
<div class="photo-1">
</div>
<span>AngelFields公主风睡裙纯棉宫廷睡衣全棉复古连衣裙家居服</span>
</div>
</div>
<div class="photo-one">
<div class="photo-one">
<div class="photo-1">
</div>
<span>AngelFields公主风睡裙纯棉宫廷睡衣全棉复古连衣裙家居服</span>
</div>
</div>
<div class="photo-one">
<div class="photo-one">
<div class="photo-1">
</div>
<span>AngelFields公主风睡裙纯棉宫廷睡衣全棉复古连衣裙家居服</span>
</div>
</div>
</div>
</div>
</div>
<div id="li-4" class="li-content"></div>
<div id="li-5" class="li-content"></div>
<div id="li-6" class="li-content"></div>
<div id="li-7" class="li-content"></div>
<div id="li-8" class="li-content"></div>
<div id="li-9" class="li-content"></div>
<div id="li-10" class="li-content"></div>
</div>
<div class="person">
<div class="person-person">

15
src/main/webapp/static/css/cart.css
View File

@ -137,6 +137,9 @@ body{
height: 10em;
}
.middle .cart-info .info-one .one-commodity:hover{
border:1px dashed #17b5fe;
}
.middle .cart-info .info-one .one-commodity .check{
flex: 1;
padding: 1em 0 0 1em;
@ -214,9 +217,9 @@ body{
.operation p{
margin-top: 0.2rem;
}
.operation p:nth-child(3){
/*.operation p:nth-child(3){
display: none;
}
}*/
.arithmetic:hover{
color: #17b5fe;
border: 1px solid #17b5fe!important;
@ -224,16 +227,20 @@ body{
.frame{
border: 1px dashed #DBEBFE;
}
.frame:hover{
border:1px dashed #DBEBFE;
}
.commodity-attribute i{
/*display: none;*/
display: none;
float: right;
margin: -1rem;
}
.commodity-attribute span{
display: none;
/*display: none;*/
float: right;
margin: -1rem;
background: #17b5fe;
color: #fff;
cursor: pointer;
}

134
src/main/webapp/static/css/commodity.css Normal file
View File

@ -0,0 +1,134 @@
p,span{
text-decoration: none;
}
.middle .box{
height: fit-content;
}
.middle .commodity-list{
width: 80%;
margin: 0 auto;
}
.middle .commodity-list .commodity{
height: 14em;
margin-top: 1em;
}
.commodity{
margin-top: 1em;
/*background: rgb(245,245,245);*/
/*height: 3em;*/
/*line-height: 3em;*/
height: 12em;
}
.commodity .business-name{
height: 2em;
}
.business-name span:nth-child(4){
float: right;
margin: 0 1rem;
}
.business-name span:nth-child(5){
float: right;
}
.commodity .one-commodity{
display: flex;
border: 1px solid rgb(204,204,204);
height: 10em;
}
.commodity .one-commodity .check{
flex: 1;
padding: 1em 0 0 1em;
}
.middle .one-commodity .commodity-info{
flex:14;
text-align: center;
padding: 1em;
}
.commodity-info img{
height: 6rem;
width: 6rem;
float: left;
}
.commodity-info .commodity-name{
float: left;
width: 7.3rem;
margin-left: 1rem;
text-align: initial;
color: rgb(60,60,60);
}
.middle .one-commodity .commodity-attribute{
flex: 8;
text-align: inherit;
padding: 1em;
color: rgb(156,156,156);
}
.middle .one-commodity .commodity-attribute span{
display: inline-block;
}
.middle .one-commodity .commodity-attribute .attribute{
margin: 0.3rem 0;
}
.attribute select{
height: 1.5rem;
line-height: 1.5rem;
}
.middle .one-commodity .commodity-price{
flex: 6;
text-align: center;
padding: 1em;
font-weight: bold;
}
.commodity-price span:nth-child(3){
font-weight: normal;
}
.middle .one-commodity .commodity-amount{
text-align: center;
padding:1em;
}
.commodity-amount .amount-box{
width: 5rem;
display: flex;
margin: 0 auto;
height: 2em;
line-height: 2em;
}
.amount-box .subtraction{
width: 1rem;
background: rgb(240,240,240);
border: 1px solid rgb(240,240,240);
user-select: none;
}
.amount-box input{
width: 3rem;
text-align: center;
}
.amount-box .addition{
width: 1rem;
background: rgb(240,240,240);
border: 1px solid rgb(240,240,240);
user-select: none;
}
.middle .one-commodity .commodity-describe{
flex: 12;
padding: 1rem 1rem 1rem 2rem;
overflow: auto;
}
.middle .one-commodity .operation{
flex:8;
text-align: center;
padding: 1em;
}
.operation p{
margin-top: 0.2rem;
}
.operation p :hover{
}
.arithmetic:hover{
color: #17b5fe;
border: 1px solid #17b5fe!important;
}
.frame{
border: 1px dashed #DBEBFE;
}

8
src/main/webapp/static/css/index.css
View File

@ -14,6 +14,7 @@ body{
overflow: hidden;
}
.head{
user-select: none;
background: rgb(245,245,245);
/*flex: 1;*/
width: 100%;
@ -357,7 +358,7 @@ body{
}
.middle .box .search{
display: flex;
height: 20%;
height: 12.5em;
width: 100%;
}
.middle .box .search .search-log{
@ -518,8 +519,11 @@ body{
}
.middle .box .navigation-carousel-person .carousel .li-content .three-type .type-1 .type-content span{
margin-right: 1em;
display: inline-block;
margin: 0.4em 1em 0 0;
white-space:nowrap;
font-size: 0.9em;
}
.middle .box .navigation-carousel-person .carousel .li-content .you-like{
height: 100%;

5
src/main/webapp/static/css/public.css
View File

@ -7,4 +7,7 @@
.selection-text:hover{
color: #17b5fe;
text-decoration: underline;
}
}
.gray-font{
color:rgb(136,136,136);
}

BIN
src/main/webapp/static/img/commodity/女装/T恤/nvduanxiu04.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 498 KiB

16
src/main/webapp/static/js/allOrder.js
View File

@ -28,12 +28,12 @@ layui.use(["layer","jquery","element","carousel","table"], function() {
<div class="orderId">订单号: ${data[i].order_id}</div>
</div>
<div class="businessName">
<span>${data[i].businesses_name}</span>
<span>${data[i].business_name}</span>
</div>
</div>
<div class="bottom">
<div class="commodityInfo">
<img src="../../../../static/img/commodity/${data[i].commodity_photo}" class="commodityPhoto" alt=""/>
<img src="../../../../static/img/commodity/${data[i].commodity_type}/${data[i].commodity_type_details}/${data[i].commodity_photo}" class="commodityPhoto" alt=""/>
<div class="commodityNameAndCommodityAttribute">
<div class="commodityName">${data[i].commodity_name}</div>
<div class="commodityAttribute">${data[i].commodity_attribute}</div>
@ -72,12 +72,12 @@ layui.use(["layer","jquery","element","carousel","table"], function() {
<div class="orderId">订单号: ${data[i].order_id}</div>
</div>
<div class="businessName">
<span>${data[i].businesses_name}</span>
<span>${data[i].business_name}</span>
</div>
</div>
<div class="bottom">
<div class="commodityInfo">
<img src="../../../../static/img/commodity/${data[i].commodity_photo}" class="commodityPhoto" alt=""/>
<img src="../../../../static/img/commodity/${data[i].commodity_type}/${data[i].commodity_type_details}/${data[i].commodity_photo}" class="commodityPhoto" alt=""/>
<div class="commodityNameAndCommodityAttribute">
<div class="commodityName">${data[i].commodity_name}</div>
<div class="commodityAttribute">${data[i].commodity_attribute}</div>
@ -112,12 +112,12 @@ layui.use(["layer","jquery","element","carousel","table"], function() {
<div class="orderId">订单号: ${data[i].order_id}</div>
</div>
<div class="businessName">
<span>${data[i].businesses_name}</span>
<span>${data[i].business_name}</span>
</div>
</div>
<div class="bottom">
<div class="commodityInfo">
<img src="../../../../static/img/commodity/${data[i].commodity_photo}" class="commodityPhoto" alt=""/>
<img src="../../../../static/img/commodity/${data[i].commodity_type}/${data[i].commodity_type_details}/${data[i].commodity_photo}" class="commodityPhoto" alt=""/>
<div class="commodityNameAndCommodityAttribute">
<div class="commodityName">${data[i].commodity_name}</div>
<div class="commodityAttribute">${data[i].commodity_attribute}</div>
@ -157,12 +157,12 @@ layui.use(["layer","jquery","element","carousel","table"], function() {
<div class="orderId">订单号: ${data[i].order_id}</div>
</div>
<div class="businessName">
<span>${data[i].businesses_name}</span>
<span>${data[i].business_name}</span>
</div>
</div>
<div class="bottom">
<div class="commodityInfo">
<img src="../../../../static/img/commodity/${data[i].commodity_photo}" class="commodityPhoto" alt=""/>
<img src="../../../../static/img/commodity/${data[i].commodity_type}/${data[i].commodity_type_details}/${data[i].commodity_photo}" class="commodityPhoto" alt=""/>
<div class="commodityNameAndCommodityAttribute">
<div class="commodityName">${data[i].commodity_name}</div>
<div class="commodityAttribute">${data[i].commodity_attribute}</div>

238
src/main/webapp/static/js/cart.js
View File

@ -1,22 +1,170 @@
//一条记录悬停样式
function oneOnmousemove() {
$(".operation p:nth-child(3)").css("display","block");
}
function oneOnmouseout() {
$(".operation p:nth-child(3)").css("display","none");
}
let userId = JSON.parse(sessionStorage.getItem("userInfo")).user_id;
//获取购物车信息
$.ajax({
url:"/ebuy/getCartInfo",
type:"post",
dataType:"json",
data:{
userId:userId,
},
success:function (data) {
console.log(data);
let cartInfo = "";
for (let i = 0; i < data.length; i++) {
let attribute = data[i].commodity_attribute;
let attributes = attribute.split(",");
let attributesInfo = "";
for (let j = 0; j < attributes.length; j++) {
let one = `<p>${attributes[j]}</p>`;
attributesInfo += one;
}
let oneInfo = `
<div class="info-one">
<div class="business-name">
<input type="checkbox" class="checkbox">
<span>店铺：</span>
<span class="name selection-text">${data[i].business_name}</span>
</div>
<div class="one-commodity">
<div class="check">
<input type="checkbox" class="checkbox">
</div>
<div class="commodity-info">
<img src="../../static/img/commodity/${data[i].commodity_type}/${data[i].commodity_type_details}/${data[i].commodity_photo}"/>
<div class="commodity-name selection-text">
${data[i].commodity_name}
</div>
</div>
<div class="commodity-attribute frame">
<span>修改</span>
<i class="layui-icon layui-icon-edit"></i>`
+attributesInfo+
`
</div>
<div class="commodity-price">
￥${data[i].commodity_price}
</div>
<div class="commodity-amount">
<div class="amount-box">
<div class="subtraction arithmetic hand-shape">-</div>
<input type="text" class="amount" value="${data[i].commodity_amount}">
<div class="addition arithmetic hand-shape">+</div>
</div>
</div>
<div class="commodity-money">￥`+(data[i].commodity_price*data[i].commodity_amount).toFixed(2)+`</div>
<div class="operation">
<p class="selection-text">移入收藏夹</p>
<p class="selection-text">删除</p>
<p class="selection-text">相似宝贝</p>
</div>
</div>
</div>
`;
cartInfo += oneInfo;
}
$(".cart-info").html(cartInfo);
for (let i = 0; i < data.length; i++) {
//监听数量
let $input = $(".amount:eq("+i+")");
//商品数量
let amount = $input.val();
if (amount == 1) {
$(".subtraction:eq("+i+")").removeClass("arithmetic hand-shape");
$(".subtraction:eq("+i+")").html("");
$input.val(1);
}
//输入框监听
$input.on("input propertychange",function () {
let amount = $input.val();
if (amount < 1) {
$(".subtraction:eq("+i+")").removeClass("arithmetic hand-shape");
$(".subtraction:eq("+i+")").html("");
amount = 1;
layer.msg("商品数量不能小于1");
}
if (amount == 1) {
$(".subtraction:eq("+i+")").removeClass("arithmetic hand-shape");
$(".subtraction:eq("+i+")").html("")
}
if (amount > 1) {
$(".subtraction:eq("+i+")").addClass("arithmetic hand-shape");
$(".subtraction:eq("+i+")").html("-")
$input.val(amount);
}
if (amount == data[i].commodity_amountall) {
$(".addition:eq("+i+")").removeClass("arithmetic hand-shape");
$(".addition:eq("+i+")").html("");
}
if (amount > data[i].commodity_amountall) {
$(".addition:eq("+i+")").removeClass("arithmetic hand-shape");
$(".addition:eq("+i+")").html("");
amount = parseInt(data[i].commodity_amountall);
layer.msg("商品数量不能大于库存")
}
if (amount < data[i].commodity_amountall) {
$(".addition:eq("+i+")").addClass("arithmetic hand-shape");
$(".addition:eq("+i+")").html("+");
}
$(".amount:eq("+i+")").val(amount);
$(".cart-info .commodity-money").eq(i).text("￥"+(amount*onePrice).toFixed(2));
})
//购物车商品数量改变
//获取商品单价
let onePrice = data[i].commodity_price;
//商品减一
$(".subtraction:eq("+i+")").on("click",function () {
let amount = $input.val();
amount--;
if (amount < 2) {
$(".subtraction:eq("+i+")").removeClass("arithmetic hand-shape");
$(".subtraction:eq("+i+")").html("");
if (amount < 1) {
layer.msg("商品数量不能小于1")
}
amount = 1;
}
if (amount < data[i].commodity_amountall) {
$(".addition:eq("+i+")").addClass("arithmetic hand-shape");
$(".addition:eq("+i+")").html("+");
}
$(".amount:eq("+i+")").val(amount);
$(".cart-info .commodity-money").eq(i).text("￥"+(amount*onePrice).toFixed(2));
})
//商品加一
$(".addition:eq("+i+")").on("click",function () {
let amount = $input.val();
amount++;
$(".amount:eq("+i+")").val(amount);
if (amount > 1) {
$(".subtraction:eq("+i+")").addClass("arithmetic hand-shape");
$(".subtraction:eq("+i+")").html("-")
}
if (amount == data[i].commodity_amountall) {
$(".addition:eq("+i+")").removeClass("arithmetic hand-shape");
$(".addition:eq("+i+")").html("");
amount = parseInt(data[i].commodity_amountall);
layer.msg("商品数量不能大于库存")
}
if (amount > data[i].commodity_amountall) {
$(".addition:eq("+i+")").removeClass("arithmetic hand-shape");
$(".addition:eq("+i+")").html("");
amount = parseInt(data[i].commodity_amountall);
layer.msg("商品数量不能大于库存")
}
$(".amount:eq("+i+")").val(amount);
$(".cart-info .commodity-money").eq(i).text("￥"+(amount*onePrice).toFixed(2));
})
}
},
error:function () {
}
})
//商品属性的悬停事件
function attributeOnmousemove() {
$(".commodity-attribute span").css("display","inline");
$(".commodity-attribute i").css("display","none");
$(".frame").css("border","1px dashed #17b5fe")
}
function attributeOnmouseout() {
$(".commodity-attribute span").css("display","none");
$(".commodity-attribute i").css("display","inline");
$(".frame").css("border","1px dashed #DBEBFE")
}
layui.use(["layer","jquery","element","carousel","table"], function() {
const layer = layui.layer
@ -25,59 +173,5 @@ layui.use(["layer","jquery","element","carousel","table"], function() {
, table = layui.table
, carousel = layui.carousel;
//监听数量
let $input = $("#amount");
//商品数量
let amount = $input.val();
if (amount == 1) {
$(".subtraction").removeClass("arithmetic hand-shape");
$(".subtraction").html("");
$input.val(1);
}
$input.on("input propertychange",function () {
let amount = $input.val();
if (amount < 1) {
layer.msg("商品数量不能低于1")
}
if (amount == 1) {
$(".subtraction").removeClass("arithmetic hand-shape");
$(".subtraction").html("")
}
if (amount > 1) {
$input.val(amount);
}
})
//购物车商品数量改变
//商品减一
$(".subtraction").on("click",function () {
let amount = $input.val();
amount--;
if (amount < 2) {
$(".subtraction").removeClass("arithmetic hand-shape");
$(".subtraction").html("");
if (amount < 1) {
layer.msg("商品数量不能低于1")
}
amount = 1;
}
$("#amount").val(amount);
})
//商品加一
$(".addition").on("click",function () {
let amount = $input.val();
amount++;
$("#amount").val(amount);
if (amount > 1) {
$(".subtraction").addClass("arithmetic hand-shape");
$(".subtraction").html("-")
}
})
//一条记录的悬停样式
$(".info-one").attr("onmouseover","oneOnmousemove()");
$(".info-one").attr("onmouseout","oneOnmouseout()");
//修改属性的悬停事件
$(".commodity-attribute").attr("onmouseover","attributeOnmousemove()")
$(".commodity-attribute").attr("onmouseout","attributeOnmouseout()")
})

224
src/main/webapp/static/js/commodity.js Normal file
View File

@ -0,0 +1,224 @@
//商品属性的悬停事件
function attributeOnmousemove() {
$(".commodity-attribute span").css("display","inline");
$(".commodity-attribute i").css("display","none");
$(".frame").css("border","1px dashed #17b5fe")
}
function attributeOnmouseout() {
$(".commodity-attribute span").css("display","none");
$(".commodity-attribute i").css("display","inline");
$(".frame").css("border","1px dashed #DBEBFE")
}
layui.use(['layer',"jquery","element","carousel"], function() {
const layer = layui.layer
, $ = layui.jquery
, element = layui.element
, carousel = layui.carousel;
//搜索回车触发
$("body").keydown(function () {
if (window.event.keyCode == 13) {
//如果发生了按下回车键事件，回车键对应的编号是13
$(".search-text").trigger("click"); //则激活登录按钮的click事件
}
});
let keyword = sessionStorage.getItem("keyword");
//查询商品信息
$.ajax({
url:"/ebuy/commodityInfo",
data:{
keyword:keyword,
},
dataType:"json",
type:"post",
success:function (data) {
let commodityList = '';
for (let i = 0; i < data.length; i++) {
//商品属性
let attribute = data[i].commodity_attribute.split(";");
let attrs = '';
for (let j = 0; j < attribute.length; j++) {
let attributeName = attribute[j].split("：");
let attributeText = attributeName[1].split(",");
let texts = '';
for (let k = 0; k < attributeText.length; k++) {
let text = `<option value="0">${attributeText[k]}</option>`;
texts += text;
}
let attr = `<span>${attributeName[0]}:</span>
<div class="attribute">
<select name="">
<option value="" selected="">请选择</option>
`+texts+`
</select>
</div>`;
attrs += attr;
}
//商品描述
let describes = '';
let commodity_describe = data[i].commodity_describe.split(",");
for (let j = 0; j < commodity_describe.length; j++) {
let describe = `<p>${commodity_describe[j]}</p>`;
describes += describe;
}
let commodity =
`
<div class="commodity">
<div class="business-name">
<input type="checkbox" class="checkbox">
<span>店铺：</span>
<span class="name selection-text">${data[i].business_name}</span>
<span class="gray-font">${data[i].business_address}</span>
<span class="gray-font">${data[i].paid_number}人付款</span>
</div>
<div class="one-commodity">
<div class="check">
<input type="checkbox" class="checkbox">
</div>
<div class="commodity-info">
<img src="../../static/img/commodity/${data[i].commodity_type}/${data[i].commodity_type_details}/${data[i].commodity_photo}"/>
<div class="commodity-name selection-text">
${data[i].commodity_name}
</div>
</div>
<div class="commodity-attribute">
`+attrs+`
</div>
<div class="commodity-price">
<span>￥${data[i].commodity_price}</span>
<div class="commodity-amount">
<div class="amount-box">
<div class="subtraction arithmetic hand-shape">-</div>
<input type="text" class="amount" value="1">
<div class="addition arithmetic hand-shape">+</div>
</div>
</div>
<p>(库存${data[i].commodity_amount}件)</p>
</div>
<div class="commodity-describe">
`+describes+`
</div>
<div class="operation">
<p class="selection-text">加入购物车</p>
<p class="selection-text">立即购买</p>
<p class="selection-text">收藏宝贝</p>
<p class="selection-text">举报</p>
</div>
</div>
</div>
`;
commodityList += commodity;
}
$(".commodity-list").html(commodityList);
for (let i = 0; i < data.length; i++) {
//监听数量
let $input = $(".amount:eq("+i+")");
//商品数量
let amount = $input.val();
if (amount == 1) {
$(".subtraction:eq("+i+")").removeClass("arithmetic hand-shape");
$(".subtraction:eq("+i+")").html("");
$input.val(1);
}
//输入框监听
$input.on("input propertychange",function () {
if (amount < 1) {
$(".subtraction:eq("+i+")").removeClass("arithmetic hand-shape");
$(".subtraction:eq("+i+")").html("");
amount = 1;
layer.msg("商品数量不能小于1");
}
if (amount == 1) {
$(".subtraction:eq("+i+")").removeClass("arithmetic hand-shape");
$(".subtraction:eq("+i+")").html("")
}
if (amount > 1) {
$(".subtraction:eq("+i+")").addClass("arithmetic hand-shape");
$(".subtraction:eq("+i+")").html("-")
$input.val(amount);
}
if (amount == data[i].commodity_amount) {
$(".addition:eq("+i+")").removeClass("arithmetic hand-shape");
$(".addition:eq("+i+")").html("");
}
if (amount > data[i].commodity_amount) {
$(".addition:eq("+i+")").removeClass("arithmetic hand-shape");
$(".addition:eq("+i+")").html("");
amount = parseInt(data[i].commodity_amount);
layer.msg("商品数量不能大于库存")
}
if (amount < data[i].commodity_amount) {
$(".addition:eq("+i+")").addClass("arithmetic hand-shape");
$(".addition:eq("+i+")").html("+");
}
$(".amount:eq("+i+")").val(amount);
$(".commodity-price span").eq(i).text("￥"+(amount*onePrice).toFixed(2));
})
//购物车商品数量改变
//获取商品单价
let onePrice = data[i].commodity_price;
//商品减一
$(".subtraction:eq("+i+")").on("click",function () {
let amount = $input.val();
amount--;
if (amount < 2) {
$(".subtraction:eq("+i+")").removeClass("arithmetic hand-shape");
$(".subtraction:eq("+i+")").html("");
if (amount < 1) {
layer.msg("商品数量商品数量不能小于1")
}
amount = 1;
}
if (amount < data[i].commodity_amount) {
$(".addition:eq("+i+")").addClass("arithmetic hand-shape");
$(".addition:eq("+i+")").html("+");
}
$(".amount:eq("+i+")").val(amount);
$(".commodity-price span").eq(i).text("￥"+(amount*onePrice).toFixed(2));
})
//商品加一
$(".addition:eq("+i+")").on("click",function () {
let amount = $input.val();
amount++;
if (amount > 1) {
$(".subtraction:eq("+i+")").addClass("arithmetic hand-shape");
$(".subtraction:eq("+i+")").html("-")
}
if (amount == data[i].commodity_amount) {
$(".addition:eq("+i+")").removeClass("arithmetic hand-shape");
$(".addition:eq("+i+")").html("");
amount = parseInt(data[i].commodity_amount);
layer.msg("商品数量不能大于库存")
}
if (amount > data[i].commodity_amount) {
$(".addition:eq("+i+")").removeClass("arithmetic hand-shape");
$(".addition:eq("+i+")").html("");
amount = parseInt(data[i].commodity_amount);
layer.msg("商品数量不能大于库存")
}
$(".amount:eq("+i+")").val(amount);
$(".commodity-price span").eq(i).text("￥"+(amount*onePrice).toFixed(2));
})
}
},
error:function () {
}
})
//加入购物车
$(".operation .selection-text").on("click",function () {
alert(1)
})
//商品浏览
$(".middle .box .search .search-box .search-box-box .search-text").on("click",function () {
$(".iframe-middle",window.parent.document).attr("src","/ebuy/commodity");
sessionStorage.setItem("keyword",$(".search-box-input").val());
})
})

7
src/main/webapp/static/js/index.js
View File

@ -183,7 +183,7 @@ layui.use(['layer',"jquery","element","carousel"], function() {
}
//头像去个人首页
$(".head .content .login-information .login-text .personInfo .info .head-portrait,.login-information .login-text").on("click",function () {
$(".head .head-portrait,.login-information .login-text .info .head-portrait").on("click",function () {
$(".iframe-middle").attr("src","/ebuy/account");
sessionStorage.setItem("accountTab","personalHomepage");
})
@ -208,14 +208,13 @@ layui.use(['layer',"jquery","element","carousel"], function() {
}
});
//搜索
/*//搜索
$(".search-text").on("click",function () {
layer.msg($(".search-box-input").val())
})
})*/
//购物车
$(".cart").on("click",function () {
$(".iframe-middle").attr("src","/ebuy/cart");
})
})

30
src/main/webapp/static/js/middle.js
View File

@ -23,10 +23,38 @@ layui.use(['layer',"jquery","element","carousel"], function() {
success: function (data) {
console.log("成功");
console.log(data);
for (let i in data) {
let typeName = i.split(",")[0];
let typeNum = i.split(",")[1];
let type = "";
for (let j = 0; j < data[i].length; j++) {
let o = `<span>${data[i][j]}</span>`;
type += o;
}
let one = `
<div class="title">
<span>${typeName}</span>
<div class="more">
更多
<i class="layui-icon layui-icon-right"></i>
</div>
</div>
<div class="type-content">
`+type+`
</div>
`;
$("#li-"+(Math.ceil((Number(typeNum)+1)/3))+" .type-1:eq("+(((Math.ceil((Number(typeNum)+1)%3)) == 0 ? 3 : (Math.ceil((Number(typeNum)+1)%3)))-1)+")").html(one)
}
},
error: function () {
console.log("shibai1");
}
})
//商品浏览
$(".middle .box .search .search-box .search-box-box .search-text").on("click",function () {
$(".iframe-middle",window.parent.document).attr("src","/ebuy/commodity");
sessionStorage.setItem("keyword",$(".search-box-input").val());
})
})

4
src/main/webapp/static/js/pendingPayment.js
View File

@ -27,12 +27,12 @@ layui.use(["layer","jquery","element","carousel","table"], function() {
<div class="orderId">订单号: ${data[i].order_id}</div>
</div>
<div class="businessName">
<span>${data[i].businesses_name}</span>
<span>${data[i].business_name}</span>
</div>
</div>
<div class="bottom">
<div class="commodityInfo">
<img src="../../../../static/img/commodity/${data[i].commodity_photo}" class="commodityPhoto" alt=""/>
<img src="../../../../static/img/commodity/${data[i].commodity_type}/${data[i].commodity_type_details}/${data[i].commodity_photo}" class="commodityPhoto" alt=""/>
<div class="commodityNameAndCommodityAttribute">
<div class="commodityName">${data[i].commodity_name}</div>
<div class="commodityAttribute">${data[i].commodity_attribute}</div>

6
src/main/webapp/static/js/register.js
View File

@ -11,10 +11,16 @@ layui.use(['layer',"jquery"], function() {
let againPassWord = $("#againPassWord").val();
if (mobile == '' || mobile == null) {
layer.msg("请输入手机号!")
} else if (mobile.length < 11) {
layer.msg("请输入正确的手机号!")
} else if (userName == '' || userName == null) {
layer.msg("请输入用户名!")
} else if (userName.length < 6) {
layer.msg("用户名不能低于6位数!")
} else if (passWord == '' || passWord == null) {
layer.msg("请输入密码!")
} else if (passWord.length < 6) {
layer.msg("密码过于简单!")
} else if (againPassWord == '' || againPassWord == null) {
layer.msg("请确认密码!")
} else if (againPassWord != passWord) {

4
src/main/webapp/static/js/toBeEvaluated.js
View File

@ -27,12 +27,12 @@ layui.use(["layer","jquery","element","carousel","table"], function() {
<div class="orderId">订单号: ${data[i].order_id}</div>
</div>
<div class="businessName">
<span>${data[i].businesses_name}</span>
<span>${data[i].business_name}</span>
</div>
</div>
<div class="bottom">
<div class="commodityInfo">
<img src="../../../../static/img/commodity/${data[i].commodity_photo}" class="commodityPhoto" alt=""/>
<img src="../../../../static/img/commodity/${data[i].commodity_type}/${data[i].commodity_type_details}/${data[i].commodity_photo}" class="commodityPhoto" alt=""/>
<div class="commodityNameAndCommodityAttribute">
<div class="commodityName">${data[i].commodity_name}</div>
<div class="commodityAttribute">${data[i].commodity_attribute}</div>

4
src/main/webapp/static/js/toBeRecevied.js
View File

@ -27,12 +27,12 @@ layui.use(["layer","jquery","element","carousel","table"], function() {
<div class="orderId">订单号: ${data[i].order_id}</div>
</div>
<div class="businessName">
<span>${data[i].businesses_name}</span>
<span>${data[i].business_name}</span>
</div>
</div>
<div class="bottom">
<div class="commodityInfo">
<img src="../../../../static/img/commodity/${data[i].commodity_photo}" class="commodityPhoto" alt=""/>
<img src="../../../../static/img/commodity/${data[i].commodity_type}/${data[i].commodity_type_details}/${data[i].commodity_photo}" class="commodityPhoto" alt=""/>
<div class="commodityNameAndCommodityAttribute">
<div class="commodityName">${data[i].commodity_name}</div>
<div class="commodityAttribute">${data[i].commodity_attribute}</div>

4
src/main/webapp/static/js/toBeShipped.js
View File

@ -27,12 +27,12 @@ layui.use(["layer","jquery","element","carousel","table"], function() {
<div class="orderId">订单号: ${data[i].order_id}</div>
</div>
<div class="businessName">
<span>${data[i].businesses_name}</span>
<span>${data[i].business_name}</span>
</div>
</div>
<div class="bottom">
<div class="commodityInfo">
<img src="../../../../static/img/commodity/${data[i].commodity_photo}" class="commodityPhoto" alt=""/>
<img src="../../../../static/img/commodity/${data[i].commodity_type}/${data[i].commodity_type_details}/${data[i].commodity_photo}" class="commodityPhoto" alt=""/>
<div class="commodityNameAndCommodityAttribute">
<div class="commodityName">${data[i].commodity_name}</div>
<div class="commodityAttribute">${data[i].commodity_attribute}</div>