Showing
4 changed files
with
177 additions
and
18 deletions
| @@ -3,8 +3,8 @@ | @@ -3,8 +3,8 @@ | ||
| 3 | {{> common/subtitle}} | 3 | {{> common/subtitle}} |
| 4 | 4 | ||
| 5 | <h4 class="third-title">选择退货商品</h4> | 5 | <h4 class="third-title">选择退货商品</h4> |
| 6 | - | ||
| 7 | - <div class="refund-goods clearfix"> | 6 | +{{log this}} |
| 7 | + <div class="refund-goods clearfix"{{# speclialReason}} data-{{id}}="{{@index}}"{{/ speclialReason}}> | ||
| 8 | <ul class="goods-header"> | 8 | <ul class="goods-header"> |
| 9 | <li class="info">商品信息</li> | 9 | <li class="info">商品信息</li> |
| 10 | <li class="reason">退货原因</li> | 10 | <li class="reason">退货原因</li> |
| @@ -14,7 +14,7 @@ | @@ -14,7 +14,7 @@ | ||
| 14 | 14 | ||
| 15 | {{# goods}} | 15 | {{# goods}} |
| 16 | <div class="goods-item clearfix"> | 16 | <div class="goods-item clearfix"> |
| 17 | - <div class="check">{{> icon/checkbox}}</div> | 17 | + <div class="check" data-skn="{{skn}}" data-skc="{{skc}}" data-sku="{{sku}}" data-price="{{price}}" data-type="{{typeId}}">{{> icon/checkbox}}</div> |
| 18 | <div class="img"> | 18 | <div class="img"> |
| 19 | <img class="lazy" data-original="{{image img 70 90}}"> | 19 | <img class="lazy" data-original="{{image img 70 90}}"> |
| 20 | </div> | 20 | </div> |
| @@ -24,7 +24,7 @@ | @@ -24,7 +24,7 @@ | ||
| 24 | <p>×{{num}}</p> | 24 | <p>×{{num}}</p> |
| 25 | </div> | 25 | </div> |
| 26 | <div class="reason"> | 26 | <div class="reason"> |
| 27 | - <select> | 27 | + <select class="refund-reason"> |
| 28 | <option>选择退款原因</option> | 28 | <option>选择退款原因</option> |
| 29 | {{# reasonList}} | 29 | {{# reasonList}} |
| 30 | <option value="{{id}}">{{name}}</option> | 30 | <option value="{{id}}">{{name}}</option> |
| @@ -37,6 +37,7 @@ | @@ -37,6 +37,7 @@ | ||
| 37 | <span class="iconfont"></span> | 37 | <span class="iconfont"></span> |
| 38 | </div> | 38 | </div> |
| 39 | <div class="price">¥{{round price 2}}</div> | 39 | <div class="price">¥{{round price 2}}</div> |
| 40 | + {{> returns/special-reason}} | ||
| 40 | </div> | 41 | </div> |
| 41 | {{/ goods}} | 42 | {{/ goods}} |
| 42 | </div> | 43 | </div> |
| 1 | +<div class="special-reason"> | ||
| 2 | + <div class="clearfix"> | ||
| 3 | + <div class="left left-title"> | ||
| 4 | + <span class="red">*</span>问题描述： | ||
| 5 | + </div> | ||
| 6 | + <div class="left right-content"> | ||
| 7 | + <textarea class="mark-text"></textarea> | ||
| 8 | + </div> | ||
| 9 | + </div> | ||
| 10 | + <div class="clearfix"> | ||
| 11 | + <div class="left left-title"> | ||
| 12 | + <span class="red">*</span>上传凭证： | ||
| 13 | + </div> | ||
| 14 | + <div class="left right-content"> | ||
| 15 | + <div class="img-wrap"> | ||
| 16 | + <div class="img-opt"> | ||
| 17 | + <span>查看</span> | ||
| 18 | + <span>删除</span> | ||
| 19 | + </div> | ||
| 20 | + <div class="img-view"></div> | ||
| 21 | + </div> | ||
| 22 | + <div class="img-upload"> | ||
| 23 | + <span class="iconfont"></span> | ||
| 24 | + </div> | ||
| 25 | + <span class="img-up-tip">1/4</span> | ||
| 26 | + </div> | ||
| 27 | + </div> | ||
| 28 | +</div> |
| @@ -6,12 +6,19 @@ | @@ -6,12 +6,19 @@ | ||
| 6 | var $ = require('yoho-jquery'), | 6 | var $ = require('yoho-jquery'), |
| 7 | lazyload = require('yoho-jquery-lazyload'); | 7 | lazyload = require('yoho-jquery-lazyload'); |
| 8 | 8 | ||
| 9 | -var $check = $('.check'), | 9 | +var $refundTable = $('.refund-goods'), |
| 10 | + $check = $('.check'), | ||
| 10 | $refundType = $('.refund-type'), | 11 | $refundType = $('.refund-type'), |
| 11 | $typeInfo = $refundType.children('dl'); | 12 | $typeInfo = $refundType.children('dl'); |
| 12 | 13 | ||
| 13 | var $applyBtn = $('#apply-btn'); | 14 | var $applyBtn = $('#apply-btn'); |
| 14 | 15 | ||
| 16 | +var specialReason = $refundTable.data() || {}, | ||
| 17 | + payInfo = { // 退款信息 | ||
| 18 | + type: 3, // 2--银行卡 3--支付宝 4--yoho币 | ||
| 19 | + dom: $typeInfo.eq(0) | ||
| 20 | + }; | ||
| 21 | + | ||
| 15 | var checked; | 22 | var checked; |
| 16 | 23 | ||
| 17 | require('../plugins/check'); | 24 | require('../plugins/check'); |
| @@ -26,6 +33,12 @@ function restApplyBtn() { | @@ -26,6 +33,12 @@ function restApplyBtn() { | ||
| 26 | } | 33 | } |
| 27 | } | 34 | } |
| 28 | 35 | ||
| 36 | +function packApplyInfo() { | ||
| 37 | + if (checked && checked.documents) { | ||
| 38 | + console.log(checked); | ||
| 39 | + } | ||
| 40 | +} | ||
| 41 | + | ||
| 29 | $check.check({ | 42 | $check.check({ |
| 30 | type: 'checkbox', | 43 | type: 'checkbox', |
| 31 | onChange: function() { | 44 | onChange: function() { |
| @@ -34,29 +47,67 @@ $check.check({ | @@ -34,29 +47,67 @@ $check.check({ | ||
| 34 | } | 47 | } |
| 35 | }); | 48 | }); |
| 36 | 49 | ||
| 50 | +$refundTable.on('change', '.refund-reason', function() { | ||
| 51 | + var $this = $(this), | ||
| 52 | + $specialDom = $this.parent().siblings('.special-reason'), | ||
| 53 | + val = $this.val(); | ||
| 54 | + | ||
| 55 | + if (specialReason.hasOwnProperty(val)) { | ||
| 56 | + $specialDom.slideDown(); | ||
| 57 | + } else { | ||
| 58 | + $specialDom.slideUp(); | ||
| 59 | + } | ||
| 60 | + $specialDom.siblings('.check').data({reason: val}); | ||
| 61 | +}); | ||
| 62 | + | ||
| 37 | $refundType.on('click', '.type-item', function() { | 63 | $refundType.on('click', '.type-item', function() { |
| 38 | var $this = $(this), | 64 | var $this = $(this), |
| 39 | index; | 65 | index; |
| 40 | 66 | ||
| 41 | if (!$this.hasClass('cur')) { | 67 | if (!$this.hasClass('cur')) { |
| 68 | + if ($this.hasClass('ali-item')) { | ||
| 69 | + payInfo.type = 3; | ||
| 70 | + } else { | ||
| 71 | + payInfo.type = 2; | ||
| 72 | + } | ||
| 42 | index = $this.index(); | 73 | index = $this.index(); |
| 74 | + | ||
| 75 | + // 切换退款卡片 | ||
| 43 | $this.addClass('cur').siblings('.cur').removeClass('cur'); | 76 | $this.addClass('cur').siblings('.cur').removeClass('cur'); |
| 77 | + | ||
| 78 | + // 切换退款信息输入容器 | ||
| 79 | + payInfo.dom = $typeInfo.eq(index); | ||
| 44 | $typeInfo.addClass('hide'); | 80 | $typeInfo.addClass('hide'); |
| 45 | - $typeInfo.eq(index).removeClass('hide'); | 81 | + payInfo.dom.removeClass('hide'); |
| 46 | } | 82 | } |
| 47 | }); | 83 | }); |
| 48 | 84 | ||
| 85 | + | ||
| 86 | +// "last_price": "385.00", | ||
| 87 | +// "remark": "重量不行", | ||
| 88 | +// "returned_reason": "8", | ||
| 89 | +// "evidence_images": [ | ||
| 90 | +// "/2016/06/30/11/02ba04e8b96654fc6c1fab12dda61bec21.png", | ||
| 91 | +// "/2016/06/30/11/014c64b459499081c8bd237eb8e26decf8.png" | ||
| 92 | +// ], | ||
| 93 | +// "product_skn": "51177771", | ||
| 94 | +// "goods_type": "1", | ||
| 95 | +// "product_skc": "310207", | ||
| 96 | +// "product_sku": "978129" | ||
| 97 | + | ||
| 49 | $applyBtn.click(function() { | 98 | $applyBtn.click(function() { |
| 50 | - $.ajax({ | ||
| 51 | - type: 'POST', | ||
| 52 | - url: '/me/return/refund/apply', | ||
| 53 | - data: { | ||
| 54 | - id: 11 | ||
| 55 | - }, | ||
| 56 | - success: function(data) { | ||
| 57 | - if (data.code === 200) { | ||
| 58 | - console.log(data); | ||
| 59 | - } | ||
| 60 | - } | ||
| 61 | - }); | 99 | + packApplyInfo(); |
| 100 | + | ||
| 101 | + // $.ajax({ | ||
| 102 | + // type: 'POST', | ||
| 103 | + // url: '/me/return/refund/apply', | ||
| 104 | + // data: { | ||
| 105 | + // id: 11 | ||
| 106 | + // }, | ||
| 107 | + // success: function(data) { | ||
| 108 | + // if (data.code === 200) { | ||
| 109 | + // console.log(data); | ||
| 110 | + // } | ||
| 111 | + // } | ||
| 112 | + // }); | ||
| 62 | }); | 113 | }); |
| @@ -7,6 +7,78 @@ | @@ -7,6 +7,78 @@ | ||
| 7 | padding-bottom: 20px; | 7 | padding-bottom: 20px; |
| 8 | } | 8 | } |
| 9 | 9 | ||
| 10 | + .special-reason { | ||
| 11 | + padding-top: 20px; | ||
| 12 | + display: none; | ||
| 13 | + | ||
| 14 | + .left-title { | ||
| 15 | + width: 150px; | ||
| 16 | + padding-left: 54px; | ||
| 17 | + | ||
| 18 | + .red { | ||
| 19 | + color: #d93549; | ||
| 20 | + margin-right: 3px; | ||
| 21 | + } | ||
| 22 | + } | ||
| 23 | + | ||
| 24 | + .right-content { | ||
| 25 | + width: 570px; | ||
| 26 | + } | ||
| 27 | + | ||
| 28 | + .mark-text { | ||
| 29 | + width: 570px; | ||
| 30 | + height: 120px; | ||
| 31 | + resize: none; | ||
| 32 | + border-color: #eee; | ||
| 33 | + } | ||
| 34 | + | ||
| 35 | + .img-wrap, | ||
| 36 | + .img-upload { | ||
| 37 | + width: 60px; | ||
| 38 | + height: 60px; | ||
| 39 | + border: 1px dashed #eee; | ||
| 40 | + float: left; | ||
| 41 | + margin-right: 10px; | ||
| 42 | + } | ||
| 43 | + | ||
| 44 | + .img-upload { | ||
| 45 | + line-height: 60px; | ||
| 46 | + text-align: center; | ||
| 47 | + color: #dfdfdf; | ||
| 48 | + cursor: pointer; | ||
| 49 | + | ||
| 50 | + .iconfont { | ||
| 51 | + font-size: 34px; | ||
| 52 | + } | ||
| 53 | + } | ||
| 54 | + | ||
| 55 | + .img-wrap { | ||
| 56 | + position: relative; | ||
| 57 | + } | ||
| 58 | + | ||
| 59 | + .img-wrap:hover .img-opt { | ||
| 60 | + display: block; | ||
| 61 | + } | ||
| 62 | + | ||
| 63 | + .img-opt { | ||
| 64 | + width: 100%; | ||
| 65 | + height: 20px; | ||
| 66 | + line-height: 20px; | ||
| 67 | + background: #555; | ||
| 68 | + font-size: 12px; | ||
| 69 | + color: #fff; | ||
| 70 | + opacity: 0.7; | ||
| 71 | + position: absolute; | ||
| 72 | + text-align: center; | ||
| 73 | + display: none; | ||
| 74 | + | ||
| 75 | + > * { | ||
| 76 | + display: inline-block; | ||
| 77 | + cursor: pointer; | ||
| 78 | + } | ||
| 79 | + } | ||
| 80 | + } | ||
| 81 | + | ||
| 10 | .opt-btn { | 82 | .opt-btn { |
| 11 | padding-top: 40px; | 83 | padding-top: 40px; |
| 12 | line-height: 40px; | 84 | line-height: 40px; |
| @@ -99,6 +171,13 @@ | @@ -99,6 +171,13 @@ | ||
| 99 | .num > input { | 171 | .num > input { |
| 100 | width: 40px; | 172 | width: 40px; |
| 101 | } | 173 | } |
| 174 | + | ||
| 175 | + .special-reason { | ||
| 176 | + width: 100%; | ||
| 177 | + height: auto; | ||
| 178 | + line-height: 1.5; | ||
| 179 | + text-align: left; | ||
| 180 | + } | ||
| 102 | } | 181 | } |
| 103 | } | 182 | } |
| 104 | 183 |
-
Please register or login to post a comment