<template>
|
<div id="loanPage">
|
<div class="loan">
|
<assets-head :title="$t('信用贷')">
|
<div class="right flex items-center">
|
<img src="@/assets/image/loan/rule.png" alt="rule-img" class="w-12 h-12 mr-5"
|
@click="$router.push('/cryptos/loanRule')" />
|
<img src="@/assets/image/loan/history.png" alt="exchange-img" class="w-12 h-12"
|
@click="$router.push('/cryptos/loanHistory')" />
|
</div>
|
</assets-head>
|
|
<!-- container -->
|
<div class="container px-8">
|
<!-- title-->
|
<div class="py-8">
|
<span style="color: #e35461">{{
|
this.$t("经过平台审核，您可向平台申请一笔借款！")
|
}}</span>
|
</div>
|
<!-- list -->
|
<div class="loanList">
|
<div class="flex justify-between py-8 border-b-color" @click="showCurrencyPicker = true">
|
<div>
|
<span class="grayText">{{ $t("货币选择") }}</span>
|
</div>
|
<div class="flex align-center items-center">
|
<span class="font-semibold textColor mr-2">{{ currencyAct.name1 || $t("请选择货币") }}</span>
|
<div class="w-6 h-6">
|
<img src="@/assets/image/loan/right.png" alt="right-img" class="w-full" />
|
</div>
|
</div>
|
</div>
|
<div class="flex justify-between py-8 border-b-color">
|
<div>
|
<span class="grayText">{{ $t("期望借款金额") }}</span>
|
</div>
|
<div class="flex align-center">
|
<!-- <input class="font-semibold textColor border-none text-right mr-14 mainBackground" v-model="loanAmount"
|
disabled="disabled" @input="inputAmunt" /> -->
|
<input class="font-semibold textColor border-none text-right mainBackground" v-model="loanAmount"
|
@input="inputAmunt" />
|
<!-- <span class="mr-4 font-semibold textColor">{{ loanData.max_quota || 0 }}</span> -->
|
<span class="font-semibold textColor ml-2">{{ currencyAct.currency_symbol }}</span>
|
</div>
|
</div>
|
<!-- <div class="flex justify-between py-8 border-b-color">
|
<div>
|
<span class="grayText">{{ $t("还款周期") }}</span>
|
</div>
|
<div class="flex items-center">
|
<div class="font-semibold mr-4 textColor relative" @click="isSelectDay = !isSelectDay">
|
<span>{{ loanData.term }} {{ $t("天") }}</span>
|
</div>
|
<div class="w-6 h-6">
|
<img src="@/assets/image/loan/right.png" alt="right-img" class="w-full" />
|
</div>
|
</div>
|
</div> -->
|
<div class="flex justify-between py-8 border-b-color">
|
<div>
|
<span class="grayText">{{ $t("最大可借") }}</span>
|
</div>
|
<div class="flex align-center">
|
<span class="font-semibold textColor">
|
{{ userInfo.loanLimit * currencyAct.rate }} {{ currencyAct.currency_symbol }}
|
</span>
|
</div>
|
</div>
|
<div class="flex justify-between py-8 border-b-color">
|
<div>
|
<span class="grayText">{{ $t("最小可借") }}</span>
|
</div>
|
<div class="flex align-center">
|
<span class="font-semibold textColor">100 {{ currencyAct.currency_symbol }}</span>
|
</div>
|
</div>
|
<!-- <div class="flex justify-between py-8 border-b-color">
|
<div>
|
<span class="grayText">{{ $t("日利率") }}</span>
|
</div>
|
<div class="flex align-center">
|
<span class="font-semibold textColor">{{ loanData.daily_rate * 1 * 100 || 0 }}%
|
</span>
|
</div>
|
</div> -->
|
<div class="flex justify-between py-8 border-b-color">
|
<div>
|
<span class="grayText">{{ $t("还款方式") }}</span>
|
</div>
|
<div class="flex align-center">
|
<span class="font-semibold textColor text-right">{{ $t("到期一次还款") }}</span>
|
</div>
|
</div>
|
<div class="flex justify-between py-8 border-b-color">
|
<div>
|
<span class="grayText">{{ $t("利息") }}</span>
|
</div>
|
<div class="flex align-center">
|
<span class="font-semibold textColor">
|
{{ +loanAmount * +this.userInfo.loanRate || 0 }} {{
|
currencyAct.currency_symbol }}
|
</span>
|
</div>
|
</div>
|
<!-- <div class="flex justify-between py-8 border-b-color">
|
<div>
|
<span class="grayText">{{ $t("放款机构") }}</span>
|
</div>
|
<div class="flex align-center">
|
<span class="font-semibold textColor">{{ loanData.lending_name }}</span>
|
</div>
|
</div> -->
|
</div>
|
<!-- 上传区域-->
|
<div class="uploadImg">
|
<!-- <div class="mb-10 textColor">
|
<span>{{ $t("信用放款(请确保图片清晰可见)") }}</span>
|
</div> -->
|
<div class="upload">
|
<!-- <div class="flex mt-8 mb-16 justify-between">
|
<div class="flex-1 flex flex-col text-center justify-center items-center">
|
<div class="upload-wrap">
|
<van-uploader v-model="frontFile" :max-count="1" :disabled="isUpload" :after-read="afterRead"
|
@click-upload="onClickUpload('frontFile')" />
|
</div>
|
<div class="mt-8 text-26" style="color: #868d9a">
|
{{ $t("证件正面") }}
|
</div>
|
</div>
|
<div class="flex-1 flex flex-col text-center justify-center items-center">
|
<div class="upload-wrap">
|
<van-uploader v-model="reverseFile" :max-count="1" :disabled="isUpload" :after-read="afterRead"
|
@click-upload="onClickUpload('reverseFile')" />
|
</div>
|
<div class="mt-8 text-26" style="color: #868d9a">
|
{{ $t("证件反面") }}
|
</div>
|
</div>
|
</div> -->
|
<!-- <div class="flex mt-8 mb-16 justify-between">
|
<div class="flex-1 flex flex-col text-center justify-center items-center">
|
<div class="upload-wrap">
|
<van-uploader v-model="fileList" :max-count="1" :disabled="isUpload" :after-read="afterRead"
|
@click-upload="onClickUpload('fileList')" />
|
</div>
|
<div class="mt-8 text-26" style="color: #868d9a">
|
{{ $t("handCredent") }}
|
</div>
|
</div>
|
<div class="flex-1 flex flex-col text-center justify-center items-center">
|
<div class="upload-wrap">
|
<img src="@/assets/image/loan/handId.png" alt="" class="w-full" />
|
</div>
|
<div class="mt-8 text-26" style="color: #868d9a">
|
{{ $t("拍摄示例") }}
|
</div>
|
</div>
|
</div> -->
|
</div>
|
</div>
|
|
<!-- 确认按钮-->
|
<div class="confirmBtn btnMain w-full py-8 text-center text-white font-normal text-32" @click="submit()">
|
<span>{{ $t("确定") }}</span>
|
</div>
|
</div>
|
<van-popup v-model:show="isSelectDay" position="bottom" :round="true">
|
<ul class="main2_background">
|
<li v-for="(day, index) in loanDeployList" class="text-center py-8" :key="index" @click="selectDay(day)">
|
<span>{{ day.term }}</span>
|
</li>
|
</ul>
|
</van-popup>
|
<!-- 货币选择弹窗 -->
|
<van-popup v-model:show="showCurrencyPicker" position="bottom" :round="true">
|
<div class="currency-picker">
|
<div class="picker-header text-center py-8 border-b-color">
|
<span class="font-semibold textColor">{{ $t("货币选择") }}</span>
|
</div>
|
<ul class="main2_background">
|
<li v-for="(item, index) in currencyList" :key="index"
|
class="flex justify-between items-center py-8 px-8 border-b-color" @click="selectCurrency(item)">
|
<div class="flex items-center">
|
<span class="font-semibold textColor">{{ item.name1 }}</span>
|
</div>
|
<img v-if="currencyAct.currency === item.currency" class="w-12 h-12"
|
src="../../../assets/image/public/checked.png" />
|
</li>
|
</ul>
|
</div>
|
</van-popup>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import AssetsHead from "@/components/Transform/assets-head/index.vue";
|
import { Popup, Uploader } from "vant";
|
import { _getExchangeRate } from "@/service/home.api";
|
import { _getLoan, _loanApply } from "@/service/fund.api";
|
import { _getIdentify, _info, _exchangerateuserconfiglist } from "@/service/user.api.js";
|
import { _uploadImage } from "@/service/upload.api.js";
|
import { _exchangerateuserconfig } from "@/service/trade.api";
|
import { showToast } from "vant";
|
// import {debounce} from "@/utils/utis";
|
|
export default {
|
name: "loanIndex",
|
components: {
|
AssetsHead,
|
[Uploader.name]: Uploader,
|
[Popup.name]: Popup,
|
},
|
methods: {
|
getLoan() {
|
_getLoan().then((data) => {
|
this.loanDeployList = data;
|
this.loanDeployList.sort((a, b) => {
|
return +a.term - +b.term;
|
});
|
this.loanData = this.loanDeployList[0];
|
});
|
},
|
submit() {
|
// console.log('this.frontFile',this.frontFile)
|
// if (!this.frontFile.length || !this.reverseFile.length || !this.fileList.length) {
|
// if (!this.frontFile.length || !this.reverseFile.length) {
|
// showToast(this.$t("请上传完整证件信息"));
|
// return;
|
// }
|
|
if (this.loanAmount > this.userInfo.loanLimit * this.currencyAct.rate || this.loanAmount < 100) {
|
showToast(this.$t("借款金额不符合可借区间"));
|
return;
|
}
|
|
_loanApply({
|
// ...this.loanData,
|
// term: this.loanData.term,
|
// quota: this.loanData.max_quota, //借贷金额 取max
|
quota: this.loanAmount, //借贷金额 取max
|
// dailyRate: this.loanData.daily_rate,
|
// lendingInstitution: this.loanData.lending_institution, //放款机构名字
|
// lendingName: this.loanData.lending_name,
|
// repayment: this.loanData.repayment, //还款方式
|
// repayCycle: this.loanData.repay_cycle, //还款日期
|
symbol: this.currencyAct.currency.toLowerCase(),
|
// frontFile: this.frontFile[0].resURL,
|
// reverseFile: this.reverseFile[0].resURL,
|
// fileList: this.fileList[0].resURL,
|
})
|
.then((res) => {
|
// console.log('res',res)
|
this.$router.push("/cryptos/loanHistory");
|
})
|
.catch((err) => {
|
showToast(this.$t(err.msg));
|
});
|
},
|
// 获取汇率列表
|
ExchangeRate() {
|
_exchangerateuserconfiglist().then(res => {
|
this.exchangeRate = res || []
|
this.initCurrencyList() // 初始化货币列表
|
})
|
},
|
// 初始化货币列表（本地写死）
|
initCurrencyList() {
|
const currencies = {
|
name1: 'USD',
|
currency: "USDT",
|
currency_symbol: "$",
|
name: "美元",
|
rate: 1
|
}
|
// this.exchangeRate.name1 = this.exchangeRate.currency
|
this.exchangeRate.forEach(item => {
|
item.name1 = item.currency
|
})
|
this.currencyList = [currencies, ...this.exchangeRate]
|
this.currencyAct = this.currencyList[0]
|
},
|
// 选择货币
|
selectCurrency(item) {
|
this.currencyAct = item
|
},
|
// //防抖
|
inputAmunt() {
|
this.loanAmount = this.loanAmount.replace(/[^0-9]/g, '')
|
// this.debounceFn()
|
},
|
// debounceFn: debounce(function () {
|
// this.getInterest()
|
// }, 500),
|
// getInterest(){
|
// this.interest = +this.loanAmount * +this.loanRate
|
// },
|
selectDay(data) {
|
this.loanData = data;
|
// this.getInterest()
|
this.isSelectDay = false;
|
},
|
onClickUpload(type) {
|
this.curFile = type;
|
},
|
afterRead(file) {
|
/// 处理文件
|
// console.log(file)
|
file.status = "uploading";
|
file.message = this.$t("上传中...");
|
this.isUpload = true;
|
_uploadImage(file)
|
.then((data) => {
|
file.status = "success";
|
file.message = this.$t("上传成功");
|
file.resURL = data;
|
this[this.curFile] = [file];
|
this.isUpload = false;
|
})
|
.catch((err) => {
|
file.status = "failed";
|
file.message = this.$t("图片上传失败");
|
this.isUpload = false;
|
});
|
},
|
getUserInfo() {
|
_info().then(res => {
|
this.userInfo = res
|
})
|
}
|
},
|
mounted() {
|
// this.getLoan(); // 获取借贷信息(目前不需要了)
|
this.getUserInfo()
|
this.ExchangeRate() // 获取欧元的汇率
|
// this.getInterest()
|
},
|
data() {
|
return {
|
loanData: {},
|
loanDeployList: [],
|
frontFile: [],
|
reverseFile: [],
|
fileList: [],
|
curFile: "frontFile",
|
// resultArr: ['small-success_' + this.$t('已申请未审核'), 'identifing_' + this.$t('审核中'), 'small-success_' + this.$t('审核通过'), 'icon-close_' + this.$t('审核未通过')], // 0 好像是未提交
|
// status:'',
|
isSelectDay: false,
|
isUpload: false,
|
loanAmount: 0,
|
userInfo: {},
|
exchangeRate: {},
|
showCurrencyPicker: false, // 货币选择弹窗显示状态
|
currencyList: [], // 货币列表
|
currencyAct: {}
|
};
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
#loanPage {
|
font-size: 30px;
|
|
.loan {
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.uploadImg {
|
margin-top: 60px;
|
|
.upload-wrap {
|
width: 356px;
|
height: 288px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
:deep(.van-uploader__upload) {
|
width: 356px !important;
|
height: 288px !important;
|
}
|
}
|
}
|
|
.selectDay {
|
position: absolute;
|
left: -70px;
|
background: #f5f5f5;
|
color: #333;
|
box-sizing: border-box;
|
|
div {
|
padding: 20px 70px;
|
}
|
|
div:last-child {
|
border-bottom: none;
|
margin-bottom: 0;
|
}
|
}
|
|
.confirmBtn {
|
border-radius: 8px;
|
}
|
|
.grayText {
|
color: #868e9b;
|
}
|
|
.currency-picker {
|
max-height: 70vh;
|
overflow-y: auto;
|
|
.picker-header {
|
position: sticky;
|
top: 0;
|
background: $main_background;
|
z-index: 1;
|
}
|
|
.border-b-color {
|
border-bottom: 1px solid $line_color;
|
}
|
}
|
}
|
</style>
|
