Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
e8d215ed by simon
Options

默认提交

1 parent f9bdf0d5
Inline Side-by-side
Showing 8 changed files with 152 additions and 57 deletions
# 中国平安人寿(香港)
---
......@@ -9,25 +8,44 @@
---
## 技术选型
#### 技术框架
项目框架: vuejs
脚手架版本: vue-cli3
#### 开发环境
node 版本: 推荐 v12.10.0 或以上
npm 版本: 推荐 6.10.3 或以上
## 开始使用
---
#### 安装依赖 (建议使用国内镜像)
```
npm install
```
#### 项目预览
```
npm run dev
```
#### 项目打包
```
npm run build
```
#### 项目打包 -- 沙箱环境
```
npm run sandbox
```
......@@ -70,51 +88,61 @@ npm run sandbox
---
## 前置说明
#### 开发环境
脚手架版本: CLI3
node版本: 推荐v12.10.0或以上
npm版本: 推荐6.10.3或以上
---
## 规范说明
#### vue文件分离
#### vue 文件分离
一般业务.vue文件通常会在同一目录下拆分为.vue,.js,.scss三个文件。
一般业务.vue 文件通常会在同一目录下拆分为.vue,.js,.scss 三个文件。
正常的创建和引用vue文件都是html、css、js三者在一起的，这样写起来虽然方便了，但是页面比较大或者代码比较多的情况下，即使使用组件有时代码也比较多，简单来说查找不变不利于编程，大的来说影像优化性能。将代码中的html、css、js分离出来是个很好的选择。
正常的创建和引用 vue 文件都是 html、css、js 三者在一起的，这样写起来虽然方便了，但是页面比较大或者代码比较多的情况下，即使使用组件有时代码也比较多，简单来说查找不变不利于编程，大的来说影像优化性能。将代码中的 html、css、js 分离出来是个很好的选择。
#### 编码规范
本项目不使用eslint代码检查工具。
本项目不使用 eslint 代码检查工具。
开发人员需遵循vue官方风格规范。
开发人员需遵循 vue 官方风格规范。
#### 样式规范
- 优先使用 _var.scss 声明的样式变量
- 优先使用 \_var.scss 声明的样式变量
- font-family 名字顺序 Arial -> Microsoft YaHei
#### z-index权重划分
#### z-index 权重划分
- 遮罩蒙层:5000
- 导航栏:3000
- element-ui:2000+
- 自定义交互组件 如date-picker: 800-900
- 一般业务级:小于100
- 自定义交互组件 如 date-picker: 800-900
- 一般业务级:小于 100
#### 响应式方案
通过purecss+@media方式实现。
通过 purecss+@media 方式实现。
选取原因：
- 与bootstrap相比，purecss要轻量得多
- 与 bootstrap 相比，purecss 更为轻量。
## 前后端数据交互
#### 简述
为了实现前后端分离，前后端需要约定一套数据交互规范。后续前后端数据接口的输入输出需要按照本文档执行。
#### 数据格式
数据格式: json
跨域处理使用跨域资源共享(Cross-Origin Resource Sharing)方式，允许跨域的接口需要在返回头中输出相应的 header。
#### 数据接口输出
| 字段 | 数据类型 | 必要 | 参说明 |
| ------- | -------- | ---- | --------------------------------------- |
| success | Boolean | Y | 是否请求成功（true：成功，false：失败） |
| errMsg | Integer | N | 请求失败原因 |
| code | String | Y | 请求失败错误代码 |
| content | Object | N | 业务返回具体参数 |
#### 数据加密
......@@ -130,8 +158,7 @@ npm版本: 推荐6.10.3或以上
采用方案：[i18n](https://github.com/kazupon/vue-i18n)
在文件入口main.js注入i18n
在文件入口 main.js 注入 i18n
#### 三语支持(默认繁体):
......@@ -141,17 +168,14 @@ npm版本: 推荐6.10.3或以上
三语文件所在目录:
#### 执行逻辑
访问页面时，会先从localStorage里获取历史选取语言，若活动结果为空，则默认使用繁体。
访问页面时，会先从 localStorage 里获取历史选取语言，若活动结果为空，则默认使用繁体。
语言切换时，把当前选择语言注入到i18n并埋到localStorage，同时广播事件，通知页面初始化(重新读取cms内容)。
语言切换时，把当前选择语言注入到 i18n 并埋到 localStorage，同时广播事件，通知页面初始化(重新读取 cms 内容)。
---
## TODO
- [x] 项目后期需补充 SEO优化插件 PrerenderSPAPlugin
- [x] 项目后期需补充 SEO 优化插件 PrerenderSPAPlugin
......
/**
* 组件描述: 用户登陆提示
* 其中包含
* 1.用户登陆提示
* 2.五项基本信息验证
*/
import {
mapState
} from 'vuex';
......@@ -41,6 +48,7 @@ export default {
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
},
// 如果 用户未登陆 或者 五项基本信息未验证
showPanel() {
let b1 = this.model == "auth" && (this.showProfileInfo || this.showUnAuth);
let b2 = this.model == "suggest" && this.showSuggest;
......@@ -48,6 +56,7 @@ export default {
}
},
methods: {
// 检测用户状态，触发用户登陆/登出
initData() {
this.tips = this.i18n.customService.unauth[this.tipModel];
if (this.userInfo && this.userInfo.name) {
......@@ -73,6 +82,7 @@ export default {
this.showProfileInfo = false;
this.$emit("onLogout", {});
},
// 前往登陆(带重定向)
gotoLoginPage() {
let callback = this.$route.path;
let separator = "?";
......@@ -80,14 +90,25 @@ export default {
callback += separator + key + "=" + this.$route.query[key];
separator = "&";
}
this.$router.push({ path: "/login?callback=" + callback });
this.$router.push({
path: "/login?callback=" + callback
});
},
// 前往注册页面
gotoRegisterPage() {
this.$router.push({ path: "/register" });
this.$router.push({
path: "/register"
});
},
gotoInformationPage() {
let c = this.$route.fullPath;
this.$router.push({ path: "/infomation/improve", query: { c: c, a: 1 } });
this.$router.push({
path: "/infomation/improve",
query: {
c: c,
a: 1
}
});
},
noAuth() {
this.$store.commit("SET_USER_INFO", null);
......@@ -102,7 +123,7 @@ export default {
this.$root.eventBus.$on("langChange", () => {
try {
this.tips = this.i18n.customService.unauth[this.tipModel];
} catch (e) { }
} catch (e) {}
});
},
watch: {
......
<template>
<div v-if="showPanel">
<!-- 登陆提示 -->
<div v-if="showUnAuth">
<div class="alert">
<img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
......@@ -14,7 +15,7 @@
<img v-if="model=='suggest'" class="pointer close" src="@/assets/images/common/icon-alert-close.png" alt="" @click="showSuggest = false">
</div>
</div>
<!-- 五项基本信息验证提示 -->
<div v-if="showProfileInfo">
<div class="alert">
<img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
......
/**
* 组件描述:理赔申请模态窗
* 主要用于不在保险范围内的提示
*/
export default {
......@@ -12,7 +15,6 @@ export default {
},
data() {
return {
}
},
components: {},
......@@ -41,6 +43,5 @@ export default {
created() {
this.initData();
},
watch: {
},
watch: {},
}
......
/**
* 组件描述:理赔申请模态窗
* 主要用于不在保险范围内的提示
*/
export default {
data() {
return {
......
/**
* 组件描述:申请索偿上传图片
*/
import api from '@/api/api'
import {
httpGet,
......@@ -17,7 +21,7 @@ export default {
// 是否显示组件
options: {
type: Object,
default() {
default () {
return {
// 名称
name: "",
......@@ -70,6 +74,7 @@ export default {
},
},
methods: {
// 初始化缓存
initData() {
for (let index = 0; index < sessionStorage.length; index++) {
let key = sessionStorage.key(index);
......@@ -87,10 +92,13 @@ export default {
}
this.uploadFiles = this.images.length;
},
// 缓存数据
cacheData() {
for (let index = 0; index < this.images.length; index++) {
let tmp = this.images[index];
if (tmp.showMask || !tmp.cacheKey) { continue; }
if (tmp.showMask || !tmp.cacheKey) {
continue;
}
let key = "clarmImage." + this.options.imageTypeID + "." + index;
sessionStorage.setItem(key, JSON.stringify({
......@@ -100,6 +108,7 @@ export default {
}));
}
},
// 清除缓存
clearCache() {
for (let index = 0; index < sessionStorage.length; index++) {
let key = sessionStorage.key(index);
......@@ -110,6 +119,7 @@ export default {
this.uploadFiles = 0;
this.images = [];
},
// 选择多文件
selectMutilFile() {
if (this.uploading) {
return;
......@@ -220,6 +230,7 @@ export default {
this.$set(this, "images", images);
this.refreshUploadNumber();
},
// 生成随机AESKey
randomAesKey() {
let chars = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z".split(",");
let res = "";
......@@ -229,6 +240,7 @@ export default {
}
return res;
},
// 向父组件发送图片结果
emitResult() {
if (this.images.length == 0) {
let result = {
......@@ -272,6 +284,7 @@ export default {
onShowTipsOutHandler(event) {
this.tipsVisible = false;
},
// 压缩图片
compressImage(src, callback) {
var img = new Image();
img.src = src;
......@@ -302,9 +315,6 @@ export default {
callback(base64);
}
},
datePickCompleteHandler() {
}
},
watch: {
......@@ -312,5 +322,5 @@ export default {
mounted() {
this.initData();
},
created() { }
created() {}
}
......
import { mapState } from "vuex";
/**
* 组件描述:申请索偿申请组件
*/
import {
mapState
} from "vuex";
import api from '@/api/api'
import {
httpGet,
......@@ -6,13 +13,22 @@ import {
formdata
} from '@/api/fetch-api.js'
import { getPolicyIdTypeList } from '@/utils/biz.js';
import {
getPolicyIdTypeList
} from '@/utils/biz.js';
import Vue from 'vue';
import DatePicker from '@/components/date-picker/date-picker.vue';
import { Loading } from 'vant';
import { Select, Option } from 'element-ui';
import {
Loading
} from 'vant';
import {
Select,
Option
} from 'element-ui';
import { ddMMyyyy2yyyyMMdd } from '@utils/utils.js';
import {
ddMMyyyy2yyyyMMdd
} from '@utils/utils.js';
Vue.use(Select);
Vue.use(Option);
......@@ -99,6 +115,7 @@ export default {
path: "/custom/service?q=m1"
});
},
// 提交申请
handleConfirm() {
if (this.btnDisabled) {
return;
......@@ -110,13 +127,24 @@ export default {
let param = JSON.parse(JSON.stringify(this.data));
param.birthDate = ddMMyyyy2yyyyMMdd(param.birthDate);
console.log(param);
httpPost({ url: api.getCidByVerify, data: param }).then(res => {
httpPost({
url: api.getCidByVerify,
data: param
}).then(res => {
if (res) {
let cid = res;
httpPost({ url: api.clarmsCustomerList, data: { cid: cid } }).then(res => {
httpPost({
url: api.clarmsCustomerList,
data: {
cid: cid
}
}).then(res => {
this.loading = false;
if (res && res.insuredInfoList && res.insuredInfoList.length > 0) {
this.$emit("insuredInfoList", { cid: cid, list: res.insuredInfoList });
this.$emit("insuredInfoList", {
cid: cid,
list: res.insuredInfoList
});
} else {
this.showTips = true;
}
......@@ -153,5 +181,5 @@ export default {
mounted() {
this.initData();
},
created() { }
created() {}
}
......
/**
* 页面描述:理赔页面
*
*/
import {
mapGetters,
mapActions,
......@@ -196,5 +201,5 @@ export default {
this.initData();
},
created() { }
created() {}
}
......