Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
2d1755fc by simon
Options

更新内容 

首页内容

欠缺内容：
1.滑动动画
2.保费计算小工具
3.页首页脚
1 parent d94eb117
Expand all
Inline Side-by-side
Showing 10 changed files with 297 additions and 56 deletions
...@@ -87,6 +87,8 @@ module.exports = { ...@@ -87,6 +87,8 @@ module.exports = {
87 87
88 88
89 // cms相关 89 // cms相关
90 // 首页联系方式
91 indexContact: "/pingan_hklife_webapi/policy/index/contact/save",
90 indexVideo: "/pingan_hklife_webapi/cms/indexVideo", 92 indexVideo: "/pingan_hklife_webapi/cms/indexVideo",
91 banner: "/pingan_hklife_webapi/cms/banner/list", 93 banner: "/pingan_hklife_webapi/cms/banner/list",
92 newsList: "/pingan_hklife_webapi/cms/news/list", 94 newsList: "/pingan_hklife_webapi/cms/news/list",
...@@ -109,6 +111,5 @@ module.exports = { ...@@ -109,6 +111,5 @@ module.exports = {
109 //首页产品列表 111 //首页产品列表
110 indexManageListApi: "/pingan_hklife_webapi/cms/index/manage", 112 indexManageListApi: "/pingan_hklife_webapi/cms/index/manage",
111 113
112 //表单提交 114
113 indexContactApi:"/pingan_hklife_webapi/policy/index/contact/save"
114 }; 115 };
......
...@@ -6,6 +6,7 @@ module.exports = { ...@@ -6,6 +6,7 @@ module.exports = {
6 Female: "Female", 6 Female: "Female",
7 Sex: "Sex", 7 Sex: "Sex",
8 Age: "Age", 8 Age: "Age",
9 Birthday: "Birthday",
9 }, 10 },
10 message: { 11 message: {
11 login: 'Login', 12 login: 'Login',
...@@ -413,7 +414,15 @@ module.exports = { ...@@ -413,7 +414,15 @@ module.exports = {
413 Time: "Preferred contact time slot", 414 Time: "Preferred contact time slot",
414 Inquiry: "Inquiry", 415 Inquiry: "Inquiry",
415 Submit: "Submit", 416 Submit: "Submit",
416 } 417 },
418
419 errorTips: {
420 e1: "Please select the collect title",
421 e2: "Please enter the collect name",
422 e3: "Please enter the collect mobile no",
423 e4: "Please enter the collect E-mail",
424 e5: "Please select the collect preferred contact time slot",
425 },
417 } 426 }
418 427
419 }, 428 },
......
...@@ -6,6 +6,7 @@ module.exports = { ...@@ -6,6 +6,7 @@ module.exports = {
6 Female: "女性", 6 Female: "女性",
7 Sex: "性別", 7 Sex: "性別",
8 Age: "年齡", 8 Age: "年齡",
9 Birthday: "生日",
9 }, 10 },
10 message: { 11 message: {
11 login: "Login", 12 login: "Login",
...@@ -426,7 +427,16 @@ module.exports = { ...@@ -426,7 +427,16 @@ module.exports = {
426 Time: "理想聯絡時間", 427 Time: "理想聯絡時間",
427 Inquiry: "查詢事項", 428 Inquiry: "查詢事項",
428 Submit: "提交" 429 Submit: "提交"
429 } 430 },
431 errorTips: {
432 e1: "請選擇稱呼",
433 e2: "請填寫姓名",
434 e3: "請填寫正確的聯絡電話",
435 e4: "請填寫正確的電郵地址",
436 e5: "請選擇理想聯絡時間",
437 },
438
439
430 } 440 }
431 }, 441 },
432 complaintAcceptance: { 442 complaintAcceptance: {
......
...@@ -6,6 +6,7 @@ module.exports = { ...@@ -6,6 +6,7 @@ module.exports = {
6 Age: "年龄", 6 Age: "年龄",
7 Male: "男性", 7 Male: "男性",
8 Female: "女性", 8 Female: "女性",
9 Birthday: "生日",
9 }, 10 },
10 message: { 11 message: {
11 login: "登入", 12 login: "登入",
...@@ -410,7 +411,6 @@ module.exports = { ...@@ -410,7 +411,6 @@ module.exports = {
410 } 411 }
411 }, 412 },
412 quote: { 413 quote: {
413
414 quote: "立即报价", 414 quote: "立即报价",
415 want: "我想", 415 want: "我想",
416 service: "联络客服", 416 service: "联络客服",
...@@ -426,7 +426,14 @@ module.exports = { ...@@ -426,7 +426,14 @@ module.exports = {
426 Time: "理想联络时间", 426 Time: "理想联络时间",
427 Inquiry: "查询事项", 427 Inquiry: "查询事项",
428 Submit: "提交" 428 Submit: "提交"
429 } 429 },
430 errorTips: {
431 e1: "请选择称呼",
432 e2: "请填写姓名",
433 e3: "请正确的联络电话",
434 e4: "请填写正确的电邮地址",
435 e5: "请选择理想联络时间",
436 },
430 } 437 }
431 }, 438 },
432 complaintAcceptance: { 439 complaintAcceptance: {
......
...@@ -54,13 +54,13 @@ export default { ...@@ -54,13 +54,13 @@ export default {
54 fileContentType: "" 54 fileContentType: ""
55 }, 55 },
56 errorTips: { 56 errorTips: {
57 e1: "", 57 e1: "", // 电话号码
58 e2: "", 58 e2: "", // 地址
59 e3: "", 59 e3: "", // email
60 e4: "", 60 e4: "", // 国际地区取号
61 e5: "", 61 e5: "", // 电话区号
62 e6: "", 62 e6: "", // 省 中国大陆需要判断
63 e7: "" 63 e7: "", // 市 中国大陆需要判断
64 }, 64 },
65 65
66 modalSimpleVisiable: false, 66 modalSimpleVisiable: false,
......
...@@ -12,11 +12,16 @@ import DatePicker from "@/components/date-picker/date-picker.vue"; ...@@ -12,11 +12,16 @@ import DatePicker from "@/components/date-picker/date-picker.vue";
12 import { 12 import {
13 ddMMyyyy2yyyyMMdd 13 ddMMyyyy2yyyyMMdd
14 } from "@utils/utils.js"; 14 } from "@utils/utils.js";
15 import {
16 contactMethodCheck
17 } from "@utils/utils.js";
15 18
16 export default { 19 export default {
17 data() { 20 data() {
18 return { 21 return {
19 key: "value", 22 key: "value",
23 PRODUCT_PRO_EASY: "PRODUCT_PRO_EASY", // 好医时
24 PRODUCT_REN_RICH: "PRODUCT_REN_RICH", // 平安福
20 // swiper 25 // swiper
21 swiperOption: { 26 swiperOption: {
22 navigation: { 27 navigation: {
...@@ -43,28 +48,31 @@ export default { ...@@ -43,28 +48,31 @@ export default {
43 48
44 // 投保 49 // 投保
45 quoteData: { 50 quoteData: {
46 gender: 1 51 gender: "",
52 birthday: ""
47 }, 53 },
48 // 投保背景图 54 // 投保背景图
49 quoteBgUrl: "https://kdcdn.oss-cn-shenzhen.aliyuncs.com/temp/pingan-life/index-quote-bg-temp.png", 55 // quoteBgUrl: "https://kdcdn.oss-cn-shenzhen.aliyuncs.com/temp/pingan-life/index-quote-bg-temp.png",
50 56
51 // 表单 57 // 表单
52 formData: { 58 formData: {
53 gender: "", 59 title: "",
54 birthDate: "" 60 name: "",
61 mobile: "",
62 email: "",
63 contactTime: "",
64 inquiry: ""
55 }, 65 },
56 // 性别列表 66 // 性别列表
57 genderList: [{
58 n: "先生",
59 v: "M"
60 },
61 {
62 n: "女士",
63 v: "F"
64 }
65 ],
66 // 错误提示 67 // 错误提示
67 errTips: "" 68 errorTips: {
69 e1: "", // 称呼
70 e2: "", // 姓名
71 e3: "", // 联系电话
72 e4: "", // 電郵
73 e5: "", // 理想聯絡時間
74 e6: "", // 查詢事項
75 },
68 }; 76 };
69 }, 77 },
70 components: { 78 components: {
...@@ -78,6 +86,28 @@ export default { ...@@ -78,6 +86,28 @@ export default {
78 return this.$i18n.messages && this.$i18n.locale ? 86 return this.$i18n.messages && this.$i18n.locale ?
79 this.$i18n.messages[this.$i18n.locale] : {}; 87 this.$i18n.messages[this.$i18n.locale] : {};
80 }, 88 },
89 titleList() {
90 let result = [{
91 n: this.i18n.common.Male,
92 v: "M"
93 },
94 {
95 n: this.i18n.common.Female,
96 v: "F"
97 }
98 ]
99 console.log("result:", result);
100 return result;
101 },
102
103 submitBtnDisabled() {
104 // let b1 = !this.selectedPolicies || this.selectedPolicies.length == 0;
105 // let b2 = !this.data.address && !this.data.email && !this.data.mobile;
106
107 let formData = this.formData;
108 let boo = !formData.title || !formData.name || !formData.mobile || !formData.email || !formData.contactTime;
109 return boo;
110 },
81 // 表格tab缩进计算 111 // 表格tab缩进计算
82 tableTapIndentation() { 112 tableTapIndentation() {
83 let result = {}; 113 let result = {};
...@@ -149,7 +179,7 @@ export default { ...@@ -149,7 +179,7 @@ export default {
149 // }); 179 // });
150 // this.$set(this, "bannerList", bannerList); 180 // this.$set(this, "bannerList", bannerList);
151 // }, 181 // },
152 btnNavigateTo(type, link) { 182 btnNavigateTo(type, link, d) {
153 switch (type) { 183 switch (type) {
154 case "none": 184 case "none":
155 break; 185 break;
...@@ -167,7 +197,8 @@ export default { ...@@ -167,7 +197,8 @@ export default {
167 this.$router.push({ 197 this.$router.push({
168 path: "/vhis", 198 path: "/vhis",
169 query: { 199 query: {
170 p: link 200 p: link,
201 d: JSON.stringify(d)
171 } 202 }
172 }); 203 });
173 break; 204 break;
...@@ -218,10 +249,116 @@ export default { ...@@ -218,10 +249,116 @@ export default {
218 */ 249 */
219 onQuoteHandler() { 250 onQuoteHandler() {
220 // gotoVHIS(); 251 // gotoVHIS();
252
253 if (this.curTab.relation == this.PRODUCT_PRO_EASY) {
254 let d = {
255 gender: this.quoteData.gender,
256 birthday: this.quoteData.birthday,
257 }
258 console.log("d:", d);
259 this.btnNavigateTo("vhis", this.curTab.lastBtnDescribe.l, d);
260 }
261 if (this.curTab.relation == this.PRODUCT_REN_RICH) {
262 this.$router.push({
263 path: "/gen/rich",
264 query: {}
265 });
266 }
267
221 }, 268 },
222 // queryIndexManageListApi() { 269 /**
270 * 验证表单
271 */
272 checkSubmit() {
273 if (this.submitBtnDisabled) return;
274 return new Promise((resolve, reject) => {
223 275
224 // }, 276 this.errorTips = {
277 e1: "",
278 e2: "",
279 e3: "",
280 e4: "",
281 e5: "",
282 e6: "",
283 e7: ""
284 };
285
286 let formData = this.formData;
287
288 // 校验称呼
289 if (!formData.title) {
290 this.errorTips.e1 = this.i18n.index.contact.errorTips.e1;
291 }
292 // 校验姓名
293 if (!formData.name) {
294 this.errorTips.e2 = this.i18n.index.contact.errorTips.e2;
295 }
296
297 // 联系电话
298 if (formData.mobile) {
299 let hkMobile = contactMethodCheck("hkmobile", formData.mobile);
300 let zhMobile = contactMethodCheck("mobile", formData.mobile);
301 if (!hkMobile && !zhMobile) {
302 this.errorTips.e3 = this.i18n.index.contact.errorTips.e3;
303 }
304 } else {
305 this.errorTips.e3 = this.i18n.index.contact.errorTips.e3;
306 }
307
308 // 校验電郵
309 if (formData.email) {
310 if (formData.email && !contactMethodCheck("email", formData.email)) {
311 this.errorTips.e4 = this.i18n.index.contact.errorTips.e4;
312 }
313 } else {
314 this.errorTips.e4 = this.i18n.index.contact.errorTips.e4;
315 }
316
317 // 校验理想聯絡時間
318 if (!formData.contactTime) {
319 this.errorTips.e5 = this.i18n.index.contact.errorTips.e5;
320 }
321
322 // 查詢事項 不用校验
323 // if (!formData.inquiry) {
324 // this.errorTips.e6 = this.i18n.index.contact.errorTips.e6;
325 // }
326
327 let errorTips = this.errorTips;
328 if (!(errorTips.e1 && errorTips.e2 && errorTips.e3 && errorTips.e4 && errorTips.e5)) {
329 resolve();
330 }
331 });
332 },
333 /**
334 * 提交表单
335 */
336 onSubmitContact() {
337 console.log("this.formData:", this.formData);
338 this.checkSubmit().then((result) => {
339
340 let formData = this.formData;
341
342 let data = {
343 sex: formData.title,
344 name: formData.name,
345 mobile: formData.mobile,
346 email: formData.email,
347 contactTime: formData.contactTime,
348 inquiry: formData.inquiry
349 }
350 console.log("data:", data);
351
352 httpPost({
353 url: api.indexContact,
354 data: data,
355 }).then((result) => {
356 console.log("indexContact result:", result);
357 }).catch((err) => {
358
359 });
360 })
361 },
225 initData() { 362 initData() {
226 // this.fetchBanner().then(res => { 363 // this.fetchBanner().then(res => {
227 // this.bannerCandidateList = res; 364 // this.bannerCandidateList = res;
...@@ -280,5 +417,22 @@ export default { ...@@ -280,5 +417,22 @@ export default {
280 this.initData(); 417 this.initData();
281 } catch (e) {} 418 } catch (e) {}
282 }); 419 });
283 } 420 },
421 watch: {
422 "formData.title": function () {
423 this.errorTips.e1 = "";
424 },
425 "formData.name": function () {
426 this.errorTips.e2 = "";
427 },
428 "formData.mobile": function () {
429 this.errorTips.e3 = "";
430 },
431 "formData.email": function () {
432 this.errorTips.e4 = "";
433 },
434 "formData.contactTime": function () {
435 this.errorTips.e5 = "";
436 },
437 },
284 }; 438 };
......
...@@ -218,28 +218,39 @@ ...@@ -218,28 +218,39 @@
218 height: 540px; 218 height: 540px;
219 } 219 }
220 220
221 .tit { 221 .tit-wrap {
222 font-size: 36px; 222 height: 670px;
223 font-weight: bold; 223 display: flex;
224 text-align: center; 224 // align-items: flex-end;
225 color: $cOrange2; 225 align-content: flex-end;
226 flex-wrap: wrap;
227 width: 100%;
226 228
227 &:lang(zh) { 229 .tit {
228 letter-spacing: 1.8px; 230 width: 100%;
231 font-size: 36px;
232 font-weight: bold;
233 text-align: center;
234 color: $cOrange2;
235
236 &:lang(zh) {
237 letter-spacing: 1.8px;
238 }
239 }
240 .tit2 {
241 width: 720px;
242 margin: 40px auto 0;
243 text-align: center;
244 color: #ffffff;
245 text-shadow: 0px 0px 16px rgba(0, 0, 0, 1);
229 } 246 }
230 }
231 .tit2 {
232 width: 720px;
233 margin: 40px auto 0;
234 text-align: center;
235 color: #ffffff;
236 text-shadow: 0px 0px 16px rgba(0, 0, 0, 1);
237 } 247 }
238 248
239 .table { 249 .table {
240 // width: 1200px; 250 // width: 1200px;
241 width: 1062px; 251 width: 1062px;
242 // background-color: wheat; 252 // background-color: wheat;
253 // display: none;
243 254
244 margin: 56px auto 0; 255 margin: 56px auto 0;
245 &-tab { 256 &-tab {
...@@ -321,6 +332,7 @@ ...@@ -321,6 +332,7 @@
321 .func { 332 .func {
322 } 333 }
323 334
335 // 性别和年龄选择
324 .func1 { 336 .func1 {
325 &-item { 337 &-item {
326 display: flex; 338 display: flex;
...@@ -347,11 +359,21 @@ ...@@ -347,11 +359,21 @@
347 359
348 .age { 360 .age {
349 .ipt-wrap-linear { 361 .ipt-wrap-linear {
350 width: 222px; 362 width: 250px;
363 .ipt-date {
364 padding: 0 24px;
365 width: 100%;
366 background-color: #ffffff;
367 border-radius: $borderRadius;
368 @include border-tans;
369 border-radius: 5px;
370 }
351 } 371 }
352 } 372 }
353 } 373 }
354 } 374 }
375
376 // 平安福保费计算
355 } 377 }
356 378
357 .arrow { 379 .arrow {
...@@ -444,9 +466,12 @@ ...@@ -444,9 +466,12 @@
444 width: 100%; 466 width: 100%;
445 467
446 &-item { 468 &-item {
447 .ipt-wrap-linear { 469 &-wrap {
448 margin-bottom: 28px; 470 margin-bottom: 36px;
471 position: relative;
472 }
449 473
474 .ipt-wrap-linear {
450 .cont { 475 .cont {
451 .ipt { 476 .ipt {
452 text-align: center; 477 text-align: center;
...@@ -472,6 +497,21 @@ ...@@ -472,6 +497,21 @@
472 } 497 }
473 } 498 }
474 } 499 }
500
501 .validator {
502 color: $cOrange2;
503 margin-top: 4px;
504 position: absolute;
505 left: 0;
506 display: flex;
507 align-items: center;
508 font-size: $fontSizeSmall-M2;
509 img {
510 display: inline-block;
511 margin-right: 4.8px;
512 }
513 }
514
475 .dear { 515 .dear {
476 width: 40%; 516 width: 40%;
477 margin-right: 26px; 517 margin-right: 26px;
...@@ -624,10 +664,10 @@ ...@@ -624,10 +664,10 @@
624 width: 100% !important; 664 width: 100% !important;
625 border-right: none; 665 border-right: none;
626 border-bottom: solid 2px #ffffff; 666 border-bottom: solid 2px #ffffff;
627 &:first-child{ 667 &:first-child {
628 justify-content: center; 668 justify-content: center;
629 } 669 }
630 &:last-child{ 670 &:last-child {
631 justify-content: center; 671 justify-content: center;
632 } 672 }
633 } 673 }
...@@ -666,7 +706,6 @@ ...@@ -666,7 +706,6 @@
666 .nav-tab { 706 .nav-tab {
667 font-size: $fontSize-M2; 707 font-size: $fontSize-M2;
668 &-item { 708 &-item {
669
670 } 709 }
671 } 710 }
672 711
......
...@@ -24,7 +24,15 @@ function encryptContent(obj) { ...@@ -24,7 +24,15 @@ function encryptContent(obj) {
24 return securityContent; 24 return securityContent;
25 }; 25 };
26 26
27 27 /**
28 * 路由上，p代表产品，d代表参数。
29 * d 是一个json结构，对应的数据结构是：
30 * name: 名字
31 gender: 性别，M：男；F：女
32 birthday: yyyy-MM-dd
33 certiType: 参考用户体系码表
34 certiNo:
35 */
28 export default { 36 export default {
29 data() { 37 data() {
30 return { 38 return {
...@@ -82,15 +90,28 @@ export default { ...@@ -82,15 +90,28 @@ export default {
82 } 90 }
83 url += "&partnerId=PA001&productCode=" + productCode; 91 url += "&partnerId=PA001&productCode=" + productCode;
84 92
93 let data = null;
85 // console.log(JSON.stringify(this.information)); 94 // console.log(JSON.stringify(this.information));
86 if (this.information && this.information.idType && this.information.idNo) { 95
87 let data = { 96 if (this.$route.query.d) {
97 try {
98 let queryData = JSON.parse(this.$route.query.d);
99 data = queryData;
100 } catch (e) {
101 console.error("paramster 'd' is not a json ", this.$route.query.d);
102 }
103 } else if (this.information && this.information.idType && this.information.idNo) {
104 data = {
88 name: this.information.fullName, 105 name: this.information.fullName,
89 gender: this.information.sex, 106 gender: this.information.sex,
90 birthday: this.information.birthDate, 107 birthday: this.information.birthDate,
91 certiType: this.information.policyIdType ? this.information.policyIdType : this.information.idType, 108 certiType: this.information.policyIdType ? this.information.policyIdType : this.information.idType,
92 certiNo: this.information.idNo 109 certiNo: this.information.idNo
93 }; 110 };
111 }
112
113 console.log("before into vhis, and data = ", data);
114 if (data) {
94 url += "&data=" + encryptContent(data); 115 url += "&data=" + encryptContent(data);
95 } 116 }
96 // url = "http://www.baidu.com" 117 // url = "http://www.baidu.com"
......
...@@ -147,7 +147,7 @@ ...@@ -147,7 +147,7 @@
147 height: 15px; 147 height: 15px;
148 pointer-events: none; 148 pointer-events: none;
149 cursor: default; 149 cursor: default;
150 z-index: 900; 150 z-index: 1001;
151 } 151 }
152 152
153 .eye { 153 .eye {
......