Merge branch 'feature/return' into develop

@@ -15,7 +15,7 @@ const orderModel = require('../models/order');
 const index = (req, res, next) => {
     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', {

+/**
+ * 退换货controller
+ * @author: yyq<yanqing.yang@yoho.cn>
+ * @date: 2016/7/18
+ */
+'use strict';
+
+const mcHandler = require('../models/menu-crumb-handler');
+const returns = require('../models/returns');
+const _ = require('lodash');
+
+
+const index = (req, res, next) => {
+    const uid = global.yoho.uid || '8050560';
+    const page = req.query.page;
+
+    returns.getUserReturn(uid, page).then(result => {
+        res.display('index', {
+            page: 'return-list',
+            isMe: true,
+            content: Object.assign({
+                nav: mcHandler.getMeCrumb('我的退/换货'),
+                navigation: mcHandler.getSideMenu('我的退/换货'),
+                banner: 'http://placehold.it/{width}x{height}'
+            }, result)
+        });
+    }).catch(next);
+};
+
+const detail = (req, res, next) => {
+    next();
+};
+
+const refund = (req, res, next) => {
+    let uid = req.user.uid || '8050560';
+    let code = parseInt(req.params.orderCode, 10) || '160192757';
+
+    code = '160192757';
+    if (!uid || !code) {
+        return next();
+    }
+
+    returns.getRefundGoodsData(code, uid).then(result => {
+        res.display('index', {
+            page: 'returns-refund',
+            content: result
+        });
+    }).catch(next);
+};
+
+const refundApply = (req, res, next) => {
+    let orderCode = req.body.orderCode,
+        uid = req.user.uid,
+        goods = req.body.goods,
+        payment = req.body.payment;
+
+    if (!orderCode || _.isEmpty(goods) || _.isEmpty(payment)) {
+        return res.json({
+            code: 203,
+            message: '非法提交'
+        });
+    }
+
+    returns.saveRefund(orderCode, uid, goods, payment).then(result => {
+        res.json(result);
+    }).catch(next);
+
+};
+
+const exchange = (req, res, next) => {
+    next();
+};
+
+module.exports = {
+    index,
+    detail,
+    refund,
+    refundApply,
+    exchange
+};

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

+/**
+ * 退换货
+ * @author: yyq<yanqing.yang@yoho.cn>
+ * @date: 2016/7/19
+ */
+'use strict';
+
+const api = global.yoho.API;
+const camelCase = global.yoho.camelCase;
+
+const _ = require('lodash');
+const mcHandler = require('./menu-crumb-handler');
+const returnsAPI = require('./returns-api');
+
+const helpers = global.yoho.helpers;
+
+const pageSize = 10;
+
+const getUserReturn = (uid, page) => {
+
+    return api.get('', {
+        method: 'app.refund.getList',
+        uid: uid,
+        page: page || 1,
+        limit: 10
+    }).then(result => {
+        const basicData = {
+            title: '我的退/换货'
+        };
+
+        const refundStr = {
+            1: '退货',
+            2: '换货'
+        };
+
+        const data = camelCase(result.data);
+
+        const paginationOpts = data.total > pageSize ? {
+            paginationOpts: {
+                total: data.total,
+                page: data.page,
+                limit: pageSize
+            }
+        } : false;
+
+        data.list.forEach(item => {
+            item.orderGoods = item.goods;
+            item.createTime = item.orderCreateTime;
+            item.hidePrice = true;
+            item.showStatus = true;
+            item.refundStr = refundStr[item.refundType];
+
+            item.orderGoods.forEach(it => {
+                it.hidePrice = true;
+            });
+        });
+
+        return {
+            returnsList: Object.assign(data, paginationOpts, basicData)
+        };
+    });
+};
+
+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: '退货申请',
+            refund: {}
+        };
+
+        if (result.data) {
+            Object.assign(resData.returns.refund, _setRefundGoodList(result.data), {
+                orderCode: orderCode
+            });
+        }
+
+        return resData;
+    });
+};
+
+const saveRefund = (orderCode, uid, goods, payment) => {
+    return returnsAPI.getOrderInfoAsync(orderCode, uid, '').then(result => {
+        if (!_.isEmpty(result)) {
+            return returnsAPI.refundSubmitAsync(orderCode, uid, goods, payment).then(subRes => {
+                if (subRes && subRes.data) {
+                    return {code: 200, data: {refer: subRes.data.apply_id}};
+                }
+                return {code: 400, message: '申请失败'};
+            });
+        } else {
+            return {code: 403, message: '没有找到该订单'};
+        }
+    });
+};
+
+module.exports = {
+    getUserReturn,
+    getRefundGoodsData,
+    saveRefund
+};

