first commit

huzheng12

2024-05-06 3ed2cb78a690b64c3b2646d35e1500081186dfa3

 src/page/pledgeLoan/addPledge.vue

@@ -1,188 +1,224 @@
<template>
    <div class="addPledge">
        <assets-head :title="$t('新增质押')"></assets-head>
        <div class="contentBox">
            <div class="imgBox"><img src="../../assets/image/addpledgeBg.png" alt="" /></div>
            <div class="px-32">
                <div class="content 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 relative">
                            <input class="h-full pl-22 inputBackground1" type="text" v-model="pledgeAmount"
                                :placeholder="$t('请输入质押数量')" @input="changeMount" />
                            <div class="right w-252 h-62 flex items-center pl-26 box-border">
                                <img :src="`${HOST_URL}/wap/symbol/${pledgeCurrency.toLowerCase()}.png`" class="w-48 h-48"
                                    alt="" />
                                <span class="ml-14 mr-30 w-90">{{ pledgeCurrency.toUpperCase() }}</span>
                            </div>
                        </div>
                        <div class="flex items-center font-24 mt-16 text-grey">
                            {{ $t('可用余额') }}：<span class="mr-14">{{ volume ||
                                '--' }}&nbsp;{{ pledgeCurrency.toUpperCase() }}</span>
                            <img click="$router.push('/exchange/exchangePage')" src="../../assets/image/exchangeIcon.png"
                                class="w-28 h-28" alt="" />
                        </div>
                        <div class="flex justify-between font-32 mt-48">
                            <div class="text-grey">{{ $t('质押后质押率') }}</div>
                            <div class="textColor">{{ pledgeRate !== '' ? (pledgeRate * 10000 / 100).toFixed(2) : '--' }}%
                            </div>
                        </div>
                        <div class="h-96 lh-96 btnMain rounded-lg text-center text-black font-34 mt-96"
                            @click="getReplenishOrder">{{ $t('确认质押') }}</div>
                    </div>
                </div>
  <div class="addPledge">
    <assets-head :title="$t('新增质押')"></assets-head>
    <div class="contentBox">
      <div class="imgBox">
        <img src="../../assets/image/addpledgeBg.png" alt="" />
      </div>
      <div class="px-32">
        <div class="content 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 relative"
            >
              <input
                class="h-full pl-22 inputBackground1"
                type="text"
                v-model="pledgeAmount"
                :placeholder="$t('请输入质押数量')"
                @input="changeMount"
              />
              <div class="right w-252 h-62 flex items-center pl-26 box-border">
                <img
                  :src="`${HOST_URL}/wap/symbol/${pledgeCurrency.toLowerCase()}.png`"
                  class="w-48 h-48"
                  alt=""
                />
                <span class="ml-14 mr-30 w-90">{{
                  pledgeCurrency.toUpperCase()
                }}</span>
              </div>
            </div>
            <div class="flex items-center font-24 mt-16 text-grey">
              {{ $t("可用余额") }}：<span class="mr-14"
                >{{ volume || "--" }}&nbsp;{{
                  pledgeCurrency.toUpperCase()
                }}</span
              >
              <img
                click="$router.push('/exchange/exchangePage')"
                src="../../assets/image/exchangeIcon.png"
                class="w-28 h-28"
                alt=""
              />
            </div>
            <div class="flex justify-between font-32 mt-48">
              <div class="text-grey">{{ $t("质押后质押率") }}</div>
              <div class="textColor">
                {{
                  pledgeRate !== ""
                    ? ((pledgeRate * 10000) / 100).toFixed(2)
                    : "--"
                }}%
              </div>
            </div>
            <div
              class="h-96 lh-96 btnMain rounded-lg text-center text-black font-34 mt-96"
              @click="getReplenishOrder"
            >
              {{ $t("确认质押") }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import Axios from "@/API/pledgeLoan.js";
import { _getAllWallet } from "@/API/fund.api";
import { HOST_URL } from '@/config'
import { debounce } from '@/utils/utis'
import { HOST_URL } from "@/config";
import { debounce } from "@/utils/utis";
export default {
    props: {
  props: {},
  components: {
    assetsHead,
  },
  data() {
    return {
      HOST_URL,
      walletList: [],
      id: "",
      pledgeAmount: "",
      pledgeRate: "", //质押率
      pledgeCurrency: "", //质押币种
      volume: "", //可用余额
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.pledgeCurrency = this.$route.query.pledgeCurrency;
    this.getList();
  },
  methods: {
    changeMount() {
      if (this.pledgeAmount >= this.volume) {
        this.pledgeAmount = this.volume;
      }

      this.debounceFn();
    },
    components: {
        assetsHead
    debounceFn: debounce(function () {
      this.getLoanParam();
    }, 500),
    getLoanParam() {
      if (this.pledgeAmount == "") {
        this.$toast(this.$t("请输入质押数量"));
        return false;
      }
      Axios.getLoanParam({
        loanOrderId: this.id,
        pledgeAmount: this.pledgeAmount,
      })
        .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));
          }
        });
    },
    data() {
        return {
            HOST_URL,
            walletList: [],
            id: '',
            pledgeAmount: '',
            pledgeRate: '',//质押率
            pledgeCurrency: '', //质押币种
            volume: '', //可用余额
        }
    getList() {
      _getAllWallet().then((res) => {
        this.walletList = res.extends;
        let initObj = this.walletList.find((item) => {
          return item.symbol.toLowerCase() == this.pledgeCurrency;
        });
        this.volume = initObj.usable;
      });
    },
    mounted() {
        this.id = this.$route.query.id
        this.pledgeCurrency = this.$route.query.pledgeCurrency
        this.getList()
    getReplenishOrder() {
      if (this.pledgeAmount == "") {
        this.$toast(this.$t("请输入质押数量"));
        return false;
      }
      Axios.replenishOrder({
        loanOrderId: this.id,
        pledgeAmount: this.pledgeAmount,
      })
        .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: {
        changeMount() {
            if (this.pledgeAmount >= this.volume) {
                this.pledgeAmount = this.volume
            }

            this.debounceFn()

        },
        debounceFn: debounce(function () {
            this.getLoanParam()
        }, 500),
        getLoanParam() {
            if (this.pledgeAmount == '') {
                this.$toast(this.$t('请输入质押数量'))
                return false
            }
            Axios.getLoanParam({
                loanOrderId: this.id,
                pledgeAmount: this.pledgeAmount
            }).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) => {
                this.walletList = res.extends;
                let initObj = this.walletList.find(item => {
                    return item.symbol.toLowerCase() == this.pledgeCurrency
                })
                this.volume = initObj.usable
            });
        },
        getReplenishOrder() {
            if (this.pledgeAmount == '') {
                this.$toast(this.$t('请输入质押数量'))
                return false
            }
            Axios.replenishOrder({
                loanOrderId: this.id,
                pledgeAmount: this.pledgeAmount
            }).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>
.addPledge {
    width: 100%;
    box-sizing: border-box;
  width: 100%;
  box-sizing: border-box;
}

.contentBox {
  position: relative;

  .imgBox {
    width: 100%;
    height: 300px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .content {
    border-radius: 8px;
    padding: 36px 30px 36px 34px;
    position: relative;
    margin-top: -92px;

    .imgBox {
        width: 100%;
        height: 300px;
    .inputBox {
      input {
        flex: 1;
        border: none;
      }

        img {
            width: 100%;
            height: 100%;
        }
      .right {
        border-left: 1px solid #b8bcc5;
      }
    }

    .content {
        border-radius: 8px;
        padding: 36px 30px 36px 34px;
        position: relative;
        margin-top: -92px;

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

    &.slectBoxMax {
        max-height: 574px;
        overflow-y: auto;
    }
  &.slectBoxMax {
    max-height: 574px;
    overflow-y: auto;
  }
}
</style>