order.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <template>
  2. <div class="app-main app-content">
  3. <app-tabs :tabs="tabs" :isFixed="true" :currentTab="tabIndex" @change="change" itemWidth="20%" />
  4. <!-- <div class="list-wrap" v-for="(item, index) in 4" :key="index" @click="$util.pageTo('/pages/order/detail')">
  5. <div class="list-top flex-center-between">
  6. <div class="app-color-3">订单编号:3261515151</div>
  7. <div class="app-price">等待支付</div>
  8. </div>
  9. <div class="list-blo">
  10. <list-module v-for="(item, subIndex) in 2" :key="subIndex" />
  11. </div>
  12. <div class="list-bottom flex-center-between">
  13. <div>
  14. <span>应付金额:</span>
  15. <span class="app-size-30 app-bold">¥580.00</span>
  16. </div>
  17. <button class="button-com red">立即付款</button>
  18. </div>
  19. </div> -->
  20. </div>
  21. </template>
  22. <script>
  23. import appTabs from '@/components/plugin/tabs'
  24. import listModule from '@/components/module/app-order-list'
  25. export default {
  26. name: 'order-list',
  27. components: {
  28. listModule,
  29. appTabs
  30. },
  31. data() {
  32. return {
  33. tabIndex: 0,
  34. tabs: [
  35. {
  36. name: '全部',
  37. value: 212
  38. },
  39. {
  40. name: '待付款',
  41. value: 213
  42. },
  43. {
  44. name: '待配送',
  45. value: 214
  46. },
  47. {
  48. name: '配送中',
  49. value: 215
  50. },
  51. {
  52. name: '已完结',
  53. value: 216
  54. }
  55. ]
  56. }
  57. },
  58. onPullDownRefresh() {
  59. console.log('fasdfasdf')
  60. },
  61. // 加载更多
  62. onReachBottom() {
  63. console.log('5151')
  64. },
  65. methods: {
  66. change(e) {
  67. this.tabIndex = e.index
  68. }
  69. }
  70. }
  71. </script>
  72. <style lang="scss" scoped>
  73. </style>
  74. <style lang="scss" scoped>
  75. .app-content {
  76. padding-top: 20px;
  77. padding-bottom: 1px;
  78. .list-wrap {
  79. padding: 0 30px;
  80. background-color: #fff;
  81. margin-bottom: 20px;
  82. .list-top,
  83. .list-bottom {
  84. padding: 20px 0;
  85. border-bottom: 1px solid $borderColor;
  86. .button-com {
  87. padding-top: 15px;
  88. padding-bottom: 15px;
  89. }
  90. }
  91. }
  92. }
  93. </style>