chargeList.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <template>
  2. <view>
  3. <ujp-navbar title="充电记录">
  4. </ujp-navbar>
  5. <view class="chargeScreen">
  6. <view class="chargeScreen-item">
  7. <p>
  8. <picker mode="date" :value="startDate" :end="endDate" @change="bindDateChange0">
  9. <view class="uni-input">{{startDate}}</view>
  10. </picker>
  11. </p>
  12. <u-icon name="arrow-down-fill" color="#999" size="24"></u-icon>
  13. </view>
  14. <span>至</span>
  15. <view class="chargeScreen-item">
  16. <p>
  17. <picker mode="date" :value="endDate" :start="startDate" @change="bindDateChange1">
  18. <view class="uni-input">{{endDate}}</view>
  19. </picker>
  20. </p>
  21. <u-icon name="arrow-down-fill" color="#999" size="24"></u-icon>
  22. </view>
  23. </view>
  24. <view style="text-align: center;margin-top: 100px" v-if="!list.length">
  25. <img src="@/assets/img/blankpage.png">
  26. <p>暂无充电记录</p>
  27. </view>
  28. <view class="chargeList">
  29. <view v-for="(item ,index) in list" :key="item.id"
  30. @click="gotoUrl('pages/charge/chargeDetails?id='+item.id)"
  31. class="chargeList-item"
  32. >
  33. <view class="chargeList-text">
  34. <p>{{item.createTime}}</p>
  35. <h4>{{item.deviceName}} 通道:{{item.channelNo}}</h4>
  36. </view>
  37. <span>{{isnull(item.actualFee!=null?item.actualFee:item.estimateFee)}}元</span>
  38. </view>
  39. </view>
  40. <u-divider bg-color="#F2F4F4" v-if="recordsTotal&&list.length==recordsTotal" border-color="#CFD2D5">已经到底了</u-divider>
  41. </view>
  42. </template>
  43. <script>
  44. import * as API from '@/apis/index.js'
  45. import {parseUnixTime,beforeTimeStamp} from '@/utils/index.js'
  46. export default {
  47. data() {
  48. return {
  49. form:{
  50. },
  51. startDate:'',
  52. endDate:'',
  53. pageIndex: 1,
  54. recordsTotal: 0,
  55. list: [],
  56. }
  57. },
  58. onReachBottom() {
  59. if (this.list.length < this.recordsTotal) {
  60. this.myLoadmore();
  61. }
  62. },
  63. methods: {
  64. isnull(str){
  65. if(!str){
  66. return 0
  67. }else{
  68. return str
  69. }
  70. },
  71. bindDateChange0: function(e) {
  72. this.startDate= e.target.value
  73. this.getList(true)
  74. },
  75. bindDateChange1: function(e) {
  76. this.endDate= e.target.value
  77. this.getList(true)
  78. },
  79. myLoadmore() {
  80. this.pageIndex += 1;
  81. this.getList()
  82. },
  83. getList(bl) {
  84. uni.showLoading({
  85. title: "加载中",
  86. mask: true,
  87. })
  88. if (bl) {
  89. this.list = [];
  90. this.pageIndex = 1;
  91. }
  92. var data = {
  93. startDate:this.startDate,
  94. endDate:this.endDate,
  95. pageIndex: this.pageIndex,
  96. pageSize: 20,
  97. };
  98. API.chargingRecordData(data).then((res) => {
  99. this.list = [
  100. ...this.list,
  101. ...res.data.data
  102. ];
  103. this.recordsTotal = res.data.recordsTotal
  104. uni.hideLoading()
  105. }).catch(error => {
  106. uni.showToast({
  107. title: error
  108. })
  109. })
  110. },
  111. onReady() {
  112. this.startDate=parseUnixTime(beforeTimeStamp(5),"{y}-{m}-{d}")
  113. this.endDate=parseUnixTime(new Date(),"{y}-{m}-{d}")
  114. this.getList()
  115. }
  116. }
  117. }
  118. </script>
  119. <style>
  120. page{
  121. background-color: #f7f7f7;
  122. }
  123. </style>
  124. <style lang="scss" scoped>
  125. .chargeScreen{
  126. display: flex;
  127. align-items: center;
  128. justify-content: space-between;
  129. padding: 10px 0;
  130. background-color: #fff;
  131. span{
  132. color:#777;
  133. }
  134. }
  135. .chargeScreen-item{
  136. display: flex;
  137. align-items: center;
  138. flex: 1;
  139. justify-content: center;
  140. p{
  141. color:#777;
  142. margin-right: 5px;
  143. }
  144. }
  145. .chargeList{
  146. margin-top: 10px;
  147. }
  148. .chargeList-item{
  149. display: flex;
  150. align-items: center;
  151. justify-content: space-between;
  152. padding: 15px;
  153. background-color: #fff;
  154. border-bottom: 1px solid #f7f7f7;
  155. h4{
  156. font-weight: normal;
  157. color:#999;
  158. margin-top: 3px;
  159. font-size: 12px;
  160. }
  161. span{
  162. font-size: 20px;
  163. color:#1677FF;
  164. font-weight: bold;
  165. }
  166. }
  167. </style>