feat: v2.2

zhengyiming

4 天以前 8c1c96a03da69b980a8822a02603123d78d8b4e1

feat: v2.2

 package.json

@@ -14,7 +14,7 @@
    "build:jy": "cross-env NODE_OPTIONS=--max_old_space_size=16000 VITE_AppType=jy vite build --mode jy",
    "build:other": "cross-env NODE_OPTIONS=--max_old_space_size=16000 VITE_AppType=other vite build --mode other",
    "build:backup": "cross-env NODE_OPTIONS=--max_old_space_size=16000 VITE_AppType=backup vite build --mode backup",
    "build:all": "run-p build:jx build:jy build:other build:backup",
    "build:all": "run-p build:jx build:tp",
    "build:staging": "cross-env vite build --mode staging",
    "build:staging:yx": "cross-env vite build --mode stagingone",
    "build:staging:other": "cross-env VITE_AppType=other vite build --mode staging",

 src/assets/home/icon-taiping-logo.png

 src/components/Preview/PreviewOffice.vue

New file
@@ -0,0 +1,25 @@
<template>
  <div class="office-wrapper">
    <iframe :src="url" class="previewBody"></iframe>
  </div>
</template>

<script lang="ts">
export default {
  name: 'PreviewOffice',
};
</script>

<script setup lang="ts">
import { computed } from 'vue';

type Props = {
  fileUrl: string;
};

const props = defineProps<Props>();

const url = computed(
  () => `https://view.officeapps.live.com/op/view.aspx?src=${props.fileUrl}?${Date.now()}`
);
</script>

 src/constants/temp.ts

@@ -10,13 +10,13 @@
// 职业类型对照表
export const InsuranceOccupationTypeTempPath = `${TempFolderPath}/%E8%81%8C%E4%B8%9A%E7%B1%BB%E5%9E%8B%E5%AF%B9%E7%85%A7%E8%A1%A8.xls`;
// 产品保障方案
export const InsuranceProtocolTempPath1 = `${TempFolderPath}/%E4%BA%A7%E5%93%81%E4%BF%9D%E9%9A%9C%E6%96%B9%E6%A1%88.xlsx`;
export const InsuranceProtocolTempPath1 = `${TempFolderPath}/%E4%BA%A7%E5%93%81%E4%BF%9D%E9%9A%9C%E6%96%B9%E6%A1%88.pdf`;
// 免责条款
export const InsuranceProtocolTempPath2 = `${TempFolderPath}/%E5%85%8D%E8%B4%A3%E6%9D%A1%E6%AC%BE.docx`;
export const InsuranceProtocolTempPath2 = `${TempFolderPath}/%E5%85%8D%E8%B4%A3%E6%9D%A1%E6%AC%BE.pdf`;
// 理赔须知
export const InsuranceProtocolTempPath3 = `${TempFolderPath}/%E7%90%86%E8%B5%94%E9%A1%BB%E7%9F%A5.docx`;
export const InsuranceProtocolTempPath3 = `${TempFolderPath}/%E7%90%86%E8%B5%94%E9%A1%BB%E7%9F%A5.pdf`;
// 投保须知及声明
export const InsuranceProtocolTempPath4 = `${TempFolderPath}/%E6%8A%95%E4%BF%9D%E9%A1%BB%E7%9F%A5%E5%8F%8A%E5%A3%B0%E6%98%8E.docx`;
export const InsuranceProtocolTempPath4 = `${TempFolderPath}/%E6%8A%95%E4%BF%9D%E9%A1%BB%E7%9F%A5%E5%8F%8A%E5%A3%B0%E6%98%8E.pdf`;
// 太平财产保险有限公司个人人身意外伤害保险（互联网专属2022版）-条款
export const InsuranceProtocolTempPath5 = `${TempFolderPath}/%E5%A4%AA%E5%B9%B3%E8%B4%A2%E4%BA%A7%E4%BF%9D%E9%99%A9%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8%E4%B8%AA%E4%BA%BA%E4%BA%BA%E8%BA%AB%E6%84%8F%E5%A4%96%E4%BC%A4%E5%AE%B3%E4%BF%9D%E9%99%A9%EF%BC%88%E4%BA%92%E8%81%94%E7%BD%91%E4%B8%93%E5%B1%9E2022%E7%89%88%EF%BC%89-%E6%9D%A1%E6%AC%BE.pdf`;
// 太平财产保险有限公司公共交通工具乘客意外伤害保险（互联网专属2022版）-条款
@@ -24,4 +24,39 @@
// 太平财产保险有限公司附加意外伤害住院津贴保险（互联网专属）-条款
export const InsuranceProtocolTempPath7 = `${TempFolderPath}/%E5%A4%AA%E5%B9%B3%E8%B4%A2%E4%BA%A7%E4%BF%9D%E9%99%A9%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8%E9%99%84%E5%8A%A0%E6%84%8F%E5%A4%96%E4%BC%A4%E5%AE%B3%E4%BD%8F%E9%99%A2%E6%B4%A5%E8%B4%B4%E4%BF%9D%E9%99%A9%EF%BC%88%E4%BA%92%E8%81%94%E7%BD%91%E4%B8%93%E5%B1%9E%EF%BC%89-%E6%9D%A1%E6%AC%BE.pdf`;
// 太平财产保险有限公司附加意外伤害医疗保险（互联网专属2022版）-条款
export const InsuranceTempPath8 = `${TempFolderPath}/%E5%A4%AA%E5%B9%B3%E8%B4%A2%E4%BA%A7%E4%BF%9D%E9%99%A9%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8%E9%99%84%E5%8A%A0%E6%84%8F%E5%A4%96%E4%BC%A4%E5%AE%B3%E5%8C%BB%E7%96%97%E4%BF%9D%E9%99%A9%EF%BC%88%E4%BA%92%E8%81%94%E7%BD%91%E4%B8%93%E5%B1%9E2022%E7%89%88%EF%BC%89-%E6%9D%A1%E6%AC%BE.pdf`;
export const InsuranceProtocolTempPath8 = `${TempFolderPath}/%E5%A4%AA%E5%B9%B3%E8%B4%A2%E4%BA%A7%E4%BF%9D%E9%99%A9%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8%E9%99%84%E5%8A%A0%E6%84%8F%E5%A4%96%E4%BC%A4%E5%AE%B3%E5%8C%BB%E7%96%97%E4%BF%9D%E9%99%A9%EF%BC%88%E4%BA%92%E8%81%94%E7%BD%91%E4%B8%93%E5%B1%9E2022%E7%89%88%EF%BC%89-%E6%9D%A1%E6%AC%BE.pdf`;

