init
This commit is contained in:
dute7liang
444
src/views/index/home/index.vue
Normal file
444
src/views/index/home/index.vue
Normal file
@@ -0,0 +1,444 @@
|
||||
<template>
|
||||
<div>
|
||||
<j-nav-bar/>
|
||||
<!-- banner -->
|
||||
<div :style="{paddingBottom: px2vw(20)}" style="overflow: hidden;">
|
||||
<van-swipe :autoplay="3000" lazy-render>
|
||||
<van-swipe-item v-for="banner in bannerList" :key="banner.bannerUrl">
|
||||
<van-image :src="banner.bannerUrl"></van-image>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
</div>
|
||||
<div :style="{padding: '0 ' + px2vw(30) + ' ' + px2vw(20)}">
|
||||
|
||||
<div class="product">
|
||||
<div class="product-title">产品详情</div>
|
||||
|
||||
<div class="product-content">
|
||||
<div class="product-content-label">
|
||||
<div>最低日息</div>
|
||||
<div><span>{{ calLoan.loanRate }}%</span></div>
|
||||
</div>
|
||||
<div class="product-content-label">
|
||||
<div>借款额度</div>
|
||||
<div><span>¥{{ loans.loansMinAccount }}-{{ loans.loansMaxAccount }}</span></div>
|
||||
</div>
|
||||
<div class="product-content-label">
|
||||
<div>分期期限</div>
|
||||
<div><span>可选{{ loans.loansMonth.replaceAll(',', '/') }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="apply">
|
||||
<div class="apply-title yellow_color">申请金额(元)</div>
|
||||
|
||||
<div class="apply-money">{{ strip }}</div>
|
||||
|
||||
<div class="apply-strip-box">
|
||||
<div class="reduce" @click="moneyReduce(100)"></div>
|
||||
|
||||
<div class="slider">
|
||||
<van-slider bar-height="16" active-color="linear-gradient(to bottom, #f3654d, #f9ad7d)" :max="loans.loansMaxAccount" :min="loans.loansMinAccount" :step="100" v-model="strip">
|
||||
<template #button>
|
||||
<div class="custom-button"></div>
|
||||
</template>
|
||||
</van-slider>
|
||||
</div>
|
||||
|
||||
<div class="add" @click="moneyAdd(100)"></div>
|
||||
</div>
|
||||
|
||||
<div class="apply-jkqx">
|
||||
<div class="apply-jkqx-title">借款期限</div>
|
||||
<div class="apply-jkqx-item-box">
|
||||
<div v-for="lm in loans.loansMonthList" :key="lm" class="apply-jkqx-item" :class="{'checked': lm === lmChecked}" @click="lmChecked = lm">
|
||||
{{ lm }}个月
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<j-gap height="2" background="#fff"/>
|
||||
|
||||
<div class="apply-mqhk">
|
||||
<div>每期还款</div>
|
||||
<div>¥{{ calLoan.avgRepayment }}</div>
|
||||
<div>(日利率{{ calLoan.loanRate }}% 总利息¥{{ calLoan.totalInterest }})</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="notice">
|
||||
<van-icon :name="getAssetsImages('home/xlb.png')" size="30"/>
|
||||
<div>{{ loansUser.time }}</div>
|
||||
<div style="color: #ec6401">{{ loansUser.phone }}</div>
|
||||
<div>成功借款</div>
|
||||
<div style="color: #BC7C1C; font-weight: 600;">¥{{ loansUser.amount }}</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="xieyi">
|
||||
<van-checkbox v-model="checked" :icon-size="px2vw(28)" style="align-items: baseline" checked-color="linear-gradient(to right, #F9D88D, #D2A64C)">
|
||||
我已阅读并同意
|
||||
<span class="yellow_color1" @click.stop="go('authAgreement')">《委托授权协议》</span>
|
||||
<span class="yellow_color1" @click.stop="go('serviceAgreement')">《平台服务协议》</span>
|
||||
<span class="yellow_color1" @click.stop="go('loansAgreement')">《借款协议》</span>
|
||||
</van-checkbox>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="padding: 0 20px 0">
|
||||
<van-button
|
||||
color="linear-gradient(to right, #D2A64C, #F9D88D)"
|
||||
round
|
||||
style="width: 100%; "
|
||||
@click.stop="immediateBorrowing"
|
||||
>
|
||||
立即借款
|
||||
</van-button>
|
||||
</div>
|
||||
|
||||
<j-gap :height="170" opacity/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {debounce, getAssetsImages, px2vw} from "@/utils";
|
||||
import {computed, onMounted, reactive, ref,onUnmounted} from "vue";
|
||||
import {useRouter} from "vue-router";
|
||||
import {useUserStore} from "@/store/modules/user";
|
||||
import {getCalLoan, getHomeInfo, getLoansInfo, getLoansUser, getUserInfo} from "@/api";
|
||||
import {resetData} from "@/utils/dataUtil";
|
||||
import {watch} from "vue-demi";
|
||||
import {showToast} from "vant";
|
||||
import JGap from "@/components/JGap/JGap.vue";
|
||||
|
||||
const user = useUserStore()
|
||||
const router = useRouter()
|
||||
|
||||
const bannerList = [
|
||||
{
|
||||
bannerUrl: getAssetsImages('home/banner_home.png')
|
||||
}
|
||||
]
|
||||
|
||||
const checked = ref(false);
|
||||
const strip = ref(3000)
|
||||
const lmChecked = ref('')
|
||||
|
||||
|
||||
const moneyReduce = (step: number) => {
|
||||
strip.value-=step
|
||||
}
|
||||
|
||||
const moneyAdd = (step: number) => {
|
||||
strip.value+=step
|
||||
}
|
||||
|
||||
const go = (key) => {
|
||||
// agreement
|
||||
router.push({
|
||||
path: '/agreement',
|
||||
query: {
|
||||
key: key
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const immediateBorrowing = () => {
|
||||
if (checked.value) {
|
||||
if (userInfo.infoFlag && userInfo.bankFlag && userInfo.cardFlag) {
|
||||
router.push({
|
||||
path: '/loansInfo',
|
||||
query: {
|
||||
"totalLoanMoney": strip.value,
|
||||
"totalMonth": lmChecked.value
|
||||
}
|
||||
})
|
||||
} else {
|
||||
showToast('请先填写个人资料')
|
||||
router.push({
|
||||
path: '/userInfo'
|
||||
})
|
||||
}
|
||||
return
|
||||
}
|
||||
showToast('请阅读并同意相关协议')
|
||||
}
|
||||
|
||||
const loans = reactive({
|
||||
dueDate: 0,
|
||||
id: 0,
|
||||
loansInitAccount: 0,
|
||||
loansInitMonth: "",
|
||||
loansMaxAccount: 0,
|
||||
loansMinAccount: 0,
|
||||
loansMonth: "",
|
||||
loansMonthList: [],
|
||||
serviceRate: "",
|
||||
serviceRateList: [],
|
||||
})
|
||||
const _getLoansInfo = () => {
|
||||
getLoansInfo().then(res => {
|
||||
resetData(loans, res)
|
||||
loans.loansMonthList.newPush(loans.loansMonth.split(','))
|
||||
loans.serviceRateList.newPush(loans.serviceRate.split(','))
|
||||
lmChecked.value = loans.loansInitMonth
|
||||
strip.value = loans.loansInitAccount
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const homeInfo = reactive({
|
||||
"id": "1",
|
||||
"homeTitle": "123123",
|
||||
"bannerOne": "http://localhost:8082/profile/upload/2023/11/29/5ea3a159-81e9-4630-a72d-3ff2ce68b306.jpg",
|
||||
"commonSeal": null
|
||||
})
|
||||
const _getHomeInfo = () => {
|
||||
getHomeInfo().then(res => {
|
||||
resetData(homeInfo, res)
|
||||
bannerList.newPush({
|
||||
bannerUrl: homeInfo.bannerOne
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const calLoan = reactive({
|
||||
"avgRepayment": 0,
|
||||
"firstRepayment": 0,
|
||||
"loanRate": 0,
|
||||
"totalInterest": 0,
|
||||
"totalLoanMoney": 0,
|
||||
"totalMonth": 0,
|
||||
"totalRepayment": 0
|
||||
})
|
||||
|
||||
const params = computed(() => {
|
||||
return {
|
||||
"totalLoanMoney": strip.value,
|
||||
"totalMonth": lmChecked.value
|
||||
}
|
||||
})
|
||||
|
||||
watch(params, () => {
|
||||
if (params.value.totalLoanMoney && params.value.totalMonth) {
|
||||
_getCalLoan()
|
||||
}
|
||||
})
|
||||
|
||||
const _getCalLoan = debounce(() => {
|
||||
getCalLoan(params.value).then(res => {
|
||||
resetData(calLoan, res)
|
||||
})
|
||||
}, 200)
|
||||
|
||||
|
||||
const loansUser = reactive({
|
||||
amount : "48000",
|
||||
phone : "153****0552",
|
||||
time : "2023/11/27"
|
||||
})
|
||||
|
||||
const timer = ref(0)
|
||||
const _getLoansUser = () => {
|
||||
getLoansUser().then(res => {
|
||||
resetData(loansUser, res)
|
||||
})
|
||||
timer.value = setInterval(() => {
|
||||
getLoansUser().then(res => {
|
||||
resetData(loansUser, res)
|
||||
})
|
||||
}, 30000);
|
||||
}
|
||||
|
||||
const userInfo = reactive({
|
||||
cardFlag: false,
|
||||
infoFlag: false,
|
||||
bankFlag: false
|
||||
})
|
||||
const _getUserInfo = () => {
|
||||
getUserInfo().then(res => {
|
||||
resetData(userInfo, res)
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
_getLoansInfo()
|
||||
_getHomeInfo()
|
||||
_getLoansUser()
|
||||
_getUserInfo()
|
||||
})
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer.value);
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.product {
|
||||
&-title {
|
||||
font-weight: bold;
|
||||
font-size: 40px;
|
||||
padding: 0 0 20px 0;
|
||||
}
|
||||
|
||||
&-content {
|
||||
background: url("../../../assets/images/home/detail_bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #a2a2a2;
|
||||
padding: 30px;
|
||||
|
||||
&-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 7px 0;
|
||||
|
||||
span {
|
||||
color: #F9BF3A
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.apply {
|
||||
background: url("../../../assets/images/home/apply_bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 30px;
|
||||
margin: 30px 0 15px;
|
||||
&-title {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 34px;
|
||||
&:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
height: 1px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 12px;
|
||||
background-image: -webkit-gradient(linear, left top, right top, from(#fbde60), to(#e46f00));
|
||||
background-image: linear-gradient(to right, #fbde60, #e46f00);
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
height: 1px;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 12px;
|
||||
background-image: linear-gradient(to right, #e46f00, #fbde60);
|
||||
}
|
||||
}
|
||||
|
||||
&-money {
|
||||
font-size: 80px;
|
||||
text-align: center;
|
||||
color: #5c2d00;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&-strip-box{
|
||||
margin-bottom: 60px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.reduce {
|
||||
background: url("../../../assets/images/home/strip-reduce.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.add {
|
||||
background: url("../../../assets/images/home/strip-add.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.slider {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
background: url("../../../assets/images/home/strip-block.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
height: 58px;
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
&-jkqx {
|
||||
margin-bottom: 40px;
|
||||
&-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #141414;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
&-item-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.apply-jkqx-item{
|
||||
border-radius: 40px;
|
||||
text-align: center;
|
||||
background: #fffbba;
|
||||
padding: 4px 16px;
|
||||
color: #BC7C1C;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.checked {
|
||||
background-image: linear-gradient(to bottom, #f3654d, #f9ad7d);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
&-mqhk {
|
||||
margin-top: 40px;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
font-size: 28px;
|
||||
|
||||
div:nth-child(1) {
|
||||
font-size: 25px;
|
||||
font-weight: 600;
|
||||
color: #141414;
|
||||
}
|
||||
div:nth-child(2) {
|
||||
color: #b25700;
|
||||
}
|
||||
|
||||
div:last-child {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notice {
|
||||
background-image: linear-gradient(to right, #fae1cf, #fcfaf8);
|
||||
padding: 8px 20px;
|
||||
margin: 0 30px;
|
||||
border-radius: 40px;
|
||||
font-size: 24px;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
padding: 30px 35px;
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user