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) => {
banner: 'http://placehold.it/{width}x{height}',
exchange: {
title: '换货申请',
hidePrice: true,
orderGoods: {
goodsImage: '',
productName: 'TEEBACCO 极简笑脸印花卫衣',
colorName: '黑色',
sizeName: 'M'
goods: {
img: '//img10.static.yhbimg.com/goodsimg/2016/01/08/10/0109e09f600bfa92adf43bd046166cc8d1.jpg?imageMogr2/thumbnail/65x90/extent/65x90/background/d2hpdGU=/position/center/quality/80',
name: 'TEEBACCO 极简笑脸印花卫衣',
color: '黑色',
size: 'M'
}
}
... ...
{{!-- {{# exchange}} --}}
<div class="exchange-detail-page">
<div class="exchange-apply">
{{# exchange}}
{{> common/subtitle}}
<p class="state"><span class="iconfont">&#xe618;</span>换货申请审核中</p>
<div class="apply-container">
<div class="return-prompt">
换货须知
</div>
<div class="way">
<p class="way-title">您已选择{{way}}</p>
<p>请将商品连同吊牌、包装、发货单（如无发货单，您可找张白纸上注明订单编号，收货人姓名及手机号码）、发票（如有）、赠品（如有）一并保存，
如有遗漏将影响您的退换货进度，敬请谅解
</p>
<p class="cancel">如果您不想换货了，您可以<span class="cancel-btn">取消申请</span></p>
</div>
<h2>换货商品</h2>
<div class="adress">
<p class="adress-title">收货地址<span class="modify-btn">修改</span></p>
<div class="adress-detail">
<p>所在区域：江苏省 南京市 雨花台区</p>
<p>收 货 人：赵四</p>
<p>详细地址：西善桥北路 109 号</p>
<p>联系电话：17714194699</p>
</div>
</div>
<div class="table">
<ul class="header">
<li class="info">商品信息</li>
<li class="st">换货原因</li>
<li class="op">换货数量</li>
</ul>
</div>
<div class="good-info">
<div class="table">
<ul class="header">
<li class="info">商品信息</li>
<li class="st">换货原因</li>
<li class="op">换货信息</li>
</ul>
</div>
{{!-- {{#list}} --}}
<div class="table">
<div class="table-body">
{{> order/goods-box}}
<div class="goods-info">
<img class="lazy" data-original="{{image img 70 90}}">
<div class="info">
<p class="good-name">{{!-- {{name}} --}}fdefwfwefwrefverfref</p>
<p>颜色：{{color}}&nbsp;尺码：{{size}}</p>
<p>×{{num}}</p>
</div>
</div>
<div class="common-column special-border">
{{!-- <p class="refund-status">{{statusName}}</p> --}}
<p class="reason">{{reason}}发错货</p>
</div>
<div class="common-column special-border operation">
<p class="subtext">color: 蓝色<br>size: M</p>
</div>
</div>
<div class="reason-info">
<span>问题描述：太小了</span>
<div class="reason-img">照片凭证：
<div class="evidence">
<img src="{{image img 70 90}}">
</div>
</div>
</div>
{{!-- {{/list}} --}}
</div>
{{/ exchange}}
</div>
</div>
\ No newline at end of file
</div>
{{!-- {{/ exchange}} --}}
\ No newline at end of file
... ...
<div class="returns-wrap">
{{!-- {{# returns}}
{{# returns}}
{{> common/subtitle}}
{{> refund}}
{{/ returns}} --}}
{{!-- </div> --}}
{{> exchange}}
{{/ returns}}
</div>
... ...
.exchange-detail-page {
position: relative;
.state {
font-size: 16px;
color: #5cb0de;
.apply-container {
h2 {
font-size: 16px;
margin-bottom: 15px;
span {
font-size: 20px;
margin-right: 5px;
}
}
.return-prompt {
.way {
font-size: 14px;
width: 70px;
height: 25px;
border: 1px solid #eee;
line-height: 25px;
text-align: center;
position: absolute;
top: 0;
right: 0;
border-bottom: 1px solid #eee;
.way-title {
margin-top: 10px;
font-weight: bold;
height: 40px;
line-height: 35px;
}
p {
line-height: 22px;
height: 22px;
}
.cancel {
display: block;
margin-top: 18px;
width: 220px;
height: 50px;
line-height: 50px;
font-size: 12px;
}
.cancel-btn {
float: right;
display: block;
height: 25px;
width: 70px;
background: #1b1b1b;
color: #fff;
line-height: 25px;
text-align: center;
margin-top: 10px;
}
}
.adress {
overflow: hidden;
margin-top: 30px;
font-size: 14px;
border-bottom: 1px solid #eee;
.adress-title {
display: block;
font-size: 16px;
width: 125px;
height: 40px;
line-height: 40px
}
.modify-btn {
font-size: 12px;
float: right;
display: block;
height: 20px;
width: 40px;
line-height: 20px;
text-align: center;
margin-top: 10px;
border: 1px solid #eee;
}
.adress-detail {
margin-bottom: 15px;
p {
display: block;
height: 25px;
line-height: 25px;
}
}
}
.table {
width: 100%;
margin-bottom: 20px;
color: #616161;
.header {
height: 40px;
... ... @@ -54,94 +116,87 @@
.table-body {
display: table;
font-size: 14px;
border: 1px solid #f1f1f1;
}
.common-column {
width: 138px;
display: table-cell;
text-align: center;
vertical-align: top;
padding-top: 30px;
position: relative;
}
.special-border {
border-right: 1px solid #f1f1f1;
border-bottom: 1px solid #f1f1f1;
}
.common-column {
width: 138px;
display: table-cell;
text-align: center;
vertical-align: top;
padding-top: 30px;
position: relative;
}
.goods-container {
.goods-info {
width: 516px;
display: table-cell;
display: inline-block;
box-sizing: border-box;
border-top: none;
font-weight: normal;
img {
width: 65px;
width: 70px;
height: 90px;
display: inline-block;
box-sizing: border-box;
margin: 30px 20px;
}
}
.special-border {
border-right: 1px solid #f1f1f1;
border-bottom: 1px solid #f1f1f1;
}
.detail {
width: 408px;
padding: 30px 8px 0 0;
float: right;
box-sizing: border-box;
line-height: 1.4;
font-size: 14px;
color: #616161;
.info {
width: 400px;
padding: 30px 8px 0 0;
float: right;
box-sizing: border-box;
line-height: 1.4;
font-size: 14px;
color: #616161;
}
span {
font-size: 12px;
.good-name {
margin-bottom: 8px;
}
}
.with-bottom-space {
margin-bottom: 8px;
.common-column {
width: 208px;
display: table-cell;
text-align: center;
vertical-align: top;
padding-top: 30px;
position: relative;
}
.with-space {
.subtext {
display: inline-block;
margin-right: 8px;
margin-bottom: 8px;
line-height: 30px;
}
.bold {
color: #222;
font-weight: bold;
.reason {
display: inline-block;
margin-top: 20px;
}
.special-column {
display: none;
.reason-info {
overflow: hidden;
padding: 25px 0 0 20px;
width: 100%;
border: 1px solid #eee;
border-top: none;
img {
float: left;
width: 70px;
height: 90px;
}
span {
line-height: 25px;
height: 25px;
display: block;
}
}
.sub-column {
display: none;
.reason-img {
margin-top: 5px;
}
.common-column {
width: 208px;
display: table-cell;
text-align: center;
vertical-align: top;
padding-top: 30px;
position: relative;
.evidence {
width: 825px;
overflow: hidden;
float: right;
}
}
... ...