329 lines
7.5 KiB
Vue
329 lines
7.5 KiB
Vue
<template>
|
|
|
|
<!-- <div class="needLoan">needLoan</div> -->
|
|
<view class="page needLoan">
|
|
|
|
<view class="banner">
|
|
<image src="@/static/images/index/b1.png" mode="aspectFill"></image>
|
|
</view>
|
|
|
|
<view class="page-body" style="margin-top: 10px;" v-if="loanComList !== undefined && loanComList.length > 0">
|
|
<uni-collapse>
|
|
<uni-collapse-item :class="'loan-com ' + index == 0 ? 'frist' : ''" v-for="(loanCom, index) in loanComList"
|
|
:key="index" :title="loanCom.lenderName" :thumb="thumbLink(loanCom.lenderName)" :open="true">
|
|
|
|
<view class="collapse" style="height: auto">
|
|
<template v-for="(loanPro, index) in loanProductList">
|
|
<view @click="gotoDetail(loanPro, loanCom)" class="loan-pro" :key="index" v-if="loanPro.lenderName === loanCom.lenderName">
|
|
|
|
<view class="pic-view">
|
|
<image class="pic" :src="$config.imageBaseUrl + loanPro.coverImg" />
|
|
</view>
|
|
|
|
<view class="loan-pro-info" style="border-top: 1px solid #F0F0F0;">
|
|
<view class="name" style="color: #333; font-size: 14px; font-weight: bold;">
|
|
<text>{{ loanPro.loanCommodity }}</text>
|
|
</view>
|
|
|
|
<view style="display:flex; justify-content: space-between; font-size: 12px; margin-top: 5px;">
|
|
<view class="limit">
|
|
<text style="font-size: 14px;">额度：<span style="color: #ff7c12; font-size: 16px; padding: 0px 3px;">{{ loanPro.loanLimit }}</span></text>
|
|
</view>
|
|
</view>
|
|
<view style="display:flex; justify-content: space-between; font-size: 12px;">
|
|
<view class="limit">
|
|
<text style="font-size: 14px;">利率：<span style="color: #ff7c12; font-size: 16px; padding: 0px 3px;">{{ loanPro.interestRate }}</span></text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <view class="footer">
|
|
<view class="max-funds">
|
|
<view class="">
|
|
<text>接入方式</text>
|
|
</view>
|
|
</view>
|
|
<view class="loan-pro-loanRatio">
|
|
<view class="el-tag el-tag--medium">
|
|
<text>{{loanPro.accessMode === 0 ? "数据对接" : "线下对接"}}</text>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</uni-collapse-item>
|
|
</uni-collapse>
|
|
</view>
|
|
<block v-else>
|
|
<view class="empty">
|
|
<view>
|
|
<image src="@/static/images/no.png" />
|
|
</view>
|
|
<view class="text">
|
|
<text>{{ "暂无贷款产品" }}</text>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { listLoanProduct } from "@/api/financialCredit/loanProduct";
|
|
|
|
export default {
|
|
name: "needInsurance",
|
|
components: {},
|
|
props: {},
|
|
data() {
|
|
return {
|
|
loanComList: [],
|
|
loanProductList: [],
|
|
allInstitution: {},
|
|
showLoanComIndex: null,
|
|
playCollCartoonIndex: null,
|
|
waitCartoonTimeOut: null,
|
|
loading: false,
|
|
total: 0,
|
|
};
|
|
},
|
|
methods: {
|
|
getallLoanProduct() {
|
|
this.loading = true;
|
|
listLoanProduct({
|
|
status: 0,//启用的贷款信息
|
|
}).then((response) => {
|
|
this.loanProductList = response.rows;
|
|
let list = [];
|
|
this.loanProductList.forEach((element) => {
|
|
list.push({ lenderName: element.lenderName });
|
|
});
|
|
this.loanComList = [
|
|
...new Set(list.map((item) => JSON.stringify(item))),
|
|
].map((i) => JSON.parse(i));
|
|
this.loading = false;
|
|
});
|
|
},
|
|
thumbLink(lenderName) {
|
|
switch (lenderName) {
|
|
case "中国邮政储蓄银行股份有限公司":
|
|
return "../../../static/images/index/zgyz.png";
|
|
case "邮政储蓄银行":
|
|
return "../../../static/images/index/zgyz.png";
|
|
case "中国农业银行":
|
|
return "../../../static/images/index/nyyh.png";
|
|
default:
|
|
return "../../../static/images/index/no-photo.png";
|
|
}
|
|
},
|
|
//详情
|
|
gotoDetail(loanPro, loanCom) {
|
|
uni.navigateTo({
|
|
url: '/pages/index/needLoan/loanProDetail/index?id=' + loanPro.id + '&lenderName=' + loanCom.lenderName
|
|
})
|
|
}
|
|
},
|
|
|
|
// 页面周期函数--监听页面加载
|
|
onLoad() {
|
|
this.getallLoanProduct();
|
|
},
|
|
watch: {
|
|
loading: {
|
|
handler: function (val, oldVal) {
|
|
if (val === true) {
|
|
this.$modal.loading("加载中，请耐心等待...");
|
|
} else {
|
|
this.$modal.closeLoading();
|
|
}
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
// page {
|
|
// background: white;
|
|
// }
|
|
|
|
.needLoan {
|
|
// background-color: white;
|
|
height: calc(100%);
|
|
|
|
|
|
.banner {
|
|
width: 100%;
|
|
height: 320rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.loan-com {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.frist {
|
|
margin: 0px;
|
|
}
|
|
|
|
.loan-com-accordion {
|
|
background-color: white;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 2px 5px 2px 5px;
|
|
}
|
|
|
|
.loan-com-name {
|
|
background-color: white;
|
|
display: flex;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.loan-com-name text {
|
|
display: inline-block;
|
|
line-height: 25px;
|
|
}
|
|
|
|
.loan-com-name .icon-view {
|
|
width: 25px;
|
|
height: 20px;
|
|
}
|
|
|
|
.loan-com-name .icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-top: 2.5px;
|
|
}
|
|
|
|
.down-arrow {
|
|
padding-right: 13px;
|
|
position: relative;
|
|
}
|
|
|
|
.down-arrow::after {
|
|
content: " ";
|
|
display: inline-block;
|
|
height: 5px;
|
|
width: 5px;
|
|
border-width: 1px 1px 0 0;
|
|
border-color: #888888;
|
|
border-style: solid;
|
|
transform: matrix(-0.71, 0.71, -0.71, -0.71, 0, 0);
|
|
position: absolute;
|
|
top: 50%;
|
|
margin-top: 8px;
|
|
right: 14px;
|
|
transition: transform 300ms;
|
|
-moz-transition: transform 300ms;
|
|
-webkit-transition: transform 300ms;
|
|
-o-transition: transform 300ms;
|
|
}
|
|
|
|
.up-arrow::after {
|
|
content: "";
|
|
transform: matrix(0.71, -0.71, 0.71, 0.71, 0, 0);
|
|
}
|
|
|
|
.loan-pro {
|
|
display: flex;
|
|
background-color: white;
|
|
color: #a1a1a1;
|
|
padding: 0px 10px;
|
|
}
|
|
|
|
.loan-pro .pic-view {
|
|
padding: 0px 10px 5px 5px;
|
|
}
|
|
|
|
.loan-pro .pic {
|
|
width: 70px;
|
|
height: 70px;
|
|
}
|
|
|
|
.loan-pro-info {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.loan-pro .name {
|
|
color: #333;
|
|
font-size: 14px;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.loan-pro .max-funds {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.loan-pro .max-funds .money {
|
|
margin-left: 2px;
|
|
font-weight: 500;
|
|
color: orange;
|
|
}
|
|
|
|
.loan-pro .footer {
|
|
// position: absolute;
|
|
// position: relative;
|
|
position: unset;
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
font-size: 11px;
|
|
bottom: 20px;
|
|
}
|
|
|
|
.loan-pro .loan-pro-loanRatio {
|
|
margin-left: 10px;
|
|
display: flex;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.loan-pro .loan-pro-loanRatio .loanRatio {
|
|
color: orange;
|
|
}
|
|
|
|
.disabled {
|
|
* {
|
|
color: #a1a1a1;
|
|
}
|
|
|
|
background: #fcfcfc;
|
|
}
|
|
|
|
.collapse {
|
|
overflow: hidden;
|
|
transition: height 300ms;
|
|
-moz-transition: height 300ms;
|
|
/* Firefox 4 */
|
|
-webkit-transition: height 300ms;
|
|
/* Safari and Chrome */
|
|
-o-transition: height 300ms;
|
|
/* Opera */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.empty {
|
|
padding: 20rpx;
|
|
text-align: center;
|
|
transform: translateY(30%);
|
|
|
|
image {
|
|
height: 60vw;
|
|
width: 60vw;
|
|
}
|
|
|
|
.text {
|
|
color: #888;
|
|
}
|
|
}
|
|
</style> |