Authored by yyq

原因切换

... ... @@ -3,8 +3,8 @@
{{> common/subtitle}}
<h4 class="third-title">选择退货商品</h4>
<div class="refund-goods clearfix">
{{log this}}
<div class="refund-goods clearfix"{{# speclialReason}} data-{{id}}="{{@index}}"{{/ speclialReason}}>
<ul class="goods-header">
<li class="info">商品信息</li>
<li class="reason">退货原因</li>
... ... @@ -14,7 +14,7 @@
{{# goods}}
<div class="goods-item clearfix">
<div class="check">{{> icon/checkbox}}</div>
<div class="check" data-skn="{{skn}}" data-skc="{{skc}}" data-sku="{{sku}}" data-price="{{price}}" data-type="{{typeId}}">{{> icon/checkbox}}</div>
<div class="img">
<img class="lazy" data-original="{{image img 70 90}}">
</div>
... ... @@ -24,7 +24,7 @@
<p>×{{num}}</p>
</div>
<div class="reason">
<select>
<select class="refund-reason">
<option>选择退款原因</option>
{{# reasonList}}
<option value="{{id}}">{{name}}</option>
... ... @@ -37,6 +37,7 @@
<span class="iconfont">&#xe61f;</span>
</div>
<div class="price">¥{{round price 2}}</div>
{{> returns/special-reason}}
</div>
{{/ goods}}
</div>
... ...
<div class="special-reason">
<div class="clearfix">
<div class="left left-title">
<span class="red">*</span>问题描述:
</div>
<div class="left right-content">
<textarea class="mark-text"></textarea>
</div>
</div>
<div class="clearfix">
<div class="left left-title">
<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
... ...
... ... @@ -6,12 +6,19 @@
var $ = require('yoho-jquery'),
lazyload = require('yoho-jquery-lazyload');
var $check = $('.check'),
var $refundTable = $('.refund-goods'),
$check = $('.check'),
$refundType = $('.refund-type'),
$typeInfo = $refundType.children('dl');
var $applyBtn = $('#apply-btn');
var specialReason = $refundTable.data() || {},
payInfo = { // 退款信息
type: 3, // 2--银行卡 3--支付宝 4--yoho币
dom: $typeInfo.eq(0)
};
var checked;
require('../plugins/check');
... ... @@ -26,6 +33,12 @@ function restApplyBtn() {
}
}
function packApplyInfo() {
if (checked && checked.documents) {
console.log(checked);
}
}
$check.check({
type: 'checkbox',
onChange: function() {
... ... @@ -34,29 +47,67 @@ $check.check({
}
});
$refundTable.on('change', '.refund-reason', function() {
var $this = $(this),
$specialDom = $this.parent().siblings('.special-reason'),
val = $this.val();
if (specialReason.hasOwnProperty(val)) {
$specialDom.slideDown();
} else {
$specialDom.slideUp();
}
$specialDom.siblings('.check').data({reason: val});
});
$refundType.on('click', '.type-item', function() {
var $this = $(this),
index;
if (!$this.hasClass('cur')) {
if ($this.hasClass('ali-item')) {
payInfo.type = 3;
} else {
payInfo.type = 2;
}
index = $this.index();
// 切换退款卡片
$this.addClass('cur').siblings('.cur').removeClass('cur');
// 切换退款信息输入容器
payInfo.dom = $typeInfo.eq(index);
$typeInfo.addClass('hide');
$typeInfo.eq(index).removeClass('hide');
payInfo.dom.removeClass('hide');
}
});
// "last_price": "385.00",
// "remark": "重量不行",
// "returned_reason": "8",
// "evidence_images": [
// "/2016/06/30/11/02ba04e8b96654fc6c1fab12dda61bec21.png",
// "/2016/06/30/11/014c64b459499081c8bd237eb8e26decf8.png"
// ],
// "product_skn": "51177771",
// "goods_type": "1",
// "product_skc": "310207",
// "product_sku": "978129"
$applyBtn.click(function() {
$.ajax({
type: 'POST',
url: '/me/return/refund/apply',
data: {
id: 11
},
success: function(data) {
if (data.code === 200) {
console.log(data);
}
}
});
packApplyInfo();
// $.ajax({
// type: 'POST',
// url: '/me/return/refund/apply',
// data: {
// id: 11
// },
// success: function(data) {
// if (data.code === 200) {
// console.log(data);
// }
// }
// });
});
... ...
... ... @@ -7,6 +7,78 @@
padding-bottom: 20px;
}
.special-reason {
padding-top: 20px;
display: none;
.left-title {
width: 150px;
padding-left: 54px;
.red {
color: #d93549;
margin-right: 3px;
}
}
.right-content {
width: 570px;
}
.mark-text {
width: 570px;
height: 120px;
resize: none;
border-color: #eee;
}
.img-wrap,
.img-upload {
width: 60px;
height: 60px;
border: 1px dashed #eee;
float: left;
margin-right: 10px;
}
.img-upload {
line-height: 60px;
text-align: center;
color: #dfdfdf;
cursor: pointer;
.iconfont {
font-size: 34px;
}
}
.img-wrap {
position: relative;
}
.img-wrap:hover .img-opt {
display: block;
}
.img-opt {
width: 100%;
height: 20px;
line-height: 20px;
background: #555;
font-size: 12px;
color: #fff;
opacity: 0.7;
position: absolute;
text-align: center;
display: none;
> * {
display: inline-block;
cursor: pointer;
}
}
}
.opt-btn {
padding-top: 40px;
line-height: 40px;
... ... @@ -99,6 +171,13 @@
.num > input {
width: 40px;
}
.special-reason {
width: 100%;
height: auto;
line-height: 1.5;
text-align: left;
}
}
}
... ...