first commit

huzheng12

2024-05-06 3ed2cb78a690b64c3b2646d35e1500081186dfa3

 src/page/pledgeLoan/repayment.vue

@@ -1,150 +1,182 @@
<template>
    <div class="repayment">
        <assets-head :title="$t('还款')"></assets-head>
        <div class="contentBox">
            <div class="content mt-24 box-shad tabBackground">
                <div class="mb-38">
                    <div class="font-32 textColor">{{$t('还款')}}</div>
                    <div class="flex mt-20 h-96 pr-34 items-center inputBox inputBackground1 textColor">
                        <input class="h-full pl-22 inputBackground1" type="text" v-model="repayAmount" @input="changeMount"
                            :placeholder="$t('请输入还款数量')">
                        <div class="right h-62 flex items-center pl-26 box-border relative font-30">
                            <span>USDT</span>
                            <span class="skyColor ml-28" @click="repayAll">ALL</span>
                        </div>
                    </div>
                    <div class="flex items-center font-24 mt-24 text-grey">
                        {{$t('可用余额')}}：<span class="mr-14">{{volume || '--'}}&nbsp;USDT</span><img
                            @click="$router.push('/exchange/exchangePage')" src="../../assets/image/exchangeIcon.png" class="w-28 h-28"
                            alt="" />
                    </div>
                    <p class="mt-84 text-grey font-28 flex justify-between">
                        <span>{{$t('总负债')}}</span>
                        <span class="textColor">{{debtAmount || '--'}}&nbsp;USDT</span>
                    </p>
                    <p class="mt-36 text-grey font-28 flex justify-between">
                        <span>{{$t('利息')}}</span>
                        <span class="textColor">{{interestAmount!==''?interestAmount:'--'}}&nbsp;USDT</span>
                    </p>
                    <p class="mt-36 text-grey font-28 flex justify-between">
                        <span>{{$t('本金还款')}}</span>
                        <span class="textColor">{{loanAmount || '--'}}&nbsp;USDT</span>
                    </p>
                    <p class="mt-36 font-32 text-grey flex justify-between">
                        <span>{{$t('还款后质押率')}}</span>
                        <span class="textColor">{{pledgeRate!==''?(pledgeRate*10000/100).toFixed(2):'--'}}%</span>
                    </p>
                    <div class="h-96 lh-96 rounded-lg text-center font-34 mt-84" :class="repayAmount? 'btnMain text-black ':'bgDark text-grey'" @click="submit">
                        {{$t('确认还款')}}
                    </div>
                </div>
  <div class="repayment">
    <assets-head :title="$t('还款')"></assets-head>
    <div class="contentBox">
      <div class="content mt-24 box-shad tabBackground">
        <div class="mb-38">
          <div class="font-32 textColor">{{ $t("还款") }}</div>
          <div
            class="flex mt-20 h-96 pr-34 items-center inputBox inputBackground1 textColor"
          >
            <input
              class="h-full pl-22 inputBackground1"
              type="text"
              v-model="repayAmount"
              @input="changeMount"
              :placeholder="$t('请输入还款数量')"
            />
            <div
              class="right h-62 flex items-center pl-26 box-border relative font-30"
            >
              <span>USDT</span>
              <span class="skyColor ml-28" @click="repayAll">ALL</span>
            </div>
          </div>
          <div class="flex items-center font-24 mt-24 text-grey">
            {{ $t("可用余额") }}：<span class="mr-14"
              >{{ volume || "--" }}&nbsp;USDT</span
            >
            <span @click="$router.push('/exchange/exchangePage')">
              <img
                src="../../assets/image/exchangeIcon.png"
                class="w-28 h-28"
                alt=""
              />
            </span>
          </div>
          <p class="mt-84 text-grey font-28 flex justify-between">
            <span>{{ $t("总负债") }}</span>
            <span class="textColor">{{ debtAmount || "--" }}&nbsp;USDT</span>
          </p>
          <p class="mt-36 text-grey font-28 flex justify-between">
            <span>{{ $t("利息") }}</span>
            <span class="textColor"
              >{{
                interestAmount !== "" ? interestAmount : "--"
              }}&nbsp;USDT</span
            >
          </p>
          <p class="mt-36 text-grey font-28 flex justify-between">
            <span>{{ $t("本金还款") }}</span>
            <span class="textColor">{{ loanAmount || "--" }}&nbsp;USDT</span>
          </p>
          <p class="mt-36 font-32 text-grey flex justify-between">
            <span>{{ $t("还款后质押率") }}</span>
            <span class="textColor"
              >{{
                pledgeRate !== ""
                  ? ((pledgeRate * 10000) / 100).toFixed(2)
                  : "--"
              }}%</span
            >
          </p>
          <div
            class="h-96 lh-96 rounded-lg text-center font-34 mt-84"
            :class="repayAmount ? 'btnMain text-black ' : 'bgDark text-grey'"
            @click="submit"
          >
            {{ $t("确认还款") }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import Axios from "@/API/pledgeLoan.js";
import { debounce } from '@/utils/utis'
import { debounce } from "@/utils/utis";
import { _getAllWallet } from "@/API/fund.api";
    export default {
        props: {

        },
        components: {
            assetsHead
        },
        data(){
            return {
                id:'',
                debtAmount:'',//总负债
                interestAmount:'',
                loanAmount:'',
                repayAmount: '',
                volume:'',
                pledgeRate: '',
            }
        },
        mounted(){
            this.id = this.$route.query.id
            this.debtAmount = this.$route.query.debtAmount
            this.interestAmount = this.$route.query.interestAmount
            this.loanAmount = this.$route.query.loanAmount
            this.getList();
        },
        methods: {
            changeMount(){
                if (this.repayAmount !== '') {
                    this.debounceFn()
                }else{
                    this.pledgeRate = ''
                }
            },
            debounceFn: debounce(function () {
                this.getLoanParam()
            }, 500),
            getLoanParam() {
                Axios.getLoanParam({
                    repayAmount: this.repayAmount,
                    loanOrderId: this.id,
                }).then(res => {
                    this.pledgeRate = res.data.pledgeRate
                }).catch(error => {
                    if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
                    else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}      
                })
            },
            getList() {
                _getAllWallet().then((res) => {
                    let walletList = res.extends;
                    let initObj = walletList.find(item => {
                        return item.symbol.toLowerCase() == 'usdt'
                    })
                    this.volume = initObj.volume
                });
            },
            repayAll(){
                this.repayAmount = this.debtAmount
                this.getLoanParam();
            },
            submit(){
                Axios.repayOrder({
                    repayAmount: this.repayAmount,
                    loanOrderId: this.id,
                }).then(res => {
                    this.$toast(this.$t('还款成功'));
                    this.$router.push('/pledgeLoanOrder')
                })
            }
        }
    }
