|
...
|
...
|
@@ -6,8 +6,8 @@ |
|
|
|
</div>
|
|
|
|
<div class="exchange-progress">
|
|
|
|
<ul>
|
|
|
|
<li v-for="(index,status) in detail.statusList"
|
|
|
|
class="{{ status.act ==='Y' ? 'passed' : ''}}" :key="index">
|
|
|
|
<li v-for="(status, index) in detail.statusList"
|
|
|
|
:class="{passed: status.act ==='Y'}" :key="index">
|
|
|
|
<div class="progress-desc">
|
|
|
|
<p>{{status.name}}</p>
|
|
|
|
</div>
|
|
...
|
...
|
@@ -16,7 +16,7 @@ |
|
|
|
<div v-if="detail.status == 20 && detail.delivery_tpye != 20"
|
|
|
|
class="logistics-detail">
|
|
|
|
<template v-if="detail.notice">
|
|
|
|
<a href="/me/logistic?order_code={{sourceOrderCode}}&id={{applyid}}&type={{type}}">
|
|
|
|
<a :href="`/home/logistic?order_code=${sourceOrderCode}&id=${applyid}&type=${type}`">
|
|
|
|
<h2>{{detail.notice.title}}</h2>
|
|
|
|
<p>物流公司: {{detail.notice.express_company}}<br>快递单号: {{detail.notice.express_number}}</p>
|
|
|
|
<span class="right"><span class="icon icon-right"></span></span>
|
|
...
|
...
|
@@ -31,14 +31,14 @@ |
|
|
|
</div>
|
|
|
|
<div v-if="(detail.delivery_tpye === '10' || type ==='refund') && detail.status == 10"
|
|
|
|
class="logistics">
|
|
|
|
<a href="/me/return/logistics?applyid={{applyid}}&type={{type}}">填写商品寄回的快递信息</a>
|
|
|
|
<a href="`/home/return/logistics?applyid=${applyid}&type=${type}`">填写商品寄回的快递信息</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="exchange-details">
|
|
|
|
<h2 v-if="type ==='refund'">退货详情 <i>RETURN DETAILS</i></h2>
|
|
|
|
<h2 v-else>换货详情 <i>EXCHANGE DETAILS</i></h2>
|
|
|
|
<div class="exchange-product-wrapper">
|
|
|
|
<div class="exchange-product" v-for="(index,goods) in detail.goods_list" :key="index">
|
|
|
|
<div class="exchange-product" v-for="(goods, index) in detail.goods_list" :key="index">
|
|
|
|
<div class="goods-info">
|
|
|
|
<div class="img-box">
|
|
|
|
<img :src="goods.goods_image">
|
|
...
|
...
|
@@ -60,7 +60,7 @@ |
|
|
|
<p v-if="goods.reason_name">原因: {{goods.reason_name}}</p>
|
|
|
|
<blockquote v-if="goods.remark">{{goods.remark}}</blockquote>
|
|
|
|
<ul v-if="goods.evidence_images.length > 0" class="exchange-img">
|
|
|
|
<li v-for="(index,image) in goods.evidence_images" :key="index">
|
|
|
|
<li v-for="(image, index) in goods.evidence_images" :key="index">
|
|
|
|
<img :src="image">
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
...
|
...
|
@@ -98,7 +98,7 @@ |
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="exchange-order">
|
|
|
|
<a class="primary" href="/me/order/detail?orderCode={{sourceOrderCode}}">原订单详情
|
|
|
|
<a class="primary" href="`/home/order/detail?orderCode=${sourceOrderCode}`">原订单详情
|
|
|
|
<span class="right"><span class="icon icon-right"></span></span>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
...
|
...
|
@@ -112,7 +112,6 @@ |
|
|
|
<script>
|
|
|
|
const $ = require('yoho-jquery');
|
|
|
|
const tip = require('plugin/tip');
|
|
|
|
const yoho = require('yoho');
|
|
|
|
const Modal = require('plugin/modal');
|
|
|
|
|
|
|
|
module.exports = {
|
|
...
|
...
|
@@ -127,13 +126,6 @@ |
|
|
|
},
|
|
|
|
created() {
|
|
|
|
this.reload();
|
|
|
|
|
|
|
|
document.addEventListener('visibilitychange', () => {
|
|
|
|
if (!document.hidden && yoho.store.get('refundStatus')) {
|
|
|
|
this.reload();
|
|
|
|
yoho.store.set('refundOrder', true);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
reload() {
|
|
...
|
...
|
@@ -142,9 +134,8 @@ |
|
|
|
this.show = false;
|
|
|
|
this.detail = {};
|
|
|
|
|
|
|
|
yoho.store.remove('refundStatus');
|
|
|
|
$.ajax({
|
|
|
|
url: '/me/return/status-detail',
|
|
|
|
url: '/home/return/status-detail',
|
|
|
|
data: {
|
|
|
|
applyid: this.applyid,
|
|
|
|
type: this.type
|
|
...
|
...
|
@@ -177,9 +168,9 @@ |
|
|
|
return false;
|
|
|
|
}
|
|
|
|
if (this.type === 'refund') {
|
|
|
|
url = '/me/return/refund/cancel-apply';
|
|
|
|
url = '/home/return/refund/cancel-apply';
|
|
|
|
} else if (this.type === 'exchange') {
|
|
|
|
url = '/me/return/exchange/cancel-apply';
|
|
|
|
url = '/home/return/exchange/cancel-apply';
|
|
|
|
}
|
|
|
|
|
|
|
|
Modal.confirm('', '确认取消吗？', function() {
|
|
...
|
...
|
@@ -193,7 +184,6 @@ |
|
|
|
}).then(data => {
|
|
|
|
if (data.code === 200) {
|
|
|
|
_this.reload();
|
|
|
|
yoho.store.set('refundOrder', true);
|
|
|
|
} else {
|
|
|
|
tip.show(data.message);
|
|
|
|
}
|
|
...
|
...
|
@@ -205,5 +195,360 @@ |
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
@import "../../scss/me/_status.css";
|
|
|
|
.status {
|
|
|
|
background: #f6f6f6;
|
|
|
|
padding-bottom: 130px;
|
|
|
|
|
|
|
|
> 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 {
|
|
|
|
li {
|
|
|
|
position: relative;
|
|
|
|
padding-left: 55px;
|
|
|
|
|
|
|
|
.progress-desc {
|
|
|
|
padding: 30px 0;
|
|
|
|
border-bottom: 1px solid #eee;
|
|
|
|
color: #b0b0b0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&: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 {
|
|
|
|
.progress-desc {
|
|
|
|
color: #000;
|
|
|
|
}
|
|
|
|
|
|
|
|
&: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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.logistics-detail {
|
|
|
|
padding: 25px 0;
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
height: 60px;
|
|
|
|
font-size: 32px;
|
|
|
|
line-height: 60px;
|
|
|
|
}
|
|
|
|
|
|
|
|
p {
|
|
|
|
display: inline-block;
|
|
|
|
height: 50px;
|
|
|
|
line-height: 35px;
|
|
|
|
font-size: 28px;
|
|
|
|
color: #b0b0b0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.right {
|
|
|
|
float: right;
|
|
|
|
color: #b0b0b0;
|
|
|
|
font-size: 34px;
|
|
|
|
}
|
|
|
|
|
|
|
|
a {
|
|
|
|
display: inline-block;
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.logistics {
|
|
|
|
background: #000;
|
|
|
|
text-align: center;
|
|
|
|
font-size: 28px;
|
|
|
|
line-height: 100px;
|
|
|
|
|
|
|
|
a {
|
|
|
|
display: block;
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.exchange-details {
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
|
|
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-wrapper {
|
|
|
|
border-top: 1px solid #eee;
|
|
|
|
}
|
|
|
|
|
|
|
|
.exchange-product {
|
|
|
|
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;
|
|
|
|
overflow-x: auto;
|
|
|
|
height: 160px;
|
|
|
|
margin-top: 25px;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
li {
|
|
|
|
width: 154px;
|
|
|
|
height: 154px;
|
|
|
|
margin-right: 25px;
|
|
|
|
|
|
|
|
img {
|
|
|
|
width: 154px;
|
|
|
|
height: 154px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.exchange-address {
|
|
|
|
position: relative;
|
|
|
|
padding-top: 20px;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
word-wrap: break-word;
|
|
|
|
|
|
|
|
p:first-of-type {
|
|
|
|
font-size: 32px;
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
|
|
span {
|
|
|
|
margin-right: 40px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.exchange-info {
|
|
|
|
.exchange-address {
|
|
|
|
p:last-of-type {
|
|
|
|
font-size: 28px;
|
|
|
|
color: #b0b0b0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.exchange-express {
|
|
|
|
margin-top: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.exchange-order,
|
|
|
|
.exchange-type {
|
|
|
|
position: relative;
|
|
|
|
margin-top: 20px;
|
|
|
|
line-height: 88px;
|
|
|
|
font-size: 34px;
|
|
|
|
border-top: 1px solid #eee;
|
|
|
|
|
|
|
|
.amount-modeinfo {
|
|
|
|
span {
|
|
|
|
margin-left: 70px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.amount-info {
|
|
|
|
color: #b0b0b0;
|
|
|
|
background: #f6f6f6;
|
|
|
|
display: block;
|
|
|
|
font-size: 26px;
|
|
|
|
margin: 0 -30px;
|
|
|
|
padding-left: 30px;
|
|
|
|
height: 44px;
|
|
|
|
line-height: 44px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.primary {
|
|
|
|
display: block;
|
|
|
|
border-bottom: 1px solid #eee;
|
|
|
|
|
|
|
|
.right {
|
|
|
|
float: right;
|
|
|
|
color: #b0b0b0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.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: 1px solid #444;
|
|
|
|
background: white;
|
|
|
|
font-size: 28px;
|
|
|
|
width: 192px;
|
|
|
|
|
|
|
|
&:focus {
|
|
|
|
outline: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
