fe / yoho-blk · Commits

Go to a project

Authored by biao
Commit c761c1b4c02bb02b1d574c12c216be846b2486b7 2 parents 0078e73c 6939977b master ... develop feature/catch feature/docker feature/login-msg feature/login-ua-ip feature/removCamel feature/safe-bug feature/sessionKey feature/setting feature/vip feature/webpack2 feature/wsl5.3 gray release/2.0 release/fontBack2.0

Merge branch 'feature/return' into develop

Inline Side-by-side
Showing 30 changed files with 1321 additions and 138 deletions
... ... @@ -15,7 +15,7 @@ const orderModel = require('../models/order');
const index = (req, res) => {
const type = req.query.type;
const page = req.query.page;
const uid = req.user.uid || '13549567';
const uid = req.user.uid || '10931021';
orderModel.getOrderData(uid, type, page).then(result => {
res.display('index', {
... ... @@ -32,7 +32,7 @@ const index = (req, res) => {
const detail = (req, res) => {
const code = req.query.code;
const uid = req.user.uid || '7394907';
const uid = req.user.uid || '10931021';
orderModel.getOrderDetail(uid, code).then(result => {
res.display('index', {
... ... @@ -50,7 +50,7 @@ const detail = (req, res) => {
const getOrderList = (req, res) => {
const type = req.query.type;
const page = req.query.page;
const uid = req.user.uid || '7394907';
const uid = req.user.uid || '10931021';
orderModel.getOrderData(uid, type, page).then(result => {
res.display('order-table', {
... ... @@ -65,7 +65,7 @@ const getOrderList = (req, res) => {
const getOrderTotal = (req, res) => {
const type = req.query.type;
const uid = req.user.uid || '7394907';
const uid = req.user.uid || '10931021';
orderModel.getOrderData(uid, type).then(result => {
... ... @@ -78,7 +78,7 @@ const getOrderTotal = (req, res) => {
};
const cancelOrder = (req, res) => {
const uid = req.user.uid || '7394907';
const uid = req.user.uid || '10931021';
const code = req.query.orderCode;
orderModel.cancelOrder(uid, code).then(result => {
... ... @@ -87,7 +87,7 @@ const cancelOrder = (req, res) => {
};
const deleteOrder = (req, res) => {
const uid = req.user.uid || '7394907';
const uid = req.user.uid || '10931021';
const code = req.query.orderCode;
orderModel.deleteOrder(uid, code).then(result => {
... ... @@ -96,7 +96,7 @@ const deleteOrder = (req, res) => {
};
const getExpressInfo = (req, res) => {
const uid = req.user.uid || '7394907';
const uid = req.user.uid || '10931021';
const code = req.query.orderCode;
orderModel.getExpressInfo(uid, code).then(result => {
... ... @@ -111,7 +111,7 @@ const getCancelOrderReason = (req, res) => {
};
const editOrder = (req, res) => {
const uid = req.user.uid || '7394907';
const uid = req.user.uid || '10931021';
const query = req.query;
query.uid = uid;
... ...
... ... @@ -35,7 +35,6 @@ const refund = (req, res, next) => {
let uid = req.user.uid || '8050560';
let code = parseInt(req.params.orderCode, 10) || '160192757';
code = '160192757';
if (!uid || !code) {
return next();
}
... ... @@ -67,8 +66,101 @@ const refundApply = (req, res, next) => {
};
const refundDetail = (req, res, next) => {
let applyId = parseInt(req.params.applyId, 10) || '429528',
uid = req.user.uid || '8050560';
if (!uid || !applyId) {
return next();
}
returns.getRefundDetailData(applyId, uid).then(result => {
res.display('index', {
page: 'returns-refund',
content: result
});
}).catch(next);
};
const exchange = (req, res, next) => {
next();
const code = req.params.orderCode;
const uid = req.user.uid || '8050560';
returns.getChangeGoodsList(code, uid).then(result => {
res.display('index', {
page: 'returns-change',
isMe: true,
content: Object.assign({
nav: mcHandler.getMeCrumb('我的退/换货'),
navigation: mcHandler.getSideMenu('我的退/换货'),
banner: 'http://placehold.it/{width}x{height}'
}, result)
});
}).catch(next);
};
const getProductInfo = (req, res, next) => {
const productId = req.query.productId;
const productSkn = req.query.productSkn;
returns.getProductInfo(productId, productSkn).then(result => {
res.json(result);
}).catch(next);
};
const detailExchange = (req, res) => {
// const uid = global.yoho.uid || '8050560';
// const page = req.query.page;
res.display('index', {
page: 'exchange-detail',
isMe: true,
content: {
nav: mcHandler.getMeCrumb('我的退/换货'),
navigation: mcHandler.getSideMenu('我的退/换货'),
banner: 'http://placehold.it/{width}x{height}',
exchange: {
// audit: true,
// through: false,
// send: true,
finish: true,
way: '上门送货',
goods: [
{
img: '',
name: 'fdefwfwefwrefverfref',
color: '',
size: '',
num: '',
reason: '',
exchangeColor: '蓝色',
exchangeSize: 'M'
},
{
img: '',
name: 'fdefwfwefwrefverfref',
color: '',
size: '',
num: '',
reason: '',
exchangeColor: '蓝色',
exchangeSize: 'M'
}
],
reasonInfo: [
{
problem: '太小了',
img: ''
},
{
problem: '太小了',
img: ''
}
]
}
}
});
};
module.exports = {
... ... @@ -76,5 +168,8 @@ module.exports = {
detail,
refund,
refundApply,
exchange
exchange,
getProductInfo,
refundDetail,
detailExchange
};
... ...
... ... @@ -24,6 +24,14 @@ const getRefundGoodsAsync = (orderCode, uid) => {
}, {code: 200});
};
const getRefundDetailAsync = (applyId, uid) => {
return api.get('', {
method: 'app.refund.detail',
id: applyId,
uid: uid
}, {code: 200});
};
const refundSubmitAsync = (orderCode, uid, goods, payment) => {
return api.get('', {
method: 'app.refund.submit',
... ... @@ -34,9 +42,28 @@ const refundSubmitAsync = (orderCode, uid, goods, payment) => {
}, {code: 200});
};
const getChangeGoodsListAsync = (orderCode, uid) => {
return api.get('', {
method: 'app.change.goodsList',
order_code: orderCode,
uid: uid
});
};
const getProductInfoAsync = (productId, productSkn) => {
return api.get('', {
method: 'app.product.data',
product_id: productId,
product_skn: productSkn
});
};
module.exports = {
getOrderInfoAsync,
getRefundGoodsAsync,
getChangeGoodsListAsync,
getProductInfoAsync,
getRefundDetailAsync,
refundSubmitAsync
};
... ...
... ... @@ -16,6 +16,20 @@ const helpers = global.yoho.helpers;
const pageSize = 10;
// const _reduceArrByProductSku = data => {
// const d = [];
//
// d.push(data[0]);
//
// data.reduce((p, c) => { //eslint-disable-line
// if (p && c && p.productSku !== c.productSku) {
// d.push[c];
// }
// });
//
// return d;
// };
const getUserReturn = (uid, page) => {
return api.get('', {
... ... @@ -68,6 +82,75 @@ const _setSideMenu = (type) => {
};
};
const _calcStatusRate = (num, total) => {
let rate = 0;
if (total) {
rate = `${_.toInteger(num / total * 100)}%`;
}
return rate;
};
const _setDefaultStatus = (type) => {
const list = ['提交申请', '审核通过', '商品寄回', '商品入库', `${type}完成`];
let statusList = [];
let resData = {};
_.forEach(list, (value, key) => {
statusList.push({
step: _.toInteger(key) + 1,
name: value
});
});
statusList[0].act = true;
resData.returnStstus = {
rate: _calcStatusRate(1, statusList.length),
statusList: statusList
};
return resData;
}
const _setReturnStatus = (list, half) => {
let resData = {};
if (list && list.length) {
let statusList = [],
step = 0;
let rate;
// 遍历进度列表
_.forEach(list, (value, key) => {
let state = {
act: value.act === 'Y',
step: _.toInteger(key) + 1,
name: value.name
};
if (state.act) {
step++;
}
statusList.push(state);
});
// 多半格进度特殊处理
if (half) {
rate = _calcStatusRate(step * 2 + 1, statusList.length * 2);
} else {
rate = _calcStatusRate(step, statusList.length);
}
resData.returnStstus = {
rate: rate,
statusList: statusList
};
}
return resData;
};
const _setRefundGoodList = (data) => {
let resData = {};
... ... @@ -104,14 +187,42 @@ const _setRefundGoodList = (data) => {
return resData;
};
const _setRefundDetailData = (data) => {
let resData = {};
switch (data.status) {
case 10:
resData.orderReview = {pass: true};
resData.refundExpress = true;
resData.refundAddress = true;
break;
case 20:
resData.refundExpress = true;
break;
case 30:
resData.backStorage = true;
break;
case 40:
resData.refundSure = true;
break;
default:
resData.orderReview = true;
break;
}
return resData;
};
const getRefundGoodsData = (orderCode, uid) => {
return returnsAPI.getRefundGoodsAsync(orderCode, uid).then(result => {
let resData = {};
Object.assign(resData, _setSideMenu('我的退/换货'));
resData.returns = {
title: '退货申请',
refund: {}
refund: _setDefaultStatus('退货') || {}
};
if (result.data) {
... ... @@ -124,12 +235,39 @@ const getRefundGoodsData = (orderCode, uid) => {
});
};
const getRefundDetailData = (applyId, uid) => {
return returnsAPI.getRefundDetailAsync(applyId, uid).then(result => {
let resData = {};
Object.assign(resData, _setSideMenu('我的退/换货'));
resData = {
title: '退货申请',
refundDetail: {}
};
if (result.data) {
// console.log(_setRefundDetailData(result.data));
Object.assign(resData.refundDetail, _setReturnStatus(result.data.statusList));
Object.assign(resData.refundDetail, _setRefundDetailData(result.data));
}
return {returns: resData};
});
};
const saveRefund = (orderCode, uid, goods, payment) => {
return returnsAPI.getOrderInfoAsync(orderCode, uid, '').then(result => {
if (!_.isEmpty(result)) {
return returnsAPI.refundSubmitAsync(orderCode, uid, goods, payment).then(subRes => {
if (subRes && subRes.data) {
return {code: 200, data: {refer: subRes.data.apply_id}};
return {
code: 200,
data: {
refer: helpers.urlFormat(`/return/refund/detail/${subRes.data.apply_id}`)
}
};
}
return {code: 400, message: '申请失败'};
});
... ... @@ -139,8 +277,55 @@ const saveRefund = (orderCode, uid, goods, payment) => {
});
};
const getProductInfo = (productId, productSkn) => {
return returnsAPI.getProductInfoAsync(productId, productSkn).then(result => {
if (result.code === 200) {
camelCase(result);
result.data.goodsList.forEach(good => {
good.colorImage = helpers.image(good.colorImage, 20, 20);
});
}
return result;
});
};
const getChangeGoodsList = (orderCode, uid) => {
return returnsAPI.getChangeGoodsListAsync(orderCode, uid).then(result => {
const basicData = {
title: '申请换货'
};
let data;
if (result && result.data) {
data = camelCase(result.data);
// data.goodsList = _reduceArrByProductSku(data.goodsList);
data.hidePrice = true;
data.goodsList.forEach(good => {
good.showCheckbox = true;
good.hidePrice = true;
// good.buyNumber = good.num;
good.buyNumber = 1;
data.goodsList[2].colorId = 1;
});
}
return {
returnsChange: Object.assign(basicData, data)
};
});
};
module.exports = {
getUserReturn,
getRefundGoodsData,
getChangeGoodsList,
getProductInfo,
getRefundDetailData,
saveRefund
};
... ...
... ... @@ -37,8 +37,11 @@ router.get('/reAdd', order.reAddCart);
router.get('/return', returns.index);
router.get('/return/refund/:orderCode', returns.refund);
router.get('/return/exchange/:orderCode', returns.exchange);
router.get('/return/refund/detail/:applyId', returns.refundDetail);
router.get('/return/exchange/detail', returns.detailExchange);
router.get('/return/:returnId', returns.detail);
router.post('/return/refund/apply', returns.refundApply);
router.get('/return/getProductInfo', returns.getProductInfo);
// 个人中心首页/收货地址
router.get('/address', auth, address.index);
... ...
... ... @@ -35,12 +35,22 @@
{{#if returns}}
{{> returns}}
{{/if}}
{{!-- 换货详情 --}}
{{#if exchange}}
{{> exchange-detail}}
{{/if}}
{{!-- 我的退换货列表 --}}
{{#if returnsList}}
{{> returns-list}}
{{/if}}
{{!-- 发起换货申请 --}}
{{#if returnsChange}}
{{> returns-change}}
{{/if}}
{{!-- 我的收藏 --}}
{{#if collection}}
{{> collection}}
... ...
{{# exchange}}
<div class="exchange-detail-page">
<div class="exchange-apply">
{{# exchange}}
{{> common/subtitle}}
{{#if audit}}
<p class="state"><span class="iconfont">&#xe618;</span>换货申请审核中</p>
{{/if}}
<div class="apply-container">
<div class="return-prompt">
换货须知
</div>
{{#if through}}
<p class="state"><span class="iconfont">&#xe60f;</span>换货申请已通过</p>
{{/if}}
<h2>换货商品</h2>
{{#if send}}
<p class="state"><span class="iconfont">&#xe61a;</span>换货商品已发出</p>
{{/if}}
<div class="table">
<ul class="header">
<li class="info">商品信息</li>
<li class="st">换货原因</li>
<li class="op">换货数量</li>
</ul>
</div>
{{#if finish}}
<p class="state"><span class="iconfont">&#xe60f;</span>换货完成</p>
{{/if}}
<div class="way">
{{#if finish}}
<p class="contact">如有疑问，请联系<span class="iconfont">&#xe61c;</span>在线客服</p>
{{else}}
<p class="way-title">您已选择{{way}}</p>
<p>请将商品连同吊牌、包装、发货单（如无发货单，您可找张白纸上注明订单编号，收货人姓名及手机号码）、发票（如有）、赠品（如有）一并保存，
如有遗漏将影响您的退换货进度，敬请谅解
</p>
{{/if}}
{{#if audit}}
<p class="cancel">如果您不想换货了，您可以<span class="cancel-btn">取消申请</span></p>
{{/if}}
{{!-- {{#list}} --}}
{{#if finish}}
<div class="order">
<span class="check">查看</span>
<span class="exchange-order">换货订单</span>
</div>
{{/if}}
</div>
<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>
<span class="exchange-goods">换货商品</span>
<div class="good-info">
<div class="table">
<ul class="header">
<li class="info">商品信息</li>
<li class="st">换货原因</li>
<li class="op">换货信息</li>
</ul>
</div>
<div class="table">
{{# goods}}
<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}}</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: {{exchangeColor}}<br>size: {{exchangeSize}}</p>
</div>
</div>
{{!-- {{/list}} --}}
{{/ goods}}
{{# reasonInfo}}
<div class="reason-info">
<span>问题描述：{{problem}}</span>
<div class="reason-img">照片凭证：
<div class="evidence">
<img src="{{image img 70 90}}">
</div>
</div>
</div>
{{/ reasonInfo}}
</div>
{{/ exchange}}
</div>
</div>
\ No newline at end of file
</div>
{{/ exchange}}
\ No newline at end of file
... ...
<div class="good-info {{#if @last}}last{{/if}}">
<img src="{{image goodsImage 65 90}}">
<div class="detail">
<p class="with-bottom-space">{{productName}}</p>
<span class="with-space">颜色：{{colorName}}</span>
<span>尺码：
<span class="bold">{{sizeName}}</span>
</span>
<p class="bold buy-number">{{> icon/error-round}}{{buyNumber}}</p>
</div>
</div>
... ...
<div class="goods-container special-border {{#if hidePrice}}no-price{{/if}}">
{{#orderGoods}}
<div class="good-info {{#if @last}}last{{/if}}">
<img src="{{image goodsImage 65 90}}">
<div class="detail">
<p class="with-bottom-space">{{productName}}</p>
<span class="with-space">颜色：{{colorName}}</span>
<span>尺码：
<span class="bold">{{sizeName}}</span>
</span>
<p class="bold buy-number">{{> icon/error-round}}{{buyNumber}}</p>
</div>
</div>
{{> order/good-info}}
{{#unless hidePrice}}
<div class="sub-column right-border bold">
<p class="{{#if @last}}last{{/if}}">¥{{goodsPrice}}</p>
</div>
{{/unless}}
<div class="sub-column right-border special-column bold">
<p class="bold">{{buyNumber}}</p>
</div>
<div class="sub-column special-column bold">
<p class="bold">¥{{goodsAmount}}</p>
</div>
{{/unless}}
{{/orderGoods}}
</div>
... ...
... ... @@ -29,7 +29,9 @@
{{#if showEditOption}}
<p class="subtext">评价晒单</p>
<p class="subtext">申请退货</p>
<p class="subtext">申请换货</p>
<a href="/me/return/exchange/{{orderCode}}">
<p class="subtext">申请换货</p>
</a>
<p class="subtext delete">删除订单</p>
{{/if}}
{{#if showGetBtn}}
... ...
{{# refundDetail}}
<div class="refund-datail-wrap">
{{> returns/returns-status}}
{{# orderReview}}
<div class="top-tip">
{{#if pass}}
<p class="tip-status">
<span class="iconfont blue">&#xe618;</span>
<span class="blue">退货申请已通过</span>
</p>
{{^}}
<p class="tip-status">
<span class="iconfont blue">&#xe618;</span>
<span class="blue">退货申请审核中</span>
</p>
{{/if}}
<p class="tip-text">
请将商品连同吊牌、包装、发货单（如无发货单，您可找张白纸上注明订单编号，收货人姓名及手机号码）、发票（如有）、 赠品（如有）一并寄回，如有 遗漏将影响您的退换货进度，敬请谅解<br>
非我司原因的退换货，寄回运费由您承担。商品客观问题的退换货，请您先行垫付运费，邮费会在退款中补贴给您，
<b>我们不接受平邮和到付</b>
，感谢您的理解与支持
</p>
<p>
如果您不想退货了，您可以
<span class="cancel-btn btn">取消申请</span>
</p>
</div>
{{/ orderReview}}
{{# backStorage}}
<div class="storage-tip top-tip">
<p class="tip-status">
<span class="iconfont blue">&#xe618;</span>
<span class="blue">您寄回的商品已收到</span>
</p>
<p>
我们会在入库后的1-3个工作日内处理您的退款，如有疑问，请联系
<span>在线客服</span>
</p>
</div>
{{/ backStorage}}
{{# refundSure}}
<div class="success-tip top-tip">
<p class="tip-status">
<span class="iconfont blue">&#xe618;</span>
<span class="blue">退款完成</span>
</p>
<p>退款方式：<em>由于银行内部处理流程的差异，储蓄卡需要3-7个工作日到账，信用卡需要7-15个工作日到账</em></p>
<p class="tip-pad-top">退款账户：</p>
<p class="tip-pad-top">金额：</p>
<p class="tip-pad-top">有货币：</p>
</div>
{{/ refundSure}}
{{# refundExpress}}
<div class="return-express">
<h4 class="third-title">填写物流</h4>
<p>请您在<span class="blue">7月30日24:00</span>前将商品寄回并填写物流，逾期将自动取消申请</p>
<dl class="express-wrap">
<dd>
物流公司：
<select>
<option>顺丰</option>
<option>申通</option>
</select>
</dd>
<dd>
快递单号：
<input type="text">
</dd>
<dd>
<span class="submit-express btn">提交</span>
</dd>
</dl>
</div>
{{/ refundExpress}}
{{# refundAddress}}
<div class="return-address">
<h4 class="third-title">寄回地址</h4>
<p>地址：{{address}}</p>
<p>收件人：{{name}}</p>
<p>邮编：{{code}}</p>
<p>联系电话：{{phone}}</p>
</div>
{{/ refundAddress}}
<div class="refund-detail-goods">
<ul class="goods-header">
<li class="info">商品信息</li>
<li>退货原因</li>
<li>退货数量</li>
</ul>
{{# goods}}
<div class="goods-item clearfix">
<div class="img">
<img class="lazy" data-original="{{image img 70 90}}">
</div>
<div class="info">
<p>{{name}}</p>
<p>颜色：{{color}}&nbsp;尺码：{{size}}</p>
<p>×{{num}}</p>
</div>
<div class="reason">dsa{{reason}}</div>
<div class="num">dasd{{num}}</div>
<dl class="special-info hide">
<dd>问题描述：</dd>
<dd>照片凭证：</dd>
</dl>
</div>
{{/ goods}}
</div>
</div>
{{/ refundDetail}}
\ No newline at end of file
... ...
{{# refund}}
{{> returns/returns-status}}
<h4 class="third-title">选择退货商品</h4>
<div class="refund-goods clearfix" {{# speclialReason}} data-{{id}}="{{@index}}"{{/ speclialReason}}>
<input id="order-code" type="hidden" value="{{orderCode}}">
... ...
<div class="return-wrap user-order change">
{{#returnsChange}}
{{> common/subtitle}}
<div class="order">
<div class="table returns">
<ul class="header">
<li class="info">商品信息</li>
<li class="change-reason">换货原因</li>
<li class="change-num">换货数量</li>
</ul>
{{#goodsList}}
<div class="change-info-box">
<div class="table-body">
<div class="goods-container no-price" data-id="{{productId}}" data-skn="{{productSkn}}">
{{# showCheckbox}}
{{> icon/checkbox}}
<!--
<span class="iconfont checkbox {{#if checked}}checked{{/if}}">{{#if checked}}&#xe602;{{^}}&#xe601;{{/if}}</span>
-->
{{/ showCheckbox}}
{{> order/good-info}}
<div class="sub-column">
{{# ../this}}
{{> returns/change-reason}}
{{/ ../this}}
</div>
<div class="sub-column number">
<span class="minus">-</span>
<span class="value">{{changeNum}}</span>
<span class="plus">+</span>
</div>
</div>
</div>
<div class="form">
<div class="group color">
<span class="title">
<span class="asterisk">*</span>
换货Color： <span class="color-text" data-color={{colorId}}>{{colorName}}</span>
</span>
</div>
<div class="group size">
<span class="title">
<span class="asterisk">*</span>
换货Size： <span class="size-text" data-size="{{sizeId}}">{{sizeName}}</span>
</span>
</div>
</div>
</div>
{{/goodsList}}
</div>
</div>
{{/returnsChange}}
</div>
... ...
... ... @@ -3,5 +3,9 @@
{{> common/subtitle}}
{{> refund}}
{{> refund-detail}}
{{> exchange}}
{{/ returns}}
</div>
... ...
<select id="exchange-reasons" name="exchange-reasons">
<option value="0">请选择换货原因</option>
{{# exchangeReason}}
<option value="{{id}}">{{name}}</option>
{{/ exchangeReason}}
</select>
... ...
{{# returnStstus}}
<div class="returns-status">
<div class="back-wrap">
<div class="progress" style="width: {{rate}}"></div>
<div class="visual-state">
<ul>
{{# statusList}}
<li{{#if act}} class="act"{{/if}}>
<span class="iconfont state-bg">&#xe611;</span>
<div class="number">{{step}}</div>
<div>{{name}}</div>
</li>
{{/ statusList}}
</ul>
</div>
</div>
</div>
{{/ returnStstus}}
\ No newline at end of file
... ...
... ... @@ -19,7 +19,7 @@ module.exports = {
},
cookieDomain: 'yohobuy.com',
domains: {
api: 'http://testapi.yoho.cn:28078/', // devapi.yoho.cn:58078 testapi.yoho.cn:28078 devapi.yoho.cn:58078
api: 'http://devapi.yoho.cn:58078/', // devapi.yoho.cn:58078 testapi.yoho.cn:28078 devapi.yoho.cn:58078
service: 'http://testservice.yoho.cn:28077/', // testservice.yoho.cn:28077 devservice.yoho.cn:58077
search: 'http://192.168.102.216:8080/yohosearch/'
},
... ...
... ... @@ -32,6 +32,7 @@ $('.editorial-list-page').on('click', '.like-icon', function() {
if (data.code === 200) {
$this.next('b').removeClass('num-0').children('.num').html(data.data);
}
if (data.code === 500) {
new _alert(data.message).show();
}
... ...
var colorTpl = require('../../tpl/me/color-list.hbs');
var sizeTpl = require('../../tpl/me/size-list.hbs');
// var numCtrl = {
// valueEl: $('.number .value'),
// btn: {
// minus: $('.number .minus'),
// plus: $('.number .plus')
// },
// scope: {
// 1: {
// min: true,
// do: function(t) {
// t.btn.minus.addClass('disable');
// }
// }
// },
// initNumberScope: function() {
// var maxValue = this.valueEl.text();
//
// this.btn.plus.addClass('disable');
//
// this.scope[maxValue] = {
// max: true,
// do: function(t) {
// t.btn.plus.addClass('disable');
// }
// };
// },
// bindNumberEvent: function() {
// var $val = this.valueEl;
// var val = parseInt($val.text(), 10);
// var scope = this.scope;
// var that = this;
//
//
// this.btn.minus.on('click', function() {
// if ($(this).hasClass('disable')) {
// return;
// }
//
// if (that.btn.plus.hasClass('disable')) {
// that.btn.plus.removeClass('disable');
// }
//
// val -= 1;
// $val.text(val);
//
// if (scope[val] && scope[val].min) {
// scope[val].do(that);
// }
// });
//
// this.btn.plus.on('click', function() {
// if ($(this).hasClass('disable')) {
// return;
// }
//
// if (that.btn.minus.hasClass('disable')) {
// that.btn.minus.removeClass('disable');
// }
//
// val += 1;
// $val.text(val);
//
// if (scope[val] && scope[val].max) {
// scope[val].do(that);
// }
// });
// },
// init: function() {
// this.initNumberScope();
// this.bindNumberEvent();
// }
// };
function setActive($item) {
var color = $item.find('.color-text').data('color');
// var size = $item.find('.size-text').data('size');
var $colorList = $item.find('.color-list');
console.log(color);
$colorList.find('.img-box').each(function(i, box) {
var $box = $(box);
if ($box.find('img').data('color') === color) {
$box.find('.img-box').eq(i).addClass('active');
}
});
}
function renderList(data) {
var cTpl;
var sTpl;
var $el = $('.goods-container');
var resultId;
var resultSkn;
if (data) {
resultId = data.productId;
resultSkn = data.productSkn;
$el.each(function(index, item) {
var $item = $(item);
var id = $item.data('id');
var skn = $item.data('skn');
var $form;
if (id === resultId && skn === resultSkn) {
$form = $item.closest('.table-body').next('.form');
if (!$form.find('.color-list').length) {
cTpl = colorTpl(data);
sTpl = sizeTpl(data);
$form.find('.group.color').append(cTpl);
$form.find('.group.size').append(sTpl);
setActive($form);
}
}
});
}
}
function bindColorEvent() {
$('.color-list img').off('clice').on('click', function() {
var $this = $(this);
var $sizeList = $this.closest('.group').next('.group').find('.size-list');
var index = $this.data('index');
var colorId = $this.data('color');
var colorText = $this.attr('alt');
var $c = $this.closest('.group.color').find('.color-text');
$c.text(colorText);
$c.attr('data-color', colorId);
$this.closest('.color-list').find('.active').removeClass('active');
$this.parent().addClass('active');
$sizeList.removeClass('hide');
$sizeList.addClass('hide');
$sizeList.eq(index).removeClass('hide');
});
}
function initSizeId() {
var s = $('.size-list:not("hide")').find('span').eq(0).data('size');
$('.group.size .size-text').eq(0).attr('data-size', s);
}
function bindSizeEvent() {
$('.size-list span').off('click').on('click', function() {
var $this = $(this);
var s = $this.text();
var id = $this.data('size');
var $s = $this.closest('.group.size').find('.size-text');
$this.parent().find('.active').removeClass('active');
$this.addClass('active');
$s.text(s);
$s.attr('data-size', id);
});
}
function getProductInfo() {
var $el = $('.goods-container');
$el.each(function(index, item) {
var id = $(item).data('id');
var skn = $(item).data('skn');
if (id && skn) {
$.ajax({
url: '/me/return/getProductInfo',
data: {
productId: id,
productSkn: skn
}
}).done(function(result) {
console.log(result);
if (result.code === 200) {
renderList(result.data);
initSizeId();
bindColorEvent();
bindSizeEvent();
}
});
}
});
}
getProductInfo();
// numCtrl.init();
... ...
.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;
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;
}
.contact {
line-height: 50px;
span {
margin-left: 20px;
}
.iconfont {
font-size: 12px;
margin-right: 5px;
}
}
}
.order {
margin: 23px 0 10px;
height: 50px;
line-height: 50px;
overflow: hidden;
}
.check {
display: block;
height: 25px;
border: 1px solid #eee;
width: 70px;
background: #1b1b1b;
color: #fff;
line-height: 25px;
text-align: center;
position: absolute;
top: 0;
right: 0;
margin-top: 10px;
float: left;
margin-right: 20px;
}
.adress {
overflow: hidden;
margin: 30px 0 20px;
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;
}
}
}
.exchange-goods {
font-size: 16px;
height: 50px;
line-height: 50px;
}
.table {
width: 100%;
margin-bottom: 20px;
color: #616161;
.header {
height: 40px;
... ... @@ -54,94 +155,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 30px 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;
}
}
... ...
... ... @@ -99,6 +99,14 @@
font-size: 12px;
}
}
/* 表单必填项提示符 */
.asterisk {
position: relative;
top: 2px;
margin-right: 5px;
color: #c71814 !important;
}
}
@import "address";
... ... @@ -108,3 +116,4 @@
@import "setting/index";
@import "favorite/index";
@import "returns";
@import "exchange";
... ...
... ... @@ -18,13 +18,6 @@
text-align: center !important;
}
.asterisk {
position: relative;
top: 2px;
margin-right: 5px;
color: #c71814 !important;
}
.dialog-title {
padding-bottom: $space;
border-bottom: 1px solid #f1f1f1;
... ...
.return-wrap {
&.change {
.sub-column {
margin-top: 30px;
}
.color-list {
height: 70px;
line-height: 70px;
box-sizing: border-box;
.img-box {
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
box-sizing: border-box;
margin-right: 10px;
text-align: center;
cursor: pointer;
img {
width: 20px;
height: 20px;
}
&.active {
border: 2px solid #ccc;
position: relative;
top: -2px;
}
}
}
.asterisk {
margin-right: 0;
}
.group {
&.color {
min-height: 70px;
}
&.size {
min-height: 65px;
}
.title {
font-size: 14px;
color: #1b1b1b;
}
}
.size-list {
height: 65px;
line-height: 65px;
span {
min-width: 25px;
height: 20px;
line-height: 20px;
padding: 0 5px;
box-sizing: border-box;
margin-right: 10px;
border: 1px solid #ccc;
display: inline-block;
text-align: center;
font-size: 12px;
cursor: pointer;
&.active {
background-color: #1b1b1b;
color: #fff;
border-color: #1b1b1b;
}
}
}
}
.iconfont {
&.checkbox {
position: relative;
top: -70px;
margin-right: 10px;
font-size: 14px;
cursor: pointer;
}
}
}
... ...
@import "list"
.returns-wrap {
.returns-status {
padding: 30px 0 80px;
.back-wrap {
width: 800px;
height: 6px;
background: #eee;
border-radius: 3px;
margin: 0 auto;
}
.progress {
height: 6px;
background: #1d1d1d;
border-radius: 3px;
width: 30%;
}
.visual-state {
width: 100%;
display: table;
position: relative;
top: -15px;
> ul {
display: table-row;
}
li {
display: table-cell;
text-align: center;
}
.state-bg {
color: #eee;
}
.number {
position: relative;
top: -17px;
}
.act .state-bg {
color: #1d1d1d;
}
.act .number {
color: #fff;
}
}
}
}
@import "list";
@import "change";
@import "refund-detail";
... ...
.return-wrap {
.table {
width: 100%;
max-width: 990px;
.header {
.info {
... ... @@ -9,12 +10,26 @@
}
.st,
.op {
.op,
.change-reason,
.change-num {
width: 206px;
}
}
&.returns {
.good-info {
border: none;
.detail {
width: 380px !important;
}
}
}
.goods-container {
width: 990px;
.for-return {
display: block;
}
... ... @@ -23,24 +38,36 @@
.no-price {
.good-info {
border-right: none;
}
.good-info {
.detail {
width: 408px;
}
}
}
.sub-column {
width: 204px !important;
}
.checkbox-column {
display: table-cell;
width: 100px;
}
.common-column {
width: 208px;
.refund-status {
margin-bottom: 10px;
}
.refund-type {
position: static;
}
&.no-border {
width: 204px !important;
}
}
}
... ...
.refund-datail-wrap {
font-size: 14px;
.top-tip {
padding: 40px 0 20px;
border-bottom: 1px solid #eee;
.blue {
font-size: 16px;
line-height: 16px;
}
.tip-status {
padding-bottom: 20px;
.iconfont {
position: relative;
top: -1px;
}
}
.tip-text {
line-height: 2;
padding: 0 20px 20px 0;
}
.tip-pad-top {
padding-top: 15px;
}
b {
font-weight: 700;
}
em {
color: #9a9a9a;
}
.cancel-btn {
display: inline-block;
}
}
.return-express {
padding: 40px 0 20px;
border-bottom: 1px solid #eee;
.express-wrap {
padding-top: 10px;
> dd {
padding-top: 12px;
}
}
.submit-express {
margin-left: 74px;
}
}
.return-address {
padding: 40px 0 20px;
border-bottom: 1px solid #eee;
> p {
padding-top: 10px;
}
> p:first-child {
padding-top: 0;
}
}
.refund-detail-goods {
.goods-header {
height: 40px;
line-height: 40px;
background-color: #f5f5f5;
border: 1px solid #f1f1f1;
> * {
float: left;
width: 270px;
text-align: center;
}
.info {
width: 384px;
padding-left: 20px;
text-align: left;
}
}
.goods-item {
padding: 30px 0;
border: 1px solid #f1f1f1;
border-top: 0;
> * {
width: 270px;
height: 90px;
float: left;
text-align: center;
}
.img {
width: 100px;
}
.info {
width: 284px;
text-align: left;
}
.special-info {
width: 100%;
height: auto;
padding-top: 30px;
text-align: left;
}
}
}
}
... ...
<div class="color-list">
{{#goodsList}}
<div class="img-box {{#if isActive}}active{{/if}}" >
<img src="{{colorImage}}" alt="{{colorName}}" data-index="{{@index}}" data-color={{colorId}}>
</div>
{{/goodsList}}
</div>
... ...
<div>
{{#goodsList}}
<div class="{{#unless @first}}hide{{/unless}} size-list" data-index="{{@index}}">
{{#sizeList}}
<span data-size="{{sizeId}}">{{sizeName}}</span>
{{/sizeList}}
</div>
{{/goodsList}}
</div>
... ...