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
Inline Side-by-side
Showing 10 changed files with 355 additions and 68 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,7 +218,16 @@ ...@@ -218,7 +218,16 @@
218 height: 540px; 218 height: 540px;
219 } 219 }
220 220
221 .tit-wrap {
222 height: 670px;
223 display: flex;
224 // align-items: flex-end;
225 align-content: flex-end;
226 flex-wrap: wrap;
227 width: 100%;
228
221 .tit { 229 .tit {
230 width: 100%;
222 font-size: 36px; 231 font-size: 36px;
223 font-weight: bold; 232 font-weight: bold;
224 text-align: center; 233 text-align: center;
...@@ -235,11 +244,13 @@ ...@@ -235,11 +244,13 @@
235 color: #ffffff; 244 color: #ffffff;
236 text-shadow: 0px 0px 16px rgba(0, 0, 0, 1); 245 text-shadow: 0px 0px 16px rgba(0, 0, 0, 1);
237 } 246 }
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,13 +359,23 @@ ...@@ -347,13 +359,23 @@
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;
351 } 370 }
352 } 371 }
353 } 372 }
354 } 373 }
355 } 374 }
356 375
376 // 平安福保费计算
377 }
378
357 .arrow { 379 .arrow {
358 position: absolute; 380 position: absolute;
359 width: 44px; 381 width: 44px;
...@@ -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
......
...@@ -73,12 +73,14 @@ ...@@ -73,12 +73,14 @@
73 </div> 73 </div>
74 74
75 <!-- 线上报价 --> 75 <!-- 线上报价 -->
76 <div class="quote" :style="'background-image: url(' + quoteBgUrl + ');'"> 76 <div class="quote" :style="'background-image: url(' + curTab.pageMidImage + ');'">
77 <div class="space1"></div> 77 <!-- <div class="space1"></div> -->
78 <div class="tit-wrap">
78 <div class="tit">{{curTab.pageMidTitle}}</div> 79 <div class="tit">{{curTab.pageMidTitle}}</div>
79 <div class="tit2"> 80 <div class="tit2">
80 {{curTab.pageMidDescribe}} 81 {{curTab.pageMidDescribe}}
81 </div> 82 </div>
83 </div>
82 84
83 <!-- tab表格 --> 85 <!-- tab表格 -->
84 <div class="table" :class="{'table-1':dataList.length<=1}"> 86 <div class="table" :class="{'table-1':dataList.length<=1}">
...@@ -105,36 +107,48 @@ ...@@ -105,36 +107,48 @@
105 </div> 107 </div>
106 </div> 108 </div>
107 <div class="panel panel-right"> 109 <div class="panel panel-right">
108 <div class="func func1"> 110 <div v-if="curTab.relation == PRODUCT_PRO_EASY " class="func func1">
109 <div class="func1-item"> 111 <div class="func1-item">
110 <div class="k"> {{$t('common.Sex')}}</div> 112 <div class="k"> {{$t('common.Sex')}}</div>
111 <div class="gender"> 113 <div class="gender">
112 <div class="gender-item" @click="onQuoteSexHandler(1)"> 114 <div class="gender-item" @click="onQuoteSexHandler('M')">
113 {{$t('common.Male')}} 115 {{$t('common.Male')}}
114 <img v-if="quoteData.gender == 1" src="@/assets/images/common/icon-male-act.png" alt /> 116 <img v-if="quoteData.gender == 'M'" src="@/assets/images/common/icon-male-act.png" alt />
115 <img v-else src="@/assets/images/common/icon-male.png" alt /> 117 <img v-else src="@/assets/images/common/icon-male.png" alt />
116 </div> 118 </div>
117 <div class="gender-item" @click="onQuoteSexHandler(2)"> 119 <div class="gender-item" @click="onQuoteSexHandler('F')">
118 {{$t('common.Female')}} 120 {{$t('common.Female')}}
119 <img v-if="quoteData.gender == 2" src="@/assets/images/common/icon-female-act.png" alt /> 121 <img v-if="quoteData.gender == 'F'" src="@/assets/images/common/icon-female-act.png" alt />
120 <img v-else src="@/assets/images/common/icon-female.png" alt /> 122 <img v-else src="@/assets/images/common/icon-female.png" alt />
121 </div> 123 </div>
122 </div> 124 </div>
123 </div> 125 </div>
124 <div class="func1-item"> 126 <div class="func1-item">
125 <div class="k">{{$t('common.Age')}}</div> 127 <div class="k">{{$t('common.Birthday')}}</div>
126 <div class="age"> 128 <div class="age">
127 <div class="ipt-wrap-linear"> 129 <div class="ipt-wrap-linear">
128 <div class="down-arrow"></div> 130 <div class="down-arrow"></div>
129 <div class="cont"> 131 <div class="cont">
130 <el-select class="ipt" v-model="formData.gender" :placeholder="$t('common.Age')"> 132 <!-- <el-select class="ipt" v-model="quoteData.age" :placeholder="$t('common.Age')">
131 <el-option v-for="(item, index) in 100" :key="index" :label="item" :value="item"></el-option> 133 <el-option v-for="(item, index) in 100" :key="index" :label="item" :value="item"></el-option>
132 </el-select> 134 </el-select> -->
135 <date-picker class="ipt-date" :placeholder="$t('index.contact.form.Time') + '*'" v-model="quoteData.birthday" :filtModel="['future']" :cusStyle="{
136 border: 'none !important',
137 'background-color': 'transparent !important',
138 padding: '16px 24px',
139 color: '#606266',
140 'text-align': 'center'
141 }">
142 </date-picker>
133 </div> 143 </div>
134 </div> 144 </div>
135 </div> 145 </div>
136 </div> 146 </div>
137 </div> 147 </div>
148
149 <div v-if="curTab.relation == PRODUCT_REN_RICH " class="func func2">
150 <!-- PRODUCT_REN_RICH -->
151 </div>
138 </div> 152 </div>
139 </div> 153 </div>
140 </div> 154 </div>
...@@ -157,46 +171,68 @@ ...@@ -157,46 +171,68 @@
157 <div class="form"> 171 <div class="form">
158 <div class="form-item fl"> 172 <div class="form-item fl">
159 <!-- 称呼 --> 173 <!-- 称呼 -->
160 <div class="ipt-wrap-linear dear"> 174 <div class="form-item-wrap dear">
175 <div class="ipt-wrap-linear">
161 <div class="down-arrow"></div> 176 <div class="down-arrow"></div>
162 <div class="cont"> 177 <div class="cont">
163 <el-select class="ipt" v-model="formData.gender" :placeholder="$t('index.contact.form.Title') + '*'"> 178 <el-select class="ipt" v-model="formData.title" :placeholder="$t('index.contact.form.Title') + '*'">
164 <el-option v-for="(item, index) in genderList" :key="index" :label="item.n" :value="item.v"></el-option> 179 <el-option v-for="(item, index) in titleList" :key="index" :label="item.n" :value="item.v"></el-option>
165 </el-select> 180 </el-select>
166 </div> 181 </div>
167 </div> 182 </div>
183 <div class="validator" v-if="errorTips.e1.length > 0">
184 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}}
185 </div>
186 </div>
187
168 <!-- 姓名 --> 188 <!-- 姓名 -->
169 <div class="ipt-wrap-linear name"> 189 <div class="form-item-wrap name">
190 <div class="ipt-wrap-linear ">
170 <div class="cont"> 191 <div class="cont">
171 <input autocomplete="new-password" class="ipt" type="text" :placeholder="$t('index.contact.form.Name') + '*'" /> 192 <input v-model="formData.name" autocomplete="new-password" class="ipt" type="text" :placeholder="$t('index.contact.form.Name') + '*'" />
193 </div>
194 </div>
195 <div class="validator" v-if="errorTips.e2.length > 0">
196 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e2}}
172 </div> 197 </div>
173 </div> 198 </div>
174 </div> 199 </div>
175 200
176 <div class="form-item">
177 <!-- 联系电话 --> 201 <!-- 联系电话 -->
202 <div class="form-item">
203 <div class="form-item-wrap">
178 <div class="ipt-wrap-linear"> 204 <div class="ipt-wrap-linear">
179 <div class="cont"> 205 <div class="cont">
180 <input autocomplete="new-password" class="ipt" type="text" :placeholder="$t('index.contact.form.PhoneNumber') + '*'" /> 206 <input v-model="formData.mobile" autocomplete="new-password" class="ipt" type="text" :placeholder="$t('index.contact.form.PhoneNumber') + '*'" />
207 </div>
208 </div>
209 <div class="validator" v-if="errorTips.e3.length > 0">
210 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e3}}
181 </div> 211 </div>
182 </div> 212 </div>
183 </div> 213 </div>
184 214
185 <div class="form-item">
186 <!-- 電郵 --> 215 <!-- 電郵 -->
216 <div class="form-item">
217 <div class="form-item-wrap">
187 <div class="ipt-wrap-linear"> 218 <div class="ipt-wrap-linear">
188 <div class="cont"> 219 <div class="cont">
189 <input class="ipt" type="text" :placeholder="$t('index.contact.form.Email') + '*'" /> 220 <input v-model="formData.email" class="ipt" type="text" :placeholder="$t('index.contact.form.Email') + '*'" />
221 </div>
222 </div>
223 <div class="validator" v-if="errorTips.e4.length > 0">
224 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e4}}
190 </div> 225 </div>
191 </div> 226 </div>
192 </div> 227 </div>
193 228
194 <div class="form-item">
195 <!-- 理想聯絡時間 --> 229 <!-- 理想聯絡時間 -->
230 <div class="form-item">
231 <div class="form-item-wrap">
196 <div class="ipt-wrap-linear"> 232 <div class="ipt-wrap-linear">
197 <div class="down-arrow"></div> 233 <div class="down-arrow"></div>
198 <div class="cont"> 234 <div class="cont">
199 <date-picker class="ipt-date" :formatter="'dd-MM-yyyy'" :placeholder="$t('index.contact.form.Time') + '*'" v-model="formData.birthDate" :filtModel="['future']" :cusStyle="{ 235 <date-picker class="ipt-date" :placeholder="$t('index.contact.form.Time') + '*'" v-model="formData.contactTime" :filtModel="['future']" :cusStyle="{
200 border: 'none !important', 236 border: 'none !important',
201 'background-color': 'transparent !important', 237 'background-color': 'transparent !important',
202 padding: '16px 24px', 238 padding: '16px 24px',
...@@ -205,25 +241,35 @@ ...@@ -205,25 +241,35 @@
205 }"></date-picker> 241 }"></date-picker>
206 </div> 242 </div>
207 </div> 243 </div>
244 <div class="validator" v-if="errorTips.e5.length > 0">
245 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e5}}
246 </div>
247 </div>
208 </div> 248 </div>
209 249
210 <div class="form-item">
211 <!-- 查詢事項 --> 250 <!-- 查詢事項 -->
251 <div class="form-item">
252 <div class="form-item-wrap">
212 <div class="ipt-wrap-linear"> 253 <div class="ipt-wrap-linear">
213 <div class="cont"> 254 <div class="cont">
214 <textarea class="ipt textarea" :placeholder="$t('index.contact.form.Inquiry')"></textarea> 255 <textarea v-model="formData.inquiry" class="ipt textarea" :placeholder="$t('index.contact.form.Inquiry')"></textarea>
256 </div>
215 </div> 257 </div>
258 <div class="validator" v-if="errorTips.e6.length > 0">
259 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e6}}
216 </div> 260 </div>
217 </div> 261 </div>
218 </div> 262 </div>
263 </div>
264
219 <!-- 错误提示 --> 265 <!-- 错误提示 -->
220 <div class="err-tips"> 266 <!-- <div class="err-tips">
221 <template v-if="errTips"> 267 <template v-if="errTips">
222 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt /> 268 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt />
223 {{ errTips }} 269 {{ errTips }}
224 </template> 270 </template>
225 </div> 271 </div> -->
226 <div class="submit-btn">{{ $t("index.contact.form.Submit") }}</div> 272 <div @click="onSubmitContact" class="submit-btn" :class="{disabled: submitBtnDisabled}">{{ $t("index.contact.form.Submit") }}</div>
227 </div> 273 </div>
228 <img class="pic-mobile pic-mobile-botom" src="@/assets/images/index/index-mobile.png" alt /> 274 <img class="pic-mobile pic-mobile-botom" src="@/assets/images/index/index-mobile.png" alt />
229 </div> 275 </div>
......
...@@ -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 {
......