complaint-acceptance.vue
5.44 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<template>
<div>
<auth :model="'suggest'" @onLogin="userLogin" ref="auth"></auth>
<modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp>
<div class="reservation-container">
<!-- 顶头iterm -->
<div class="form form2">
<div class="form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div> {{$t('complaintAcceptance.name')}}
</div>
<div class="ipt-wrap">
<input 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>
<div class="form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-contact.png"></div>{{$t('complaintAcceptance.contactType')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select class="ipt phone-ipt" v-model="data.contactType">
<option v-for="(item,index) in contactTypes" :key="index" :value="item.value">{{item.name}}</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 v-if="contactIconShow == 'email'" src="@/assets/images/complaint-acceptance/icon-ca-mail.png">
<img v-else src="@/assets/images/contact-us/icon-cs-call.png">
</div>{{contactTypeShow}}
</div>
<div class="ipt-wrap">
<input class="ipt mail-ipt" type="text" :class="{err : errorTips.contactMethodErr.length > 0}" v-model="data.contactMethod" :placeholder="contactPlaceHolderShow">
</div>
<div class="validator" v-if="errorTips.contactMethodErr.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.contactMethodErr}}
</div>
</div>
</div>
<!-- 长文本 -->
<div class="form">
<div class="pure-u-1 form-item">
<div class="label">
<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" :class="{err:errorTips.complainErr.length >0}" v-model="data.complain"></textarea>
</div>
<div class="validator" v-if="errorTips.complainErr.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.complainErr}}
</div>
</div>
<!-- 保单编号 非必填 -->
<div class="pure-u-1 form-item form-item3">
<div class="label">
<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" :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>
<!-- 联络时间 -->
<div class="pure-u-1 form-item form-item3">
<div class="label">
<div class="icon"><img src="@/assets/images/reservation/icon-re-calendar.png"></div>{{$t('complaintAcceptance.contactTime')}}
</div>
<div class="ipt-wrap ipt-wrap2">
<!-- <input class="ipt" type="date" :class="{err:errorTips.contactDateErr.length>0}" v-model="data.contactDate"> -->
<date-picker v-model="data.contactDate" :check="checkDate"></date-picker>
</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">
<img src="@/assets/images/reservation/re-calendar.png">
</div> -->
</div>
</div>
</div>
<!-- 通知 -->
<div class="notice">
<p class="notice-item">
<img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> {{$t('complaintAcceptance.notice1')}}
</p>
<p class="notice-item pointer" @click="checked = !checked">
<!-- <img v-if="!checked" class="notice-item-icon" src="@/assets/images/reservation/un-check.png">
<img v-else class="notice-item-icon" src="@/assets/images/reservation/check.png"> -->
<img v-if="!checked" class="notice-item-icon" src="@/assets/images/login/uncheck.png">
<img v-else class="notice-item-icon" src="@/assets/images/login/check.png">
{{$t('complaintAcceptance.notice2')}}
</p>
</div>
<!-- 提交按钮 -->
<div class="submit-btn flex-center" @click="submitHandler" :class="{disabled:submitBtnDisabled}">
<van-loading v-if="isSubmit" />
<span>{{$t('reservation.submitBtn')}}</span>
</div>
</div>
</div>
</template>
<script src="./complaint-acceptance.js"></script>
<style lang="scss" scoped>
@import "./complaint-acceptance.scss";
</style>