leromro-mini/pages_mine/pages/withdrawal/detailsList.vue

<template>
  <view>
    <view class="u-page">
      <up-list @scrolltolower="scrolltolower">
        <up-list-item v-for="(item, index) in listData" :key="index">
          <view class="withdrawal-item">
            <view class="main-info">
              <view class="left-section">
                <up-avatar
                  shape="square"
                  size="35"
                  :src="item.url || ''"
                  customStyle="margin: -3px 5px -3px 0"
                ></up-avatar>
                <view class="info-content">
                  <view class="name-account">
                    <text class="name">支付宝姓名：{{ item.alipayName }}</text>
                    <text class="account">支付宝账户：{{ item.alipayAccountNo }}</text>
                  </view>
                  <view class="time">提现申请时间：{{ item.takeTime }}</view>
                </view>
              </view>
              <view class="right-section">
                <view class="amount-info">
                  <text class="amount-label">实发金额</text>
                  <text class="amount-value">¥{{ item.receiveAmount }}</text>
                </view>
                <view class="amount-info">
                  <text class="amount-label">应发金额</text>
                  <text class="amount-value">¥{{ item.shoudAmount }}</text>
                </view>
              </view>
            </view>
            <view class="bottom-section">
              <text class="detail-link" @click="goToDetail(item)">进入详情</text>
            </view>
          </view>
        </up-list-item>
      </up-list>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { getWithdrawStatus, volEetCancelTake } from '@/api/mine'

const listData = ref([])
const getDetails = async () => {
  try {
    const res = await getWithdrawStatus()
    console.log('提现列表数据:', res)
    if (res.code == 200) {
      listData.value = res.rows || []
    } else {
      uni.showToast({
        title: res.msg || '获取数据失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('获取提现列表失败:', error)
    uni.showToast({
      title: '获取数据失败',
      icon: 'none'
    })
  }
}

const goToDetail = (item) => {
  // 跳转到详情页，传递完整的数据
  uni.navigateTo({
    url: `/pages_mine/pages/withdrawal/details?data=${encodeURIComponent(JSON.stringify(item))}`
  })
}

onMounted(() => {
  getDetails()
})
</script>

<style lang="scss" scoped>
.withdrawal-item {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  margin: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.main-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.left-section {
  display: flex;
  flex: 1;
  gap: 20rpx;
}

.info-content {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.name-account {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.account {
  font-size: 24rpx;
  color: #666;
}

.time {
  font-size: 24rpx;
  color: #999;
}

.right-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10rpx;
}

.amount-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.amount-label {
  font-size: 24rpx;
  color: #999;
}

.amount-value {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.bottom-section {
  display: flex;
  justify-content: flex-end;
  border-top: 1rpx solid #f5f5f5;
  padding-top: 20rpx;
}

.detail-link {
  color: #2979ff;
  font-size: 28rpx;
  padding: 10rpx 20rpx;
}
</style>