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

<template>
  <scroll-view
    refresher-enabled
    :refresher-triggered="isRefreshing"
    @refresherrefresh="onCustomRefresh"
    class="details-main"
    @scrolltolower="scrolltolower"
    scroll-y
  >
    <view class="header-box flex_c_c_f hr-solid">
      <view class="price-img"></view>
      <view class="header-title">余额提现-到支付宝</view>
      <view class="header-price">¥{{ data?.takeAmount || 0.0 }}</view>
    </view>
    <view class="stauts-box hr-solid">
      <view class="font-30-333 stauts-text">当前状态</view>
      <view>
        <up-steps :current="current" direction="column" dot>
          <up-steps-item title="发起提现" :desc="data?.createTime">
          </up-steps-item>
          <up-steps-item
            title="已驳回"
            :desc="data?.rejectReason"
            v-if="data?.appStatus === '3'"
            error
          ></up-steps-item>
          <up-steps-item
            title="后台处理中"
            :desc="data?.updateTime"
            v-else
          ></up-steps-item>
          <up-steps-item
            title="打款失败"
            v-if="data?.isPay === '2'"
            error
          ></up-steps-item>
          <up-steps-item
            title="到账"
            :desc="data?.lastTime"
            v-if="['1', '0'].includes(data?.isPay)"
          ></up-steps-item>
        </up-steps>
      </view>
    </view>
    <view class="list-box">
      <view v-for="item in list" :key="item.key" class="list-item">
        <view class="font-30-333 list-name">{{ item.name }}</view>
        <view class="font-30-333" v-if="item.type === 'value'"> 支付宝 </view>
        <view class="font-30-333" v-else>{{ data?.[item.key] || '-' }}</view>
      </view>
    </view>
    <button @click="handlClick" class="btn-cancel">撤销提现</button>
  </scroll-view>
</template>

<script setup>
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getIncomeDetails, volEetCancelTake } from '@/api/mine'

const isRefreshing = ref(false)
const list = [
  {
    name: '提现金额',
    key: 'shoudAmount',
  },
  {
    name: '提现账户',
    key: 'alipayName',
  },
  {
    name: '提现账号',
    key: 'alipayAccountNo',
  },
  {
    name: '申请时间',
    key: 'createTime',
  },
  {
    name: '到账时间',
    key: 'lastTime',
  },
  {
    name: '打款方式',
    key: 'payType',
    type: 'value',
  },
  // {
  //     name: '提现单号',
  //     key: 'volunteerTakeRecordId'
  // },
]

const id = ref(null)
const data = ref({
  alipayName: '**',
  createTime: '',
  takeAmount: 0.0,
  appStatus: '',
  isPay: '',
  updateTime: '',
  lastTime: '',
  shoudAmount: '',
  alipayAccountNo: '',
})

const current = computed(() => {
  if (
    ['3', '1'].includes(data.value?.appStatus) ||
    ['0'].includes(data.value?.isPay)
  ) {
    return 1
  }
  return 2
})

const onCustomRefresh = () => {
  getDetails()
}

const scrolltolower = () => {
  console.log('scrolltolower')
}

// const getDetails = async () => {
//   try {
//     isRefreshing.value = true
//     const res = await getIncomeDetails(id.value)
//     if (res.code !== 200) {
//       throw res.msg || '账单详情获取失败！'
//     }
//     data.value = res.data || {}
//   } catch (error) {
//     console.log('TCL: getDetails -> error', error)
//     uni.showToast({
//       title: error.message || error,
//       icon: 'none',
//     })
//   } finally {
//     isRefreshing.value = false
//   }
// }

// 撤销提现
const handlClick = async () => {
  uni.showModal({
    title: '提示',
    content: '确认要撤销此次提现吗？',
    success: async function (res) {
      if (res.confirm) {
        const params = {
          volunteerTakeRecordId: data.value?.volunteerTakeRecordId
        }
        const res = await volEetCancelTake(params)
        if (res.code === 200) {
          uni.showToast({
            title: '撤销提现成功',
          })
          uni.navigateBack({
            delta: 1,
          })
        } else {
          uni.showToast({
            title: res.msg || '撤销提现失败',
            icon: 'none'
          })
        }
      }
    },
  })
}

onLoad((options) => {
  console.log('TCL: options', options)
  if (options.data) {
    try {
      data.value = JSON.parse(decodeURIComponent(options.data))
    } catch (error) {
      console.error('解析数据失败:', error)
      uni.showToast({
        title: '数据解析失败',
        icon: 'none'
      })
    }
  }
})
</script>

<style scoped lang="scss">
.details-main {
  padding: 20rpx;

  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0;
  background: #fff;

  overflow: hidden;
  overflow-y: auto;
}

.header-box {
  margin-top: 48rpx;
  padding: 24rpx 0;

  .price-img {
    width: 140rpx;
    height: 140rpx;
    background-image: url(data:image/png;base64,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);
    background-position: center;
    background-size: 140rpx auto;
    background-repeat: no-repeat;
  }

  .header-title {
    font-family: PingFang SC;
    font-size: 32rpx;
    font-weight: normal;
    line-height: 32rpx;
    letter-spacing: normal;
    color: #000000;
    padding: 20rpx 0 30rpx;
  }

  .header-price {
    font-family: PingFang SC;
    font-size: 34rpx;
    font-weight: bold;
    line-height: 48rpx;
    letter-spacing: normal;
    color: #3d3d3d;
  }
}

.stauts-box {
  padding: 23rpx 0;
  display: flex;

  .stauts-text {
    margin-right: 44rpx;
  }
}

.list-box {
  padding: 23rpx 0;

  .list-item {
    display: flex;
    padding: 16rpx 0;
    .list-name {
      width: 150rpx;
    }
  }
}

.btn-cancel {
  background: red;
  color: #fff;
  border-radius: 50rpx;
  padding: 10rpx 20rpx;
  margin-top: 20rpx;
}
</style>