购物车页面的实现（UI)1
来自CloudWiki
目录
初始文件配置
更改配置文件
（文件名称）webpack.config.js.
entry: {
"common":['./src/page/common/index.js'],
"index":['./src/page/index/index.js'],
"list":['./src/page/list/index.js'],
"detail":['./src/page/detail/index.js'],
"cart":['./src/page/cart/index.js'],
"user-login":['./src/page/user-login/index.js'],
"user-register":['./src/page/user-register/index.js'],
"user-pass-reset":['./src/page/user-pass-reset/index.js'],
"user-center":['./src/page/user-center/index.js'],
"user-center-update":['./src/page/user-center-update/index.js'],
"user-pass-update":['./src/page/user-pass-update/index.js'],
"result":['./src/page/result/index.js']
},
//html模板的处理
new HtmlWebpackPlugin(getHtmlConfig('index','首页')),
new HtmlWebpackPlugin(getHtmlConfig('list','商品列表页')),
new HtmlWebpackPlugin(getHtmlConfig('detail','商品详情页')),
new HtmlWebpackPlugin(getHtmlConfig('cart','购物车')),
new HtmlWebpackPlugin(getHtmlConfig('user-login','用户登录')),
new HtmlWebpackPlugin(getHtmlConfig('user-register','用户注册')),
new HtmlWebpackPlugin(getHtmlConfig('user-pass-reset','找回密码')),
new HtmlWebpackPlugin(getHtmlConfig('user-center','个人中心')),
new HtmlWebpackPlugin(getHtmlConfig('user-center-update','修改个人信息')),
new HtmlWebpackPlugin(getHtmlConfig('user-pass-update','修改密码')),
new HtmlWebpackPlugin(getHtmlConfig('result','操作结果')),
新建html
（文件名称）view/cart.html
以detail.html为蓝本新建
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<%= require('html-loader!./layout/head-common.html') %>
<title><%= htmlWebpackPlugin.options.title%> - MMall电商平台</title>
</head>
<body>
<%= require('html-loader!./layout/nav.html') %>
<%= require('html-loader!./layout/header.html') %>
<div class="crumb">
<div class="w">
<div class="crumb-con">
<a class="link" href="./index.html">MMall</a>
<span>></span>
<span class="link-text"><%= htmlWebpackPlugin.options.title%></span>
</div>
</div>
</div>
<div class="page-wrap w">
</div>
<%= require('html-loader!./layout/footer.html') %>
</body>
</html>
代码或结果截图：
新建js/css/string
文件：Page/cart/index.js index.css indext.string
Index.js :复制自detail/index.js的内容
并作适当改动：(删掉一些无用代码，loadDetail函数改名叫loadCart）
代码如下：
/*
* @Author: Rosen
* @Date: 2017-05-28 19:45:49
* @Last Modified by: Rosen
* @Last Modified time: 2017-05-29 18:39:01
*/
'use strict';
require('./index.css');
require('page/common/header/index.js');
var nav = require('page/common/nav/index.js');
var _mm = require('util/mm.js');
var _cart = require('service/cart-service.js');
var templateIndex = require('./index.string');
var page = {
data : {
},
init : function(){
this.onLoad();
this.bindEvent();
},
onLoad : function(){
this.loadCart();
},
bindEvent : function(){
var _this = this;
// 图片预览
$(document).on('mouseenter', '.p-img-item', function(){
var imageUrl = $(this).find('.p-img').attr('src');
$('.main-img').attr('src', imageUrl);
});
},
// 加载商品详情的数据
// 加载商品详情的数据
loadCart : function(){
var _this = this,
html = '',
$pageWrap = $('.page-wrap');
// loading
$pageWrap.html('<div class="loading"></div>');
},
// 数据匹配
filter : function(data){
}
};
$(function(){
page.init();
})
保存，然后重启服务
编写html
文件 cart.html
Cart-header部分（表头）
写购物车列表的表头
代码：
<div class="cart-header"> <table class="cart-table"> <tr> <th class="cart-cell cell-check"> <label class="cart-label"> <input type="checkbox" class="cart-select-all" /> <span>全选</span> </label> </th> <th class="cart-cell cell-info">商品信息</th> <th class="cart-cell cell-price">单价</th> <th class="cart-cell cell-count">数量</th> <th class="cart-cell cell-total">合计</th> <th class="cart-cell cell-opera">操作</th> </tr> </table> </div>
Cart-list: 表身
表身代码：
<div class="cart-list"> <table class="cart-table" > <tr> <td class="cart-cell cell-check"> <label class="cart-label"> <input type="checkbox" class="cart-select" /> </label> </td> <td class="cart-cell cell-img"> <a class="link" href=""> <img class="p-img" src="" alt="" /> </a> </td> <td class="cart-cell cell-info"> <a class="link" href="">222</a> </td> <td class="cart-cell cell-price">￥111</td> <td class="cart-cell cell-count"> 1 </td> <td class="cart-cell cell-total">￥111</td> <td class="cart-cell cell-opera"> <span class="link cart-delete">删除</span> </td> </tr> </table> </div>
为了正常显示，把JS里面的loading干掉：
// 加载商品详情的数据
loadCart : function(){
var _this = this,
html = '',
$pageWrap = $('.page-wrap');
// loading
//$pageWrap.html('<div class="loading"></div>');
},
效果：
表尾代码：
<div class="cart-footer"> <div class="select-con"> <label> <input type="checkbox" class="cart-select-all" /> <span>全选</span> </label> </div> <div class="delete-con"> <span class="link delete-selected"> <i class="fa fa-trash-o"></i> <span>删除选中</span> </span> </div> <div class="submit-con"> <span>总价：</span> <span class="submit-total">￥111</span> <span class="btn btn-submit">去结算</span> </div> </div>
效果：
编写CSS
编写css
文件：cart /index.css
/*
* @Author: Rosen
* @Date: 2017-05-30 16:51:30
* @Last Modified by: Rosen
* @Last Modified time: 2017-06-02 11:38:22
*/
.cart-table{
width: 100%;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin-bottom: 10px;
}
/* header */
.cart-header{
background: #eee;
}
.cart-header .cart-cell{
height: 40px;
line-height: 40px;
}
.cart-table .cell-check{
width: 6%;
text-align: left;
padding-left: 20px;
}
.cart-table .cell-img{
width: 10%;
text-align: left;
}
.cart-table .cell-info{
width: 35%;
text-align: left;
}
.cart-header .cell-info{
width: 45%;
padding-left: 106px;
}
.cart-table .cell-price{
width: 10%;
text-align: center;
}
.cart-table .cell-count{
width: 15%;
text-align: center;
}
.cart-table .cell-total{
width: 14%;
text-align: center;
font-weight: bold;
}
.cart-table .cell-opera{
width: 10%;
text-align: center;
}
效果：
填充具体的图片和商品信息
Cart.html:
<td class="cart-cell cell-img"> <a class="link" href=""> <img class="p-img" src="http://img.happymmall.com/0093f5d3-bdb4-4fb0-bec5-5465dfd26363.jpeg" alt="" /> </a> </td>
补充图片和商品的样式
.cart-table .cell-img .p-img{
margin: 10px 0;
width: 80px;
height: 80px;
border: 1px solid #ddd;
}
效果图：
