web-retail-h5/pages/mine/balance/withdrawal.vue

<template>
  <view class="content">
    <view class="theform">
      <u--form
        labelPosition="left"
        :model="dataForm"
        :rules="rules"
        ref="uForm"
      >
        <!-- <u-form-item
          label-width="200rpx"
          :label="'银行卡号'"
          prop="cardNumber"
          borderBottom
          ref="item1"
        >
          <u--input
            v-if="bankData.cardNumber"
            v-model="bankData.cardNumber"
            disabled
            disabledColor="#F5F5F5;"
            border="none"
          ></u--input>
          <view v-else style="color: red" @click="goBindbank">
            {{ '请先绑定银行卡' }}
          </view>
        </u-form-item> -->
        <u-form-item
          label-width="200rpx"
          :label="`${'提现金额'}(${isLocaled()})`"
          prop="cashAmount"
          borderBottom
          ref="item1"
        >
          <u--input
            type="number"
            v-model="dataForm.cashAmount"
            :placeholder="'请输入'"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          label-width="200rpx"
          :label="'二级密码'"
          prop="payPwd"
          borderBottom
          ref="item1"
        >
          <template v-if="!ifeye">
            <u--input
              type="password"
              v-model="dataForm.payPwd"
              :placeholder="'请输入'"
              border="none"
            ></u--input>
            <image
              @click="ifeye = !ifeye"
              slot="right"
              style="width: 38rpx; height: 25rpx"
              src="../../../static/images/my_eye.png"
              mode=""
            ></image>
          </template>
          <template v-if="ifeye">
            <u--input
              v-model="dataForm.payPwd"
              :placeholder="'请输入'"
              border="none"
            ></u--input>
            <image
              @click="ifeye = !ifeye"
              slot="right"
              style="width: 38rpx; height: 30rpx"
              src="../../../static/images/my_eye2.png"
              mode=""
            ></image>
          </template>
        </u-form-item>
        <u-form-item
          label-width="200rpx"
          :label="'备注'"
          prop="remarks"
          borderBottom
          ref="item1"
        >
          <u--input v-model="dataForm.remarks" border="none"></u--input>
        </u-form-item>
        <u-form-item
          label-width="200rpx"
          :label="'提现账户'"
          prop="pkAccountName"
          @click="showAmount = true"
          ref="item1"
        >
          <u--input
            v-model="dataForm.pkAccountName"
            disabled
            disabledColor="#ffffff"
            :placeholder="'请选择'"
            border="none"
          ></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-picker
          @cancel="showAmount = false"
          :show="showAmount"
          ref="uPicker"
          :columns="pkBdAccountList"
          @confirm="confirm"
          keyName="accountName"
        ></u-picker>
      </u--form>

      <view class="contentbox">
        <view class="linebox">
          <view>{{ '可提现金额' }}(￥)：</view>
          <view>{{ widthDrwaData.amount || '0.00' }}</view>
        </view>
        <view class="linebox">
          <view>{{ '账户余额' }}(￥)：</view>
          <view>{{ widthDrwaData.balance || '0.00' }}</view>
        </view>
        <view class="linebox">
          <view>{{ '提现手续费' }}：</view>
          <view>{{ widthDrwaData.srviceCharge || '0.00' }}</view>
        </view>
        <view class="linebox">
          <view>{{ '最低提现额度' }}(￥)：</view>
          <view>{{ widthDrwaData.minAmount || '0.00' }}</view>
        </view>
      </view>
    </view>
    <view class="btnbox">
      <u-button class="subbtn" @click="submit">{{ '提现' }}</u-button>
    </view>
    <u-toast ref="uToast"></u-toast>
    <!-- <u-modal
      :show="unBindDefaultModal"
      showCancelButton
      @cancel="unBindDefaultModal = false"
      cancelText="取消"
      confirmText="确定"
      @confirm="unBindDefaultConfirm"
    >
      请先绑定默认银行卡
    </u-modal> -->
    <!-- 提现引导弹窗 -->
    <WithdrawalGuide
      :show="showWithdrawalGuide"
      @confirm="onWithdrawalGuideConfirm"
    />
  </view>
</template>

<script>
import * as bal from '@/config/balance.js'
import { isLocaled } from '@/util/numberToCurrency'
import WithdrawalGuide from '@/components/withdrawalGuide/index.vue'

