Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
b55ff84b by joe
Options

投诉受理

1 parent b7efbc15
Inline Side-by-side
Showing 8 changed files with 209 additions and 42 deletions
...@@ -329,6 +329,11 @@ module.exports = { ...@@ -329,6 +329,11 @@ module.exports = {
329 contactTime: "期望聯絡時間", 329 contactTime: "期望聯絡時間",
330 notice1: "本表格所收集的個人資料根據「平安人壽香港個人資料收集聲明」處理及只會被用作於聯絡 閣下之用。然而所收集的個人資料未經您明確授權將不會轉移至「平安人壽香港個人資料收集聲明」列明以外之第三者機構。您可選擇不向我們提供所需的個人資料，惟這樣可能導致我們不能聯絡您。您亦可根據「平安人壽香港個人資料收集聲明」之權利查閱及更正個人資料。", 330 notice1: "本表格所收集的個人資料根據「平安人壽香港個人資料收集聲明」處理及只會被用作於聯絡 閣下之用。然而所收集的個人資料未經您明確授權將不會轉移至「平安人壽香港個人資料收集聲明」列明以外之第三者機構。您可選擇不向我們提供所需的個人資料，惟這樣可能導致我們不能聯絡您。您亦可根據「平安人壽香港個人資料收集聲明」之權利查閱及更正個人資料。",
331 notice2: "本人現確認明白並同意本人的個人資料根據中銀人壽個人資料收集聲明作以上述用途。", 331 notice2: "本人現確認明白並同意本人的個人資料根據中銀人壽個人資料收集聲明作以上述用途。",
332 contactTypes : ['電話','電郵'],
333 errorTips : {
334 e1 : "請填寫該項內容",
335 e2 : "請填寫正確的聯繫方式"
336 },
332 }, 337 },
333 reservation: { 338 reservation: {
334 name: "姓名", 339 name: "姓名",
...@@ -667,7 +672,7 @@ module.exports = { ...@@ -667,7 +672,7 @@ module.exports = {
667 }, 672 },
668 reservation: { 673 reservation: {
669 submitBtn: '確認', 674 submitBtn: '確認',
670 contactMethods : ['電話'], 675 contactTypes : ['電話'],
671 reservationTypes: ['投保咨詢','代辦保單變更'], 676 reservationTypes: ['投保咨詢','代辦保單變更'],
672 errorTips : { 677 errorTips : {
673 e1 : "請填寫該項內容", 678 e1 : "請填寫該項內容",
......
...@@ -327,6 +327,11 @@ module.exports = { ...@@ -327,6 +327,11 @@ module.exports = {
327 contactTime: "期望聯絡時間", 327 contactTime: "期望聯絡時間",
328 notice1: "本表格所收集的個人資料根據「平安人壽香港個人資料收集聲明」處理及只會被用作於聯絡 閣下之用。然而所收集的個人資料未經您明確授權將不會轉移至「平安人壽香港個人資料收集聲明」列明以外之第三者機構。您可選擇不向我們提供所需的個人資料，惟這樣可能導致我們不能聯絡您。您亦可根據「平安人壽香港個人資料收集聲明」之權利查閱及更正個人資料。", 328 notice1: "本表格所收集的個人資料根據「平安人壽香港個人資料收集聲明」處理及只會被用作於聯絡 閣下之用。然而所收集的個人資料未經您明確授權將不會轉移至「平安人壽香港個人資料收集聲明」列明以外之第三者機構。您可選擇不向我們提供所需的個人資料，惟這樣可能導致我們不能聯絡您。您亦可根據「平安人壽香港個人資料收集聲明」之權利查閱及更正個人資料。",
329 notice2: "本人現確認明白並同意本人的個人資料根據中銀人壽個人資料收集聲明作以上述用途。", 329 notice2: "本人現確認明白並同意本人的個人資料根據中銀人壽個人資料收集聲明作以上述用途。",
330 contactTypes : ['電話','電郵'],
331 errorTips : {
332 e1 : "請填寫該項內容",
333 e2 : "請填寫正確的聯繫方式"
334 },
330 }, 335 },
331 reservation: { 336 reservation: {
332 name: "姓名", 337 name: "姓名",
...@@ -665,7 +670,7 @@ module.exports = { ...@@ -665,7 +670,7 @@ module.exports = {
665 }, 670 },
666 reservation: { 671 reservation: {
667 submitBtn: '確認', 672 submitBtn: '確認',
668 contactMethods : ['電話'], 673 contactTypes : ['電話'],
669 reservationTypes: ['投保咨詢','代辦保單變更'], 674 reservationTypes: ['投保咨詢','代辦保單變更'],
670 errorTips : { 675 errorTips : {
671 e1 : "請填寫該項內容", 676 e1 : "請填寫該項內容",
......
...@@ -8,8 +8,8 @@ module.exports = { ...@@ -8,8 +8,8 @@ module.exports = {
8 zh: '中文', 8 zh: '中文',
9 en: '英文' 9 en: '英文'
10 }, 10 },
11 glbalTips : { 11 glbalTips: {
12 sessionLost : "为了更好的体验，需要您登录后再进行此操作" 12 sessionLost: "为了更好的体验，需要您登录后再进行此操作"
13 }, 13 },
14 nav: { 14 nav: {
15 loginData: { 15 loginData: {
...@@ -283,7 +283,7 @@ module.exports = { ...@@ -283,7 +283,7 @@ module.exports = {
283 value: "W" 283 value: "W"
284 }] 284 }]
285 }, 285 },
286 successMsg : "更新成功", 286 successMsg: "更新成功",
287 errorTips: { 287 errorTips: {
288 e1: "请填写姓名信息", 288 e1: "请填写姓名信息",
289 e2: "请选择性别", 289 e2: "请选择性别",
...@@ -327,6 +327,11 @@ module.exports = { ...@@ -327,6 +327,11 @@ module.exports = {
327 contactTime: "期望联络时间", 327 contactTime: "期望联络时间",
328 notice1: "本表格所收集的个人资料根据「平安人寿香港个人资料收集声明」处理及只会被用作于联络 阁下之用。然而所收集的个人资料未经您明确授权将不会转移至「平安人寿香港个人资料收集声明」列明以外之第三者机构。您可选择不向我们提供所需的个人资料，惟这样可能导致我们不能联络您。您亦可根据「平安人寿香港个人资料收集声明」之权利查阅及更正个人资料。", 328 notice1: "本表格所收集的个人资料根据「平安人寿香港个人资料收集声明」处理及只会被用作于联络 阁下之用。然而所收集的个人资料未经您明确授权将不会转移至「平安人寿香港个人资料收集声明」列明以外之第三者机构。您可选择不向我们提供所需的个人资料，惟这样可能导致我们不能联络您。您亦可根据「平安人寿香港个人资料收集声明」之权利查阅及更正个人资料。",
329 notice2: "本人现确认明白并同意本人的个人资料根据中银人寿个人资料收集声明作以上述用途。", 329 notice2: "本人现确认明白并同意本人的个人资料根据中银人寿个人资料收集声明作以上述用途。",
330 contactTypes: ['电话', '电邮'],
331 errorTips: {
332 e1: "请填写该项内容",
333 e2: "请填写正确的联系方式"
334 },
330 }, 335 },
331 reservation: { 336 reservation: {
332 name: "姓名", 337 name: "姓名",
...@@ -554,10 +559,10 @@ module.exports = { ...@@ -554,10 +559,10 @@ module.exports = {
554 email: "E-Mail", 559 email: "E-Mail",
555 checkTips: "本人不同意接收宣传信息", 560 checkTips: "本人不同意接收宣传信息",
556 submit: "确认修改", 561 submit: "确认修改",
557 errorTips : { 562 errorTips: {
558 e1 : "請填寫正確的聯繫電話", 563 e1: "請填寫正確的聯繫電話",
559 e2 : "請填寫聯繫地址", 564 e2: "請填寫聯繫地址",
560 e3 : "請填寫正確的E-Mail地址" 565 e3: "請填寫正確的E-Mail地址"
561 } 566 }
562 }, 567 },
563 policyChangeInformation: { 568 policyChangeInformation: {
...@@ -666,11 +671,11 @@ module.exports = { ...@@ -666,11 +671,11 @@ module.exports = {
666 }, 671 },
667 reservation: { 672 reservation: {
668 submitBtn: '确认', 673 submitBtn: '确认',
669 contactMethods : ['電話'], 674 contactTypes: ['電話'],
670 reservationTypes: ['投保咨询','代办保单变更'], 675 reservationTypes: ['投保咨询', '代办保单变更'],
671 errorTips : { 676 errorTips: {
672 e1 : "請填寫該項內容", 677 e1: "請填寫該項內容",
673 e2 : "請填寫正確的聯繫方式" 678 e2: "請填寫正確的聯繫方式"
674 } 679 }
675 } 680 }
676 } 681 }
......
...@@ -8,8 +8,24 @@ export default { ...@@ -8,8 +8,24 @@ export default {
8 data() { 8 data() {
9 return { 9 return {
10 key: 'value', 10 key: 'value',
11 isHkCus : true, 11 isHkCus: true,
12 checked : false 12 checked: false,
13 data: {
14 name: "",
15 contactType: "",
16 contactMethod: "",
17 complain: "",
18 policyNumber: "",
19 contactDate: ""
20 },
21 errorTips: {
22 nameErr: "",
23 contactTypeErr: "",
24 contactMethodErr: "",
25 complainErr: "",
26 policyNumberErr: "",
27 contactDateErr: ""
28 }
13 } 29 }
14 }, 30 },
15 components: {}, 31 components: {},
...@@ -19,11 +35,113 @@ export default { ...@@ -19,11 +35,113 @@ export default {
19 }, 35 },
20 i18n() { 36 i18n() {
21 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {}; 37 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
38 },
39 contactTypes() {
40 return this.i18n.complaintAcceptance.contactTypes;
22 } 41 }
23 }, 42 },
24 methods: { 43 methods: {
25 initData() {} 44 initData() {
45 this.data.contactType = this.contactTypes[0];
46 },
47 submitHandler() {
48 if (!this.checked || this.isSubmit) {
49 return;
50 }
51 let b1 = this.checkName();
52 let b2 = this.checkContactType();
53 let b3 = this.checkContactMethod();
54 let b4 = this.checkComplain();
55 let b5 = this.checkPolicyNumber();
56 let b6 = this.checkContactDate();
57 let b = b1 & b2 & b3 & b4 & b5 & b6;
58
59 if (b) {
60 this.isSubmit = true;
61 httpPost({
62 url: api.saveComplain,
63 data: this.data
64 }).then(() => {
65 this.showSubmitSuccess();
66 this.isSubmit = false;
67 }).catch(() => {
68 this.isSubmit = false;
69 })
70 }
71 },
72 showSubmitSuccess() {
73 alert("提交成功");
74 this.data.name = "";
75 this.data.contactMethod = "";
76 this.data.complain = "";
77 this.data.policyNumber = "";
78 this.data.contactDate = "";
79 },
80 checkName() {
81 if (!this.data.name) {
82 this.errorTips.nameErr = this.i18n.complaintAcceptance.errorTips.e1;
83 return false;
84 }
85 return true;
86 },
87 checkContactType() {
88 if (!this.data.contactType) {
89 this.errorTips.contactTypeErr = this.i18n.complaintAcceptance.errorTips.e1;
90 return false;
91 }
92 return true;
93 },
94 checkContactMethod() {
95 if (!this.data.contactMethod) {
96 this.errorTips.contactMethodErr = this.i18n.complaintAcceptance.errorTips.e1;
97 return false;
98 }
99 return true;
100 },
101 checkComplain() {
102 if (!this.data.complain) {
103 this.errorTips.complainErr = this.i18n.complaintAcceptance.errorTips.e1;
104 return false;
105 }
106 return true;
107 },
108 checkPolicyNumber() {
109 if (!this.data.policyNumber) {
110 this.errorTips.policyNumberErr = this.i18n.complaintAcceptance.errorTips.e1;
111 return false;
112 }
113 return true;
114 },
115 checkContactDate() {
116 if (!this.data.contactDate) {
117 this.errorTips.contactDateErr = this.i18n.complaintAcceptance.errorTips.e1;
118 return false;
119 }
120 return true;
121 }
122 },
123 watch: {
124 'data.name': function () {
125 this.errorTips.nameErr = "";
126 },
127 'data.contactType': function () {
128 this.errorTips.contactTypeErr = "";
129 },
130 'data.contactMethod': function () {
131 this.errorTips.contactMethodErr = "";
132 },
133 'data.complain': function () {
134 this.errorTips.complainErr = "";
135 },
136 'data.policyNumber': function () {
137 this.errorTips.policyNumberErr = "";
138 },
139 'data.contactDate': function () {
140 this.errorTips.contactDateErr = "";
141 }
142 },
143 mounted() {
144 this.initData();
26 }, 145 },
27 mounted() {}, 146 created() { }
28 created() {}
29 } 147 }
......
...@@ -86,6 +86,20 @@ ...@@ -86,6 +86,20 @@
86 } 86 }
87 } 87 }
88 88
89 .validator {
90 color: $cOrange;
91 margin-top: 0.5rem;
92 position: absolute;
93 right: 1rem;
94 display: flex;
95 align-items: center;
96 // bottom: 0;
97
98 img {
99 display: inline-block;
100 margin-right: 0.4rem;
101 }
102 }
89 } 103 }
90 104
91 // 不换行 105 // 不换行
...@@ -129,7 +143,9 @@ ...@@ -129,7 +143,9 @@
129 display: flex; 143 display: flex;
130 align-items: center; 144 align-items: center;
131 flex-wrap: wrap; 145 flex-wrap: wrap;
132 146 .validator {
147 margin-top: 3rem;
148 }
133 .label { 149 .label {
134 // min-width: 8.833333rem; 150 // min-width: 8.833333rem;
135 } 151 }
...@@ -222,3 +238,8 @@ input { ...@@ -222,3 +238,8 @@ input {
222 color: #333333; 238 color: #333333;
223 font-size: 12px; 239 font-size: 12px;
224 } 240 }
241
242 .disabled {
243 background-color: gray !important;
244 background-image:none !important;
245 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -9,7 +9,10 @@ ...@@ -9,7 +9,10 @@
9 <div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div> {{$t('complaintAcceptance.name')}} 9 <div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div> {{$t('complaintAcceptance.name')}}
10 </div> 10 </div>
11 <div class="ipt-wrap"> 11 <div class="ipt-wrap">
12 <input :placeholder="$t('complaintAcceptance.namePlaceholder')" class="ipt name-ipt" type="text"> 12 <input :placeholder="$t('complaintAcceptance.namePlaceholder')" class="ipt name-ipt" type="text" :class="{err : errorTips.nameErr.length > 0}" v-model="data.name">
13 </div>
14 <div class="validator" v-if="errorTips.nameErr.length > 0">
15 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.nameErr}}
13 </div> 16 </div>
14 </div> 17 </div>
15 18
...@@ -19,23 +22,24 @@ ...@@ -19,23 +22,24 @@
19 </div> 22 </div>
20 <div class="ipt-wrap"> 23 <div class="ipt-wrap">
21 <div class="down-arrow"></div> 24 <div class="down-arrow"></div>
22 <select v-if="locale !='zh'" class="ipt phone-ipt"> 25 <select class="ipt phone-ipt" v-model="data.contactType">
23 <option>電話</option> 26 <option v-for="(item,index) in contactTypes" :key="index" :value="item">{{item}}</option>
24 <option>電郵</option>
25 </select>
26 <select v-else class="ipt phone-ipt">
27 <option>电话</option>
28 <option>电邮</option>
29 </select> 27 </select>
30 </div> 28 </div>
29 <div class="validator" v-if="errorTips.contactTypeErr.length > 0">
30 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.contactTypeErr}}
31 </div>
31 </div> 32 </div>
32 33
33 <div class="form-item flex1"> 34 <div class="form-item flex1">
34 <div class="label"> 35 <div class="label">
35 <div class="icon"><img src="@/assets/images/complaint-acceptance/icon-ca-mail.png"></div>{{$t('complaintAcceptance.email')}} 36 <div class="icon"><img src="@/assets/images/complaint-acceptance/icon-ca-mail.png"></div>{{data.contactType}}
36 </div> 37 </div>
37 <div class="ipt-wrap"> 38 <div class="ipt-wrap">
38 <input class="ipt mail-ipt" type="text"> 39 <input class="ipt mail-ipt" type="text" :class="{err : errorTips.contactMethodErr.length > 0}" v-model="data.contactMethod">
40 </div>
41 <div class="validator" v-if="errorTips.contactMethodErr.length > 0">
42 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.contactMethodErr}}
39 </div> 43 </div>
40 </div> 44 </div>
41 45
...@@ -48,7 +52,10 @@ ...@@ -48,7 +52,10 @@
48 <div class="icon"><img src="@/assets/images/reservation/icon-re-arrow-reservation.png"></div>{{$t('complaintAcceptance.question')}} 52 <div class="icon"><img src="@/assets/images/reservation/icon-re-arrow-reservation.png"></div>{{$t('complaintAcceptance.question')}}
49 </div> 53 </div>
50 <div class="ipt-wrap"> 54 <div class="ipt-wrap">
51 <textarea :placeholder="$t('complaintAcceptance.questionPlaceHolder')" class="ipt textarea"></textarea> 55 <textarea :placeholder="$t('complaintAcceptance.questionPlaceHolder')" class="ipt textarea" :class="{err:errorTips.complainErr.length >0}" v-model="data.complain"></textarea>
56 </div>
57 <div class="validator" v-if="errorTips.contactMethodErr.length > 0">
58 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.contactMethodErr}}
52 </div> 59 </div>
53 </div> 60 </div>
54 61
...@@ -58,7 +65,10 @@ ...@@ -58,7 +65,10 @@
58 <div class="icon"><img src="@/assets/images/complaint-acceptance/icon-ca-no.png"></div>{{$t('complaintAcceptance.orderNo')}} 65 <div class="icon"><img src="@/assets/images/complaint-acceptance/icon-ca-no.png"></div>{{$t('complaintAcceptance.orderNo')}}
59 </div> 66 </div>
60 <div class="ipt-wrap ipt-wrap2"> 67 <div class="ipt-wrap ipt-wrap2">
61 <input :placeholder="$t('complaintAcceptance.orderNoPlaceHolder')" class="ipt" type="text"> 68 <input :placeholder="$t('complaintAcceptance.orderNoPlaceHolder')" class="ipt" type="text" :class="{err:errorTips.policyNumberErr.length>0}" v-model="data.policyNumber">
69 </div>
70 <div class="validator" v-if="errorTips.policyNumberErr.length > 0">
71 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.policyNumberErr}}
62 </div> 72 </div>
63 </div> 73 </div>
64 74
...@@ -68,14 +78,17 @@ ...@@ -68,14 +78,17 @@
68 <div class="icon"><img src="@/assets/images/reservation/icon-re-calendar.png"></div>{{$t('complaintAcceptance.contactTime')}} 78 <div class="icon"><img src="@/assets/images/reservation/icon-re-calendar.png"></div>{{$t('complaintAcceptance.contactTime')}}
69 </div> 79 </div>
70 <div class="ipt-wrap"> 80 <div class="ipt-wrap">
71 <input value="2019/10/16" class="ipt" type="text"> 81 <input class="ipt" type="date" :class="{err:errorTips.contactDateErr.length>0}" v-model="data.contactDate">
82 </div>
83 <div class="validator" v-if="errorTips.contactDateErr.length > 0">
84 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.contactDateErr}}
72 </div> 85 </div>
73 <div class="mt8"> 86 <div class="mt8">
74 <div class="label"> 87 <div class="label">
75 </div> 88 </div>
76 <div class="calendar"> 89 <!-- <div class="calendar">
77 <img src="@/assets/images/reservation/re-calendar.png"> 90 <img src="@/assets/images/reservation/re-calendar.png">
78 </div> 91 </div> -->
79 </div> 92 </div>
80 </div> 93 </div>
81 </div> 94 </div>
...@@ -92,7 +105,7 @@ ...@@ -92,7 +105,7 @@
92 </div> 105 </div>
93 106
94 <!-- 提交按钮 --> 107 <!-- 提交按钮 -->
95 <div class="submit-btn"> 108 <div class="submit-btn" @click="submitHandler" :class="{disabled:!checked}">
96 {{$t('customService.reservation.submitBtn')}} 109 {{$t('customService.reservation.submitBtn')}}
97 </div> 110 </div>
98 </div> 111 </div>
......
...@@ -39,8 +39,8 @@ export default { ...@@ -39,8 +39,8 @@ export default {
39 i18n() { 39 i18n() {
40 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {}; 40 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
41 }, 41 },
42 contactMethods() { 42 contactTypes() {
43 return this.i18n.customService.reservation.contactMethods; 43 return this.i18n.customService.reservation.contactTypes;
44 }, 44 },
45 reservationTypes() { 45 reservationTypes() {
46 return this.i18n.customService.reservation.reservationTypes; 46 return this.i18n.customService.reservation.reservationTypes;
...@@ -48,11 +48,11 @@ export default { ...@@ -48,11 +48,11 @@ export default {
48 }, 48 },
49 methods: { 49 methods: {
50 initData() { 50 initData() {
51 this.data.contactType = this.contactMethods[0]; 51 this.data.contactType = this.contactTypes[0];
52 this.data.reservationType = this.reservationTypes[0]; 52 this.data.reservationType = this.reservationTypes[0];
53 }, 53 },
54 submitHandler() { 54 submitHandler() {
55 if (this.isSubmit) { 55 if (!this.checked || this.isSubmit) {
56 return; 56 return;
57 } 57 }
58 let b1 = this.checkName(); 58 let b1 = this.checkName();
...@@ -75,7 +75,7 @@ export default { ...@@ -75,7 +75,7 @@ export default {
75 }) 75 })
76 } 76 }
77 }, 77 },
78 showSubmitSuccess(){ 78 showSubmitSuccess() {
79 alert("提交成功"); 79 alert("提交成功");
80 this.data.name = ""; 80 this.data.name = "";
81 this.data.contactMethod = ""; 81 this.data.contactMethod = "";
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
22 <div class="ipt-wrap"> 22 <div class="ipt-wrap">
23 <div class="down-arrow"></div> 23 <div class="down-arrow"></div>
24 <select class="ipt" v-model="data.contactType"> 24 <select class="ipt" v-model="data.contactType">
25 <option v-for="(item,index) in contactMethods" :key="index" :value="item">{{item}}</option> 25 <option v-for="(item,index) in contactTypes" :key="index" :value="item">{{item}}</option>
26 </select> 26 </select>
27 </div> 27 </div>
28 </div> 28 </div>
......