first commit

huzheng12

2024-05-06 3ed2cb78a690b64c3b2646d35e1500081186dfa3

 src/page/pledgeLoan/pledgeLoanRenew.vue

@@ -1,190 +1,245 @@
<template>
    <div class="pledgeLoanRenew">
        <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 items-center inputBox inputBackground1 textColor">
                        <input class="h-full pl-22 inputBackground1" type="text" v-model="loanAmount" @input="changeMount"
                            :placeholder="$t('请输入借款数量')">
                        <div class="right w-252 h-62 flex items-center pl-26 box-border relative" @click="openSelect">
                            <img src="../../assets/image/usdtIcon.png" class="w-48 h-48" alt="">
                            <span class="ml-14 mr-30">USDT</span>
                            <img src="../../assets/image/icon-more.png" alt="logo" class="w-24 h-24" />
                            <div class="slectBox" v-show="isShow" @click.stop="isShow = false;">
                                <div class="h-64 lh-64 border-b-color">Select</div>
                                <div class="flex items-center h-80">
                                    <img src="../../assets/image/usdtIcon.png" class="w-40 h-40" alt="">
                                    <span class="ml-14 font-24 text-grey">USDT</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="mt-22 text-grey font-24 flex justify-between">
                        <span>{{ $t('强平价格') }}({{ pledgeCurrency ? pledgeCurrency.toUpperCase() : '--' }}/USDT)</span>
                        <span class="textColor">{{ closeOut || '--' }}</span>
                    </p>
                    <p class="mt-24 text-grey font-24 flex justify-between">
                        <span>{{ $t('质押率') }}</span>
                        <span class="textColor">{{ pledgeRate !== '' ? (pledgeRate * 10000 / 100).toFixed(2) : '--'
                        }}%</span>
                    </p>
                    <p class="mt-24 text-grey font-24 flex justify-between">
                        <span>{{ $t('小时利率') }}</span>
                        <span class="textColor">{{ hourlyRate || '--' }}</span>
                    </p>
                    <p class="mt-24 text-grey font-24 flex justify-between">
                        <span>{{ $t('日利率') }}</span>
                        <span class="textColor">{{ hourlyRate ? hourlyRate * 24 : '--' }}</span>
                    </p>
                    <div class="queIcon mt-8" @click="showMask = true"><img src="../../assets/image/skyQuestion.png"
                            class="w-24 h-24" alt=""></div>
                    <p class="mt-48 font-32 text-grey flex justify-between">
                        <span>{{ $t('总利息') }}</span>
                        <span class="textColor">{{ interestAmount || '--' }}&nbsp;USDT</span>
                    </p>
                    <p class="mt-48 font-32 text-grey flex justify-between">
                        <span>{{ $t('预计还款') }}</span>
                        <span class="textColor">{{ debtAmount || '--' }}&nbsp;USDT</span>
                    </p>
                    <div class="h-96 lh-96 btnMain rounded-lg text-center text-black font-34 mt-48"
                        @click="submitRefurbishOrder">{{ $t('借币') }}</div>
  <div class="pledgeLoanRenew">
    <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 items-center inputBox inputBackground1 textColor"
          >
            <input
              class="h-full pl-22 inputBackground1"
              type="text"
              v-model="loanAmount"
              @input="changeMount"
              :placeholder="$t('请输入借款数量')"
            />
            <div
              class="right w-252 h-62 flex items-center pl-26 box-border relative"
              @click="openSelect"
            >
              <img
                src="../../assets/image/usdtIcon.png"
                class="w-48 h-48"
                alt=""
              />
              <span class="ml-14 mr-30">USDT</span>
              <img
                src="../../assets/image/icon-more.png"
                alt="logo"
                class="w-24 h-24"
              />
              <div
                class="slectBox"
                v-show="isShow"
                @click.stop="isShow = false"
              >
                <div class="h-64 lh-64 border-b-color">Select</div>
                <div class="flex items-center h-80">
                  <img
                    src="../../assets/image/usdtIcon.png"
                    class="w-40 h-40"
                    alt=""
                  />
                  <span class="ml-14 font-24 text-grey">USDT</span>
                </div>
              </div>
            </div>
          </div>
          <p class="mt-22 text-grey font-24 flex justify-between">
            <span
              >{{ $t("强平价格") }}({{
                pledgeCurrency ? pledgeCurrency.toUpperCase() : "--"
              }}/USDT)</span
            >
            <span class="textColor">{{ closeOut || "--" }}</span>
          </p>
          <p class="mt-24 text-grey font-24 flex justify-between">
            <span>{{ $t("质押率") }}</span>
            <span class="textColor"
              >{{
                pledgeRate !== ""
                  ? ((pledgeRate * 10000) / 100).toFixed(2)
                  : "--"
              }}%</span
            >
          </p>
          <p class="mt-24 text-grey font-24 flex justify-between">
            <span>{{ $t("小时利率") }}</span>
            <span class="textColor">{{ hourlyRate || "--" }}</span>
          </p>
          <p class="mt-24 text-grey font-24 flex justify-between">
            <span>{{ $t("日利率") }}</span>
            <span class="textColor">{{
              hourlyRate ? hourlyRate * 24 : "--"
            }}</span>
          </p>
          <div class="queIcon mt-8" @click="showMask = true">
            <img
              src="../../assets/image/skyQuestion.png"
              class="w-24 h-24"
              alt=""
            />
          </div>
          <p class="mt-48 font-32 text-grey flex justify-between">
            <span>{{ $t("总利息") }}</span>
            <span class="textColor"
              >{{ interestAmount || "--" }}&nbsp;USDT</span
            >
          </p>
          <p class="mt-48 font-32 text-grey flex justify-between">
            <span>{{ $t("预计还款") }}</span>
            <span class="textColor">{{ debtAmount || "--" }}&nbsp;USDT</span>
          </p>
          <div
            class="h-96 lh-96 btnMain rounded-lg text-center text-black font-34 mt-48"
            @click="submitRefurbishOrder"
          >
            {{ $t("借币") }}
          </div>
        </div>
        <rule-mask v-model="showMask"></rule-mask>
      </div>
    </div>
    <rule-mask v-model="showMask"></rule-mask>
  </div>
