716 lines
16 KiB
Vue
716 lines
16 KiB
Vue
<template>
|
|
<!-- <div class="loanProDetail">loanProDetail</div> -->
|
|
<view class="page loanProDetail">
|
|
<component :is="'style'">
|
|
:root { --height-to-be-removed: {{ heightToBeRemoved + "px" }}; }
|
|
</component>
|
|
<view class="page-head" :ref="'pageHead'" @click="heiToBeRem">
|
|
<view class="head-top">
|
|
<view v-if="true" class="image-view">
|
|
<image :src="thumbLink(options.lenderName)" />
|
|
</view>
|
|
<view class="loan-pro-info">
|
|
<view class="loan-pro-name">
|
|
<text>{{ loanProduct.loanCommodity }}</text>
|
|
</view>
|
|
<view class="bank">
|
|
<text>{{ options.lenderName }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="page-body">
|
|
<view class="body-view" v-if="true">
|
|
<scroll-view
|
|
class="top-menu-view"
|
|
scroll-x="true"
|
|
:scroll-into-view="tabCurrent"
|
|
:ref="'topMenuView'"
|
|
>
|
|
<view
|
|
class="menu-topic-view"
|
|
v-for="item in tabs"
|
|
:id="'tabNum' + item.id"
|
|
:key="item.id - 1"
|
|
@click="swichMenu(item.id - 1)"
|
|
>
|
|
<view
|
|
:class="
|
|
currentTab == item.id - 1 ? 'menu-topic-act' : 'menu-topic'
|
|
"
|
|
>
|
|
<text class="menu-topic-text">{{ item.name }}</text>
|
|
<view class="menu-topic-bottom">
|
|
<view class="menu-topic-bottom-color" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<!-- 内容 -->
|
|
<swiper
|
|
class="swiper-box-list"
|
|
:current="currentTab"
|
|
@change="swiperChange"
|
|
>
|
|
<swiper-item
|
|
class="swiper-topic-list"
|
|
v-for="(item, index) in tabs"
|
|
:key="index"
|
|
>
|
|
<scroll-view class="tabs-item" scroll-y="true">
|
|
<block v-if="item.name === '产品介绍'">
|
|
<!-- <block> -->
|
|
<view
|
|
class="loan-card pro-introduce"
|
|
v-for="(loanDetail, loanDetailIndex) in productPresentation"
|
|
:key="loanDetailIndex"
|
|
>
|
|
<view class="card-title">
|
|
<text>{{ loanDetail.title }}</text>
|
|
</view>
|
|
<view class="card-body">
|
|
<view
|
|
class="empty"
|
|
v-if="
|
|
loanProduct[loanDetail.name] === null ||
|
|
loanProduct[loanDetail.name] === '' ||
|
|
loanProduct[loanDetail.name] === undefined
|
|
"
|
|
><text>暂无内容</text></view
|
|
>
|
|
<view v-else
|
|
><text>{{ loanProduct[loanDetail.name] }}</text></view
|
|
>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<block v-if="item.name === '贷款说明'">
|
|
<view
|
|
class="
|
|
loan-card
|
|
pro-loan-details
|
|
loanDetailIndex
|
|
!==
|
|
0
|
|
?
|
|
'mar-top'
|
|
:
|
|
''}}
|
|
"
|
|
v-for="(loanDetail, loanDetailIndex) in LoanSpecification"
|
|
:key="loanDetailIndex"
|
|
>
|
|
<view class="card-title">
|
|
<text>{{ loanDetail.title }}</text>
|
|
</view>
|
|
<view class="card-body">
|
|
<view
|
|
class="empty"
|
|
v-if="
|
|
loanProduct[loanDetail.name] === null ||
|
|
loanProduct[loanDetail.name] === '' ||
|
|
loanProduct[loanDetail.name] === undefined
|
|
"
|
|
><text>暂无内容</text></view
|
|
>
|
|
<text>{{ loanProduct[loanDetail.name] }}</text>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<block
|
|
v-if="
|
|
item.name === '产品描述' &&
|
|
loanProduct.introduction !== null &&
|
|
loanProduct.introduction !== undefined &&
|
|
loanProduct.introduction !== ''
|
|
"
|
|
>
|
|
<view class="loan-card pro-procedure">
|
|
<view class="loan-card card-body">
|
|
<div
|
|
class="introduction"
|
|
v-html="loanProduct.introduction"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<block v-else-if="item.name === '产品描述'">
|
|
<view
|
|
class="loan-card card-body"
|
|
style="text-align: center; padding: 10px; color: #717d71"
|
|
>
|
|
<view class="empty">
|
|
<text>暂无内容</text>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</scroll-view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
|
|
<view class="page-foot">
|
|
<view class="apply-for">
|
|
<view class="app-for-relat"></view>
|
|
<navigator
|
|
:url="'#'"
|
|
@click="navigator(options)"
|
|
class="app-for-fixed"
|
|
>
|
|
<view class="center">
|
|
<text>申请贷款</text>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
listLoanProduct,
|
|
getLoanProduct,
|
|
delLoanProduct,
|
|
addLoanProduct,
|
|
updateLoanProduct,
|
|
changeProductEnable,
|
|
} from "@/api/financialCredit/loanProduct";
|
|
import { selectBaseInfo } from "@/api/enterprise/baseInfo";
|
|
import { selectUserEntity } from "@/api/enterprise/userEntity";
|
|
|
|
export default {
|
|
name: "loanProDetail",
|
|
components: {},
|
|
props: {},
|
|
data() {
|
|
return {
|
|
haveEnterprise: false,
|
|
heightToBeRemoved: 125,
|
|
currentTab: 0,
|
|
tabCurrent: "tabNum1",
|
|
remheiClas: [".page-head", ".app-for-fixed", ".top-menu-view"],
|
|
tabs: [
|
|
{
|
|
id: 1,
|
|
name: "产品介绍",
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "贷款说明",
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "产品描述",
|
|
},
|
|
],
|
|
options: {},
|
|
loanProduct: {},
|
|
loanCom: {},
|
|
loanProductList: [],
|
|
LoanSpecification: [
|
|
{
|
|
title: "贷款期限说明",
|
|
name: "loanTerm",
|
|
},
|
|
{
|
|
title: "贷款额度",
|
|
name: "loanLimit",
|
|
},
|
|
{
|
|
title: "利率说明",
|
|
name: "interestRate",
|
|
},
|
|
{
|
|
title: "申请所需资料",
|
|
name: "materials",
|
|
},
|
|
{
|
|
title: "还款方式",
|
|
name: "repayMethod",
|
|
},
|
|
{
|
|
title: "担保形式",
|
|
name: "guarantee",
|
|
},
|
|
// {
|
|
// title: "",
|
|
// name: "",
|
|
// },
|
|
// {
|
|
// title: "",
|
|
// name: "",
|
|
// },
|
|
// {
|
|
// title: "",
|
|
// name: "",
|
|
// },
|
|
// {
|
|
// title: "",
|
|
// name: "",
|
|
// },
|
|
],
|
|
productPresentation: [
|
|
{
|
|
title: "产品优势",
|
|
name: "advantages",
|
|
},
|
|
{
|
|
title: "贷款条件",
|
|
name: "loanConditions",
|
|
},
|
|
{
|
|
title: "办理渠道",
|
|
name: "applicationChannel",
|
|
},
|
|
{
|
|
title: "适用对象",
|
|
name: "applicationUser",
|
|
},
|
|
// {
|
|
// title: "",
|
|
// name: "",
|
|
// },
|
|
// {
|
|
// title: "",
|
|
// name: "",
|
|
// },
|
|
],
|
|
};
|
|
},
|
|
watch: {
|
|
haveEnterprise: {
|
|
handler: function (val, oldVal) {
|
|
if (this.haveEnterprise === true) {
|
|
this.getBaseInfo();
|
|
}
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
mounted() {
|
|
this.$nextTick(function () {
|
|
let removeHeight = 0;
|
|
for (let remheicla of this.remheiClas) {
|
|
let pageHead = uni.createSelectorQuery().select(remheicla);
|
|
pageHead
|
|
.fields({ size: true }, (data) => {
|
|
removeHeight = removeHeight + data.height;
|
|
})
|
|
.exec();
|
|
}
|
|
this.heightToBeRemoved = removeHeight;
|
|
});
|
|
},
|
|
onLoad(options) {
|
|
this.getRouter(options);
|
|
this.getById();
|
|
this.getEnterprise()
|
|
},
|
|
methods: {
|
|
confirmCreateEnterPrise() {
|
|
this.$modal.confirm("请先创建经营主体").then((res) => {
|
|
if (res === true) {
|
|
this.$tab.navigateTo("/pages/formPages/enterprise/baseInfo/index");
|
|
}
|
|
});
|
|
},
|
|
navigator(item, isNew) {
|
|
if (this.haveEnterprise === true) {
|
|
this.$tab.navigateTo("/pages/formPages/loan/applyLoanForm/index?loanProductId=" +item.id +"&baseinfoId=" +item.baseinfoId)
|
|
.then((res) => {
|
|
if (res[0] !== null) {
|
|
this.$modal.showToast("模块建设中~");
|
|
}
|
|
});
|
|
} else if (!this.$auth.hasRole("admin") && this.$auth.hasRole("enterprise")) {
|
|
this.confirmCreateEnterPrise();
|
|
} else {
|
|
this.$modal.confirm("非主体用户无法拥有主体！").then(() => {});
|
|
}
|
|
},
|
|
//查询主体用户关联信息
|
|
getEnterprise() {
|
|
selectUserEntity().then((response) => {
|
|
if (response.data.length !== 0) {
|
|
this.haveEnterprise = true;
|
|
} else {
|
|
this.haveEnterprise = false;
|
|
}
|
|
});
|
|
},
|
|
//查询主体信息
|
|
getBaseInfo() {
|
|
selectBaseInfo().then((response) => {
|
|
let baseInfo = response.data;
|
|
this.$set(this.options, "baseinfoId", baseInfo.id);
|
|
});
|
|
},
|
|
getMsg(yes_no) {
|
|
if (yes_no === true) {
|
|
this.$modal.msgSuccess("提交申请成功");
|
|
} else if (yes_no === false) {
|
|
this.$modal.msgSuccess("申请修改成功");
|
|
} else if (yes_no === undefined) {
|
|
} else {
|
|
this.$modal.msgError("提交申请失败");
|
|
}
|
|
},
|
|
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";
|
|
}
|
|
},
|
|
swichMenu(id) {
|
|
this.currentTab = id;
|
|
this.tabCurrent = "tabNum" + id;
|
|
},
|
|
swiperChange(e) {
|
|
let index = e.detail.current;
|
|
this.swichMenu(index);
|
|
},
|
|
async getRouter(options) {
|
|
this.options = options;
|
|
},
|
|
getById() {
|
|
this.$modal.loading("加载中，请耐心等待...");
|
|
getLoanProduct(this.options.id).then((res) => {
|
|
this.loanProduct = res.data;
|
|
this.$modal.closeLoading();
|
|
});
|
|
},
|
|
},
|
|
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
// --heightToBeRemoved:heighttoberemoved
|
|
.page-head {
|
|
padding: 0px;
|
|
background-color: white;
|
|
}
|
|
|
|
.page-body {
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
.page-foot {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
// height: 80rpx;
|
|
}
|
|
|
|
.head-top {
|
|
display: flex;
|
|
text-align: left;
|
|
position: relative;
|
|
padding: 10px;
|
|
}
|
|
|
|
.head-top::after {
|
|
content: "";
|
|
border-bottom: 1rpx #e0e0e0 solid;
|
|
position: absolute;
|
|
bottom: -5rpx;
|
|
left: 0rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
.image-view {
|
|
width: 240rpx;
|
|
height: 240rpx;
|
|
}
|
|
|
|
.image-view image {
|
|
width: 240rpx;
|
|
height: 240rpx;
|
|
}
|
|
|
|
.loan-pro-info {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.loan-pro-name {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.bank {
|
|
margin-top: 10px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.head-bottom {
|
|
margin-top: 15rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
font-size: 35rpx;
|
|
}
|
|
|
|
.head-bottom > view {
|
|
width: 33%;
|
|
}
|
|
|
|
.head-bottom > view > view {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.head-bottom .label {
|
|
color: #5a5a5a;
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
.head-bottom .pro-mar .content .rate {
|
|
color: orange;
|
|
}
|
|
|
|
.weui-tabs-bar__content {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
position: relative;
|
|
}
|
|
|
|
.weui-tabs-bar__content::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
border-bottom: #f1f1f1 2px solid;
|
|
bottom: 0px;
|
|
}
|
|
|
|
.weui-tabs-bar__title {
|
|
position: relative;
|
|
}
|
|
|
|
.weui-tabs .weui-tabs-swiper {
|
|
height: calc(100vh - 100px) !important;
|
|
}
|
|
|
|
.weui-tabs swiper {
|
|
height: 100vh !important;
|
|
|
|
overflow: unset;
|
|
}
|
|
|
|
.weui-tabs swiper-item {
|
|
height: auto !important;
|
|
overflow: unset;
|
|
}
|
|
|
|
.tab-bar-title_selected {
|
|
color: #1B7AF5;
|
|
}
|
|
|
|
.swiper-topic-list {
|
|
color: #1B7AF5;
|
|
}
|
|
|
|
.tab-content {
|
|
height: 100vh;
|
|
overflow: scroll;
|
|
}
|
|
|
|
.loan-card {
|
|
width: 100%;
|
|
background-color: white;
|
|
border: 0px !important;
|
|
}
|
|
|
|
.mar-top {
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
.card-title {
|
|
margin: 15rpx;
|
|
margin-left: 0;
|
|
padding: 15rpx 15rpx 15rpx 55rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.card-title::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 10rpx;
|
|
height: 40rpx;
|
|
background-color: #1B7AF5;
|
|
display: inline-block;
|
|
line-height: 20rpx;
|
|
margin-left: -30rpx;
|
|
transform: translateY(5%);
|
|
}
|
|
|
|
.card-title::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100vw;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
border-bottom: #f1f1f1 1px solid;
|
|
}
|
|
|
|
.card-body {
|
|
font-size: 15px;
|
|
margin: 15rpx;
|
|
margin-left: 0;
|
|
padding: 10rpx 15rpx 30rpx 40rpx;
|
|
position: relative;
|
|
border-bottom: #ebebeb 1px solid;
|
|
color: #7a7a7a;
|
|
|
|
.empty {
|
|
color: #bbb;
|
|
}
|
|
|
|
.introduction {
|
|
// padding-right: 25rpx;
|
|
width: calc(100vw - 80rpx);
|
|
|
|
:not(not) {
|
|
max-width: calc(100vw - 80rpx);
|
|
word-wrap: break-word;
|
|
white-space: break-spaces;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* .card-body{
|
|
display:;
|
|
position: fixed;
|
|
} */
|
|
|
|
.apply-for {
|
|
height: 100%;
|
|
width: 100vw;
|
|
position: relative;
|
|
}
|
|
|
|
.apply-for view {
|
|
height: 100%;
|
|
}
|
|
|
|
.apply-for .app-for-fixed {
|
|
bottom: 0px;
|
|
width: 100%;
|
|
height: 6vh;
|
|
position: fixed;
|
|
background-color: #1B7AF5;
|
|
font-size: 15px;
|
|
color: white;
|
|
|
|
.center {
|
|
position: relative;
|
|
|
|
text {
|
|
position: absolute;
|
|
margin-top: 1vh;
|
|
// margin: auto 0px;
|
|
// transform: translateY(50%);
|
|
// transform: rotateX(5);
|
|
|
|
/deep/span {
|
|
margin-left: -100%;
|
|
// margin-top: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-body {
|
|
position: relative;
|
|
|
|
.body-view {
|
|
position: relative;
|
|
// top: ;
|
|
.top-menu-view {
|
|
z-index: 3;
|
|
display: flex;
|
|
// position: fixed;
|
|
// top: 100rpx;
|
|
top: calc(44px + env(safe-area-inset-top));
|
|
left: 0;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
height: 86rpx;
|
|
line-height: 86rpx;
|
|
border-top: 1rpx solid #d8dbe6;
|
|
|
|
.menu-topic-view {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
height: 86rpx;
|
|
position: relative;
|
|
|
|
.menu-topic-text {
|
|
font-size: 30rpx;
|
|
color: #303133;
|
|
padding: 10rpx 40rpx;
|
|
}
|
|
|
|
.menu-topic-bottom {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
|
|
.menu-topic-bottom-color {
|
|
width: 40rpx;
|
|
height: 4rpx;
|
|
}
|
|
}
|
|
|
|
.menu-topic-act .menu-topic-bottom {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.menu-topic-act .menu-topic-bottom-color {
|
|
background: #3d7eff;
|
|
min-height: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.swiper-box-list {
|
|
width: 100%;
|
|
padding-top: 11px;
|
|
flex: 1;
|
|
background-color: #ffffff;
|
|
// height: 100px;
|
|
height: calc(
|
|
100vh -
|
|
calc(
|
|
var(--height-to-be-removed) + 6px + var(--status-bar-height) +
|
|
calc(44px + env(safe-area-inset-top))
|
|
)
|
|
);
|
|
|
|
.swiper-topic-list {
|
|
width: 100%;
|
|
// height: calc(calc(auto) + calc(44px));
|
|
// padding-bottom: 44px;
|
|
|
|
.tabs-item {
|
|
height: calc(
|
|
100vh -
|
|
calc(
|
|
var(--height-to-be-removed) + 6px + 11px +
|
|
var(--status-bar-height) + calc(44px + env(safe-area-inset-top))
|
|
)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |