投诉受理

@@ -329,6 +329,11 @@ module.exports = {
 		contactTime: "期望聯絡時間",
 		notice1: "本表格所收集的個人資料根據「平安人壽香港個人資料收集聲明」處理及只會被用作於聯絡 閣下之用。然而所收集的個人資料未經您明確授權將不會轉移至「平安人壽香港個人資料收集聲明」列明以外之第三者機構。您可選擇不向我們提供所需的個人資料，惟這樣可能導致我們不能聯絡您。您亦可根據「平安人壽香港個人資料收集聲明」之權利查閱及更正個人資料。",
 		notice2: "本人現確認明白並同意本人的個人資料根據中銀人壽個人資料收集聲明作以上述用途。",
+		contactTypes : ['電話','電郵'],
+		errorTips : {
+			e1 : "請填寫該項內容",
+			e2 : "請填寫正確的聯繫方式"
+		},
 	},
 	reservation: {
 		name: "姓名",
@@ -667,7 +672,7 @@ module.exports = {
 		},
 		reservation: {
 			submitBtn: '確認',
-			contactMethods : ['電話'],
+			contactTypes : ['電話'],
 			reservationTypes: ['投保咨詢','代辦保單變更'],
 			errorTips : {
 				e1 : "請填寫該項內容",

@@ -327,6 +327,11 @@ module.exports = {
 		contactTime: "期望聯絡時間",
 		notice1: "本表格所收集的個人資料根據「平安人壽香港個人資料收集聲明」處理及只會被用作於聯絡 閣下之用。然而所收集的個人資料未經您明確授權將不會轉移至「平安人壽香港個人資料收集聲明」列明以外之第三者機構。您可選擇不向我們提供所需的個人資料，惟這樣可能導致我們不能聯絡您。您亦可根據「平安人壽香港個人資料收集聲明」之權利查閱及更正個人資料。",
 		notice2: "本人現確認明白並同意本人的個人資料根據中銀人壽個人資料收集聲明作以上述用途。",
+		contactTypes : ['電話','電郵'],
+		errorTips : {
+			e1 : "請填寫該項內容",
+			e2 : "請填寫正確的聯繫方式"
+		},
 	},
 	reservation: {
 		name: "姓名",
@@ -665,7 +670,7 @@ module.exports = {
 		},
 		reservation: {
 			submitBtn: '確認',
-			contactMethods : ['電話'],
+			contactTypes : ['電話'],
 			reservationTypes: ['投保咨詢','代辦保單變更'],
 			errorTips : {
 				e1 : "請填寫該項內容",

@@ -8,8 +8,8 @@ module.exports = {
 		zh: '中文',
 		en: '英文'
 	},
-	glbalTips : {
-		sessionLost : "为了更好的体验，需要您登录后再进行此操作"
+	glbalTips: {
+		sessionLost: "为了更好的体验，需要您登录后再进行此操作"
 	},
 	nav: {
 		loginData: {
@@ -283,7 +283,7 @@ module.exports = {
 				value: "W"
 			}]
 		},
-		successMsg : "更新成功",
+		successMsg: "更新成功",
 		errorTips: {
 			e1: "请填写姓名信息",
 			e2: "请选择性别",
@@ -327,6 +327,11 @@ module.exports = {
 		contactTime: "期望联络时间",
 		notice1: "本表格所收集的个人资料根据「平安人寿香港个人资料收集声明」处理及只会被用作于联络 阁下之用。然而所收集的个人资料未经您明确授权将不会转移至「平安人寿香港个人资料收集声明」列明以外之第三者机构。您可选择不向我们提供所需的个人资料，惟这样可能导致我们不能联络您。您亦可根据「平安人寿香港个人资料收集声明」之权利查阅及更正个人资料。",
 		notice2: "本人现确认明白并同意本人的个人资料根据中银人寿个人资料收集声明作以上述用途。",
+		contactTypes: ['电话', '电邮'],
+		errorTips: {
+			e1: "请填写该项内容",
+			e2: "请填写正确的联系方式"
+		},
 	},
 	reservation: {
 		name: "姓名",
@@ -554,10 +559,10 @@ module.exports = {
 		email: "E-Mail",
 		checkTips: "本人不同意接收宣传信息",
 		submit: "确认修改",
-		errorTips : {
-			e1 : "請填寫正確的聯繫電話",
-			e2 : "請填寫聯繫地址",
-			e3 : "請填寫正確的E-Mail地址"
+		errorTips: {
+			e1: "請填寫正確的聯繫電話",
+			e2: "請填寫聯繫地址",
+			e3: "請填寫正確的E-Mail地址"
 		}
 	},
 	policyChangeInformation: {
@@ -666,11 +671,11 @@ module.exports = {
 		},
 		reservation: {
 			submitBtn: '确认',
-			contactMethods : ['電話'],
-			reservationTypes: ['投保咨询','代办保单变更'],
-			errorTips : {
-				e1 : "請填寫該項內容",
-				e2 : "請填寫正確的聯繫方式"
+			contactTypes: ['電話'],
+			reservationTypes: ['投保咨询', '代办保单变更'],
+			errorTips: {
+				e1: "請填寫該項內容",
+				e2: "請填寫正確的聯繫方式"
 			}
 		}
 	}

@@ -8,8 +8,24 @@ export default {
 	data() {
 		return {
 			key: 'value',
-			isHkCus : true,
-			checked : false
+			isHkCus: true,
+			checked: false,
+			data: {
+				name: "",
+				contactType: "",
+				contactMethod: "",
+				complain: "",
+				policyNumber: "",
+				contactDate: ""
+			},
+			errorTips: {
+				nameErr: "",
+				contactTypeErr: "",
+				contactMethodErr: "",
+				complainErr: "",
+				policyNumberErr: "",
+				contactDateErr: ""
+			}
 		}
 	},
 	components: {},
@@ -19,11 +35,113 @@ export default {
 		},
 		i18n() {
 			return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
+		},
+		contactTypes() {
+			return this.i18n.complaintAcceptance.contactTypes;
 		}
 	},
 	methods: {
-		initData() {}
+		initData() {
+			this.data.contactType = this.contactTypes[0];
+		},
+		submitHandler() {
+			if (!this.checked || this.isSubmit) {
+				return;
+			}
+			let b1 = this.checkName();
+			let b2 = this.checkContactType();
+			let b3 = this.checkContactMethod();
+			let b4 = this.checkComplain();
+			let b5 = this.checkPolicyNumber();
+			let b6 = this.checkContactDate();
+			let b = b1 & b2 & b3 & b4 & b5 & b6;
+
+			if (b) {
+				this.isSubmit = true;
+				httpPost({
+					url: api.saveComplain,
+					data: this.data
+				}).then(() => {
+					this.showSubmitSuccess();
+					this.isSubmit = false;
+				}).catch(() => {
+					this.isSubmit = false;
+				})
+			}
+		},
+		showSubmitSuccess() {
+			alert("提交成功");
+			this.data.name = "";
+			this.data.contactMethod = "";
+			this.data.complain = "";
+			this.data.policyNumber = "";
+			this.data.contactDate = "";
+		},
+		checkName() {
+			if (!this.data.name) {
+				this.errorTips.nameErr = this.i18n.complaintAcceptance.errorTips.e1;
+				return false;
+			}
+			return true;
+		},
+		checkContactType() {
+			if (!this.data.contactType) {
+				this.errorTips.contactTypeErr = this.i18n.complaintAcceptance.errorTips.e1;
+				return false;
+			}
+			return true;
+		},
+		checkContactMethod() {
+			if (!this.data.contactMethod) {
+				this.errorTips.contactMethodErr = this.i18n.complaintAcceptance.errorTips.e1;
+				return false;
+			}
+			return true;
+		},
+		checkComplain() {
+			if (!this.data.complain) {
+				this.errorTips.complainErr = this.i18n.complaintAcceptance.errorTips.e1;
+				return false;
+			}
+			return true;
+		},
+		checkPolicyNumber() {
+			if (!this.data.policyNumber) {
+				this.errorTips.policyNumberErr = this.i18n.complaintAcceptance.errorTips.e1;
+				return false;
+			}
+			return true;
+		},
+		checkContactDate() {
+			if (!this.data.contactDate) {
+				this.errorTips.contactDateErr = this.i18n.complaintAcceptance.errorTips.e1;
+				return false;
+			}
+			return true;
+		}
+	},
+	watch: {
+		'data.name': function () {
+			this.errorTips.nameErr = "";
+		},
+		'data.contactType': function () {
+			this.errorTips.contactTypeErr = "";
+		},
+		'data.contactMethod': function () {
+			this.errorTips.contactMethodErr = "";
+		},
+		'data.complain': function () {
+			this.errorTips.complainErr = "";
+		},
+		'data.policyNumber': function () {
+			this.errorTips.policyNumberErr = "";
+		},
+		'data.contactDate': function () {
+			this.errorTips.contactDateErr = "";
+		}
+	},
+	mounted() {
+		this.initData();
 	},
-	mounted() {},
-	created() {}
+	created() { }
 }

@@ -86,6 +86,20 @@
       }
     }
 
+    .validator {
+      color: $cOrange;
+      margin-top: 0.5rem;
+      position: absolute;
+      right: 1rem;
+      display: flex;
+      align-items: center;
+      // bottom: 0; 
+
+      img {
+        display: inline-block;
+        margin-right: 0.4rem;
+      }
+    }
   }
 
   // 不换行
@@ -129,7 +143,9 @@
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-
+    .validator {
+      margin-top: 3rem;
+    }
     .label {
       // min-width: 8.833333rem;
     }
@@ -222,3 +238,8 @@ input {
   color: #333333;
   font-size: 12px;
 }
+
+.disabled {
+  background-color: gray !important;
+  background-image:none !important;
+}
\ No newline at end of file

@@ -9,7 +9,10 @@
 					<div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div> {{$t('complaintAcceptance.name')}}
 				</div>
 				<div class="ipt-wrap">
-					<input :placeholder="$t('complaintAcceptance.namePlaceholder')" class="ipt name-ipt" type="text">
+					<input :placeholder="$t('complaintAcceptance.namePlaceholder')" class="ipt name-ipt" type="text" :class="{err : errorTips.nameErr.length > 0}" v-model="data.name">
+				</div>
+				<div class="validator" v-if="errorTips.nameErr.length > 0">
+					<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.nameErr}}
 				</div>
 			</div>
 
@@ -19,23 +22,24 @@
 				</div>
 				<div class="ipt-wrap">
 					<div class="down-arrow"></div>
-					<select v-if="locale !='zh'" class="ipt phone-ipt">
-						<option>電話</option>
-						<option>電郵</option>
-					</select>
-					<select v-else class="ipt phone-ipt">
-						<option>电话</option>
-						<option>电邮</option>
+					<select class="ipt phone-ipt" v-model="data.contactType">
+						<option v-for="(item,index) in contactTypes" :key="index" :value="item">{{item}}</option>
 					</select>
 				</div>
+				<div class="validator" v-if="errorTips.contactTypeErr.length > 0">
+					<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.contactTypeErr}}
+				</div>
 			</div>
 
 			<div class="form-item flex1">
 				<div class="label">
-					<div class="icon"><img src="@/assets/images/complaint-acceptance/icon-ca-mail.png"></div>{{$t('complaintAcceptance.email')}}
+					<div class="icon"><img src="@/assets/images/complaint-acceptance/icon-ca-mail.png"></div>{{data.contactType}}
 				</div>
 				<div class="ipt-wrap">
-					<input class="ipt mail-ipt" type="text">
+					<input class="ipt mail-ipt" type="text" :class="{err : errorTips.contactMethodErr.length > 0}" v-model="data.contactMethod">
+				</div>
+				<div class="validator" v-if="errorTips.contactMethodErr.length > 0">
+					<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.contactMethodErr}}
 				</div>
 			</div>
 
@@ -48,7 +52,10 @@
 					<div class="icon"><img src="@/assets/images/reservation/icon-re-arrow-reservation.png"></div>{{$t('complaintAcceptance.question')}}
 				</div>
 				<div class="ipt-wrap">
-					<textarea :placeholder="$t('complaintAcceptance.questionPlaceHolder')" class="ipt textarea"></textarea>
+					<textarea :placeholder="$t('complaintAcceptance.questionPlaceHolder')" class="ipt textarea" :class="{err:errorTips.complainErr.length >0}" v-model="data.complain"></textarea>
+				</div>
+				<div class="validator" v-if="errorTips.contactMethodErr.length > 0">
+					<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.contactMethodErr}}
 				</div>
 			</div>
 