</template>

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

  props: {},
  components: {
    assetsHead,
    ruleMask,
  },
  data() {
    return {
      id: "",
      isShow: false,
      showMask: false,
      loanAmount: "",
      closeOut: "",
      debtAmount: "",
      hourlyRate: "",
      interestAmount: "",
      pledgeRate: "",
      pledgeCurrency: "",
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.pledgeCurrency = this.$route.query.pledgeCurrency;
  },
  methods: {
    openSelect() {
      this.isShow = !this.isShow;
    },
    components: {
        assetsHead,
        ruleMask
    changeMount() {
      if (this.loanAmount !== "") {
        this.debounceFn();
      }
    },
    data() {
        return {
            id: '',
            isShow: false,
            showMask: false,
            loanAmount: '',
            closeOut: '',
            debtAmount: '',
            hourlyRate: '',
            interestAmount: '',
            pledgeRate: '',
            pledgeCurrency: ''
        }
    debounceFn: debounce(function () {
      this.getLoanParam();
    }, 500),
    getLoanParam() {
      Axios.getLoanParam({
        loanAmount: this.loanAmount,
        loanOrderId: this.$route.query.id,
      })
        .then((res) => {
          this.closeOut = res.data.closeOut;
          this.debtAmount = res.data.debtAmount;
          this.hourlyRate = res.data.hourlyRate;
          this.interestAmount = res.data.interestAmount;
          this.pledgeRate = res.data.pledgeRate;
        })
        .catch((error) => {
          if (error.code == 20) {
            this.$toast(this.$t("最大可借:") + error.msg);
          } else if (error.code === "ECONNABORTED") {
            this.$toast(this.$t("网络超时！"));
          } else if (error.msg !== undefined) {
            this.$toast(this.$t(error.msg));
          }
        });
    },
    mounted() {
        this.id = this.$route.query.id
        this.pledgeCurrency = this.$route.query.pledgeCurrency
    submitRefurbishOrder() {
      if (this.loanAmount == "") {
        this.$toast(this.$t("请输入借款数量"));
        return false;
      }
      Axios.refurbishOrder({
        loanOrderId: this.id,
        loanAmount: this.loanAmount,
      })
        .then((res) => {
          this.$toast(this.$t("续借成功"));
          this.$router.push("/pledgeLoanOrder");
        })
        .catch((error) => {
          if (error.code === "ECONNABORTED") {
            this.$toast(this.$t("网络超时！"));
          } else if (error.msg !== undefined) {
            this.$toast(this.$t(error.msg));
          }
        });
    },
    methods: {
        openSelect() {
            this.isShow = !this.isShow
        },
        changeMount() {
            if (this.loanAmount !== '') {
                this.debounceFn()
            }
        },
        debounceFn: debounce(function () {
            this.getLoanParam()
        }, 500),
        getLoanParam() {
            Axios.getLoanParam({
                loanAmount: this.loanAmount,
                loanOrderId: this.$route.query.id,
            }).then(res => {
                this.closeOut = res.data.closeOut
                this.debtAmount = res.data.debtAmount
                this.hourlyRate = res.data.hourlyRate
                this.interestAmount = res.data.interestAmount
                this.pledgeRate = res.data.pledgeRate
            }).catch(error => {
                if (error.code == 20) {
                    this.$toast(this.$t('最大可借:') + error.msg)
                } else if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            })
        },
        submitRefurbishOrder() {
            if (this.loanAmount == '') {
                this.$toast(this.$t('请输入借款数量'))
                return false;
            }
            Axios.refurbishOrder({
                loanOrderId: this.id,
                loanAmount: this.loanAmount
            }).then(res => {
                this.$toast(this.$t('续借成功'));
                this.$router.push('/pledgeLoanOrder')
            }).catch(error => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            })
        }
    }
}
  },
};
</script>

<style lang="scss" scoped>
.pledgeLoanRenew {
    width: 100%;
    box-sizing: border-box;
  width: 100%;
  box-sizing: border-box;
}

.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;
        }

        .right {
            border-left: 1px solid #B8BCC5;
        }
  .inputBox {
    input {
      flex: 1;
      border: none;
    }

    .right {
      border-left: 1px solid #b8bcc5;
    }
  }
}

.slectBox {
    position: absolute;
    left: 0;
    top: 114px;
    width: 100%;
  position: absolute;
  left: 0;
  top: 114px;
  width: 100%;

    @include themify() {
        background: themed("main_background");
    }
  @include themify() {
    background: themed("main_background");
  }

    border-radius: 4px;
    padding: 0px 20px 76px 20px;
    box-sizing: border-box;
  border-radius: 4px;
  padding: 0px 20px 76px 20px;
  box-sizing: border-box;

    @include themify() {
        border: 1px solid themed("line_color");
    }
  @include themify() {
    border: 1px solid themed("line_color");
  }

    z-index: 2;
  z-index: 2;
}
</style>