|
|
<template>
|
|
|
<div class="exchange-container">
|
|
|
<Tabs :tabs="tabs" @change-tabs="changeTabs"></Tabs>
|
|
|
<NavTitle :more="more">
|
|
|
<template slot="title">{{getTitleCont}}</template>
|
|
|
<NavTitle :more="tabObj[curTabs].more">
|
|
|
<template slot="title">{{tabObj[curTabs].title}}</template>
|
|
|
</NavTitle>
|
|
|
<Modal class="list-cont">
|
|
|
<Modal v-for="(item, index) in tabObj[curTabs].data" :key="index" class="list-cont">
|
|
|
<template slot="label">
|
|
|
<div class="original-order-code" v-if="curTabs === '换货'">原订单号:2222</div>
|
|
|
<div class="order-code" :class="{lg: curTabs === '退货'}">订单号:11111</div>
|
|
|
<div class="original-order-code" v-if="curTabs === '换货'">原订单号:{{item.sourceOrderCode}}</div>
|
|
|
<div class="order-code" :class="{lg: curTabs === '退货'}">订单号:{{item.orderCode}}</div>
|
|
|
</template>
|
|
|
<template slot="cont">
|
|
|
<div class="order-cont" >
|
|
|
<div class="goods-info">
|
|
|
<img src="//img11.static.yhbimg.com/goodsimg/2018/10/22/18/012502918a8149f76a74ebcab5971437c6.jpg?imageMogr2/thumbnail/750x750/background/d2hpdGU=/position/center/quality/80">
|
|
|
<div v-for="(goods, key) in item.goodsList" :key="key" class="goods-info">
|
|
|
<img :src="fomartImg(goods.goodsImage, 77, 104)">
|
|
|
<div class="right">
|
|
|
<div class="goods-name">AIR JORDAN 1 x OFF-WHITE CHICAGO THE TEN 芝加哥</div>
|
|
|
<div class="goods-name">{{goods.productName}}</div>
|
|
|
<div class="number">
|
|
|
<span class="skn">SKN:</span>
|
|
|
<span class="sku">SKU:</span>
|
|
|
<span class="skn">SKN:{{goods.productSkn}}</span>
|
|
|
<span class="sku">SKU:{{goods.productSku}}</span>
|
|
|
</div>
|
|
|
<div class="remark">备注:</div>
|
|
|
<div class="remark">备注:{{goods.remark}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="user-info">
|
|
|
<div class="item"><span class="item-label">收货人:</span></div>
|
|
|
<div class="item"><span class="item-label">手机号:</span></div>
|
|
|
<div class="item" v-if="curTabs === '退货'"><span class="item-label">退款金额:</span></div>
|
|
|
<div class="item" v-if="curTabs === '退货'"><span class="item-label">退款方式:</span></div>
|
|
|
<div class="item"><span class="item-label">申请类型:</span></div>
|
|
|
<div class="item"><span class="item-label">申请人:</span></div>
|
|
|
<div class="item"><span class="item-label">当前状态:</span></div>
|
|
|
<div class="item address"><span class="item-label">地址:</span></div>
|
|
|
<template v-if="curTabs === '退货'">
|
|
|
<div class="item"><span class="item-label">退款金额:</span>¥{{item.returnAmountText}}</div>
|
|
|
<div class="item"><span class="item-label">退款方式:</span>{{item.returnAmountModeName}}</div>
|
|
|
</template>
|
|
|
<template v-if="curTabs === '换货'">
|
|
|
<div class="item"><span class="item-label">收货人:</span>{{item.deliveryAddressBO.consignee}}</div>
|
|
|
<div class="item"><span class="item-label">手机号:</span>{{item.deliveryAddressBO.mobile}}</div>
|
|
|
</template>
|
|
|
<div class="item"><span class="item-label">申请类型:</span>{{item.refundChangeModeName}}</div>
|
|
|
<div class="item"><span class="item-label">申请人:</span>{{item.applicant}}</div>
|
|
|
<div class="item"><span class="item-label">当前状态:</span>{{item.statusName}}</div>
|
|
|
<div class="item address" v-if="curTabs === '换货'"><span class="item-label">地址:</span>{{item.deliveryAddressBO.address}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</Modal>
|
|
|
</Modal>
|
|
|
<dataNull v-if="tabObj[curTabs].haveData">
|
|
|
<template slot="cont">暂无{{curTabs}}信息</template>
|
|
|
</dataNull>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
...
|
...
|
@@ -42,33 +49,85 @@ |
|
|
import Tabs from './tabs';
|
|
|
import Modal from './modal';
|
|
|
import NavTitle from './nav-title';
|
|
|
import dataNull from './data-null';
|
|
|
import homeModel from '../../../models/home';
|
|
|
import {image} from '../../../common/helpers';
|
|
|
|
|
|
export default {
|
|
|
name: 'exchange',
|
|
|
props: ['uid'],
|
|
|
data() {
|
|
|
return {
|
|
|
tabs: ['换货', '退货'],
|
|
|
curTabs: '换货',
|
|
|
more: 'http://www.baidu.com'
|
|
|
tabObj: {
|
|
|
'换货': {
|
|
|
title: '最近10笔换货订单',
|
|
|
haveData: true,
|
|
|
data: [],
|
|
|
more: 'http://erp.yohobuy.com/customer/exchange/index'
|
|
|
},
|
|
|
'退货': {
|
|
|
title: '最近10笔退货订单',
|
|
|
haveData: true,
|
|
|
data: [],
|
|
|
more: 'http://erp.yohobuy.com/customer/returned/index'
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getChangeList();
|
|
|
},
|
|
|
computed: {
|
|
|
getTitleCont() {
|
|
|
return this.curTabs === '换货' ? '最近10笔换货订单' : '最近10笔退货订单';
|
|
|
tabs() {
|
|
|
return Object.keys(this.tabObj);
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
fomartImg(url, width, height, mode, quality) {
|
|
|
return image(url, width, height, mode, quality);
|
|
|
},
|
|
|
changeTabs(item) {
|
|
|
this.curTabs = item;
|
|
|
|
|
|
if (item === '换货' && this.tabObj[item].haveData) {
|
|
|
this.getChangeList();
|
|
|
}
|
|
|
|
|
|
if (item === '退货' && this.tabObj[item].haveData) {
|
|
|
this.getRefundList();
|
|
|
}
|
|
|
},
|
|
|
getChangeList() {
|
|
|
homeModel.getChangeList({
|
|
|
uid: this.uid,
|
|
|
page: 1,
|
|
|
limit: 10
|
|
|
}).then(ret => {
|
|
|
if (ret && ret.code === 200) {
|
|
|
this.tabObj['换货'].data = ret.data && ret.data.list || [];
|
|
|
this.tabObj['换货'].haveData = ret.data && ret.data.list && ret.data.list.length === 0;
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
getRefundList() {
|
|
|
homeModel.getRefundList({
|
|
|
uid: this.uid,
|
|
|
page: 1,
|
|
|
limit: 10
|
|
|
}).then(ret => {
|
|
|
if (ret && ret.code === 200) {
|
|
|
this.tabObj['退货'].data = ret.data && ret.data.list || [];
|
|
|
this.tabObj['退货'].haveData = ret.data && ret.data.list && ret.data.list.length === 0;
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
Tabs,
|
|
|
Modal,
|
|
|
NavTitle
|
|
|
NavTitle,
|
|
|
dataNull
|
|
|
}
|
|
|
}
|
|
|
</script>
|
...
|
...
|
@@ -77,10 +136,12 @@ export default { |
|
|
.exchange-container {
|
|
|
.original-order-code {
|
|
|
float: left;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.order-code {
|
|
|
float: right;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.lg {
|
...
|
...
|
@@ -89,7 +150,12 @@ export default { |
|
|
|
|
|
.list-cont {
|
|
|
padding-bottom: 20px;
|
|
|
margin-bottom: 15px;
|
|
|
background: #fff;
|
|
|
|
|
|
&:last-child {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.goods-info {
|
...
|
...
|
@@ -115,6 +181,7 @@ export default { |
|
|
overflow: hidden;
|
|
|
font-family: PingFang-SC-Medium;
|
|
|
font-size: 18px;
|
|
|
min-height: 50px;
|
|
|
}
|
|
|
|
|
|
.number {
|
...
|
...
|
@@ -147,15 +214,16 @@ export default { |
|
|
height: auto;
|
|
|
overflow: hidden;
|
|
|
font-family: PingFang-SC-Regular;
|
|
|
font-size: 18px;
|
|
|
font-size: 15px;
|
|
|
width: 100%;
|
|
|
border-top: 1px solid #EAEBEB;
|
|
|
padding: 0 20px;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
.item {
|
|
|
width: 50%;
|
|
|
float: left;
|
|
|
line-height: 30px;
|
|
|
line-height: 30px;
|
|
|
line-height: 25px;
|
|
|
margin-top: 15px;
|
|
|
}
|
...
|
...
|
|