<template>
|
<div id="cryptos">
|
<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-50 h-50 mr-20"
|
@click="$router.push('/cryptos/loanRule')" />
|
<img src="@/assets/image/loan/history.png" alt="exchange-img" class="w-50 h-50"
|
@click="$router.push('/cryptos/loanHistory')" />
|
</div>
|
</assets-head>
|
|
<!-- container -->
|
<div class="container px-32">
|
<!-- title-->
|
<div class="py-30">
|
<span style="color: #E35461;">{{ this.$t('经过平台审核，您可向平台申请一笔借款！') }}</span>
|
</div>
|
<!-- list -->
|
<div class="loanList">
|
<div class="flex justify-between py-30 border-b-color">
|
<div>
|
<span class="grayText">{{ $t('期望借款金额') }}</span>
|
</div>
|
<div class="flex align-center">
|
<!-- <input class="font-600 textColor border-none text-right mr-14 mainBackground" v-model="loanAmount" disabled="disabled" @input="inputAmunt" />-->
|
<span class="mr-14 font-600 textColor">{{ loanData.maxQuota || 0 }}</span>
|
<span class="font-600 textColor">USDT</span>
|
</div>
|
</div>
|
<div class="flex justify-between py-30 border-b-color">
|
<div>
|
<span class="grayText">{{ $t('还款周期') }}</span>
|
</div>
|
<div class="flex align-center">
|
<!-- <div class="font-600 textColor relative">-->
|
<div class="font-600 mr-14 textColor relative" @click="isSelectDay = !isSelectDay">
|
<span>{{ loanData.term }} {{ $t('天') }}</span>
|
<!-- <div class="selectDay" v-show="isSelectDay">-->
|
<!-- <div class="mb-20 border-b-white" v-for="(s,index) in selectDayList" :key="index" @click="selectDay(s)">-->
|
<!-- <span>{{s}}</span>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
</div>
|
<div class="w-24 h-24">
|
<img src="@/assets/image/loan/right.png" alt="right-img" class="w-full">
|
</div>
|
</div>
|
</div>
|
<div class="flex justify-between py-30 border-b-color">
|
<div>
|
<span class="grayText">{{ $t('日利率') }}</span>
|
</div>
|
<div class="flex align-center">
|
<span class="font-600 textColor">{{ loanData.dailyRate * 1 * 100 || 0 }}%</span>
|
</div>
|
</div>
|
<div class="flex justify-between py-30 border-b-color">
|
<div>
|
<span class="grayText">{{ $t('还款方式') }}</span>
|
</div>
|
<div class="flex align-center">
|
<span class="font-600 textColor text-right">{{ $t('到期一次还款') }}</span>
|
</div>
|
</div>
|
<div class="flex justify-between py-30 border-b-color">
|
<div>
|
<span class="grayText">{{ $t('利息') }}</span>
|
</div>
|
<div class="flex align-center">
|
<!-- 借款金额*日利率*借款天数-->
|
<!-- <span class="font-600 textColor">{{$bigDecimal.multiply(+loanData.maxQuota , +loanData.dailyRate) * +this.loanData.term || 0 }} USDT</span> -->
|
<span class="font-600 textColor">{{ (+loanData.maxQuota, +loanData.dailyRate) * +this.loanData.term || 0 }}
|
USDT</span>
|
</div>
|
</div>
|
<div class="flex justify-between py-30 border-b-color">
|
<div>
|
<span class="grayText">{{ $t('放款机构') }}</span>
|
</div>
|
<div class="flex align-center">
|
<span class="font-600 textColor">{{ loanData.lendingName }}</span>
|
</div>
|
</div>
|
</div>
|
<!-- 上传区域-->
|
<div class="uploadImg">
|
<div class="mb-40 textColor">
|
<span>{{ $t('信用放款(请确保图片清晰可见)') }}</span>
|
</div>
|
<div class="upload">
|
<div class="flex mt-33 mb-80 justify-between">
|
<div class="flex-1 flex flex-col text-center justify-center items-center">
|
<div class="upload-wrap">
|
<!-- <img src="@/assets/image/kyc/0.png" alt="" class="w-full"-->
|
<!-- v-if="[1, 2].includes(status) && frontFile.length === 0" />-->
|
<van-uploader v-model="frontFile" multiple :max-count="1" :disabled="isUpload" :after-read="afterRead"
|
@click-upload="onClickUpload('frontFile')" />
|
</div>
|
<div class="mt-32 font-26 h-20" style="color:#868D9A;">{{ $t('证件正面') }}</div>
|
</div>
|
<div class="flex-1 flex flex-col text-center justify-center items-center">
|
<div class="upload-wrap">
|
<!-- <img src="@/assets/image/kyc/1.png" alt="" class="w-full"-->
|
<!-- v-if="[1, 2].includes(status) && reverseFile.length === 0" />-->
|
<van-uploader v-model="reverseFile" multiple :max-count="1" :disabled="isUpload" :after-read="afterRead"
|
@click-upload="onClickUpload('reverseFile')" />
|
</div>
|
<div class="mt-32 font-26 h-20" style="color:#868D9A;">{{ $t('证件反面') }}</div>
|
</div>
|
</div>
|
<div class="flex mt-33 mb-80 justify-between">
|
<div class="flex-1 flex flex-col text-center justify-center items-center">
|
<div class="upload-wrap">
|
<!-- <img src="@/assets/image/kyc/2.png" alt="" class="w-full"-->
|
<!-- v-if="[1, 2].includes(status) && fileList.length === 0" />-->
|
<van-uploader v-model="fileList" multiple :max-count="1" :disabled="isUpload" :after-read="afterRead"
|
@click-upload="onClickUpload('fileList')" />
|
</div>
|
<div class="mt-32 font-26 h-20" style="color:#868D9A;">{{ $t('手持证件照') }}</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-32 font-26 h-20" style="color:#868D9A;">{{ $t('拍摄示例') }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 确认按钮-->
|
<div class="confirmBtn btnMain w-full py-30 text-center text-white font-400 font-32" @click="submit()">
|
<span>{{ $t('确定') }}</span>
|
</div>
|
</div>
|
<van-popup v-model:show="isSelectDay" position="bottom" :round="true">
|
<ul class="bg-white">
|
<li v-for="(day, index) in loanDeployList" class="text-center py-30" :key="index" @click="selectDay(day)">
|
<span>{{ day.term }}</span>
|
</li>
|
</ul>
|
</van-popup>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import AssetsHead from "@/components/Transform/assets-head/index.vue";
|
import { Popup, Uploader } from "vant";
|
import { _uploadImage, _getLoan, _loanApply } from "@/service/fund.api";
|
// 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) {
|
this.$toast(this.$t('请上传完整证件信息'))
|
return
|
}
|
_loanApply({
|
...this.loanData,
|
// term:this.loanData.term,
|
quota: this.loanData.maxQuota,//借贷金额 取max
|
// dailyRate: this.loanData.dailyRate,
|
// lendingInstitution:this.loanData.lendingInstitution,//放款机构名字
|
// lendingName:this.loanData.lendingName,
|
// repayment:this.loanData.repayment,//还款方式
|
// repayCycle:this.loanData.repayCycle, //还款日期
|
symbol: 'USDT',
|
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 => {
|
this.$toast(this.$t(err.msg))
|
})
|
},
|
// //防抖
|
// 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
|
})
|
},
|
},
|
mounted() {
|
this.getLoan()
|
// 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,
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
@import "@/assets/init.scss";
|
#cryptos {
|
.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;
|
|
::v-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;
|
}
|
}
|
</style>
|
