Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
e4b1fe00 by simon
Options

默认提交

1 parent bdf9b528
Inline Side-by-side
Showing 13 changed files with 433 additions and 22 deletions
...@@ -168,6 +168,19 @@ module.exports = { ...@@ -168,6 +168,19 @@ module.exports = {
168 } 168 }
169 }, 169 },
170 }, 170 },
171 complaintAcceptance: {
172 name: "姓名",
173 namePlaceholder: "姓名",
174 contactType: "聯絡方式",
175 email: "電郵地址",
176 question: "問題或意見",
177 questionPlaceHolder: "（字數不超過500字）",
178 orderNo:"保單編號",
179 orderNoPlaceHolder:"如您為平安客戶，請提供保單編號",
180 contactTime: "期望聯絡時間",
181 notice1: "本表格所收集的個人資料根據「平安人壽香港個人資料收集聲明」處理及只會被用作於聯絡 閣下之用。然而所收集的個人資料未經您明確授權將不會轉移至「平安人壽香港個人資料收集聲明」列明以外之第三者機構。您可選擇不向我們提供所需的個人資料，惟這樣可能導致我們不能聯絡您。您亦可根據「平安人壽香港個人資料收集聲明」之權利查閱及更正個人資料。",
182 notice2: "本人現確認明白並同意本人的個人資料根據中銀人壽個人資料收集聲明作以上述用途。",
183 },
171 reservation: { 184 reservation: {
172 name: "姓名", 185 name: "姓名",
173 namePlaceholder: "姓名", 186 namePlaceholder: "姓名",
......
...@@ -168,6 +168,19 @@ module.exports = { ...@@ -168,6 +168,19 @@ module.exports = {
168 } 168 }
169 }, 169 },
170 }, 170 },
171 complaintAcceptance: {
172 name: "姓名",
173 namePlaceholder: "姓名",
174 contactType: "聯絡方式",
175 email: "電郵地址",
176 question: "問題或意見",
177 questionPlaceHolder: "（字數不超過500字）",
178 orderNo:"保單編號",
179 orderNoPlaceHolder:"如您為平安客戶，請提供保單編號",
180 contactTime: "期望聯絡時間",
181 notice1: "本表格所收集的個人資料根據「平安人壽香港個人資料收集聲明」處理及只會被用作於聯絡 閣下之用。然而所收集的個人資料未經您明確授權將不會轉移至「平安人壽香港個人資料收集聲明」列明以外之第三者機構。您可選擇不向我們提供所需的個人資料，惟這樣可能導致我們不能聯絡您。您亦可根據「平安人壽香港個人資料收集聲明」之權利查閱及更正個人資料。",
182 notice2: "本人現確認明白並同意本人的個人資料根據中銀人壽個人資料收集聲明作以上述用途。",
183 },
171 reservation: { 184 reservation: {
172 name: "姓名", 185 name: "姓名",
173 namePlaceholder: "姓名", 186 namePlaceholder: "姓名",
......
...@@ -168,6 +168,19 @@ module.exports = { ...@@ -168,6 +168,19 @@ module.exports = {
168 } 168 }
169 }, 169 },
170 }, 170 },
171 complaintAcceptance: {
172 name: "姓名",
173 namePlaceholder: "姓名",
174 contactType: "联络方式",
175 email: "电邮地址",
176 question: "问题或意见",
177 questionPlaceHolder: "（字数不超过500字）",
178 orderNo:"保单编号",
179 orderNoPlaceHolder:"如您为平安客户，请提供保单编号",
180 contactTime: "期望联络时间",
181 notice1: "本表格所收集的个人资料根据「平安人寿香港个人资料收集声明」处理及只会被用作于联络 阁下之用。然而所收集的个人资料未经您明确授权将不会转移至「平安人寿香港个人资料收集声明」列明以外之第三者机构。您可选择不向我们提供所需的个人资料，惟这样可能导致我们不能联络您。您亦可根据「平安人寿香港个人资料收集声明」之权利查阅及更正个人资料。",
182 notice2: "本人现确认明白并同意本人的个人资料根据中银人寿个人资料收集声明作以上述用途。",
183 },
171 reservation: { 184 reservation: {
172 name: "姓名", 185 name: "姓名",
173 namePlaceholder: "姓名", 186 namePlaceholder: "姓名",
......
1 import api from '@/api/api'
2 import {
3 httpGet,
4 httpPost
5 } from '@/api/fetch-api.js'
6
7 export default {
8 data() {
9 return {
10 key: 'value',
11 isHkCus : true,
12 checked : false
13 }
14 },
15 components: {},
16 computed: {
17 locale() {
18 return this.$i18n.locale || 'tc';
19 },
20 i18n() {
21 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
22 }
23 },
24 methods: {
25 initData() {}
26 },
27 mounted() {},
28 created() {}
29 }
1 @import '@/styles/_support';
2
3
4
5 .top-space {
6 // height: 4.25rem;
7 }
8
9 .reservation-container {
10 width: 64.25rem;
11 border-radius: .666667rem;
12 border: solid .083333rem #f2f2f2;
13 background-color: #ffffff;
14 padding: 2.666667rem 2.833333rem 2.833333rem 2rem;
15 }
16
17 .form {
18 display: flex;
19 // justify-content: space-between;
20 flex-wrap: wrap;
21
22 &-item {
23 position: relative;
24 // padding: 0 1.25rem 0 2.166667rem;
25 margin-bottom: 2.333333rem;
26
27 .label {
28 color: #f05a23;
29 display: flex;
30 align-items: center;
31 margin-bottom: .7rem;
32
33 .icon {
34 width: 2.166667rem;
35 display: flex;
36 }
37
38 img {
39 height: 1rem;
40 }
41 }
42
43 .ipt-wrap {
44 position: relative;
45
46 // input和下拉
47 .ipt {
48 @extend .bb;
49
50 width: 100%;
51 height: 3.5rem;
52 border: solid 1px #dcdddd;
53 background-color: #ffffff;
54 border-radius: 3.5rem;
55 padding: 0 2.083333rem;
56 }
57
58 .name-ipt{
59 width: 13.666667rem;
60 }
61
62 .phone-ipt{
63 width: 13.666667rem;
64 }
65
66 .mail-ipt{
67 }
68
69 // 长文本
70 .textarea {
71 min-height: 8.75rem;
72 border-radius: 1rem;
73 @extend .bb;
74 padding: .75rem;
75 }
76
77 .down-arrow {
78 position: absolute;
79 top: 1.6rem;
80 right: 2rem;
81 background-image: url('~@/assets/images/reservation/re-down-arrow.png');
82 width: 1rem;
83 height: .666667rem;
84 pointer-events: none;
85 cursor: default;
86 }
87 }
88
89 }
90
91 // 不换行
92 &-item2 {
93 display: flex;
94 margin-bottom: 2.25rem;
95
96 .label {
97 min-width: 12.833333rem;
98 height: 2.5rem;
99 }
100
101 .cont {
102
103 display: flex;
104
105 .boo-btn {
106 width: 5.25rem;
107 height: 2.5rem;
108 line-height: 2.5rem;
109 border: solid 1px #dcdddd;
110 background-color: #ffffff;
111 border-radius: 2.5rem;
112 text-align: center;
113 margin: 0 0.6rem;
114 }
115
116 .active {
117 border: none;
118 color: #ffffff;
119 background-color: #f05a23;
120 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
121 background-blend-mode: soft-light, ;
122 // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #f05a23, #f05a23);
123 background-image: linear-gradient(to bottom, #f05f28, #f05021);
124 }
125 }
126 }
127
128 &-item3 {
129 display: flex;
130 align-items: center;
131 flex-wrap: wrap;
132
133 .label {
134 // min-width: 8.833333rem;
135 }
136
137 .ipt-wrap {
138 width: 50%;
139 margin-left: 1.75rem;
140
141 input {
142 // font-size: 1.166667rem;
143 letter-spacing: .116667rem;
144 color: #4c4948;
145 font-family: Arial;
146 }
147 }
148
149 .ipt-wrap2{
150 flex: 1;
151 }
152
153 .cont {
154 .calendar {
155 img {
156 max-width: 96%;
157 }
158 }
159 }
160
161 .mt8 {
162 margin-top: .666667rem;
163 margin-left: 10rem;
164 }
165 }
166
167
168 }
169
170 .form2{
171 .form-item{
172 margin-right: 1.166667rem;
173
174 &:last-child{
175 margin-right: 0;
176 }
177 }
178 }
179
180 .notice {
181 margin-top: 4rem;
182 @extend .bb;
183 padding: 0 1rem;
184
185 &-item {
186 position: relative;
187 line-height: 2;
188 letter-spacing: 1.2px;
189 margin-bottom: 1rem;
190
191 &-icon {
192 position: absolute;
193 top: .5rem;
194 }
195 }
196 }
197
198 .submit-btn {
199 width: 13.583333rem;
200 height: 4.083333rem;
201 margin: 2.5rem auto 0;
202 line-height: 4.083333rem;
203 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
204 background-blend-mode: soft-light, ;
205 background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
206 text-align: center;
207 font-size: 1.291667rem;
208 letter-spacing: .129167rem;
209 color: #ffffff;
210 border-radius: 3.5rem;
211 cursor: pointer;
212 border: none;
213 color: #ffffff;
214 background-color: #f05a23;
215 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
216 background-blend-mode: soft-light, ;
217 background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
218 }
219
220 input {
221 padding: 0 2.083333rem;
222 color: #333333;
223 font-size: 12px;
224 }
1
2 <template>
3 <div class="reservation-container">
4
5 <!-- 顶头iterm -->
6 <div class="form form2">
7 <div class="form-item">
8 <div class="label">
9 <div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div> {{$t('complaintAcceptance.name')}}
10 </div>
11 <div class="ipt-wrap">
12 <input :placeholder="$t('complaintAcceptance.namePlaceholder')" class="ipt name-ipt" type="text">
13 </div>
14 </div>
15
16 <div class="form-item">
17 <div class="label">
18 <div class="icon"><img src="@/assets/images/reservation/icon-re-contact.png"></div>{{$t('complaintAcceptance.contactType')}}
19 </div>
20 <div class="ipt-wrap">
21 <div class="down-arrow"></div>
22 <select v-if="locale !='zh'" class="ipt phone-ipt">
23 <option>電話</option>
24 <option>電郵</option>
25 </select>
26 <option v-else class="ipt phone-ipt">
27 <option>电话</option>
28 <option>电邮</option>
29 </option>
30 </div>
31 </div>
32
33 <div class="form-item flex1">
34 <div class="label">
35 <div class="icon"><img src="@/assets/images/complaint-acceptance/icon-ca-mail.png"></div>{{$t('complaintAcceptance.email')}}
36 </div>
37 <div class="ipt-wrap">
38 <input class="ipt mail-ipt" type="text">
39 </div>
40 </div>
41
42 </div>
43
44 <!-- 长文本 -->
45 <div class="form">
46 <div class="pure-u-1 form-item">
47 <div class="label">
48 <div class="icon"><img src="@/assets/images/reservation/icon-re-arrow-reservation.png"></div>{{$t('complaintAcceptance.question')}}
49 </div>
50 <div class="ipt-wrap">
51 <textarea :placeholder="$t('complaintAcceptance.questionPlaceHolder')" class="ipt textarea"></textarea>
52 </div>
53 </div>
54
55 <!-- 保单编号 非必填 -->
56 <div class="pure-u-1 form-item form-item3">
57 <div class="label">
58 <div class="icon"><img src="@/assets/images/complaint-acceptance/icon-ca-no.png"></div>{{$t('complaintAcceptance.orderNo')}}
59 </div>
60 <div class="ipt-wrap ipt-wrap2">
61 <input :placeholder="$t('complaintAcceptance.orderNoPlaceHolder')" class="ipt" type="text">
62 </div>
63 </div>
64
65 <!-- 联络时间 -->
66 <div class="form-item form-item3">
67 <div class="label">
68 <div class="icon"><img src="@/assets/images/reservation/icon-re-calendar.png"></div>{{$t('complaintAcceptance.contactTime')}}
69 </div>
70 <div class="ipt-wrap">
71 <input value="2019/10/16" class="ipt" type="text">
72 </div>
73 <div class="mt8">
74 <div class="label">
75 </div>
76 <div class="calendar">
77 <img src="@/assets/images/reservation/re-calendar.png">
78 </div>
79 </div>
80 </div>
81 </div>
82
83 <!-- 通知 -->
84 <div class="notice">
85 <p class="notice-item">
86 <img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('complaintAcceptance.notice1')}}
87 </p>
88 <p class="notice-item pointer" @click="checked = !checked">
89 <img v-if="!checked" class="notice-item-icon" src="@/assets/images/reservation/un-check.png">
90 <img v-else class="notice-item-icon" src="@/assets/images/reservation/check.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('complaintAcceptance.notice2')}}
91 </p>
92 </div>
93
94 <!-- 提交按钮 -->
95 <div class="submit-btn">
96 {{$t('customService.reservation.submitBtn')}}
97 </div>
98 </div>
99 </template>
100
101 <script src="./complaint-acceptance.js"></script>
102 <style lang="scss" scoped>
103 @import "./complaint-acceptance.scss";
104 </style>
...@@ -124,21 +124,27 @@ input { ...@@ -124,21 +124,27 @@ input {
124 align-items: center; 124 align-items: center;
125 flex-wrap: wrap; 125 flex-wrap: wrap;
126 126
127
127 .label { 128 .label {
128 min-width: 8.833333rem; 129 // min-width: 8.833333rem;
129 } 130 }
130 131
131 .ipt-wrap { 132 .ipt-wrap {
132 width: 50%; 133 width: 50%;
134 margin-left: 1.75rem;
133 135
134 input { 136 input {
135 font-size: 1.166667rem; 137 // font-size: 1.166667rem;
136 letter-spacing: .116667rem; 138 letter-spacing: .116667rem;
137 color: #4c4948; 139 color: #4c4948;
138 font-family: Arial; 140 font-family: Arial;
139 } 141 }
140 } 142 }
141 143
144 .ipt-wrap2{
145 flex: 1;
146 }
147
142 .cont { 148 .cont {
143 .calendar { 149 .calendar {
144 img { 150 img {
...@@ -146,10 +152,11 @@ input { ...@@ -146,10 +152,11 @@ input {
146 } 152 }
147 } 153 }
148 } 154 }
149 }
150 155
151 .mt8 { 156 .mt8 {
152 margin-top: .666667rem; 157 margin-top: .666667rem;
158 margin-left: 10rem;
159 }
153 } 160 }
154 } 161 }
155 162
......
...@@ -73,6 +73,7 @@ ...@@ -73,6 +73,7 @@
73 </div> 73 </div>
74 </div> 74 </div>
75 75
76 <!-- 联络时间 -->
76 <div class="pure-u-1 form-item"> 77 <div class="pure-u-1 form-item">
77 <div class="form-item3"> 78 <div class="form-item3">
78 <div class="label"> 79 <div class="label">
...@@ -81,12 +82,12 @@ ...@@ -81,12 +82,12 @@
81 <div class="ipt-wrap"> 82 <div class="ipt-wrap">
82 <input value="2019/10/16" class="ipt" type="text"> 83 <input value="2019/10/16" class="ipt" type="text">
83 </div> 84 </div>
84 </div> 85 <div class="mt8">
85 <div class="form-item3 mt8"> 86 <div class="label">
86 <div class="label"> 87 </div>
87 </div> 88 <div class="calendar">
88 <div class="calendar"> 89 <img src="@/assets/images/reservation/re-calendar.png">
89 <img src="@/assets/images/reservation/re-calendar.png"> 90 </div>
90 </div> 91 </div>
91 </div> 92 </div>
92 </div> 93 </div>
...@@ -100,8 +101,7 @@ ...@@ -100,8 +101,7 @@
100 </p> 101 </p>
101 <p class="notice-item pointer" @click="checked = !checked"> 102 <p class="notice-item pointer" @click="checked = !checked">
102 <img v-if="!checked" class="notice-item-icon" src="@/assets/images/reservation/un-check.png"> 103 <img v-if="!checked" class="notice-item-icon" src="@/assets/images/reservation/un-check.png">
103 <img v-else class="notice-item-icon" src="@/assets/images/reservation/check.png"> 104 <img v-else class="notice-item-icon" src="@/assets/images/reservation/check.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice2')}}
104 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice2')}}
105 </p> 105 </p>
106 </div> 106 </div>
107 107
......
...@@ -8,12 +8,13 @@ import ContactUs from './components/contact-us.vue' ...@@ -8,12 +8,13 @@ import ContactUs from './components/contact-us.vue'
8 import InsuranceQuery from './components/insurance-query.vue' 8 import InsuranceQuery from './components/insurance-query.vue'
9 import reservation from './components/reservation.vue' 9 import reservation from './components/reservation.vue'
10 import PaymentType from './components/payment-type.vue' 10 import PaymentType from './components/payment-type.vue'
11 import ComplaintAcceptance from './components/complaint-acceptance.vue'
11 import CommonForm from './components/common-form.vue' 12 import CommonForm from './components/common-form.vue'
12 13
13 export default { 14 export default {
14 data() { 15 data() {
15 return { 16 return {
16 activity: "m1" 17 activity: "m7"
17 } 18 }
18 }, 19 },
19 methods: { 20 methods: {
...@@ -31,22 +32,23 @@ export default { ...@@ -31,22 +32,23 @@ export default {
31 }, 32 },
32 watch: { 33 watch: {
33 $route() { 34 $route() {
34 let activity = this.$route.query.q; 35 // let activity = this.$route.query.q;
35 if (activity) { 36 // if (activity) {
36 this.$set(this, 'activity', activity); 37 // this.$set(this, 'activity', activity);
37 } 38 // }
38 } 39 }
39 }, 40 },
40 created() { 41 created() {
41 let activity = this.$route.query.q; 42 // let activity = this.$route.query.q;
42 activity = activity ? activity : "m1"; 43 // activity = activity ? activity : "m1";
43 this.activity = activity; 44 // this.activity = activity;
44 }, 45 },
45 components: { 46 components: {
46 ContactUs, 47 ContactUs,
47 InsuranceQuery, 48 InsuranceQuery,
48 reservation, 49 reservation,
49 PaymentType, 50 PaymentType,
51 ComplaintAcceptance,
50 CommonForm 52 CommonForm
51 } 53 }
52 } 54 }
......
...@@ -24,7 +24,9 @@ ...@@ -24,7 +24,9 @@
24 <div class="panel" :class="{activity : activity == 'm6'}"> 24 <div class="panel" :class="{activity : activity == 'm6'}">
25 <reservation></reservation> 25 <reservation></reservation>
26 </div> 26 </div>
27 <div class="panel" :class="{activity : activity == 'm7'}"></div> 27 <div class="panel" :class="{activity : activity == 'm7'}">
28 <complaint-acceptance></complaint-acceptance>
29 </div>
28 <div class="panel" :class="{activity : activity == 'm8'}"> 30 <div class="panel" :class="{activity : activity == 'm8'}">
29 <common-form></common-form> 31 <common-form></common-form>
30 </div> 32 </div>
......
...@@ -51,3 +51,7 @@ ...@@ -51,3 +51,7 @@
51 .bc{ 51 .bc{
52 text-align: center; 52 text-align: center;
53 } 53 }
54
55 .flex1{
56 flex: 1;
57 }
......