kailin_mp/pages/balance/index.vue

<template>
  <view class="balance">
    <!-- <view class="date_picker">
      <picker mode="date" :value="selectedDate" fields="month" @change="_bindDateChange">
        <view>{{ formattedDate }}</view>
      </picker>
    </view> -->
    <view class="balance_content">
      <view class="balance_content_main">
        <view style="display: flex">
          <view class="price_content" style="margin-right: 45rpx">
            <text class="title">当前余额（元）</text> <text>{{ Number(userInfo.amount || 0).toFixed(2) }}</text></view
          >
          <view class="price_content">
            <text class="title">已成功提现（元）</text> <text>{{ Number(userInfo.transfer_amount || 0).toFixed(2) }}</text></view
          >
        </view>
        <view class="withdraw_btn" @click="_goWithdraw">兑现</view>
      </view>
    </view>
    <view class="balance_list">
      <!-- <view class="balance_date">2025年1月</view> -->
      <view class="balance_item" @click="_goDetail(item.id)" v-for="(item, index) in balanceList" :key="item.id">
        <view class="balance_item_fix">
          <view class="balance_item_left">
            <view style="margin-bottom: 10rpx"
              >{{ item.type_state }}
              <text v-if="item.state" style="font-size: 20rpx"> （{{ item.state }}） </text>
            </view>
            <view>{{ item.insert_time }}</view>
          </view>
          <view class="balance_item_right">
            <view class="price">{{ item.prefix == 1 ? '+' : '-' }}{{ item.amount }}</view>
            <view>余额：{{ item.balance }}</view>
          </view>
        </view>
        <view class="alter_info" v-if="item.buy_type == 2 && item.status == 1">若提现不成功，将在24小时内返回您的余额，可重新提现</view>
      </view>
    </view>
    <Empty v-if="balanceList.length == 0 && !isReqing" text="----- 还没有记录啦 -----" />
    <view class="to_bottom" v-if="isLast && balanceList.length"> -----到底啦-----</view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import Empty from '@/components/Empty/Empty.vue';
import http from '@/utils/request';

const selectedDate = ref('请选择日期');
const balanceList = ref([]);
const page = ref(1);
const pageSize = ref(15);
const isLast = ref(false);
const isReqing = ref(false);
const userInfo = ref({
  amount: 0,
  transfer_amount: 0,
});

const _bindDateChange = (e) => {
  selectedDate.value = e.detail.value;
};

onMounted(() => {
  _getBalacnelist();
  _getUserInfo();
});

const _goDetail = (record_id) => {
  uni.navigateTo({
    url: `/pages/balance/detail?record_id=${record_id}`,
  });
};

const _getBalacnelist = async () => {
  if (isReqing.value) return;
  isReqing.value = true;

  try {
    const callback = await http.request('api/custom_amount/get_record_list', {
      page: page.value,
      limit: pageSize.value,
    });
    if (callback.code == 'success') {
      if (callback.data.last_page <= page.value) isLast.value = true;
      const balanceListData = callback.data.data || [];
      balanceList.value = [...balanceList.value, ...balanceListData];
    }
  } finally {
    isReqing.value = false;
  }
};

const _getUserInfo = async () => {
  try {
    const callback = await http.request('api/custom/get_info');
    if (callback.code == 'success') {
      // 赋值
      userInfo.value = callback.data;
      // 存储登录标识
      uni.setStorageSync('userInfo', callback.data);
    }
  } catch (error) {
    console.log(error);
  }
};

onReachBottom(async () => {
  console.log('上拉加载');
  if (isLast.value || isReqing.value) return;
  page.value += 1;
  await _getBalacnelist();
});

onPullDownRefresh(async () => {
  page.value = 1;
  balanceList.value = [];
  isLast.value = false;
  await _getBalacnelist();
  uni.stopPullDownRefresh();
});

const formattedDate = computed(() => {
  if (selectedDate.value === '请选择日期') {
    return selectedDate.value;
  }
  const [year, month] = selectedDate.value.split('-');
  return `${year}年${parseInt(month)}月`;
});

const _goWithdraw = () => {
  // #ifdef MP-WEIXIN
  uni.navigateTo({
    url: '/pages/user/withdraw',
  });
  // #endif
  // #ifdef H5
  uni.showModal({
    title: '温馨提示',
    content: '请前往小程序兑现',
    showCancel: false,
  });
  // #endif
};
</script>

<style scoped lang="less">
.balance {
  padding: 36rpx;
  box-sizing: border-box;
  width: 100vw;
  .balance_content {
    margin-bottom: 20rpx;
    padding: 35rpx;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 20rpx;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    .balance_content_main {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .price_content {
        display: flex;
        flex-direction: column;
        > .title {
          font-size: 24rpx;
          margin-bottom: 15rpx;
        }
      }
      .withdraw_btn {
        color: #ffffff;
        background-color: #f89c33;
        border-radius: 60rpx;
        padding: 10rpx 20rpx;
        width: 90rpx;
        text-align: center;
        line-height: 40rpx;
      }
    }
  }
  .date_picker {
    padding: 0 16rpx;
    border: 1px solid #e5e5e5;
    width: 250rpx;
    height: 60rpx;
    line-height: 60rpx;
    margin-bottom: 40rpx;
  }

  .balance_list {
    .balance_date {
      font-weight: bold;
      padding-bottom: 20rpx;
      border-bottom: 2rpx solid #ddd;
    }
    .balance_item {
      border-bottom: 1px solid #ddd;
      padding-bottom: 20rpx;
      .balance_item_fix {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .balance_item_left,
        .balance_item_right {
          display: flex;
          flex-direction: column;
          font-size: 26rpx;
          padding-top: 20rpx;
        }

        .balance_item_right {
          align-items: flex-end;

          > .price {
            font-weight: bold;
            margin-bottom: 10rpx;

            &.red {
              color: #ff0000;
            }

            &.green {
              color: #00ff00;
            }
          }
        }
      }
    }

    .alter_info {
      display: block;
      color: #f89c33;
      font-size: 20rpx;
      overflow: hidden;
      margin: 0rpx auto;
      line-height: 40rpx;
      padding: 5rpx 0rpx;
    }
  }
}
</style>