m

@@ -4,8 +4,10 @@
 
 'use strict';
 
+const co = require('bluebird').coroutine;
 const service = require('../models/cart-service');
 const helper = require('../models/cart-helper');
+const ghelper = require('../../guang/models/guang-helper');
 const simpleHeaderModel = require('../../../doraemon/models/simple-header');
 
 const getProductInfo = (req, res, next) => {
@@ -18,6 +20,27 @@ const getProductInfo = (req, res, next) => {
     }).catch(next);
 };
 
+
+/**
+ * 设置购物车COOKIE信息
+ */
+const setShoppingCookie = (req) => {
+
+    let uid = req.user.uid || true;
+    let shoppingKey = helper.getShoppingKeyByCookie(req);
+
+    return service.getCartCount(uid, shoppingKey).then(ret => {
+        if (ret && ret.data && ret.data.cart_goods_count) {
+            req.cookies('_g', {
+                _k: shoppingKey,
+                _nac: ret.data.cart_goods_count,
+                _ac: 0,
+                _r: 1
+            });
+        }
+    });
+};
+
 /**
  * 我的购物车
  */
@@ -27,6 +50,10 @@ const cart = (req, res, next) => {
     let shoppingKey = helper.getShoppingKeyByCookie(req);
     let cartDelList = req.cookies['cart-del-list'];
 
+    if (cartDelList) {
+        req.cookies['cart-del-list'] = '';
+    }
+
     service.getCartData(uid, shoppingKey, cartDelList)
         .then(ret => {
             console.log(JSON.stringify(ret));
@@ -48,6 +75,35 @@ const cart = (req, res, next) => {
  */
 const cartAdd = () => {
 
+    co(function * (){
+        let uid = req.user.uid;
+        let shoppingKey = helper.getShoppingKeyByCookie(req);
+        let productSku = req.body.productSku;
+        let buyNumber = req.body.buyNumber || 1;
+        let goodsType = req.body.goodsType || 0;
+        let promotionId = req.body.promotionId || 0
+        let isEdit = req.body.isEdit || 0;
+
+        let result = yield service.addToCart(productSku, buyNumber, goodsType, isEdit, promotionId, uid, shoppingKey);
+
+        // 设置加入购物车凭证到客户端浏览器
+        if(!shoppingKey && result && result.data && result.data.shopping_key) {
+            // req.cookies['_SPK'] = result.data.shopping_key
+            //$this->setCookie('_SPK', $result['data']['shopping_key'], time() + 86400 * 360);
+        }
+
+        // 老站购物车需要的COOKIE
+        if (result && result.data && result.data.shopping_key) {
+            /*$this->setCookie('_g', json_encode(array(
+             '_k' => $result['data']['shopping_key'],
+             '_nac' => $result['data']['goods_count'],
+             '_ac' => 0,
+             '_r' => 1
+             )));*/
+        }
+
+        res.send(result);
+    });
 };
 
 /**
@@ -55,63 +111,162 @@ const cartAdd = () => {
  */
 const cartTotal = () => {
 
-};
+    co(function * (){
 
-/**
- * 设置购物车COOKIE信息
- */
-const setShoppingCookie = () => {
+        let uid = req.user.uid;
+        let shoppingKey = helper.getShoppingKeyByCookie(req);
+        let callback = req.query.callback;
+        let ret = yield service.getCartCount(uid, shoppingKey);
 
+        return res.send(callback + '(' + JSON.stringify(ret) + ')');
+    });
 };
 
 /**
  * 购物车商品选择与取消
  */
-const selectProduct = () => {
+const selectProduct = (req, res) => {
 
+    let uid = req.user.uid;
+    let productId = req.body.skuList;
+    let hasPromotion = req.body.hasPromotion || false;
+    let shoppingKey = helper.getShoppingKeyByCookie(req);
+
+    service.selectGoods(uid, productId, shoppingKey, hasPromotion)
+        .then(ret => {
+            res.send(ret);
+        }).catch(() => {
+            res.send({
+                code: 400
+            });
+        });
 };
 
 /**
  * 修改购物车商品数量
  */
-const modifyProduct = () => {
+const modifyProduct = (req, res) => {
+
+    let uid = req.user.uid;
+    let shoppingKey = helper.getShoppingKeyByCookie(req);
+    let sku = req.body.sku;
+    let increaseNum = req.body.increaseNum || null;
+    let decreaseNum = req.body.decreaseNum || null;
 
+    return service.modifyProductNum(uid, sku, increaseNum, decreaseNum, shoppingKey)
+        .then(ret => {
+            if (ret && ret.code === 200) {
+                return setShoppingCookie().then(() => {
+                    return res.send(ret);
+                });
+            }
+        })
+        .catch(next);
 };
 
 /**
  * 移出购物车
  */
-const removeProduct = () => {
+const removeProduct = (req, res) => {
+
+    co(function * (){
+        let uid = req.user.uid;
+        let shoppingKey = helper.getShoppingKeyByCookie(req);
+        let skuList = req.body.skuList;
+        let hasPromotion = true;
+
+        let ret = yield service.removeFromCart(uid, shoppingKey, skuList, hasPromotion);
 
+        if(ret && ret.code === 200) {
+            yield setShoppingCookie();
+        }
+
+        return res.send(ret);
+    });
 };
 
 /**
  * 移入收藏夹
  * 支持批量移入收藏夹
  */
-const moveToFav = () => {
+const moveToFav = (req, res) => {
+
+    co(function * (){
+        let uid = req.user.uid;
+        // let shoppingKey = helper.getShoppingKeyByCookie(req);
+        let skuList = req.body.skuList;
+        let hasPromotion = req.body.hasPromotion || false;
+
+        let ret = yield service.addToFav(uid, skuList, hasPromotion);
 
+        if(ret && ret.code === 200) {
+            yield setShoppingCookie();
+        }
+
+        return res.send(ret);
+    });
 };
 
 /**
  * 检查是否收藏
  */
-const checkFav = () => {
+const checkFav = (req, res) => {
+
+    co(function * (){
+
+        let uid = req.user.uid;
+        let pids = req.body.pidList;
+        let ret = {
+            code: 200,
+            message: '是否收藏',
+            data: {}
+        };
 
+        ret.data = yield service.checkUserIsFav(uid, pids);
+
+        return res.send(ret);
+    });
 };
 
 /**
  * 凑单商品异步请求
  */
-const getTogetherProduct = () => {
+const getTogetherProduct = (req, res) => {
+
+    co(function * (){
+
+        let page = req.query.page;
+        /*let ret = {
+            code: 200,
+            message: '凑单商品'
+        };*/
 
+        ret = yield service.getTogetherProduct(page);
+
+        return res.send(ret);
+    });
 };
 
 /**
  * 为你优选商品异步请求
  */
-const getRecommendProductAction = () => {
+const getRecommendProductAction = (req, res) => {
+
+    co(function * (){
+
+        let channel = req.yoho.channel;
+        let uid = req.user.uid;
+        let udid = ghelper.getUdid(req, res);
+        let page = req.query.page;
+
+        if(page === '6') {
+            page = 1;
+        }
+
+        let ret = yield service.getRecommendProduct(channel, uid, udid, page);
 
+        res.send(ret);
+    });
 };
 
 module.exports = {

 /**
  * 订单结算controller
- * @author: xuqi<qi.xu@yoho.cn>
- * @date: 2016/8/26
+ * @author: yyq<yanqing.yang@yoho.cn>
+ * @date: 2016/12/21
  */
 
 'use strict';

@@ -6,13 +6,30 @@
 'use strict';
 
 const _ = require('lodash');
+const pinyin = require('pinyin');
 
 const crypto = global.yoho.crypto;
 
 const addressApi = require('../models/address-api');
 
+const worldSort = 'abcdefghtjklmnopqrstuvwxyz';
+
 const getAreaListData = (id) => {
-    return addressApi.getAreaListAsync(id);
+    return addressApi.getAreaListAsync(id).then(result => {
+        let list = _.get(result, 'data', []);
+
+        if (id * 1 === 0 && list.length) {
+            _.forEach(list, value => {
+                value.initial = _.get(pinyin(value.caption, {
+                    style: pinyin.STYLE_FIRST_LETTER
+                }), '[0][0]', 'w');
+                value.pySort = _.indexOf(worldSort, value.initial);
+            });
+            result.data = list;
+        }
+
+        return result;
+    });
 };
 
 const getAddressListData = (uid) => {

@@ -384,7 +384,92 @@ const getCartData = (uid, shoppingKey, cartDelList) => {
     });
 };
 
+const getCartCount = (uid, shoppingKey) => {
+
+    return Promise.resolve({
+        uid,
+        shoppingKey
+    });
+};
+
+const addToCart = (productSku, buyNumber, goodsType, isEdit, promotionId, uid, shoppingKey) => {
+
+    return Promise.resolve({
+        productSku,
+        buyNumber,
+        goodsType,
+        isEdit,
+        promotionId,
+        uid,
+        shoppingKey
+    });
+};
+
+const selectGoods = (uid, productId, shoppingKey, hasPromotion) => {
+
+    return Promise.resolve({
+        uid,
+        productId,
+        shoppingKey,
+        hasPromotion
+    });
+};
+
+const modifyProductNum = (uid, sku, increaseNum, decreaseNum, shoppingKey) => {
+    return Promise.resolve({
+        uid,
+        sku,
+        increaseNum,
+        decreaseNum,
+        shoppingKey
+    });
+};
+
+const removeFromCart = (uid, shoppingKey, skuList, hasPromotion) => {
+
+    return Promise.resolve({
+        uid,
+        shoppingKey,
+        skuList,
+        hasPromotion
+    });
+};
+
+const addToFav = (uid, skuList, hasPromotion) => {
+
+    return Promise.resolve({
+        uid,
+        skuList,
+        hasPromotion
+    });
+};
+
+const checkUserIsFav = (uid, pids) => {
+    return Promise.resolve({
+        uid,
+        pids
+    });
+};
+
+const getRecommendProduct = (channel, uid, udid, page) => {
+
+    return Promise.resolve({
+        channel,
+        uid,
+        udid,
+        page
+    });
+};
+
 module.exports = {
     getProductInfoAsync, // 获取某一个商品详情主页面
-    getCartData
+    getCartData,
+    getCartCount,
+    addToCart,
+    selectGoods,
+    modifyProductNum,
+    removeFromCart,
+    addToFav,
+    checkUserIsFav,
+    getRecommendProduct
 };

@@ -22,7 +22,7 @@ router.post('/address/delete', address.delAddress); // 删除地址
 router.post('/address/save', address.saveAddress); // 新增地址/更新地址
 router.post('/address/setdefault', address.setDefault); // 设置默认地址
 
-router.get('/orderensure', ensure.index); // 限购商品快捷结算页
+router.get('/ensure', ensure.index); // 限购商品快捷结算页
 
 router.get('/easypay', easypay.index); // 限购商品快捷结算页
 router.post('/easypay/compute', easypay.compute); // 价格重新计算

@@ -4,70 +4,72 @@
             {{> shopping-step}}
         </div>
 
-        <div class="info-block-wrap">
-            <p class="block-title">收货信息<span class="right">新增收货地址></span></p>
-            <div class="address-wrap">
-                <div class="addr-list clearfix">
-                    {{# deliveryAddress}}
-                        <div class="addr-item{{#isY is_default}} addr-default{{/isY}}" data-id="{{id}}" data-mobile="{{mobile}}"{{#isY is_delivery}} data-delivery="1"{{/isY}}>
+        <div class="address-wrap">
+            <div class="block-title">收货信息<span id="new-address-btn" class="right">新增收货地址 +</span></div>
+            <div class="addr-list clearfix">
+                {{# deliveryAddress}}
+                    <div class="addr-item{{#isY is_default}} addr-default{{/isY}}" data-id="{{id}}" data-mobile="{{mobile}}"{{#isY is_delivery}} data-delivery="1"{{/isY}}>
+                        <p class="name">
+                            {{consignee}}
+                            <span class="right">{{mobile}}</span>
+                        </p>
+                        <p class="area">
+                            <span>{{area}}</span>
+                        </p>
+                        <p class="street">{{address}}</p>
+                        <p class="option">
                             <label class="set-default">设为默认</label>
                             <label class="default-tip">默认地址</label>
-                            <p class="name">{{consignee}} {{mobile}} {{phone}}</p>
-                            <p class="area">{{area}}</p>
-                            <p class="street">{{address}}</p>
-                            <p class="option">
-                                <span>修改</span>
-                                <span>删除</span>
-                            </p>
-                        </div>
-                    {{/ deliveryAddress}}
-                </div>
-                <p class="addr-opt">
-                    <span class="more-addr-btn">显示全部地址<i class="iconfont">&#xe60b;</i></span>
-                </p>
-            </div>
-            <p class="block-title">支付方式</p>
-            <div class="pay-wrap">
-                {{#each paymentWay}}
-                    <p>
-                        <label class="check-btn{{#isY default}} checked{{/isY}}" data-id="{{payment_id}}" data-type="{{payment_type}}" data-name="{{payment_type_name}}">{{payment_type_name}}</label>
-                        {{#isEqual payment_type 1}}
-                            <span>支持主流银行卡、微信、支付宝、银联等平台付款，方便快捷</span>
-                        {{/isEqual}}
-                        {{#isEqual payment_type 2}}
-                            <span>送货上门后再付款</span>
-                        {{/isEqual}}
-                    </p>
-                {{/each}}
+                            <span>修改</span>
+                            <span>删除</span>
+                        </p>
+                    </div>
+                {{/ deliveryAddress}}
             </div>
-            <p class="block-title">配送方式</p>
-            <div class="delivery-way-wrap">
-                {{# deliveryWay}}
-                    <p>
-                        <label class="check-btn{{#isY default}} checked{{/isY}}" data-id="{{delivery_way_id}}"
-                        title="{{delivery_way_name}}：运费 ¥ {{delivery_way_cost}}">{{delivery_way_name}}：运费 ¥ {{delivery_way_cost}}</label>
-                        {{#isEqual delivery_way_id 2}}
-                            <span>您所选择的区域暂不在支持顺丰派送范围内，点击<a href="＃">查看详情></a> </span>
-                        {{/isEqual}}
-                    </p>
-                {{/ deliveryWay}}
-                <p class="default-line">注：配送会由于天气，交通等不可抗拒的客观因素造成您收货时间延迟，请您知悉。</p>
-            </div>
-            <p class="block-title">送货时间</p>
-            <div class="delivery-time-wrap">
+            <p class="addr-opt">
+                <span class="more-addr-btn">显示全部地址<i class="iconfont">&#xe60b;</i></span>
+            </p>
+        </div>
+
+        <div class="pay-wrap">
+            <div class="block-title">支付方式</div>
+            {{#each paymentWay}}
                 <p>
-                    {{# deliveryTime}}
-                        <label class="check-btn{{#isY default}} checked{{/isY}}" data-id="{{delivery_time_id}}" data-name="{{delivery_time_string}}" title="{{delivery_time_string}}">{{delivery_time_string}}</label>
-                    {{/ deliveryTime}}
+                    <label class="check-btn{{#isY default}} checked{{/isY}}" data-id="{{payment_id}}" data-type="{{payment_type}}" data-name="{{payment_type_name}}">{{payment_type_name}}</label>
+                    {{#isEqual payment_type 1}}
+                        <span>支持主流银行卡、微信、支付宝、银联等平台付款，方便快捷</span>
+                    {{/isEqual}}
+                    {{#isEqual payment_type 2}}
+                        <span>限量商品、预售商品、化妆品或者订单金额超过10000元不可以选择</span>
+                    {{/isEqual}}
                 </p>
-                <p class="contract-me">
-                    送货前是否联系：
-                    <label class="radio-btn" data-id="1">是</label>
-                    <label class="radio-btn on" data-id="0">否</label>
-                    <span class="tips">（您需要特定时间配送可以选择哦！）</span>
+            {{/each}}
+        </div>
+        <div class="delivery-way-wrap">
+            <div class="block-title">配送方式</div>
+            {{# deliveryWay}}
+                <p>
+                    <label class="check-btn{{#isY default}} checked{{/isY}}" data-id="{{delivery_way_id}}"
+                    title="{{delivery_way_name}}：运费 ¥ {{delivery_way_cost}}">{{delivery_way_name}}：运费 ¥ {{delivery_way_cost}}</label>
+                    {{#isEqual delivery_way_id 2}}
+                        <span>您所选择的区域暂不在支持顺丰派送范围内，点击<a href="＃">查看详情></a> </span>
+                    {{/isEqual}}
                 </p>
-            </div>
-            <p class="block-title">订单商品信息<span class="right">返回购物车修改></span></p>
+            {{/ deliveryWay}}
+            <p class="default-line">注：配送会由于天气，交通等不可抗拒的客观因素造成您收货时间延迟，请您知悉。</p>
+        </div>
+        <div class="delivery-time-wrap">
+            <div class="block-title">送货时间</div>
+            <p>
+                {{# deliveryTime}}
+                    <label class="check-btn{{#isY default}} checked{{/isY}}" data-id="{{delivery_time_id}}" data-name="{{delivery_time_string}}" title="{{delivery_time_string}}">{{delivery_time_string}}</label>
+                {{/ deliveryTime}}
+            </p>
+            <p class="default-line">温馨提示：快递公司会尽力按您选择的送货时间配送，如遇特殊情况（天气、环境等）无法按您要求的时间配送，请您谅解！</p>
+        </div>
+
+        <div class="goods-wrap">
+            <div class="block-title">订单商品信息<span class="right">返回购物车修改 ></span></div>
             <table class="goods-table">
                 <thead>
                     <tr>
@@ -98,7 +100,7 @@
                             </a>
                         </td>
                         <td class="border-top color-size">
-                            颜色：<span class="color">{{color_name}}</span> 
+                            颜色：<span class="color">{{color_name}}</span>
                             尺码：<span class="size">{{size_name}}</span>
                         </td>
                         <td class="border-top price">¥ {{round last_vip_price 2}}</td>
@@ -108,18 +110,22 @@
                 {{/each}}
                 </tbody>
             </table>
-            <div class="extra-wrap">
-                <dl>
-                    <dt>使用YOHO币</dt>
-                    <dd></dd>
-                    <dt>使用红包</dt>
-                    <dd></dd>
-                    <dt>索要发票</dt>
-                    <dd></dd>
-                    <dt>添加备注信息</dt>
-                    <dd></dd>
-                </dl>
-            </div>
+        </div>
+        <div class="invoice-wrap">
+            <div class="block-title">发票信息</div>
+            <p>
+                <label class="radio-btn">发票开具</label>
+            </p>
+        </div>
+        <div class="extra-wrap">
+            <dl>
+                <dt>使用YOHO币</dt>
+                <dd></dd>
+                <dt>使用红包</dt>
+                <dd></dd>
+                <dt>添加备注信息</dt>
+                <dd></dd>
+            </dl>
         </div>
         {{# shoppingCartData}}
         <div class="balance-wrap">
@@ -128,7 +134,7 @@
                     <li class="promotion-item">
                         {{#if @first}}
                             <a class="gain-coin-tip" href="/help/?category_id=87" target="_blank"></a>
-                            <span>共返YOHO币：{{../gain_yoho_coin}}个</span>
+                            <span class="back-coin">共返YOHO币：{{../gain_yoho_coin}}个</span>
                             <span class="total-num"><i>{{../selected_goods_count}}</i>件商品</span>
                         {{/if}}
                         <span class="promotion-name">{{promotion}}：</span>
@@ -147,5 +153,7 @@
             <button id="order-submit">提交订单</button>
         </div>
         {{/ shoppingCartData}}
+
+        {{> ensure-tpl}}
     {{/ content}}
-</div>
\ No newline at end of file
+</div>

+
+
+<script id="address-tpl" type="text/html">
+    <div class="title">\{{title}}</div>
+    <p class="prompt">\{{title}}、电话为选填项，其他均为必填项</p>
+    <ul class="info-wrap">
+        <li>
+            <span class="left-rd"><i class="red">*</i>收货人：</span>
+            <input type="text" name="consignee" value="\{{name}}" placeholder="请输入您的姓名">
+            <p class="caveat-tip"></p>
+        </li>
+        <li>
+            <span class="left-rd"><i class="red">*</i>所在区域：</span>
+            <div class="area-box">
+                <span>请选择省市区</span>
+                <span class="area-text"></span>
+                <div class="area-select">
+                    <ul class="clearfix">
+                        <li class="area-sel-tab tab-on">
+                            省份
+                            <div class="province-list opt-list"></div>
+                        </li>
+                        <li class="area-sel-tab">
+                            城市
+                            <div class="city-list opt-list">
+
+                            </div>
+                        </li>
+                        <li class="area-sel-tab">
+                            区县
+                            <div class="area-list opt-list">
+
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <p class="caveat-tip"></p>
+        </li>
+        <li>
+            <span class="left-rd"><i class="red">*</i>详细地址：</span>
+            <input type="text" name="address" value="\{{name}}" placeholder="街道名称或小区名称">
+            <p class="caveat-tip"></p>
+        </li>
+        <li>
+            <span class="left-rd"><i class="red">*</i>手机号码：</span>
+            <input type="text" name="mobile" value="\{{name}}" placeholder="请输入手机号码（重要必填）">
+            <p class="caveat-tip"></p>
+        </li>
+        <li>
+            <span class="left-rd">电话号码：</span>
+            <input type="text" name="tel" value="\{{name}}" placeholder="请输入电话号码（选填）">
+            <p class="caveat-tip"></p>
+        </li>
+        <li>
+            <span class="left-rd"></span>
+            <label class="radio-btn">设置为默认收货地址</label>
+        </li>
+    </ul>
+</script>

@@ -55,6 +55,7 @@
     "passport-sina": "^0.1.0",
     "passport-strategy": "1.x.x",
     "passport-weixin": "^0.1.0",
+    "pinyin": "^2.8.0",
     "request-ip": "^1.2.2",
     "request-promise": "^3.0.0",
     "serve-favicon": "^2.3.0",

@@ -14,9 +14,9 @@ var payWay,
 
 
 
-$('.sale-info').mouseover(function(){
-    $(this).addClass("active").children('ul').removeClass('none');
-})
+$('.sale-info').mouseover(function() {
+    $(this).addClass('active').children('ul').removeClass('none');
+});
 
 
 // var cart = {};

@@ -11,6 +11,8 @@ var order = {};
 var payWay,
     deliveryWay;
 
+require('./order-new/address');
+
 // 支付方式
 payWay = {
     $payType: $('.pay-wrap .check-btn'),

 /**
  * 订单结算页
  * @author: yyq<yanqing.yang@yoho.cn>
- * @date: 2016/11/30
+ * @date: 2016/12/20
  */
 
-// var $ = require('yoho-jquery');
+var $ = require('yoho-jquery');
+var hbs = require('yoho-handlebars');
+var area = require('./areaSelect');
+var dialog = require('../../common/dialog');
+var Dialog = dialog.Dialog;
+
+// var Confirm = dialog.Confirm;
+// var Alert = dialog.Alert;
+
+var addressTpl = hbs.compile($('#address-tpl').html());
+
+Dialog.prototype.packageInfo = function() {
+    var data = {};
+    var province = this.$el.find('.province').val(),
+        city = this.$el.find('.city').val(),
+        country = this.$el.find('.country').val();
+
+    this.$el.find('input').each(function() {
+        var $this = $(this),
+            key = $this.attr('name');
+
+        if (key) {
+            data[key] = $.trim($this.val());
+        }
+    });
+
+    data.areacode = '' + province + city + country;
+
+    if (this.$el.find('.radio-btn.on').length) {
+        data.setDefault = true;
+    }
+
+    return data;
+};
+
+function validateAddress(data) {
+    var regx = {
+            consignee: /^[\u4e00-\u9fa5]{2,5}$/,
+            areacode: /^[0-9]{6}$/,
+            mobile: /^\d{3}(\d{4}|\*{4})\d{1,8}$/,
+            tel: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/
+        },
+        pass = true,
+        i;
+
+    data = data || {};
+    for (i in data) {
+        if (data.hasOwnProperty(i) &&
+            regx[i] &&
+            !regx[i].test(data[i])) {
+            pass = false;
+        }
+    }
+
+    return pass;
+}
+
+function bindOperateEvent($el) {
+    var $province = $el.find('.province'),
+        $city = $el.find('.city'),
+        $country = $el.find('.country');
+
+    $el.on('change', 'input[name="consignee"]', function() {
+        var $this = $(this);
+        var val = $.trim($this.val());
+
+        if (!val) {
+            $this.siblings('.caveat-tip').text('收货人不能为空').show();
+        } else if (!validateAddress({consignee: val})) {
+            $this.siblings('.caveat-tip').text('收货人姓名至少2个中文，最多5个中文').show();
+        } else {
+            $this.siblings('.caveat-tip').empty().hide();
+        }
+    }).on('change', '.country', function() {
+        var code = '' + $province.val() + $city.val() + $country.val();
+
+        if (!validateAddress({areacode: code})) {
+            $province.parent().siblings('.caveat-tip').show().text('请选择省市县').prev().hide();
+        } else {
+            $province.parent().siblings('.caveat-tip').empty().hide().prev().show();
+        }
+    }).on('change', 'input[name="address"]', function() {
+        var $this = $(this);
+        var val = $.trim($this.val());
+
+        if (!val) {
+            $this.siblings('.caveat-tip').text('收货地址不能为空').show();
+        } else {
+            $this.siblings('.caveat-tip').empty().hide();
+        }
+        $country.trigger('change');
+    }).on('change', 'input[name="mobile"]', function() {
+        var $this = $(this);
+        var val = $.trim($this.val());
+
+        if (!val) {
+            $this.siblings('.caveat-tip').text('手机号码不能为空').show();
+        } else if (!validateAddress({mobile: val})) {
+            $this.siblings('.caveat-tip').text('您输入的手机号码格式不正确').show();
+        } else {
+            $this.siblings('.caveat-tip').empty().hide();
+        }
+    }).on('change', 'input[name="tel"]', function() {
+        var $this = $(this);
+        var val = $.trim($this.val());
+
+        if (val && !validateAddress({tel: val})) {
+            $this.siblings('.caveat-tip').text('您输入的电话格式不正确').show();
+        } else {
+            $this.siblings('.caveat-tip').empty().hide();
+        }
+    }).on('click', '.radio-btn', function() {
+        $(this).toggleClass('on');
+    });
+}
+
+function newEditAddress(info) {
+    var addDia = new Dialog({
+        content: addressTpl({
+            title: '新增地址'
+        }),
+        className: 'ope-address-dialog',
+        btns: [{
+            id: 'save',
+            name: '保存',
+            btnClass: ['black'],
+            cb: function() {
+                var data = addDia.packageInfo();
+
+                if (!validateAddress(data)) {
+                    addDia.$el.find('input').trigger('change');
+                    return;
+                }
+
+                if (info.id) {
+                    data.id = info.id;
+                }
+
+                console.log(data);
+            }
+        }, {
+            id: 'cancel',
+            name: '取消',
+            btnClass: ['btn-close']
+        }]
+    }).show();
+
+    area.init(addDia.$el, 0);
+    bindOperateEvent(addDia.$el);
+}
+
+$('#new-address-btn').click(function() {
+    newEditAddress();
+});
 

+/**
+ * 三级地址联动
+ * @author: yyq<yanqing.yang@yoho.cn>
+ * @date: 2016/12/22
+ */
+var $ = require('yoho-jquery');
+
+var areaSelect = {
+    init: function($el, area) {
+        this.$el = $el;
+        this.$areaText = $el.find('.area-text');
+        this.$provinceList = $el.find('.province-list');
+        this.$cityList = $el.find('.city-list');
+        this.$areaList = $el.find('.area-list');
+
+        this.bindEvent();
+        this.getAreaList(area || 0);
+    },
+    bindEvent: function() {
+        var that = this;
+
+        this.$el.on('click', '.area-sel-tab', function(event) {
+            var $this = $(event.target);
+
+            if (!$this.hasClass('area-sel-tab') || $this.hasClass('tab-on')) {
+                return;
+            }
+
+            $this.siblings('.area-sel-tab').removeClass('tab-on');
+            $this.addClass('tab-on');
+        }).on('click', '.area-box > span', function() {
+            that.$areaText.addClass('on-edit');
+        });
+
+        this.$provinceList.on('click', 'span', function() {
+            var $this = $(this),
+                data = $this.data();
+
+            if ($this.hasClass('on')) {
+                return;
+            }
+
+            that.$provinceList.find('.on').removeClass('on');
+            $this.addClass('on');
+            that.setOptionList('city');
+            that.setOptionList('area');
+            that.getAreaList(data.id || 0);
+            that.province = data;
+            that.$areaText.text(data.text || '');
+        });
+
+        this.$cityList.on('click', 'span', function() {
+            var $this = $(this),
+                data = $this.data();
+
+            if ($this.hasClass('on')) {
+                return;
+            }
+
+            $this.siblings('.on').removeClass('on');
+            $this.addClass('on');
+            that.setOptionList('area');
+            that.getAreaList(data.id || 0);
+            that.city = data;
+            that.$areaText.text((that.province.text || '') + ' / ' + (data.text || ''));
+        });
+
+        this.$areaList.on('click', 'span', function() {
+            var $this = $(this),
+                data = $this.data();
+
+            that.$areaText.removeClass('on-edit');
+
+            if ($this.hasClass('on')) {
+                return;
+            }
+
+            $this.siblings('.on').removeClass('on');
+            $this.addClass('on');
+            that.area = data;
+            that.$areaText.text((that.province.text || '') + ' / ' + (that.city.text || '') +
+                ' / ' + (data.text || ''));
+
+        });
+    },
+    getAreaList: function(id, select) {
+        var that = this;
+
+        if (id === 0 && this.provinceGroup) {
+            return this.setOptionList('province', this.provinceGroup, select);
+        }
+
+        $.ajax({
+            type: 'GET',
+            url: '/cart/address/area',
+            data: {
+                id: id
+            }
+        }).then(function(data) {
+            var info = data.data,
+                type = 'province';
+            var i, idString;
+
+            if (data.code !== 200) {
+                return;
+            }
+
+            idString = id.toString();
+
+            if (idString.length === 2) {
+                type = 'city';
+            } else if (idString.length === 4) {
+                type = 'area';
+            }
+
+            info = data.data;
+
+            if (id === 0) {
+                that.provinceGroup = {
+                    'A-G': [],
+                    'H-K': [],
+                    'L-S': [],
+                    'T-Z': []
+                };
+                for (i = 0; i < info.length; i++) {
+                    if (info[i].pySort < 7) {
+                        that.provinceGroup['A-G'].push(info[i]);
+                    } else if (info[i].pySort < 11) {
+                        that.provinceGroup['H-K'].push(info[i]);
+                    } else if (info[i].pySort < 19) {
+                        that.provinceGroup['L-S'].push(info[i]);
+                    } else {
+                        that.provinceGroup['T-Z'].push(info[i]);
+                    }
+                }
+
+                return that.setOptionList(type, that.provinceGroup, select);
+            }
+            return that.setOptionList(type, info, select);
+        });
+    },
+    setOptionList: function(type, data) {
+        var _h = '', i, j;
+
+        if (type === 'province') {
+            data = data || {};
+            for (i in data) {
+                if (data.hasOwnProperty(i)) {
+                    _h += '<p><label class="group-title">' + i + '</label>';
+                    for (j = 0; j < data[i].length; j++) {
+                        _h += '<span class="ai-' + data[i][j].id + '" data-id="' + data[i][j].id +
+                            '" data-text="' + data[i][j].caption + '">' +
+                            (data[i][j].is_support_express === 'Y' ? '*' : '') + data[i][j].caption + '</span>';
+                    }
+                    _h += '</p>';
+                }
+            }
+            this.$provinceList.html(_h);
+        } else {
+            data = data || [];
+            for (j = 0; j < data.length; j++) {
+                _h += '<span class="ai-' + data[j].id + '" data-id="' + data[j].id +
+                '" data-text="' + data[j].caption + '">' +
+                (data[j].is_support_express === 'Y' ? '*' : '') + data[j].caption + '</span>';
+            }
+
+            if (type === 'city') {
+                this.city = {};
+                this.$cityList.html(_h);
+            } else {
+                this.area = {};
+                this.$areaList.html(_h);
+            }
+        }
+    }
+};
+
+module.exports = areaSelect;

 .order-ensure2016 {
     width: 990px;
     margin: 50px auto;
-    $red: #ee4147;
+    $red: #d0021b;
     $borderColor: #e8e8e8;
 
     .order-ensure-title {
@@ -98,36 +98,35 @@
         }
     }
 
-    .info-block-wrap {
-        border: 1px solid $borderColor;
-
-        .block-title {
-            height: 50px;
-            line-height: 50px;
-            font-size: 18px;
-            padding: 0 24px;
-            background-color: #eaeaea;
-            border-bottom: 1px solid $borderColor;
+    .block-title {
+        height: 38px;
+        line-height: 40px;
+        font-size: 16px;
+        padding: 0 24px;
+        background-color: #f5f5f5;
+        border-bottom: 1px solid $borderColor;
 
-            .right {
-                color: $red;
-                font-size: 12px;
-            }
+        .right {
+            color: $red;
+            font-size: 14px;
         }
+    }
 
-        .check-btn {
-            line-height: 28px;
-            font-size: 13px;
-            color: #444;
-            padding: 0 20px;
-            margin-right: 16px;
-            border: 1px solid $borderColor;
-            display: inline-block;
-            text-align: center;
-            position: relative;
-            cursor: pointer;
+    .check-btn {
+        line-height: 28px;
+        color: #444;
+        padding: 0 20px;
+        margin-right: 16px;
+        border: 1px solid #444;
+        display: inline-block;
+        text-align: center;
+        position: relative;
+        cursor: pointer;
+
+        &.checked {
+            border-color: $red;
 
-            &.checked:after {
+            &:after {
                 content: '';
                 width: 20px;
                 height: 20px;
@@ -138,39 +137,45 @@
                 bottom: 0;
             }
         }
+    }
 
-        .radio-btn {
-            margin: 0 10px;
+    .radio-btn {
+        margin-right: 20px;
 
-            &:before {
-                content: '';
-                width: 15px;
-                height: 15px;
-                margin-right: 6px;
-                background-image: url(/cart/radio-off.png);
-                display: inline-block;
-                vertical-align: middle;
-                position: relative;
-                top: -1px;
-                cursor: pointer;
-            }
+        &:before {
+            content: '';
+            width: 15px;
+            height: 15px;
+            margin-right: 6px;
+            background-image: url(/cart/radio-off.png);
+            display: inline-block;
+            vertical-align: middle;
+            position: relative;
+            top: -1px;
+            cursor: pointer;
+        }
 
-            &.on:before {
-                background-image: url(/cart/radio-on.png);
-            }
+        &.on:before {
+            background-image: url(/cart/radio-on.png);
         }
     }
 
     .address-wrap {
-        padding-left: 20px;
-        font-size: 13px;
+        font-size: 14px;
         color: #444;
+        border: 1px solid $borderColor;
+        margin-bottom: 40px;
+
+        .addr-list {
+            width: 100%;
+            padding-left: 20px;
+        }
 
         .addr-item {
             width: 200px;
-            height: 174px;
+            height: 162px;
             float: left;
-            padding-left: 18px;
+            padding: 8px 14px 8px 8px;
             margin-right: 18px;
             margin-top: 30px;
             border: 1px solid $borderColor;
@@ -185,63 +190,80 @@
                 background: resolve('cart/addr-tps.png');
                 position: absolute;
                 left: 0;
+                top: 0;
             }
 
             &:hover:before {
                 background: resolve('cart/addr-tps-on.png');
             }
 
-            .set-default,
-            .default-tip {
-                font-size: 12px;
-                line-height: 18px;
-                color: #9a9a9a;
-                padding: 0 4px;
-                position: absolute;
-                right: 6px;
-                top: 14px;
-            }
-
-            .default-tip {
-                color: #f00;
-                border: 1px solid $borderColor;
-                display: none;
-            }
-
             .name {
-                height: 58px;
-                line-height: 58px;
-                padding-top: 12px;
+                height: 40px;
+                line-height: 40px;
+                padding-top: 4px;
                 border-bottom: 1px solid $borderColor;
             }
 
             .area {
-                line-height: 26px;
-                margin-top: 10px;
+                line-height: 40px;
+                padding-top: 2px;
+            }
+
+            .area > span {
+                max-height: 36px;
+                line-height: 1.3;
+                display: inline-block;
+                vertical-align: middle;
+                overflow: hidden;
             }
 
             .street {
+                max-height: 42px;
                 color: #9a9a9a;
-                font-size: 12px;
                 line-height: 1.5;
+                word-break: break-all;
+                overflow: hidden;
             }
 
             .option {
+                width: 100%;
                 position: absolute;
+                left: 0;
                 bottom: 10px;
-                right: 14px;
-                font-size: 12px;
                 color: #9a9a9a;
-                text-align: right;
             }
 
             .option > span {
-                margin-left: 10px;
+                float: right;
+                margin-right: 10px;
+                line-height: 24px;
+            }
+
+            .option > span:hover {
+                color: #ce0b22;
+            }
+
+            .set-default,
+            .default-tip {
+                display: inline-block;
+                padding: 4px;
+                color: #444;
+                background-color: #e0e0e0;
+                border: 1px solid #cdcdcd;
+                margin-left: 8px;
+                cursor: pointer;
+            }
+
+            .default-tip {
+                color: #fff;
+                background-color: #ce0b22;
+                border-color: #ce0b22;
+                display: none;
             }
         }
 
         .addr-default {
-            border-color: #fff;
+            border-color: $red;
 
             &:before {
                 background: resolve('cart/addr-tps-on.png');
@@ -251,7 +273,7 @@
             }
 
             .default-tip {
-                display: block;
+                display: inline-block;
             }
 
             &:after {
@@ -268,7 +290,8 @@
 
         .addr-opt {
             height: 40px;
-            padding-top: 20px;
+            padding-left: 20px;
+            margin-top: 20px;
 
             .more-addr-btn {
                 cursor: pointer;
@@ -279,13 +302,28 @@
     .pay-wrap,
     .delivery-way-wrap,
     .delivery-time-wrap {
-        padding: 30px 20px 10px;
+        border: 1px solid $borderColor;
+        border-bottom-color: #fff;
+
+        .block-title {
+            margin-bottom: 20px;
+        }
 
         > p {
-            font-size: 12px;
+            padding-left: 20px;
+            font-size: 14px;
             line-height: 30px;
             margin-bottom: 20px;
+            color: #444;
+        }
+
+        .disable {
             color: #9a9a9a;
+
+            .check-btn {
+                color: #9a9a9a;
+                border-color: #9a9a9a;
+            }
         }
 
         .default-line {
@@ -293,18 +331,27 @@
         }
     }
 
-    .delivery-time-wrap > .contract-me {
-        line-height: 16px;
-        font-size: 13px;
-        color: #444;
-        margin-bottom: 18px;
+    .pay-wrap {
+        .check-btn {
+            min-width: 100px;
+            text-align: center;
+        }
+    }
 
-        .tips {
-            color: #9a9a9a;
-            font-size: 12px;
+    .delivery-time-wrap {
+        border-bottom-color: $borderColor;
+        margin-bottom: 40px;
+
+        .check-btn {
+            min-width: 138px;
+            text-align: center;
         }
     }
 
+    .goods-wrap {
+        border: 1px solid $borderColor;
+    }
+
     .goods-table {
         width: 100%;
         font-size: 13px;
@@ -380,13 +427,24 @@
         }
     }
 
+    .invoice-wrap {
+        border-left: 1px solid $borderColor;
+        border-right: 1px solid $borderColor;
+
+        > p {
+            line-height: 70px;
+            padding-left: 20px;
+        }
+    }
+
     .extra-wrap {
+        font-size: 14px;
         padding: 10px 20px;
-        border-top: 1px solid $borderColor;
+        border: 1px solid $borderColor;
+        border-bottom-color: #fff;
 
         dt {
-            font-size: 15px;
-            line-height: 40px;
+            line-height: 30px;
         }
     }
 
@@ -394,13 +452,22 @@
         font-size: 13px;
         line-height: 2;
         color: #444;
-        margin-top: 30px;
         border: 1px solid $borderColor;
         text-align: right;
 
         .balance-detail {
             padding: 30px 20px;
             border-bottom: 1px solid $borderColor;
+
+            .back-coin:before {
+                content: '';
+                width: 14px;
+                height: 14px;
+                background-image: url(/cart/yoho-coin.png);
+                display: inline-block;
+                vertical-align: text-top;
+                margin-right: 4px;
+            }
         }
 
         .promotion-val {
@@ -448,3 +515,233 @@
         }
     }
 }
+
+.ope-address-dialog {
+    $red: #d0021b;
+    width: 450px;
+    height: 460px;
+    text-align: left;
+    font-size: 14px;
+    color: #444;
+    background-color: #fff;
+
+    > .close {
+        top: 10px;
+        right: 12px;
+
+        .iconfont {
+            font-size: 32px;
+        }
+    }
+    > .content {
+        text-align: left;
+    }
+
+    .title {
+        font-size: 18px;
+        padding-bottom: 10px;
+        border-bottom: 1px solid #e8e8e8;
+    }
+
+    .prompt {
+        line-height: 54px;
+        color: #444;
+    }
+
+    .info-wrap {
+        color: #aaa;
+
+        .radio-btn {
+            color: #444;
+
+            &:before {
+                content: '';
+                width: 15px;
+                height: 15px;
+                margin-right: 6px;
+                background-image: url(/cart/radio-off.png);
+                display: inline-block;
+                vertical-align: middle;
+                position: relative;
+                top: -1px;
+                cursor: pointer;
+            }
+
+            &.on:before {
+                background-image: url(/cart/radio-on.png);
+            }
+        }
+
+        > li {
+            padding-bottom: 30px;
+
+            input {
+                width: 208px;
+                border: 1px solid #b0b0b0;
+                padding: 5px;
+                margin-right: 10px;
+            }
+
+            input[name="address"] {
+                width: 330px;
+            }
+        }
+
+        .left-rd {
+            width: 92px;
+            font-size: 14px;
+            color: #444;
+            text-align: right;
+            display: inline-block;
+
+            .red {
+                color: #ce0b24;
+                margin-right: 10px;
+            }
+        }
+
+        .caveat-tip {
+            color: #ce0b24;
+            position: absolute;
+            padding-left: 94px;
+            line-height: 1.5;
+
+/*            &:before {
+                content: '';
+                width: 16px;
+                height: 16px;
+                margin-right: 6px;
+                background: url('/cart/error-ico.png');
+                display: inline-block;
+                position: relative;
+                top: 4px;
+            }*/
+        }
+
+        .area-box {
+            width: 340px;
+            height: 26px;
+            display: inline-block;
+            border: 1px solid #b0b0b0;
+            background: #fff;
+            margin-right: 10px;
+            vertical-align: middle;
+            position: relative;
+            z-index: 1;
+
+            > span {
+                width: 98%;
+                font-size: 12px;
+                line-height: 26px;
+                padding-left: 5px;
+                display: inline-block;
+                cursor: pointer;
+            }
+
+            .area-text {
+                width: 98%;
+                background: #fff;
+                color: #444;
+                position: absolute;
+                left: 0;
+                top: 0;
+            }
+        }
+
+        .area-select {
+            width: 100%;
+            position: absolute;
+            left: -1px;
+            background-color: #fff;
+            border: 1px solid #b0b0b0;
+            display: none;
+
+            li {
+                width: 112px;
+                float: left;
+                line-height: 26px;
+                color: #999;
+                border-left: 1px solid #e0e0e0;
+                background-color: #f8f8f8;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            li:first-child {
+                width: 114px;
+                border: 0;
+            }
+
+            .opt-list {
+                width: 100%;
+                position: absolute;
+                left: -1px;
+                background: #fff;
+                border: 1px solid #b0b0b0;
+                padding: 10px 0;
+                text-align: left;
+                display: none;
+                color: #444;
+
+                > p {
+                    padding-left: 60px;
+                }
+
+                .group-title {
+                    position: absolute;
+                    left: 20px;
+                }
+
+                span {
+                    display: inline-block;
+                    padding: 4px 6px;
+                    margin: 0 5px;
+                    line-height: 1;
+                    cursor: pointer;
+                }
+
+                .on {
+                    background-color: $red;
+                    color: #fff;
+                }
+            }
+        }
+
+        .on-edit + .area-select {
+            display: block;
+        }
+
+        .area-select .tab-on {
+            background-color: #fff;
+            color: $red;
+
+            &:after {
+                content: '';
+                width: 100%;
+                height: 4px;
+                background-color: #fff;
+                display: block;
+                position: relative;
+                top: -2px;
+            }
+
+            .opt-list {
+                display: block;
+            }
+        }
+    }
+
+    .btns {
+        > .btn {
+            width: 128px;
+            height: 30px;
+            line-height: 32px;
+        }
+
+        .black {
+            background: #000;
+            color: #fff;
+            margin-right: 18px;
+        }
+    }
+}