Merge branch 'feature/return' of git.yoho.cn:fe/yoho-blk into feature/return

@@ -83,7 +83,29 @@ const refundDetail = (req, res, next) => {
 };
 
 const exchange = (req, res, next) => {
-    next();
+    const code = req.params.orderCode;
+    const uid = req.user.uid || '8050560';
+
+    returns.getChangeGoodsList(code, uid).then(result => {
+        res.display('index', {
+            page: 'returns-change',
+            isMe: true,
+            content: Object.assign({
+                nav: mcHandler.getMeCrumb('我的退/换货'),
+                navigation: mcHandler.getSideMenu('我的退/换货'),
+                banner: 'http://placehold.it/{width}x{height}'
+            }, result)
+        });
+    }).catch(next);
+};
+
+const getProductInfo = (req, res, next) => {
+    const productId = req.query.productId;
+    const productSkn = req.query.productSkn;
+
+    returns.getProductInfo(productId, productSkn).then(result => {
+        res.json(result);
+    }).catch(next);
 };
 
 const detailExchange = (req, res) => {
@@ -96,12 +118,47 @@ const detailExchange = (req, res) => {
         content: {
             nav: mcHandler.getMeCrumb('我的退/换货'),
             navigation: mcHandler.getSideMenu('我的退/换货'),
-            banner: 'http://placehold.it/{width}x{height}'
-
-            // exchange: {
-
-
-            // }
+            banner: 'http://placehold.it/{width}x{height}',
+
+            exchange: {
+                // audit: true,
+                // through: false,
+                // send: true,
+                finish: true,
+                way: '上门送货',
+                goods: [
+                    {
+                        img: '',
+                        name: 'fdefwfwefwrefverfref',
+                        color: '',
+                        size: '',
+                        num: '',
+                        reason: '',
+                        exchangeColor: '蓝色',
+                        exchangeSize: 'M'
+                    },
+                    {
+                        img: '',
+                        name: 'fdefwfwefwrefverfref',
+                        color: '',
+                        size: '',
+                        num: '',
+                        reason: '',
+                        exchangeColor: '蓝色',
+                        exchangeSize: 'M'
+                    }
+                ],
+                reasonInfo: [
+                    {
+                        problem: '太小了',
+                        img: ''
+                    },
+                    {
+                        problem: '太小了',
+                        img: ''
+                    }
+                ]
+            }
         }
     });
 };
@@ -111,7 +168,8 @@ module.exports = {
     detail,
     refund,
     refundApply,
-    refundDetail,
     exchange,
+    getProductInfo,
+    refundDetail,
     detailExchange
 };

@@ -42,9 +42,27 @@ const refundSubmitAsync = (orderCode, uid, goods, payment) => {
     }, {code: 200});
 };
 
+const getChangeGoodsListAsync = (orderCode, uid) => {
+    return api.get('', {
+        method: 'app.change.goodsList',
+        order_code: orderCode,
+        uid: uid
+    });
+};
+
+const getProductInfoAsync = (productId, productSkn) => {
+    return api.get('', {
+        method: 'app.product.data',
+        product_id: productId,
+        product_skn: productSkn
+    });
+};
+
 module.exports = {
     getOrderInfoAsync,
     getRefundGoodsAsync,
+    getChangeGoodsListAsync,
+    getProductInfoAsync,
     getRefundDetailAsync,
     refundSubmitAsync
 };

@@ -16,6 +16,20 @@ const helpers = global.yoho.helpers;
 
 const pageSize = 10;
 
