fe / yoho-blk · Commits

Go to a project

Authored by biao
Commit 6939977bc21b80c1292a15aeec206fdcecc7c220 2 parents bfec7681 9db04262

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

Inline Side-by-side
Showing 7 changed files with 218 additions and 31 deletions
@@ -118,12 +118,47 @@ const detailExchange = (req, res) => { @@ -118,12 +118,47 @@ const detailExchange = (req, res) => {
118 content: { 118 content: {
119 nav: mcHandler.getMeCrumb('我的退/换货'), 119 nav: mcHandler.getMeCrumb('我的退/换货'),
120 navigation: mcHandler.getSideMenu('我的退/换货'), 120 navigation: mcHandler.getSideMenu('我的退/换货'),
121 - banner: 'http://placehold.it/{width}x{height}'  
122 -  
123 - // exchange: {  
124 -  
125 -  
126 - // } 121 + banner: 'http://placehold.it/{width}x{height}',
  122 +
  123 + exchange: {
  124 + // audit: true,
  125 + // through: false,
  126 + // send: true,
  127 + finish: true,
  128 + way: '上门送货',
  129 + goods: [
  130 + {
  131 + img: '',
  132 + name: 'fdefwfwefwrefverfref',
  133 + color: '',
  134 + size: '',
  135 + num: '',
  136 + reason: '',
  137 + exchangeColor: '蓝色',
  138 + exchangeSize: 'M'
  139 + },
  140 + {
  141 + img: '',
  142 + name: 'fdefwfwefwrefverfref',
  143 + color: '',
  144 + size: '',
  145 + num: '',
  146 + reason: '',
  147 + exchangeColor: '蓝色',
  148 + exchangeSize: 'M'
  149 + }
  150 + ],
  151 + reasonInfo: [
  152 + {
  153 + problem: '太小了',
  154 + img: ''
  155 + },
  156 + {
  157 + problem: '太小了',
  158 + img: ''
  159 + }
  160 + ]
  161 + }
127 } 162 }
128 }); 163 });
129 }; 164 };
@@ -82,6 +82,75 @@ const _setSideMenu = (type) => { @@ -82,6 +82,75 @@ const _setSideMenu = (type) => {
82 }; 82 };
83 }; 83 };
84 84
  85 +const _calcStatusRate = (num, total) => {
  86 + let rate = 0;
  87 +
  88 + if (total) {
  89 + rate = `${_.toInteger(num / total * 100)}%`;
  90 + }
  91 +
  92 + return rate;
  93 +};
  94 +
  95 +const _setDefaultStatus = (type) => {
  96 + const list = ['提交申请', '审核通过', '商品寄回', '商品入库', `${type}完成`];
  97 + let statusList = [];
  98 + let resData = {};
  99 +
  100 + _.forEach(list, (value, key) => {
  101 + statusList.push({
  102 + step: _.toInteger(key) + 1,
  103 + name: value
  104 + });
  105 + });
  106 + statusList[0].act = true;
  107 +
  108 + resData.returnStstus = {
  109 + rate: _calcStatusRate(1, statusList.length),
  110 + statusList: statusList
  111 + };
  112 +
  113 + return resData;
  114 +}
  115 +
  116 +const _setReturnStatus = (list, half) => {
  117 + let resData = {};
  118 +
  119 + if (list && list.length) {
  120 + let statusList = [],
  121 + step = 0;
  122 + let rate;
  123 +
  124 + // 遍历进度列表
  125 + _.forEach(list, (value, key) => {
  126 + let state = {
  127 + act: value.act === 'Y',
  128 + step: _.toInteger(key) + 1,
  129 + name: value.name
  130 + };
  131 +
  132 + if (state.act) {
  133 + step++;
  134 + }
  135 + statusList.push(state);
  136 + });
  137 +
  138 + // 多半格进度特殊处理
  139 + if (half) {
  140 + rate = _calcStatusRate(step * 2 + 1, statusList.length * 2);
  141 + } else {
  142 + rate = _calcStatusRate(step, statusList.length);
  143 + }
  144 +
  145 + resData.returnStstus = {
  146 + rate: rate,
  147 + statusList: statusList
  148 + };
  149 + }
  150 +
  151 + return resData;
  152 +};
  153 +
