You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
629 lines
17 KiB
629 lines
17 KiB
<template>
|
|
<div>
|
|
<div class="product_body">
|
|
<div :class="{ hiddenMore: showTotal }" class="bg_white" ref="productEl">
|
|
<!-- 产品头部 -->
|
|
<div class="product_top">
|
|
<div class="title_body">
|
|
<div class="title">
|
|
<span class="text_content">{{ resultData.productName }}</span>
|
|
<span class="mark">{{ resultData.isSale }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="labels_body">
|
|
<div class="label" v-if="!!resultData.coreOne">
|
|
<img :src="labelesImg" />
|
|
<span>{{ resultData.coreOne }}</span>
|
|
</div>
|
|
<div class="label" v-if="!!resultData.coreTwo">
|
|
<img :src="labelesImg" />
|
|
<span>{{ resultData.coreTwo }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="!!resultData.insClausesFlag" class="product_exemption">
|
|
此险种有多个版本，点击“条款原文”查看其它历史版本
|
|
</div>
|
|
<!-- 产品内容部分 -->
|
|
<div class="product_main">
|
|
<div class="product_modules">
|
|
<div class="base_module">
|
|
<!-- 列表集合 -->
|
|
<div class="list" v-for="item in baseModuleData" :key="item.id" v-show="!!item.val">
|
|
<div class="list_label">{{ item.key }}:</div>
|
|
<div class="list_content">
|
|
<span class="value" :class="{ noBtn: !item.tkywValue }" v-html="item.val"></span>
|
|
<div @click="showGraph(item)" v-show="!!item.tkywValue" class="tkk_btn">
|
|
条款原文
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 保险责任 -->
|
|
<div class="more_module">
|
|
<div class="top_right_bg">
|
|
<!-- 列表集合 -->
|
|
<div class="list" v-for="item in resultData.insDuty" :key="item.key">
|
|
<div class="list_label">
|
|
<span class="list_label_span">
|
|
{{ item.key }}:
|
|
</span>
|
|
</div>
|
|
<div class="list_content" v-if="item.isRender" v-html="item.completedData"></div>
|
|
<div class="list_content" v-else>
|
|
<template v-for="(completedItem, cIdx) in item.completedData" :key="cIdx">
|
|
<span class="more_text" v-if="typeof completedItem === 'string'"
|
|
v-html="completedItem"></span>
|
|
<span class="more_button" v-else @click="showImgPopup(completedItem.urlValue)">
|
|
{{ completedItem.urlkey }}
|
|
</span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="tip">具体以条款为准</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 产品底部 -->
|
|
<div class="product_bottom">
|
|
<div class="bottom_modules">
|
|
<div class="img_module" :class="bottomModuleNum ? 'min_witch' : ''" v-show="!!item.url"
|
|
v-for="item in bottomModulesData" :key="item.id">
|
|
<img @click="clickBottomBtn(item.name)" :src="item.src" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 关联问 -->
|
|
<div class="content-question-answer" v-if="intents && intents.length > 0">
|
|
<button :class="hasClicked ? 'answer-items setGrey' : 'answer-items'"
|
|
v-for="(items, index) in intents" :key="index" @click.stop="richCallAnswer(items)">
|
|
{{ items.intent }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- 展开拉起 -->
|
|
<div class="unfold-box" :class="exchangeButton ? 'unfold-bg' : 'unfold-style'" v-if="showExchangeButton">
|
|
<a href="javascript:;" @click="showTotalIntro">{{ exchangeButton ? "展开" : "收起"
|
|
}}<em class="look-more-icon" :class="!exchangeButton ? 'active' : ''"></em></a>
|
|
</div>
|
|
<!-- 弹出层 -->
|
|
<van-popup class="popup" :style="{ height: '85%', borderRadius: '10rem 10rem 0rem 0rem' }"
|
|
v-model:show="popUpFlag" teleport="body" position="bottom">
|
|
<div class="detaill_body">
|
|
<div class="detaill_title">
|
|
{{ detaillTitle }}
|
|
</div>
|
|
<!-- 条款原文 -->
|
|
<div class="detaill_content" v-show="nowPopType === 'tkyw'">
|
|
<div v-html="tkywValue"></div>
|
|
</div>
|
|
<img :style="{ width: '100%', maxWidth: 'none' }" class="product_img" :src="productImgUrl"
|
|
v-if="!!productImgUrl && nowPopType === 'img'" />
|
|
</div>
|
|
</van-popup>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, inject } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import _ from 'lodash'
|
|
import wx from 'weixin-js-sdk'
|
|
import Utils from '@/utils/utils'
|
|
import labelesImg from '@/assets/images/product/icon_yes.png'
|
|
import bottomTkywImg from '@/assets/images/product/bottom_tkyw.png'
|
|
|
|
const props = defineProps({
|
|
responseData: { type: Object, default: () => ({}) },
|
|
intents: { type: Array, default: () => [] },
|
|
itemlist: { type: Object, default: () => ({}) },
|
|
})
|
|
|
|
const router = useRouter()
|
|
const store = inject('appStore', null)
|
|
|
|
const resultData = ref({}) // 处理后的数据
|
|
const baseModuleData = ref([])
|
|
const popUpFlag = ref(false)
|
|
const productImgUrl = ref('')
|
|
const bottomModulesData = ref([
|
|
{ id: 1, name: 'TKYW', src: bottomTkywImg, url: '' },
|
|
])
|
|
const exchangeButton = ref(true) // 是否显示展开收起按钮
|
|
const showExchangeButton = ref(true)
|
|
const showTotal = ref(true) // 显示展开还是收起
|
|
const isBtnsubmit = ref(true) // 防止关联问发送
|
|
const nowPopType = ref('')
|
|
const tkywValue = ref('')
|
|
const detaillTitle = ref('')
|
|
const hasClicked = ref(false)
|
|
|
|
const bottomModuleNum = computed(
|
|
() => bottomModulesData.value.filter((item) => !!item.url).length > 3,
|
|
)
|
|
|
|
// —— created：解析产品模板数据 ——
|
|
const allData = _.cloneDeep(_.get(props.responseData, 'productInfo')) || {}
|
|
const originProDuctData = allData.insDuty || {}
|
|
const originalText = _.cloneDeep(_.get(props.responseData, 'originalText')) // 图谱数据
|
|
resultData.value = allData
|
|
// 格式化保险责任：按 | 与 ; 拆分为文本/链接
|
|
const dutyList = []
|
|
for (const i in originProDuctData) {
|
|
const result = {}
|
|
result.key = i
|
|
const productVal = originProDuctData[i]
|
|
if (String(productVal).includes('|')) {
|
|
result.isRender = false
|
|
const beforeData = String(productVal).split('|')
|
|
result.completedData = beforeData.map((item) => {
|
|
if (item.includes(':')) {
|
|
const urlData = item.split(';')
|
|
return { urlkey: urlData[0], urlValue: urlData[1] }
|
|
}
|
|
return item
|
|
})
|
|
} else {
|
|
result.isRender = true
|
|
result.completedData = originProDuctData[i]
|
|
}
|
|
dutyList.push(result)
|
|
}
|
|
allData.insDuty = dutyList
|
|
resultData.value = allData
|
|
// 基本保额等模块，其中含条款原文对应数据
|
|
baseModuleData.value = [
|
|
{ key: '保险类型', val: _.get(resultData.value, 'insType'), id: 0 },
|
|
{ key: '开停办时间', val: _.get(resultData.value, 'osTime'), id: 1 },
|
|
{ key: '投保年龄', val: _.get(resultData.value, 'insdAge'), id: 2 },
|
|
{ key: '保险期间', val: _.get(resultData.value, 'insPeriod'), id: 3 },
|
|
{ key: '交费方式', val: _.get(resultData.value, 'payType'), id: 4 },
|
|
{ key: '犹豫期', val: _.get(resultData.value, 'hesPeriod'), id: 5 },
|
|
{ key: '观察期', val: _.get(resultData.value, 'obsPeriod'), id: 6 },
|
|
{ key: '销售地区', val: _.get(resultData.value, 'saleArea'), id: 7 },
|
|
{ key: '销售渠道', val: _.get(resultData.value, 'salesChannels'), id: 8 },
|
|
{ key: '基本保额', val: _.get(resultData.value, 'basicInsAmo'), id: 9 },
|
|
{ key: '每份保费', val: _.get(resultData.value, 'basicPremium'), id: 10 },
|
|
{ key: '最低保证利率', val: _.get(resultData.value, 'minGuaRate'), id: 11 },
|
|
{ key: '红利领取方式', val: _.get(resultData.value, 'bonClaType'), id: 12 },
|
|
{ key: '免赔额', val: _.get(resultData.value, 'deductible'), id: 13 },
|
|
]
|
|
const originalArr = _.get(originalText, '[0].properties')
|
|
if (Array.isArray(originalArr) && originalArr.length > 0) {
|
|
baseModuleData.value.forEach((item) => {
|
|
originalArr.forEach((tkyw) => {
|
|
if (tkyw.propName === item.key) {
|
|
item.tkywValue = tkyw.propValue
|
|
}
|
|
})
|
|
})
|
|
}
|
|
// 设置模块的url
|
|
bottomModulesData.value.forEach((item) => {
|
|
if (item.name === 'TKYW') item.url = resultData.value.clauseText
|
|
})
|
|
|
|
function showImgPopup(url) {
|
|
popUpFlag.value = true
|
|
productImgUrl.value = url
|
|
nowPopType.value = 'img'
|
|
}
|
|
|
|
function clickBottomBtn(name) {
|
|
let url = ''
|
|
if (name === 'TKYW') {
|
|
url = resultData.value.clauseText
|
|
}
|
|
if (/\.pdf$/.test(url)) {
|
|
// 安卓/鸿蒙小程序环境跳转预览页
|
|
let isMiniProgram = false
|
|
try {
|
|
wx.miniProgram.getEnv((res) => {
|
|
if (res.miniprogram) {
|
|
isMiniProgram = true
|
|
}
|
|
})
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
if ((Utils.getSystemType() === 'android' || Utils.getSystemType() === 'harmonyos') && isMiniProgram) {
|
|
router.push({
|
|
name: 'previewPdf',
|
|
params: {
|
|
url: url,
|
|
},
|
|
})
|
|
} else {
|
|
location.href = url
|
|
}
|
|
return
|
|
}
|
|
}
|
|
|
|
function showTotalIntro() {
|
|
showTotal.value = !showTotal.value
|
|
exchangeButton.value = !exchangeButton.value
|
|
}
|
|
|
|
// 点击关联问按钮发送问句
|
|
function richCallAnswer(item) {
|
|
const sendParmas = {
|
|
reqAndResType: '1', // 1文本 2图片 3问提评价
|
|
msgText: item.intent,
|
|
intentId: item.intentId,
|
|
msgSource: store?.manualService, // 1机器人 2人工
|
|
questionType:
|
|
props.itemlist?.reqAndResType == '02'
|
|
? 5
|
|
: props.itemlist?.reqAndResType == '06'
|
|
? 4
|
|
: props.itemlist?.reqAndResType == '11'
|
|
? 8
|
|
: '',
|
|
}
|
|
if (isBtnsubmit.value) {
|
|
isBtnsubmit.value = false
|
|
const request = store?.sendingRobot?.(sendParmas)
|
|
if (request && typeof request.then === 'function') {
|
|
request
|
|
.then(() => {
|
|
isBtnsubmit.value = true
|
|
})
|
|
.catch((err) => {
|
|
isBtnsubmit.value = true
|
|
console.log(err)
|
|
})
|
|
} else {
|
|
isBtnsubmit.value = true
|
|
}
|
|
}
|
|
}
|
|
|
|
function showGraph(item) {
|
|
popUpFlag.value = true
|
|
nowPopType.value = 'tkyw'
|
|
detaillTitle.value = item.key
|
|
tkywValue.value = String(item.tkywValue || '').replace(/(\n)/g, '<br/>')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.hiddenMore {
|
|
height: 205rem;
|
|
}
|
|
|
|
.product_body {
|
|
line-height: normal;
|
|
letter-spacing: 0.5rem;
|
|
word-break: break-all;
|
|
word-wrap: break-word;
|
|
width: 100%;
|
|
position: relative;
|
|
margin-bottom: 6rem;
|
|
|
|
.bg_white {
|
|
background: #fff;
|
|
border-radius: 8rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.product_top {
|
|
color: #fff;
|
|
border-bottom: #f0ecec 0.01rem solid;
|
|
|
|
.title_body {
|
|
font-size: 13rem;
|
|
width: 100%;
|
|
min-height: 0.5rem;
|
|
background-image: url('../../assets/images/product/banner.png');
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
border-radius: 0.36rem 0.36rem 0 0;
|
|
padding: 8rem;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.title {
|
|
font-size: 15rem;
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
position: relative;
|
|
|
|
.text_content {
|
|
transform: scale(1, 1.05);
|
|
max-width: 270rem;
|
|
}
|
|
|
|
.mark {
|
|
font-size: 12rem;
|
|
background: #fff;
|
|
letter-spacing: 0rem;
|
|
color: #4f95fd;
|
|
padding: 0rem 4rem 0rem 4rem;
|
|
border-radius: 5rem 5rem 5rem 0rem;
|
|
font-weight: 700;
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: -4rem;
|
|
transform: translate(100%, 0%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.labels_body {
|
|
padding: 0.25rem 0.36rem 0.25rem 0.36rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.label {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
margin-right: 10rem;
|
|
}
|
|
|
|
span {
|
|
flex: 1;
|
|
font-size: 12rem;
|
|
color: #777777;
|
|
letter-spacing: 0.1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.label:nth-child(n):not(:last-child) {
|
|
margin-bottom: 5rem;
|
|
}
|
|
}
|
|
|
|
.product_exemption {
|
|
font-size: 12rem;
|
|
color: red;
|
|
font-weight: 700;
|
|
margin-top: 11rem;
|
|
padding-left: 16rem;
|
|
letter-spacing: 0rem;
|
|
}
|
|
|
|
.product_main {
|
|
padding: 0.31rem 0rem;
|
|
|
|
.product_modules {
|
|
.base_module {
|
|
background: #fef8ed;
|
|
background-image: url('../../assets/images/product/base.png');
|
|
background-size: 65rem;
|
|
background-repeat: no-repeat;
|
|
background-position: top right;
|
|
padding: 16rem;
|
|
border-radius: 0.3rem;
|
|
margin-bottom: 11rem;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.more_module {
|
|
border-radius: 0.3rem;
|
|
|
|
.top_right_bg {
|
|
background-image: url('../../assets/images/product/more.png');
|
|
background-size: 65rem;
|
|
background-repeat: no-repeat;
|
|
background-position: top right;
|
|
padding: 16rem;
|
|
border-radius: 12rem;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
background: #edf4ff;
|
|
background-image: url('../../assets/images/product/productBg.png');
|
|
background-size: 470rem;
|
|
background-repeat: no-repeat;
|
|
background-position: top right;
|
|
|
|
.tip {
|
|
color: #aaa;
|
|
text-align: right;
|
|
font-size: 12rem;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
color: #5b5b5b;
|
|
display: flex;
|
|
line-height: 18rem;
|
|
|
|
.list_label {
|
|
width: 80rem;
|
|
font-weight: 700;
|
|
font-size: 14rem;
|
|
color: #000;
|
|
}
|
|
|
|
.list_content {
|
|
flex: 1;
|
|
font-weight: 400;
|
|
font-size: 14rem;
|
|
display: flex;
|
|
align-items: center;
|
|
word-break: normal;
|
|
word-wrap: normal;
|
|
|
|
.value {
|
|
max-width: 168rem;
|
|
}
|
|
|
|
.noBtn {
|
|
max-width: unset !important;
|
|
}
|
|
|
|
.more_text {
|
|
margin-right: 5rem;
|
|
font-size: 14rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.more_button {
|
|
font-weight: 400;
|
|
background: #ddeaff;
|
|
color: #4f95fd;
|
|
display: inline-block;
|
|
padding: 0.13rem 0.55rem 0.13rem 0.18rem;
|
|
margin: 2rem 0;
|
|
font-size: 13rem;
|
|
border-radius: 11rem;
|
|
position: relative;
|
|
line-height: initial;
|
|
}
|
|
|
|
.more_button::after {
|
|
content: "";
|
|
width: 0.35rem;
|
|
height: 0.35rem;
|
|
background-image: url('../../assets/images/product/arrow.png');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
position: absolute;
|
|
right: 4%;
|
|
top: 50%;
|
|
transform: translate(0, -50%);
|
|
}
|
|
}
|
|
|
|
.tkk_btn {
|
|
border-radius: 11rem;
|
|
border: 1rem solid #d4d8dc;
|
|
font-size: 12rem;
|
|
padding: 1rem 6rem;
|
|
color: #4661f4;
|
|
white-space: nowrap;
|
|
margin-left: 7rem;
|
|
}
|
|
}
|
|
|
|
.list:nth-child(1) {
|
|
padding-right: 20rem;
|
|
}
|
|
|
|
.list:nth-child(n):not(:last-child) {
|
|
margin-bottom: 15rem;
|
|
}
|
|
|
|
.top_right_bg > .list:nth-child(n):not(:last-child) {
|
|
margin-bottom: 10rem;
|
|
}
|
|
|
|
.top_right_bg > .list {
|
|
flex-direction: column;
|
|
|
|
.list_content {
|
|
font-size: 14rem;
|
|
}
|
|
|
|
.list_label {
|
|
min-width: unset;
|
|
width: unset;
|
|
line-height: 18rem;
|
|
margin-bottom: 7rem;
|
|
|
|
.list_label_span {
|
|
font-weight: 700;
|
|
border-bottom: 1rem solid #000;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top_right_bg {
|
|
.more_button:nth-child(n):not(:last-child) {
|
|
margin-right: 5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.product_bottom {
|
|
padding-left: 0.3rem;
|
|
|
|
.bottom_modules {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
|
|
.img_module:nth-child(n):not(:last-child) {
|
|
margin-right: 8rem;
|
|
}
|
|
|
|
.min_witch {
|
|
width: 28% !important;
|
|
}
|
|
|
|
.img_module {
|
|
width: 30%;
|
|
height: 50rem;
|
|
border-radius: 8rem;
|
|
display: inline-block;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom_modules::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.questions {
|
|
padding: 0rem 0.36rem 0.31rem 0.36rem;
|
|
}
|
|
}
|
|
|
|
.hidden_more {
|
|
height: 175rem !important;
|
|
}
|
|
|
|
.noHidden {
|
|
height: unset !important;
|
|
padding-bottom: 15rem;
|
|
}
|
|
|
|
.detaill_body {
|
|
font-size: 18rem;
|
|
padding: 10rem 16rem;
|
|
background-size: 5rem;
|
|
background-repeat: no-repeat;
|
|
background-position: 66% 100%;
|
|
height: 100%;
|
|
|
|
.detaill_title {
|
|
font-size: 20rem;
|
|
font-weight: 600;
|
|
letter-spacing: 1rem;
|
|
margin-bottom: 20rem;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: " ";
|
|
position: absolute;
|
|
bottom: -6rem;
|
|
left: 0;
|
|
width: 75%;
|
|
height: 1rem;
|
|
background: #d2d2d7;
|
|
}
|
|
}
|
|
|
|
.detaill_content {
|
|
word-break: break-all;
|
|
line-height: 30rem;
|
|
text-indent: 29rem;
|
|
}
|
|
}
|
|
</style>
|
|
|