order.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. <template>
  2. <view class="order">
  3. <view class="order_head flex">
  4. <view class="order_head_li center" @click="changeIndex(index)" :class="{active:index == i}" v-for="(item,index) in 3" :key="index">{{ index == 0 ? '待发货' : index == 1 ? '已发货' :'已完成' }}</view>
  5. </view>
  6. <view class="order_ul">
  7. <view class="order_li" v-for="(item,index) in orderList" :key="index" @click="goOrderMessage(item)">
  8. <view class="order_li_head flex">
  9. <text>订单号:{{ item.delivery_order_no }}</text>
  10. <text>{{ item.status }}</text>
  11. </view>
  12. <view class="order_li_main">
  13. <view class="order_li_main_li flexs">
  14. <view class="order_li_img">
  15. <image :src="item.goods_image" mode="aspectFill"></image>
  16. </view>
  17. <view class="order_li_con">
  18. <view class="order_li_name">{{ item.goods_name }}</view>
  19. <view class="order_li_price">{{ item.goods_coin_price }}金币</view>
  20. </view>
  21. </view>
  22. </view>
  23. <view class="order_li_time flex">
  24. <text>下单时间</text>
  25. <text>{{ item.time }}</text>
  26. </view>
  27. </view>
  28. </view>
  29. </view>
  30. </template>
  31. <script>
  32. export default {
  33. data() {
  34. return {
  35. i:0,//选择哪个
  36. page:1,//f分页
  37. pages:0,//总页数
  38. orderList:[],//订单列表
  39. };
  40. },
  41. methods:{
  42. //去订单详情
  43. goOrderMessage (item) {
  44. uni.navigateTo({url:'/pages/me/order-details?id=' + item.delivery_order_id})
  45. },
  46. //切换
  47. changeIndex (index) {
  48. this.i = index
  49. this.page = 1
  50. this.getOrderList()
  51. },
  52. //获取订单列表
  53. getOrderList () {
  54. this.$api.myOrderList({status: Number(this.i) + 1,page:this.page,msg:'数据加载中'}).then(res=>{
  55. uni.stopPullDownRefresh()
  56. if (res.code === 1) {
  57. this.pages = res.data.last_page
  58. this.orderList = this.page == 1 ? res.data.data : [...this.orderList,...res.data.data]
  59. console.log(res.data);
  60. }
  61. })
  62. }
  63. },
  64. onLoad ({type}) {
  65. this.i = type || 0
  66. },
  67. onShow() {
  68. this.getOrderList()
  69. },
  70. onPullDownRefresh() {
  71. this.page = 1
  72. this.getOrderList()
  73. },
  74. onReachBottom() {
  75. if (this.page < this.pages) {
  76. this.page++
  77. this.getOrderList()
  78. }
  79. }
  80. }
  81. </script>
  82. <style lang="scss">
  83. .order {
  84. padding: 0 30rpx;
  85. }
  86. .order_head {
  87. width: 100%;
  88. top: 44px;
  89. padding: 0 50rpx;
  90. position: sticky;
  91. height: 90rpx;
  92. z-index: 2021;
  93. background: #FAFAFA;
  94. .order_head_li {
  95. font-weight: bold;
  96. font-size: 30rpx;
  97. }
  98. .active {
  99. color: #69a8f8;
  100. }
  101. }
  102. .order_li {
  103. overflow: hidden;
  104. margin-bottom: 20rpx;
  105. background: #FFFFFF;
  106. border-radius: 20rpx;
  107. .order_li_head {
  108. height: 60rpx;
  109. padding: 0 30rpx;
  110. background: #FFFFFF;
  111. border-bottom: 2rpx solid #FAFAFA;
  112. text {
  113. color: #999999;
  114. font-size: 26rpx;
  115. &:last-child {
  116. color: #F6AF32;
  117. font-size: 24rpx;
  118. }
  119. }
  120. }
  121. .order_li_main {
  122. padding: 30rpx 0;
  123. }
  124. .order_li_main_li {
  125. padding: 0 30rpx;
  126. .order_li_img {
  127. width: 168rpx;
  128. height: 168rpx;
  129. margin-right: 20rpx;
  130. image {
  131. border-radius: 10rpx;
  132. }
  133. }
  134. .order_li_con {
  135. display: flex;
  136. flex-direction: column;
  137. height: 168rpx;
  138. .order_li_name {
  139. font-size: 28rpx;
  140. line-height: 36rpx;
  141. }
  142. .order_li_price {
  143. color: #CF271B;
  144. font-size: 28rpx;
  145. margin-top: 20rpx;
  146. }
  147. }
  148. }
  149. .order_li_time {
  150. padding: 20rpx 30rpx;
  151. border-top: 2rpx solid #FAFAFA;
  152. text {
  153. color: #999999;
  154. &:first-child {
  155. font-size: 26rpx;
  156. }
  157. }
  158. }
  159. }
  160. </style>