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
1
2 # 中国平安人寿(香港) 1 # 中国平安人寿(香港)
3 2
4 --- 3 ---
...@@ -9,25 +8,44 @@ ...@@ -9,25 +8,44 @@
9 8
10 --- 9 ---
11 10
11 ## 技术选型
12
13 #### 技术框架
14
15 项目框架: vuejs
16
17 脚手架版本: vue-cli3
18
19 #### 开发环境
20
21 node 版本: 推荐 v12.10.0 或以上
22
23 npm 版本: 推荐 6.10.3 或以上
24
12 ## 开始使用 25 ## 开始使用
13 26
27 ---
14 28
15 #### 安装依赖 (建议使用国内镜像) 29 #### 安装依赖 (建议使用国内镜像)
30
16 ``` 31 ```
17 npm install 32 npm install
18 ``` 33 ```
19 34
20 #### 项目预览 35 #### 项目预览
36
21 ``` 37 ```
22 npm run dev 38 npm run dev
23 ``` 39 ```
24 40
25 #### 项目打包 41 #### 项目打包
42
26 ``` 43 ```
27 npm run build 44 npm run build
28 ``` 45 ```
29 46
30 #### 项目打包 -- 沙箱环境 47 #### 项目打包 -- 沙箱环境
48
31 ``` 49 ```
32 npm run sandbox 50 npm run sandbox
33 ``` 51 ```
...@@ -70,51 +88,61 @@ npm run sandbox ...@@ -70,51 +88,61 @@ npm run sandbox
70 88
71 --- 89 ---
72 90
73 ## 前置说明
74
75 #### 开发环境
76
77 脚手架版本: CLI3
78
79 node版本: 推荐v12.10.0或以上
80
81 npm版本: 推荐6.10.3或以上
82
83 ---
84
85 ## 规范说明 91 ## 规范说明
86 92
87 #### vue文件分离 93 #### vue 文件分离
88 94
89 一般业务.vue文件通常会在同一目录下拆分为.vue,.js,.scss三个文件。 95 一般业务.vue 文件通常会在同一目录下拆分为.vue,.js,.scss 三个文件。
90 96
91 正常的创建和引用vue文件都是html、css、js三者在一起的，这样写起来虽然方便了，但是页面比较大或者代码比较多的情况下，即使使用组件有时代码也比较多，简单来说查找不变不利于编程，大的来说影像优化性能。将代码中的html、css、js分离出来是个很好的选择。 97 正常的创建和引用 vue 文件都是 html、css、js 三者在一起的，这样写起来虽然方便了，但是页面比较大或者代码比较多的情况下，即使使用组件有时代码也比较多，简单来说查找不变不利于编程，大的来说影像优化性能。将代码中的 html、css、js 分离出来是个很好的选择。
92 98
93 #### 编码规范 99 #### 编码规范
94 100
95 本项目不使用eslint代码检查工具。 101 本项目不使用 eslint 代码检查工具。
96 102
97 开发人员需遵循vue官方风格规范。 103 开发人员需遵循 vue 官方风格规范。
98 104
99 #### 样式规范 105 #### 样式规范
100 106
101 - 优先使用 _var.scss 声明的样式变量 107 - 优先使用 \_var.scss 声明的样式变量
102 - font-family 名字顺序 Arial -> Microsoft YaHei 108 - font-family 名字顺序 Arial -> Microsoft YaHei
103 109
104 #### z-index权重划分 110 #### z-index 权重划分
105 111
106 - 遮罩蒙层:5000 112 - 遮罩蒙层:5000
107 - 导航栏:3000 113 - 导航栏:3000
108 - element-ui:2000+ 114 - element-ui:2000+
109 - 自定义交互组件 如date-picker: 800-900 115 - 自定义交互组件 如 date-picker: 800-900
110 - 一般业务级:小于100 116 - 一般业务级:小于 100
111 117
112 #### 响应式方案 118 #### 响应式方案
113 119
114 通过purecss+@media方式实现。 120 通过 purecss+@media 方式实现。
115 121
116 选取原因： 122 选取原因：
117 - 与bootstrap相比，purecss要轻量得多 123
124 - 与 bootstrap 相比，purecss 更为轻量。
125
126 ## 前后端数据交互
127
128 #### 简述
129
130 为了实现前后端分离，前后端需要约定一套数据交互规范。后续前后端数据接口的输入输出需要按照本文档执行。
131
132 #### 数据格式
133
134 数据格式: json
135
136 跨域处理使用跨域资源共享(Cross-Origin Resource Sharing)方式，允许跨域的接口需要在返回头中输出相应的 header。
137
138 #### 数据接口输出
139
140 | 字段 | 数据类型 | 必要 | 参说明 |
141 | ------- | -------- | ---- | --------------------------------------- |
142 | success | Boolean | Y | 是否请求成功（true：成功，false：失败） |
143 | errMsg | Integer | N | 请求失败原因 |
144 | code | String | Y | 请求失败错误代码 |
145 | content | Object | N | 业务返回具体参数 |
118 146
119 #### 数据加密 147 #### 数据加密
120 148
...@@ -130,8 +158,7 @@ npm版本: 推荐6.10.3或以上 ...@@ -130,8 +158,7 @@ npm版本: 推荐6.10.3或以上
130 158
131 采用方案：[i18n](https://github.com/kazupon/vue-i18n) 159 采用方案：[i18n](https://github.com/kazupon/vue-i18n)
132 160
133 在文件入口main.js注入i18n 161 在文件入口 main.js 注入 i18n
134
135 162
136 #### 三语支持(默认繁体): 163 #### 三语支持(默认繁体):
137 164
...@@ -141,17 +168,14 @@ npm版本: 推荐6.10.3或以上 ...@@ -141,17 +168,14 @@ npm版本: 推荐6.10.3或以上
141 168
142 三语文件所在目录: 169 三语文件所在目录:
143 170
144
145 #### 执行逻辑 171 #### 执行逻辑
146 172
147 访问页面时，会先从localStorage里获取历史选取语言，若活动结果为空，则默认使用繁体。 173 访问页面时，会先从 localStorage 里获取历史选取语言，若活动结果为空，则默认使用繁体。
148
149
150 174
151 语言切换时，把当前选择语言注入到i18n并埋到localStorage，同时广播事件，通知页面初始化(重新读取cms内容)。 175 语言切换时，把当前选择语言注入到 i18n 并埋到 localStorage，同时广播事件，通知页面初始化(重新读取 cms 内容)。
152 176
153 --- 177 ---
154 178
155 ## TODO 179 ## TODO
156 180
157 - [x] 项目后期需补充 SEO优化插件 PrerenderSPAPlugin 181 - [x] 项目后期需补充 SEO 优化插件 PrerenderSPAPlugin
......
1 /**
2 * 组件描述: 用户登陆提示
3 * 其中包含
4 * 1.用户登陆提示
5 * 2.五项基本信息验证
6 */
7
1 import { 8 import {
2 mapState 9 mapState
3 } from 'vuex'; 10 } from 'vuex';
...@@ -41,6 +48,7 @@ export default { ...@@ -41,6 +48,7 @@ export default {
41 i18n() { 48 i18n() {
42 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {}; 49 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
43 }, 50 },
51 // 如果 用户未登陆 或者 五项基本信息未验证
44 showPanel() { 52 showPanel() {
45 let b1 = this.model == "auth" && (this.showProfileInfo || this.showUnAuth); 53 let b1 = this.model == "auth" && (this.showProfileInfo || this.showUnAuth);
46 let b2 = this.model == "suggest" && this.showSuggest; 54 let b2 = this.model == "suggest" && this.showSuggest;
...@@ -48,6 +56,7 @@ export default { ...@@ -48,6 +56,7 @@ export default {
48 } 56 }
49 }, 57 },
50 methods: { 58 methods: {
59 // 检测用户状态，触发用户登陆/登出
51 initData() { 60 initData() {
52 this.tips = this.i18n.customService.unauth[this.tipModel]; 61 this.tips = this.i18n.customService.unauth[this.tipModel];
53 if (this.userInfo && this.userInfo.name) { 62 if (this.userInfo && this.userInfo.name) {
...@@ -73,6 +82,7 @@ export default { ...@@ -73,6 +82,7 @@ export default {
73 this.showProfileInfo = false; 82 this.showProfileInfo = false;
74 this.$emit("onLogout", {}); 83 this.$emit("onLogout", {});
75 }, 84 },
85 // 前往登陆(带重定向)
76 gotoLoginPage() { 86 gotoLoginPage() {
77 let callback = this.$route.path; 87 let callback = this.$route.path;
78 let separator = "?"; 88 let separator = "?";
...@@ -80,14 +90,25 @@ export default { ...@@ -80,14 +90,25 @@ export default {
80 callback += separator + key + "=" + this.$route.query[key]; 90 callback += separator + key + "=" + this.$route.query[key];
81 separator = "&"; 91 separator = "&";
82 } 92 }
83 this.$router.push({ path: "/login?callback=" + callback }); 93 this.$router.push({
94 path: "/login?callback=" + callback
95 });
84 }, 96 },
97 // 前往注册页面
85 gotoRegisterPage() { 98 gotoRegisterPage() {
86 this.$router.push({ path: "/register" }); 99 this.$router.push({
100 path: "/register"
101 });
87 }, 102 },
88 gotoInformationPage() { 103 gotoInformationPage() {
89 let c = this.$route.fullPath; 104 let c = this.$route.fullPath;
90 this.$router.push({ path: "/infomation/improve", query: { c: c, a: 1 } }); 105 this.$router.push({
106 path: "/infomation/improve",
107 query: {
108 c: c,
109 a: 1
110 }
111 });
91 }, 112 },
92 noAuth() { 113 noAuth() {
93 this.$store.commit("SET_USER_INFO", null); 114 this.$store.commit("SET_USER_INFO", null);
...@@ -102,7 +123,7 @@ export default { ...@@ -102,7 +123,7 @@ export default {
102 this.$root.eventBus.$on("langChange", () => { 123 this.$root.eventBus.$on("langChange", () => {
103 try { 124 try {
104 this.tips = this.i18n.customService.unauth[this.tipModel]; 125 this.tips = this.i18n.customService.unauth[this.tipModel];
105 } catch (e) { } 126 } catch (e) {}
106 }); 127 });
107 }, 128 },
108 watch: { 129 watch: {
......
1 <template> 1 <template>
2 <div v-if="showPanel"> 2 <div v-if="showPanel">
3 <!-- 登陆提示 -->
3 <div v-if="showUnAuth"> 4 <div v-if="showUnAuth">
4 <div class="alert"> 5 <div class="alert">
5 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt=""> 6 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
...@@ -14,7 +15,7 @@ ...@@ -14,7 +15,7 @@
14 <img v-if="model=='suggest'" class="pointer close" src="@/assets/images/common/icon-alert-close.png" alt="" @click="showSuggest = false"> 15 <img v-if="model=='suggest'" class="pointer close" src="@/assets/images/common/icon-alert-close.png" alt="" @click="showSuggest = false">
15 </div> 16 </div>
16 </div> 17 </div>
17 18 <!-- 五项基本信息验证提示 -->
18 <div v-if="showProfileInfo"> 19 <div v-if="showProfileInfo">
19 <div class="alert"> 20 <div class="alert">
20 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt=""> 21 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
......
1 1 /**
2 * 组件描述:理赔申请模态窗
3 * 主要用于不在保险范围内的提示
4 */
2 5
3 export default { 6 export default {
4 7
...@@ -12,7 +15,6 @@ export default { ...@@ -12,7 +15,6 @@ export default {
12 }, 15 },
13 data() { 16 data() {
14 return { 17 return {
15
16 } 18 }
17 }, 19 },
18 components: {}, 20 components: {},
...@@ -41,6 +43,5 @@ export default { ...@@ -41,6 +43,5 @@ export default {
41 created() { 43 created() {
42 this.initData(); 44 this.initData();
43 }, 45 },
44 watch: { 46 watch: {},
45 },
46 } 47 }
......
1 /**
2 * 组件描述:理赔申请模态窗
3 * 主要用于不在保险范围内的提示
4 */
5
1 export default { 6 export default {
2 data() { 7 data() {
3 return { 8 return {
......
1 /**
2 * 组件描述:申请索偿上传图片
3 */
4
1 import api from '@/api/api' 5 import api from '@/api/api'
2 import { 6 import {
3 httpGet, 7 httpGet,
...@@ -17,7 +21,7 @@ export default { ...@@ -17,7 +21,7 @@ export default {
17 // 是否显示组件 21 // 是否显示组件
18 options: { 22 options: {
19 type: Object, 23 type: Object,
20 default() { 24 default () {
21 return { 25 return {
22 // 名称 26 // 名称
23 name: "", 27 name: "",
...@@ -70,6 +74,7 @@ export default { ...@@ -70,6 +74,7 @@ export default {
70 }, 74 },
71 }, 75 },
72 methods: { 76 methods: {
77 // 初始化缓存
73 initData() { 78 initData() {
74 for (let index = 0; index < sessionStorage.length; index++) { 79 for (let index = 0; index < sessionStorage.length; index++) {
75 let key = sessionStorage.key(index); 80 let key = sessionStorage.key(index);
...@@ -87,10 +92,13 @@ export default { ...@@ -87,10 +92,13 @@ export default {
87 } 92 }
88 this.uploadFiles = this.images.length; 93 this.uploadFiles = this.images.length;
89 }, 94 },
95 // 缓存数据
90 cacheData() { 96 cacheData() {
91 for (let index = 0; index < this.images.length; index++) { 97 for (let index = 0; index < this.images.length; index++) {
92 let tmp = this.images[index]; 98 let tmp = this.images[index];
93 if (tmp.showMask || !tmp.cacheKey) { continue; } 99 if (tmp.showMask || !tmp.cacheKey) {
100 continue;
101 }
94 102
95 let key = "clarmImage." + this.options.imageTypeID + "." + index; 103 let key = "clarmImage." + this.options.imageTypeID + "." + index;
96 sessionStorage.setItem(key, JSON.stringify({ 104 sessionStorage.setItem(key, JSON.stringify({
...@@ -100,6 +108,7 @@ export default { ...@@ -100,6 +108,7 @@ export default {
100 })); 108 }));
101 } 109 }
102 }, 110 },
111 // 清除缓存
103 clearCache() { 112 clearCache() {
104 for (let index = 0; index < sessionStorage.length; index++) { 113 for (let index = 0; index < sessionStorage.length; index++) {
105 let key = sessionStorage.key(index); 114 let key = sessionStorage.key(index);
...@@ -110,6 +119,7 @@ export default { ...@@ -110,6 +119,7 @@ export default {
110 this.uploadFiles = 0; 119 this.uploadFiles = 0;
111 this.images = []; 120 this.images = [];
112 }, 121 },
122 // 选择多文件
113 selectMutilFile() { 123 selectMutilFile() {
114 if (this.uploading) { 124 if (this.uploading) {
115 return; 125 return;
...@@ -220,6 +230,7 @@ export default { ...@@ -220,6 +230,7 @@ export default {
220 this.$set(this, "images", images); 230 this.$set(this, "images", images);
221 this.refreshUploadNumber(); 231 this.refreshUploadNumber();
222 }, 232 },
233 // 生成随机AESKey
223 randomAesKey() { 234 randomAesKey() {
224 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(","); 235 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(",");
225 let res = ""; 236 let res = "";
...@@ -229,6 +240,7 @@ export default { ...@@ -229,6 +240,7 @@ export default {
229 } 240 }
230 return res; 241 return res;
231 }, 242 },
243 // 向父组件发送图片结果
232 emitResult() { 244 emitResult() {
233 if (this.images.length == 0) { 245 if (this.images.length == 0) {
234 let result = { 246 let result = {
...@@ -272,6 +284,7 @@ export default { ...@@ -272,6 +284,7 @@ export default {
272 onShowTipsOutHandler(event) { 284 onShowTipsOutHandler(event) {
273 this.tipsVisible = false; 285 this.tipsVisible = false;
274 }, 286 },
287 // 压缩图片
275 compressImage(src, callback) { 288 compressImage(src, callback) {
276 var img = new Image(); 289 var img = new Image();
277 img.src = src; 290 img.src = src;
...@@ -302,9 +315,6 @@ export default { ...@@ -302,9 +315,6 @@ export default {
302 callback(base64); 315 callback(base64);
303 } 316 }
304 }, 317 },
305 datePickCompleteHandler() {
306
307 }
308 }, 318 },
309 watch: { 319 watch: {
310 320
...@@ -312,5 +322,5 @@ export default { ...@@ -312,5 +322,5 @@ export default {
312 mounted() { 322 mounted() {
313 this.initData(); 323 this.initData();
314 }, 324 },
315 created() { } 325 created() {}
316 } 326 }
......
1 import { mapState } from "vuex"; 1 /**
2 * 组件描述:申请索偿申请组件
3 */
4
5
6 import {
7 mapState
8 } from "vuex";
2 import api from '@/api/api' 9 import api from '@/api/api'
3 import { 10 import {
4 httpGet, 11 httpGet,
...@@ -6,13 +13,22 @@ import { ...@@ -6,13 +13,22 @@ import {
6 formdata 13 formdata
7 } from '@/api/fetch-api.js' 14 } from '@/api/fetch-api.js'
8 15
9 import { getPolicyIdTypeList } from '@/utils/biz.js'; 16 import {
17 getPolicyIdTypeList
18 } from '@/utils/biz.js';
10 import Vue from 'vue'; 19 import Vue from 'vue';
11 import DatePicker from '@/components/date-picker/date-picker.vue'; 20 import DatePicker from '@/components/date-picker/date-picker.vue';
12 import { Loading } from 'vant'; 21 import {
13 import { Select, Option } from 'element-ui'; 22 Loading
23 } from 'vant';
24 import {
25 Select,
26 Option
27 } from 'element-ui';
14 28
15 import { ddMMyyyy2yyyyMMdd } from '@utils/utils.js'; 29 import {
30 ddMMyyyy2yyyyMMdd
31 } from '@utils/utils.js';
16 32
17 Vue.use(Select); 33 Vue.use(Select);
18 Vue.use(Option); 34 Vue.use(Option);
...@@ -99,6 +115,7 @@ export default { ...@@ -99,6 +115,7 @@ export default {
99 path: "/custom/service?q=m1" 115 path: "/custom/service?q=m1"
100 }); 116 });
101 }, 117 },
118 // 提交申请
102 handleConfirm() { 119 handleConfirm() {
103 if (this.btnDisabled) { 120 if (this.btnDisabled) {
104 return; 121 return;
...@@ -110,13 +127,24 @@ export default { ...@@ -110,13 +127,24 @@ export default {
110 let param = JSON.parse(JSON.stringify(this.data)); 127 let param = JSON.parse(JSON.stringify(this.data));
111 param.birthDate = ddMMyyyy2yyyyMMdd(param.birthDate); 128 param.birthDate = ddMMyyyy2yyyyMMdd(param.birthDate);
112 console.log(param); 129 console.log(param);
113 httpPost({ url: api.getCidByVerify, data: param }).then(res => { 130 httpPost({
131 url: api.getCidByVerify,
132 data: param
133 }).then(res => {
114 if (res) { 134 if (res) {
115 let cid = res; 135 let cid = res;
116 httpPost({ url: api.clarmsCustomerList, data: { cid: cid } }).then(res => { 136 httpPost({
137 url: api.clarmsCustomerList,
138 data: {
139 cid: cid
140 }
141 }).then(res => {
117 this.loading = false; 142 this.loading = false;
118 if (res && res.insuredInfoList && res.insuredInfoList.length > 0) { 143 if (res && res.insuredInfoList && res.insuredInfoList.length > 0) {
119 this.$emit("insuredInfoList", { cid: cid, list: res.insuredInfoList }); 144 this.$emit("insuredInfoList", {
145 cid: cid,
146 list: res.insuredInfoList
147 });
120 } else { 148 } else {
121 this.showTips = true; 149 this.showTips = true;
122 } 150 }
...@@ -153,5 +181,5 @@ export default { ...@@ -153,5 +181,5 @@ export default {
153 mounted() { 181 mounted() {
154 this.initData(); 182 this.initData();
155 }, 183 },
156 created() { } 184 created() {}
157 } 185 }
......
1 /**
2 * 页面描述:理赔页面
3 *
4 */
5
1 import { 6 import {
2 mapGetters, 7 mapGetters,
3 mapActions, 8 mapActions,
...@@ -196,5 +201,5 @@ export default { ...@@ -196,5 +201,5 @@ export default {
196 this.initData(); 201 this.initData();
197 202
198 }, 203 },
199 created() { } 204 created() {}
200 } 205 }
......