fe / yohobuywap-node · Commits

Go to a project

Authored by 郭成尧
Commit b7b420b0a2fde0577432ab49f74462a5d43338e5 2 parents b3108cb8 8415d84c

Merge branch 'feature/refund' of git.yoho.cn:fe/yohobuywap-node into feature/refund

Inline Side-by-side
Showing 1 changed file with 43 additions and 20 deletions
@@ -45,6 +45,8 @@ @@ -45,6 +45,8 @@
45 <div class="goods-info"> 45 <div class="goods-info">
46 <div class="img-box"> 46 <div class="img-box">
47 <img :src="goods.goods_image | resize(100, 130)"> 47 <img :src="goods.goods_image | resize(100, 130)">
  48 + <label v-if="goods.goods_type === 'gift'" class="gift">赠品</label>
  49 + <label class="price-gift" v-if="goods.goods_type === 'price_gift'">加价购</label>
48 </div> 50 </div>
49 <div class="goods-detail"> 51 <div class="goods-detail">
50 <p class="name">{{goods.product_name}}</p> 52 <p class="name">{{goods.product_name}}</p>
@@ -81,16 +83,16 @@ @@ -81,16 +83,16 @@
81 <p v-if="detail.return_coupon_amount" class="info">优惠券: &yen;{{detail.return_coupon_amount}}</p> 83 <p v-if="detail.return_coupon_amount" class="info">优惠券: &yen;{{detail.return_coupon_amount}}</p>
82 </div> 84 </div>
83 <div class="exchange-type"> 85 <div class="exchange-type">
  86 + <span class="amount-info" v-if="detail.return_amount_info">{{detail.return_amount_info}}</span>
84 <span href="" class="primary">退款方式<span class="right">{{detail.return_amount_mode_name}}</span> 87 <span href="" class="primary">退款方式<span class="right">{{detail.return_amount_mode_name}}</span>
85 </span> 88 </span>
86 <div class="amount-modeinfo" v-if="detail.return_amount_mode_info && detail.return_amount_mode_info.length"> 89 <div class="amount-modeinfo" v-if="detail.return_amount_mode_info && detail.return_amount_mode_info.length">
87 - <p v-if="detail.return_amount_mode_info[0].bank_name">银行 <span>{{detail.return_amount_mode_info[0].bank_name}}</span></p>  
88 - <p v-if="detail.return_amount_mode_info[0].bank_card">卡号 <span>{{detail.return_amount_mode_info[0].bank_card}}</span></p>  
89 - <p v-if="detail.return_amount_mode_info[0].payee_name">姓名 <span>{{detail.return_amount_mode_info[0].payee_name}}</span></p>  
90 - <p v-if="detail.return_amount_mode_info[0].alipay_account">账号 <span>{{detail.return_amount_mode_info[0].alipay_account}}</span></p>  
91 - <p v-if="detail.return_amount_mode_info[0].alipay_name">姓名 <span>{{detail.return_amount_mode_info[0].alipay_name}}</span></p> 90 + <p v-if="detail.return_amount_mode_info[0].bank_name">银行：<span>{{detail.return_amount_mode_info[0].bank_name}}</span></p>
  91 + <p v-if="detail.return_amount_mode_info[0].bank_card">卡号：<span>{{detail.return_amount_mode_info[0].bank_card}}</span></p>
  92 + <p v-if="detail.return_amount_mode_info[0].payee_name">姓名：<span>{{detail.return_amount_mode_info[0].payee_name}}</span></p>
  93 + <p v-if="detail.return_amount_mode_info[0].alipay_account">账号：<span>{{detail.return_amount_mode_info[0].alipay_account}}</span></p>
  94 + <p v-if="detail.return_amount_mode_info[0].alipay_name">姓名：<span>{{detail.return_amount_mode_info[0].alipay_name}}</span></p>
