From 3ed2cb78a690b64c3b2646d35e1500081186dfa3 Mon Sep 17 00:00:00 2001
From: huzheng12 <52150713+huzheng12@users.noreply.github.com>
Date: Mon, 06 May 2024 00:21:32 +0800
Subject: [PATCH] first commit
---
src/page/pledgeLoan/repayment.vue | 286 +++++++++++++++++++++++++++++++-------------------------
1 files changed, 159 insertions(+), 127 deletions(-)
diff --git a/src/page/pledgeLoan/repayment.vue b/src/page/pledgeLoan/repayment.vue
index 329e196..acf8850 100644
--- a/src/page/pledgeLoan/repayment.vue
+++ b/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 || '--'}} 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 || '--'}} USDT</span>
- </p>
- <p class="mt-36 text-grey font-28 flex justify-between">
- <span>{{$t('利息')}}</span>
- <span class="textColor">{{interestAmount!==''?interestAmount:'--'}} USDT</span>
- </p>
- <p class="mt-36 text-grey font-28 flex justify-between">
- <span>{{$t('本金还款')}}</span>
- <span class="textColor">{{loanAmount || '--'}} 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 || "--" }} 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 || "--" }} USDT</span>
+ </p>
+ <p class="mt-36 text-grey font-28 flex justify-between">
+ <span>{{ $t("利息") }}</span>
+ <span class="textColor"
+ >{{
+ interestAmount !== "" ? interestAmount : "--"
+ }} USDT</span
+ >
+ </p>
+ <p class="mt-36 text-grey font-28 flex justify-between">
+ <span>{{ $t("本金还款") }}</span>
+ <span class="textColor">{{ loanAmount || "--" }} 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>
\ No newline at end of file
--
Gitblit v1.9.3