export const InsuranceTempList = [
  {
    type: 'pdf',
    url: InsuranceProtocolTempPath1,
  },
  {
    type: 'pdf',
    url: InsuranceProtocolTempPath2,
  },
  {
    type: 'pdf',
    url: InsuranceProtocolTempPath3,
  },
  {
    type: 'pdf',
    url: InsuranceProtocolTempPath4,
  },
  {
    type: 'pdf',
    url: InsuranceProtocolTempPath5,
  },
  {
    type: 'pdf',
    url: InsuranceProtocolTempPath6,
  },
  {
    type: 'pdf',
    url: InsuranceProtocolTempPath7,
  },
  {
    type: 'pdf',
    url: InsuranceProtocolTempPath8,
  },
];

 src/utils/storage/storage.ts

@@ -1,9 +1,13 @@
import { loadEnv } from '@build/index';

interface ProxyStorage {
  getItem(key: string): any;
  setItem(Key: string, value: string): void;
  removeItem(key: string): void;
  clear(): void;
}

const { VITE_PUBLIC_PATH } = loadEnv();

//sessionStorage operate
class sessionStorageProxy implements ProxyStorage {
@@ -13,19 +17,23 @@
    this.storage = storageModel;
  }

  getKey(key: string): string {
    return `${VITE_PUBLIC_PATH}_${key}`;
  }

  // 存
  public setItem(key: string, value: any): void {
    this.storage.setItem(key, JSON.stringify(value));
    this.storage.setItem(this.getKey(key), JSON.stringify(value));
  }

  // 取
  public getItem<T = any>(key: string): null | T {
    return JSON.parse(this.storage.getItem(key));
    return JSON.parse(this.storage.getItem(this.getKey(key)));
  }

  // 删
  public removeItem(key: string): void {
    this.storage.removeItem(key);
    this.storage.removeItem(this.getKey(key));
  }

  // 清空

 src/views/Home/Home.vue

@@ -111,6 +111,7 @@
    </AppContainer>
    <UploadInsurePersonDialog v-bind="dialogProps" />
    <UploadStampFileDialog v-bind="dialogStampFileProps" />
    <InsureInstructionsDialog v-bind="dialogInstructionsProps" />
  </LoadingLayout>
</template>

@@ -129,6 +130,7 @@
  SearchInput,
  FieldRadio,
  XLSXUtils,
  useDialog,
} from '@bole-core/components';
import * as insuranceOrderServices from '@/services/api/InsuranceOrder';
import { Message, OrderInputType, downloadFileByUrl } from '@bole-core/core';
@@ -152,6 +154,7 @@
} from '@/constants';
import dayjs from 'dayjs';
import _ from 'lodash';
import InsureInstructionsDialog from './components/InsureInstructionsDialog.vue';

defineOptions({
  name: 'Home',
@@ -264,6 +267,7 @@
onMounted(async () => {
  await getList();
  state.loading = false;
  handleOpenInstructions();
});

const {
@@ -391,6 +395,12 @@
  } catch (error) {}
}

const { dialogProps: dialogInstructionsProps, dialogState: dialogInstructionsState } = useDialog();

function handleOpenInstructions() {
  dialogInstructionsState.dialogVisible = true;
}

function handleUpload() {
  handleAdd({
    serialNum: `${dayjs().format('YYYYMMDD')}${_.random(0, 9999).toString().padStart(4, '0')}`,

 src/views/Home/components/InsureInstructions.vue

File was deleted

 src/views/Home/components/InsureInstructionsDialog.vue

New file
@@ -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>

 vite.config.ts

@@ -2,6 +2,7 @@
import { warpperEnv } from './build';
import { getPluginsList } from './build/plugins';
import { UserConfigExport, ConfigEnv, loadEnv, AliasOptions } from 'vite';
import dayjs from 'dayjs';

export const projRoot = resolve(__dirname, '..', '..');
export const pkgRoot = resolve(projRoot, 'packages');
@@ -96,7 +97,7 @@
      __INTLIFY_PROD_DEVTOOLS__: false,
    },
    build: {
      outDir: `dist/dist-jybfront-${VITE_AppType}-${mode}`,
      outDir: `dist/dist-jybfront-${VITE_AppType}-${mode}-${dayjs().format('YYYYMMDD')}`,
    },
    optimizeDeps: {
      include: [