|
<template>
|
<view class="loan-container" :style="{paddingTop: statusBarHeight+'px'}">
|
|
<view class="info">
|
<!-- 顶部卡片区域 -->
|
<view class="loan-card">
|
|
<view class="loan-amount">
|
<text class="amount-label">最高可获取额度（元）</text>
|
<text class="amount-value">200,000</text>
|
</view>
|
<view class="loan-info">
|
<text class="info-text">年利率（单利）7.2%起,期限3-24期</text>
|
</view>
|
<button class="apply-btn" @click="handleApply">立即获取额度</button>
|
</view>
|
|
<!-- 流程步骤 -->
|
<view class="process-steps">
|
<view class="step-item">
|
<text class="step-num">1</text>
|
<text class="step-text">提交申请</text>
|
</view>
|
<view style="display: flex;flex-direction: row">
|
<image style="width:16rpx;height: 16rpx;" :src="`${$images}/static/img/loan/new/icon-to-2.png`" class="step-arrow"></image>
|
<image style="width:16rpx;height: 16rpx;" :src="`${$images}/static/img/loan/new/icon-to-2.png`" class="step-arrow"></image>
|
</view>
|
<view class="step-item">
|
<text class="step-num">2</text>
|
<text class="step-text">提供担保额度</text>
|
</view>
|
<view style="display: flex;flex-direction: row">
|
<image style="width:16rpx;height: 16rpx;" :src="`${$images}/static/img/loan/new/icon-to-2.png`" class="step-arrow"></image>
|
<image style="width:16rpx;height: 16rpx;" :src="`${$images}/static/img/loan/new/icon-to-2.png`" class="step-arrow"></image>
|
</view>
|
<view class="step-item">
|
<text class="step-num">3</text>
|
<text class="step-text">银行放款</text>
|
</view>
|
</view>
|
|
|
|
<!-- 安全保障 -->
|
<view class="security-features" >
|
<view class="feature-item">
|
<view class="feature-icon-box"> <image :src="`${$images}/static/img/loan/new/icon-xxaq.png`" class="feature-icon"></image></view>
|
<view class="feature-title">信息安全</view>
|
<view class="feature-desc">大安全架构系统</view>
|
</view>
|
<view class="feature-item">
|
<view class="feature-icon-box"> <image :src="`${$images}/static/img/loan/new/icon-sjbh.png`" class="feature-icon"></image></view>
|
<view class="feature-title">数据保护</view>
|
<view class="feature-desc">全流程可信密态化计算</view>
|
</view>
|
<view class="feature-item">
|
<view class="feature-icon-box"> <image :src="`${$images}/static/img/loan/new/icon-hgjg.png`" class="feature-icon"></image></view>
|
<view class="feature-title">合规机构</view>
|
<view class="feature-desc">大持牌金融机构</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 底部联系方式 -->
|
<view class="contact-info">
|
<view class="contact-info-back">
|
<view class="contact-title">联系在线客服</view>
|
<view class="contact-phone">
|
|
<view style="text-align: center;font-size: 24rpx">热线：{{$customerServicePhone}}</view>
|
<!-- <rich-text :nodes="phone" ></rich-text>-->
|
</view>
|
</view>
|
<view class="disclaimer">
|
<rich-text :nodes="disclaimer" style="font-weight: 500"></rich-text>
|
</view>
|
</view>
|
|
<uv-tabbar :value="value" @change="index=>value = index" :border="false">
|
<uv-tabbar-item text="首页" icon="home-fill"></uv-tabbar-item>
|
<uv-tabbar-item text="我的" icon="account" @click="toMe"></uv-tabbar-item>
|
</uv-tabbar>
|
</view>
|
</template>
|
|
<script >
|
import {checkUserStatus, getProtocol} from "@/api/modules/user";
|
export default {
|
data(){
|
return {
|
value:0,
|
statusBarHeight:0,
|
disclaimer:null,
|
phone:null,
|
info:{}
|
}
|
},
|
onLoad() {
|
this.statusBarHeight = uni.getStorageSync('statusBarHeight')
|
getProtocol('BOTTOM_TEXT_KDN').then(res=>{
|
this.disclaimer = res.content;
|
})
|
/* getProtocol(this.$Protocol.service).then(res=>{
|
this.phone = res.content;
|
})*/
|
checkUserStatus().then(res=>{
|
this.info = res;
|
uni.setStorageSync('customerId', res.customerId);
|
console.log(this.info);
|
});
|
|
},
|
methods: {
|
handleApply(){
|
if(this.info.infoStatus===null){
|
uni.navigateTo({
|
url: '/pages/attestation/index'
|
});
|
}
|
if(this.info.infoStatus==1){
|
uni.navigateTo({
|
url: '/pages/apply/steps-b'
|
});
|
}
|
if(this.info.infoStatus==2){
|
uni.navigateTo({
|
url: '/pages/progress/index'
|
});
|
}
|
if(this.info.infoStatus==3){
|
uni.navigateTo({
|
url: '/pages/apply/steps-b'
|
});
|
}
|
if(this.info.infoStatus==4){
|
uni.navigateTo({
|
url: '/pages/apply/steps-c'
|
});
|
}
|
},
|
toMe(){
|
uni.redirectTo({
|
url: '/pages/me/index'
|
})
|
}
|
}
|
};
|
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
.info {
|
background: url(#{$iconHttps}/static/img/loan/new/info-bkg3.png) no-repeat top center;
|
background-size: 100% auto;
|
border-radius: 0.625rem;
|
}
|
.loan-container {
|
padding: 20rpx;
|
background: url(#{$iconHttps}/static/img/index/back.png) no-repeat top center;
|
background-size: 100% auto;
|
}
|
|
.loan-card {
|
|
border-radius: 20rpx;
|
padding: 30rpx 52rpx;
|
color: #fff;
|
position: relative;
|
margin-bottom: 30rpx;
|
|
.service-tag {
|
position: absolute;
|
right: 20rpx;
|
top: 20rpx;
|
background-color: rgba(255, 255, 255, 0.2);
|
padding: 4rpx 12rpx;
|
border-radius: 20rpx;
|
font-size: 24rpx;
|
}
|
|
.loan-amount {
|
margin-top: 20rpx;
|
|
.amount-label {
|
font-size: 28rpx;
|
display: block;
|
font-weight: 600;
|
}
|
|
.amount-value {
|
font-size: 108rpx;
|
line-height: 127rpx;
|
font-weight: bold;
|
margin: 20rpx 0;
|
display: block;
|
}
|
}
|
|
.loan-info {
|
margin: 20rpx 0;
|
|
.info-text{
|
color: #D8D8D8;
|
font-size: 24rpx;
|
}
|
}
|
|
.apply-btn {
|
width: 100%;
|
height: 108rpx;
|
margin: 40rpx auto 0;
|
background: linear-gradient( 270deg, #F2C38F 0%, #F6DCB8 100%), #FFFFFF;
|
font-weight: 600;
|
color: #854029;
|
line-height: 108rpx;
|
border-radius: 54rpx;
|
font-size: 34rpx;
|
}
|
}
|
|
|
.process-steps {
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
align-items: center;
|
padding: 30rpx;
|
border-radius: 20rpx;
|
|
.step-item {
|
text-align: center;
|
display: flex;
|
flex-direction: row;
|
.step-num {
|
text-align: center;
|
display: inline-block;
|
width: 40rpx;
|
height: 40rpx;
|
line-height: 40rpx;
|
border-radius: 50%;
|
background-color: #2865F2;
|
color: #fff;
|
font-size: 24rpx;
|
}
|
|
.step-text {
|
font-size: 24rpx;
|
color: #2865F2;
|
margin-left: 10rpx;
|
display: flex;
|
justify-content: center;
|
flex-direction: column;
|
}
|
}
|
|
.step-arrow {
|
color: #999;
|
font-size: 24rpx;
|
}
|
}
|
|
|
|
.security-features {
|
display: flex;
|
justify-content: space-between;
|
padding: 30rpx;
|
border-radius: 20rpx;
|
margin-bottom: 30rpx;
|
flex-direction: row;
|
|
.feature-item {
|
text-align: center;
|
|
.feature-icon-box{
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
.feature-icon {
|
width: 80rpx;
|
height: 80rpx;
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
|
|
.feature-title {
|
text-align: center;
|
font-size: 28rpx;
|
color: #252938;
|
margin-bottom: 14rpx;
|
display: block;
|
font-weight: 600;
|
}
|
|
.feature-desc {
|
text-align: center;
|
font-size: 24rpx;
|
color: #999;
|
display: block;
|
}
|
}
|
}
|
|
.contact-info {
|
background-color: #fff;
|
padding: 30rpx;
|
border-radius: 20rpx;
|
.contact-info-back{
|
background: #F6F4F4;
|
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
padding: 20rpx 0;
|
color: #252938;
|
}
|
|
|
.contact-title {
|
font-size: 24rpx;
|
color: #252938;
|
|
font-weight: 700;
|
text-align: center;
|
margin-bottom: 10rpx;
|
}
|
|
.contact-phone {
|
|
text-align: center;
|
font-size: 24rpx;
|
color: #252938;
|
}
|
|
.disclaimer {
|
margin-top: 18rpx;
|
|
text-align: center;
|
font-size: 24rpx;
|
color: #999;
|
line-height: 1.6;
|
margin-bottom: 20rpx;
|
}
|
|
.license {
|
font-size: 24rpx;
|
color: #999;
|
text-align: center;
|
}
|
}
|
</style>
|