export default {
  components: {
    WithdrawalGuide,
  },
  data() {
    return {
      showAmount: false,
      dataForm: {
        cardNumber: '',
        cashAmount: '',
        payPwd: '',
        remarks: '',
        pkAccountName: '',
        pkAccount: '',
        pkBank: '',
      },
      pkBdAccountList: [],
      rules: {
        cashAmount: [
          {
            type: 'string',
            required: true,
            message: '请输入',
            trigger: ['blur', 'change'],
          },
        ],
        payPwd: [
          {
            type: 'string',
            required: true,
            message: '请输入',
            trigger: ['blur', 'change'],
          },
        ],
        pkAccountName: [
          {
            required: true,
            message: '请选择',
            trigger: ['change'],
          },
        ],
      },
      bankData: {},
      widthDrwaData: {},
      ifeye: false,
      canbind: true,
      showWithdrawalGuide: false,
      unBindDefaultModal: false,
    }
  },
  watch: {
    'dataForm.cashAmount': 'checkAccount',
  },
  onNavigationBarButtonTap() {
    uni.navigateTo({
      url: '/pages/mine/balance/withdrawlDetail',
    })
  },
  onShow() {
    this.getList()
  },
  methods: {
    isLocaled,
    //绑定银行卡
    goBindbank() {
      uni.navigateTo({
        url: '/pages/mine/bindBank/bindBank',
      })
    },
    getList() {
      bal
        .getPkBdAccountList({
          accountProperty: 3,
        })
        .then(res => {
          res.data.forEach(ele => {
            ele.name = ele.accountName
          })
          this.pkBdAccountList = [res.data]

          if (this.pkBdAccountList.length > 0) {
            this.dataForm.pkAccountName = res.data[0].accountName
            this.dataForm.pkAccount = res.data[0].pkId
          }
        })
      // bal.getDefaultBank().then(res => {
      //   if (res.data && Object.keys(res.data).length > 0) {
      //     this.bankData = res.data
      //     this.dataForm.pkBank = res.data.pkId
      //   } else {
      //     this.unBindDefaultModal = true
      //   }
      // })
    },
    unBindDefaultConfirm() {
      this.unBindDefaultModal = false
      uni.navigateTo({
        url: '/pages/mine/bindBank/index',
      })
    },
    submit() {
      this.$refs.uForm
        .validate()
        .then(res => {
          bal.addWithdraw(this.dataForm).then(res => {
            if (res.code == 200) {
              this.$refs.uToast.show({
                message: res.msg || '提现成功',
                type: 'success',
              })
              // setTimeout(() => {
              //   uni.navigateBack()
              // }, 500)

              // 显示提现引导弹窗
              setTimeout(() => {
                this.showWithdrawalGuide = true
              }, 300)
            }
          })
        })
        .catch(errors => {
          uni.$u.toast('校验失败')
        })
    },
    confirm(e) {
      this.dataForm.pkAccountName = e.value[0].accountName
      this.dataForm.pkAccount = e.value[0].pkId
      this.showAmount = false
      this.checkAccount()
    },
    checkAccount() {
      if (!this.dataForm.cashAmount) {
        uni.$u.toast('请先输入金额')
        return
      }
      bal
        .getWidthdrawShow({
          pkAccount: this.dataForm.pkAccount,
          cashAmount: this.dataForm.cashAmount,
        })
        .then(res => {
          this.widthDrwaData = res.data
        })
    },
    // 处理提现引导弹窗确认
    onWithdrawalGuideConfirm() {
      this.showWithdrawalGuide = false
      uni.navigateBack()
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  background: #f2f2f2;

  .theform {
    margin-top: 6rpx;
    background: #ffffff;
    padding: 20rpx 23rpx 48rpx 23rpx;

    .contentbox {
      background: rgba(251, 48, 36, 0.15);
      border-radius: 20rpx;
      padding: 35rpx 20rpx;
      margin-top: 20rpx;

      .linebox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        margin-top: 8rpx;
      }
    }
  }

  .btnbox {
    margin-top: 38rpx;
    padding: 0 20rpx;

    .subbtn {
      background: #005bac;
      border-radius: 46rpx;
      font-size: 30rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }
  }
}
</style>