@@ -58,7 +65,10 @@
 					<div class="icon"><img src="@/assets/images/complaint-acceptance/icon-ca-no.png"></div>{{$t('complaintAcceptance.orderNo')}}
 				</div>
 				<div class="ipt-wrap ipt-wrap2">
-					<input :placeholder="$t('complaintAcceptance.orderNoPlaceHolder')" class="ipt" type="text">
+					<input :placeholder="$t('complaintAcceptance.orderNoPlaceHolder')" class="ipt" type="text" :class="{err:errorTips.policyNumberErr.length>0}" v-model="data.policyNumber">
+				</div>
+				<div class="validator" v-if="errorTips.policyNumberErr.length > 0">
+					<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.policyNumberErr}}
 				</div>
 			</div>
 
@@ -68,14 +78,17 @@
 					<div class="icon"><img src="@/assets/images/reservation/icon-re-calendar.png"></div>{{$t('complaintAcceptance.contactTime')}}
 				</div>
 				<div class="ipt-wrap">
-					<input value="2019/10/16" class="ipt" type="text">
+					<input  class="ipt" type="date" :class="{err:errorTips.contactDateErr.length>0}" v-model="data.contactDate">
+				</div>
+				<div class="validator" v-if="errorTips.contactDateErr.length > 0">
+					<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.contactDateErr}}
 				</div>
 				<div class="mt8">
 					<div class="label">
 					</div>
