| <template> | 
|     <view class="list-container order-settlement supplier"> | 
|         <view class="component-tab-container m-t-12"> | 
|             <view class="tab-item" :class="[tabIndex==0?'cur':'']" @click="changeIndex(0)">待配送</view> | 
|             <view class="tab-item" :class="[tabIndex==1?'cur':'']" @click="changeIndex(1)">已配送</view> | 
|         </view> | 
|          | 
|         <view class="p15" style="min-height: calc(100vh - 160rpx);"> | 
|             <no-data v-if="!list||list.length==0" style="width: 100%;"></no-data> | 
|             <view v-for="(item,index) in list" :key="index" class="m-b-24 order-settlement-list list-container"> | 
|                 <view class="order-settlement-item list-item"> | 
|                     <view class="title flex"> | 
|                         <view> | 
|                             订单:27799880327543 | 
|                         </view> | 
|                         <view class="status m-l-a m-r-0">已结算</view> | 
|                     </view> | 
|                     <view class="button-green-1">确认配送完成</view> | 
|                 </view> | 
|             </view> | 
|         </view> | 
|   | 
|         <!-- 判断是否到底了,自动吧 --> | 
|         <footer-msg :more="page.total>0&&page.total>page.current*page.size"></footer-msg> | 
|   | 
|     </view> | 
| </template> | 
|   | 
| <script> | 
|     export default { | 
|         data() { | 
|             return { | 
|                 tabIndex: 0, | 
|             } | 
|         }, | 
|         onLoad() { | 
|             this.listApi = '/api/ua/announcement/list' | 
|             this.getList() | 
|   | 
|         }, | 
|         onReachBottom() { | 
|             this.page.current += 1 | 
|             this.getMore() | 
|         }, | 
|         async onPullDownRefresh() { | 
|             this.page.current = 1 | 
|             await this.getList() | 
|             uni.stopPullDownRefresh() | 
|         }, | 
|         methods: { | 
|             changeIndex(index) { | 
|                 if (this.tabIndex !== index) { | 
|                     this.tabIndex = index | 
|                     // 刷新 query | 
|                     this.refreshList() | 
|                 } | 
|             }, | 
|             toDetail(item) { | 
|                 // uni.navigateTo({ | 
|                 //     url: `/pages/notice/notice?id=${item.id}` | 
|                 // }) | 
|             } | 
|         } | 
|     } | 
| </script> | 
|   | 
| <style lang="scss" scope> | 
|     .order-settlement-list { | 
|         .order-settlement-item { | 
|             margin-bottom: 20rpx; | 
|             padding: 28rpx; | 
|   | 
|             .title { | 
|                 font-weight: 600; | 
|                 font-size: 28rpx; | 
|                 color: #000000; | 
|                 line-height: 40rpx; | 
|   | 
|                 .status { | 
|                     font-weight: 400; | 
|                     font-size: 28rpx; | 
|                     color: #20613D; | 
|                     line-height: 40rpx; | 
|                 } | 
|   | 
|                 .status.red { | 
|                     color: #CF0000; | 
|                 } | 
|   | 
|                 .status.green { | 
|                     color: var(--topiccolor); | 
|                 } | 
|             } | 
|   | 
|             .line { | 
|                 height: 2rpx solid #EEEEEE; | 
|                 margin-top: 16rpx; | 
|                 margin-bottom: 16rpx; | 
|             } | 
|   | 
|             .tj { | 
|                 .label { | 
|                     font-weight: 600; | 
|                     font-size: 28rpx; | 
|                     color: #000000; | 
|                     line-height: 40rpx; | 
|                 } | 
|   | 
|                 .value { | 
|                     font-weight: 400; | 
|                     font-size: 28rpx; | 
|                     color: #CF0000; | 
|                     line-height: 40rpx; | 
|                 } | 
|             } | 
|   | 
|             .form { | 
|                 display: flex; | 
|   | 
|                 .form-item { | 
|                     flex: 1; | 
|                     min-width: 26%; | 
|                     max-width: 33%; | 
|   | 
|                     .label { | 
|                         font-weight: 400; | 
|                         font-size: 24rpx; | 
|                         color: #666666; | 
|                         line-height: 34rpx; | 
|                     } | 
|   | 
|                     .label::after { | 
|                         content: ":"; | 
|                         font-weight: 400; | 
|                         font-size: 24rpx; | 
|                         color: #666666; | 
|                         line-height: 34rpx; | 
|                     } | 
|   | 
|                     .value { | 
|                         font-weight: 400; | 
|                         font-size: 24rpx; | 
|                         color: #000000; | 
|                         line-height: 34rpx; | 
|                     } | 
|   | 
|                     .value.red { | 
|                         color: #CF0000; | 
|                     } | 
|                 } | 
|   | 
|   | 
|             } | 
|         } | 
|     } | 
| </style> |