Merge branch 'feature/return' into develop

@@ -11,7 +11,7 @@ const _ = require('lodash');
 
 
 const index = (req, res, next) => {
-    const uid = global.yoho.uid || '8050882';
+    const uid = global.yoho.uid;
     const page = req.query.page;
 
     returns.getUserReturn(uid, page).then(result => {
@@ -27,13 +27,9 @@ const index = (req, res, next) => {
     }).catch(next);
 };
 
-const detail = (req, res, next) => {
-    next();
-};
-
 const refund = (req, res, next) => {
-    let uid = req.user.uid || '8050882';
-    let code = parseInt(req.params.orderCode, 10) || '160192757';
+    let uid = req.user.uid;
+    let code = parseInt(req.params.orderCode, 10);
 
     if (!uid || !code) {
         return next();
@@ -67,8 +63,8 @@ const refundApply = (req, res, next) => {
 };
 
 const refundDetail = (req, res, next) => {
-    let applyId = parseInt(req.params.applyId, 10) || '429528',
-        uid = req.user.uid || '8050882';
+    let applyId = parseInt(req.params.applyId, 10),
+        uid = req.user.uid;
 
     if (!uid || !applyId) {
         return next();
@@ -84,7 +80,7 @@ const refundDetail = (req, res, next) => {
 
 const exchange = (req, res, next) => {
     const code = req.params.orderCode;
-    const uid = req.user.uid || '8050882';
+    const uid = req.user.uid;
 
     returns.getChangeGoodsList(code, uid).then(result => {
         res.display('index', {
@@ -108,68 +104,75 @@ const getProductInfo = (req, res, next) => {
     }).catch(next);
 };
 
-const detailExchange = (req, res) => {
-    // const uid = global.yoho.uid || '8050882';
-    // const page = req.query.page;
-
-    res.display('index', {
-        page: 'exchange-detail',
-        isMe: true,
-        content: {
-            nav: mcHandler.getMeCrumb('我的退/换货'),
-            navigation: mcHandler.getSideMenu('我的退/换货'),
-            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: ''
-                    }
-                ]
+const exchangeDeatail = (req, res) => {
+    let id = parseInt(req.params.applyId, 10),
+        uid = req.user.uid;
+
+    // let id = 125946;
+    // let uid = 8050560;
+
+    returns.getExchangeDetailData(id, uid).then(result => {
+
+        res.display('index', {
+            page: 'exchange-detail',
+            isMe: true,
+            content: {
+                nav: mcHandler.getMeCrumb('我的退/换货'),
+                navigation: mcHandler.getSideMenu('我的退/换货'),
+                banner: 'http://placehold.it/{width}x{height}',
+                returns: {
+                    exchange: result.exchangeDetail
+                }
             }
-        }
+        });
+
     });
 };
 
+const exchangeSubmit = (req, res, next) => {
+    const uid = req.user.uid || '8050882';
+
+    returns.submitChange(req.query, uid).then(result => {
+        res.json(result);
+    }).catch(next);
+};
+
+const cancelApply = (req, res, next) => {
+    const uid = req.user.uid;
+    const id = req.body.id;
+    const type = req.body.type === 'exchange';
+
+    if (!uid || !id) {
+        return next();
+    }
+
+    returns.cancelReturnApply(id, uid, type).then(result => {
+        res.json(result);
+    }).catch(next);
+};
+
+const setEepress = (req, res, next) => {
+    const uid = req.user.uid;
+    const param = req.body;
+
+    if (!uid) {
+        return next();
+    }
+
+    returns.setBackEepress(uid, param).then(result => {
+        res.json(result);
+    }).catch(next);
+};
+
 module.exports = {
     index,
-    detail,
     refund,
     refundApply,
     exchange,
     getProductInfo,
     refundDetail,
-    detailExchange
+    exchangeDeatail,
+    exchangeSubmit,
+    cancelApply,
+    setEepress
 };

-/**
+ /**
  * 商品基本信息
  * @author: yyq<yanqing.yang@yoho.cn>
  * @date: 2016/7/19
@@ -7,6 +7,12 @@
 
 const api = global.yoho.API;
 
+const getExpressCompanyAsync = () => {
+    return api.get('', {
+        method: 'app.express.getExpressCompany'
+    }, {code: 200});
+};
+
 const getOrderInfoAsync = (orderCode, uid, sessionKey) => {
     return api.get('', {
         method: 'app.SpaceOrders.info',
@@ -58,12 +64,54 @@ const getProductInfoAsync = (productId, productSkn) => {
     });
 };
 
+const getExchangeDetail = (id, uid) => {
+    return api.get('', {
+        method: 'app.change.detail',
+        id: id,
+        uid: uid
+    });
+};
+
+const changeSubmitAsync = (data, uid) => {
+    const requestData = Object.assign(data, {
+        method: 'app.change.submit',
+        uid: uid,
+        goods: JSON.stringify(data.goods)
+    });
+
+    return api.get('', requestData, {code: 200});
+};
+
+const setExpressNumberAsync = (uid, param, isChange) => {
+    return api.post('', {
+        method: isChange ? 'app.change.setexpress' : 'app.refund.setexpress',
+        uid: uid,
+        id: param.id,
+        express_id: param.companyId,
+        express_number: param.number,
+        express_company: param.companyName
+    });
+};
+
+const cancelReturnAsync = (id, uid, isChange) => {
+    return api.post('', {
+        method: isChange ? 'app.change.cancel' : 'app.refund.cancel',
+        id: id,
+        uid: uid
+    });
+};
+
 module.exports = {
+    getExpressCompanyAsync,
     getOrderInfoAsync,
     getRefundGoodsAsync,
     getChangeGoodsListAsync,
     getProductInfoAsync,
     getRefundDetailAsync,
-    refundSubmitAsync
+    refundSubmitAsync,
+    getExchangeDetail,
+    changeSubmitAsync,
+    setExpressNumberAsync,
+    cancelReturnAsync
 };
 

@@ -12,10 +12,19 @@ const _ = require('lodash');
 const mcHandler = require('./menu-crumb-handler');
 const returnsAPI = require('./returns-api');
 
+// const logger = global.yoho.logger;
+
 const helpers = global.yoho.helpers;
 
 const pageSize = 10;
 
+const returnAddress = {
+    address: '江苏省南京市江宁区江宁经济技术开发区苏源大道87号YOHO!BUY(有货)物流中心东一楼',
+    name: 'YOHO!',
+    code: '210000',
+    phone: '17714194699'
+};
+
 // const _reduceArrByProductSku = data => {
 //     const d = [];
 //
@@ -92,6 +101,12 @@ const _calcStatusRate = (num, total) => {
     return rate;
 };
 
+const submitChange = (data, uid) => {
+    return returnsAPI.changeSubmitAsync(data, uid).then(result => {
+        return result;
+    });
+};
+
 const _setDefaultStatus = (type) => {
     const list = ['提交申请', '审核通过', '商品寄回', '商品入库', `${type}完成`];
     let statusList = [];
@@ -192,11 +207,13 @@ const _setRefundDetailData = (data) => {
         id: data.id || 0
     };
 
+    data.status = 20;
+
     switch (data.status) {
         case 10:
             resData.orderReview = {pass: true};
             resData.refundExpress = true;
-            resData.refundAddress = true;
+            resData.refundAddress = returnAddress;
             break;
         case 20:
             resData.refundExpress = true;
@@ -205,13 +222,36 @@ const _setRefundDetailData = (data) => {
             resData.backStorage = true;
             break;
         case 40:
-            resData.refundSure = true;
+            resData.refundSure = {
+                mode: data.return_amount_mode_name,
+                account: data.return_amount_mode_name,
+                amount: data.return_amount_total,
+                coin: data.use_yoho_coin_num
+            };
+            break;
+        case 91:
+            resData.cancelApply = true;
             break;
         default:
             resData.orderReview = true;
             break;
     }
 
+    if (resData.refundExpress) {
+        resData.refundExpress = {expressList: data.expressList};
+
+        if (_.get(data, 'notice.id', 0) === 20) {
+            let company = _.get(data, 'notice.express_company'),
+                key = _.findKey(data.expressList, {name: company});
+
+            Object.assign(resData.refundExpress, {
+                id: key ? data.expressList[key].id : 0,
+                company: company,
+                number: _.get(data, 'notice.express_number', 0)
+            });
+        }
+    }
+
     let goods = [];
 
     _.forEach(data.goods_list, value => {
@@ -236,18 +276,75 @@ const _setRefundDetailData = (data) => {
     return resData;
 };
 
+const _setExpressData = (data) => {
+    var resData = [];
+
+    if (!_.isEmpty(data)) {
+        let list = [];
+
+        _.forEach(data, value => {
+            list = list.concat(value);
+        });
+        _.forEach(list, value => {
+            resData.push({
+                id: value.id,
+                name: value.company_name
+            });
+        });
+    }
+
+    return resData;
+};
+
+const _setExchangeDetailData = (data) => {
+    data = camelCase(data);
+
+    data.status = 10;
+
+    let list = {};
+
+    switch (data.status) {
+        case 0:
+            list.audit = true;
+            break;
+        case 10:
+            list.through = true;
+
+            if (data.deliveryTpyeName === '寄回换货') {
+                list.courier = true;
+            }
+            break;
+        case 50:
+            list.send = true;
+            list.auditSuccess = true;
+            break;
+        case 40:
+            list.finish = true;
+            list.auditSuccess = true;
+            break;
+        case 91:
+            list.cancel = true;
+            break;
+        default:
+            break;
+    }
+
+    return list;
+};
+
 const getRefundGoodsData = (orderCode, uid) => {
     return returnsAPI.getRefundGoodsAsync(orderCode, uid).then(result => {
         let resData = {};
 
         Object.assign(resData, _setSideMenu('我的退/换货'));
 
-
         resData.returns = {
             title: '退货申请',
             refund: _setDefaultStatus('退货') || {}
         };
 
+        // console.log(resData);
+
         if (result.data) {
             Object.assign(resData.returns.refund, _setRefundGoodList(result.data), {
                 orderCode: orderCode
@@ -259,25 +356,35 @@ const getRefundGoodsData = (orderCode, uid) => {
 };
 
 const getRefundDetailData = (applyId, uid) => {
-    return returnsAPI.getRefundDetailAsync(applyId, uid).then(result => {
+    return Promise.all([
+        returnsAPI.getRefundDetailAsync(applyId, uid),
+        returnsAPI.getExpressCompanyAsync()
+    ]).then(result => {
         let resData = {};
 
-        resData = {
+        Object.assign(resData, _setSideMenu('我的退/换货'));
+
+        resData.returns = {
             title: '退货申请',
             refundDetail: {}
         };
-        Object.assign(resData, _setSideMenu('我的退/换货'));
 
-        if (result.data) {
-            let data = result.data;
+        if (result[0] && result[0].data) {
+            let data = result[0].data;
+
+            if (result[1] && result[1].data) {
+                data.expressList = _setExpressData(result[1].data);
+            }
 
-            // console.log(_setRefundDetailData(result.data));
-            Object.assign(resData.refundDetail, _setReturnStatus(data.statusList, !data.status));
+            // 设置状态进度
+            Object.assign(resData.returns.refundDetail, _setReturnStatus(data.statusList, !data.status));
+
+            // 设置退货详情信息
+            Object.assign(resData.returns.refundDetail, _setRefundDetailData(data));
 
-            Object.assign(resData.refundDetail, _setRefundDetailData(data));
         }
 
-        return {returns: resData};
+        return resData;
     });
 };
 
@@ -289,7 +396,7 @@ const saveRefund = (orderCode, uid, goods, payment) => {
                     return {
                         code: 200,
                         data: {
-                            refer: helpers.urlFormat(`/return/refund/detail/${subRes.data.apply_id}`)
+                            refer: `/me/return/refund/detail/${subRes.data.apply_id}`
                         }
                     };
                 }
@@ -324,9 +431,9 @@ const getChangeGoodsList = (orderCode, uid) => {
         if (result && result.data) {
             data = camelCase(result.data);
 
-
             // data.goodsList = _reduceArrByProductSku(data.goodsList);
             data.hidePrice = true;
+            data.orderCode = orderCode;
 
             data.goodsList.forEach(good => {
                 good.showCheckbox = true;
@@ -344,11 +451,84 @@ const getChangeGoodsList = (orderCode, uid) => {
     });
 };
 
+const getExchangeDetailData = (id, uid) => {
+    return Promise.all([
+        returnsAPI.getExchangeDetail(id, uid),
+        returnsAPI.getExpressCompanyAsync()
+    ]).then(result => {
+
+        let exchangeData = {};
+
+        Object.assign(exchangeData, _setSideMenu('我的退/换货'));
+        exchangeData = {
+            title: '换货申请',
+            exchangeDetail: {}
+        };
+
+        // if (result.data) {
+        //     // console.log(_setRefundDetailData(result.data));
+
+        //     Object.assign(exchangeData.exchangeDetail, _setReturnStatus(result.data.statusList));// 头部
+
+        //     Object.assign(exchangeData.exchangeDetail, _setExchangeDetailData(result.data));
+
+        //     Object.assign(exchangeData.exchangeDetail, camelCase(result.data));
+        // }
+
+        if (result[0] && result[0].data) {
+
+            let data = result[0].data;
+
+            if (result[1] && result[1].data) {
+                data.expressList = _setExpressData(result[1].data);
+            }
+
+            Object.assign(exchangeData.exchangeDetail, _setReturnStatus(data.statusList));// 头部
+
+            Object.assign(exchangeData.exchangeDetail, _setExchangeDetailData(data));
+
+            Object.assign(exchangeData.exchangeDetail, camelCase(data));
+
+        }
+
+        // console.log(exchangeData.exchangeDetail.expressList);
+        return exchangeData;
+    });
+};
+
+const cancelReturnApply = (id, uid, type) => {
+    return returnsAPI.cancelReturnAsync(id, uid, type).then(result => {
+        let resData = result || {
+            code: 400,
+            message: '取消失败'
+        };
+
+        return resData;
+    });
+};
+
+const setBackEepress = (uid, param) => {
+    const type = param.type === 'exchange';
+
+    return returnsAPI.setExpressNumberAsync(uid, param, type).then(result => {
+        let resData = result || {
+            code: 400,
+            message: '设置寄回单号失败'
+        };
+
+        return resData;
+    });
+};
+
 module.exports = {
     getUserReturn,
     getRefundGoodsData,
     getChangeGoodsList,
     getProductInfo,
     getRefundDetailData,
-    saveRefund
+    saveRefund,
+    getExchangeDetailData,
+    submitChange,
+    cancelReturnApply,
+    setBackEepress
 };

@@ -38,10 +38,12 @@ router.get('/return', returns.index);
 router.get('/return/refund/:orderCode', returns.refund);
 router.get('/return/exchange/:orderCode', returns.exchange);
 router.get('/return/refund/detail/:applyId', returns.refundDetail);
-router.get('/return/exchange/detail', returns.detailExchange);
-router.get('/return/:returnId', returns.detail);
+router.get('/return/exchange/detail/:applyId', returns.exchangeDeatail);
 router.post('/return/refund/apply', returns.refundApply);
+router.post('/return/cancel', returns.cancelApply);
+router.post('/return/setEepress', returns.setEepress);
 router.get('/return/getProductInfo', returns.getProductInfo);
+router.get('/return/submitExchange', returns.exchangeSubmit);
 
 // 个人中心首页/收货地址
 router.get('/address', auth, address.index);

@@ -35,11 +35,6 @@
                 {{#if returns}}
                     {{> returns}}
                 {{/if}}
-                
-                {{!-- 换货详情 --}}
-                {{#if exchange}}
-                    {{> exchange-detail}}
-                {{/if}}
 
                 {{!-- 我的退换货列表 --}}
                 {{#if returnsList}}

 {{# exchange}}
-<div class="exchange-detail-page">
-    {{#if audit}}
-    <p class="state"><span class="iconfont">&#xe618;</span>换货申请审核中</p>
-    {{/if}}
+{{> returns/returns-status}}
 
-    {{#if through}}
-     <p class="state"><span class="iconfont">&#xe60f;</span>换货申请已通过</p>
-    {{/if}}
-
-    {{#if send}}
-     <p class="state"><span class="iconfont">&#xe61a;</span>换货商品已发出</p>
-    {{/if}}
+<div class="exchange-detail-page" data-id="{{id}}">
+    <div class="exchange-detail">
+        {{#if audit}}
+        <p class="state"><span class="iconfont">&#xe618;</span>换货申请审核中</p>
+        {{/if}}
 
-    {{#if finish}}
-     <p class="state"><span class="iconfont">&#xe60f;</span>换货完成</p>
-    {{/if}}
+        {{#if through}}
+         <p class="state"><span class="iconfont">&#xe60f;</span>换货申请已通过</p>
+        {{/if}}
 
-    <div class="way">
+        {{#if send}}
+         <p class="state"><span class="iconfont">&#xe61a;</span>换货商品已发出</p>
+        {{/if}}
 
         {{#if finish}}
-        <p class="contact">如有疑问，请联系<span class="iconfont">&#xe61c;</span>在线客服</p>
-        {{else}}
-        <p class="way-title">您已选择{{way}}</p>
-        <p>请将商品连同吊牌、包装、发货单（如无发货单，您可找张白纸上注明订单编号，收货人姓名及手机号码）、发票（如有）、赠品（如有）一并保存，
-        如有遗漏将影响您的退换货进度，敬请谅解
-        </p>
+         <p class="state"><span class="iconfont">&#xe60f;</span>换货完成</p>
         {{/if}}
 
-        {{#if audit}}
-        <p class="cancel">如果您不想换货了，您可以<span class="cancel-btn">取消申请</span></p>
+        {{#if cancel}}
+         <p class="state">您已取消申请</p>
         {{/if}}
 
-        {{#if finish}}
-        <div class="order">
-            <span class="check">查看</span>
-            <span class="exchange-order">换货订单</span>
-        </div>
+        <div class="way">
+
+            {{#if finish}}
+            <p class="contact">如有疑问，请联系<span class="iconfont">&#xe61c;</span>在线客服</p>
+            {{else}}
+            <p class="way-title">您已选择{{deliveryTpyeName}}</p>
+            <p>请将商品连同吊牌、包装、发货单（如无发货单，您可找张白纸上注明订单编号，收货人姓名及手机号码）、发票（如有）、赠品（如有）一并保存，
+            如有遗漏将影响您的退换货进度，敬请谅解
+            </p>
+            {{/if}}
+
+            {{#if audit}}
+            <p class="cancel">如果您不想换货了，您可以<span class="cancel-btn">取消申请</span></p>
+            {{/if}}
+
+            
+           {{#if through}}
+            <div class="return-express">
+                {{#if number}}
+                    <div class="show-content" data-id="{{id}}">
+                        <h4 class="third-title">寄回物流信息 <label class="reset-express btn white">修改</label></h4>
+                        <p>请您耐心等待，我们会在收到货物后快速为您处理</p>
+                        <p>物流公司：{{company}}</p>
+                        <p>快递单号：{{number}}</p>
+                    </div>
+                {{/if}}
+
+                <div class="edit-content{{#if number}} hide{{/if}}"{{# expressList}} data-{{id}}="{{name}}"{{/ expressList}}>
+                    <h4 class="third-title">填写物流</h4>
+                    <p>请您在<span class="blue">7月30日24:00</span>前将商品寄回并填写物流，逾期将自动取消申请</p>
+                    <dl class="express-wrap">
+                        <dd>
+                            物流公司：
+                            <select class="express-company">
+                                {{# expressList}}
+                                    <option value="{{id}}">{{name}}</option>
+                                {{/ expressList}}
+                            </select>
+                        </dd>
+                        <dd>
+                            快递单号：
+                            <input type="text" class="express-code" value="{{number}}">
+                        </dd>
+                        <dd>
+                            <span class="submit-express btn">提交</span>
+                            <span class="error-tip blue hide">请填写完整寄回物流信息</span>
+                        </dd>
+                    </dl>
+                </div>
+            </div>
         {{/if}}
-    </div>
 
-    <div class="adress">
-        <p class="adress-title">收货地址<span class="modify-btn">修改</span></p>
-        <div class="adress-detail">
-           <p>所在区域：江苏省  南京市  雨花台区</p>
-           <p>收 货 人：赵四</p> 
-           <p>详细地址：西善桥北路 109 号</p> 
-           <p>联系电话：17714194699</p> 
+            {{#if auditSuccess}}
+            <div class="order">
+                <span class="check">查看</span>
+                <span class="exchange-order">换货订单</span>
+            </div>
+            {{/if}}
+        </div>
+
+        <div class="address">
+            <p class="address-title">收货地址<span class="modify-btn">修改</span></p>
+            <div class="address-detail">
+               <p>所在区域：{{city}}{{county}}</p>
+               <p>收 &nbsp货 &nbsp人：{{consigneeName}}</p> 
+               <p>详细地址：{{address}}</p> 
+               <p>联系电话：{{mobile}}</p> 
+            </div>
+
+            <div class="address-modify">
+                
+            </div>
         </div>
     </div>
 
@@ -61,34 +110,32 @@
         </div>
 
         <div class="table">
-            {{# goods}}
+            {{# goodsList}}
             <div class="table-body">
                 <div class="goods-info">
-                    <img class="lazy" data-original="{{image img 70 90}}">
+                    <img src="{{image goodsImage 70 90}}">
                     <div class="info">
-                        <p class="good-name">{{name}}</p>
-                        <p>颜色：{{color}}&nbsp;尺码：{{size}}</p>
+                        <p class="good-name">{{productName}}</p>
+                        <p>颜色：{{colorName}}&nbsp;尺码：{{sizeName}}</p>
                         <p>×{{num}}</p>
                     </div>
                 </div>
                 <div class="common-column special-border">
-                    <p class="reason">{{reason}}发错货</p>
+                    <p class="reason">{{reasonName}}</p>
                 </div>
                 <div class="common-column special-border operation">
-                    <p class="subtext">color: {{exchangeColor}}<br>size: {{exchangeSize}}</p>
+                    <p class="subtext">color: {{newColorName}}<br>size: {{newSizeName}}</p>
                 </div>
             </div>
-            {{/ goods}}
-            {{# reasonInfo}}
             <div class="reason-info">
-                <span>问题描述：{{problem}}</span>
+                <span>问题描述：{{reasonName}}</span>
                 <div class="reason-img">照片凭证：
                     <div class="evidence">
                         <img src="{{image img 70 90}}">
                     </div>
                 </div>
             </div>
-            {{/ reasonInfo}}
+            {{/ goodsList}}
         </div>
     </div>
 </div>

@@ -36,6 +36,7 @@
                 </p>
                 <p>
                     我们会在入库后的1-3个工作日内处理您的退款，如有疑问，请联系
+                    <span class="iconfont">&#xe61c;</span>
                     <span>在线客服</span>
                 </p>
             </div>
@@ -47,47 +48,68 @@
                     <span class="iconfont blue">&#xe60f;</span>
                     <span class="blue">退款完成</span>
                 </p>
-                <p>退款方式：<em>由于银行内部处理流程的差异，储蓄卡需要3-7个工作日到账，信用卡需要7-15个工作日到账</em></p>
-                <p class="tip-pad-top">退款账户：</p>
-                <p class="tip-pad-top">金额：</p>
-                <p class="tip-pad-top">有货币：</p>
+                <p>退款方式：{{mode}}<em>由于银行内部处理流程的差异，储蓄卡需要3-7个工作日到账，信用卡需要7-15个工作日到账</em></p>
+                <p class="tip-pad-top">退款账户：{{account}}</p>
+                <p class="tip-pad-top">金额：¥{{amount}}</p>
+                <p class="tip-pad-top">有货币：{{coin}}</p>
             </div>
         {{/ refundSure}}
 
+        {{# cancelApply}}
+            <div class="top-tip">
+                <span class="blue">您已取消申请</span>
+            </div>
+        {{/ cancelApply}}
+
         {{# refundExpress}}
-        <div class="return-express">
-            <h4 class="third-title">填写物流</h4>
-            <p>请您在<span class="blue">7月30日24:00</span>前将商品寄回并填写物流，逾期将自动取消申请</p>
-            <dl class="express-wrap">
-                <dd>
-                    物流公司：
-                    <select>
-                        <option>顺丰</option>
-                        <option>申通</option>
-                    </select>
-                </dd>
-                <dd>
-                    快递单号：
-                    <input type="text">
-                </dd>
-                <dd>
-                    <span class="submit-express btn">提交</span>
-                </dd>
-            </dl>
-        </div>
+            <div class="return-express">
+                {{#if number}}
+                    <div class="show-content" data-id="{{id}}">
+                        <h4 class="third-title">寄回物流信息 <label class="reset-express btn white">修改</label></h4>
+                        <p>请您耐心等待，我们会在收到货物后快速为您处理</p>
+                        <p>物流公司：{{company}}</p>
+                        <p>快递单号：{{number}}</p>
+                    </div>
+                {{/if}}
+
+                <div class="edit-content{{#if number}} hide{{/if}}"{{# expressList}} data-{{id}}="{{name}}"{{/ expressList}}>
+                    <h4 class="third-title">填写物流</h4>
+                    <p>请您在<span class="blue">7月30日24:00</span>前将商品寄回并填写物流，逾期将自动取消申请</p>
+                    <dl class="express-wrap">
+                        <dd>
+                            物流公司：
+                            <select class="express-company">
+                                <option value="0">选择快递公司</option>
+                                {{# expressList}}
+                                    <option value="{{id}}">{{name}}</option>
+                                {{/ expressList}}
+                            </select>
+                        </dd>
+                        <dd>
+                            快递单号：
+                            <input type="text" class="express-code" placeholder="填写快递单号" value="{{number}}">
+                        </dd>
+                        <dd>
+                            <span class="submit-express btn">提交</span>
+                            <span class="error-tip blue hide">请填写完整寄回物流信息</span>
+                        </dd>
+                    </dl>
+                </div>
+            </div>
         {{/ refundExpress}}
 
         {{# refundAddress}}
             <div class="return-address">
                 <h4 class="third-title">寄回地址</h4>
-                <p>地址：{{address}}</p>
-                <p>收件人：{{name}}</p>
-                <p>邮编：{{code}}</p>
+                <p>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：{{address}}</p>
+                <p>收&nbsp;&nbsp;件&nbsp;&nbsp;人：{{name}}</p>
+                <p>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;编：{{code}}</p>
                 <p>联系电话：{{phone}}</p>
             </div>
         {{/ refundAddress}}
 
         <div class="refund-detail-goods">
+            <h4 class="third-title">退货商品&nbsp;&nbsp;&nbsp;&nbsp;订单编号：{{id}}</h4>
             <ul class="goods-header">
                 <li class="info">商品信息</li>
                 <li>退货原因</li>

-<div class="return-wrap user-order change">
+<div class="returns-wrap user-order change">
     {{#returnsChange}}
     {{> common/subtitle}}
-    <div class="order">
+    <div class="order" data-code="{{orderCode}}">
+        <span class="box-title">选择换货商品</span>
         <div class="table returns">
             <ul class="header">
                 <li class="info">商品信息</li>
@@ -11,12 +12,11 @@
             {{#goodsList}}
             <div class="change-info-box">
                 <div class="table-body">
-                    <div class="goods-container no-price"  data-id="{{productId}}" data-skn="{{productSkn}}">
+                    <div class="goods-container no-price" data-goods-id="{{goodsId}}" data-sku="{{productSku}}"  data-id="{{productId}}" data-skn="{{productSkn}}" data-goods-type="{{goodsTypeId}}" data-price="{{lastPrice}}" data-skc={{productSkc}}>
                         {{# showCheckbox}}
+                        <span class="checkbox-box">
                             {{> icon/checkbox}}
-                            <!--
-                        <span class="iconfont checkbox {{#if checked}}checked{{/if}}">{{#if checked}}&#xe602;{{^}}&#xe601;{{/if}}</span>
-                            -->
+                        </span>
                         {{/ showCheckbox}}
                         {{> order/good-info}}
                         <div class="sub-column">
@@ -35,19 +35,53 @@
                     <div class="group color">
                         <span class="title">
                             <span class="asterisk">*</span>
-                            换货Color： <span class="color-text"  data-color={{colorId}}>{{colorName}}</span>
+                            换货Color： <span class="color-text"  data-color={{colorName}}>{{colorName}}</span>
                         </span>
                     </div>
                     <div class="group size">
                         <span class="title">
                             <span class="asterisk">*</span>
-                            换货Size： <span class="size-text" data-size="{{sizeId}}">{{sizeName}}</span>
+                            换货Size： <span class="size-text" data-size="{{sizeName}}">{{sizeName}}</span>
                         </span>
                     </div>
                 </div>
+                {{> returns/special-reason}}
             </div>
+
             {{/goodsList}}
         </div>
     </div>
     {{/returnsChange}}
+    <div class="change-type">
+        <span class="box-title">换货方式</span>
+        <span class="type active" data-type="10">寄回换货</span>
+        <span class="type" data-type="11">上门取货</span>
+    </div>
+    <div class="express-info-box">
+        <span class="box-title">收货信息</span>
+        <div class="application-form">
+            <div class="input-group">
+                <span class="asterisk">*</span>
+                <label for="city">所在区域：</label>
+                <span id="city" class="cascading-address"></span>
+            </div>
+            <div class="input-group">
+                <span class="asterisk">*</span>
+                <label for="person">收货人：</label>
+                <input id="user" class="input" type="text" name="person">
+            </div>
+            <div class="input-group">
+                <span class="asterisk">*</span>
+                <label for="address">详细地址：</label>
+                <input id="addr" class="input" type="text" name="address">
+            </div>
+            <div class="input-group">
+                <span class="asterisk">*</span>
+                <label for="mobile">手机号码：</label>
+                <input id="mob" class="input" type="text" name="mobile">
+            </div>
+        </div>
+    </div>
+
+    <span class="btn confirm">确定</span>
 </div>

-<div class="return-wrap user-order">
+<div class="returns-wrap user-order">
     <div class="order">
     {{# returnsList}}
         {{> common/subtitle}}

@@ -6,6 +6,6 @@
 
         {{> refund-detail}}
 
-        {{> exchange}}
+        {{> exchange-detail}}
     {{/ returns}}
 </div>

-<select id="exchange-reasons" name="exchange-reasons">
+<select class="exchange-reasons" name="exchange-reasons">
     <option value="0">请选择换货原因</option>
     {{# exchangeReason}}
     <option value="{{id}}">{{name}}</option>
     {{/ exchangeReason}}
+    {{# specialExchangeReason}}
+    <option value="{{id}}" class="is-special">{{name}}</option>
+    {{/ specialExchangeReason}}
 </select>

 {{# returnStstus}}
     <div class="returns-status">
         <div class="back-wrap">
-            <div class="progress" style="width: {{rate}}"></div>
+            <div class="progress-bar" style="width: {{rate}}"></div>
             <div class="visual-state">
                 <ul>
                     {{# statusList}}

@@ -12,17 +12,10 @@
             <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
+</div>

+var $ = require('yoho-jquery'),
+    Confirm = require('../plugins/dialog').Confirm;
+
+var id = $('.exchange-detail-page').data('id');
+
+
+var $mainWrap = $('.exchange-detail-page'),
+    $submitExpress = $mainWrap.find('.submit-express'),
+    $showExpress = $mainWrap.find('.show-content'),
+    $editExpress = $mainWrap.find('.edit-content');
+
+var $expressCompany = $('.express-company'),
+    $expressCode = $('.express-code');
+
+var expressList = $editExpress.data();
+
+function cancelExchangeApply() {
+    $.ajax({
+        type: 'POST',
+        url: '/me/return/cancel',
+        data: {
+            id: id,
+            type: 'exchange'
+        },
+        success: function(data) {
+            if (data.code === 200) {
+                location.reload();
+                $('.exchange-detail').html('<p class="state">您已取消成功</p>');
+            }
+        }
+    });
+}
+
+$('.cancel-btn').click(function() {
+    new Confirm({
+        content: '<h1>取消申请</h1><p>您确定要取消申请么？</p>',
+        cb: cancelExchangeApply
+    }).show();
+});
+
+function setExchangeEepress(eid, num) {
+    $.ajax({
+        type: 'POST',
+        url: '/me/return/setEepress',
+        data: {
+            id: id,
+            type: 'exchange',
+            companyId: eid,
+            companyName: expressList[eid],
+            number: num
+        },
+        success: function(data) {
+            console.log(data);
+            if (data.code === 200) {
+                location.reload();
+            }
+        }
+    });
+}
+
+$submitExpress.click(function() {
+    var companyId = $expressCompany.val(),
+        code = parseInt($expressCode.val(), 10);
+
+    if (!companyId || !code) {
+        $submitExpress.siblings('.error-tip').removeClass('hide');
+        return;
+    }
+
+    setExchangeEepress(companyId, code);
+});
+
+$showExpress.on('click', '.reset-express', function() {
+    var expressId = $showExpress.data('id');
+
+    $expressCode.val(expressId);
+    $showExpress.addClass('hide');
+    $editExpress.removeClass('hide');
+});

 var colorTpl = require('../../tpl/me/color-list.hbs');
 var sizeTpl = require('../../tpl/me/size-list.hbs');
 
+var addrSelector = require('../plugins/cascading-address');
+var addr;
+
+// 添加.check方法
+require('../plugins/check');
+
 // var numCtrl = {
 //     valueEl: $('.number .value'),
 //     btn: {
@@ -201,6 +207,99 @@ function getProductInfo() {
     });
 }
 
-getProductInfo();
+function bindSelectEvent() {
+    $('.exchange-reasons').on('change', function() {
+        var $op = $(this).find('option:selected');
+
+        $(this).attr('data-reason', $op.val());
+
+        if ($op.hasClass('is-special')) {
+            $op.closest('.table-body').siblings('.special-reason').show();
+        } else {
+            $op.closest('.table-body').siblings('.special-reason').hide();
+        }
+    });
+}
+
+function bindTypeEvent() {
+    $('.change-type .type').on('click', function() {
+        $('.change-type .type').removeClass('active');
+        $(this).addClass('active');
+    });
+}
+
+function bindCheckboxEvent() {
+    $('.checkbox-box').check({
+        type: 'checkbox',
+        group: 'exchange-good',
+        onChange: function(ele, checked) {
+            if (checked) {
+                $(ele).closest('.change-info-box').addClass('will-change');
+            } else {
+                $(ele).closest('.change-info-box').removeClass('will-change');
+            }
+        }
+    });
+}
 
-// numCtrl.init();
+function submitChange(d) {
+    $.ajax({
+        url: '/me/return/submitExchange',
+        data: d
+    }).done(function(result) {
+        console.log(result);
+    }).fail(function(err) {
+        console.log(err);
+    });
+}
+
+function bindConfirmEvent() {
+    $('.confirm').on('click', function() {
+        var $changeGood = $('.change-info-box.will-change');
+        var changeGoodsList = [];
+        var changeData = {};
+
+        $changeGood.each(function(index, good) {
+            var goodObj = {};
+            var $good = $(good);
+            var $c = $good.find('.goods-container');
+            var $f = $good.find('.form');
+
+            goodObj.product_skn = $c.data('skn');
+            goodObj.product_skc = $c.data('skc');
+            goodObj.product_sku = $c.data('sku');
+            goodObj.last_price = $c.data('price');
+            goodObj.product_id = $c.data('id');
+            goodObj.goods_type = $c.data('goodsType');
+            goodObj.exchange_reason = $c.find('.exchange-reasons').data('reason');
+            goodObj.new_goods_id = $f.find('.color-list .img-box.active img').data('goodsId');
+            goodObj.new_product_sku = $f.find('.size-list span.active').data('sku');
+            changeGoodsList.push(goodObj);
+        });
+
+        changeData.app_type = 1; // BLK的类型规定为1
+        changeData.goods = changeGoodsList;
+        changeData.area_code = addr.getAreaIds().split(',')[2];
+        changeData.order_code = $('.returns-wrap>.order').data('code');
+        changeData.consignee_name = $('#user').val();
+        changeData.address = $('#addr').val();
+        changeData.mobile = $('#mob').val();
+        changeData.delivery_type = $('.change-type .type.active').data('type');
+
+        submitChange(changeData);
+    });
+}
+
+
+function initAddr() {
+    addr = addrSelector({
+        el: '#city'
+    });
+}
+
+getProductInfo();
+bindSelectEvent();
+bindTypeEvent();
+bindCheckboxEvent();
+bindConfirmEvent();
+initAddr();

@@ -153,7 +153,6 @@ function editOrder(onEdit) {
             phone: phone
         }
     }).done(function(result) {
-        console.log(result);
         if (result.code === 200) {
             showSuccessMsg(onEdit);
         } else {

+/**
+ * 退货详情页
+ * @author: yyqing<yanqing.yang@yoho.cn>
+ * @date: 2016/7/22
+ */
+var $ = require('yoho-jquery'),
+    lazyload = require('yoho-jquery-lazyload'),
+    Confirm = require('../plugins/dialog').Confirm;
+
+var $mainWrap = $('.refund-datail-wrap'),
+    $submitExpress = $mainWrap.find('.submit-express'),
+    $showExpress = $mainWrap.find('.show-content'),
+    $editExpress = $mainWrap.find('.edit-content');
+
+var $expressCompany = $('.express-company'),
+    $expressCode = $('.express-code');
+
+var id = $mainWrap.data('id'),
+    expressList = $editExpress.data();
+
+function cancelRefundApply() {
+    $.ajax({
+        type: 'POST',
+        url: '/me/return/cancel',
+        data: {
+            id: id,
+            type: 'refund'
+        },
+        success: function(data) {
+            if (data.code === 200) {
+                location.reload();
+            }
+        }
+    });
+}
+
+function setRefundEepress(eid, num) {
+    $.ajax({
+        type: 'POST',
+        url: '/me/return/setEepress',
+        data: {
+            id: id,
+            type: 'refund',
+            companyId: eid,
+            companyName: expressList[eid],
+            number: num
+        },
+        success: function(data) {
+            console.log(data);
+            if (data.code === 200) {
+                location.reload();
+            }
+        }
+    });
+}
+
+$('.cancel-btn').click(function() {
+    new Confirm({
+        content: '<h1 class="title">取消申请</h1><p>您确定要取消申请么？</p>',
+        cb: cancelRefundApply
+    }).show();
+});
+
+$submitExpress.click(function() {
+    var companyId = $expressCompany.val(),
+        code = parseInt($expressCode.val(), 10);
+
+    if (!companyId || !code) {
+        $submitExpress.siblings('.error-tip').removeClass('hide');
+        return;
+    }
+
+    setRefundEepress(companyId, code);
+});
+
+$showExpress.on('click', '.reset-express', function() {
+    var expressId = $showExpress.data('id');
+
+    $expressCode.val(expressId);
+    $showExpress.addClass('hide');
+    $editExpress.removeClass('hide');
+});
+
+lazyload($('img.lazy'));

@@ -4,7 +4,9 @@
  * @date: 2016/7/15
  */
 var $ = require('yoho-jquery'),
-    lazyload = require('yoho-jquery-lazyload');
+    lazyload = require('yoho-jquery-lazyload'),
+    handlebars = require('yoho-handlebars'),
+    upload = require('../plugins/upload');
 
 var $refundTable = $('.refund-goods'),
     $check = $('.check'),
@@ -20,6 +22,15 @@ var orderCode = $('#order-code').val() || 0,
         dom: $typeInfo.eq(0)
     };
 
+var tpl = '<div class="img-wrap">' +
+            '<div class="img-opt">' +
+                '<span>查看</span>' +
+                '<span>删除</span>' +
+            '</div>' +
+            '<div class="img-view"><img src="{{data}}"></div>' +
+        '</div>',
+    imgFn = handlebars.compile(tpl);
+
 var checked;
 
 require('../plugins/check');
@@ -39,7 +50,7 @@ function packApplyInfo() {
         isLack = false,
         payment = {},
         resData = {
-            order_code: orderCode
+            orderCode: orderCode
         };
 
     if (checked && checked.documents) {
@@ -128,8 +139,20 @@ $refundTable.on('change', '.refund-reason', function() {
         $specialDom.slideUp();
     }
     $specialDom.siblings('.check').data({reason: val});
+}).on('click', '.img-upload', function() {
+    var $this = $(this);
+
+    upload.up({
+        callback: function(result) {
+            if (result && result.code === 200) {
+                $this.before(imgFn(result));
+            }
+        }
+    });
 });
 
+
+
 $refundType.on('click', '.type-item', function() {
     var $this = $(this),
         index;

+var $ = require('yoho-jquery'),
+    handlebars = require('yoho-handlebars');
+
+var tpl = '<div style="width: 0px; height: 0px; overflow: hidden;">' +
+        '<iframe id="yoho-upload-result" name="ajaxUpload" style="display:none"></iframe>' +
+        '<form id="yoho-upload" method="post" enctype="multipart/form-data" ' +
+        'action="/api/uploadImg" target="ajaxUpload">' +
+            '<input type="file" name="filename" class="file-name" />' +
+            '<input type="hidden" name="bucket" value="goodsimg" />' +
+        '</form>' +
+    '</div>';
+
+var uploadFn = handlebars.compile(tpl || '');
+
+var $result,
+    $upload,
+    $filename;
+
+var num,
+    inter,
+    callback;
+
+$('body').append(uploadFn({}));
+
+$result = $('#yoho-upload-result');
+$upload = $('#yoho-upload');
+$filename = $upload.find('.file-name');
+
+function up(opt) {
+    $filename.click();
+    if (opt) {
+        callback = opt.callback;
+    } else {
+        callback = '';
+    }
+}
+
+function getResponse(cb) {
+    num = 0;
+    inter = setInterval(function() {
+        var res = $result[0].contentDocument.body.innerText || '';
+
+        if (res) {
+            $result[0].contentDocument.body.innerText = '';
+            if (cb) {
+                return cb($.parseJSON(res));
+            }
+        }
+
+        if (num > 20 || res) {
+            clearInterval(inter);
+        }
+
+        num++;
+    }, 500);
+}
+
+$filename.change(function() {
+    $upload.submit();
+    getResponse(callback);
+});
+
+exports.up = up;

@@ -74,32 +74,10 @@
         padding-top: 40px;
         padding-bottom: 20px;
 
-        p {
-            position: absolute;
-            left: 0;
-            bottom: 25px;
-            width: 100%;
-            color: #444;
-            line-height: 25px;
-        }
-
-        div {
-            position: absolute;
-            top: 0;
-            left: 100px;
-            padding-top: 30px;
+        .title {
             font-size: 22px;
             font-weight: bold;
-            width: 150px;
-            height: 30px;
-            line-height: 30px;
-            margin: 0 auto;
-
-            span {
-                float: left;
-                width: 27px;
-                height: 30px;
-            }
+            padding-bottom: 40px;
         }
     }
 

@@ -80,13 +80,13 @@
         margin-right: 20px;
     }
 
-    .adress {
+    .address {
         overflow: hidden;
         margin: 30px 0 20px;
         font-size: 14px;
         border-bottom: 1px solid #eee;
 
-        .adress-title {
+        .address-title {
             display: block;
             font-size: 16px;
             width: 125px;
@@ -106,7 +106,7 @@
             border: 1px solid #eee;
         }
 
-        .adress-detail {
+        .address-detail {
             margin-bottom: 15px;
 
             p {
@@ -208,6 +208,7 @@
     }
 
     .reason-info {
+        font-size: 14px;
         overflow: hidden;
         padding: 25px 0 30px 20px;
         width: 100%;
@@ -238,4 +239,53 @@
         float: right;
     }
 
+    .curier {
+        margin-top: 20px;
+        display: block;
+        width: 100%;
+        overflow: hidden;
+
+        span {
+            display: block;
+            height: 20px;
+            line-height: 20px;
+        }
+
+        b {
+            margin-top: 5px;
+            display: block;
+            font-size: 12px;
+            width: 40px;
+            height: 25px;
+            border: 1px solid #eee;
+            float: left;
+            line-height: 25px;
+            text-align: center;
+            margin-left: 10px;
+        }
+
+        input {
+            margin-top: 9px;
+            display: block;
+            width: 150px;
+            height: 25px;
+            padding: 12px;
+            resize: none;
+            outline: none;
+            font-size: 14px;
+            line-height: 18px;
+            color: #535353;
+            border: 1px solid #e7e7e7;
+            float: left;
+        }
+    }
+
+    .edit-content {
+        margin: 30px 0;
+    }
+
+    .submit-express {
+        margin-bottom: 10px;
+    }
+
 }

-.return-wrap {
+.returns-wrap {
+    .change-info-box {
+        margin-bottom: 20px;
+        border: 1px solid #f1f1f1;
+    }
+
     &.change {
         .sub-column {
             margin-top: 30px;
+
+            &.number {
+                display: none;
+            }
+        }
+
+        .box-title {
+            display: block;
+            padding: 20px 0;
+            font-size: 16px;
+            font-weight: bold;
+            color: #1b1b1b;
+        }
+
+        .input-group {
+            position: relative;
+        }
+
+        .cascading-address {
+            display: inline-block;
+            position: absolute;
+            top: -10px;
+            left: 90px;
+        }
+
+        .change-type {
+            padding-bottom: 20px;
+            border-bottom: 1px solid #f1f1f1;
+            margin-bottom: 20px;
+
+            .type {
+                display: inline-block;
+                width: 120px;
+                height: 40px;
+                line-height: 40px;
+                margin-right: 15px;
+                border: 1px solid #f1f1f1;
+                text-align: center;
+                color: #1b1b1b;
+                cursor: pointer;
+
+                &.active {
+                    border-color: #1b1b1b;
+                }
+            }
+        }
+
+        .application-form {
+            .input-group {
+                margin-bottom: 10px;
+            }
+            label {
+                width: 75px;
+                display: inline-block;
+                color: #1b1b1b;
+            }
         }
 
         .color-list {

@@ -2,7 +2,7 @@
     font-size: 14px;
 
     .returns-status {
-        padding: 30px 0 80px;
+        padding: 30px 0 40px;
 
         .back-wrap {
             width: 800px;
@@ -12,7 +12,7 @@
             margin: 0 auto;
         }
 
-        .progress {
+        .progress-bar {
             height: 6px;
             background: #1d1d1d;
             border-radius: 3px;

-.return-wrap {
+.returns-wrap {
     .table {
         width: 100%;
         max-width: 990px;

@@ -34,6 +34,7 @@
 
         em {
             color: #9a9a9a;
+            margin-left: 10px;
         }
 
         .cancel-btn {
@@ -45,16 +46,49 @@
         padding: 40px 0 20px;
         border-bottom: 1px solid #eee;
 
+        p {
+            line-height: 2;
+        }
+
+        .reset-express {
+            width: 40px;
+            height: 20px;
+            line-height: 20px;
+            font-weight: normal;
+            display: inline-block;
+            margin-left: 10px;
+            position: relative;
+            top: -2px;
+        }
+
         .express-wrap {
             padding-top: 10px;
 
             > dd {
                 padding-top: 12px;
             }
+
+            select,
+            input {
+                height: 24px;
+                padding: 0 5px;
+                border: 1px solid #eee;
+            }
+
+            .express-company {
+                border-color: #1d1d1d;
+            }
         }
 
         .submit-express {
             margin-left: 74px;
+            display: inline-block;
+        }
+
+        .error-tip {
+            position: relative;
+            top: 2px;
+            left: 10px;
         }
     }
 
@@ -72,6 +106,8 @@
     }
 
     .refund-detail-goods {
+        padding-top: 40px;
+
         .goods-header {
             height: 40px;
             line-height: 40px;

 .refund-wrap {
+    .returns-status {
+        margin-bottom: 40px;
+    }
+
     .refund-goods {
         margin-bottom: 40px;
 
@@ -79,6 +83,13 @@
                 line-height: 1.5;
                 text-align: left;
             }
+
+            .refund-reason {
+                width: 120px;
+                height: 28px;
+                padding: 0 5px;
+                border: 1px solid #eee;
+            }
         }
     }
 

 <div class="color-list">
     {{#goodsList}}
     <div class="img-box {{#if isActive}}active{{/if}}" >
-        <img src="{{colorImage}}" alt="{{colorName}}" data-index="{{@index}}" data-color={{colorId}}>
+        <img src="{{colorImage}}" alt="{{colorName}}" data-index="{{@index}}" data-color="{{colorName}}" data-id="{{colorId}}"  data-goods-id="{{goodsId}}">
     </div>
     {{/goodsList}}
 </div>

@@ -2,7 +2,7 @@
     {{#goodsList}}
         <div class="{{#unless @first}}hide{{/unless}} size-list" data-index="{{@index}}">
         {{#sizeList}}
-            <span data-size="{{sizeId}}">{{sizeName}}</span>
+        <span data-size="{{sizeName}}" data-sku="{{productSku}}" data-id="{{goodsId}}">{{sizeName}}</span>
         {{/sizeList}}
         </div>
     {{/goodsList}}