index.vue 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <div class="container">
  3. <van-tabs swipeable>
  4. <van-tab title="全部">
  5. <scroll-view scroll-y class="content">
  6. <order-card v-for="item in list0" :options="item" :key="item.id" @refresh="getOrderList"></order-card>
  7. <no-data :options="list0"/>
  8. </scroll-view>
  9. </van-tab>
  10. <van-tab title="待付款">
  11. <scroll-view scroll-y class="content">
  12. <order-card v-for="item in list1" :options="item" :key="item.id" @refresh="getOrderList"></order-card>
  13. <no-data :options="list1"/>
  14. </scroll-view>
  15. </van-tab>
  16. <van-tab title="已付款">
  17. <scroll-view scroll-y class="content">
  18. <order-card v-for="item in list3" :options="item" :key="item.id" @refresh="getOrderList"></order-card>
  19. <no-data :options="list3"/>
  20. </scroll-view>
  21. </van-tab>
  22. <van-tab title="已取消">
  23. <scroll-view scroll-y class="content">
  24. <order-card v-for="item in list2" :options="item" :key="item.id" @refresh="getOrderList"></order-card>
  25. <no-data :options="list2"/>
  26. </scroll-view>
  27. </van-tab>
  28. </van-tabs>
  29. </div>
  30. </template>
  31. <script>
  32. import OrderCard from '@/components/OrderCard';
  33. import { customerBundleList } from '@/api/bundle';
  34. import NoData from '@/components/NoData';
  35. export default {
  36. components: { 'order-card': OrderCard, 'no-data': NoData },
  37. name: 'package',
  38. data() {
  39. return {
  40. list0: [],
  41. list1: [],
  42. list2: [],
  43. list3: []
  44. };
  45. },
  46. methods: {
  47. getOrderList() {
  48. const _this = this;
  49. customerBundleList({}).then(res => {
  50. if (res.status === '200') {
  51. _this.list0 = res.data;
  52. // 未结算
  53. _this.list1 = res.data.filter(item => item.orderFlag === 'UNPA');
  54. // 取消
  55. _this.list2 = res.data.filter(item => item.orderFlag === 'CAEL' || item.orderFlag === 'SYCA');
  56. // 已结清
  57. _this.list3 = res.data.filter(item => item.orderFlag === 'PAED');
  58. } else {
  59. wx.showToast({
  60. title: res.message,
  61. icon: 'none',
  62. duration: 2500
  63. });
  64. }
  65. wx.hideLoading();
  66. });
  67. }
  68. },
  69. onShow() {
  70. wx.showLoading({
  71. mask: true,
  72. title: '加载中'
  73. });
  74. this.getOrderList();
  75. }
  76. };
  77. </script>
  78. <style lang="stylus" scoped>
  79. .container {
  80. height: 100%;
  81. overflow: hidden;
  82. }
  83. .content {
  84. height: calc(100vh - 60px);
  85. background-color: #f8f8f9;
  86. padding-top: 0.5rpx;
  87. }
  88. </style>