xnzt/xnzt-h5/pages/index/needInsurance/insurProDetail/index.vue

760 lines
18 KiB
Vue
Raw Normal View History

2024-11-11 10:27:27 +08:00
<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>