92 </div> 95 </div>
93 - <span class="amount-info" v-if="detail.return_amount_info">{{detail.return_amount_info}}</span>  
94 </div> 96 </div>
95 </div> 97 </div>
96 <div class="exchange-express" v-else> 98 <div class="exchange-express" v-else>
@@ -222,6 +224,7 @@ @@ -222,6 +224,7 @@
222 224
223 .exchange-progress { 225 .exchange-progress {
224 background-color: #fff; 226 background-color: #fff;
  227 + padding-bottom: 20px;
225 228
226 li { 229 li {
227 position: relative; 230 position: relative;
@@ -230,7 +233,7 @@ @@ -230,7 +233,7 @@
230 233
231 .progress-desc { 234 .progress-desc {
232 padding: 30px 0; 235 padding: 30px 0;
233 - border-bottom: 1px solid #eee; 236 + border-bottom: 1px solid #e0e0e0;
234 color: #b0b0b0; 237 color: #b0b0b0;
235 } 238 }
236 239
@@ -251,12 +254,16 @@ @@ -251,12 +254,16 @@
251 content: ""; 254 content: "";
252 position: absolute; 255 position: absolute;
253 left: 8px; 256 left: 8px;
254 - top: 0; 257 + top: -50%;
255 width: 1px; 258 width: 1px;
256 height: 100%; 259 height: 100%;
257 background: #b0b0b0; 260 background: #b0b0b0;
258 } 261 }
259 262
  263 + &:first-child:after {
  264 + width: 0;
  265 + }
  266 +
260 &.passed { 267 &.passed {
261 .progress-desc { 268 .progress-desc {
262 color: #000; 269 color: #000;
@@ -265,6 +272,10 @@ @@ -265,6 +272,10 @@
265 &:before { 272 &:before {
266 background: #000; 273 background: #000;
267 } 274 }
  275 +
  276 + &:after {
  277 + background: #000;
  278 + }
268 } 279 }
269 280
270 p:first-of-type { 281 p:first-of-type {
@@ -286,6 +297,7 @@ @@ -286,6 +297,7 @@
286 text-align: center; 297 text-align: center;
287 font-size: 28px; 298 font-size: 28px;
288 color: #444; 299 color: #444;
  300 + border-top: 1px solid #e0e0e0;
289 301
290 .phone { 302 .phone {
291 color: #b0b0b0; 303 color: #b0b0b0;
@@ -372,8 +384,8 @@ @@ -372,8 +384,8 @@
372 384
373 .goods-info { 385 .goods-info {
374 display: flex; 386 display: flex;
375 - border-top: 1px solid #eee;  
376 - border-bottom: 1px solid #eee; 387 + border-top: 1px solid #e0e0e0;
  388 + border-bottom: 1px solid #e0e0e0;
377 padding: 20px 30px; 389 padding: 20px 30px;
378 390
379 &:last-child { 391 &:last-child {
@@ -397,6 +409,14 @@ @@ -397,6 +409,14 @@
397 background: rgba(0, 0, 0, 0.2); 409 background: rgba(0, 0, 0, 0.2);
398 color: white; 410 color: white;
399 text-align: center; 411 text-align: center;
  412 +
  413 + &.price-gift {
  414 + background-color: #eb76aa;
  415 + }
  416 +
  417 + &.gift {
  418 + background-color: #86bf4a;
  419 + }
400 } 420 }
401 421
402 img { 422 img {
@@ -449,8 +469,8 @@ @@ -449,8 +469,8 @@
449 font-size: 28px; 469 font-size: 28px;
450 470
451 blockquote { 471 blockquote {
452 - margin-top: 20px;  
453 - color: #b0b0b0; 472 + color: #444;
  473 + font-size: 24px;
454 } 474 }
455 475
456 .p-reason { 476 .p-reason {
@@ -507,24 +527,22 @@ @@ -507,24 +527,22 @@
507 .exchange-type { 527 .exchange-type {
508 position: relative; 528 position: relative;
509 font-size: 34px; 529 font-size: 34px;
510 - border-top: 1px solid #eee; 530 + border-top: 1px solid #e0e0e0;
511 color: #444; 531 color: #444;
512 - padding: 20px 30px;  
513 background-color: #fff; 532 background-color: #fff;
514 533
515 .amount-info { 534 .amount-info {
516 color: #b0b0b0; 535 color: #b0b0b0;
517 background: #f6f6f6; 536 background: #f6f6f6;
518 display: block; 537 display: block;
519 - font-size: 26px;  
520 - margin: 0 -30px;  
521 - padding-left: 30px;  
522 - height: 44px;  
523 - line-height: 44px; 538 + font-size: 24px;
  539 + padding: 20px 30px;
524 } 540 }
525 541
526 .primary { 542 .primary {
527 display: block; 543 display: block;
  544 + padding: 20px 30px;
  545 + border-top: 1px solid #e0e0e0;
528 546
529 .right { 547 .right {
530 float: right; 548 float: right;
@@ -532,6 +550,11 @@ @@ -532,6 +550,11 @@
532 color: 28px; 550 color: 28px;
533 } 551 }
534 } 552 }
  553 +
  554 + .amount-modeinfo p {
  555 + border-top: 1px solid #e0e0e0;
  556 + padding: 20px 30px;
  557 + }
535 } 558 }
536 559
537 .exchange-order { 560 .exchange-order {
@@ -545,7 +568,7 @@ @@ -545,7 +568,7 @@
545 bottom: 0; 568 bottom: 0;
546 z-index: 10; 569 z-index: 10;
547 padding: 30px 20px; 570 padding: 30px 20px;
548 - border-top: 1px solid #eee; 571 + border-top: 1px solid #e0e0e0;
549 text-align: right; 572 text-align: right;
550 background: #fff; 573 background: #fff;
551 574