-					<div class="calendar">
+					<!-- <div class="calendar">
 						<img src="@/assets/images/reservation/re-calendar.png">
-					</div>
+					</div> -->
 				</div>
 			</div>
 		</div>
@@ -92,7 +105,7 @@
 		</div>
 
 		<!-- 提交按钮 -->
-		<div class="submit-btn">
+		<div class="submit-btn" @click="submitHandler" :class="{disabled:!checked}">
 			{{$t('customService.reservation.submitBtn')}}
 		</div>
 	</div>

@@ -39,8 +39,8 @@ export default {
 		i18n() {
 			return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
 		},
-		contactMethods() {
-			return this.i18n.customService.reservation.contactMethods;
+		contactTypes() {
+			return this.i18n.customService.reservation.contactTypes;
 		},
 		reservationTypes() {
 			return this.i18n.customService.reservation.reservationTypes;
@@ -48,11 +48,11 @@ export default {
 	},
 	methods: {
 		initData() {
-			this.data.contactType = this.contactMethods[0];
+			this.data.contactType = this.contactTypes[0];
 			this.data.reservationType = this.reservationTypes[0];
 		},
 		submitHandler() {
-			if (this.isSubmit) {
+			if (!this.checked || this.isSubmit) {
 				return;
 			}
 			let b1 = this.checkName();
@@ -75,7 +75,7 @@ export default {
 				})
 			}
 		},
-		showSubmitSuccess(){
+		showSubmitSuccess() {
 			alert("提交成功");
 			this.data.name = "";
 			this.data.contactMethod = "";

@@ -22,7 +22,7 @@
 					<div class="ipt-wrap">
 						<div class="down-arrow"></div>
 						<select class="ipt" v-model="data.contactType">
-							<option v-for="(item,index) in contactMethods" :key="index" :value="item">{{item}}</option>
+							<option v-for="(item,index) in contactTypes" :key="index" :value="item">{{item}}</option>
 						</select>
 					</div>
 				</div>