<template> <div class="container"> <van-tabs swipeable> <van-tab title="全部"> <scroll-view scroll-y class="content"> <order-card v-for="item in list0" :options="item" :key="item.id" @refresh="getOrderList"></order-card> <no-data :options="list0"/> </scroll-view> </van-tab> <van-tab title="待付款"> <scroll-view scroll-y class="content"> <order-card v-for="item in list1" :options="item" :key="item.id" @refresh="getOrderList"></order-card> <no-data :options="list1"/> </scroll-view> </van-tab> <van-tab title="已付款"> <scroll-view scroll-y class="content"> <order-card v-for="item in list3" :options="item" :key="item.id" @refresh="getOrderList"></order-card> <no-data :options="list3"/> </scroll-view> </van-tab> <van-tab title="已取消"> <scroll-view scroll-y class="content"> <order-card v-for="item in list2" :options="item" :key="item.id" @refresh="getOrderList"></order-card> <no-data :options="list2"/> </scroll-view> </van-tab> </van-tabs> </div> </template> <script> import OrderCard from '@/components/OrderCard'; import { customerBundleList } from '@/api/bundle'; import NoData from '@/components/NoData'; export default { components: { 'order-card': OrderCard, 'no-data': NoData }, name: 'package', data() { return { list0: [], list1: [], list2: [], list3: [] }; }, methods: { getOrderList() { const _this = this; customerBundleList({}).then(res => { if (res.status === '200') { _this.list0 = res.data; // 未结算 _this.list1 = res.data.filter(item => item.orderFlag === 'UNPA'); // 取消 _this.list2 = res.data.filter(item => item.orderFlag === 'CAEL' || item.orderFlag === 'SYCA'); // 已结清 _this.list3 = res.data.filter(item => item.orderFlag === 'PAED'); } else { wx.showToast({ title: res.message, icon: 'none', duration: 2500 }); } wx.hideLoading(); }); } }, onShow() { wx.showLoading({ mask: true, title: '加载中' }); this.getOrderList(); } }; </script> <style lang="stylus" scoped> .container { height: 100%; overflow: hidden; } .content { height: calc(100vh - 60px); background-color: #f8f8f9; padding-top: 0.5rpx; } </style>