760 lines
18 KiB
Vue
760 lines
18 KiB
Vue
<template>
|
||
<!-- <div class="insurProDetail">insurProDetail</div> -->
|
||
<view class="page insurProDetail">
|
||
<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="false" class="image-view">
|
||
<image :src="thumbLink(options.lenderName)" />
|
||
</view>
|
||
<view class="insur-pro-info">
|
||
<view class="insur-pro-name">
|
||
<text>{{ insurProduct.insuranceName }}</text>
|
||
</view>
|
||
<view class="bank">
|
||
<text>{{ options.companyName }}</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="insur-card pro-introduce"
|
||
v-for="(insurDetail, insurDetailIndex) in productPresentation"
|
||
:key="insurDetailIndex"
|
||
>
|
||
<view class="card-title">
|
||
<text>{{ insurDetail.title }}</text>
|
||
</view>
|
||
<view class="card-body">
|
||
<view
|
||
class="empty"
|
||
v-if="
|
||
insurProduct[insurDetail.name] === null ||
|
||
insurProduct[insurDetail.name] === '' ||
|
||
insurProduct[insurDetail.name] === undefined
|
||
"
|
||
><text>暂无内容</text></view
|
||
>
|
||
<view v-else
|
||
><text>{{ insurProduct[insurDetail.name] }}</text></view
|
||
>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<block v-if="item.name === '保险说明'">
|
||
<view
|
||
class="insur-card pro-insur-details insurDetailIndex !== 0 ? 'mar-top' : ''}}"
|
||
v-for="(insurDetail, insurDetailIndex) in insurSpecification"
|
||
:key="insurDetailIndex"
|
||
>
|
||
<view class="card-title">
|
||
<text>{{ insurDetail.title }}</text>
|
||
</view>
|
||
<view class="card-body">
|
||
<view
|
||
class="empty"
|
||
v-if="
|
||
insurProduct[insurDetail.name] === null ||
|
||
insurProduct[insurDetail.name] === '' ||
|
||
insurProduct[insurDetail.name] === undefined
|
||
"
|
||
><text>暂无内容</text></view
|
||
>
|
||
<text>{{ insurProduct[insurDetail.name] }}</text>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<block
|
||
v-if="
|
||
item.name === '理赔流程' &&
|
||
insurProduct.claimProcess !== null &&
|
||
insurProduct.claimProcess !== undefined &&
|
||
insurProduct.claimProcess !== ''
|
||
"
|
||
>
|
||
<view class="insur-card pro-procedure">
|
||
<view class="insur-card card-body">
|
||
<view class="claimProcess">
|
||
<mp-html :content="insurProduct.claimProcess" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<block v-else-if="item.name === '理赔流程'">
|
||
<view
|
||
class="insur-card card-body"
|
||
style="text-align: center; padding: 10px; color: #717d71"
|
||
>
|
||
<view class="empty">
|
||
<text>暂无内容</text>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<block
|
||
v-if="
|
||
item.name === '保险责任' &&
|
||
insurProduct.liability !== null &&
|
||
insurProduct.liability !== undefined &&
|
||
insurProduct.liability !== ''
|
||
"
|
||
>
|
||
<view class="insur-card pro-procedure">
|
||
<view class="insur-card card-body">
|
||
<view class="liability">
|
||
<mp-html :content="insurProduct.liability" />
|
||
<!-- <div v-html="insurProduct.liability" /> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<block v-else-if="item.name === '保险责任'">
|
||
<view
|
||
class="insur-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 {
|
||
listInsuranceProduct,
|
||
getInsuranceProduct,
|
||
delInsuranceProduct,
|
||
addInsuranceProduct,
|
||
updateInsuranceProduct,
|
||
changeProductEnable,
|
||
} from "@/api/insurance/insuranceProduct";
|
||
import { selectBaseInfo } from "@/api/enterprise/baseInfo";
|
||
import { selectUserEntity } from "@/api/enterprise/userEntity";
|
||
import mpHtml from '@/components/mp-html/mp-html';
|
||
|
||
export default {
|
||
name: "insurProDetail",
|
||
components: {
|
||
mpHtml,
|
||
},
|
||
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: "理赔流程",
|
||
},
|
||
{
|
||
id: 4,
|
||
name: "保险责任",
|
||
},
|
||
],
|
||
options: {},
|
||
insurProduct: {},
|
||
insurCom: {},
|
||
insurProductList: [],
|
||
insurSpecification: [
|
||
{
|
||
title: "适用人群",
|
||
name: "application",
|
||
},
|
||
{
|
||
title: "保障范围",
|
||
name: "coverage",
|
||
},
|
||
{
|
||
title: "投保要求",
|
||
name: "requirement",
|
||
},
|
||
{
|
||
title: "描述",
|
||
name: "remark",
|
||
},
|
||
// {
|
||
// title: "",
|
||
// name: "",
|
||
// },
|
||
// {
|
||
// title: "",
|
||
// name: "",
|
||
// },
|
||
// {
|
||
// title: "",
|
||
// name: "",
|
||
// },
|
||
// {
|
||
// title: "",
|
||
// name: "",
|
||
// },
|
||
],
|
||
productPresentation: [
|
||
{
|
||
title: "保险期限（月）",
|
||
name: "insurancePeriod",
|
||
},
|
||
{
|
||
title: "保费（元）",
|
||
name: "premium",
|
||
},
|
||
{
|
||
title: "保险金额（元）",
|
||
name: "amount",
|
||
},
|
||
{
|
||
title: "政府补贴比例（%）",
|
||
name: "rate",
|
||
},
|
||
// {
|
||
// 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();
|
||
},
|
||
onShow() {
|
||
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/insur/openInsurForm/index?insurProductId=" +
|
||
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("加载中，请耐心等待...");
|
||
getInsuranceProduct(this.options.id).then((res) => {
|
||
this.insurProduct = 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;
|
||
}
|
||
|
||
.insur-pro-info {
|
||
padding-top: 10px;
|
||
}
|
||
|
||
.insur-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;
|
||
}
|
||
|
||
.insur-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;
|
||
}
|
||
|
||
.claimProcess {
|
||
// padding-right: 25rpx;
|
||
width: calc(100vw - 80rpx);
|
||
|
||
:not(not) {
|
||
max-width: calc(100vw - 80rpx);
|
||
word-wrap: break-word;
|
||
white-space: break-spaces;
|
||
}
|
||
}
|
||
|
||
.liability {
|
||
// 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>
|