proginn-frontend/pages/otherpage/money/withdraw.vue

<template>
  <div class="withdraw">
    <div class="tabBankCard">
      <div class="left">提现到</div>
      <div class="right" @click="onJumpToBankSetting">
        <div class="word">{{
            bankInfo.card_number_format ? `银行卡尾号(${bankInfo.card_number_format})` : '设置银行卡'
          }}</div>
        <div class="iconRight"></div>
      </div>
    </div>

    <div class="setAmount">
      <div class="stitle">提现金额</div>
      <div class="amountArea">
        <div class="left">
          <div class="pre">¥</div>
          <input class="nums" v-model="vCoins" placeholder="最少提现10元，每日上限3万元" type="number" />
        </div>
        <div class="rightClose"  @click="vCoins=''"></div>
      </div>
      <div class="line"></div>
      <div class="amountBottom">
        <div class="leftMoney">余额 <span>￥{{accountInfo.incomeTaxBalance || 0}}</span></div>
        <div class="rightBtn" @click="onSetAllMoney">全部提现</div>
      </div>
    </div>

    <div class="taxScheme">
      <div class="stitle">选择缴税方案</div>
      <div class="sdesc">已默认为您选择最低费率缴税方案</div>
      <div class="schemeList">
        <div class="cell" v-for="item in list" :key="item.id">
          <div class="leftChoose" :class="{ok: item.id === selectedId}" @click="changeSelected(item)"></div>
          <div class="rightContent">
            <div class="taxTop">
              <div class="topLeft">{{item.config_key}}</div>
              <div class="topRight" v-if="item.is_auto != 1">选则扣税方式即表示您同意
                <a :href="`/otherpage/proto/money?id=${item.id}`">《{{item.config_key}}服务协议》</a></div>
              <div class="topRight" v-else>
                <span @click="onJumpToUpload">{{!fpUrl ? '去上传电子发票' : '已上传电子发票'}}</span>
              </div>
            </div>
            <div class="taxContent">代缴综合费率{{item.kaifabao_rate}}%, 预计到账￥{{calcOkMoney(item)}}元</div>
          </div>
        </div>
      </div>
    </div>

    <div class="submitBtn" @click="submitCommit">
      <p>确认提现</p>
    </div>

    <div class="wTips">
      预计3-5个工作日到账
    </div>

    <div class="intro">
      <div class="stitle">提现说明</div>
      <div class="sdesc">1.自行提供发票，只支持上传电子发票</div>
      <div class="sdesc">2.请确认银行卡账号和实名认证信息保持一致，如需修改银 行卡账号，请前往 <a href="">设置银行卡信息</a></div>
      <div class="sdesc">3.提现成功后，会在3-5个工作日内到账，节假日可能会稍有 延时，请耐心等待，如长时间未到账( 超过5个工作日),可联系 <a href="">在线客服</a></div>
    </div>

    <div ref="testArea" class="testArea">

    </div>
  </div>
</template>

<script>
  export default {
    name: "Withdraw",
    showCommonFooter: false,
    head() {
      let obj = {
        title: "领薪宝",
        meta: [{
          name: 'viewport',
          content: 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover'
        }]
      }
      return obj
    },
    async asyncData({ app }) {
      return {
        mobile: app.$deviceType.isMobile()
      }
    },
    data() {
      return {
        accountInfo: {},
        bankInfo: {},
        list: [],
        vCoins: '',
        fpUrl: '',
        selectedId: -1
      }
    },
    computed: {
      selectedItem() {
        return this.list.filter(v=>v.id === this.selectedId)[0] || {}
      }
    },
    watch: {
      vCoins: {
        immediate: true,
        handler(newVal) {
          this.vCoins = Math.min(newVal, 30000)
          this.vCoins = Math.floor(this.vCoins * 100) / 100
        }
      }
    },
    created() {
      const {vCoins='', fpUrl=''} = this.$route.query || {}
      this.vCoins = vCoins
      this.fpUrl = fpUrl
      this.getAccountBalanceInfo()
      this.getAccountBankAccountInfo()
      this.getWithdrawType()
    },
    mounted() {
      console.log("testArea", this.$refs.testArea)
    },
    methods: {
      calcOkMoney(item) {
        return Math.floor(this.vCoins * (100 - item.kaifabao_rate)) / 100
      },
      getWithdrawType() {
        this.$axios.post('/api/kaifabao/getBuckleConfigList').then(res => {
          if (Number(res.data.status) === 1) {
            let data = res.data.data
            this.list = data.list
          }
        }).catch(e => {
          console.log(e)
        })
      },
      getAccountBalanceInfo() {
        this.$axios.post('/api/account/getBalance').then(res => {
          if (Number(res.data.status) === 1) {
            let data = res.data.data
            this.accountInfo = data
          }
        }).catch(e => {
          console.log(e)
        })
      },
      getAccountBankAccountInfo() {
        this.$axios.post('/api/account/get_bank_account_info').then(res => {
          if (Number(res.data.status) === 1) {
            let data = res.data.data
            if (data.exist_info) {
              data.info.card_number_format = data.info.card_number.slice(-4)
              this.bankInfo = data.info
              console.log(data.info)
            }
          }
        }).catch(e => {
          console.log(e)
        })
      },
      onSetAllMoney() {
        this.vCoins = this.accountInfo.incomeTaxBalance
      },
      changeSelected(item) {
        const {id, is_auto} = item
        if (Number(is_auto) === 1 && !this.fpUrl) {
          this._toast('请先点击右侧，上传发票')
          return
        }
        this.selectedId = id
      },
      onJumpToUpload() {
        const {vCoins, fpUrl} = this
        location.href = `/otherpage/money/uploadInvoice?vCoins=${vCoins || ''}&fpUrl=${fpUrl || ''}`
      },
      onJumpToBankSetting() {
        location.href = 'proginn://edit_bankcard_info'
      },
      submitCommit() {
        const {is_auto, id} = this.selectedItem
        if (this.selectedId === -1) {
          this._toast('请选择缴税方案')
          return
        }
        if (!this.vCoins || this.vCoins < 10) {
          this._toast('提现金额不得低于10元')
          return
        }
        if (this.vCoins > 30000) {
          this._toast('单日提现总额度不得超过30000元')
          return
        }
        if (!this.bankInfo.card_number) {
          this._toast('请先完善银行卡信息')
          return
        }

        //自行提供发票
        if (Number(is_auto) === 1) {
          this.$axios.post('/api/kaifabao/addInvoiceWithdrawalApply', {
            coins: this.vCoins,
            invoice_url: this.fpUrl
          }).then(res=>{
            if (Number(res.data.status) === 1) {
              this._toast('提交成功')
              location.href = '/otherpage/money/'
            }
          })
        } else {
          this.$axios.post('/api/account/takeSalary', {
            coins: this.vCoins,
            payment_id: id
          }).then(res=>{
            if (Number(res.data.status) === 1) {
              this._toast('提交成功')
              location.href = '/otherpage/money/'
            }
          })
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .testArea {
    width: 1vw;
    height: 1vh;
  }
  @import "../../../assets/css/otherpage/money/withdraw";
</style>