order.vue 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <template>
  2. <view class="container">
  3. <u-sticky style="top: 0" offset-top="0">
  4. <u-tabs :list="statusArray" :current="statusIndex" @change="handleStatusChange"></u-tabs>
  5. </u-sticky>
  6. <view class="order-list">
  7. <view v-for="(item, index) in orderList" :key="item.orderNo" class="order-item">
  8. <view class="item-title">{{ item.orderNo }}</view>
  9. <view class="item-content">{{ item.orderStatus }}</view>
  10. <view class="item-btn-group"></view>
  11. </view>
  12. </view>
  13. </view>
  14. </template>
  15. <script>
  16. import { getOrderPageData } from '../../api/order'
  17. export default {
  18. name: 'order',
  19. data() {
  20. return {
  21. pageNo: 1,
  22. statusIndex: 0,
  23. statusArray: [
  24. {
  25. name: '全部',
  26. status: '-1'
  27. },
  28. {
  29. name: '待付款',
  30. status: '0'
  31. },
  32. {
  33. name: '已付款',
  34. status: '10'
  35. },
  36. {
  37. name: '待发货',
  38. status: '20'
  39. },
  40. {
  41. name: '待收货',
  42. status: '30'
  43. },
  44. {
  45. name: '已完成',
  46. status: '40'
  47. },
  48. {
  49. name: '已取消',
  50. status: '50'
  51. }
  52. ],
  53. orderList: []
  54. }
  55. },
  56. onLoad(e) {
  57. const status = e.status
  58. if (status !== undefined) {
  59. this.statusArray.forEach((item, index) => {
  60. if (item.status === status) {
  61. this.statusIndex = index
  62. }
  63. })
  64. }
  65. this.loadOrderPageData()
  66. },
  67. methods: {
  68. handleStatusChange(item) {
  69. this.statusIndex = item.status
  70. },
  71. loadOrderPageData() {
  72. let params = { pageNo: this.pageNo }
  73. const status = this.statusArray[this.statusIndex].status
  74. if (status >= 0) {
  75. params.orderStatus = status
  76. }
  77. getOrderPageData(params)
  78. .then(res => {
  79. console.log(res)
  80. })
  81. .catch(err => {
  82. console.log(err)
  83. })
  84. }
  85. }
  86. }
  87. </script>
  88. <style lang="scss" scoped></style>