订单确认页的开发（UI）1

来自CloudWiki
跳转至： 导航， 搜索

模块初始化

修改配置文件

文件：webpack.config.js 

var config = {
    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'],
        "order-confirm":['./src/page/order-confirm/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('order-confirm','订单确认页')),
        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','操作结果')),


新建目录及文件

在page下新建目录order-confirm，然后新建文件index.css,index.js ,index.string


在view下新建order-confirm .html（以cart.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>

编写订单确认页面

编写html整体结构

文件：order-confirm.html 

<div class="page-wrap w">
            <div class="panel">
                <h1 class="panel-title">收货地址</h1>
                <div class="panel-body address-con">
                    
                </div>
            </div>
            <div class="panel">
                <h1 class="panel-title">商品清单</h1>
                <div class="panel-body product-con">
                    
                </div>
            </div>
	    </div>

设置html的样式

文件order-confirm/index.js 

/*
* @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');
require('page/common/nav/index.js');
var _mm             = require('util/mm.js');
var _order          = require('service/order-service.js');
var templateIndex   = require('./index.string');


补充服务端接口文件

文件order-service.js 

'use strict';
var _mm = require('util/mm.js');

var _order = {
    // 获取商品列表
    getProductList : function(resolve, reject){
        _mm.request({
            url     : _mm.getServerUrl('/order/get_order_cart_product.do'),
            success : resolve,
            error   : reject
        });
    },
    
}
module.exports = _order;

重启服务

效果图：

Web8-1.png

编写收货地址部分

编写地址框

Order-confirm.html 

<div class="panel">
                <h1 class="panel-title">收货地址</h1>
                <div class="panel-body address-con">
                        
                    <div class="address-item" ">
                        
                        <div class="address-title">
                               山东 济南（ 马欣） 收 ）
                        </div>
                        <div class="address-detail">
                                济南市旅游路4516号
                        </div>
                        <div class="address-opera">
                                <span class="link address-update">编辑</span>
                                <span class="link address-delete">删除</span>
                        </div>
                    </div>

                    <div class="address-item" ">
                        
                        <div class="address-title">
                               山东 济南（ 马欣） 收 ）
                        </div>
                        <div class="address-detail">
                                济南市旅游路4516号
                        </div>
                        <div class="address-opera">
                                <span class="link address-update">编辑</span>
                                <span class="link address-delete">删除</span>
                        </div>
                    </div>
                        
                                              
                </div>                    
            </div>

同样的地址栏代码(address-item)复制上一个。

编写‘添加地址框’

Order-confirm.html 

<div class="address-add">
                        <div class="address-new">
                            <i class="fa fa-plus"></i>
                            <div class="text">使用新地址</div>
                        </div>
                    </div>

效果图：

Web8-2.png

编写商品清单部分

Order-confirm.html 

<table class="product-table">
                            <tr>
                                <th class="cell-img"> </th>
                                <th class="cell-info">商品描述</th>
                                <th class="cell-price">价格</th>
                                <th class="cell-count">数量</th>
                                <th class="cell-total">小计</th>
                            </tr>
                            
                            <tr>
                                <td class="cell-img">
                                    <a href="http://localhost:8088/dist/view/detail.html?productId=72" target="_blank">
                                        <img class="p-img" src="http://img.happymmall.com/af13decd-5999-4ef8-a1f4-be2e975012ff.jpg" alt="apple iphoneX" />
                                    </a>
                                </td>
                                <td class="cell-info">
                                    <a class="link" href="http://localhost:8088/dist/view/detail.html?productId=72" target="_blank">Apple iphoneX</a>
                                </td>
                                <td class="cell-price">￥111</td>
                                <td class="cell-count">2</td>
                                <td class="cell-total">￥111</td>
                            </tr>
                            
                            <tr>
                                <td class="cell-img">
                                    <a href="http://localhost:8088/dist/view/detail.html?productId=72" target="_blank">
                                        <img class="p-img" src="http://img.happymmall.com/af13decd-5999-4ef8-a1f4-be2e975012ff.jpg" alt="apple iphoneX" />
                                    </a>
                                </td>
                                <td class="cell-info">
                                    <a class="link" href="http://localhost:8088/dist/view/detail.html?productId=72" target="_blank">Apple iphoneX</a>
                                </td>
                                <td class="cell-price">￥111</td>
                                <td class="cell-count">2</td>
                                <td class="cell-total">￥111</td>
                            </tr>
                    </table>

商品清单的tr标签再复制一行，以便看出间隔。

效果图：

Web8-3.png

给收货地址设定样式

给地址框设置样式

文件order-confirm: index.css 

/* 地址部分的样式 */
.address-item,
.address-add{
    margin:20px 20px 0 0;
    width: 200px;
    padding: 5px 8px;
    float: left;
    border: 3px dashed #ccc;
    cursor: pointer;
}

.address-item .address-title{
    color: #666;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    border-bottom: 1px solid #ddd;
}
.address-item .address-detail{
    margin-top: 5px;
    height: 40px;
    line-height: 20px;
    overflow: hidden;
    color: #666;
}


设定按钮的样式： 

.address-item .address-opera{
    text-align: right;
    /*visibility: hidden;*/
}

.address-item .address-opera .link{
    margin-right: 5px;
}

效果图：

Web8-4.png

设置增加地址样式

文件order-confirm: index.css 

.address-add .address-new{
    padding: 8px 0;
    text-align: center;
    color: #ccc;
}
.address-add .address-new .fa{
    font-size: 50px;
line-height: 50px;
font-style:normal;
}
.address-add .address-new .text{
    font-size: 12px;
}

看一下别的框的高度,,然后调整和他们等高：

Web8-5.png

Web8-6.png

设置动态效果

Order-confrim/index.css

鼠标悬停效果： 

.address-item:hover,
.address-add:hover{
    background: #fafafa;
}


设置按钮隐藏： 

.address-item .address-opera{
    text-align: right;
    visibility: hidden;
}
.address-item:hover .address-opera{
    visibility: visible;
}

设置地址激活样式： 

.address-item.active{
    border: 3px dashed #c60023;
}

局部调整hover的样式的方法：

Web8-7.png

效果图：

Web8-8.png

取自“http://www.openbrains.net/mediawiki/index.php?title=订单确认页的开发（UI）1&oldid=11255”