transactionRecord.vue 6.5 KB

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