@@ -19,6 +19,7 @@ const currency = require(`${cRoot}/currency`);
 const setting = require(`${cRoot}/setting`);
 const account = require(`${cRoot}/account`);
 const favorite = require(`${cRoot}/favorite`);
+const returns = require(`${cRoot}/returns`);
 
 // 个人中心首页/订单
 router.get(['/', '/order'], order.index);
@@ -32,6 +33,13 @@ router.get('/getExpressInfo', order.getExpressInfo);
 router.get('/editOrder', order.editOrder);
 router.get('/reAdd', order.reAddCart);
 
+// 退换货
+router.get('/return', returns.index);
+router.get('/return/refund/:orderCode', returns.refund);
+router.get('/return/exchange/:orderCode', returns.exchange);
+router.get('/return/:returnId', returns.detail);
+router.post('/return/refund/apply', returns.refundApply);
+
 // 个人中心首页/收货地址
 router.get('/address', auth, address.index);
 router.post('/address/add', auth, address.addAddressData);

@@ -32,8 +32,13 @@
                 {{/if}}
 
                 {{!-- 我的退换货 --}}
-                {{#if return}}
-                    {{> return}}
+                {{#if returns}}
+                    {{> returns}}
+                {{/if}}
+
+                {{!-- 我的退换货列表 --}}
+                {{#if returnsList}}
+                    {{> returns-list}}
                 {{/if}}
 
                 {{!-- 我的收藏 --}}

-<div class="goods-container special-border">
+<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}}">
@@ -9,12 +9,13 @@
                 <span class="bold">{{sizeName}}</span>
             </span>
             <p class="bold buy-number">{{> icon/error-round}}{{buyNumber}}</p>
-
         </div>
     </div>
+    {{#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="order-nav">
+<div class="table order-nav">
     <ul class="tabs clearfix">
         {{#tabs}}
             <li class="{{#if isActive}}active{{/if}}" data-type="{{typeStr}}"><span class="badge"></span>{{text}}</li>

+<ul class="header">
+    <li class="content">下单时间：{{createTime}}</li>
+    <li class="content">订单编号：{{orderCode}}</li>
+    {{#if showMobile}}
+    <li class="content">手机订单</li>
+    {{/if}}
+</ul>

@@ -2,13 +2,8 @@
 {{#if orderList}}
 {{#orderList}}
     <div class="order" data-code="{{orderCode}}">
-        <ul class="header">
-            <li class="content">下单时间：{{createTime}}</li>
-            <li class="content">订单编号：{{orderCode}}</li>
-            {{#if showMobile}}
-            <li class="content"><span class="iconfont">&#xe62f;</span>手机订单</li>
-            {{/if}}
-        </ul>
+        {{> order/order-header}}
+
         <div class="table-body">
             {{> order/goods-box}}
             <div class="common-column special-border">

+{{# refund}}
+    <h4 class="third-title">选择退货商品</h4>
+    <div class="refund-goods clearfix" {{# speclialReason}} data-{{id}}="{{@index}}"{{/ speclialReason}}>
+        <input id="order-code" type="hidden" value="{{orderCode}}">
+        <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" data-skn="{{skn}}" data-skc="{{skc}}" data-sku="{{sku}}" data-price="{{price}}" data-type="{{typeId}}">{{> 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 class="refund-reason">
+                        <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>
+                {{> returns/special-reason}}
+            </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" class="name" placeholder="收款人支付宝账号"></dd>
+            <dd>姓名：<input type="text" class="account" placeholder="姓名"></dd>
+        </dl>
+        <dl class="unionpay hide">
+            <dd>
+                银行：
+                <select class="bank">
+                    <option>中国银行</option>
+                    <option>中国农业银行</option>
+                    <option>中国工商银行</option>
+                    <option>中国建设银行</option>
+                </select>
+                <input type="text" placeholder="开户支行">
+                <span class="blue" class="area">例：江苏省南京市奥体支行</span>
+            </dd>
+            <dd>账号：<input type="text" class="account" placeholder="收款人银行卡号"></dd>
+            <dd>姓名：<input type="text" class="name" placeholder="姓名"></dd>
+        </dl>
+    </div>
+    <div class="opt-btn">
+        <span class="apply-tip blue hide">请填写完整</span>
+        <div id="apply-btn" class="btn disable">提交申请</div>
+    </div>
+{{/ refund}}

+<div class="return-wrap user-order">
+    <div class="order">
+    {{# returnsList}}
+        {{> common/subtitle}}
+        <div class="table">
+            <ul class="header">
+                <li class="info">商品信息</li>
+                <li class="st">状态</li>
+                <li class="op">操作</li>
+            </ul>
+        </div>
+        {{#list}}
+        <div class="table">
+            {{> order/order-header}}
+            <div class="table-body">
+            {{> order/goods-box}}
+            <div class="common-column special-border">
+                <p class="refund-status">{{statusName}}</p>
+                <p class="subtext badge refund-type">{{refundStr}}</p>
+            </div>
+            <div class="common-column special-border operation">
+                <p class="subtext">取消申请</p>
+                <p class="subtext">查看详情</p>
+            </div>
+            </div>
+        </div>
+        {{/list}}
+    {{#if paginationOpts}}
+    {{{ pagination paginationOpts }}}
+    {{/if}}
+    {{/ returnsList}}
+    </div>
+</div>

+<div class="returns-wrap">
+    {{# returns}}
+        {{> common/subtitle}}
+
+        {{> refund}}
+    {{/ returns}}
+    </div>
+</div>

+<div class="special-reason">
+    <div class="clearfix">
+        <div class="left left-title">
+            <span class="red">*</span>问题描述：
+        </div>
+        <div class="left right-content">
+            <textarea class="mark-text"></textarea>
+        </div>
+    </div>
+    <div class="clearfix">
+        <div class="left left-title">
+            <span class="red">*</span>上传凭证：
+        </div>
+        <div class="left right-content">
+            <div class="img-wrap">
+                <div class="img-opt">
+                    <span>查看</span>
+                    <span>删除</span>
+                </div>
+                <div class="img-view"></div>
+            </div>
+            <div class="img-upload">
+                <span class="iconfont">&#xe61f;</span>
+            </div>
+            <span class="img-up-tip">1/4</span>
+        </div>
+    </div>
+</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 $refundTable = $('.refund-goods'),
+    $check = $('.check'),
+    $refundType = $('.refund-type'),
+    $typeInfo = $refundType.children('dl');
+
+var $applyBtn = $('#apply-btn');
+
+var orderCode = $('#order-code').val() || 0,
+    specialReason = $refundTable.data() || {},
+    payInfo = {  // 退款信息
+        type: 3, // 2--银行卡 3--支付宝 4--yoho币
+        dom: $typeInfo.eq(0)
+    };
+
+var checked;
+
+require('../plugins/check');
+
+lazyload($('img.lazy'));
+
+function restApplyBtn() {
+    if (checked.documents && checked.documents.length) {
+        $applyBtn.removeClass('disable');
+    } else {
+        $applyBtn.addClass('disable');
+    }
+}
+
+function packApplyInfo() {
+    var dom,
+        isLack = false,
+        payment = {},
+        resData = {
+            order_code: orderCode
+        };
+
+    if (checked && checked.documents) {
+        dom = checked.documents;
+        resData.goods = [];
+
+        // 打包商品信息
+        $.each(dom, function(key) {
+            var data = $(dom[key]).data(),
+                good = {
+                    last_price: data.price,
+                    goods_type: data.type,
+                    product_skn: data.skn,
+                    product_skc: data.skc,
+                    product_sku: data.sku
+                };
+
+            if (isLack || !data.reason) {
+                isLack = true;
+                return;
+            } else {
+                good.returned_reason = data.reason;
+
+                // if (specialReason.hasOwnProperty(data.reason)) {
+                    // remark: ,
+                    // returned_reason: 3,
+                    // evidence_images: ,
+                // }
+            }
+            resData.goods.push(good);
+        });
+
+        // 处理退款信息
+        if (payInfo) {
+            payment = {
+                return_amount_mode: payInfo.type
+            };
+            switch (payInfo.type) {
+                case 2:
+                    payment.bank_name = payInfo.dom.find('.bank').val();
+                    payment.bank_card = payInfo.dom.find('.account').val();
+                    payment.payee_name = payInfo.dom.find('.name').val();
+                    break;
+                case 3:
+                    payment.alipay_account = payInfo.dom.find('.account').val();
+                    payment.alipay_name = payInfo.dom.find('.name').val();
+                    break;
+                default:
+                    isLack = true;
+                    break;
+            }
+
+            // 检查信息完整性
+            $.each(payment, function(key) {
+                if (!payment[key]) {
+                    isLack = true;
+                }
+            });
+            resData.payment = payment;
+        }
+    }
+
+    if (isLack) {
+        return false;
+    }
+
+    return resData;
+}
+
+$check.check({
+    type: 'checkbox',
+    onChange: function() {
+        checked = $check.check('getChecked');
+        restApplyBtn();
+    }
+});
+
+$refundTable.on('change', '.refund-reason', function() {
+    var $this = $(this),
+        $specialDom = $this.parent().siblings('.special-reason'),
+        val = $this.val();
+
+    if (specialReason.hasOwnProperty(val)) {
+        $specialDom.slideDown();
+    } else {
+        $specialDom.slideUp();
+    }
+    $specialDom.siblings('.check').data({reason: val});
+});
+
+$refundType.on('click', '.type-item', function() {
+    var $this = $(this),
+        index;
+
+    if (!$this.hasClass('cur')) {
+        if ($this.hasClass('ali-item')) {
+            payInfo.type = 3;
+        } else {
+            payInfo.type = 2;
+        }
+        index = $this.index();
+
+        // 切换退款卡片
+        $this.addClass('cur').siblings('.cur').removeClass('cur');
+
+        // 切换退款信息输入容器
+        payInfo.dom = $typeInfo.eq(index);
+        $typeInfo.addClass('hide');
+        payInfo.dom.removeClass('hide');
+    }
+});
+
+$applyBtn.click(function() {
+    var $tip = $applyBtn.siblings('.apply-tip'),
+        param = packApplyInfo();
+
+    if (!param) {
+        $tip.removeClass('hide');
+        return;
+    } else {
+        $tip.addClass('hide');
+    }
+
+    $.ajax({
+        type: 'POST',
+        url: '/me/return/refund/apply',
+        data: param,
+        success: function(data) {
+            if (data.code === 200) {
+                if (data.data && data.data.refer) {
+                    location.href = data.data.refer;
+                }
+                $tip.text('申请成功').removeClass('hide');
+            }
+        }
+    });
+});

@@ -103,6 +103,8 @@
 
 @import "address";
 @import "order/index";
+@import "return/index";
 @import "currency";
 @import "setting/index";
 @import "favorite/index";
+@import "returns";

+.returns-wrap {
+    font-size: 14px;
+
+    .third-title {
+        font-size: 16px;
+        font-weight: bold;
+        padding-bottom: 20px;
+    }
+
+    .special-reason {
+        padding-top: 20px;
+        display: none;
+
+        .left-title {
+            width: 150px;
+            padding-left: 54px;
+
+            .red {
+                color: #d93549;
+                margin-right: 3px;
+            }
+        }
+
+        .right-content {
+            width: 570px;
+        }
+
+        .mark-text {
+            width: 570px;
+            height: 120px;
+            resize: none;
+            border-color: #eee;
+        }
+
+        .img-wrap,
+        .img-upload {
+            width: 60px;
+            height: 60px;
+            border: 1px dashed #eee;
+            float: left;
+            margin-right: 10px;
+        }
+
+        .img-upload {
+            line-height: 60px;
+            text-align: center;
+            color: #dfdfdf;
+            cursor: pointer;
+
+            .iconfont {
+                font-size: 34px;
+            }
+        }
+
+        .img-wrap {
+            position: relative;
+        }
+
+        .img-wrap:hover .img-opt {
+            display: block;
+        }
+
+        .img-opt {
+            width: 100%;
+            height: 20px;
+            line-height: 20px;
+            background: #555;
+            font-size: 12px;
+            color: #fff;
+            opacity: 0.7;
+            position: absolute;
+            text-align: center;
+            display: none;
+
+            > * {
+                display: inline-block;
+                cursor: pointer;
+            }
+        }
+    }
+
+    .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;
+            }
+
+            .special-reason {
+                width: 100%;
+                height: auto;
+                line-height: 1.5;
+                text-align: left;
+            }
+        }
+    }
+
+    .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;
+            }
+
+            select,
+            input {
+                height: 24px;
+                border: 1px solid #eee;
+                padding: 0 8px;
+            }
+
+            .bank {
+                border-color: #1d1d1d;
+            }
+        }
+    }
+}

@@ -9,20 +9,6 @@
     border-bottom: 1px solid $liBorderColor;
     z-index: 0;
 
-    .badge {
-        min-width: 16px;
-        line-height: 16px;
-        display: inline-block;
-        padding: 0 5px;
-        position: absolute;
-        top: 0;
-        right: 14px;
-        background-color: $skyBlue;
-        color: #fff;
-        border-radius: 9px;
-        font-size: 12px;
-    }
-
     .tabs {
         display: inline-block;
         height: $liHeight;

@@ -14,6 +14,20 @@
         margin: $space 0;
     }
 
+    .badge {
+        min-width: 16px;
+        line-height: 16px;
+        display: inline-block;
+        padding: 0 5px;
+        position: absolute;
+        top: 0;
+        right: 14px;
+        background-color: $skyBlue;
+        color: #fff;
+        border-radius: 9px;
+        font-size: 12px;
+    }
+
     .header {
         height: $headerHeight;
         line-height: $headerHeight;

+@import "list"

+.return-wrap {
+    .table {
+        width: 100%;
+
+        .header {
+            .info {
+                width: 496px;
+                text-align: left;
+            }
+
+            .st,
+            .op {
+                width: 206px;
+            }
+        }
+
+        .goods-container {
+            .for-return {
+                display: block;
+            }
+        }
+
+        .no-price {
+            .good-info {
+                border-right: none;
+            }
+
+            .good-info {
+                .detail {
+                    width: 408px;
+                }
+            }
+        }
+
+        .common-column {
+            width: 208px;
+
+            .refund-status {
+                margin-bottom: 10px;
+            }
+            .refund-type {
+                position: static;
+            }
+        }
+    }
+
+    .blk-pagination {
+        text-align: center;
+    }
+}