Skip to content

U
user
Commit 79ac0b67 by songbingqi
Options

退款详情页面联调

parent f5f34e51
Showing with 136 additions and 42 deletions
orderSubPackage/pages/refundInfo/index.vue
......@@ -2,25 +2,25 @@
<view class="big">
<view class="refundStep">
<view class="refund_title">退款进程</view>
<view class="refund_list">
<view :class="item.status===1?'refund_item_action':'refund_item'" v-for="(item,index) in newList" :key="index">
<view class="refund_list" v-for="(item,index) in newList">
<view :class="index===0?'refund_item_action':'refund_item'" v-for="(listItem,index) in item.list" :key="index">
<view class="item">
<view :class="item.status===1?'refund_info_action':'refund_info'">
<view :class="item.status===1?'info_ciycle_action':'info_ciycle'"></view>
<view :class="index===0?'refund_info_action':'refund_info'">
<view :class="index===0?'info_ciycle_action':'info_ciycle'"></view>
<view class="info_text">
<view :class="item.status===1?'info_title_action':'info_title'">{{item.title}}</view>
<view :class="item.status===1?'info_time_action':'info_time'">2022年6月2日09:35:27</view>
<view :class="index===0?'info_title_action':'info_title'">{{listItem.title}}</view>
<view :class="index===0?'info_time_action':'info_time'">{{listItem.time}}</view>
</view>
</view>
</view>
</view>
</view>
<view class="morInfo" v-if="list.length>4" @click="watchMore">
<view class="morInfo" v-if="list.length>1" @click="watchMore">
<view>更多退款信息</view>
<view class="function_item_icon">
<image :style="{'height':'100%','width':'100%'}" :src="'../../../static/imgs/jiantoulan.png'" />
<image :style="{'height':'100%','width':'100%'}" :class="['arrow-right-select',flag?'arrow-right-select-down':'arrow-right-select-right']" :src="'../../../static/imgs/jiantoulan.png'" />
</view>
</view>
</view>
......@@ -35,53 +35,107 @@ export default {
flag:false,
list:[
{
title:'退款成功',
time:'2022年6月2日09:35:27',
status:0
},
{
title:'退款中',
time:'2022年6月2日09:35:27',
status:1
},
{
title:'审核中',
time:'2022年6月2日09:35:27',
status:0
},
{
title:'退款申请已提交',
time:'2022年6月2日09:35:27',
status:0
},
{
title:'退款申请已提交',
time:'2022年6月2日09:35:27',
status:0
},
skuName:'',
list: [{
title:'待退款',
time:'2022年6月2日09:35:27',
state:0,
},
{
title:'退款中',
time:'2022年6月2日09:35:27',
state:1,
},
{
title:'退款成功',
time:'2022年6月2日09:35:27',
state:2,
},
{
title:'退款失败',
time:'2022年6月2日09:35:27',
state:3,
}]
}
],
oldList:[],
newList:[]
};
},
mounted() {
if(this.list.length>4){
this.newList = [...this.list].splice(0,4)
this.flag = false
}else{
this.newList = this.list
}
this.getRefundInfo()
},
methods:{
async getRefundInfo(){
let orderId = uni.getStorageSync('orderId');
const { data } = await order.getRefundInfo(orderId);
console.log(data)
const statusDesc = [
{
state:0,
desc:'待退款'
},
{
state:1,
desc:'退款中'
},
{
state:2,
desc:'退款成功'
},
{
state:3,
desc:'退款失败'
},
]
const newList = []
const test = [{
state:3,
createdAt:'111',
updatedAt:'222'
},
{
state:2,
createdAt:'111',
updatedAt:'222'
}
]
data.data.map(item => {
const list = []
for(let i=0;i<=item.state;i++){
const time = ''
if(i=== 0||i === 1){
time = item.createdAt
}else{
time = item.updatedAt
}
list.push({
title:statusDesc[i].desc,
time:time,
state:i
})
if(i===3){
list.splice(2,1)
}
}
newList.push({
skuName:'',
list:list.sort((a,b)=>{return b.state - a.state})
})
})
this.list = newList
if(this.list.length>1){
this.newList = [...this.list].splice(0,1)
this.flag = false
}else{
this.newList = this.list
}
console.log(newList, this.newList)
},
watchMore(){
if(this.flag){
this.newList = [...this.list].splice(0,4)
this.newList = [...this.list].splice(0,1)
}else{
this.newList = this.list
}
......@@ -106,7 +160,7 @@ export default {
.refund_title {
margin: 38rpx 30rpx;
height: 44rpx;
margin-bottom: 42rpx;
margin-bottom: 0rpx;
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
......@@ -114,7 +168,8 @@ export default {
line-height: 44rpx;
}
.refund_list {
margin: 0rpx 32rpx 0rpx 35rpx;
margin: 38rpx 32rpx 0rpx 35rpx;
// margin-top: 32rpx;
.refund_item {
height: 100rpx;
......@@ -220,6 +275,14 @@ export default {
}
}
.refund_list:nth-child(1) {
margin-top: 38px;
}
.refund_list:nth-child(n + 3) {
margin-top: 38px;
}
.morInfo {
margin-top: 40rpx;
margin-right: 32rpx;
......@@ -236,6 +299,37 @@ export default {
margin-left: 6rpx;
width: 11.27rpx;
height: 15.68rpx;
.arrow-right-select-down {
animation-name: upAnidown;
animation-duration: 0s;
animation-fill-mode:forwards;
@keyframes upAnidown {
0% {
transform: rotate(0);
-webkit-transform: rotate(0);
}
100% {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
}
};
.arrow-right-select-right {
animation-name: upAniup;
animation-duration: 0s;
animation-fill-mode:forwards;
@keyframes upAniup {
0% {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
100% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
}
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment