From eed2448d2e9d3dd2b1ec17d5c4ae74b102d793c5 Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期一, 30 六月 2025 21:47:39 +0800
Subject: [PATCH] feat: v2.2
---
src/views/Home/components/InsureInstructionsDialog.vue | 153 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 153 insertions(+), 0 deletions(-)
diff --git a/src/views/Home/components/InsureInstructionsDialog.vue b/src/views/Home/components/InsureInstructionsDialog.vue
new file mode 100644
index 0000000..588ff25
--- /dev/null
+++ b/src/views/Home/components/InsureInstructionsDialog.vue
@@ -0,0 +1,153 @@
+<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>
--
Gitblit v1.9.1