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 457 additions and 362 deletions
# 中国平安人寿(香港)
---
......@@ -7,32 +6,51 @@
中国平安人寿(香港) 官网
---
---
## 技术选型
#### 技术框架
项目框架: vuejs
脚手架版本: vue-cli3
#### 开发环境
node 版本: 推荐 v12.10.0 或以上
npm 版本: 推荐 6.10.3 或以上
## 开始使用
---
#### 安装依赖 (建议使用国内镜像)
```
npm install
```
#### 项目预览
```
npm run dev
```
#### 项目打包
```
npm run build
```
#### 项目打包 -- 沙箱环境
```
npm run sandbox
```
---
---
## 项目结构
......@@ -68,53 +86,63 @@ 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 声明的样式变量
- font-family 名字顺序 Arial -> Microsoft YaHei
- 优先使用 \_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 | 业务返回具体参数 |
#### 数据加密
......@@ -122,7 +150,7 @@ npm版本: 推荐6.10.3或以上
加密方案：AES+RSA
---
---
## 国际化支持说明
......@@ -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
mapState
} from 'vuex';
export default {
props: {
// 模型；auth、suggest
model: {
type: String,
default: "auth"
},
checkProfile: {
type: Boolean,
default: false
},
// m1 、m2、m3
tipModel: {
type: String,
default: "m3"
}
},
data() {
return {
key: 'value',
showProfileInfo: false,
showUnAuth: false,
showSuggest: true,
tips: {
props: {
// 模型；auth、suggest
model: {
type: String,
default: "auth"
},
checkProfile: {
type: Boolean,
default: false
},
// m1 、m2、m3
tipModel: {
type: String,
default: "m3"
}
},
data() {
return {
key: 'value',
showProfileInfo: false,
showUnAuth: false,
showSuggest: true,
tips: {
}
}
},
components: {},
computed: {
...mapState({
userInfo: state => state.userInfo
}),
locale() {
return this.$i18n.locale || 'tc';
},
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;
return b1 || b2;
}
},
methods: {
initData() {
this.tips = this.i18n.customService.unauth[this.tipModel];
if (this.userInfo && this.userInfo.name) {
this.loginAction();
} else {
this.logoutAction();
}
},
loginAction() {
this.showUnAuth = false;
if (this.checkProfile) {
if (this.userInfo.hadFullInfo == 1) {
this.$emit("onLogin", this.userInfo);
} else {
this.showProfileInfo = true;
}
} else {
this.$emit("onLogin", this.userInfo);
}
},
logoutAction() {
this.showUnAuth = true;
this.showProfileInfo = false;
this.$emit("onLogout", {});
},
gotoLoginPage() {
let callback = this.$route.path;
let separator = "?";
for (let key in this.$route.query) {
callback += separator + key + "=" + this.$route.query[key];
separator = "&";
}
this.$router.push({ path: "/login?callback=" + callback });
},
gotoRegisterPage() {
this.$router.push({ path: "/register" });
},
gotoInformationPage() {
let c = this.$route.fullPath;
this.$router.push({ path: "/infomation/improve", query: { c: c, a: 1 } });
},
noAuth() {
this.$store.commit("SET_USER_INFO", null);
this.initData();
this.$emit("onLogout", {});
}
},
mounted() {
this.initData();
},
created() {
}
}
},
components: {},
computed: {
...mapState({
userInfo: state => state.userInfo
}),
locale() {
return this.$i18n.locale || 'tc';
},
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;
return b1 || b2;
}
},
methods: {
// 检测用户状态，触发用户登陆/登出
initData() {
this.tips = this.i18n.customService.unauth[this.tipModel];
if (this.userInfo && this.userInfo.name) {
this.loginAction();
} else {
this.logoutAction();
}
},
loginAction() {
this.showUnAuth = false;
if (this.checkProfile) {
if (this.userInfo.hadFullInfo == 1) {
this.$emit("onLogin", this.userInfo);
} else {
this.showProfileInfo = true;
}
} else {
this.$emit("onLogin", this.userInfo);
}
},
logoutAction() {
this.showUnAuth = true;
this.showProfileInfo = false;
this.$emit("onLogout", {});
},
// 前往登陆(带重定向)
gotoLoginPage() {
let callback = this.$route.path;
let separator = "?";
for (let key in this.$route.query) {
callback += separator + key + "=" + this.$route.query[key];
separator = "&";
}
this.$router.push({
path: "/login?callback=" + callback
});
},
// 前往注册页面
gotoRegisterPage() {
this.$router.push({
path: "/register"
});
},
gotoInformationPage() {
let c = this.$route.fullPath;
this.$router.push({
path: "/infomation/improve",
query: {
c: c,
a: 1
}
});
},
noAuth() {
this.$store.commit("SET_USER_INFO", null);
this.initData();
this.$emit("onLogout", {});
}
},
mounted() {
this.initData();
},
created() {
this.$root.eventBus.$on("langChange", () => {
try {
this.tips = this.i18n.customService.unauth[this.tipModel];
} catch (e) { }
} catch (e) {}
});
},
watch: {
userInfo(val) {
if (val && val.name) {
this.loginAction();
} else {
this.logoutAction();
}
}
},
},
watch: {
userInfo(val) {
if (val && val.name) {
this.loginAction();
} else {
this.logoutAction();
}
}
},
}
......
<template>
<div v-if="showPanel">
<div v-if="showUnAuth">
<div class="alert">
<img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
<div class="txt">
{{tips.tit}}
<span class="pointer btn" @click="gotoLoginPage">{{$t('customService.unauth.login')}}</span>
{{tips.or}}
<span class="pointer btn" @click="gotoRegisterPage">{{$t('customService.unauth.register')}}</span>
{{tips.tail}}
</div>
<div v-if="showPanel">
<!-- 登陆提示 -->
<div v-if="showUnAuth">
<div class="alert">
<img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
<div class="txt">
{{tips.tit}}
<span class="pointer btn" @click="gotoLoginPage">{{$t('customService.unauth.login')}}</span>
{{tips.or}}
<span class="pointer btn" @click="gotoRegisterPage">{{$t('customService.unauth.register')}}</span>
{{tips.tail}}
</div>
<img v-if="model=='suggest'" class="pointer close" src="@/assets/images/common/icon-alert-close.png" alt="" @click="showSuggest = false">
</div>
</div>
<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="">
<div class="txt">
{{$t('customService.unauth.baseInfoTip')}}&nbsp;
<span class="pointer btn" @click="gotoInformationPage">{{$t('customService.unauth.infoBtn')}}</span>
&nbsp;{{$t('customService.unauth.baseInfoTail')}}
</div>
<div v-if="showProfileInfo">
<div class="alert">
<img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
<div class="txt">
{{$t('customService.unauth.baseInfoTip')}}&nbsp;
<span class="pointer btn" @click="gotoInformationPage">{{$t('customService.unauth.infoBtn')}}</span>
&nbsp;{{$t('customService.unauth.baseInfoTail')}}
</div>
<!-- <img class="pointer close" src="@/assets/images/common/icon-alert-close.png" alt=""> -->
</div>
</div>
<div class="empty-line" v-if="model!='suggest'"></div>
</div>
<!-- <img class="pointer close" src="@/assets/images/common/icon-alert-close.png" alt=""> -->
</div>
</div>
<div class="empty-line" v-if="model!='suggest'"></div>
</div>
</template>
<script src="./auth.js"></script>
......
/**
* 组件描述:理赔申请模态窗
* 主要用于不在保险范围内的提示
*/
export default {
props: {
// 是否显示组件
// 1、顯示事故類型；2、顯示時間
type: {
type: Number,
default: 2
},
},
data() {
return {
}
},
components: {},
computed: {
locale() {
return this.$i18n.locale || 'tc';
},
},
methods: {
initData() {
props: {
// 是否显示组件
// 1、顯示事故類型；2、顯示時間
type: {
type: Number,
default: 2
},
},
data() {
return {
}
},
components: {},
computed: {
locale() {
return this.$i18n.locale || 'tc';
},
},
methods: {
initData() {
},
onOverLayHandler() {
this.$emit("close");
},
toContact() {
this.$emit("toContact");
this.$router.push({
path: "/custom/service?q=m1"
});
}
},
mounted() {
},
onOverLayHandler() {
this.$emit("close");
},
toContact() {
this.$emit("toContact");
this.$router.push({
path: "/custom/service?q=m1"
});
}
},
mounted() {
},
created() {
this.initData();
},
watch: {
},
},
created() {
this.initData();
},
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;
......@@ -283,7 +296,7 @@ export default {
scale = w / h;
w = w < 50 ? w : 50;
h = (w / scale);
var quality = 0.7; // 默认图片质量为0.7
var quality = 0.7; // 默认图片质量为0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
......@@ -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,
httpPost,
formdata
httpGet,
httpPost,
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);
Vue.use(Loading);
export default {
data() {
return {
birthdayIllegal: false,
loading: false,
showTips: false,
data: {
// firstName: "珊珊",
// lastName: "王",
// birthDate: "01-01-2000",
// idNo: "84555455",
// idType: "40"
data() {
return {
birthdayIllegal: false,
loading: false,
showTips: false,
data: {
// firstName: "珊珊",
// lastName: "王",
// birthDate: "01-01-2000",
// idNo: "84555455",
// idType: "40"
firstName: "",
lastName: "",
birthDate: "",
idNo: "",
idType: ""
}
}
},
components: {
DatePicker
},
computed: {
...mapState({
userInfo: state => state.userInfo,
policyList: state => state.policyList
}),
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
},
policyIdTypeList() {
return getPolicyIdTypeList(this.$i18n.locale);
},
btnDisabled() {
let b1 = this.data.firstName ? false : true;
let b2 = this.data.lastName ? false : true;
let b3 = this.data.birthDate ? false : true;
let b4 = this.data.idType ? false : true;
let b5 = this.data.idNo ? false : true;
let b6 = this.birthdayIllegal;
return b1 || b2 || b3 || b4 || b5 || b6;
}
},
methods: {
initData() {
let dStr = sessionStorage.getItem("clarmsCheckForm");
sessionStorage.removeItem("clarmsCheckForm");
if (dStr) {
try {
let d = JSON.parse(dStr);
this.data = d;
} catch (e) {
firstName: "",
lastName: "",
birthDate: "",
idNo: "",
idType: ""
}
}
},
components: {
DatePicker
},
computed: {
...mapState({
userInfo: state => state.userInfo,
policyList: state => state.policyList
}),
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
},
policyIdTypeList() {
return getPolicyIdTypeList(this.$i18n.locale);
},
btnDisabled() {
let b1 = this.data.firstName ? false : true;
let b2 = this.data.lastName ? false : true;
let b3 = this.data.birthDate ? false : true;
let b4 = this.data.idType ? false : true;
let b5 = this.data.idNo ? false : true;
let b6 = this.birthdayIllegal;
return b1 || b2 || b3 || b4 || b5 || b6;
}
},
methods: {
initData() {
let dStr = sessionStorage.getItem("clarmsCheckForm");
sessionStorage.removeItem("clarmsCheckForm");
if (dStr) {
try {
let d = JSON.parse(dStr);
this.data = d;
} catch (e) {
}
}
},
cacheData() {
let d = JSON.stringify(this.data);
sessionStorage.setItem("clarmsCheckForm", d);
},
checkDate(data) {
this.birthdayIllegal = data.disable;
},
toRegisterPage() {
this.$router.push({
path: "/register"
});
},
toLoginPage() {
this.$router.push({
path: "/login"
});
},
toContactUs() {
this.cacheData();
this.$router.push({
path: "/custom/service?q=m1"
});
},
handleConfirm() {
if (this.btnDisabled) {
return;
}
if (this.loading) {
return;
}
this.loading = true;
let param = JSON.parse(JSON.stringify(this.data));
param.birthDate = ddMMyyyy2yyyyMMdd(param.birthDate);
console.log(param);
httpPost({ url: api.getCidByVerify, data: param }).then(res => {
if (res) {
let cid = 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 });
} else {
this.showTips = true;
}
}).catch(e => {
this.loading = false;
this.showTips = true;
});
} else {
this.loading = false;
this.showTips = true;
}
}).catch(e => {
this.loading = false;
});
}
},
watch: {
'data.firstName': function () {
this.showTips = false;
},
'data.lastName': function () {
this.showTips = false;
},
'data.birthDate': function () {
this.showTips = false;
},
'data.idNo': function () {
this.showTips = false;
},
'data.idType': function () {
this.showTips = false;
},
},
mounted() {
this.initData();
},
created() { }
}
}
},
cacheData() {
let d = JSON.stringify(this.data);
sessionStorage.setItem("clarmsCheckForm", d);
},
checkDate(data) {
this.birthdayIllegal = data.disable;
},
toRegisterPage() {
this.$router.push({
path: "/register"
});
},
toLoginPage() {
this.$router.push({
path: "/login"
});
},
toContactUs() {
this.cacheData();
this.$router.push({
path: "/custom/service?q=m1"
});
},
// 提交申请
handleConfirm() {
if (this.btnDisabled) {
return;
}
if (this.loading) {
return;
}
this.loading = true;
let param = JSON.parse(JSON.stringify(this.data));
param.birthDate = ddMMyyyy2yyyyMMdd(param.birthDate);
console.log(param);
httpPost({
url: api.getCidByVerify,
data: param
}).then(res => {
if (res) {
let cid = 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
});
} else {
this.showTips = true;
}
}).catch(e => {
this.loading = false;
this.showTips = true;
});
} else {
this.loading = false;
this.showTips = true;
}
}).catch(e => {
this.loading = false;
});
}
},
watch: {
'data.firstName': function () {
this.showTips = false;
},
'data.lastName': function () {
this.showTips = false;
},
'data.birthDate': function () {
this.showTips = false;
},
'data.idNo': function () {
this.showTips = false;
},
'data.idType': function () {
this.showTips = false;
},
},
mounted() {
this.initData();
},
created() {}
}
......
/**
* 页面描述:理赔页面
*
*/
import {
mapGetters,
mapActions,
......@@ -196,5 +201,5 @@ export default {
this.initData();
},
created() { }
created() {}
}
......