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 521 additions and 169 deletions
......@@ -702,14 +702,21 @@ module.exports = {
submit: "Confirm",
errorTips: {
e1: "Please enter the collect mobile no",
e2: "請填寫聯繫地址",
e3: "Please enter the collect E-mail"
e2: "Please enter the collect address",
e3: "Please enter the collect E-mail",
e4: "请选择国际号码区号",
e5: "请选择国家(地区)",
e6: "请选择省",
e7: "请选择市",
},
form:{
InternationalArea:"International area",
Mobile:"Mobile",
Nation:"Nation(Region)",
District:"District",
Province:"Province",
City:"City",
Address:"Address",
Mail:"Please enter",
},
......
......@@ -711,15 +711,22 @@ module.exports = {
checkTips: "本人不同意接收宣傳信息",
submit: "確認修改",
errorTips: {
e1: "請填寫正確的聯繫電話",
e2: "請填寫聯繫地址",
e3: "請填寫正確的電郵地址"
e1: "請填寫正確的聯絡電話",
e2: "請填寫聯絡地址",
e3: "請填寫正確的電郵地址",
e4: "请选择国际号码区号",
e5: "请选择国家(地区)",
e6: "请选择省",
e7: "请选择市",
},
form:{
InternationalArea:"國際號碼區號",
Mobile:"電話號碼",
Nation:"國家（地區）",
District:"市行政區",
Province:"省",
City:"市",
Address:"詳細地址",
Mail:"請輸入",
},
......
......@@ -711,15 +711,22 @@ module.exports = {
checkTips: "本人不同意接收宣传信息",
submit: "确认修改",
errorTips: {
e1: "请填写正确的联系电话",
e2: "請填寫聯繫地址",
e3: "请填写正确的电邮地址"
e1: "请填写正确的联络电话",
e2: "请填写联络地址",
e3: "请填写正确的电邮地址",
e4: "请选择国际号码区号",
e5: "请选择国家(地区)",
e6: "请选择省",
e7: "请选择市",
},
form:{
InternationalArea:"国际号码区号",
Mobile:"电话号码",
Nation:"国家（地区）",
District:"市行政区",
Province:"省",
City:"市",
Address:"详细地址",
Mail:"请输入",
},
......
......@@ -3,11 +3,17 @@ import { httpGet, httpPost } from "@/api/fetch-api.js";
import { contactMethodCheck } from "@utils/utils.js";
import { setTitle, ascSort } from "@/utils/utils.js";
import { getNationsList, getNationsPhoneCodeList } from "@/utils/biz.js";
import {
getNationsList,
getNationsPhoneCodeList,
getCnProvinceList,
getCityList
} from "@/utils/biz.js";
import Auth from "@components/auth/auth.vue";
import modalComp from "@/components/modal-comp/modal-comp.vue";
import UsTaxFormUploadComp from "./us-tax-form-upload-comp.vue";
import PolicyHeadList from "./policy-head-list.vue";
import modalComp from "@/components/modal-comp/modal-comp.vue";
import Vue from "vue";
import { Loading } from "vant";
Vue.use(Loading);
......@@ -40,19 +46,24 @@ export default {
acceptMessage: 1,
// 上传信息
iobsKey: "a",
fileFormat: "xlsx",
fileSize: 123,
fileContentType: "mp4"
iobsKey: "",
fileFormat: "",
fileSize: 0,
fileContentType: ""
},
errorTips: {
e1: "",
e2: "",
e3: ""
e3: "",
e4: "",
e5: "",
e6: "",
e7: ""
},
modalSimpleVisiable: false,
modalVisiable: false,
usTaxFormUploadCompVisible: false,
targetPath: "",
modalIcon: "succ",
modalContent: "",
......@@ -60,13 +71,16 @@ export default {
// 国际号码区号列表
nationsPhoneCodeList: [],
// 国际地区区号
nationsList: []
nationsList: [],
provinceList: [],
cityList: []
};
},
components: {
Auth,
PolicyHeadList,
modalComp
modalComp,
UsTaxFormUploadComp
},
computed: {
locale() {
......@@ -81,6 +95,14 @@ export default {
let b1 = !this.selectedPolicies || this.selectedPolicies.length == 0;
let b2 = !this.data.address && !this.data.email && !this.data.mobile;
return b1 || b2;
},
isChina() {
let result = this.data.countryId == "28";
return result;
},
isUSA() {
let result = this.data.countryId == "225";
return result;
}
},
methods: {
......@@ -96,52 +118,91 @@ export default {
showSuccess() {
this.showModal(this.i18n.policyChangeContact.success);
},
// 提交前准备
updateContactsHandler() {
if (this.submitBtnDisabled) {
return;
}
this.errorTips = {
e1: "",
e2: "",
e3: "",
e4: "",
e5: "",
e6: "",
e7: ""
};
let b1 = this.checkMobile();
let b2 = this.checkEmail();
let b3 = this.checkAddress();
let b = b1 & b2 & b3;
if (!b) {
if (this.loading) {
return;
let b4 = this.checkNationsPhoneCode();
let b5 = this.checkNations();
let b6 = this.checkProvince();
let b7 = this.checkCity();
let b = b1 & b2 & b3 & b4 & b5 & b6 & b7;
if (b) {
// 判断是否美国 出
if (this.isUSA) {
this.usTaxFormUploadCompVisible = true;
} else {
this.doSubmit();
}
let policies = [];
this.selectedPolicies.forEach(element => {
policies.push({ policyId: element.id, policyCode: element.code });
});
let data = {
mobileNo: this.data.mobile,
address: this.data.address,
email: this.data.email,
mobileNoAcceptMsg: this.checked1 ? 1 : 0,
addressAcceptMsg: this.checked2 ? 1 : 0,
emailAcceptMsg: this.checked3 ? 1 : 0,
policies: policies
};
console.log("data:", JSON.stringify(data));
}
},
/**
* 提交表单
*/
doSubmit(val = {}) {
// this.usTaxFormUploadCompVisible = false;
if (this.loading) {
return;
this.loading = true;
httpPost({
url: api.updatePolicyContanct,
data: data,
sid: true
})
.then(() => {
this.loading = false;
this.showSuccess();
})
.catch(err => {
this.loading = false;
if (err.code == 404) {
this.$refs.auth.noAuth();
}
});
}
let policies = [];
this.selectedPolicies.forEach(element => {
policies.push({ policyId: element.id, policyCode: element.code });
});
// let data = {
// mobileNo: this.data.mobile,
// address: this.data.address,
// email: this.data.email,
// mobileNoAcceptMsg: this.checked1 ? 1 : 0,
// addressAcceptMsg: this.checked2 ? 1 : 0,
// emailAcceptMsg: this.checked3 ? 1 : 0,
// policies: policies
// };
let data = Object.assign(this.data, val);
data.policies = policies;
if (!this.isChina) {
data.provinceId = "";
data.cityId = "";
}
this.loading = true;
httpPost({
url: api.updatePolicyContanct,
data: data,
sid: true
})
.then(() => {
this.loading = false;
this.showSuccess();
})
.catch(err => {
this.loading = false;
if (err.code == 404) {
this.$refs.auth.noAuth();
}
});
},
/**
* 从美国税务表单组件提交
*/
onUsTaxSubmit(val){
this.doSubmit(val)
},
checkMobile() {
if (this.data.mobile) {
let hkMobile = contactMethodCheck("hkmobile", this.data.mobile);
......@@ -154,6 +215,9 @@ export default {
return true;
},
checkAddress() {
if (!this.data.address) {
this.errorTips.e2 = this.i18n.policyChangeContact.errorTips.e2;
}
return true;
},
checkEmail() {
......@@ -163,7 +227,54 @@ export default {
}
return true;
},
checkNationsPhoneCode() {
if (!this.data.mobileAreaCode) {
this.errorTips.e4 = this.i18n.policyChangeContact.errorTips.e4;
return false;
}
return true;
},
checkNations() {
if (!this.data.countryId) {
this.errorTips.e5 = this.i18n.policyChangeContact.errorTips.e5;
return false;
}
return true;
},
checkProvince() {
if (this.isChina) {
if (!this.data.provinceId) {
this.errorTips.e6 = this.i18n.policyChangeContact.errorTips.e6;
return false;
}
return true;
}
return true;
},
checkCity() {
if (this.isChina) {
if (!this.data.cityId) {
this.errorTips.e7 = this.i18n.policyChangeContact.errorTips.e7;
return false;
}
return true;
}
return true;
},
/**
* 选择省份
*/
onChangeProvince() {
this.$set(this.data, "cityId", "");
this.cityList = getCityList(this.$i18n.locale, this.data.provinceId)
this.data.cityId = this.cityList[0].v;
},
onAgreeHandler() {
let acceptMessage = !this.data.acceptMessage;
this.$set(this.data, "acceptMessage", acceptMessage);
},
initData() {
// 获取国际电话区号
let nationsPhoneCodeListTemp = getNationsPhoneCodeList();
// 去重
let obj = {};
......@@ -182,18 +293,22 @@ export default {
// });
// // 排序
// nationsPhoneCodeList = nationsPhoneCodeList.sort(ascSort("num", ""));
this.nationsPhoneCodeList = nationsPhoneCodeList;
// 获取国际区号
this.nationsList = getNationsList(this.$i18n.locale);
// 获取省份
this.provinceList = getCnProvinceList(this.$i18n.locale);
// console.log("this.provinceList:", this.provinceList);
if (this.dataInit) {
return;
}
if (this.loading) {
return;
}
this.data = null;
// this.data = null;
this.loading = true;
let param = {
policyId: this.selectedPolicies[0].id,
......@@ -205,7 +320,8 @@ export default {
sid: true
})
.then(response => {
this.data = {};
// this.data = {};
console.log("response:", response);
if (response) {
this.loading = false;
this.dataInit = true;
......@@ -225,7 +341,6 @@ export default {
},
handlePolicySelect(data) {
this.selectedPolicies = data;
console.log("this.selectedPolicies:", this.selectedPolicies);
this.initData();
},
userLogout() {
......@@ -242,45 +357,11 @@ export default {
console.error(e);
}
},
updatePolicyContact() {
<<<<<<< HEAD
let param = {
policyContactCode: "",
policyId: "4655100",
policyCode: "P000200000000009",
mobileAreaCode: "0668",
mobile: "13727826666",
countryId: "156",
provinceId: "1",
cityId: "304",
address: "上海迪士尼乐园",
acceptMessage: 1,
iobsKey: "a",
fileFormat: "xlsx",
fileSize: 123,
fileContentType: "mp4/"
};
=======
let param={
"policyContactCode":"",
"policies":[{
"policyId":"4655100",
"policyCode":"P000200000000009"}],
"mobileAreaCode":"0668",
"mobile":"13727826666",
"countryId":"156",
"provinceId":"1",
"cityId":"304",
"address":"上海迪士尼乐园123213123",
"acceptMessage":1,
"iobsKey":"a",
"fileFormat":"xlsx",
"fileSize":123,
"fileContentType":"mp4/"
}
>>>>>>> 1af854e069546774dda5b13dbb28fa154cacd45d
uploadExcel() {},
queryPolicyContact() {
let param = { policyId: "4655100", policyCode: "P000200000000009" };
httpPost({
url: api.policyContactApi,
url: api.policyContactDetailApi,
data: param,
sid: true
})
......@@ -289,45 +370,30 @@ export default {
})
.catch(res => {});
},
<<<<<<< HEAD
uploadExcel() {}
=======
uploadExcel(){
},
queryPolicyContact(){
let param ={policyId:'4655100',policyCode:'P000200000000009'}
httpPost({
url: api.policyContactDetailApi,
data: param,
sid: true
}).then(response => {
console.log("response:", response)
}).catch(res => {
});
}
>>>>>>> 1af854e069546774dda5b13dbb28fa154cacd45d
uploadExcel() {},
},
watch: {
"data.mobileAreaCode": function() {
"data.mobile": function() {
this.errorTips.e1 = "";
},
"data.mobile": function() {
"data.address": function() {
this.errorTips.e2 = "";
},
"data.countryId": function() {
"data.email": function() {
this.errorTips.e3 = "";
},
"data.provinceId": function() {
"data.mobileAreaCode": function() {
this.errorTips.e4 = "";
},
"data.cityId": function() {
"data.countryId": function() {
this.errorTips.e5 = "";
},
"data.address": function() {
"data.provinceId": function() {
this.errorTips.e6 = "";
},
"data.cityId": function() {
this.errorTips.e7 = "";
}
},
mounted() {
this.initTitle();
......@@ -353,19 +419,20 @@ export default {
// policies: [{ policyId: "4661690", policyCode: "P000200000000458" }]
// };
var tttt2 = {
policyContactCode: "",
policyId: "4655100",
policyCode: "P000200000000009",
mobileAreaCode: "0668",
mobile: "13727826666",
countryId: "156",
provinceId: "1",
cityId: "304",
address: "上海迪士尼乐园",
acceptMessage: 1,
iobsKey: "a",
fileFormat: "xlsx",
fileSize: 123,
fileContentType: "mp4"
};
// var tttt2 = {
// policyContactCode: "",
// policyId: "4655100",
// policyCode: "P000200000000009",
// mobileAreaCode: "0668",
// mobile: "13727826666",
// countryId: "156",
// provinceId: "1",
// cityId: "304",
// address: "上海迪士尼乐园",
// acceptMessage: 1,
// iobsKey: "a",
// fileFormat: "xlsx",
// fileSize: 123,
// fileContentType: "mp4"
// };
......
......@@ -36,9 +36,9 @@
.ipt-gird {
&-item {
position: relative;
margin: 0 auto 48px;
padding-left: 18px;
padding-right: 18px;
padding-right: 36px;
&:first-child {
margin-right: 0;
......
......@@ -5,36 +5,40 @@
<input type="password" style="display: none;" />
<auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" ref="auth" :tipModel="'m2'"></auth>
<modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp>
<us-tax-form-upload-comp :visible="usTaxFormUploadCompVisible" @close="usTaxFormUploadCompVisible = false" @submit="onUsTaxSubmit" ></us-tax-form-upload-comp>
<template v-if="showForm">
<policy-head-list :multiSelectable="true" @onSelect="handlePolicySelect"></policy-head-list>
<div class="container border" v-if="selectedPolicies.length > 0 && data">
<!-- 表单 -->
<div class="form">
<!-- 1 -->
<!-- 联络电话 -->
<div class="form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-phone.png"></div>{{$t('policyChangeContact.phone')}}
</div>
<div class="gird-g ipt-gird">
<!-- 国际电话区号 -->
<div class="pure-u-1 pure-u-md-6-24 ipt-gird-item">
<div class="ipt-wrap-linear">
<div class="down-arrow"></div>
<div class="cont">
<el-select class="ipt" v-model="data.mobileAreaCode" :placeholder="$t('policyChangeContact.form.InternationalArea')">
<el-select class="ipt" v-model="data.mobileAreaCode" :placeholder="$t('policyChangeContact.form.InternationalArea')" @change="checkNationsPhoneCode">
<el-option v-for="(item, index) in nationsPhoneCodeList" :key="index" :label="item.n" :value="item.n"></el-option>
</el-select>
</div>
</div>
<div class="validator" v-if="errorTips.e1.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}}
<div class="validator" v-if="errorTips.e4.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e4}}
</div>
</div>
<!-- 电话号码 -->
<div class="pure-u-1 pure-u-md-8-24 ipt-gird-item">
<div class="ipt-wrap-linear">
<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')">
<input class="ipt mail-ipt" type="text" v-model="data.mobile" autocomplete="new-password" :placeholder="$t('policyChangeContact.form.Mobile')">
</div>
<div class="validator" v-if="errorTips.e1.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}}
......@@ -43,47 +47,64 @@
</div>
</div>
<!-- 2 -->
<!-- 联络地址 -->
<div class="form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-location.png"></div>{{$t('policyChangeContact.address')}}
</div>
<div class="gird-g ipt-gird">
<!-- 国家/地区 -->
<div class="pure-u-1 pure-u-md-6-24 ipt-gird-item">
<div class="ipt-wrap-linear">
<div class="down-arrow"></div>
<div class="cont">
<el-select class="ipt" v-model="data.countryId" :placeholder="$t('policyChangeContact.form.Nation')">
<el-select class="ipt" v-model="data.countryId" :placeholder="$t('policyChangeContact.form.Nation')" @change="checkNations">
<el-option v-for="(item, index) in nationsList" :key="index" :label="item.n" :value="item.v"></el-option>
</el-select>
</div>
</div>
<div class="validator" v-if="errorTips.e2.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e2}}
<div class="validator" v-if="errorTips.e5.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e5}}
</div>
</div>
<!-- <div class="pure-u-1 pure-u-md-6-24 ipt-gird-item">
<div class="ipt-wrap-linear">
<input class="ipt" type="text" :class="{err : errorTips.e2.length > 0}" v-model="data.address" autocomplete="new-password" :placeholder="$t('policyChangeContact.form.District')">
</div>
<div class="validator" v-if="errorTips.e2.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e6}}
<!-- 省 -->
<template v-if="isChina">
<div class="pure-u-1 pure-u-md-6-24 ipt-gird-item">
<div class="ipt-wrap-linear">
<div class="down-arrow"></div>
<div class="cont">
<el-select class="ipt" v-model="data.provinceId" :placeholder="$t('policyChangeContact.form.Province')" @change="onChangeProvince">
<el-option v-for="(item, index) in provinceList" :key="index" :label="item.n" :value="item.v"></el-option>
</el-select>
</div>
</div>
<div class="validator" v-if="errorTips.e6.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e6}}
</div>
</div>
</div>
<div class="pure-u-1 pure-u-md-6-24 ipt-gird-item">
<div class="ipt-wrap-linear">
<input class="ipt" type="text" :class="{err : errorTips.e2.length > 0}" v-model="data.address" autocomplete="new-password" :placeholder="$t('policyChangeContact.form.District')">
</div>
<div class="validator" v-if="errorTips.e2.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e6}}
<!-- 市 -->
<div class="pure-u-1 pure-u-md-6-24 ipt-gird-item">
<div class="ipt-wrap-linear">
<div class="down-arrow"></div>
<div class="cont">
<el-select class="ipt" v-model="data.cityId" :placeholder="$t('policyChangeContact.form.City')" @change="checkCity">
<el-option v-for="(item, index) in cityList" :key="index" :label="item.n" :value="item.v"></el-option>
</el-select>
</div>
</div>
<div class="validator" v-if="errorTips.e7.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e7}}
</div>
</div>
</div> -->
</template>
<div class="pure-u-1 pure-u-md-18-24 ipt-gird-item">
<!-- 地址 -->
<div class="pure-u-1 ipt-gird-item" :class="{'pure-u-md-18-24':!isChina}">
<div class="ipt-wrap-linear">
<input class="ipt" type="text" :class="{err : errorTips.e2.length > 0}" v-model="data.address" autocomplete="new-password" :placeholder="$t('policyChangeContact.form.Address')">
<input class="ipt" type="text" v-model="data.address" autocomplete="new-password" :placeholder="$t('policyChangeContact.form.Address')">
</div>
<div class="validator" v-if="errorTips.e2.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e2}}
......@@ -93,7 +114,7 @@
</div>
</div>
<!-- 3 -->
<!-- email -->
<div class="form-item">
<div class="label">
<div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-mail.png"></div>{{$t('policyChangeContact.email')}}
......@@ -101,18 +122,19 @@
<div class="gird-g ipt-gird">
<div class="pure-u-1 ipt-gird-item">
<div class="pure-u-1 pure-u-md-12-24 ipt-wrap-linear">
<input class="ipt" type="text" :class="{err : errorTips.e3.length > 0}" v-model="data.email" autocomplete="new-password" :placeholder="$t('policyChangeContact.form.Mail')">
<input class="ipt" type="text" v-model="data.email" autocomplete="new-password" :placeholder="$t('policyChangeContact.form.Mail')">
</div>
<div class="validator" v-if="errorTips.e3.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e3}}
</div>
</div>
</div>
</div>
<div class="agree" @click="checked1 = !checked1">
<img v-if="!checked1" class="check-icon pointer" src="@/assets/images/reservation/un-check.png">
<img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png">
<!-- 统一接受宣传信息 -->
<div class="agree pointer" @click="onAgreeHandler">
<img v-if="!data.acceptMessage" class="check-icon" src="@/assets/images/reservation/un-check.png">
<img v-else class="check-icon" src="@/assets/images/reservation/check.png">
<span>{{$t("policyChangeContact.checkTips")}}</span>
</div>
......@@ -123,8 +145,7 @@
</div>
</div>
<div style="width: 20px;height: 20px;background-color: #3a8ee6" @click="updatePolicyContact"></div>
</template>
</template>
</div>
</template>
......
/**
* 组件描述:上传美国税务表格
*/
export default {
props: {
// 是否显示组件
// 1、顯示事故類型；2、顯示時間
// 是否显示组件
visible: {
type: Boolean,
default: false
}
},
data() {
return {
iobsKey: "asdfs"
};
},
components: {},
computed: {
locale() {
return this.$i18n.locale || "tc";
}
},
methods: {
initData() {},
onOverLayHandler() {
console.log("onOverLayHandler");
this.$emit("close");
},
toDownLoadTaxForm() {
window.open("https://www.irs.gov/");
},
onUploadHandler() {},
onSubmitHandler() {
this.$emit("submit", {
iobsKey: this.iobsKey
});
}
},
mounted() {},
created() {
this.initData();
},
watch: {}
};
@import "@/styles/_support.scss";
.comp {
position: fixed;
top: 0;
left: 0;
z-index: 4001;
width: 100%;
height: 100%;
@extend .fcc;
text-align: center;
font-size: 28px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba($color: #000000, $alpha: 0.7);
}
.border {
position: relative;
@include border-tans(20px);
}
.modal {
position: relative;
@extend .bb;
max-width: 900px;
margin: 0 auto;
padding: 60px 60px 48px;
&-content {
display: flex;
justify-content: flex-start;
align-items: center;
max-height: 534px;
.info-icon {
width: 210px;
min-width: 210px;
img {
width: 100%;
}
}
.message {
font-size: $fontSize-M2;
margin-left: 48px;
font-weight: bold;
color: $cOrange2;
display: inline-block;
height: 100%;
min-width: 100px;
text-align: justify;
text-align-last: left;
span {
cursor: pointer;
text-decoration: underline;
}
}
.lsp {
line-height: 1.4;
}
.lsp:lang(zh) {
letter-spacing: 0.7px;
}
}
&-form {
display: flex;
justify-content: center;
align-items: flex-end;
min-height: 40px;
// background-color: wheat;
}
&-btn-wrap {
display: flex;
justify-content: center;
.btn {
@include btc4(144px, 42px, 16px);
margin: 20px 24px 0;
@extend .pointer;
}
.disable {
background-image: none;
background-color: $cFontGray3;
}
}
}
.close {
position: absolute;
right: -55px;
top: -15px;
cursor: pointer;
img {
position: relative;
width: 30px;
height: 30px;
}
}
@media (max-width: 1150px) {
.close {
right: -15px;
top: -55px;
}
}
@media (max-width: 1000px) {
.border {
width: 90%;
}
}
@media (max-width: 768px) {
.border {
width: 80%;
.modal {
padding: 32px 16px;
max-height: 80vh;
overflow-y: auto;
.modal-content {
flex-wrap: wrap;
.info-icon {
margin: 0 auto;
width: 32%;
min-width: auto;
}
.message {
margin: 16px auto 0;
font-size: 20px;
}
}
.modal-btn-wrap {
flex-wrap: wrap;
.btn {
width: 100%;
margin: 24px 0px 0;
}
}
}
}
}
<template>
<div class="comp" v-if="visible">
<div @click="onOverLayHandler()" class="overlay"></div>
<div class="border">
<div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div>
<div class="modal">
<div class="modal-content">
<div class="info-icon">
<img src="@/assets/images/clarms/info.png">
</div>
<div class="message" :class="{'lsp':locale != 'en'}">
阁下更改联系地址/电话国家为美国。为符合美国税务条例要求，请同时填妥W8/W9表格并递交给我们，W8/W9表格可于<span @click="toDownLoadTaxForm">美国国税局网站</span>下载。有关美国税务条例疑问，请联络您的税务顾问。
</div>
</div>
<div class="modal-form">
us-tax.excel
</div>
<div class="modal-btn-wrap">
<div @click="onUploadHandler" class="btn">上载表格</div>
<div @click="onSubmitHandler" class="btn" :class="{'disable':iobsKey ==''}">提交</div>
</div>
</div>
</div>
</div>
</template>
<script src="./us-tax-form-upload-comp.js"></script>
<style lang="scss" scoped>
@import "./us-tax-form-upload-comp.scss";
</style>