104 lines
2.5 KiB
Vue
104 lines
2.5 KiB
Vue
<template>
|
|
<tabbar :titles='["全部","充值","消费"]' @change='changeTab' :item-active-color='"#D95554"'
|
|
:indicator-color='"#D95554"' />
|
|
<view class='content'>
|
|
<!-- <view class='c-flex-row'>-->
|
|
<!-- <text>选择日期</text>-->
|
|
<!-- <picker mode='date' @change='changeDate'>-->
|
|
<!-- <view class='current-date c-flex-row'>-->
|
|
<!-- <text>{{ tradeDate }}</text>-->
|
|
<!-- <image :src='assetsUrl("ic_triangle_down.png")' />-->
|
|
<!-- </view>-->
|
|
<!-- </picker>-->
|
|
<!-- </view>-->
|
|
|
|
<u-list @scrolltolower='loadMore'>
|
|
<trade-item v-for='(item,index) in tradeList' :key='index' :item='item' />
|
|
<u-loadmore v-if='tradeList.length>0' :status='loadingStatus' />
|
|
<u-empty v-if='tradeList.length === 0' text='暂无数据' margin-top='100' />
|
|
</u-list>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang='ts' setup>
|
|
import TradeItem from './components/trade-item.vue';
|
|
import { getTradeList } from '@/api/user';
|
|
import dayjs from 'dayjs';
|
|
|
|
const tradeList = ref([]);
|
|
const tradeType = ref('');
|
|
const tradeDate = ref();
|
|
const currentPageNum = ref(1);
|
|
const loadingStatus = ref('loading');
|
|
|
|
onLoad((e) => {
|
|
tradeDate.value = dayjs(Date.now()).format('YYYY-MM-DD');
|
|
fetchData();
|
|
});
|
|
|
|
const changeDate = (e: any) => {
|
|
tradeDate.value = e.detail.value;
|
|
fetchData();
|
|
};
|
|
|
|
const changeTab = (index: number) => {
|
|
switch (index) {
|
|
case 0:
|
|
tradeType.value = '';
|
|
break;
|
|
case 1:
|
|
tradeType.value = '会员充值';
|
|
break;
|
|
case 2:
|
|
tradeType.value = '余额消费';
|
|
break;
|
|
}
|
|
fetchData();
|
|
};
|
|
|
|
const fetchData = async (refresh: boolean = true) => {
|
|
currentPageNum.value = refresh ? 1 : currentPageNum.value + 1;
|
|
loadingStatus.value = 'loading';
|
|
const { list } = await getTradeList({
|
|
// startDate: tradeDate.value,
|
|
// endDate: dayjs(tradeDate.value).add(1, 'day').format('YYYY-MM-DD'),
|
|
name: tradeType.value,
|
|
pageNum: currentPageNum.value,
|
|
pageSize: 20
|
|
});
|
|
if(refresh) {
|
|
tradeList.value = list;
|
|
} else {
|
|
tradeList.value = tradeList.value.concat(list);
|
|
}
|
|
loadingStatus.value = 'no';
|
|
};
|
|
|
|
const loadMore = () => {
|
|
fetchData(false);
|
|
};
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
.content {
|
|
padding: 20rpx 24rpx;
|
|
}
|
|
|
|
.current-date {
|
|
height: 50rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 5rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
padding: 0 20rpx;
|
|
margin-left: 10rpx;
|
|
|
|
image {
|
|
width: 19rpx;
|
|
height: 11rpx;
|
|
margin-left: 15rpx;
|
|
}
|
|
}
|
|
</style>
|