You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
328 lines
9.3 KiB
328 lines
9.3 KiB
<template>
|
|
<view :class="details_index==0 ||details_index==6 ? 'body' :''">
|
|
<view class="details_title" :class="details_index==3?'refund_details_title':''">
|
|
<view class="cancelled toPaid" v-if="details_index==0 ||details_index==6">
|
|
<view class="cancelled_left">
|
|
<view >
|
|
<view class="shipped_right_text">{{details_index==0?'Cancelled':'Refunded'}}</view>
|
|
<view>Cancelled time：24/04/2022 15:54:21</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="cancelled" v-if="details_index==1 ">
|
|
<view class="cancelled_left">
|
|
<image src="../../static/img/time.png" mode=""></image>
|
|
<view class="cancelled_left_info">
|
|
<text class="shipped_right_text">Refund rejected</text>
|
|
<view>End in: 71:59:59</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="cancelled" v-if="details_index==2 || details_index==4 || details_index==5">
|
|
<view class="cancelled_left">
|
|
<image src="../../static/img/time.png" mode=""></image>
|
|
<view class="cancelled_left_info">
|
|
<text class="shipped_right_text">To be returned</text>
|
|
<view>End in: 71:59:59</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="cancelled refund_transit" v-if="details_index==3">
|
|
<view class="cancelled_left">
|
|
<image src="../../static/img/transit.png" mode=""></image>
|
|
<view class="cancelled_left_info">
|
|
<text class="shipped_right_text">To be returned</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
<view class="refund_success" v-if="details_index==6">
|
|
<view class="refund_success_item">
|
|
<text>Refund amount：</text>
|
|
<text class="refund_success_item_text">US$12.5</text>
|
|
</view>
|
|
<view class="refund_success_item">
|
|
<text>Points：</text>
|
|
<text class="refund_success_item_text">2.5</text>
|
|
</view>
|
|
</view>
|
|
<view class="refund_address" v-if="details_index==2">
|
|
<view class="address_title">Return address</view>
|
|
<view class="address_content">
|
|
<view class="address_content_item">name: zhangsan</view>
|
|
<view class="address_content_item">phone: +8613800138000</view>
|
|
<view class="address_content_item">country: china</view>
|
|
<view class="address_content_item">state: 广东省 </view>
|
|
<view class="address_content_item">city：深圳市 </view>
|
|
<view class="address_content_item">zipcode：518000</view>
|
|
<view class="address_content_item">address line:详细地址(例：粤海街道深圳湾生态科技园9A3)</view>
|
|
</view>
|
|
</view>
|
|
<view class="negotiation_details" @click="isShow=true">
|
|
<text>Negotiation Details</text>
|
|
<image src="../../static/img/right.png" mode=""></image>
|
|
</view>
|
|
|
|
<view class="order_popup_commodity">
|
|
<view class="order_popup_commodity_title">Refund Information</view>
|
|
<view class="good_info" v-for="(item,index) in 2 " :key="index">
|
|
<view class="good_info_left ">
|
|
<view class="good_info_image" v-for="(item,index) in 1" :key="index"></view>
|
|
<view class="left_info">
|
|
<view class="info_name">Adidas Yeezy Boost 350 V2 DazzlingBlue Black GY7164 Men's</view>
|
|
<view class="left_info_bottom">
|
|
<view class="info_lable">
|
|
<text>Multicolor;41</text>
|
|
<image src="/static/img/bottom.png" mode=""></image>
|
|
</view>
|
|
<text>x1</text>
|
|
</view>
|
|
<view class="info_price">
|
|
<text>US$314.00</text>
|
|
<!-- <button>Rrefund</button> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<view class="summary">
|
|
<view class="summary_item">
|
|
<view>Refund ID</view>
|
|
<view class="summary_item_right">2013461121212</view>
|
|
</view>
|
|
<view class="summary_item">
|
|
<view>Refund Amount</view>
|
|
<view class="summary_item_right">US$12.5</view>
|
|
</view>
|
|
<view class="summary_item">
|
|
<view>Return Type</view>
|
|
<view class="summary_item_right">Refund Only</view>
|
|
</view>
|
|
<view class="summary_item">
|
|
<view>Application Time</view>
|
|
<view class="summary_item_right"> 21/04/2022 15:42:31</view>
|
|
</view>
|
|
<view class="summary_item" >
|
|
<view>Reason For Refund</view>
|
|
<view class="summary_item_right">Quality Problem</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
<view class="details_footer" v-if="details_index!=0 && details_index!=6">
|
|
<button class="white" v-if="details_index==1">MODIFY REFUND</button>
|
|
<button class="white" v-if="details_index==1 || details_index==2 || details_index==3 || details_index==4 || details_index==5">CANCEL RETURN</button>
|
|
|
|
<button class="white" v-if="details_index==2 ">RETURN LOGISTICS</button>
|
|
|
|
<!-- <button class="black" v-if="details_index==4">CONFIRM RECEIPT</button> -->
|
|
</view>
|
|
<view class="mask" v-show="isShow" @click="isShow=false"></view>
|
|
<view class="order_popup" v-show="isShow">
|
|
<view class="order_popup_title">
|
|
<text>Negotiation Details</text>
|
|
<image src="../../static/img/close1.png" mode="" @click="isShow=false"></image>
|
|
</view>
|
|
<view class="logistics_details">
|
|
<view class="logistics_step step_active">
|
|
<view class="logistics_step_title">CHIC Has Refunded</view>
|
|
<text>Refund amount: US $12.5</text>
|
|
<view class="logistics_step_time">2020.12.13 23:54:12</view>
|
|
</view>
|
|
<view class="logistics_step">
|
|
<view class="logistics_step_title">CHIC Reject Goods</view>
|
|
<text>Reason: 驳回的内容。 please modify the refund application or return information</text>
|
|
<view class="logistics_step_time">2020.12.13 23:54:12</view>
|
|
</view>
|
|
<view class="logistics_step">
|
|
<view class="logistics_step_title">Buyer Has Sent The Goods</view>
|
|
<text>Waiting for CHIC to receive the goods</text>
|
|
<view class="logistics_step_time">2020.12.13 23:54:12</view>
|
|
</view>
|
|
<view class="logistics_step">
|
|
<view class="logistics_step_title">CHIC Agrees To Refund</view>
|
|
<text>To be returned by the buyer，Please submit the return logistics order number within 7 days</text>
|
|
<view class="logistics_step_time">2020.12.13 23:54:12</view>
|
|
</view>
|
|
<view class="logistics_step">
|
|
<view class="logistics_step_title">Buyer Modifies Refund Application</view>
|
|
<text>Waiting for CHIC processing</text>
|
|
<view class="logistics_step_time">2020.12.13 23:54:12</view>
|
|
</view>
|
|
<view class="logistics_step">
|
|
<view class="logistics_step_title">CHIC Refund Rejected</view>
|
|
<text>Reason : 驳回的内容。please modify the refund information</text>
|
|
<view class="logistics_step_time">2020.12.13 23:54:12</view>
|
|
</view>
|
|
<view class="logistics_step">
|
|
<view class="logistics_step_title">Buyer Submits Refund Application</view>
|
|
<text>Waiting for CHIC processing</text>
|
|
<view class="logistics_step_time">2020.12.13 23:54:12</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 0、售后已取消 1、商家驳回申请 2、待买家退货 3、待商家收货 4、待退款 5、等待商家审核 6、退款成功
|
|
details_index:5,
|
|
isShow:false,
|
|
}
|
|
},
|
|
methods:{
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
@import "@/common/scss/order.scss";
|
|
.body{
|
|
padding-bottom: 140rpx;
|
|
|
|
}
|
|
.order_popup_commodity_title{
|
|
font-size: 28.67rpx;
|
|
font-weight: bold;
|
|
margin-top: 37.33rpx;
|
|
}
|
|
.negotiation_details{
|
|
padding: 40.67rpx 0;
|
|
padding-left: 28rpx;
|
|
padding-right: 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 28.67rpx;
|
|
font-weight: bold;
|
|
border-bottom: 14.67rpx #F6F5FA solid;
|
|
image{
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
}
|
|
}
|
|
.toPaid{
|
|
.shipped_right_text{
|
|
margin-bottom: 14rpx;
|
|
}
|
|
}
|
|
.refund_details_title{
|
|
height: 126rpx !important;
|
|
}
|
|
.refund_transit{
|
|
height: 126rpx !important;
|
|
}
|
|
.summary{
|
|
border-bottom: 14.67rpx #F6F5FA solid;
|
|
padding-bottom: 44.67rpx;
|
|
}
|
|
.refund_address{
|
|
padding: 40rpx 0;
|
|
padding-left: 28rpx;
|
|
padding-right: 16.67rpx;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
font-weight: bold;
|
|
border-bottom: 14.67rpx #F6F5FA solid;
|
|
.address_title{
|
|
font-size: 28.67rpx;
|
|
color: black;
|
|
margin-bottom: 22rpx;
|
|
}
|
|
.address_content{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
.address_content_item{
|
|
width: 50%;
|
|
margin-bottom: 10.67rpx;
|
|
&:last-child{
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.refund_success{
|
|
padding: 40rpx 26.67rpx;
|
|
font-size: 28.67rpx;
|
|
font-weight: bold;
|
|
border-bottom: 14.67rpx #F6F5FA solid;
|
|
.refund_success_item{
|
|
margin-bottom: 20rpx;
|
|
&:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
.refund_success_item_text{
|
|
color: #B22234;
|
|
}
|
|
}
|
|
}
|
|
.order_popup{
|
|
padding: 0 28rpx;
|
|
box-sizing: border-box;
|
|
|
|
.order_popup_title{
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
.logistics_details{
|
|
border-top: none;
|
|
padding: 26rpx 0;
|
|
padding-left: 0;
|
|
padding-right: 27.33rpx;
|
|
max-height: 1123.33rpx;
|
|
overflow-y: auto;
|
|
.logistics_step{
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
font-weight: bold;
|
|
&:before{
|
|
content: "";
|
|
width: 26.67rpx;
|
|
height: 26.67rpx;
|
|
background-color: #E2E2E2;
|
|
}
|
|
&::after{
|
|
background-color: #E2E2E2;
|
|
left: 12.5rpx;
|
|
}
|
|
.logistics_step_title{
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
margin-bottom: 10rpx;
|
|
font-weight: 500;
|
|
}
|
|
.logistics_step_time{
|
|
font-size: 20rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
.step_active{
|
|
color: #333333 !important;
|
|
|
|
&:before{
|
|
background-image: url(@/static/img/yuan.png);
|
|
background-size: 100% 100%;
|
|
background-color: white !important;
|
|
}
|
|
|
|
}
|
|
</style>
|