transactionRecord.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. <template>
  2. <view class="container">
  3. <!-- 头部 -->
  4. <view class="header">
  5. <text :class="tabType==1?'active':''" @tap="changeTab(1)">消费</text>
  6. <text :class="tabType==0?'active':''" @tap="changeTab(0)">充值</text>
  7. </view>
  8. <!-- 主体内容 -->
  9. <view class="scroll-content" >
  10. <scroll-view scroll-y style="height: 100%;width:100%;overflow: auto;" @scrolltolower="onreachBottom">
  11. <view class="month-list">
  12. <!-- 3月记录 -->
  13. <view class="month-card" v-for="item in list" :key="item.tradeMonth">
  14. <view class="month-header">
  15. <text class="month-title">{{item.tradeMonth}}</text>
  16. <text class="month-total">总计:¥{{item.totalAmount}}</text>
  17. </view>
  18. <view class="record-list">
  19. <view
  20. class="record-item"
  21. v-for="(sitem, index) in item.list"
  22. :key="sitem.id"
  23. >
  24. <view class="item-left">
  25. <text class="amount-label">{{tabType==0?'充值':'消费'}}</text>
  26. <text class="time" v-if="tabType==1&&sitem.bizType=='SALES'">{{sitem.finishFlag==1?'支付时间':'采购时间'}}:{{sitem.tradeDate}}</text>
  27. <text class="time" v-if="tabType==1&&sitem.bizType=='REFUND'">退款时间:{{sitem.tradeDate}}</text>
  28. <text class="time" v-if="tabType==0">{{sitem.bizType=='ZERO'?'清零时间':'充值时间'}}:{{sitem.tradeDate}}</text>
  29. </view>
  30. <text class="amount">¥{{sitem.tradeAmount}}</text>
  31. </view>
  32. </view>
  33. </view>
  34. <view style="padding:0 30upx 30upx;">
  35. <u-empty :src="`/static/nodata.png`" icon-size="180" :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'" mode="list"></u-empty>
  36. <u-loadmore v-if="(total>=list.length&&list.length)||status=='loading'" :status="status" />
  37. </view>
  38. </view>
  39. </scroll-view>
  40. </view>
  41. </view>
  42. </template>
  43. <script>
  44. import {xprhStoreAccountFlowPage} from '@/api/recharge.js'
  45. import {
  46. mapState,
  47. mapMutations,
  48. } from 'vuex'
  49. export default {
  50. data() {
  51. return {
  52. status: 'loading',
  53. noDataText: '暂无数据',
  54. // 查询条件
  55. pageNo: 1,
  56. pageSize: 10,
  57. list: [],
  58. total: 0,
  59. tabType:0,
  60. lastMoth:''
  61. }
  62. },
  63. onLoad(opts){
  64. this.tabType = opts.type
  65. },
  66. onShow() {
  67. this.getRow(1)
  68. },
  69. computed: {
  70. ...mapState(['hasLogin']),
  71. // 登录用户信息
  72. userInfo(){
  73. return this.$store.state.vuex_userInfo
  74. },
  75. // 货架经销商信息
  76. shelfInfo(){
  77. return this.$store.state.vuex_storeShelf
  78. },
  79. maxNums(){
  80. let nums = 0
  81. this.list.forEach(item => {
  82. nums += item.list.length
  83. })
  84. return nums
  85. }
  86. },
  87. methods: {
  88. changeTab(type){
  89. this.tabType = type
  90. this.list = []
  91. this.lastMoth = ''
  92. this.getRow(1)
  93. },
  94. // 查询列表
  95. getRow (pageNo) {
  96. let _this = this
  97. this.status = "loading"
  98. // 0 充值,1 消费
  99. const params = {
  100. storeSn:this.shelfInfo.storeSn,
  101. bizTypeList:this.tabType==0 ? ['RECHARGE'] : ['SALES', 'REFUND'],
  102. accountType: ['RECHARGE','GIVE'][this.tabType]
  103. }
  104. xprhStoreAccountFlowPage({pageNo:this.pageNo,pageSize: this.pageSize,...params}).then(res => {
  105. if (res.status == 200) {
  106. const list = res.data&&res.data.list || []
  107. if(_this.pageNo>1){
  108. const fm = list[0] && list[0].tradeMonth
  109. // 如果相等,将数据拼接到上页去
  110. if(fm == _this.lastMoth){
  111. let preList = _this.list[_this.list.length-1].list
  112. preList = preList.concat(list[0].list)
  113. _this.list[_this.list.length-1].list = preList
  114. // 删除第一项
  115. list[0].list = []
  116. }
  117. console.log(list)
  118. _this.list = _this.list.concat(list.length?list.filter(item=>item.list.length):list)
  119. }else{
  120. _this.list = list
  121. }
  122. // 最后一条的月份
  123. _this.lastMoth = _this.list.length>0 ? _this.list[_this.list.length-1].tradeMonth : ''
  124. _this.total = res.data.count || 0
  125. } else {
  126. _this.list = []
  127. _this.total = 0
  128. _this.noDataText = res.message
  129. }
  130. _this.status = _this.total>=_this.maxNums ? "nomore" : 'loadmore'
  131. })
  132. },
  133. // scroll-view到底部加载更多
  134. onreachBottom() {
  135. if(this.maxNums < this.total){
  136. this.pageNo += 1
  137. this.getRow()
  138. }else{
  139. this.status = "nomore"
  140. }
  141. },
  142. }
  143. }
  144. </script>
  145. <style lang="less">
  146. .container {
  147. height: 100vh;
  148. display: flex;
  149. flex-direction: column;
  150. background-color: #f5f5f5;
  151. }
  152. .header {
  153. padding: 30px 10px 20px;
  154. display: flex;
  155. align-items: center;
  156. justify-content: center;
  157. > text {
  158. font-size: 16px;
  159. font-weight: bold;
  160. color: #333;
  161. margin: 0 10px;
  162. }
  163. .active{
  164. color: #ff0000;
  165. }
  166. }
  167. .scroll-content {
  168. height: calc(100vh - 90px);
  169. .month-list{
  170. padding: 0 15px;
  171. }
  172. }
  173. .month-card {
  174. margin-bottom: 15px;
  175. overflow: hidden;
  176. }
  177. .month-header {
  178. padding: 12px 0;
  179. display: flex;
  180. justify-content: space-between;
  181. .month-title {
  182. font-size: 16px;
  183. color: #333;
  184. font-weight: 500;
  185. }
  186. .month-total {
  187. font-size: 14px;
  188. color: #666;
  189. }
  190. }
  191. .record-list {
  192. padding: 0 15px;
  193. background-color: #fff;
  194. border-radius: 8px;
  195. }
  196. .record-item {
  197. padding: 12px 0;
  198. display: flex;
  199. justify-content: space-between;
  200. align-items: center;
  201. border-bottom: 1px solid #f0f0f0;
  202. &:last-child {
  203. border-bottom: none;
  204. }
  205. .item-left {
  206. display: flex;
  207. flex-direction: column;
  208. }
  209. .amount-label {
  210. font-size: 14px;
  211. color: #333;
  212. font-weight: bold;
  213. }
  214. .amount {
  215. font-size: 14px;
  216. color: #333;
  217. font-weight: 500;
  218. }
  219. .time {
  220. font-size: 12px;
  221. color: #999;
  222. margin-top: 5px;
  223. }
  224. }
  225. </style>