Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
00af06c9 by simon
Options

联系信息变更

1 parent 8f34f29d
Expand all
Inline Side-by-side
Showing 10 changed files with 493 additions and 141 deletions
...@@ -702,14 +702,21 @@ module.exports = { ...@@ -702,14 +702,21 @@ module.exports = {
702 submit: "Confirm", 702 submit: "Confirm",
703 errorTips: { 703 errorTips: {
704 e1: "Please enter the collect mobile no", 704 e1: "Please enter the collect mobile no",
705 e2: "請填寫聯繫地址", 705 e2: "Please enter the collect address",
706 e3: "Please enter the collect E-mail" 706 e3: "Please enter the collect E-mail",
707
708 e4: "请选择国际号码区号",
709 e5: "请选择国家(地区)",
710 e6: "请选择省",
711 e7: "请选择市",
707 }, 712 },
708 form:{ 713 form:{
709 InternationalArea:"International area", 714 InternationalArea:"International area",
710 Mobile:"Mobile", 715 Mobile:"Mobile",
711 Nation:"Nation(Region)", 716 Nation:"Nation(Region)",
712 District:"District", 717 District:"District",
718 Province:"Province",
719 City:"City",
713 Address:"Address", 720 Address:"Address",
714 Mail:"Please enter", 721 Mail:"Please enter",
715 }, 722 },
......
...@@ -711,15 +711,22 @@ module.exports = { ...@@ -711,15 +711,22 @@ module.exports = {
711 checkTips: "本人不同意接收宣傳信息", 711 checkTips: "本人不同意接收宣傳信息",
712 submit: "確認修改", 712 submit: "確認修改",
713 errorTips: { 713 errorTips: {
714 e1: "請填寫正確的聯繫電話", 714 e1: "請填寫正確的聯絡電話",
715 e2: "請填寫聯繫地址", 715 e2: "請填寫聯絡地址",
716 e3: "請填寫正確的電郵地址" 716 e3: "請填寫正確的電郵地址",
717
718 e4: "请选择国际号码区号",
719 e5: "请选择国家(地区)",
720 e6: "请选择省",
721 e7: "请选择市",
717 }, 722 },
718 form:{ 723 form:{
719 InternationalArea:"國際號碼區號", 724 InternationalArea:"國際號碼區號",
720 Mobile:"電話號碼", 725 Mobile:"電話號碼",
721 Nation:"國家（地區）", 726 Nation:"國家（地區）",
722 District:"市行政區", 727 District:"市行政區",
728 Province:"省",
729 City:"市",
723 Address:"詳細地址", 730 Address:"詳細地址",
724 Mail:"請輸入", 731 Mail:"請輸入",
725 }, 732 },
......
...@@ -711,15 +711,22 @@ module.exports = { ...@@ -711,15 +711,22 @@ module.exports = {
711 checkTips: "本人不同意接收宣传信息", 711 checkTips: "本人不同意接收宣传信息",
712 submit: "确认修改", 712 submit: "确认修改",
713 errorTips: { 713 errorTips: {
714 e1: "请填写正确的联系电话", 714 e1: "请填写正确的联络电话",
715 e2: "請填寫聯繫地址", 715 e2: "请填写联络地址",
716 e3: "请填写正确的电邮地址" 716 e3: "请填写正确的电邮地址",
717
718 e4: "请选择国际号码区号",
719 e5: "请选择国家(地区)",
720 e6: "请选择省",
721 e7: "请选择市",
717 }, 722 },
718 form:{ 723 form:{
719 InternationalArea:"国际号码区号", 724 InternationalArea:"国际号码区号",
720 Mobile:"电话号码", 725 Mobile:"电话号码",
721 Nation:"国家（地区）", 726 Nation:"国家（地区）",
722 District:"市行政区", 727 District:"市行政区",
728 Province:"省",
729 City:"市",
723 Address:"详细地址", 730 Address:"详细地址",
724 Mail:"请输入", 731 Mail:"请输入",
725 }, 732 },
......
...@@ -3,11 +3,17 @@ import { httpGet, httpPost } from "@/api/fetch-api.js"; ...@@ -3,11 +3,17 @@ import { httpGet, httpPost } from "@/api/fetch-api.js";
3 3
4 import { contactMethodCheck } from "@utils/utils.js"; 4 import { contactMethodCheck } from "@utils/utils.js";
5 import { setTitle, ascSort } from "@/utils/utils.js"; 5 import { setTitle, ascSort } from "@/utils/utils.js";
6 import { getNationsList, getNationsPhoneCodeList } from "@/utils/biz.js"; 6 import {
7 getNationsList,
8 getNationsPhoneCodeList,
9 getCnProvinceList,
10 getCityList
11 } from "@/utils/biz.js";
7 12
8 import Auth from "@components/auth/auth.vue"; 13 import Auth from "@components/auth/auth.vue";
9 import modalComp from "@/components/modal-comp/modal-comp.vue"; 14 import UsTaxFormUploadComp from "./us-tax-form-upload-comp.vue";
10 import PolicyHeadList from "./policy-head-list.vue"; 15 import PolicyHeadList from "./policy-head-list.vue";
16 import modalComp from "@/components/modal-comp/modal-comp.vue";
11 import Vue from "vue"; 17 import Vue from "vue";
12 import { Loading } from "vant"; 18 import { Loading } from "vant";
13 Vue.use(Loading); 19 Vue.use(Loading);
...@@ -40,19 +46,24 @@ export default { ...@@ -40,19 +46,24 @@ export default {
40 acceptMessage: 1, 46 acceptMessage: 1,
41 47
42 // 上传信息 48 // 上传信息
43 iobsKey: "a", 49 iobsKey: "",
44 fileFormat: "xlsx", 50 fileFormat: "",
45 fileSize: 123, 51 fileSize: 0,
46 fileContentType: "mp4" 52 fileContentType: ""
47 }, 53 },
48 errorTips: { 54 errorTips: {
49 e1: "", 55 e1: "",
50 e2: "", 56 e2: "",
51 e3: "" 57 e3: "",
58 e4: "",
59 e5: "",
60 e6: "",
61 e7: ""
52 }, 62 },
53 63
54 modalSimpleVisiable: false, 64 modalSimpleVisiable: false,
55 modalVisiable: false, 65 modalVisiable: false,
66 usTaxFormUploadCompVisible: false,
56 targetPath: "", 67 targetPath: "",
57 modalIcon: "succ", 68 modalIcon: "succ",
58 modalContent: "", 69 modalContent: "",
...@@ -60,13 +71,16 @@ export default { ...@@ -60,13 +71,16 @@ export default {
60 // 国际号码区号列表 71 // 国际号码区号列表
61 nationsPhoneCodeList: [], 72 nationsPhoneCodeList: [],
62 // 国际地区区号 73 // 国际地区区号
63 nationsList: [] 74 nationsList: [],
75 provinceList: [],
76 cityList: []
64 }; 77 };
65 }, 78 },
66 components: { 79 components: {
67 Auth, 80 Auth,
68 PolicyHeadList, 81 PolicyHeadList,
69 modalComp 82 modalComp,
83 UsTaxFormUploadComp
70 }, 84 },
71 computed: { 85 computed: {
72 locale() { 86 locale() {
...@@ -81,6 +95,14 @@ export default { ...@@ -81,6 +95,14 @@ export default {
81 let b1 = !this.selectedPolicies || this.selectedPolicies.length == 0; 95 let b1 = !this.selectedPolicies || this.selectedPolicies.length == 0;
82 let b2 = !this.data.address && !this.data.email && !this.data.mobile; 96 let b2 = !this.data.address && !this.data.email && !this.data.mobile;
83 return b1 || b2; 97 return b1 || b2;
98 },
99 isChina() {
100 let result = this.data.countryId == "28";
101 return result;
102 },
103 isUSA() {
104 let result = this.data.countryId == "225";
105 return result;
84 } 106 }
85 }, 107 },
86 methods: { 108 methods: {
...@@ -96,16 +118,44 @@ export default { ...@@ -96,16 +118,44 @@ export default {
96 showSuccess() { 118 showSuccess() {
97 this.showModal(this.i18n.policyChangeContact.success); 119 this.showModal(this.i18n.policyChangeContact.success);
98 }, 120 },
121 // 提交前准备
99 updateContactsHandler() { 122 updateContactsHandler() {
100 if (this.submitBtnDisabled) { 123 if (this.submitBtnDisabled) {
101 return; 124 return;
102 } 125 }
103 126
127 this.errorTips = {
128 e1: "",
129 e2: "",
130 e3: "",
131 e4: "",
132 e5: "",
133 e6: "",
134 e7: ""
135 };
104 let b1 = this.checkMobile(); 136 let b1 = this.checkMobile();
105 let b2 = this.checkEmail(); 137 let b2 = this.checkEmail();
106 let b3 = this.checkAddress(); 138 let b3 = this.checkAddress();
107 let b = b1 & b2 & b3; 139 let b4 = this.checkNationsPhoneCode();
108 if (!b) { 140 let b5 = this.checkNations();
141 let b6 = this.checkProvince();
142 let b7 = this.checkCity();
143 let b = b1 & b2 & b3 & b4 & b5 & b6 & b7;
144
145 if (b) {
146 // 判断是否美国 出
147 if (this.isUSA) {
148 this.usTaxFormUploadCompVisible = true;
149 } else {
150 this.doSubmit();
151 }
152 }
153 },
154 /**
155 * 提交表单
156 */
157 doSubmit(val = {}) {
158 // this.usTaxFormUploadCompVisible = false;
109 if (this.loading) { 159 if (this.loading) {
110 return; 160 return;
111 } 161 }
...@@ -113,17 +163,21 @@ export default { ...@@ -113,17 +163,21 @@ export default {
113 this.selectedPolicies.forEach(element => { 163 this.selectedPolicies.forEach(element => {
114 policies.push({ policyId: element.id, policyCode: element.code }); 164 policies.push({ policyId: element.id, policyCode: element.code });
115 }); 165 });
116 let data = { 166 // let data = {
117 mobileNo: this.data.mobile, 167 // mobileNo: this.data.mobile,
118 address: this.data.address, 168 // address: this.data.address,
119 email: this.data.email, 169 // email: this.data.email,
120 mobileNoAcceptMsg: this.checked1 ? 1 : 0, 170 // mobileNoAcceptMsg: this.checked1 ? 1 : 0,
121 addressAcceptMsg: this.checked2 ? 1 : 0, 171 // addressAcceptMsg: this.checked2 ? 1 : 0,
122 emailAcceptMsg: this.checked3 ? 1 : 0, 172 // emailAcceptMsg: this.checked3 ? 1 : 0,
123 policies: policies 173 // policies: policies
124 }; 174 // };
125 console.log("data:", JSON.stringify(data)); 175 let data = Object.assign(this.data, val);
126 return; 176 data.policies = policies;
177 if (!this.isChina) {
178 data.provinceId = "";
179 data.cityId = "";
180 }
127 this.loading = true; 181 this.loading = true;
128 httpPost({ 182 httpPost({
129 url: api.updatePolicyContanct, 183 url: api.updatePolicyContanct,
...@@ -140,8 +194,15 @@ export default { ...@@ -140,8 +194,15 @@ export default {
140 this.$refs.auth.noAuth(); 194 this.$refs.auth.noAuth();
141 } 195 }
142 }); 196 });
143 }
144 }, 197 },
198
199 /**
200 * 从美国税务表单组件提交
201 */
202 onUsTaxSubmit(val){
203 this.doSubmit(val)
204 },
205
145 checkMobile() { 206 checkMobile() {
146 if (this.data.mobile) { 207 if (this.data.mobile) {
147 let hkMobile = contactMethodCheck("hkmobile", this.data.mobile); 208 let hkMobile = contactMethodCheck("hkmobile", this.data.mobile);
...@@ -154,6 +215,9 @@ export default { ...@@ -154,6 +215,9 @@ export default {
154 return true; 215 return true;
155 }, 216 },
156 checkAddress() { 217 checkAddress() {
218 if (!this.data.address) {
219 this.errorTips.e2 = this.i18n.policyChangeContact.errorTips.e2;
220 }
157 return true; 221 return true;
158 }, 222 },
159 checkEmail() { 223 checkEmail() {
...@@ -163,7 +227,54 @@ export default { ...@@ -163,7 +227,54 @@ export default {
163 } 227 }
164 return true; 228 return true;
165 }, 229 },
230 checkNationsPhoneCode() {
231 if (!this.data.mobileAreaCode) {
232 this.errorTips.e4 = this.i18n.policyChangeContact.errorTips.e4;
233 return false;
234 }
235 return true;
236 },
237 checkNations() {
238 if (!this.data.countryId) {
239 this.errorTips.e5 = this.i18n.policyChangeContact.errorTips.e5;
240 return false;
241 }
242 return true;
243 },
244 checkProvince() {
245 if (this.isChina) {
246 if (!this.data.provinceId) {
247 this.errorTips.e6 = this.i18n.policyChangeContact.errorTips.e6;
248 return false;
249 }
250 return true;
251 }
252 return true;
253 },
254 checkCity() {
255 if (this.isChina) {
256 if (!this.data.cityId) {
257 this.errorTips.e7 = this.i18n.policyChangeContact.errorTips.e7;
258 return false;
259 }
260 return true;
261 }
262 return true;
263 },
264 /**
265 * 选择省份
266 */
267 onChangeProvince() {
268 this.$set(this.data, "cityId", "");
269 this.cityList = getCityList(this.$i18n.locale, this.data.provinceId)
270 this.data.cityId = this.cityList[0].v;
271 },
272 onAgreeHandler() {
273 let acceptMessage = !this.data.acceptMessage;
274 this.$set(this.data, "acceptMessage", acceptMessage);
275 },
166 initData() { 276 initData() {
277 // 获取国际电话区号
167 let nationsPhoneCodeListTemp = getNationsPhoneCodeList(); 278 let nationsPhoneCodeListTemp = getNationsPhoneCodeList();
168 // 去重 279 // 去重
169 let obj = {}; 280 let obj = {};
...@@ -182,18 +293,22 @@ export default { ...@@ -182,18 +293,22 @@ export default {
182 // }); 293 // });
183 // // 排序 294 // // 排序
184 // nationsPhoneCodeList = nationsPhoneCodeList.sort(ascSort("num", "")); 295 // nationsPhoneCodeList = nationsPhoneCodeList.sort(ascSort("num", ""));
185
186 this.nationsPhoneCodeList = nationsPhoneCodeList; 296 this.nationsPhoneCodeList = nationsPhoneCodeList;
187 297
298 // 获取国际区号
188 this.nationsList = getNationsList(this.$i18n.locale); 299 this.nationsList = getNationsList(this.$i18n.locale);
189 300
301 // 获取省份
302 this.provinceList = getCnProvinceList(this.$i18n.locale);
303 // console.log("this.provinceList:", this.provinceList);
304
190 if (this.dataInit) { 305 if (this.dataInit) {
191 return; 306 return;
192 } 307 }
193 if (this.loading) { 308 if (this.loading) {
194 return; 309 return;
195 } 310 }
196 this.data = null; 311 // this.data = null;
197 this.loading = true; 312 this.loading = true;
198 let param = { 313 let param = {
199 policyId: this.selectedPolicies[0].id, 314 policyId: this.selectedPolicies[0].id,
...@@ -205,7 +320,8 @@ export default { ...@@ -205,7 +320,8 @@ export default {
205 sid: true 320 sid: true
206 }) 321 })
207 .then(response => { 322 .then(response => {
208 this.data = {}; 323 // this.data = {};
324 console.log("response:", response);
209 if (response) { 325 if (response) {
210 this.loading = false; 326 this.loading = false;
211 this.dataInit = true; 327 this.dataInit = true;
...@@ -225,7 +341,6 @@ export default { ...@@ -225,7 +341,6 @@ export default {
225 }, 341 },
226 handlePolicySelect(data) { 342 handlePolicySelect(data) {
227 this.selectedPolicies = data; 343 this.selectedPolicies = data;
228 console.log("this.selectedPolicies:", this.selectedPolicies);
229 this.initData(); 344 this.initData();
230 }, 345 },
231 userLogout() { 346 userLogout() {
...@@ -242,45 +357,11 @@ export default { ...@@ -242,45 +357,11 @@ export default {
242 console.error(e); 357 console.error(e);
243 } 358 }
244 }, 359 },
245 updatePolicyContact() { 360 uploadExcel() {},
246 <<<<<<< HEAD 361 queryPolicyContact() {
247 let param = { 362 let param = { policyId: "4655100", policyCode: "P000200000000009" };
248 policyContactCode: "",
249 policyId: "4655100",
250 policyCode: "P000200000000009",
251 mobileAreaCode: "0668",
252 mobile: "13727826666",
253 countryId: "156",
254 provinceId: "1",
255 cityId: "304",
256 address: "上海迪士尼乐园",
257 acceptMessage: 1,
258 iobsKey: "a",
259 fileFormat: "xlsx",
260 fileSize: 123,
261 fileContentType: "mp4/"
262 };
263 =======
264 let param={
265 "policyContactCode":"",
266 "policies":[{
267 "policyId":"4655100",
268 "policyCode":"P000200000000009"}],
269 "mobileAreaCode":"0668",
270 "mobile":"13727826666",
271 "countryId":"156",
272 "provinceId":"1",
273 "cityId":"304",
274 "address":"上海迪士尼乐园123213123",
275 "acceptMessage":1,
276 "iobsKey":"a",
277 "fileFormat":"xlsx",
278 "fileSize":123,
279 "fileContentType":"mp4/"
280 }
281 >>>>>>> 1af854e069546774dda5b13dbb28fa154cacd45d
282 httpPost({ 363 httpPost({
283 url: api.policyContactApi, 364 url: api.policyContactDetailApi,
284 data: param, 365 data: param,
285 sid: true 366 sid: true
286 }) 367 })
...@@ -289,45 +370,30 @@ export default { ...@@ -289,45 +370,30 @@ export default {
289 }) 370 })
290 .catch(res => {}); 371 .catch(res => {});
291 }, 372 },
292 <<<<<<< HEAD 373 uploadExcel() {},
293 uploadExcel() {}
294 =======
295 uploadExcel(){
296
297 },
298 queryPolicyContact(){
299 let param ={policyId:'4655100',policyCode:'P000200000000009'}
300 httpPost({
301 url: api.policyContactDetailApi,
302 data: param,
303 sid: true
304 }).then(response => {
305 console.log("response:", response)
306 }).catch(res => {
307
308 });
309 }
310 >>>>>>> 1af854e069546774dda5b13dbb28fa154cacd45d
311 }, 374 },
312 watch: { 375 watch: {
313 "data.mobileAreaCode": function() { 376 "data.mobile": function() {
314 this.errorTips.e1 = ""; 377 this.errorTips.e1 = "";
315 }, 378 },
316 "data.mobile": function() { 379 "data.address": function() {
317 this.errorTips.e2 = ""; 380 this.errorTips.e2 = "";
318 }, 381 },
319 "data.countryId": function() { 382 "data.email": function() {
320 this.errorTips.e3 = ""; 383 this.errorTips.e3 = "";
321 }, 384 },
322 "data.provinceId": function() { 385 "data.mobileAreaCode": function() {
323 this.errorTips.e4 = ""; 386 this.errorTips.e4 = "";
324 }, 387 },
325 "data.cityId": function() { 388 "data.countryId": function() {
326 this.errorTips.e5 = ""; 389 this.errorTips.e5 = "";
327 }, 390 },
328 "data.address": function() { 391 "data.provinceId": function() {
329 this.errorTips.e6 = ""; 392 this.errorTips.e6 = "";
330 }, 393 },
394 "data.cityId": function() {
395 this.errorTips.e7 = "";
396 }
331 }, 397 },
332 mounted() { 398 mounted() {
333 this.initTitle(); 399 this.initTitle();
...@@ -353,19 +419,20 @@ export default { ...@@ -353,19 +419,20 @@ export default {
353 // policies: [{ policyId: "4661690", policyCode: "P000200000000458" }] 419 // policies: [{ policyId: "4661690", policyCode: "P000200000000458" }]
354 // }; 420 // };
355 421
356 var tttt2 = { 422 // var tttt2 = {
357 policyContactCode: "", 423 // policyContactCode: "",
358 policyId: "4655100", 424 // policyId: "4655100",
359 policyCode: "P000200000000009", 425 // policyCode: "P000200000000009",
360 mobileAreaCode: "0668", 426
361 mobile: "13727826666", 427 // mobileAreaCode: "0668",
362 countryId: "156", 428 // mobile: "13727826666",
363 provinceId: "1", 429 // countryId: "156",
364 cityId: "304", 430 // provinceId: "1",
365 address: "上海迪士尼乐园", 431 // cityId: "304",
366 acceptMessage: 1, 432 // address: "上海迪士尼乐园",
367 iobsKey: "a", 433 // acceptMessage: 1,
368 fileFormat: "xlsx", 434 // iobsKey: "a",
369 fileSize: 123, 435 // fileFormat: "xlsx",
370 fileContentType: "mp4" 436 // fileSize: 123,
371 }; 437 // fileContentType: "mp4"
438 // };
......
...@@ -36,9 +36,9 @@ ...@@ -36,9 +36,9 @@
36 36
37 .ipt-gird { 37 .ipt-gird {
38 &-item { 38 &-item {
39 position: relative;
39 margin: 0 auto 48px; 40 margin: 0 auto 48px;
40 padding-left: 18px; 41 padding-right: 36px;
41 padding-right: 18px;
42 42
43 &:first-child { 43 &:first-child {
44 margin-right: 0; 44 margin-right: 0;
......
...@@ -5,36 +5,40 @@ ...@@ -5,36 +5,40 @@
5 <input type="password" style="display: none;" /> 5 <input type="password" style="display: none;" />
6 <auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" ref="auth" :tipModel="'m2'"></auth> 6 <auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" ref="auth" :tipModel="'m2'"></auth>
7 <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> 7 <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp>
8 <us-tax-form-upload-comp :visible="usTaxFormUploadCompVisible" @close="usTaxFormUploadCompVisible = false" @submit="onUsTaxSubmit" ></us-tax-form-upload-comp>
8 <template v-if="showForm"> 9 <template v-if="showForm">
9 <policy-head-list :multiSelectable="true" @onSelect="handlePolicySelect"></policy-head-list> 10 <policy-head-list :multiSelectable="true" @onSelect="handlePolicySelect"></policy-head-list>
10 11
11 <div class="container border" v-if="selectedPolicies.length > 0 && data"> 12 <div class="container border" v-if="selectedPolicies.length > 0 && data">
12 <!-- 表单 --> 13 <!-- 表单 -->
13 <div class="form"> 14 <div class="form">
14 <!-- 1 --> 15
16 <!-- 联络电话 -->
15 <div class="form-item"> 17 <div class="form-item">
16 <div class="label"> 18 <div class="label">
17 <div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-phone.png"></div>{{$t('policyChangeContact.phone')}} 19 <div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-phone.png"></div>{{$t('policyChangeContact.phone')}}
18 </div> 20 </div>
19 21
20 <div class="gird-g ipt-gird"> 22 <div class="gird-g ipt-gird">
23 <!-- 国际电话区号 -->
21 <div class="pure-u-1 pure-u-md-6-24 ipt-gird-item"> 24 <div class="pure-u-1 pure-u-md-6-24 ipt-gird-item">
22 <div class="ipt-wrap-linear"> 25 <div class="ipt-wrap-linear">
23 <div class="down-arrow"></div> 26 <div class="down-arrow"></div>
24 <div class="cont"> 27 <div class="cont">
25 <el-select class="ipt" v-model="data.mobileAreaCode" :placeholder="$t('policyChangeContact.form.InternationalArea')"> 28 <el-select class="ipt" v-model="data.mobileAreaCode" :placeholder="$t('policyChangeContact.form.InternationalArea')" @change="checkNationsPhoneCode">
26 <el-option v-for="(item, index) in nationsPhoneCodeList" :key="index" :label="item.n" :value="item.n"></el-option> 29 <el-option v-for="(item, index) in nationsPhoneCodeList" :key="index" :label="item.n" :value="item.n"></el-option>
27 </el-select> 30 </el-select>
28 </div> 31 </div>
29 </div> 32 </div>
30 <div class="validator" v-if="errorTips.e1.length > 0"> 33 <div class="validator" v-if="errorTips.e4.length > 0">
31 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}} 34 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e4}}
32 </div> 35 </div>
33 </div> 36 </div>
34 37
38 <!-- 电话号码 -->
35 <div class="pure-u-1 pure-u-md-8-24 ipt-gird-item"> 39 <div class="pure-u-1 pure-u-md-8-24 ipt-gird-item">
36 <div class="ipt-wrap-linear"> 40 <div class="ipt-wrap-linear">
37 <input class="ipt mail-ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="data.mobile" autocomplete="new-password" :placeholder="$t('policyChangeContact.form.Mobile')"> 41 <input class="ipt mail-ipt" type="text" v-model="data.mobile" autocomplete="new-password" :placeholder="$t('policyChangeContact.form.Mobile')">
38 </div> 42 </div>
39 <div class="validator" v-if="errorTips.e1.length > 0"> 43 <div class="validator" v-if="errorTips.e1.length > 0">
40 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}} 44 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}}
...@@ -43,47 +47,64 @@ ...@@ -43,47 +47,64 @@
43 </div> 47 </div>
44 </div> 48 </div>
45 49
46 <!-- 2 --> 50 <!-- 联络地址 -->
47 <div class="form-item"> 51 <div class="form-item">
48 <div class="label"> 52 <div class="label">
49 <div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-location.png"></div>{{$t('policyChangeContact.address')}} 53 <div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-location.png"></div>{{$t('policyChangeContact.address')}}
50 </div> 54 </div>
51 <div class="gird-g ipt-gird"> 55 <div class="gird-g ipt-gird">
56
57 <!-- 国家/地区 -->
52 <div class="pure-u-1 pure-u-md-6-24 ipt-gird-item"> 58 <div class="pure-u-1 pure-u-md-6-24 ipt-gird-item">
53 <div class="ipt-wrap-linear"> 59 <div class="ipt-wrap-linear">
54 <div class="down-arrow"></div> 60 <div class="down-arrow"></div>
55 <div class="cont"> 61 <div class="cont">
56 <el-select class="ipt" v-model="data.countryId" :placeholder="$t('policyChangeContact.form.Nation')"> 62 <el-select class="ipt" v-model="data.countryId" :placeholder="$t('policyChangeContact.form.Nation')" @change="checkNations">
57 <el-option v-for="(item, index) in nationsList" :key="index" :label="item.n" :value="item.v"></el-option> 63 <el-option v-for="(item, index) in nationsList" :key="index" :label="item.n" :value="item.v"></el-option>
58 </el-select> 64 </el-select>
59 </div> 65 </div>
60 </div> 66 </div>
61 <div class="validator" v-if="errorTips.e2.length > 0"> 67 <div class="validator" v-if="errorTips.e5.length > 0">
62 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e2}} 68 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e5}}
63 </div> 69 </div>
64 </div> 70 </div>
65 71
66 <!-- <div class="pure-u-1 pure-u-md-6-24 ipt-gird-item"> 72 <!-- 省 -->
73 <template v-if="isChina">
74 <div class="pure-u-1 pure-u-md-6-24 ipt-gird-item">
67 <div class="ipt-wrap-linear"> 75 <div class="ipt-wrap-linear">
68 <input class="ipt" type="text" :class="{err : errorTips.e2.length > 0}" v-model="data.address" autocomplete="new-password" :placeholder="$t('policyChangeContact.form.District')"> 76 <div class="down-arrow"></div>
77 <div class="cont">
78 <el-select class="ipt" v-model="data.provinceId" :placeholder="$t('policyChangeContact.form.Province')" @change="onChangeProvince">
79 <el-option v-for="(item, index) in provinceList" :key="index" :label="item.n" :value="item.v"></el-option>
80 </el-select>
69 </div> 81 </div>
70 <div class="validator" v-if="errorTips.e2.length > 0"> 82 </div>
83 <div class="validator" v-if="errorTips.e6.length > 0">
71 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e6}} 84 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e6}}
72 </div> 85 </div>
73 </div> 86 </div>
74 87
88 <!-- 市 -->
75 <div class="pure-u-1 pure-u-md-6-24 ipt-gird-item"> 89 <div class="pure-u-1 pure-u-md-6-24 ipt-gird-item">
76 <div class="ipt-wrap-linear"> 90 <div class="ipt-wrap-linear">
77 <input class="ipt" type="text" :class="{err : errorTips.e2.length > 0}" v-model="data.address" autocomplete="new-password" :placeholder="$t('policyChangeContact.form.District')"> 91 <div class="down-arrow"></div>
92 <div class="cont">
93 <el-select class="ipt" v-model="data.cityId" :placeholder="$t('policyChangeContact.form.City')" @change="checkCity">
94 <el-option v-for="(item, index) in cityList" :key="index" :label="item.n" :value="item.v"></el-option>
95 </el-select>
78 </div> 96 </div>
79 <div class="validator" v-if="errorTips.e2.length > 0">
80 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e6}}
81 </div> 97 </div>
82 </div> --> 98 <div class="validator" v-if="errorTips.e7.length > 0">
99 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e7}}
100 </div>
101 </div>
102 </template>
83 103
84 <div class="pure-u-1 pure-u-md-18-24 ipt-gird-item"> 104 <!-- 地址 -->
105 <div class="pure-u-1 ipt-gird-item" :class="{'pure-u-md-18-24':!isChina}">
85 <div class="ipt-wrap-linear"> 106 <div class="ipt-wrap-linear">
86 <input class="ipt" type="text" :class="{err : errorTips.e2.length > 0}" v-model="data.address" autocomplete="new-password" :placeholder="$t('policyChangeContact.form.Address')"> 107 <input class="ipt" type="text" v-model="data.address" autocomplete="new-password" :placeholder="$t('policyChangeContact.form.Address')">
87 </div> 108 </div>
88 <div class="validator" v-if="errorTips.e2.length > 0"> 109 <div class="validator" v-if="errorTips.e2.length > 0">
89 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e2}} 110 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e2}}
...@@ -93,7 +114,7 @@ ...@@ -93,7 +114,7 @@
93 </div> 114 </div>
94 </div> 115 </div>
95 116
96 <!-- 3 --> 117 <!-- email -->
97 <div class="form-item"> 118 <div class="form-item">
98 <div class="label"> 119 <div class="label">
99 <div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-mail.png"></div>{{$t('policyChangeContact.email')}} 120 <div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-mail.png"></div>{{$t('policyChangeContact.email')}}
...@@ -101,18 +122,19 @@ ...@@ -101,18 +122,19 @@
101 <div class="gird-g ipt-gird"> 122 <div class="gird-g ipt-gird">
102 <div class="pure-u-1 ipt-gird-item"> 123 <div class="pure-u-1 ipt-gird-item">
103 <div class="pure-u-1 pure-u-md-12-24 ipt-wrap-linear"> 124 <div class="pure-u-1 pure-u-md-12-24 ipt-wrap-linear">
104 <input class="ipt" type="text" :class="{err : errorTips.e3.length > 0}" v-model="data.email" autocomplete="new-password" :placeholder="$t('policyChangeContact.form.Mail')"> 125 <input class="ipt" type="text" v-model="data.email" autocomplete="new-password" :placeholder="$t('policyChangeContact.form.Mail')">
105 </div> 126 </div>
106 <div class="validator" v-if="errorTips.e3.length > 0"> 127 <div class="validator" v-if="errorTips.e3.length > 0">
107 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e3}} 128 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e3}}
108 </div> 129 </div>
109 </div> 130 </div>
110 </div> 131 </div>
111
112 </div> 132 </div>
113 <div class="agree" @click="checked1 = !checked1"> 133
114 <img v-if="!checked1" class="check-icon pointer" src="@/assets/images/reservation/un-check.png"> 134 <!-- 统一接受宣传信息 -->
115 <img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png"> 135 <div class="agree pointer" @click="onAgreeHandler">
136 <img v-if="!data.acceptMessage" class="check-icon" src="@/assets/images/reservation/un-check.png">
137 <img v-else class="check-icon" src="@/assets/images/reservation/check.png">
116 <span>{{$t("policyChangeContact.checkTips")}}</span> 138 <span>{{$t("policyChangeContact.checkTips")}}</span>
117 </div> 139 </div>
118 140
...@@ -123,7 +145,6 @@ ...@@ -123,7 +145,6 @@
123 </div> 145 </div>
124 146
125 </div> 147 </div>
126 <div style="width: 20px;height: 20px;background-color: #3a8ee6" @click="updatePolicyContact"></div>
127 </template> 148 </template>
128 </div> 149 </div>
129 </template> 150 </template>
......
1 /**
2 * 组件描述:上传美国税务表格
3 */
4
5 export default {
6 props: {
7 // 是否显示组件
8 // 1、顯示事故類型；2、顯示時間
9 // 是否显示组件
10 visible: {
11 type: Boolean,
12 default: false
13 }
14 },
15 data() {
16 return {
17 iobsKey: "asdfs"
18 };
19 },
20 components: {},
21 computed: {
22 locale() {
23 return this.$i18n.locale || "tc";
24 }
25 },
26 methods: {
27 initData() {},
28
29 onOverLayHandler() {
30 console.log("onOverLayHandler");
31 this.$emit("close");
32 },
33 toDownLoadTaxForm() {
34 window.open("https://www.irs.gov/");
35 },
36 onUploadHandler() {},
37 onSubmitHandler() {
38 this.$emit("submit", {
39 iobsKey: this.iobsKey
40 });
41 }
42 },
43 mounted() {},
44 created() {
45 this.initData();
46 },
47 watch: {}
48 };
1 @import "@/styles/_support.scss";
2
3 .comp {
4 position: fixed;
5 top: 0;
6 left: 0;
7 z-index: 4001;
8 width: 100%;
9 height: 100%;
10 @extend .fcc;
11 text-align: center;
12 font-size: 28px;
13 }
14
15 .overlay {
16 position: absolute;
17 top: 0;
18 left: 0;
19 width: 100%;
20 height: 100%;
21 background: rgba($color: #000000, $alpha: 0.7);
22 }
23
24 .border {
25 position: relative;
26 @include border-tans(20px);
27 }
28
29 .modal {
30 position: relative;
31 @extend .bb;
32 max-width: 900px;
33 margin: 0 auto;
34 padding: 60px 60px 48px;
35
36 &-content {
37 display: flex;
38 justify-content: flex-start;
39 align-items: center;
40
41 max-height: 534px;
42
43 .info-icon {
44 width: 210px;
45 min-width: 210px;
46
47 img {
48 width: 100%;
49 }
50 }
51
52 .message {
53 font-size: $fontSize-M2;
54 margin-left: 48px;
55 font-weight: bold;
56 color: $cOrange2;
57 display: inline-block;
58 height: 100%;
59 min-width: 100px;
60 text-align: justify;
61 text-align-last: left;
62
63 span {
64 cursor: pointer;
65 text-decoration: underline;
66 }
67 }
68
69 .lsp {
70 line-height: 1.4;
71 }
72
73 .lsp:lang(zh) {
74 letter-spacing: 0.7px;
75 }
76 }
77
78 &-form {
79 display: flex;
80 justify-content: center;
81 align-items: flex-end;
82 min-height: 40px;
83 // background-color: wheat;
84 }
85
86 &-btn-wrap {
87 display: flex;
88 justify-content: center;
89 .btn {
90 @include btc4(144px, 42px, 16px);
91 margin: 20px 24px 0;
92 @extend .pointer;
93 }
94 .disable {
95 background-image: none;
96 background-color: $cFontGray3;
97 }
98 }
99 }
100
101
102
103 .close {
104 position: absolute;
105 right: -55px;
106 top: -15px;
107 cursor: pointer;
108
109 img {
110 position: relative;
111 width: 30px;
112 height: 30px;
113 }
114 }
115
116 @media (max-width: 1150px) {
117 .close {
118 right: -15px;
119 top: -55px;
120 }
121 }
122
123 @media (max-width: 1000px) {
124 .border {
125 width: 90%;
126 }
127 }
128
129 @media (max-width: 768px) {
130 .border {
131 width: 80%;
132
133 .modal {
134 padding: 32px 16px;
135 max-height: 80vh;
136 overflow-y: auto;
137
138 .modal-content {
139 flex-wrap: wrap;
140
141 .info-icon {
142 margin: 0 auto;
143 width: 32%;
144 min-width: auto;
145 }
146
147 .message {
148 margin: 16px auto 0;
149 font-size: 20px;
150 }
151 }
152
153 .modal-btn-wrap {
154 flex-wrap: wrap;
155 .btn {
156 width: 100%;
157 margin: 24px 0px 0;
158 }
159 }
160 }
161 }
162 }
1
2 <template>
3 <div class="comp" v-if="visible">
4 <div @click="onOverLayHandler()" class="overlay"></div>
5 <div class="border">
6 <div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div>
7 <div class="modal">
8 <div class="modal-content">
9 <div class="info-icon">
10 <img src="@/assets/images/clarms/info.png">
11 </div>
12 <div class="message" :class="{'lsp':locale != 'en'}">
13 阁下更改联系地址/电话国家为美国。为符合美国税务条例要求，请同时填妥W8/W9表格并递交给我们，W8/W9表格可于<span @click="toDownLoadTaxForm">美国国税局网站</span>下载。有关美国税务条例疑问，请联络您的税务顾问。
14 </div>
15
16 </div>
17 <div class="modal-form">
18 us-tax.excel
19 </div>
20 <div class="modal-btn-wrap">
21 <div @click="onUploadHandler" class="btn">上载表格</div>
22 <div @click="onSubmitHandler" class="btn" :class="{'disable':iobsKey ==''}">提交</div>
23 </div>
24
25 </div>
26 </div>
27 </div>
28 </template>
29
30 <script src="./us-tax-form-upload-comp.js"></script>
31 <style lang="scss" scoped>
32 @import "./us-tax-form-upload-comp.scss";
33 </style>