123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243 |
- <template>
- <view class="container">
- <!-- 头部 -->
- <view class="header">
- <text :class="tabType==1?'active':''" @tap="changeTab(1)">消费</text>
- <text :class="tabType==0?'active':''" @tap="changeTab(0)">充值</text>
- </view>
- <!-- 主体内容 -->
- <view class="scroll-content" >
- <scroll-view scroll-y style="height: 100%;width:100%;overflow: auto;" @scrolltolower="onreachBottom">
- <view class="month-list">
- <!-- 3月记录 -->
- <view class="month-card" v-for="item in list" :key="item.tradeMonth">
- <view class="month-header">
- <text class="month-title">{{item.tradeMonth}}</text>
- <text class="month-total">总计:¥{{item.totalAmount}}</text>
- </view>
-
- <view class="record-list">
- <view
- class="record-item"
- v-for="(sitem, index) in item.list"
- :key="sitem.id"
- >
- <view class="item-left">
- <text class="amount-label">{{tabType==0?'充值':'消费'}}</text>
- <text class="time" v-if="tabType==1&&sitem.bizType=='SALES'">{{sitem.finishFlag==1?'支付时间':'采购时间'}}:{{sitem.tradeDate}}</text>
- <text class="time" v-if="tabType==1&&sitem.bizType=='REFUND'">退款时间:{{sitem.tradeDate}}</text>
- <text class="time" v-if="tabType==0">{{sitem.bizType=='ZERO'?'清零时间':'充值时间'}}:{{sitem.tradeDate}}</text>
- </view>
- <text class="amount">¥{{sitem.tradeAmount}}</text>
- </view>
- </view>
- </view>
- <view style="padding:0 30upx 30upx;">
- <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>
- <u-loadmore v-if="(total>=list.length&&list.length)||status=='loading'" :status="status" />
- </view>
- </view>
- </scroll-view>
- </view>
- </view>
- </template>
- <script>
- import {xprhStoreAccountFlowPage} from '@/api/recharge.js'
- import {
- mapState,
- mapMutations,
- } from 'vuex'
- export default {
- data() {
- return {
- status: 'loading',
- noDataText: '暂无数据',
- // 查询条件
- pageNo: 1,
- pageSize: 10,
- list: [],
- total: 0,
- tabType:0,
- lastMoth:''
- }
- },
- onLoad(opts){
- this.tabType = opts.type
- },
- onShow() {
- this.getRow(1)
- },
- computed: {
- ...mapState(['hasLogin']),
- // 登录用户信息
- userInfo(){
- return this.$store.state.vuex_userInfo
- },
- // 货架经销商信息
- shelfInfo(){
- return this.$store.state.vuex_storeShelf
- },
- maxNums(){
- let nums = 0
- this.list.forEach(item => {
- nums += item.list.length
- })
- return nums
- }
- },
- methods: {
- changeTab(type){
- this.tabType = type
- this.list = []
- this.lastMoth = ''
- this.getRow(1)
- },
- // 查询列表
- getRow (pageNo) {
- let _this = this
- this.status = "loading"
- // 0 充值,1 消费
- const params = {
- storeSn:this.shelfInfo.storeSn,
- bizTypeList:this.tabType==0 ? ['RECHARGE'] : ['SALES', 'REFUND'],
- accountType: ['RECHARGE','GIVE'][this.tabType]
- }
- xprhStoreAccountFlowPage({pageNo:this.pageNo,pageSize: this.pageSize,...params}).then(res => {
- if (res.status == 200) {
- const list = res.data&&res.data.list || []
- if(_this.pageNo>1){
- const fm = list[0] && list[0].tradeMonth
- // 如果相等,将数据拼接到上页去
- if(fm == _this.lastMoth){
- let preList = _this.list[_this.list.length-1].list
- preList = preList.concat(list[0].list)
- _this.list[_this.list.length-1].list = preList
- // 删除第一项
- list[0].list = []
- }
- console.log(list)
- _this.list = _this.list.concat(list.length?list.filter(item=>item.list.length):list)
- }else{
- _this.list = list
- }
- // 最后一条的月份
- _this.lastMoth = _this.list.length>0 ? _this.list[_this.list.length-1].tradeMonth : ''
- _this.total = res.data.count || 0
- } else {
- _this.list = []
- _this.total = 0
- _this.noDataText = res.message
- }
- _this.status = _this.total>=_this.maxNums ? "nomore" : 'loadmore'
- })
- },
- // scroll-view到底部加载更多
- onreachBottom() {
- if(this.maxNums < this.total){
- this.pageNo += 1
- this.getRow()
- }else{
- this.status = "nomore"
- }
- },
- }
- }
- </script>
- <style lang="less">
- .container {
- height: 100vh;
- display: flex;
- flex-direction: column;
- background-color: #f5f5f5;
- }
- .header {
- padding: 30px 10px 20px;
- display: flex;
- align-items: center;
- justify-content: center;
-
- > text {
- font-size: 16px;
- font-weight: bold;
- color: #333;
- margin: 0 10px;
- }
- .active{
- color: #ff0000;
- }
- }
- .scroll-content {
- height: calc(100vh - 90px);
- .month-list{
- padding: 0 15px;
- }
- }
- .month-card {
- margin-bottom: 15px;
- overflow: hidden;
- }
- .month-header {
- padding: 12px 0;
- display: flex;
- justify-content: space-between;
-
- .month-title {
- font-size: 16px;
- color: #333;
- font-weight: 500;
- }
-
- .month-total {
- font-size: 14px;
- color: #666;
- }
- }
- .record-list {
- padding: 0 15px;
- background-color: #fff;
- border-radius: 8px;
- }
- .record-item {
- padding: 12px 0;
- display: flex;
- justify-content: space-between;
- align-items: center;
- border-bottom: 1px solid #f0f0f0;
-
- &:last-child {
- border-bottom: none;
- }
-
- .item-left {
- display: flex;
- flex-direction: column;
- }
-
- .amount-label {
- font-size: 14px;
- color: #333;
- font-weight: bold;
- }
-
- .amount {
- font-size: 14px;
- color: #333;
- font-weight: 500;
- }
-
- .time {
- font-size: 12px;
- color: #999;
- margin-top: 5px;
- }
- }
- </style>
|