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

<template>
  <view class="withdrawal-main">
    <view class="withdrawal-item">
      <label class="withdrawal-label">提现到账</label>
      <view class="withdrawal-item-right" @click="openSheet">
        <view class="withdrawal-text">{{ w_key }}</view>
        <up-icon name="arrow-right"></up-icon>
      </view>
    </view>
    <view class="withdrawal-item">
      <label class="withdrawal-label">本人支付宝账号提现</label>
      <view class="withdrawal-item-right" @click="openSheetNumber">
        <view class="withdrawal-text">{{ s_key }}</view>
        <up-icon name="arrow-right"></up-icon>
      </view>
    </view>
    <view v-if="w_key === '支付宝账户'">
      <view class="withdrawal-item">
        <label class="withdrawal-label">支付宝姓名</label>
      </view>
      <view class="price-box">
        <input
          class="price-input2"
          placeholder="请输入支付宝姓名"
          border="none"
          v-model="priceData.name"
        />
      </view>
      <view class="withdrawal-item">
        <label class="withdrawal-label">支付宝户名</label>
      </view>
      <view class="price-box">
        <input
          class="price-input2"
          placeholder="请输入支付宝户名"
          border="none"
          v-model="priceData.code"
        />
      </view>

      <view v-show="s_key === '他人支付宝账号提现'">
        <view class="withdrawal-item">
          <label class="withdrawal-label">身份证号</label>
        </view>
        <view class="price-box">
          <input
            class="price-input2"
            placeholder="请输入身份证号"
            border="none"
            v-model="priceData.idCard"
          />
        </view>
      </view>
    </view>

    <view class="withdrawal-item">
      <label class="withdrawal-label">提现金额</label>
    </view>
    <view class="price-box">
      <up-icon name="rmb" size="28" color="rgba(0, 0, 0, 1)"></up-icon>
      <input
        class="price-input"
        placeholder="请输入提现金额"
        border="none"
        v-model="priceData.price"
        @change="change"
      />
    </view>
    <view class="withdrawal-item">
      <label class="withdrawal-label"
        >可提现余额 <up-icon name="rmb"></up-icon>{{ maxPrice }}</label
      >
      <view class="withdrawal-item-right" @click="onMaxChange">
        <view class="withdrawal-text">全部提现</view>
      </view>
    </view>

    <view style="margin-top: 45px">
      <up-button type="primary" text="确定提现" @click="onSubmit"></up-button>
    </view>

    <up-action-sheet
      :show="show"
      @close="close"
      @select="select"
      :actions="actions"
    >
    </up-action-sheet>
    <up-action-sheet
      :show="showNumber"
      @close="close"
      @select="selectNumber"
      :actions="actionsProxy"
    ></up-action-sheet>
  </view>
</template>

<script setup>
import { ref, relative } from 'vue'
import {
  getVolunteerAccountInfo,
  getAccountInfo,
  submitAmountApply,
} from '@/api/mine'
import { onShow } from '@dcloudio/uni-app'
import row from 'uview-plus/components/u-row/row'
const actions = [
  {
    name: '支付宝账户',
  },
]

const actionsProxy = [
  {
    name: '本人支付宝账号提现',
    value: 1,
  },
  {
    name: '他人支付宝账号提现',
    value: 2,
  },
]
const userType = uni.getStorageSync('userType') //读取本地存储
const w_key = ref('支付宝账户')
const s_key = ref('本人支付宝账号提现')
const show = ref(false)
const showNumber = ref(false)
const maxPrice = ref(0)

const priceData = ref({
  // price: '0.01',
  // name: '搁置',
  // code: '18696601943'

  price: '',
  name: '',
  code: '',
  idCard: '',
})

const change = (e) => {
  console.log('change', e)
  const regex = /^\d*\.?\d*$/
  if (!regex.test(e.detail.value)) {
    priceData.value.price = priceData.value.price.replace(/[^\d.]/g, '')
  }
}

const openSheet = (index) => {
  show.value = true
}

const openSheetNumber = (index) => {
  showNumber.value = true
}

const close = () => {
  show.value = false
  showNumber.value = false
}
const select = (row) => {
  w_key.value = row.name
  console.log('select', row)
}

const selectNumber = (row) => {
  s_key.value = row.name
  console.log('selectNumber', row)
}

const errors = (e) => {
  uni.showToast({
    title: e,
    icon: 'none',
  })
}

const handleCheck = () => {
  const is =
    priceData.value.price &&
    priceData.value.price > 0 &&
    priceData.value.name &&
    priceData.value.code
  if (is) {
    return true
  }
  !priceData.value.price && errors('请输入提现金额')
  priceData.value.price <= 0 && errors('请输入正确的金额')
  !priceData.value.name && errors('请输入账户名')
  !priceData.value.code && errors('请输入账号')
  return false
}
const onSubmit = () => {
  console.log('TCL: priceData', priceData.value)
  // init();

  const type = handleCheck()

  type &&
    submitAmountApply({
      takeAmount: priceData.value.price,
      alipayName: priceData.value.name,
      alipayAccountNo: priceData.value.code,
      payType: '2',
      alipayAccountType: s_key.value === '本人支付宝账号提现' ? 1 : 2,
      idCard: priceData.value.idCard,
    }).then((res) => {
      if (res.code === 200) {
        uni.showToast({
          title: '提交成功',
          icon: 'success',
        })
        setTimeout(() => {
          uni.redirectTo({ url: `/pages_mine/pages/wallet/index` })
        }, 800)
      }
    })
}

const onMaxChange = () => {
  priceData.value.price = maxPrice.value
}

const init = async () => {
  try {
    uni.showLoading({
      title: '数据加载中...',
    })

    if (userType === 2) {
      const res = await getVolunteerAccountInfo()
      maxPrice.value = res.data.balance
    }
    if (userType === 1) {
      const res = await getAccountInfo()
      maxPrice.value = res.data.balance
    }
  } catch (error) {
    console.log('error', error)
    uni.showToast({
      title: error.msg,
      icon: 'error',
    })
  } finally {
    uni.hideLoading()
  }
}

onShow(() => {
  init()
})
</script>

<style lang="scss" scoped>
.withdrawal-main {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: #fff;
  padding: 0 12px;

  .withdrawal-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;

    .withdrawal-label {
      font-size: 14px;
      font-weight: 500;
      line-height: 20.27px;
      color: rgba(153, 153, 153, 1);

      display: flex;
      align-items: center;
    }

    .withdrawal-item-right {
      display: flex;
      align-items: center;

      .withdrawal-text {
        font-size: 16px;
        font-weight: 700;
        line-height: 23.17px;
        color: rgba(0, 0, 0, 1);
        margin-right: 6px;
      }
    }
  }

  .price-box {
    display: flex;

    .price-input {
      flex: 1;
      height: 58px;
      padding: 0 12px;
      font-size: 28px;
    }
    .price-input2 {
      flex: 1;
      height: 38px;
      padding: 0 12px;
      font-size: 16px;
    }
  }
}
</style>