<template>
|
<el-dialog
|
v-model="visible"
|
destroy-on-close
|
draggable
|
center
|
class="insureInstructionsDialog"
|
width="600px"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
>
|
<div class="insureInstructionsDialog-content">
|
<!-- <img :src="IconTaipingLogo" alt="" class="logo" /> -->
|
<div class="tips-title">温馨提示，您已进入投保流程：</div>
|
<div class="tips-item">
|
请仔细阅读保险条款，投保须知等内容，为了保障您的合法权益，您的操作轨迹将被记录
|
</div>
|
</div>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button type="primary" @click="handleInstructionsNext">同意并继续</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
<ProDialog
|
v-model="visibleFiles"
|
destroy-on-close
|
draggable
|
center
|
class="insureInstructionsFilesDialog"
|
width="1000px"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
top="5vh"
|
>
|
<div class="insureInstructionsFilesDialog-content">
|
<template v-for="(item, index) in InsuranceTempList" :key="item.url">
|
<iframe
|
:src="item.url"
|
class="preview-pdf"
|
v-if="item.type === 'pdf'"
|
:style="{ display: isCurrent(`step${index}`) ? 'block' : 'none' }"
|
></iframe>
|
<PreviewOffice
|
:file-url="item.url"
|
v-else
|
:style="{ display: isCurrent(`step${index}`) ? 'block' : 'none' }"
|
/>
|
</template>
|
</div>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="goToPrevious()" v-if="!isFirst">上一页</el-button>
|
<el-button type="primary" @click="goToNext()" v-if="!isLast">下一页</el-button>
|
<el-button type="primary" @click="handleConfirm" v-if="isLast">我已阅读并同意</el-button>
|
</span>
|
</template>
|
</ProDialog>
|
</template>
|
|
<script setup lang="ts">
|
import {
|
ProDialog,
|
ProForm,
|
ProFormItemV2,
|
ProFormText,
|
UploadUserFile,
|
} from '@bole-core/components';
|
import IconTaipingLogo from '@/assets/home/icon-taiping-logo.png';
|
import { useStepper } from '@vueuse/core';
|
import { InsuranceTempList } from '@/constants';
|
|
defineOptions({
|
name: 'InsureInstructionsDialog',
|
});
|
|
// type Props = {};
|
|
// const props = withDefaults(defineProps<Props>(), {});
|
|
const visible = defineModel({ type: Boolean });
|
|
const emit = defineEmits<{
|
(e: 'onConfirm'): void;
|
(e: 'onCancel'): void;
|
}>();
|
|
function handleInstructionsNext() {
|
visible.value = false;
|
visibleFiles.value = true;
|
}
|
|
function handleConfirm() {
|
visibleFiles.value = false;
|
emit('onConfirm');
|
}
|
|
const visibleFiles = ref(false);
|
|
const { isCurrent, goToNext, goToPrevious, isLast, isFirst } = useStepper(
|
InsuranceTempList.map((x, index) => `step${index}`)
|
);
|
</script>
|
|
<style lang="scss">
|
@use '@/style/common.scss' as *;
|
|
.insureInstructionsDialog {
|
header {
|
display: none;
|
}
|
|
.insureInstructionsDialog-content {
|
.logo {
|
display: block;
|
margin: 0 auto 32px;
|
height: 55px;
|
}
|
|
.tips-title {
|
margin-bottom: 8px;
|
font-size: 18px;
|
text-align: center;
|
color: getCssVar('text-color', 'primary');
|
line-height: 24px;
|
}
|
|
.tips-item {
|
font-size: 16px;
|
text-align: center;
|
color: getCssVar('text-color', 'secondary');
|
line-height: 20px;
|
}
|
}
|
}
|
|
.insureInstructionsFilesDialog {
|
header {
|
display: none;
|
}
|
|
.insureInstructionsFilesDialog-content {
|
height: 600px;
|
|
.office-wrapper,
|
.preview-pdf,
|
.office-wrapper iframe {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
</style>
|
