fe / yohoblk-wap · Commits

Go to a project

Authored by 王洪广
Commit 38344f720684fa38f1283118728d457961cc3920 1 parent 3fddb1b3

增加yoho币，退换货

Inline Side-by-side
Showing 19 changed files with 837 additions and 109 deletions
... ... @@ -119,10 +119,43 @@ const order = {
return res.json(result);
});
},
coin: (req, res) => {
res.render('coin', {
module: 'home',
page: 'order'
coin: (req, res, next) => {
let uid = req.user.id;
orderModel.getCoins(uid).then(result => {
res.render('coin', {
module: 'home',
page: 'coin',
coin: result
});
}).catch(next);
},
/**
* 获取yoho币明细
* @param req
* @param res
* @returns {*|{read, write}}
*/
getCoinDetail: (req, res) => {
let uid = req.user.id;
let page = req.query.page;
let limit = req.query.limit;
let isend = true;
uid = testUid;
if (!uid && req.xhr) {
return res.json({
code: notLoginCode,
message: notLoginTip
});
}
orderModel.getCoinDetail(uid, page, limit).then(result => {
if (result && page < result.page_total) {
isend = false;
}
return res.json(Object.assign({isEnd: isend}, result));
});
},
... ...
... ... @@ -4,6 +4,10 @@
*/
'use strict';
const refundModel = require('../models/refund');
const notLoginCode = 400;
const notLoginTip = '抱歉，您暂未登录！';
const testUid = 8050378;// 测试uid
const isBLK = 1;
const refund = {
refund(req, res) {
... ... @@ -45,6 +49,51 @@ const refund = {
res.json({
code: 200
});
},
exchangeGoods(req, res) {
// let orderCode = req.query.orderCode;
res.render('exchange-status');
},
refundOrders(req, res) {
res.render('refund-order', {
module: 'home',
page: 'refund-order'
});
},
/**
* 获取退换货订单
* @param req
* @param res
* @returns {*|{read, write}}
*/
getRefundOrders(req, res) {
let uid = req.query.id;
let page = req.query.page;
let limit = req.query.limit;
let isend = true;
uid = testUid;
if (!uid && req.xhr) {
return res.json({
code: notLoginCode,
message: notLoginTip
});
}
let param = {
uid: uid,
page: page,
limit: limit,
app_type: isBLK
};
refundModel.getRefundOrders(param).then(result => {
if (result && page < result.page_total) {
isend = false;
}
return res.json(Object.assign({isend: isend}, result));
});
}
};
... ...
... ... @@ -120,3 +120,31 @@ exports.getOrderLogisticdate = (params) => {
return [];
});
};
/**
* 获取yoho币数量
* @param uid
* @returns {*|Promise.<T>}
*/
exports.getCoins = (uid) => {
return api.get('978c6bad6c379086.json', {
uid: uid,
app_type: 'app.yohocoin.total'
}).then(camelCase);
};
/**
* 获取yoho币明细
* @param uid
* @param page
* @param limit
* @returns {*|Promise.<T>}
*/
exports.getCoinDetail = (uid, page, limit) => {
return api.get('26573a88a2958702.json', {
uid: uid,
page: page,
limit: limit,
method: 'app.yohocoin.lists'
}).then(camelCase);
};
... ...
... ... @@ -29,6 +29,25 @@ const refund = {
return api.get('', {
method: 'app.express.getExpressCompany'
});
},
/**
* 获取退换货列表
* @param param
* method
* uid
* page
* limit
* app_type
* @returns {Promise.<T>|*}
*/
getRefundOrders(param) {
param = Object.assign({method: 'app.refund.getList'}, param);
return api.get('16303b76a9aa7b9b.json', param, {
cache: true,
code: 200
}).then(global.yoho.camelCase);
}
};
... ...
... ... @@ -21,6 +21,7 @@ const router = expressRouter();
router.get('/', home.index); // 个人中心主页
router.get('/orders', order.orders); // 订单
router.get('/mycurrency', order.coin); // yoho币
router.get('/coin-detail', order.getCoinDetail); // yoho币明细
router.get('/order-detail', order.orderDetail); // 订单详情
router.get('/get-orders', order.getOrderData); // 获取订单数据
router.get('/get-order', order.getOrderDetailData); // 获取订单详情数据
... ... @@ -44,6 +45,9 @@ router.get('/refund/order', refund.order); // 查询订单数据
router.post('/refund/submit', refund.submit); // 提交信息
router.get('/refund/logistics', refund.logistics); // 退换货 - 商品寄回信息
router.post('/save-logistics', refund.saveLogistics); // 退换货 - 添加寄回物流信息
router.get('/exchange-status', refund.exchangeGoods); // 退换货 - 换货状态
router.get('/refund/orders', refund.refundOrders); // 退换货 - 订单列表
router.get('/refund/get-orders', refund.getRefundOrders); // 退换货 - 获取订单列表数据
// 换货
router.get('/exchange', exchange.exchange);
... ...
<div class="yoho-coin">
<div class="yoho-coin" id="coin-detail-list">
<div class="coin-total">
<p>您目前拥有</p>
<p><b>123</b></p>
<p><b>{{coin.data.total}}</b></p>
<p>个有货币</p>
</div>
<div class="coin-detail">
<p>明细列表</p>
<ul class="coin-detail-list">
<li>
<div class="coin-source">
<p>签到奖励</p>
<time>2016.1.23 12:31:00</time>
</div>
<div class="coin-num">+5</div>
</li>
<li>
<div class="coin-source">
<p>签到奖励</p>
<time>2016.1.23 12:31:00</time>
</div>
<div class="coin-num">+118</div>
</li>
</ul>
</div>
<coin-detail></coin-detail>
</div>
\ No newline at end of file
... ...
<section class="exchange-status" id="exchange-goods-status">
<div class="status-desc">
<p>审核通过</p>
<p>申请时间: 2016.1.23 23:00:00</p>
</div>
<div class="exchange-progress">
<ul>
<li class="passed">
<div class="progress-desc">
<p>提交申请</p>
<time>2016-1-23 23:00:00</time>
</div>
</li>
<li>
<div class="progress-desc">
<p>审核通过</p>
</div>
</li>
<li>
<div class="progress-desc">
<p>商品寄回</p>
</div>
</li>
<li>
<div class="progress-desc">
<p>商品入库</p>
</div>
</li>
<li>
<div class="progress-desc">
<p>换货完成</p>
</div>
</li>
</ul>
<div class="progress-todo">
<p>您的换货申请已<b>成功提交</b>!</p>
<p class="phone">请您耐心等待审核,审核过后我们会将换货信息发送至您的手机<br>客服电话:400-889-9646</p>
</div>
</div>
<div class="exchange-details">
<h2>换货详情 <i>EXCHANGE DETAILS</i></h2>
<div class="exchange-product-wrapper">
<div class="exchange-product">
<div class="goods-info" v-for="goods in order.orderGoods">
<div class="img-box">
<img v-bind:src="goods.goodsImage | resize 49 65" alt="{{goods.productName}}">
</div>
<div class="goods-detail">
<p class="name">{{goods.productName}}</p>
<p class="size">
<span>颜色:{{goods.colorName}}</span>
<span>尺码:{{goods.sizeName}}</span>
</p>
</div>
<div class="goods-price">
<p>&yen; {{goods.goodsPrice}}</p>
<p>×{{goods.buyNumber}}</p>
</div>
</div>
<div class="exchange-reason">
<p>换货颜色尺码: 黄色 M码</p>
<p>换货原因: 质量瑕疵</p>
<blockquote>收到货品后发现不是自己想要的，不是非常的喜欢， 而且存在一低昂的质量问题的呢，少了一个扣子的， 颜色与实际的有点不太符合的哈。</blockquote>
<ul class="exchange-img">
<li>
<img src="" alt="">
</li>
<li>
<img src="" alt="">
</li>
<li>
<img src="" alt="">
</li>
</ul>
</div>
</div>
<div class="exchange-product">
<div class="goods-info" v-for="goods in order.orderGoods">
<div class="img-box">
<img v-bind:src="goods.goodsImage | resize 49 65" alt="{{goods.productName}}">
</div>
<div class="goods-detail">
<p class="name">{{goods.productName}}</p>
<p class="size">
<span>颜色:{{goods.colorName}}</span>
<span>尺码:{{goods.sizeName}}</span>
</p>
</div>
<div class="goods-price">
<p>&yen; {{goods.goodsPrice}}</p>
<p>×{{goods.buyNumber}}</p>
</div>
</div>
</div>
<div class="exchange-product">
<div class="goods-info" v-for="goods in order.orderGoods">
<div class="img-box">
<img v-bind:src="goods.goodsImage | resize 49 65" alt="{{goods.productName}}">
</div>
<div class="goods-detail">
<p class="name">{{goods.productName}}</p>
<p class="size">
<span>颜色:{{goods.colorName}}</span>
<span>尺码:{{goods.sizeName}}</span>
</p>
</div>
<div class="goods-price">
<p>&yen; {{goods.goodsPrice}}</p>
<p>×{{goods.buyNumber}}</p>
</div>
</div>
<div class="exchange-reason">
<p>换货原因: 尺寸不合适</p>
</div>
</div>
</div>
</div>
<div class="exchange-express">
<div class="exchange-address">
<p><span>{{order.userName}}</span><span>{{order.phone}}</span></p>
<p>{{order.area}} <br>{{order.address}}</p>
</div>
<div class="exchange-type">
<a href="">
<div class="primary">换货方式:</div>
<div class="cell-ft">寄回换货</div>
</a>
</div>
</div>
<div class="exchange-order">
<a href="">
<div class="primary">原订单详情</div>
<div class="cell-ft"></div>
</a>
</div>
<div class="exchange-options">
<button>取消申请</button>
</div>
</section>
\ No newline at end of file
... ...
<div class="order-wrapper return-goods">
<ul>
<li class="order-item">
<div class="order-detail">
<div class="order-code">
<div class="code-time">
<p>订单号:523243435</p>
<p>申请时间：2016.1.23 12:31:00</p>
</div>
<p>通过审核</p>
</div>
<div class="order-goods">
<div class="goods-info">
<div class="img-box">
<img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
</div>
<div class="goods-detail">
<p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
<p class="size">
<span>颜色:黑色</span>
<span>尺码:XL</span>
</p>
</div>
<div class="goods-price">
<p>&yen;6289.00</p>
<p>×1</p>
</div>
</div>
<div class="goods-info">
<div class="img-box">
<img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
</div>
<div class="goods-detail">
<p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
<p class="size">
<span>颜色:黑色</span>
<span>尺码:XL</span>
</p>
</div>
<div class="goods-price">
<p>&yen;6289.00</p>
<p>×1</p>
</div>
</div>
</div>
<div class="order-option">
<div class="goods-total"></div>
<div class="options">
<button class="normal">取消申请</button>
</div>
</div>
</div>
</li>
<li class="order-item">
<div class="order-detail">
<div class="order-code">
<div class="code-time">
<p>订单号:523243435</p>
<p>申请时间：2016.1.23 12:31:00</p>
</div>
<p>商品寄回</p>
</div>
<div class="order-goods">
<div class="goods-info">
<div class="img-box">
<img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
</div>
<div class="goods-detail">
<p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
<p class="size">
<span>颜色:黑色</span>
<span>尺码:XL</span>
</p>
</div>
<div class="goods-price">
<p>&yen;6289.00</p>
<p>×1</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
\ No newline at end of file
<div class="order-wrapper return-goods" id="refund-order-list">
<refund-order></refund-order>
</div>
\ No newline at end of file
... ...
/**
* coin.page.js.
* @author hgwang
* @date 2016-07-27
*/
'use strict';
const Vue = require('yoho-vue');
const coin = require('home/coin-detail.vue');
const infiniteScroll = require('yoho-vue-infinite-scroll');
Vue.use(infiniteScroll);
require('common/vue-filter');
new Vue({
el: '#coin-detail-list',
components: {
'coin-detail': coin
}
});
... ...
/**
* exchange-status.page.js.
* @author hgwang
* @date 2016-07-25
*/
'use strict';
... ...
/**
* refund-order.page.
* @author hgwang
* @date 2016-07-26
*/
'use strict';
const Vue = require('yoho-vue');
const refundOrder = require('home/refund-order.vue');
const infiniteScroll = require('yoho-vue-infinite-scroll');
Vue.use(infiniteScroll);
require('common/vue-filter');
new Vue({
el: '#refund-order-list',
data: {},
components: {
refundOrder
}
});
... ...
... ... @@ -10,11 +10,13 @@
p:first-child {
font-size: 34px;
}
p:nth-child(2) {
font-size: 78px;
color: #4a90e2;
line-height: 80px;
}
p:last-child {
color: #b0b0b0;
font-size: 28px;
... ... @@ -28,6 +30,7 @@
font-size: 28px;
color: #b0b0b0;
}
.coin-detail-list {
padding: 0 30px;
background: $white;
... ... @@ -69,6 +72,10 @@
.coin-num {
font-size: 34px;
line-height: 92px;
i {
font-style: normal;
}
}
}
}
... ...
.exchange-status {
background: #f6f6f6;
padding-bottom: 170px;
> div {
padding: 0 30px;
background: #fff;
}
.status-desc {
display: flex;
height: 80px;
line-height: 80px;
color: $white;
background: $black;
p:first-of-type {
flex: 1;
font-size: 34px;
}
}
.exchange-progress {
border-bottom: 1px solid #eee;
li {
position: relative;
padding-left: 55px;
.progress-desc {
padding: 30px 0;
border-bottom: 1px solid #eee;
}
&:before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 17px;
height: 17px;
margin-top: -8px;
background: #b0b0b0;
border-radius: 50%;
z-index: 1;
}
&:after {
content: "";
position: absolute;
left: 8px;
top: 0;
width: 1px;
height: 100%;
background: #eee;
}
&.passed {
&:before {
background: #000;
}
}
p:first-of-type {
flex: 1;
font-size: 34px;
}
time {
color: #b0b0b0;
}
}
.progress-todo {
padding: 25px 0;
text-align: center;
p:first-of-type {
font-size: 34px;
b {
color: #4a90e2;
}
}
.phone {
color: #b0b0b0;
}
}
}
.exchange-details {
margin-top: 20px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
h2 {
height: 88px;
font-size: 32px;
line-height: 88px;
i {
display: inline-block;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #b0b0b0;
}
}
}
.exchange-product {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
.goods-info {
display: flex;
padding: 20px 0;
border-bottom: 1px solid #eee;
&:last-child {
border-bottom: 0 none;
}
}
.img-box {
position: relative;
width: 98px;
height: 130px;
overflow: hidden;
label {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 30px;
line-height: 30px;
background: rgba(0, 0, 0, 0.2);
color: $white;
text-align: center;
}
img {
width: 100%;
height: 100%;
}
}
.goods-detail {
flex: 1;
margin: 0 20px;
font-size: 24px;
span {
margin-right: 40px;
}
.name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
height: 2.4em;
line-height: 1.25;
overflow: hidden;
font-size: 28px;
}
.size {
color: #b0b0b0;
}
}
.goods-price {
text-align: right;
p:first-of-type {
font-size: 28px;
}
p:last-of-type {
font-size: 30px;
color: #b0b0b0;
}
}
}
.exchange-reason {
padding: 20px 0;
font-size: 28px;
blockquote {
margin-top: 20px;
color: #b0b0b0;
}
}
.exchange-img {
display: flex;
margin-top: 25px;
margin-bottom: 10px;
li {
width: 154px;
height: 154px;
margin-right: 25px;
img {
width: 154px;
height: 154px;
}
}
}
.exchange-address {
position: relative;
padding: 20px 30px 27px;
margin-bottom: 20px;
border-top: 1px solid #eee;
word-wrap: break-word;
p:first-of-type {
font-size: 32px;
font-weight: 700;
span {
margin-right: 40px;
}
}
p:last-of-type {
font-size: 28px;
color: #b0b0b0;
}
}
.exchange-express {
margin-top: 20px;
}
.exchange-order,
.exchange-type {
display: flex;
position: relative;
height: 88px;
margin-top: 20px;
line-height: 88px;
font-size: 34px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
.primary {
flex: 1;
}
.cell-ft {
color: #b0b0b0;
&:after {
content: "\e607";
display: inline-block;
font-size: 15px;
margin-left: 5px;
font-family: iconfont;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
margin-right: -5px;
color: #999;
}
}
}
.exchange-options {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
padding: 30px 20px;
border-top: 1px solid #eee;
text-align: right;
background: #fff;
button {
padding: 0 20px;
height: 68px;
line-height: 68px;
color: $black;
text-align: center;
-webkit-appearance: none;
border: 0 none;
background: $white;
font-size: 28px;
&.black {
width: 192px;
color: $white;
background: $black;
}
&.countdown {
color: $white;
background: $black;
}
&.normal {
width: 188px;
padding: 0;
border: 1px solid $black;
color: $black;
}
&:focus {
outline: none;
}
}
}
}
... ...
... ... @@ -6,3 +6,4 @@
@import "about-us";
@import "coin";
@import "logistics";
@import "exchange-status";
\ No newline at end of file
... ...
... ... @@ -59,10 +59,23 @@ $white: #fff;
}
}
.img-box {
position: relative;
width: 98px;
height: 130px;
overflow: hidden;
label {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 30px;
line-height: 30px;
background: rgba(0, 0, 0, 0.2);
color: $white;
text-align: center;
}
img {
width: 100%;
height: 100%;
... ...
<template>
<div class="coin-detail">
<p>明细列表</p>
<ul class="coin-detail-list">
<li v-for="coin in coinList">
<div class="coin-source">
<p>{{coin.message}}</p>
<time>{{coin.date}}</time>
</div>
<div class="coin-num"><i v-if="coin.num>0">+</i>{{coin.num}}</div>
</li>
</ul>
</div>
</template>
<script>
'use strict';
const $ = require('yoho-jquery');
const tip = require('common/tip');
// const Modal = require('common/modal');
module.exports = {
data() {
return {
page: 0,
limit: 15,
coinList: [],
busy: false,
};
},
ready() {
this.getCoinData();
},
methods: {
getCoinData() {
let _that = this;
this.busy = true;
$.ajax({
url: '/home/coin-detail',
data: {
page: ++this.page,
limit: this.limit
}
}).then(result => {
if (result.code === 200) {
if (result.isend) {
_that.busy = true;
} else {
_that.busy = false;
}
if (result.data.coinlist.length > 0) {
this.$set('coinList', result.data.coinlist);
}
}
}).fail(() => {
tip('网络错误');
});
}
}
};
</script>
\ No newline at end of file
... ...
<template>
<ul v-infinite-scroll="getOrderData()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
<li class="order-item" v-for="(index, order) in orderList">
<div class="order-detail">
<div class="order-code">
<div class="code-time">
<p>订单号:{{order.orderCode}}</p>
<p>申请时间：{{order.orderCreateTime}}</p>
</div>
<p>{{order.statusName}}</p>
</div>
<div class="order-goods">
<div class="goods-info" v-for="product in order.goods">
<div class="img-box">
<img v-bind:src="product.goodsImage | resize 49 65" alt="{{product.productName}}">
<label v-if="product.goodsType == 'gift'">赠品</label>
</div>
<div class="goods-detail">
<p class="name">{{product.productName}}</p>
<p class="size">
<span>颜色: {{product.colorName}}</span>
<span>尺码: {{product.sizeName}}</span>
</p>
</div>
<div class="goods-price">
<p>&yen;{{product.salesPrice}}</p>
<p>×1</p>
</div>
</div>
</div>
<div class="order-option">
<div class="goods-total"></div>
<div class="options" v-show="order.canCancel == 'Y'">
<button v-if="order.canCancel == 'Y'" class="normal">取消申请</button>
</div>
</div>
</div>
</li>
</ul>
</template>
<script>
'use strict';
const $ = require('yoho-jquery');
const tip = require('common/tip');
//const Modal = require('common/modal');
module.exports = {
data() {
return {
page: 0,
limit: 10,
orderList: [],
busy: false,
};
},
ready() {
this.getOrderData();
},
methods: {
getOrderData() {
let _that = this;
this.busy = true;
$.ajax({
url: '/home/refund/get-orders',
data: {
page: ++this.page,
limit: this.limit
}
}).then(result => {
if (result.isend) {
_that.busy = true;
} else {
_that.busy = false;
}
if (result.data.list.length > 0) {
this.$set('orderList', result.data.list);
}
}).fail(() => {
tip('网络错误');
});
},
cancelApply(code) {
$.ajax({
url: '/home/cancel-apply',
type: 'post',
data: {
orderCode: code
}
}).then(result => {
if (result.code === 200) {
location.reload();
} else {
tip(result.message);
}
}).fail(() => {
tip('操作失敗');
});
}
}
};
</script>
<style>
html,
body {
height: 100%;
}
@import "../../scss/home/_order.css";
.order-wrapper {
height: 100%;
ul {
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
</style>
\ No newline at end of file
... ...