export default {
  props: {},
  components: {
    assetsHead,
  },
  data() {
    return {
      id: "",
      debtAmount: "", //总负债
      interestAmount: "",
      loanAmount: "",
      repayAmount: "",
      volume: "",
      pledgeRate: "",
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.debtAmount = this.$route.query.debtAmount;
    this.interestAmount = this.$route.query.interestAmount;
    this.loanAmount = this.$route.query.loanAmount;
    this.getList();
  },
  methods: {
    changeMount() {
      if (this.repayAmount !== "") {
        this.debounceFn();
      } else {
        this.pledgeRate = "";
      }
    },
    debounceFn: debounce(function () {
      this.getLoanParam();
    }, 500),
    getLoanParam() {
      Axios.getLoanParam({
        repayAmount: this.repayAmount,
        loanOrderId: this.id,
      })
        .then((res) => {
          this.pledgeRate = res.data.pledgeRate;
        })
        .catch((error) => {
          if (error.code === "ECONNABORTED") {
            this.$toast(this.$t("网络超时！"));
          } else if (error.msg !== undefined) {
            this.$toast(this.$t(error.msg));
          }
        });
    },
    getList() {
      _getAllWallet().then((res) => {
        let walletList = res.extends;
        let initObj = walletList.find((item) => {
          return item.symbol.toLowerCase() == "usdt";
        });
        this.volume = initObj.volume;
      });
    },
    repayAll() {
      this.repayAmount = this.debtAmount;
      this.getLoanParam();
    },
    submit() {
      Axios.repayOrder({
        repayAmount: this.repayAmount,
        loanOrderId: this.id,
      }).then((res) => {
        this.$toast(this.$t("还款成功"));
        this.$router.push("/pledgeLoanOrder");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.repayment{
    box-sizing: border-box;
    width: 100%;
.repayment {
  box-sizing: border-box;
  width: 100%;
}
.contentBox {
    padding: 0 32px;
    position: relative;
    overflow: auto;
  padding: 0 32px;
  position: relative;
  overflow: auto;
}
.content {
    border-radius: 8px;
    padding: 36px 30px 36px 34px;
    position: relative;
  border-radius: 8px;
  padding: 36px 30px 36px 34px;
  position: relative;

    .inputBox {
        input {
            flex: 1;
            border: none;
        }
  .inputBox {
    input {
      flex: 1;
      border: none;
    }

  }
}
.skyColor {
    color: #13D3EB;
  color: #13d3eb;
}
</style>