+const _reduceArrByProductSku = data => {
+    const d = [];
+
+    d.push(data[0]);
+
+    data.reduce((p, c) => { //eslint-disable-line
+        if (p && c && p.productSku !== c.productSku) {
+            d.push[c];
+        }
+    });
+
+    return d;
+};
+
 const getUserReturn = (uid, page) => {
 
     return api.get('', {
@@ -263,9 +277,53 @@ const saveRefund = (orderCode, uid, goods, payment) => {
     });
 };
 
+const getProductInfo = (productId, productSkn) => {
+    return returnsAPI.getProductInfoAsync(productId, productSkn).then(result => {
+        if (result.code === 200) {
+            camelCase(result);
+            result.data.goodsList.forEach(good => {
+                good.colorImage = helpers.image(good.colorImage, 20, 20);
+            });
+        }
+        return result;
+    });
+};
+
+const getChangeGoodsList = (orderCode, uid) => {
+    return returnsAPI.getChangeGoodsListAsync(orderCode, uid).then(result => {
+        const basicData = {
+            title: '申请退货'
+        };
+        let data;
+
+        console.log(result);
+
+        if (result && result.data) {
+            data = camelCase(result.data);
+
+
+            data.goodsList = _reduceArrByProductSku(data.goodsList);
+            data.hidePrice = true;
+
+            data.goodsList.forEach(good => {
+                good.showCheckbox = true;
+                good.hidePrice = true;
+                good.buyNumber = good.num;
+            });
+        }
+
+
+        return {
+            returnsChange: Object.assign(basicData, data)
+        };
+    });
+};
+
 module.exports = {
     getUserReturn,
     getRefundGoodsData,
+    getChangeGoodsList,
+    getProductInfo,
     getRefundDetailData,
     saveRefund
 };

@@ -34,6 +34,7 @@ router.get('/return/refund/detail/:applyId', returns.refundDetail);
 router.get('/return/exchange/detail', returns.detailExchange);
 router.get('/return/:returnId', returns.detail);
 router.post('/return/refund/apply', returns.refundApply);
+router.get('/return/getProductInfo', returns.getProductInfo);
 
 // 个人中心首页/收货地址
 router.get('/address', address.index);

@@ -46,6 +46,11 @@
                     {{> returns-list}}
                 {{/if}}
 
+                {{!-- 发起换货申请 --}}
+                {{#if returnsChange}}
+                    {{> returns-change}}
+                {{/if}}
+
                 {{!-- 我的收藏 --}}
                 {{#if collection}}
                     {{> collection}}

-{{!-- {{# exchange}} --}}
+{{# exchange}}
 <div class="exchange-detail-page">
+    {{#if audit}}
     <p class="state"><span class="iconfont">&#xe618;</span>换货申请审核中</p>
+    {{/if}}
+
+    {{#if through}}
+     <p class="state"><span class="iconfont">&#xe60f;</span>换货申请已通过</p>
+    {{/if}}
+
+    {{#if send}}
+     <p class="state"><span class="iconfont">&#xe61a;</span>换货商品已发出</p>
+    {{/if}}
+
+    {{#if finish}}
+     <p class="state"><span class="iconfont">&#xe60f;</span>换货完成</p>
+    {{/if}}
 
     <div class="way">
+
+        {{#if finish}}
+        <p class="contact">如有疑问，请联系<span class="iconfont">&#xe61c;</span>在线客服</p>
+        {{else}}
         <p class="way-title">您已选择{{way}}</p>
         <p>请将商品连同吊牌、包装、发货单（如无发货单，您可找张白纸上注明订单编号，收货人姓名及手机号码）、发票（如有）、赠品（如有）一并保存，
         如有遗漏将影响您的退换货进度，敬请谅解
         </p>
+        {{/if}}
+
+        {{#if audit}}
         <p class="cancel">如果您不想换货了，您可以<span class="cancel-btn">取消申请</span></p>
+        {{/if}}
+
+        {{#if finish}}
+        <div class="order">
+            <span class="check">查看</span>
+            <span class="exchange-order">换货订单</span>
+        </div>
+        {{/if}}
     </div>
 
     <div class="adress">
@@ -20,6 +49,8 @@
         </div>
     </div>
 
+    <span class="exchange-goods">换货商品</span>
+
     <div class="good-info">
         <div class="table">
             <ul class="header">
@@ -30,11 +61,12 @@
         </div>
 
         <div class="table">
+            {{# goods}}
             <div class="table-body">
                 <div class="goods-info">
                     <img class="lazy" data-original="{{image img 70 90}}">
                     <div class="info">
-                        <p class="good-name">{{!-- {{name}} --}}fdefwfwefwrefverfref</p>
+                        <p class="good-name">{{name}}</p>
                         <p>颜色：{{color}}&nbsp;尺码：{{size}}</p>
                         <p>×{{num}}</p>
                     </div>
@@ -43,18 +75,21 @@
                     <p class="reason">{{reason}}发错货</p>
                 </div>
                 <div class="common-column special-border operation">
-                    <p class="subtext">color: 蓝色<br>size: M</p>
+                    <p class="subtext">color: {{exchangeColor}}<br>size: {{exchangeSize}}</p>
                 </div>
             </div>
+            {{/ goods}}
+            {{# reasonInfo}}
             <div class="reason-info">
-                <span>问题描述：太小了</span>
+                <span>问题描述：{{problem}}</span>
                 <div class="reason-img">照片凭证：
                     <div class="evidence">
                         <img src="{{image img 70 90}}">
                     </div>
                 </div>
             </div>
+            {{/ reasonInfo}}
         </div>
     </div>
 </div>
-{{!-- {{/ exchange}} --}}
\ No newline at end of file
+{{/ exchange}}
\ No newline at end of file

+<div class="good-info {{#if @last}}last{{/if}}">
+    <img src="{{image goodsImage 65 90}}">
+    <div class="detail">
+        <p class="with-bottom-space">{{productName}}</p>
+        <span class="with-space">颜色：{{colorName}}</span>
+        <span>尺码：
+            <span class="bold">{{sizeName}}</span>
+        </span>
+        <p class="bold buy-number">{{> icon/error-round}}{{buyNumber}}</p>
+    </div>
+</div>

 <div class="goods-container special-border {{#if hidePrice}}no-price{{/if}}">
     {{#orderGoods}}
-    <div class="good-info {{#if @last}}last{{/if}}">
-        <img src="{{image goodsImage 65 90}}">
-        <div class="detail">
-            <p class="with-bottom-space">{{productName}}</p>
-            <span class="with-space">颜色：{{colorName}}</span>
-            <span>尺码：
-                <span class="bold">{{sizeName}}</span>
-            </span>
-            <p class="bold buy-number">{{> icon/error-round}}{{buyNumber}}</p>
-        </div>
-    </div>
+    {{> order/good-info}}
     {{#unless hidePrice}}
     <div class="sub-column right-border bold">
         <p class="{{#if @last}}last{{/if}}">¥{{goodsPrice}}</p>
     </div>
-    {{/unless}}
     <div class="sub-column right-border special-column bold">
         <p class="bold">{{buyNumber}}</p>
     </div>
     <div class="sub-column special-column bold">
         <p class="bold">¥{{goodsAmount}}</p>
     </div>
+    {{/unless}}
     {{/orderGoods}}
 </div>

@@ -28,7 +28,9 @@
                 {{#if showEditOption}}
                 <p class="subtext">评价晒单</p>
                 <p class="subtext">申请退货</p>
+                <a href="/return/exchange?code={{orderCode}}&id={{productId}}&skn={{productSkn}}">
                     <p class="subtext">申请换货</p>
+                </a>
                 <p class="subtext delete">删除订单</p>
                 {{/if}}
                 {{#if showGetBtn}}

+<div class="return-wrap user-order change">
+    {{#returnsChange}}
+    {{> common/subtitle}}
+    <div class="order">
+        <div class="table returns">
+            <ul class="header">
+                <li class="info">商品信息</li>
+                <li class="change-reason">换货原因</li>
+                <li class="change-num">换货数量</li>
+            </ul>
+            {{#goodsList}}
+            <div class="table-body">
+                <div class="goods-container no-price"  data-id="{{productId}}" data-skn="{{productSkn}}">
+                    {{# showCheckbox}}
+                        {{> icon/checkbox}}
+                        <!--
+                    <span class="iconfont checkbox {{#if checked}}checked{{/if}}">{{#if checked}}&#xe602;{{^}}&#xe601;{{/if}}</span>
+                        -->
+                    {{/ showCheckbox}}
+                    {{> order/good-info}}
+                    <div class="sub-column">
+                        退货原因
+                    </div>
+                    <div class="sub-column">
+                        数量
+                    </div>
+                </div>
+            </div>
+            <div class="form">
+                <div class="group color">
+                    <span class="title">
+                        <span class="artirisk">*</span>
+                        换货Color： <span class="color-text"  data-color={{colorId}}>{{colorName}}</span>
+                    </span>
+                </div>
+                <div class="group size">
+                    <span class="title">
+                        <span class="artirisk">*</span>
+                        换货Size： <span class="size-text" data-size="{{sizeId}}">{{sizeName}}</span>
+                    </span>
+                </div>
+            </div>
+            {{/goodsList}}
+        </div>
+    </div>
+    {{/returnsChange}}
+</div>

@@ -19,7 +19,7 @@ module.exports = {
     },
     cookieDomain: 'yohoblk.com',
     domains: {
-        api: 'http://testapi.yoho.cn:28078/', // devapi.yoho.cn:58078 testapi.yoho.cn:28078 devapi.yoho.cn:58078
+        api: 'http://devapi.yoho.cn:58078/', // devapi.yoho.cn:58078 testapi.yoho.cn:28078 devapi.yoho.cn:58078
         service: 'http://testservice.yoho.cn:28077/', // testservice.yoho.cn:28077 devservice.yoho.cn:58077
         search: 'http://192.168.102.216:8080/yohosearch/'
     },

+var colorTpl = require('../../tpl/me/color-list.hbs');
+var sizeTpl = require('../../tpl/me/size-list.hbs');
+
+// var scope = {
+//     1: {
+//         min: true,
+//         do: function() {
+//             console.log('min');
+//         }
+//     }
+// }
+
+function renderList(data) {
+    var cTpl;
+    var sTpl;
+    var $c = $('.group.color');
+    var $s = $('.group.size');
+
+    if (data) {
+        cTpl = colorTpl(data);
+        sTpl = sizeTpl(data);
+        $c.append(cTpl);
+        $s.append(sTpl);
+    }
+}
+
+function bindColorEvent() {
+    $('.color-list img').on('click', function() {
+        var $this = $(this);
+        var $sizeList = $('.size-list');
+        var index = $this.data('index');
+        var colorId = $this.data('color');
+        var colorText = $this.attr('alt');
+        var $c = $('.group.color .color-text');
+
+        $c.text(colorText);
+        $c.attr('data-color', colorId);
+
+
+        $sizeList.removeClass('hide');
+        $sizeList.addClass('hide');
+
+        $sizeList.eq(index).removeClass('hide');
+    });
+}
+
+function initSizeId() {
+    var s = $('.size-list:not("hide")').find('span').eq(0).data('size');
+
+    $('.group.size .size-text').eq(0).attr('data-size', s);
+}
+
+function bindSizeEvent() {
+    $('.size-list span').on('click', function() {
+        var $this = $(this);
+        var s = $this.text();
+        var id = $this.data('size');
+        var $s = $('.group.size .size-text');
+
+        $s.text(s);
+        $s.attr('data-size', id);
+    });
+}
+
+// function bindNumberEvent() {
+//     $('.number .minus').on('click', function() {
+//         var val = $('.number .value').text();
+//
+//         if (scope[val].min) {
+//             scope[val].do();
+//         }
+//     });
+// }
+
+function getProductInfo() {
+    var $el = $('.goods-container');
+    var id = $el.data('id');
+    var skn = $el.data('skn');
+
+    if (id && skn) {
+        $.ajax({
+            url: '/me/return/getProductInfo',
+            data: {
+                productId: id,
+                productSkn: skn
+            }
+        }).done(function(result) {
+            console.log(result);
+            if (result.code === 200) {
+                renderList(result.data);
+                initSizeId();
+                bindColorEvent();
+                bindSizeEvent();
+            }
+        });
+    }
+}
+
+getProductInfo();

@@ -45,11 +45,44 @@
             text-align: center;
             margin-top: 10px;
         }
+
+        .contact {
+            line-height: 50px;
+
+            span {
+                margin-left: 20px;
+            }
+
+            .iconfont {
+                font-size: 12px;
+                margin-right: 5px;
+            }
+        }
+    }
+
+    .order {
+        margin: 23px 0 10px;
+        height: 50px;
+        line-height: 50px;
+        overflow: hidden;
+    }
+
+    .check {
+        display: block;
+        height: 25px;
+        width: 70px;
+        background: #1b1b1b;
+        color: #fff;
+        line-height: 25px;
+        text-align: center;
+        margin-top: 10px;
+        float: left;
+        margin-right: 20px;
     }
 
     .adress {
         overflow: hidden;
-        margin-top: 30px;
+        margin: 30px 0 20px;
         font-size: 14px;
         border-bottom: 1px solid #eee;
 
@@ -84,6 +117,12 @@
         }
     }
 
+    .exchange-goods {
+        font-size: 16px;
+        height: 50px;
+        line-height: 50px;
+    }
+
     .table {
         width: 100%;
 
@@ -170,7 +209,7 @@
 
     .reason-info {
         overflow: hidden;
-        padding: 25px 0 0 20px;
+        padding: 25px 0 30px 20px;
         width: 100%;
         border: 1px solid #eee;
         border-top: none;

 .return-wrap {
     .table {
         width: 100%;
+        max-width: 990px;
 
         .header {
             .info {
@@ -9,12 +10,26 @@
             }
 
             .st,
-            .op {
+            .op,
+            .change-reason,
+            .change-num {
                 width: 206px;
             }
         }
 
+        &.returns {
+            .good-info {
+                border: none;
+
+                .detail {
+                    width: 380px !important;
+                }
+            }
+        }
+
         .goods-container {
+            width: 990px;
+
             .for-return {
                 display: block;
             }
@@ -23,24 +38,36 @@
         .no-price {
             .good-info {
                 border-right: none;
-            }
 
-            .good-info {
                 .detail {
                     width: 408px;
                 }
             }
         }
 
+        .sub-column {
+            width: 204px !important;
+        }
+
+        .checkbox-column {
+            display: table-cell;
+            width: 100px;
+        }
+
         .common-column {
             width: 208px;
 
             .refund-status {
                 margin-bottom: 10px;
             }
+
             .refund-type {
                 position: static;
             }
+
+            &.no-border {
+                width: 204px !important;
+            }
         }
     }
 

+<div class="color-list">
+    {{#goodsList}}
+        <img src="{{colorImage}}" alt="{{colorName}}" data-index="{{@index}}" data-color={{colorId}}>
+    {{/goodsList}}
+</div>
+

+<div>
+    {{#goodsList}}
+        <div class="{{#unless @first}}hide{{/unless}} size-list" data-index="{{@index}}">
+        {{#sizeList}}
+            <span data-size="{{sizeId}}">{{sizeName}}</span>
+        {{/sizeList}}
+        </div>
+    {{/goodsList}}
+</div>