mall-app-t/pages/user/wallet/withdraw.vue

<template>
  <pb-layout navbar="normal" class="withdraw-wrap" leftIcon="leftIcon" title="提现" :bgStyle="bgStyle">
    <view class="alert ss-m-x-40 ss-m-y-20"> 提现至 </view>
    <view class="method ss-m-x-40 ss-flex ss-col-center ss-row-between">
      <view class="left ss-flex ss-gap-20 ss-col-center">
        <view class="cicon-weixin" style="color: #2f9326; font-size: 60rpx"></view>
        <view class="info">
          <view class="label">微信</view>
          <view class="note ss-m-t-10">极速到账</view>
        </view>
      </view>
      <!-- <view class="cicon-angle m-t-40"></view> -->
    </view>
    <view class="detail ss-m-40 ss-p-30">
      <view class="label ss-m-b-50">提现金额</view>
      <view class="account ss-m-t-15 ss-m-b-20 ss-flex ss-row-between">
        <uni-easyinput
          v-model="formData.amount"
          :styles="{ backgroundColor: 'transparent' }"
          :clearable="false"
          :inputBorder="false"
          type="digit"
          trim="all"
          placeholder="请输入提现金额"
        />
        <view class="all self-end" @click="allWithdraw">全部提现</view>
      </view>
      <view class="note ss-flex ss-row-between">
        <view class="last"> 最低提现金额￥{{ config?.takingRule }} </view>
        <view class="can-use"> 余额￥{{ fen2yuan(remain) }} </view>
      </view>
      <view class="last">
        提现费率{{ config?.takingRate }} 即每提现 1000 元扣除手续费￥{{ 1000 * config?.takingRate }}
      </view>
    </view>

    <view class="footer-box">
      <button class="ss-reset-button draw-btn ui-Shadow-Main" @tap="onSubmit">提现</button>
    </view>
  </pb-layout>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { fen2yuan } from '@/peach/hooks/useGoods'
import peach from '@/peach'
import WalletApi from '@/peach/api/pay/wallet'

const bgStyle = {
  backgroundColor: '#fff',
  description: '',
}

const config = ref(null)

const userStore = peach.$store('user')

const remain = computed(() => {
  return userStore.userWallet?.balance
})

const formData = ref({
  amount: 0,
})

async function getWithdrawConfig() {
  let res = await WalletApi.withdrawConfig()
  config.value = res.data
}

function allWithdraw() {
  formData.value.amount = fen2yuan(remain.value)
}

async function onSubmit() {
  if (!formData.value.amount || formData.value.amount <= 0) {
    peach.$helper.toast('请输入正确的金额')
    return
  }
  try {
    await WalletApi.withdraw({
      amount: formData.value.amount * 100,
    })
    setTimeout(() => {
      peach.$router.back()
    }, 1000)
  } catch (e) {
    console.log(e)
  }
}

onLoad(() => {
  getWithdrawConfig()
})
</script>

<style lang="scss" scoped>
.withdraw-wrap {
  .alert {
    font-size: 26rpx;
  }

  .method {
    .left {
      .info {
        font-size: 26rpx;

        .note {
          color: #b5b5b5;
        }
      }
    }
  }

  .detail {
    background-color: rgba(236, 236, 236, 0.3);
    border-radius: 20rpx;

    .label {
      color: #000;
      font-size: 26rpx;
    }

    .account {
      :deep(.uni-easyinput__content-input) {
        font-size: 28px;
      }

      .all {
        width: 150rpx;
        text-align: right;
        color: var(--ui-BG-Main);
        font-size: 26rpx;
      }
    }

    .account::before {
      content: '￥';
      font-size: 48rpx;
      color: #333;
    }

    .note {
      color: #a3a3a3;
      font-size: 26rpx;
    }

    .last {
      color: #a3a3a3;
      font-size: 26rpx;
      margin-top: 5px;
    }

    .can-use {
      color: #333;
      font-size: 26rpx;
    }
  }

  .footer-box {
    position: absolute;
    padding: 0 40rpx;
    width: calc(100% - 80rpx);
    bottom: 60rpx;

    .draw-btn {
      height: 80rpx;
      border-radius: 40rpx;
      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
      color: $white;
    }
  }
}
</style>