loan/src/views/loans/info1/index.vue

<template>
  <j-nav-bar color="#FFF" nav-bar-background="#f9bf3a" :placeholder="false"/>
  <div class="content">
    <j-gap height="120" background="#F9BF3A" opacity="0"/>
    <div class="action">
      <view class="tt">
        {{ $t('app.confirm') }}{{ $t('app.withdrawal') }}{{ $t('app.info') }}
      </view>
      <van-cell :title="$t('borrowInfo.withdrawalBank')" title-style="color: #8997ae;" style="--van-cell-value-color: #000" :value="userInfo.bankType" />
      <van-cell :title="$t('borrowInfo.receivingAccount')" title-style="color: #8997ae;" style="--van-cell-value-color: #000" :value="backCardNumDesensitization(userInfo.backCardNum)" />
    </div>

    <div class="action">
      <view class="tt">
        {{ $t('app.withdrawalAmount') }}
      </view>
      <van-field
        v-model="withdrawAmount"
        :label="$t('app.withdrawalAmount')"
        type="number"
        :placeholder="$t('app.enter') + $t('app.withdrawalAmount')"
      />
    </div>
<!--    <div class="xieyi">-->
<!--      <van-checkbox v-model="checked" :icon-size="px2vw(28)" style="align-items: baseline" checked-color="linear-gradient(to right, #F9D88D, #D2A64C)">-->
<!--        我已阅读并同意-->
<!--        <span class="yellow_color1" @click.stop="go('loansAgreement')">《借款协议》</span>-->
<!--      </van-checkbox>-->
<!--    </div>-->


    <div style="padding: 0 20px 60px">
      <van-button
        color="linear-gradient(to right, #D2A64C, #F9D88D)"
        round
        style="width: 100%; "
        @click.stop="saveUserInfoBtn"
        :disabled="!withdrawAmount || withdrawAmount == 0"
      >
        {{ $t('app.withdrawal') }}
      </van-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useUserStore} from "@/store/modules/user";
import {getBorrowWithdraw, getUserInfo} from "@/api";
import {resetData} from "@/utils/dataUtil";
import {showConfirmDialog, showToast} from "vant";
import { useI18n } from 'vue-i18n';

const useUser = useUserStore()
const router = useRouter()
const route = useRoute()
const { t } = useI18n()


const withdrawAmount = ref()

const go = (key) => {
  // agreement
  router.push({
    path: '/agreement',
    query: {
      key: key
    }
  })
}


const saveUserInfoBtn = () => {

  showConfirmDialog({
    title: t('app.prompt'),
    message: t('app.enterWithdrawal'),
    width: '500px'
  })
    .then(() => {
      getBorrowWithdraw({withdrawAmount: withdrawAmount.value}).then(res => {
        showToast(t('app.prompt') + t('app.success'))
        router.push({
          path: '/serveList'
        })
      })
    })
    .catch(() => {
      // on cancel
    });
}
const userInfo = reactive({
  backCardNum: '',
  bankType: '',
  cardBackPicture: '',
  cardFrontPicture: '',
  cardNum: '',
  companyAddress: '',
  companyAddressInfo: '',
  companyName: '',
  companyPhone: '',
  companyTitle: '',
  companyYear: '',
  customerAddress: '',
  customerAddressInfo: '',
  customerId: 0,
  id: 0,
  kinsfolkName: '',
  kinsfolkPhone: '',
  kinsfolkRef: '',
  kinsfolkRefText: '',
  realName: ''
})
const _getUserInfo = () => {
  getUserInfo().then(res => {
    resetData(userInfo, res)
  })
}

// 收款账号脱敏
const backCardNumDesensitization = (backCardNum: string) => {
  const blen = backCardNum.length
  if (blen < 8) {
    return backCardNum
  }
  let str = ''
  for (let i = 0; i < blen - 7; i++) {
    str+='*'
  }

  return backCardNum.slice(0, 4) + str + backCardNum.slice(blen-3, blen)
}




onMounted(() => {
  _getUserInfo()
  withdrawAmount.value = route.query.account
})

</script>

<style lang="scss" scoped>
.content {
  background-image: linear-gradient(to bottom, #f9bf3a, #ffffff) !important;
  padding-bottom: 30px;
  height: 100vh;

  .action {
    margin: 20px;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-flow: column;
    box-shadow: 0 0 1vw 0px #e0e0e0;
    &-content {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      padding: 20px 20px;
      box-shadow: 0 0 1vw 0px #e0e0e0;

      &-item {
        margin: 20px 0;
      }

      .id-card-box {
        border-radius: 10px;
        box-shadow: 0 0 1vw 0px #e0e0e0;
        width: 500px;
        height: 300px;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
      }
    }

    .tt {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      background: #f6f9fd;
      color: #738aa4;
      padding: 20px 0;
    }
    //
  }

  .xieyi {
    padding: 30px 35px;
    font-size: 24px;
  }
}

.font-22 {
  font-size: 22px;
}

</style>