退款详情页面联调

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:'退款成功',
+               skuName:'',
+               list: [{
+                   title:'待退款',
                    time:'2022年6月2日09:35:27',
-                status:0
+                   state:0,
                },
                {
                    title:'退款中',
                    time:'2022年6月2日09:35:27',
-                status:1
-            },
-            {
-                title:'审核中',
-                time:'2022年6月2日09:35:27',
-                status:0
+                   state:1,
                },
                {
-                title:'退款申请已提交',
+                   title:'退款成功',
                    time:'2022年6月2日09:35:27',
-                status:0
+                   state:2,
                },
                {
-                title:'退款申请已提交',
+                   title:'退款失败',
                    time:'2022年6月2日09:35:27',
-                status:0
-            },
+                   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);
+            }
+          }
+      }
 		}
   }
 }