leromro-mini/pages_mine/pages/income/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 }}</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> -->
          <up-steps :current="current" direction="column" dot>
          <up-steps-item title="发起提现" :desc="data?.createTime">
          </up-steps-item>
          <up-steps-item
            :title="`后台处理中（${statusText}）`"
            :desc="data?.appTime"
          ></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-if="data?.appStatus === '4'"
            error
          ></up-steps-item> -->
          <up-steps-item
            :title="`打款状态 (${appStatusText})`"
            :desc="data?.payTime"
            v-if="statusText === '审核通过'"
          ></up-steps-item>

          <!-- <up-steps-item
            title="打款失败（退回余额）"
            v-if="data?.isPay === '2'"
            error
          ></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.js'
import DictTag from '@/components/DictTag/index.vue'
import { useDict } from '@/utils/dict.js'
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,
})

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

const statusText = computed(() => {
  switch (data.value?.appStatus) {
    case '1':
      return '待审核'
    case '2':
      return '审核通过'
    case '3':
      return '审核未通过'
    case '4':
      return '已撤销'
    default:
      return ''
  }
})

const appStatusText = computed(() => {
  switch (data.value?.isPay) {
    case '1':
      return '未打款'
    case '2':
      return '打款成功'
    case '3':
      return '打款失败'
    case '4':
      return '打款驳回'
    default:
      return ''
  }
})

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: id.value
        }
        const res = await volEetCancelTake(params)
        if (res.code === 200) {
          setTimeout(() => {
          uni.showToast({
            title: res.msg,
          })
        }, 1500)
          uni.navigateBack({
            delta: 1,
          })
          
        } else {
          uni.showToast({
            title: '撤销提现失败',
          })
        }
      }
    }
  })
}

onLoad((options) => {
  console.log('TCL: options', options)
  id.value = options.sourceId
  getDetails()
})
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>