order.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. <template>
  2. <view class="order-pages">
  3. <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="reachBottom">
  4. <view class="order-list">
  5. <view v-for="item in list" :key="item.id" class="order-list-item" @click="goView(item)">
  6. <view>
  7. <view>{{item.storeName}}</view>
  8. <view :class="item.orderStatus">{{getOptionName(orderStatusList,item.orderStatus)}}</view>
  9. </view>
  10. <view>
  11. <view class="order-carNo">{{item.customerMobile}}</view>
  12. <u-icon name="arrow-right" color="#666" size="28"></u-icon>
  13. </view>
  14. <view>
  15. <view class="order-price">
  16. <!-- 显示用户实付金额,未支付显示0 -->
  17. <text>¥{{item.payStatus=='PAID' ?item.paymentAmount:0}}</text>
  18. <text>{{item.payType}}</text>
  19. </view>
  20. <view>{{item.orderTime}}</view>
  21. </view>
  22. </view>
  23. </view>
  24. <u-empty :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'" mode="list"></u-empty>
  25. <view style="padding: 20upx;">
  26. <u-loadmore v-if="count>pageSize || status=='loading'" :status="status" />
  27. </view>
  28. </scroll-view>
  29. </view>
  30. </template>
  31. <script>
  32. import {getOrderList, orderDetail} from '@/api/order.js'
  33. export default {
  34. data() {
  35. return {
  36. noDataText: '暂无数据',
  37. status: 'loading',
  38. list:[],
  39. pageNo:1,
  40. pageSize:10,
  41. count:0,
  42. orderStatusList: []
  43. }
  44. },
  45. onShow() {
  46. this.pageInit()
  47. },
  48. methods: {
  49. pageInit () {
  50. this.pageNo = 1
  51. this.count = 0
  52. this.list = []
  53. this.orderStatusList = this.$store.state.vuex_payStatus
  54. this.getList()
  55. },
  56. getOptionName (list,val) {
  57. let p = list.find((item) => {
  58. return item.code == val
  59. })
  60. return p ? p.dispName : '-'
  61. },
  62. // 获取订单列表
  63. getList() {
  64. this.status = "loading"
  65. let payTypeList = this.$store.state.vuex_payType
  66. let params = {
  67. pageNo: this.pageNo,
  68. pageSize: this.pageSize
  69. }
  70. getOrderList(params).then(res=>{
  71. this.status = "loadmore"
  72. if(res.status == 200) {
  73. let list = res.data.list
  74. list.map(item => {
  75. item.payType = item.payType ? this.getOptionName(payTypeList,item.payType) : ''
  76. })
  77. this.list = this.list.concat(list)
  78. this.count = res.data.count
  79. } else {
  80. this.list = []
  81. this.count = 0
  82. this.noDataText = res.message
  83. }
  84. })
  85. },
  86. // 查看详情
  87. goView(item){
  88. uni.navigateTo({
  89. url:"/pages/order/orderDetail?id="+item.id
  90. })
  91. },
  92. // 滚动到底部自动加载下页
  93. reachBottom() {
  94. if(this.list.length < this.count){
  95. this.pageNo += 1
  96. this.getList()
  97. }else{
  98. this.status = "nomore"
  99. }
  100. }
  101. },
  102. }
  103. </script>
  104. <style lang="scss">
  105. page{
  106. height: 100%;
  107. }
  108. .order-pages{
  109. width: 100%;
  110. height: 100%;
  111. .scroll-Y {
  112. width: 100%;
  113. height: 100%;
  114. .order-list{
  115. padding: 25rpx;
  116. .order-list-item{
  117. box-shadow: 1rpx 1rpx 5rpx #eee;
  118. border: 1px solid #eee;
  119. border-radius: 10rpx;
  120. margin: 30rpx 0;
  121. > view{
  122. padding:20rpx 30rpx;
  123. display: flex;
  124. align-items: center;
  125. border-bottom: 1px dashed #eee;
  126. &:last-child{
  127. border: 0;
  128. }
  129. >view{
  130. &:first-child{
  131. flex-grow: 1;
  132. }
  133. &:last-child{
  134. padding-left: 15rpx;
  135. }
  136. }
  137. .FINISHED{
  138. color: #00aa00;
  139. }
  140. .UN_PAY{
  141. color: #ff0000;
  142. }
  143. .CANCELED{
  144. color: #7e7b88;
  145. }
  146. .PAID{
  147. color: #00aaff;
  148. }
  149. .REFUNDING{
  150. color: #00557f;
  151. }
  152. .REFUNDED{
  153. color: #005500;
  154. }
  155. .order-carNo{
  156. font-size: 32rpx;
  157. }
  158. .order-price{
  159. text{
  160. margin-right: 20rpx;
  161. color: #666;
  162. &:first-child{
  163. color: red;
  164. font-size: 32rpx;
  165. }
  166. }
  167. }
  168. }
  169. }
  170. }
  171. .u-empty.data-v-6938e513{
  172. height: 90%;
  173. }
  174. }
  175. }
  176. </style>