85 const _setRefundGoodList = (data) => { 154 const _setRefundGoodList = (data) => {
86 let resData = {}; 155 let resData = {};
87 156
@@ -149,9 +218,11 @@ const getRefundGoodsData = (orderCode, uid) => { @@ -149,9 +218,11 @@ const getRefundGoodsData = (orderCode, uid) => {
149 let resData = {}; 218 let resData = {};
150 219
151 Object.assign(resData, _setSideMenu('我的退/换货')); 220 Object.assign(resData, _setSideMenu('我的退/换货'));
  221 +
  222 +
152 resData.returns = { 223 resData.returns = {
153 title: '退货申请', 224 title: '退货申请',
154 - refund: {} 225 + refund: _setDefaultStatus('退货') || {}
155 }; 226 };
156 227
157 if (result.data) { 228 if (result.data) {
@@ -176,6 +247,9 @@ const getRefundDetailData = (applyId, uid) => { @@ -176,6 +247,9 @@ const getRefundDetailData = (applyId, uid) => {
176 247
177 if (result.data) { 248 if (result.data) {
178 // console.log(_setRefundDetailData(result.data)); 249 // console.log(_setRefundDetailData(result.data));
  250 +
  251 + Object.assign(resData.refundDetail, _setReturnStatus(result.data.statusList));
  252 +
179 Object.assign(resData.refundDetail, _setRefundDetailData(result.data)); 253 Object.assign(resData.refundDetail, _setRefundDetailData(result.data));
180 } 254 }
181 255
1 -{{!-- {{# exchange}} --}} 1 +{{# exchange}}
2 <div class="exchange-detail-page"> 2 <div class="exchange-detail-page">
  3 + {{#if audit}}
3 <p class="state"><span class="iconfont">&#xe618;</span>换货申请审核中</p> 4 <p class="state"><span class="iconfont">&#xe618;</span>换货申请审核中</p>
  5 + {{/if}}
  6 +
  7 + {{#if through}}
  8 + <p class="state"><span class="iconfont">&#xe60f;</span>换货申请已通过</p>
  9 + {{/if}}
  10 +
  11 + {{#if send}}
  12 + <p class="state"><span class="iconfont">&#xe61a;</span>换货商品已发出</p>
  13 + {{/if}}
  14 +
  15 + {{#if finish}}
  16 + <p class="state"><span class="iconfont">&#xe60f;</span>换货完成</p>
  17 + {{/if}}
4 18
5 <div class="way"> 19 <div class="way">
  20 +
  21 + {{#if finish}}
  22 + <p class="contact">如有疑问，请联系<span class="iconfont">&#xe61c;</span>在线客服</p>
  23 + {{else}}
6 <p class="way-title">您已选择{{way}}</p> 24 <p class="way-title">您已选择{{way}}</p>
7 <p>请将商品连同吊牌、包装、发货单（如无发货单，您可找张白纸上注明订单编号，收货人姓名及手机号码）、发票（如有）、赠品（如有）一并保存， 25 <p>请将商品连同吊牌、包装、发货单（如无发货单，您可找张白纸上注明订单编号，收货人姓名及手机号码）、发票（如有）、赠品（如有）一并保存，
8 如有遗漏将影响您的退换货进度，敬请谅解 26 如有遗漏将影响您的退换货进度，敬请谅解
9 </p> 27 </p>
  28 + {{/if}}
  29 +
  30 + {{#if audit}}
10 <p class="cancel">如果您不想换货了，您可以<span class="cancel-btn">取消申请</span></p> 31 <p class="cancel">如果您不想换货了，您可以<span class="cancel-btn">取消申请</span></p>
  32 + {{/if}}
  33 +
  34 + {{#if finish}}
  35 + <div class="order">
  36 + <span class="check">查看</span>
  37 + <span class="exchange-order">换货订单</span>
  38 + </div>
  39 + {{/if}}
11 </div> 40 </div>
12 41
13 <div class="adress"> 42 <div class="adress">
@@ -20,6 +49,8 @@ @@ -20,6 +49,8 @@
20 </div> 49 </div>
21 </div> 50 </div>
22 51
  52 + <span class="exchange-goods">换货商品</span>
  53 +
23 <div class="good-info"> 54 <div class="good-info">
24 <div class="table"> 55 <div class="table">
25 <ul class="header"> 56 <ul class="header">
@@ -30,11 +61,12 @@ @@ -30,11 +61,12 @@
30 </div> 61 </div>
31 62
32 <div class="table"> 63 <div class="table">
  64 + {{# goods}}
33 <div class="table-body"> 65 <div class="table-body">
34 <div class="goods-info"> 66 <div class="goods-info">
35 <img class="lazy" data-original="{{image img 70 90}}"> 67 <img class="lazy" data-original="{{image img 70 90}}">
36 <div class="info"> 68 <div class="info">
37 - <p class="good-name">{{!-- {{name}} --}}fdefwfwefwrefverfref</p> 69 + <p class="good-name">{{name}}</p>
38 <p>颜色：{{color}}&nbsp;尺码：{{size}}</p> 70 <p>颜色：{{color}}&nbsp;尺码：{{size}}</p>
39 <p>×{{num}}</p> 71 <p>×{{num}}</p>
40 </div> 72 </div>
@@ -43,18 +75,21 @@ @@ -43,18 +75,21 @@
43 <p class="reason">{{reason}}发错货</p> 75 <p class="reason">{{reason}}发错货</p>
44 </div> 76 </div>
45 <div class="common-column special-border operation"> 77 <div class="common-column special-border operation">
46 - <p class="subtext">color: 蓝色<br>size: M</p> 78 + <p class="subtext">color: {{exchangeColor}}<br>size: {{exchangeSize}}</p>
47 </div> 79 </div>
48 </div> 80 </div>
  81 + {{/ goods}}
  82 + {{# reasonInfo}}
49 <div class="reason-info"> 83 <div class="reason-info">
50 - <span>问题描述：太小了</span> 84 + <span>问题描述：{{problem}}</span>
51 <div class="reason-img">照片凭证： 85 <div class="reason-img">照片凭证：
52 <div class="evidence"> 86 <div class="evidence">
53 <img src="{{image img 70 90}}"> 87 <img src="{{image img 70 90}}">
54 </div> 88 </div>
55 </div> 89 </div>
56 </div> 90 </div>
  91 + {{/ reasonInfo}}
57 </div> 92 </div>
58 </div> 93 </div>
59 </div> 94 </div>
60 -{{!-- {{/ exchange}} --}}  
  95 +{{/ exchange}}
1 {{# refund}} 1 {{# refund}}
  2 + {{> returns/returns-status}}
  3 +
2 <h4 class="third-title">选择退货商品</h4> 4 <h4 class="third-title">选择退货商品</h4>
3 <div class="refund-goods clearfix" {{# speclialReason}} data-{{id}}="{{@index}}"{{/ speclialReason}}> 5 <div class="refund-goods clearfix" {{# speclialReason}} data-{{id}}="{{@index}}"{{/ speclialReason}}>
4 <input id="order-code" type="hidden" value="{{orderCode}}"> 6 <input id="order-code" type="hidden" value="{{orderCode}}">
1 -<div class="returns-status">  
2 - <div class="back-wrap">  
3 - <div class="progress"></div>  
4 - <div class="visual-state">  
5 - <ul>  
6 - {{# statusList}}  
7 - <li{{#if act}} class="act"{{/if}}>  
8 - <span class="iconfont state-bg">&#xe611;</span>  
9 - <div class="number">{{step}}</div>  
10 - <div>{{name}}</div>  
11 - </li>  
12 - {{/ statusList}}  
13 - </ul> 1 +{{# returnStstus}}
  2 + <div class="returns-status">
  3 + <div class="back-wrap">
  4 + <div class="progress" style="width: {{rate}}"></div>
  5 + <div class="visual-state">
  6 + <ul>
  7 + {{# statusList}}
  8 + <li{{#if act}} class="act"{{/if}}>
  9 + <span class="iconfont state-bg">&#xe611;</span>
  10 + <div class="number">{{step}}</div>
  11 + <div>{{name}}</div>
  12 + </li>
  13 + {{/ statusList}}
  14 + </ul>
  15 + </div>
14 </div> 16 </div>
15 </div> 17 </div>
16 -</div>  
  18 +{{/ returnStstus}}
@@ -45,11 +45,44 @@ @@ -45,11 +45,44 @@
45 text-align: center; 45 text-align: center;
46 margin-top: 10px; 46 margin-top: 10px;
47 } 47 }
  48 +
  49 + .contact {
  50 + line-height: 50px;
  51 +
  52 + span {
  53 + margin-left: 20px;
  54 + }
  55 +
  56 + .iconfont {
  57 + font-size: 12px;
  58 + margin-right: 5px;
  59 + }
  60 + }
  61 + }
  62 +
  63 + .order {
  64 + margin: 23px 0 10px;
  65 + height: 50px;
  66 + line-height: 50px;
  67 + overflow: hidden;
  68 + }
  69 +
  70 + .check {
  71 + display: block;
  72 + height: 25px;
  73 + width: 70px;
  74 + background: #1b1b1b;
  75 + color: #fff;
  76 + line-height: 25px;
  77 + text-align: center;
  78 + margin-top: 10px;
  79 + float: left;
  80 + margin-right: 20px;
48 } 81 }
49 82
50 .adress { 83 .adress {
51 overflow: hidden; 84 overflow: hidden;
52 - margin-top: 30px; 85 + margin: 30px 0 20px;
53 font-size: 14px; 86 font-size: 14px;
54 border-bottom: 1px solid #eee; 87 border-bottom: 1px solid #eee;
55 88
@@ -84,6 +117,12 @@ @@ -84,6 +117,12 @@
84 } 117 }
85 } 118 }
86 119
  120 + .exchange-goods {
  121 + font-size: 16px;
  122 + height: 50px;
  123 + line-height: 50px;
  124 + }
  125 +
87 .table { 126 .table {
88 width: 100%; 127 width: 100%;
89 128
@@ -170,7 +209,7 @@ @@ -170,7 +209,7 @@
170 209
171 .reason-info { 210 .reason-info {
172 overflow: hidden; 211 overflow: hidden;
173 - padding: 25px 0 0 20px; 212 + padding: 25px 0 30px 20px;
174 width: 100%; 213 width: 100%;
175 border: 1px solid #eee; 214 border: 1px solid #eee;
176 border-top: none; 215 border-top: none;
1 .returns-wrap { 1 .returns-wrap {
2 .returns-status { 2 .returns-status {
3 - padding: 30px 0 50px; 3 + padding: 30px 0 80px;
4 4
5 .back-wrap { 5 .back-wrap {
6 width: 800px; 6 width: 800px;
@@ -41,10 +41,10 @@ @@ -41,10 +41,10 @@
41 top: -17px; 41 top: -17px;
42 } 42 }
43 43
44 - .cur .state-bg { 44 + .act .state-bg {
45 color: #1d1d1d; 45 color: #1d1d1d;
46 } 46 }
47 - .cur .number { 47 + .act .number {
48 color: #fff; 48 color: #fff;
49 } 49 }
50 } 50 }