退货申请

@@ -15,7 +15,7 @@ const orderModel = require('../models/order');
 const index = (req, res) => {
     const type = req.query.type;
     const page = req.query.page;
-    const uid = global.yoho.uid || '7394907';
+    const uid = global.yoho.uid || '13549567';
 
     orderModel.getOrderData(uid, type, page).then(result => {
         res.display('index', {

@@ -5,8 +5,7 @@
  */
 'use strict';
 
-// const returns = require('../models/returns');
-const mcHandler = require('../models/menu-crumb-handler');
+const returns = require('../models/returns');
 
 const detail = (req, res, next) => {
     next();
@@ -15,21 +14,18 @@ const detail = (req, res, next) => {
 const refund = (req, res, next) => {
     let code = parseInt(req.params.orderCode, 10);
 
-    req.user.uid = 13549567;
-    code = 160101627;
+    req.user.uid = '8050560';
+    code = '160192757';
     if (!req.user.uid || !code) {
         return next();
     }
 
-    res.display('index', {
-        content: {
-            nav: mcHandler.getMeCrumb(),
-            navigation: mcHandler.getSideMenu('我的退/换货'),
-            returns: {
-                title: '退货申请'
-            }
-        }
-    });
+    returns.getRefundGoodsData(code, req.user.uid).then(result => {
+        res.display('index', {
+            page: 'returns-refund',
+            content: result
+        });
+    }).catch(next);
 };
 
 const exchange = (req, res, next) => {

+/**
+ * 商品基本信息
+ * @author: yyq<yanqing.yang@yoho.cn>
+ * @date: 2016/7/19
+ */
+'use strict';
+
+const api = global.yoho.API;
+
+const getRefundGoodsAsync = (orderCode, uid) => {
+    return api.get('', {
+        method: 'app.refund.goodsList',
+        order_code: orderCode,
+        uid: uid
+    }, {code: 200});
+};
+
+module.exports = {
+    getRefundGoodsAsync
+};
+

+/**
+ * 商品基本信息
+ * @author: yyq<yanqing.yang@yoho.cn>
+ * @date: 2016/7/19
+ */
+'use strict';
 
+const _ = require('lodash');
+const mcHandler = require('./menu-crumb-handler');
+const returnsAPI = require('./returns-api');
+
+const helpers = global.yoho.helpers;
+
+const _setSideMenu = (type) => {
+    return {
+        nav: mcHandler.getMeCrumb(type),
+        navigation: mcHandler.getSideMenu(type)
+    };
+};
+
+const _setRefundGoodList = (data) => {
+    let resData = {};
+
+    if (data.goods_list) {
+        let goods = [];
+
+        _.forEach(data.goods_list, value => {
+            let cnAlphabet = value.cn_alphabet ? value.cn_alphabet : '';
+
+            goods.push({
+                href: helpers.urlFormat(`/product/pro_${value.product_id}_${value.goods_id}/${cnAlphabet}.html`),
+                img: value.goods_image,
+                name: value.product_name,
+                size: value.size_name,
+                color: value.color_name,
+                num: 1, // 接口目前不支持
+                price: value.last_price,
+                skn: value.product_skn,
+                skc: value.product_skc,
+                sku: value.product_sku,
+                type: value.goods_type,
+                typeId: value.goods_type_id,
+                reasonList: data.return_reason
+            });
+
+            if (value.hasShoes) {
+                resData.hasShoes = true;
+            }
+        });
+        resData.goods = goods;
+    }
+    resData.speclialReason = data.special_return_reason;
+
+    return resData;
+};
+
+const getRefundGoodsData = (orderCode, uid) => {
+    return returnsAPI.getRefundGoodsAsync(orderCode, uid).then(result => {
+        let resData = {};
+
+        Object.assign(resData, _setSideMenu('我的退/换货'));
+        resData.returns = {
+            title: '退货申请'
+        };
+
+        if (result.data) {
+            Object.assign(resData.returns, _setRefundGoodList(result.data));
+        }
+
+        return resData;
+    });
+};
+
+module.exports = {
+    getRefundGoodsData
+};

-<div class="return-wrap">
+<div class="returns-wrap">
     {{# returns}}
         {{> common/subtitle}}
+
+        <h4 class="third-title">选择退货商品</h4>
+
+        <div class="refund-goods clearfix">
+            <ul class="goods-header">
+                <li class="info">商品信息</li>
+                <li class="reason">退货原因</li>
+                <li class="num">退货数量</li>
+                <li class="price">单价</li>
+            </ul>
+
+            {{# goods}}
+                <div class="goods-item clearfix">
+                    <div class="check">{{> icon/checkbox}}</div>
+                    <div class="img">
+                        <img class="lazy" data-original="{{image img 70 90}}">
+                    </div>
+                    <div class="info">
+                        <p>{{name}}</p>
+                        <p>颜色：{{color}}&nbsp;尺码：{{size}}</p>
+                        <p>×{{num}}</p>
+                    </div>
+                    <div class="reason">
+                        <select>
+                            <option>选择退款原因</option>
+                            {{# reasonList}}
+                                <option value="{{id}}">{{name}}</option>
+                            {{/ reasonList}}
+                        </select>
+                    </div>
+                    <div class="num">
+                        <span class="iconfont">&#xe621;</span>
+                        <input type="text" value="{{num}}" readonly="readonly">
+                        <span class="iconfont">&#xe61f;</span>
+                    </div>
+                    <div class="price">¥{{round price 2}}</div>
+                </div>
+            {{/ goods}}
+        </div>
+
+        <h4 class="third-title">退款方式</h4>
+
+        <div class="refund-type">
+            <div>
+                <label class="type-item ali-item cur" title="支付宝"></label>
+                <label class="type-item union-item" title="银行卡"></label>
+            </div>
+            <dl class="alipay">
+                <dd>账号：<input type="text" placeholder="收款人支付宝账号"></dd>
+                <dd>姓名：<input type="text" placeholder="姓名"></dd>
+            </dl>
+            <dl class="unionpay hide">
+                <dd>
+                    银行：
+                    <select>
+                        <option>中国银行</option>
+                        <option>中国农业银行</option>
+                        <option>中国工商银行</option>
+                        <option>中国建设银行</option>
+                    </select>
+                    <input type="text" placeholder="开户支行">
+                    <span class="blue">例：江苏省南京市奥体支行</span>
+                </dd>
+                <dd>账号：<input type="text" placeholder="收款人银行卡号"></dd>
+                <dd>姓名：<input type="text" placeholder="姓名"></dd>
+            </dl>
+        </div>
+        <div class="opt-btn">
+            <span class="apply-tip blue hide">请填写完整</span>
+            <div id="apply-btn" class="btn disable">提交申请</div>
+        </div>
     {{/ returns}}
 </div>
\ No newline at end of file

+/**
+ * 退货申请页
+ * @author: yyqing<yanqing.yang@yoho.cn>
+ * @date: 2016/7/15
+ */
+var $ = require('yoho-jquery'),
+    lazyload = require('yoho-jquery-lazyload');
+
+var $check = $('.check'),
+    $refundType = $('.refund-type'),
+    $typeInfo = $refundType.children('dl');
+
+var $applyBtn = $('#apply-btn');
+
+var checked;
+
+require('../plugins/check');
+
+lazyload($('img.lazy'));
+
+function restApplyBtn() {
+    if (checked.documents && checked.documents.length) {
+        $applyBtn.removeClass('disable');
+    } else {
+        $applyBtn.addClass('disable');
+    }
+}
+
+$check.check({
+    type: 'checkbox',
+    onChange: function() {
+        checked = $check.check('getChecked');
+        restApplyBtn();
+    }
+});
+
+$refundType.on('click', '.type-item', function() {
+    var $this = $(this),
+        index;
+
+    if (!$this.hasClass('cur')) {
+        index = $this.index();
+        $this.addClass('cur').siblings('.cur').removeClass('cur');
+        $typeInfo.addClass('hide');
+        $typeInfo.eq(index).removeClass('hide');
+    }
+});

@@ -104,3 +104,4 @@
 @import "address";
 @import "order/index";
 @import "currency";
+@import "returns";

+.returns-wrap {
+    font-size: 14px;
+
+    .third-title {
+        font-size: 16px;
+        font-weight: bold;
+        padding-bottom: 20px;
+    }
+
+    .opt-btn {
+        padding-top: 40px;
+        line-height: 40px;
+        text-align: right;
+
+        .blue {
+            margin-right: 10px;
+            font-size: 12px;
+        }
+
+        .btn {
+            width: 130px;
+            height: 40px;
+            line-height: 40px;
+            font-size: 16px;
+            display: inline-block;
+        }
+    }
+
+    .refund-goods {
+        margin-bottom: 40px;
+
+        .goods-header {
+            height: 40px;
+            line-height: 40px;
+            background-color: #f5f5f5;
+            border: 1px solid #f1f1f1;
+
+            > * {
+                float: left;
+                width: 172px;
+                text-align: center;
+            }
+
+            .info {
+                width: 410px;
+                padding-left: 20px;
+                text-align: left;
+            }
+        }
+
+        .goods-item {
+            padding: 30px 0;
+            border: 1px solid #f1f1f1;
+            border-top: 0;
+
+            > * {
+                width: 172px;
+                height: 90px;
+                line-height: 90px;
+                float: left;
+                text-align: center;
+            }
+
+            .check {
+                width: 56px;
+            }
+
+            .checkbox {
+                font-size: 18px;
+                cursor: pointer;
+            }
+
+            .img {
+                width: 98px;
+            }
+
+            .info {
+                width: 254px;
+                text-align: left;
+                line-height: 1.5;
+            }
+
+            .num > * {
+                height: 28px;
+                line-height: 28px;
+                border: 1px solid #eee;
+                text-align: center;
+            }
+
+            .num > .iconfont {
+                width: 20px;
+                font-size: 12px;
+                margin-top: -2px;
+                display: inline-block;
+                vertical-align: middle;
+                cursor: pointer;
+            }
+
+            .num > input {
+                width: 40px;
+            }
+        }
+    }
+
+    .refund-type {
+        padding-bottom: 15px;
+        border-bottom: 1px solid #f1f1f1;
+
+        .type-item {
+            width: 118px;
+            height: 38px;
+            border: 1px solid #eee;
+            display: inline-block;
+            margin-right: 16px;
+            cursor: pointer;
+
+            &.cur {
+                border-color: #000;
+            }
+        }
+
+        .ali-item {
+            background: resolve('me/alipay.png') no-repeat center center;
+        }
+
+        .union-item {
+            background: resolve('me/unionpay.png') no-repeat center center;
+        }
+
+        > dl {
+            margin-top: 10px;
+
+            dd {
+                padding: 5px 0;
+            }
+        }
+    }
+}