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.
265 lines
5.4 KiB
265 lines
5.4 KiB
<template>
|
|
<view class="refund">
|
|
<view class="refund-navbar">
|
|
<u-navbar title="退货退款详情" :background="background"></u-navbar>
|
|
</view>
|
|
<view class="refund-hd">
|
|
<view class="l">
|
|
<view class="a">退款成功</view>
|
|
<view class="b">
|
|
<text>￥3323</text>已退到农行信用卡3949
|
|
</view>
|
|
</view>
|
|
<view class="r">
|
|
<image src="@/static/news/icon-arrow.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="refund-bd">
|
|
<view class="li" :class="currentIndex >= 0?'li-on':''">
|
|
<view class="line">
|
|
<image v-if="currentIndex >= 0" class="icon" src="@/static/news/icon-success.png"></image>
|
|
<view v-else class="clicle">●</view>
|
|
</view>
|
|
<view class="title">同意退款</view>
|
|
<view class="timer">12-1 19:22</view>
|
|
</view>
|
|
<view class="li" :class="currentIndex >= 1?'li-on':''">
|
|
<view class="line">
|
|
<image v-if="currentIndex >= 1" class="icon" src="@/static/news/icon-success.png"></image>
|
|
<view v-else class="clicle">●</view>
|
|
</view>
|
|
<view class="title">微信支付处理中</view>
|
|
<view class="timer">12-1 19:22</view>
|
|
</view>
|
|
<view class="li" :class="currentIndex >= 2?'li-on':''">
|
|
<view class="line">
|
|
<image v-if="currentIndex >= 2" class="icon" src="@/static/news/icon-success.png"></image>
|
|
<view v-else class="clicle">●</view>
|
|
</view>
|
|
<view class="title">退款成功</view>
|
|
<view class="timer">12-1 19:22</view>
|
|
</view>
|
|
</view>
|
|
<view class="refund-box">
|
|
<view class="a">
|
|
退货物流
|
|
</view>
|
|
<view class="b">
|
|
顺丰快递 SF234568990
|
|
</view>
|
|
<view class="c">
|
|
<image src="@/static/news/icon-arrow.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="refund-box">
|
|
<view class="a">
|
|
协商记录
|
|
</view>
|
|
<view class="c">
|
|
<image src="@/static/news/icon-arrow.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="refund-fd">
|
|
<view class="a">
|
|
协商记录
|
|
<view class="more">
|
|
查看全部<image src="@/static/news/icon-arrow.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="b">
|
|
<view class="li">问：退款什么时候到账，退到哪里？</view>
|
|
<view class="li">问：如何查询退款到账信息？</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import img from "@/static/news/refund-bg.png"
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentIndex: 0,
|
|
background: {
|
|
background: 'url('+ img+') center -44px no-repeat',
|
|
backgroundSize: '100%',
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.refund{
|
|
width: 100%;
|
|
overflow: hidden;
|
|
&-hd{
|
|
height: 206rpx;
|
|
background: linear-gradient(180deg, #FCE2E7 0%, #FFFFFF 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 60rpx;
|
|
box-sizing: border-box;
|
|
.l{
|
|
flex: 1;
|
|
overflow: hidden;
|
|
.a{
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #262626;
|
|
}
|
|
.b{
|
|
display: flex;
|
|
align-items: baseline;
|
|
margin-top: 30rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #4F4F4F;
|
|
text{
|
|
font-size: 53rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
.r{
|
|
image{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
&-bd{
|
|
background-color: #FFFFFF;
|
|
padding: 35rpx 40rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
.li{
|
|
flex: 1;
|
|
position: relative;
|
|
text-align: center;
|
|
.line{
|
|
display: flex;
|
|
height: 50rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
&::after{
|
|
content: "";
|
|
width: 160rpx;
|
|
height: 4rpx;
|
|
background: #000;
|
|
position: absolute;
|
|
left: -80rpx;
|
|
top: 50%;
|
|
margin-top: 0rpx;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
&-on{
|
|
.line::after{
|
|
content: "";
|
|
width: 160rpx;
|
|
height: 4rpx;
|
|
background: #3BC020;
|
|
position: absolute;
|
|
left: -80rpx;
|
|
top: 50%;
|
|
margin-top: 0rpx;
|
|
z-index: 2;
|
|
}
|
|
.clicle{
|
|
color: #3BC020;
|
|
}
|
|
}
|
|
&:first-child{
|
|
.line::after{
|
|
content: "";
|
|
background: #fff;
|
|
}
|
|
}
|
|
.clicle{
|
|
color: #212121;
|
|
}
|
|
.icon{
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
.title{
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #4F4F4F;
|
|
margin-top: 20rpx;
|
|
}
|
|
.timer{
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #959595;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
&-box{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background-color: #FFFFFF;
|
|
padding: 35rpx 40rpx;
|
|
margin-top: 20rpx;
|
|
.a{
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #292929;
|
|
}
|
|
.b{
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #484848;
|
|
}
|
|
.c{
|
|
flex: 1;
|
|
text-align: right;
|
|
image{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
&-fd{
|
|
background-color: #FFFFFF;
|
|
padding: 35rpx 40rpx;
|
|
margin-top: 20rpx;
|
|
.a{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 30rpx;
|
|
color: #212122;
|
|
.more{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: #959595;
|
|
image{
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.b{
|
|
margin-top: 20rpx;
|
|
overflow: hidden;
|
|
.li{
|
|
line-height: 50rpx;
|
|
font-size: 26rpx;
|
|
color: #959595;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|