fe / yoho-blk · Commits

Go to a project

Authored by zhangxiaoru
Commit 5453167f1a2e1e73b7010b44ae90c08720aadf61 1 parent 7daa4f4d

exchange

Inline Side-by-side
Showing 5 changed files with 188 additions and 112 deletions
@@ -84,12 +84,11 @@ const detailExchange = (req, res) => { @@ -84,12 +84,11 @@ const detailExchange = (req, res) => {
84 banner: 'http://placehold.it/{width}x{height}', 84 banner: 'http://placehold.it/{width}x{height}',
85 exchange: { 85 exchange: {
86 title: '换货申请', 86 title: '换货申请',
87 - hidePrice: true,  
88 - orderGoods: {  
89 - goodsImage: '',  
90 - productName: 'TEEBACCO 极简笑脸印花卫衣',  
91 - colorName: '黑色',  
92 - sizeName: 'M' 87 + goods: {
  88 + img: '//img10.static.yhbimg.com/goodsimg/2016/01/08/10/0109e09f600bfa92adf43bd046166cc8d1.jpg?imageMogr2/thumbnail/65x90/extent/65x90/background/d2hpdGU=/position/center/quality/80',
  89 + name: 'TEEBACCO 极简笑脸印花卫衣',
  90 + color: '黑色',
  91 + size: 'M'
93 } 92 }
94 93
95 } 94 }
  1 +{{!-- {{# exchange}} --}}
1 <div class="exchange-detail-page"> 2 <div class="exchange-detail-page">
2 - <div class="exchange-apply">  
3 - {{# exchange}}  
4 - {{> common/subtitle}} 3 + <p class="state"><span class="iconfont">&#xe618;</span>换货申请审核中</p>
5 4
6 - <div class="apply-container">  
7 - <div class="return-prompt">  
8 - 换货须知  
9 - </div> 5 + <div class="way">
  6 + <p class="way-title">您已选择{{way}}</p>
  7 + <p>请将商品连同吊牌、包装、发货单（如无发货单，您可找张白纸上注明订单编号，收货人姓名及手机号码）、发票（如有）、赠品（如有）一并保存，
  8 + 如有遗漏将影响您的退换货进度，敬请谅解
  9 + </p>
  10 + <p class="cancel">如果您不想换货了，您可以<span class="cancel-btn">取消申请</span></p>
  11 + </div>
10 12
11 - <h2>换货商品</h2> 13 + <div class="adress">
  14 + <p class="adress-title">收货地址<span class="modify-btn">修改</span></p>
  15 + <div class="adress-detail">
  16 + <p>所在区域：江苏省 南京市 雨花台区</p>
  17 + <p>收 货 人：赵四</p>
  18 + <p>详细地址：西善桥北路 109 号</p>
  19 + <p>联系电话：17714194699</p>
  20 + </div>
  21 + </div>
12 22
13 - <div class="table">  
14 - <ul class="header">  
15 - <li class="info">商品信息</li>  
16 - <li class="st">换货原因</li>  
17 - <li class="op">换货数量</li>  
18 - </ul>  
19 - </div> 23 + <div class="good-info">
  24 + <div class="table">
  25 + <ul class="header">
  26 + <li class="info">商品信息</li>
  27 + <li class="st">换货原因</li>
  28 + <li class="op">换货信息</li>
  29 + </ul>
  30 + </div>
20 31
21 - {{!-- {{#list}} --}} 32 + <div class="table">
22 <div class="table-body"> 33 <div class="table-body">
23 - {{> order/goods-box}} 34 + <div class="goods-info">
  35 + <img class="lazy" data-original="{{image img 70 90}}">
  36 + <div class="info">
  37 + <p class="good-name">{{!-- {{name}} --}}fdefwfwefwrefverfref</p>
  38 + <p>颜色：{{color}}&nbsp;尺码：{{size}}</p>
  39 + <p>×{{num}}</p>
  40 + </div>
  41 + </div>
24 <div class="common-column special-border"> 42 <div class="common-column special-border">
25 - {{!-- <p class="refund-status">{{statusName}}</p> --}} 43 + <p class="reason">{{reason}}发错货</p>
26 </div> 44 </div>
27 <div class="common-column special-border operation"> 45 <div class="common-column special-border operation">
28 - 46 + <p class="subtext">color: 蓝色<br>size: M</p>
  47 + </div>
  48 + </div>
  49 + <div class="reason-info">
  50 + <span>问题描述：太小了</span>
  51 + <div class="reason-img">照片凭证：
  52 + <div class="evidence">
  53 + <img src="{{image img 70 90}}">
  54 + </div>
29 </div> 55 </div>
30 </div> 56 </div>
31 - {{!-- {{/list}} --}}  
32 -  
33 -  
34 -  
35 </div> 57 </div>
36 -  
37 - {{/ exchange}}  
38 </div> 58 </div>
39 -</div>  
  59 +</div>
  60 +{{!-- {{/ exchange}} --}}
1 <div class="returns-wrap"> 1 <div class="returns-wrap">
2 - {{!-- {{# returns}} 2 + {{# returns}}
3 {{> common/subtitle}} 3 {{> common/subtitle}}
4 4
5 {{> refund}} 5 {{> refund}}
6 - {{/ returns}} --}}  
7 - {{!-- </div> --}} 6 +
  7 + {{> exchange}}
  8 + {{/ returns}}
8 </div> 9 </div>
1 .exchange-detail-page { 1 .exchange-detail-page {
2 - position: relative; 2 + .state {
  3 + font-size: 16px;
  4 + color: #5cb0de;
3 5
4 - .apply-container {  
5 - h2 {  
6 - font-size: 16px;  
7 - margin-bottom: 15px; 6 + span {
  7 + font-size: 20px;
  8 + margin-right: 5px;
8 } 9 }
9 } 10 }
10 11
11 - .return-prompt { 12 + .way {
12 font-size: 14px; 13 font-size: 14px;
13 - width: 70px;  
14 - height: 25px;  
15 - border: 1px solid #eee;  
16 - line-height: 25px;  
17 - text-align: center;  
18 - position: absolute;  
19 - top: 0;  
20 - right: 0; 14 + border-bottom: 1px solid #eee;
  15 +
  16 + .way-title {
  17 + margin-top: 10px;
  18 + font-weight: bold;
  19 + height: 40px;
  20 + line-height: 35px;
  21 + }
  22 +
  23 + p {
  24 + line-height: 22px;
  25 + height: 22px;
  26 + }
  27 +
  28 + .cancel {
  29 + display: block;
  30 + margin-top: 18px;
  31 + width: 220px;
  32 + height: 50px;
  33 + line-height: 50px;
  34 + font-size: 12px;
  35 + }
  36 +
  37 + .cancel-btn {
  38 + float: right;
  39 + display: block;
  40 + height: 25px;
  41 + width: 70px;
  42 + background: #1b1b1b;
  43 + color: #fff;
  44 + line-height: 25px;
  45 + text-align: center;
  46 + margin-top: 10px;
  47 + }
  48 + }
  49 +
  50 + .adress {
  51 + overflow: hidden;
  52 + margin-top: 30px;
  53 + font-size: 14px;
  54 + border-bottom: 1px solid #eee;
  55 +
  56 + .adress-title {
  57 + display: block;
  58 + font-size: 16px;
  59 + width: 125px;
  60 + height: 40px;
  61 + line-height: 40px
  62 + }
  63 +
  64 + .modify-btn {
  65 + font-size: 12px;
  66 + float: right;
  67 + display: block;
  68 + height: 20px;
  69 + width: 40px;
  70 + line-height: 20px;
  71 + text-align: center;
  72 + margin-top: 10px;
  73 + border: 1px solid #eee;
  74 + }
  75 +
  76 + .adress-detail {
  77 + margin-bottom: 15px;
  78 +
  79 + p {
  80 + display: block;
  81 + height: 25px;
  82 + line-height: 25px;
  83 + }
  84 + }
21 } 85 }
22 86
23 .table { 87 .table {
24 width: 100%; 88 width: 100%;
25 - margin-bottom: 20px;  
26 - color: #616161;  
27 89
28 .header { 90 .header {
29 height: 40px; 91 height: 40px;
@@ -54,94 +116,87 @@ @@ -54,94 +116,87 @@
54 .table-body { 116 .table-body {
55 display: table; 117 display: table;
56 font-size: 14px; 118 font-size: 14px;
  119 + border: 1px solid #f1f1f1;
57 } 120 }
58 121
59 - .common-column {  
60 - width: 138px;  
61 - display: table-cell;  
62 - text-align: center;  
63 - vertical-align: top;  
64 - padding-top: 30px;  
65 - position: relative;  
66 - }  
67 -  
68 - .special-border {  
69 - border-right: 1px solid #f1f1f1;  
70 - border-bottom: 1px solid #f1f1f1;  
71 - }  
72 -  
73 - .common-column {  
74 - width: 138px;  
75 - display: table-cell;  
76 - text-align: center;  
77 - vertical-align: top;  
78 - padding-top: 30px;  
79 - position: relative;  
80 - }  
81 -  
82 - .goods-container { 122 + .goods-info {
83 width: 516px; 123 width: 516px;
84 - display: table-cell; 124 + display: inline-block;
85 box-sizing: border-box; 125 box-sizing: border-box;
  126 + border-top: none;
  127 + font-weight: normal;
86 128
87 img { 129 img {
88 - width: 65px; 130 + width: 70px;
89 height: 90px; 131 height: 90px;
90 display: inline-block; 132 display: inline-block;
91 box-sizing: border-box; 133 box-sizing: border-box;
92 margin: 30px 20px; 134 margin: 30px 20px;
93 } 135 }
94 - }  
95 136
96 - .special-border {  
97 - border-right: 1px solid #f1f1f1;  
98 - border-bottom: 1px solid #f1f1f1;  
99 - }  
100 -  
101 - .detail {  
102 - width: 408px;  
103 - padding: 30px 8px 0 0;  
104 - float: right;  
105 - box-sizing: border-box;  
106 - line-height: 1.4;  
107 - font-size: 14px;  
108 - color: #616161; 137 + .info {
  138 + width: 400px;
  139 + padding: 30px 8px 0 0;
  140 + float: right;
  141 + box-sizing: border-box;
  142 + line-height: 1.4;
  143 + font-size: 14px;
  144 + color: #616161;
  145 + }
109 146
110 - span {  
111 - font-size: 12px; 147 + .good-name {
  148 + margin-bottom: 8px;
112 } 149 }
113 } 150 }
114 151
115 - .with-bottom-space {  
116 - margin-bottom: 8px; 152 + .common-column {
  153 + width: 208px;
  154 + display: table-cell;
  155 + text-align: center;
  156 + vertical-align: top;
  157 + padding-top: 30px;
  158 + position: relative;
117 } 159 }
118 160
119 - .with-space { 161 + .subtext {
120 display: inline-block; 162 display: inline-block;
121 - margin-right: 8px;  
122 - margin-bottom: 8px; 163 + line-height: 30px;
123 } 164 }
124 165
125 - .bold {  
126 - color: #222;  
127 - font-weight: bold; 166 + .reason {
  167 + display: inline-block;
  168 + margin-top: 20px;
128 } 169 }
129 170
130 - .special-column {  
131 - display: none; 171 + .reason-info {
  172 + overflow: hidden;
  173 + padding: 25px 0 0 20px;
  174 + width: 100%;
  175 + border: 1px solid #eee;
  176 + border-top: none;
  177 +
  178 + img {
  179 + float: left;
  180 + width: 70px;
  181 + height: 90px;
  182 +
  183 + }
  184 +
  185 + span {
  186 + line-height: 25px;
  187 + height: 25px;
  188 + display: block;
  189 + }
132 } 190 }
133 191
134 - .sub-column {  
135 - display: none; 192 + .reason-img {
  193 + margin-top: 5px;
136 } 194 }
137 195
138 - .common-column {  
139 - width: 208px;  
140 - display: table-cell;  
141 - text-align: center;  
142 - vertical-align: top;  
143 - padding-top: 30px;  
144 - position: relative; 196 + .evidence {
  197 + width: 825px;
  198 + overflow: hidden;
  199 + float: right;
145 } 200 }
146 201
147 } 202 }