功能完善

src/pages/mine/subs/trade/index.vue

@@ -6,7 +6,7 @@
       <text>选择日期</text>
       <picker mode='date' @change='changeDate'>
         <view class='current-date c-flex-row'>
-          <text>2024-02-10</text>
+          <text>{{ tradeDate }}</text>
           <image :src='assetsUrl("ic_triangle_down.png")' />
         </view>
       </picker>
@@ -14,6 +14,7 @@
 
     <u-list @scrolltolower='loadMore'>
       <trade-item v-for='(item,index) in tradeList' :key='index' :item='item' />
+      <u-loadmore status='loading' />
     </u-list>
   </view>
 </template>
@@ -21,20 +22,53 @@
 <script lang='ts' setup>
 import { assetsUrl } from '@/utils/assets';
 import TradeItem from './components/trade-item.vue';
+import { getTradeList } from '@/api/user';
+import dayjs from 'dayjs';
 
-const tradeList = ref([1, 2, 3, 4, 5]);
+const tradeList = ref([]);
+const tradeType = ref('全部');
+const tradeDate = ref();
 const currentPageNum = ref(1);
 
-const changeDate = () => {
+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 = (refresh: boolean = true) => {
+const fetchData = async (refresh: boolean = true) => {
   currentPageNum.value = refresh ? 1 : currentPageNum.value + 1;
+  const { list } = await getTradeList({
+    startDate: tradeDate.value,
+    endDate: tradeDate.value,
+    name: tradeType.value,
+    pageNum: currentPageNum.value,
+    pageSize: 20
+  });
+  if(refresh) {
+    tradeList.value = list;
+  } else {
+    tradeList.value = tradeList.value.concat(list);
+  }
 };
 
 const loadMore = () => {
@@ -60,7 +94,7 @@ const loadMore = () => {
   image {
     width: 19rpx;
     height: 11rpx;
-    margin-left: 57rpx;
+    margin-left: 15rpx;
   }
 }
 </style>