ngds/frontendEle/src/views/finance/transfer-add.vue

<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-form ref="form" :model="form" label-width="250px" class="form-page">
        <el-form-item label="Transfer type"> <!-- 转账类型 -->
          <el-select v-model="form.type" placeholder="请选择转账类型" @change="handleTypeChange">  <!-- 请选择转账类型 -->
            <el-option v-for="(item,key) in transferConfig" :label="item.outName+' To '+item.inName" :value="item.typeId" :key="key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Current available bonus"> <!-- 当前可用奖金 -->
          <el-tag type="success">{{balance}} NGN</el-tag> <!-- 元 -->
        </el-form-item>
        <el-form-item label="Current available Ecoin"> <!-- 当前可用余额 -->
          <el-tag type="success">{{cash}} NGN</el-tag> <!-- 元 -->
        </el-form-item>
        <el-form-item label="Current transfer ratio" v-if="false"> <!-- 当前转账比例 -->
          <el-tag type="info">{{transferProp}}%</el-tag>
        </el-form-item>
        <el-form-item label="Maximum transfer amount" v-if="false"> <!-- 最大转账金额 -->
          <el-tag type="info">{{maxAmount}} NGN</el-tag> <!-- 元 -->
        </el-form-item>
        <el-form-item label="Member code"> <!-- 转入会员编号 -->
          <el-input v-model="form.toUserName" @change="handleChange"></el-input>
        </el-form-item>
        <el-form-item label="Member name" v-show="form.toRealName!==null"> <!-- 会员姓名 -->
          <el-input v-model="form.toRealName" :disabled="true"></el-input>
        </el-form-item>
        <!--<el-form-item label="转入会员姓名">-->
          <!--<el-input v-model="form.toRealName"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="Transfer amount" style="margin-bottom: 0;"> <!-- 转账金额 -->
          <el-input v-model="form.amount" type="number" :min="minAmount" :max="maxAmount" @change="chkReal"></el-input>
          <span style="font-size: 8pt;color: #909399;">Each transfer shall not be less than 5000 NGN</span> <!-- 每次转账不得少于100 -->
        </el-form-item>
        <el-form-item label="Service charge" v-show="fee!=='0'"> <!-- 手续费 -->
          <el-tag type="info">{{fee}}%</el-tag>
        </el-form-item>
        <el-form-item label="Actual amount transferred into" v-show="fee!=='0'"> <!-- 实际到账金额 -->
          <el-tag type="warning">{{realAmount}} NGN</el-tag> <!-- 元 -->
        </el-form-item>
        <el-form-item label="Remark" style="margin-top: 25px;"> <!-- 备注 -->
          <el-input v-model="form.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="submitButtonStat">Submit</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import store from '@/utils/vuexStore'
import network from '@/utils/network'
import tool from '@/utils/tool'
import userInfo from '@/utils/userInfo'

export default {
  name: 'finance_withdraw-add',
  mounted () {
    this.chkTransferUserinfo()
  },
  data () {
    return {
      allWallet: {'bonus': 'Bonus', 'cash': 'Ecoin'}, // 会员奖金 现金钱包
      form: {
        type: 1,
        toUserName: '',
        toRealName: '',
        amount: 0,
        payPassword: '',
        remark: '',
        transferCode: ''
      },
      userInfo: {
        TRANSFER_PROP: 100
      },
      balance: 0,
      cash: 0,
      minAmount: 0,
      maxAmount: 0,
      fee: '0',
      realAmount: 0,
      transferProp: 0,
      bonus: 0,
      loading: true,
      submitButtonStat: false,
      openBanks: null,
      tool: tool,
      transferConfig: []
    }
  },
  methods: {
    handleChange () {
      this.loading = true
      network.getData('user/full-info', {userName: this.form.toUserName}).then(response => {
        console.log(userInfo.userName())
        this.form.toRealName = response.REAL_NAME
        this.loading = false
      }).catch(response => {
        this.loading = false
      })
    },
    chkReal () {
      this.realAmount = tool.formatPrice(this.form.amount * (100 - this.fee) * 0.01)
    },
    getWalletName (out, inw) {
      return this.allWallet[out] + ' To ' + this.allWallet[inw]
    },
    handleTypeChange () {
      // 奖金转现金
      this.fee = this.transferConfig[this.form.type - 1].fee
    },
    chkTransferUserinfo () {
      network.getData(`finance/chk-transfer-user`).then(response => {
        this.loading = false
        this.userInfo = response.userInfo
        this.transferConfig = response.transferConfig
        this.minAmount = response.minAmount
        this.handleTypeChange()
        this.getBalance()
      }).catch(() => {
        this.$router.go(-1)
      })
    },
    getBalance () {
      this.$message({
        message: 'Collecting your bonus...', // 正获取您的奖金
        type: 'info'
      })
      network.getData('finance/available-balance').then(response => {
        this.$message.closeAll()
        this.balance = response.bonus
        this.cash = response.cash
        this.getMaxAmount()
        this.loading = false
      })
    },
    getMaxAmount () {
      this.maxAmount = Math.floor(tool.formatPrice(this.balance * this.userInfo.TRANSFER_PROP * 0.01))
      this.transferProp = this.userInfo.TRANSFER_PROP
    },
    onSubmit () {
      this.submitButtonStat = true
      let path = 'finance/transfer-add'

      network.getData('finance/mult-point').then(response => {
        this.form.transferCode = response.transferCode

        this.$prompt('Please enter your payment password', 'Notice', {
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel',
          inputType: 'password',
          inputPattern: /\S+/,
          inputErrorMessage: 'Please enter your payment password', // 请输入支付密码
          beforeClose: async (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true
              instance.confirmButtonText = 'executing...' // 执行中...
              console.log(instance.inputValue)
              this.form.payPassword = instance.inputValue
              await network.postData(path, this.form).then(response => {
                instance.confirmButtonLoading = false
                done()
                this.$message({
                  message: response,
                  type: 'success'
                })
                this.submitButtonStat = false
                this.$router.go(-1)
              }).catch(error => {
                instance.confirmButtonLoading = false
                this.submitButtonStat = false
                done()
              })
            } else {
              this.submitButtonStat = false
              done()
            }
          }
        })
      })
    }
  }
}
</script>

<style scoped>

</style>