<style>
.page_VisaPersonalFormT{margin: 0 auto; max-width: 793px;min-width: 793px;background-color: white;padding:50px 0px;height: auto !important;margin-bottom: 20px}
p{margin: 5px 0 }
.page_VisaPersonalFormT ._tit{text-align: center;font-size: 22px;letter-spacing:20px;}
.page_VisaPersonalFormT ._head{text-align:center;display: flex;align-items: center;justify-content: space-between;}
.page_VisaPersonalFormT ._head>div{display: inline-block}
.page_VisaPersonalFormT ._head ._left{border: 1px solid #000;margin-top: 45px;margin-left: 280px;width: 190px;height: 72px;line-height: 72px;font-size: 12px;visibility:hidden}
.page_VisaPersonalFormT ._head ._right{height: 170px;width: 170px;border: 1px solid #333;margin-right: 50px;font-size: 12px;line-height: 40px;position: relative;top: 120px;}
.page_VisaPersonalFormT ._form{margin-top: 20px;font-size: 14px;}
.page_VisaPersonalFormT ._form input{border: none;border-bottom: 1px solid #000;padding: 0 20px;margin-left: 10px;outline: none}
.page_VisaPersonalFormT ._f_name{margin: 10px 0}
.page_VisaPersonalFormT ._f_name ._fn_left{width: 69%;display: inline-block}
.page_VisaPersonalFormT ._f_name ._fn_left input{width: 58.2%;}
.page_VisaPersonalFormT ._f_name ._fn_right{width: 30%;display: inline-block}
.page_VisaPersonalFormT ._tips{margin: 0}
.page_VisaPersonalFormT ._tips ._left{display: inline-block;font-size: 10px;padding-left: 140px;}
.page_VisaPersonalFormT ._tips ._right{display: inline-block;font-size: 10px;padding-left: 240px;}
.page_VisaPersonalFormT ._fx_left{display: inline-block;margin-right: 133px;margin-left: 0!important}
.page_VisaPersonalFormT ._mr10{margin-right: 10px}
.page_VisaPersonalFormT ._vp_box{margin:0 20px;overflow: hidden;}
.page_VisaPersonalFormT ._vp_box p{white-space: nowrap;}
.page_VisaPersonalFormT ._date{font-size: 10px;text-align: right;padding-right: 78px}
.page_VisaPersonalFormT ._mb0{margin-bottom: 0}
.page_VisaPersonalFormT ._sex,._fx_left,._MarriageType{display: inline-block;margin-left: 180px}
.page_VisaPersonalFormT ._sex i,._fx_left i,._MarriageType i{display: inline-block;width: 12px;height: 12px;border: 1px solid #000;margin: 0 5px;font-size: 10px;}
.page_VisaPersonalFormT ._MarriageType{margin-left: 0!important}
.page_VisaPersonalFormT ._sex._yes{float: right}
.page_vpf .normalBtnVpf {color: #fff;width: 90px;height: 30px;background: #E95252;border: 1px solid #E95252;cursor: pointer;border-radius: 15px;}
.page_vpf .hollowFixedBtn {background: #fff;color: #E95252;width: 90px;height: 30px;border: 1px solid #E95252;cursor: pointer;border-radius: 15px;}
.page_vpf .vpf_btn{text-align: center;margin: 10px 0 40px 0;}
.page_vpf .dialog-footer .normalBtn{width: 90px}
.page_vpf .dialog-footer{text-align: center}
._qr{max-width: 793px;min-width: 793px;position: absolute;top: 88px; padding-left: 17px;}
#canvas{position: absolute;top: 100px;}
[v-cloak] {display: none;}
.page_VisaPersonalFormT input:disabled{border: none;background-color: transparent;}
input{outline: none;}
.radio_span input{vertical-align: sub; cursor: pointer;}
</style>
<template>
<div class="page_vpf" style="width:100%;background-color: white;height:auto;" v-cloak v-loading="loading2" element-loading-text="下载中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.1)">
<div class="page_VisaPersonalFormT">
<canvas v-show="dialogVisible" id="canvas"></canvas>
<!-- <div class="_qr">
<label>开启二维码</label>
<el-switch
@change="creatQRCode(1)"
v-model="infoData.PeopleModel.OpenQRCode"
active-color="#13ce66"
inactive-color="#E95252"
active-value="1"
inactive-value="2">
</el-switch>
</div> -->
<div class="_vp_box" style="">
<p class="_tit">日本国入境签证申请书</p>
<div class="_head clearfix">
<div class="_left">此处空白处仅供官方使用</div>
<div class="_right"><p style="margin-top:25px">（照片）</p><p>二寸</p></div>
</div>
<div class="_form">
<p class="_f_name">
<span class="_fn_left">申请人姓（汉字）<input type="text" style="width: 24%;" v-model="infoData.PeopleModel.SurName">名<input style="width: 24.7%;" type="text" v-model="infoData.PeopleModel.Name"></span>
</p>
<p class="_f_name">
<span class="_fn_left"> 姓（英文）<input type="text" style="width: 24%;" v-model="infoData.PeopleModel.ESurName">名<input style="width: 24.7%;" type="text" v-model="infoData.PeopleModel.EName"></span>
</p>
<p style="">
<span>出生日期<input style="width:15%;" type="text" v-model="infoData.PeopleModel.Birthday"></span>
<span>出生地点<input style="width:15%;" type="text" v-model="infoData.PeopleModel.BirthdayAddress">省/市</span>
</p>
<p><span>居民身份证号码：<input style="width: 42%;" type="text" v-model="infoData.PeopleModel.IdCard"></span></p>
<p class="_f_sex">
<span class="_fx_left">性别 <span> 男<i v-if="infoData.PeopleModel.Sex!='1'"></i><i v-else>√</i></span><span>女<i v-if="infoData.PeopleModel.Sex!='2'"></i><i v-else>√</i></span>
</span>
</p>
<p><span>现住所：中华人民共和国<input style="width: 7%;" type="text" v-model="infoData.PeopleModel.Address">省/市</span><input style="width: 100%;" type="text" v-model="infoData.PeopleModel.AddressDetail"></p>
<p> <span>住宅电话号码：<input style="width: 35%;" type="text" v-model="infoData.PeopleModel.Tel"></span>移动电话：<input style="width: 100%;" type="text" v-model="infoData.PeopleModel.MobilePhone"></p>
<!-- <p><span>护照类别</span>
<span v-for="Pass in PassportTypeList" class="_mr10 _MarriageType"><span>{{Pass.Name}} <i v-if="Pass.Id==infoData.PeopleModel.PassportType">√</i><i v-else></i></span></span>
</p> -->
<p><span>工作单位（学校）<input style="width:41%;" type="text" v-model="infoData.PeopleModel.UnitName"></span>电话号码：<input style="width:100%;" type="text" v-model="infoData.PeopleModel.UnitPhone"></p>
<p><span>职位：<input style="width:50%;" type="text" v-model="infoData.PeopleModel.UnitPost"></span></p>
<p>紧急联络人（中国国内亲属等）</p>
<p> <span>姓名：<input style="width:40%;" type="text" v-model="infoData.PeopleModel.EmergencyContact"></span><span>与申请人的关系：<input style="width:100%;" type="text" v-model="infoData.PeopleModel.EmergencyRelation"></span></p>
<p> <span>地址：<input style="width:40%;" type="text" v-model="infoData.PeopleModel.EmergencyAddress"></span><span>电话号码：<input style="width:100%;" type="text" v-model="infoData.PeopleModel.EmergencyTel"></span></p>
<p class="">
<span>护照签发地点：<input style="width: 40.3%;" type="text" v-model="infoData.PeopleModel.PassportAddress"></span>
<span>护照号码：<input style="width: 100%;" type="text" v-model="infoData.PeopleModel.PassportNo"></span>
</p>
<p class="">
<span>护照签发日期：<input style="width: 40.3%;" type="text" v-model="infoData.PeopleModel.PassportIssued"></span>
<span>有效期至：<input style="width: 100%;" type="text" v-model="infoData.PeopleModel.PassportExpiry"></span>
</p>
<p>
<span class="_fx_left">犯罪记录：
<span class="radio_span">
<label><input type="radio" value="2" v-model="infoData.PeopleModel.IsCriminalRecord">无</label>
<label><input type="radio" value="1" v-model="infoData.PeopleModel.IsCriminalRecord">有</label>
</span>
<!--<span>
<i v-if="infoData.PeopleModel.IsCriminalRecord!='2'"></i><i v-else>√</i>无</span>
<span><i v-if="infoData.PeopleModel.IsCriminalRecord!='1'"></i><i v-else>√</i>有</span>-->
</span>
</p>
<p class="">
<span>报名旅行社：<input style="width: 40.3%;" type="text" v-model="infoData.PeopleModel.TravelName"></span>
<span>报名日期：<input style="width: 100%;" type="text" v-model="infoData.PeopleModel.Date"></span>
</p>
<p class="">
<span>参团费用：<input style="width: 40.3%;" type="text" v-model="infoData.PeopleModel.TravelCost"></span>人民币
</p>
<p class="">
<span>预定出发日<input style="width: 40.3%;" type="text" v-model="infoData.PlanModel.EnterCountryTime"></span>
<span>预定归国日：<input style="width: 100%;" type="text" v-model="infoData.PlanModel.LeaveCountryTime"></span>
</p>
<p class="">
<span>访问地点：<input disabled style="width: 100%;" type="text" value="日本"></span>
</p>
<p class="">
<span>一同报名参团者（亲属、朋友、同事等）：<input style="width: 100%;" type="text" v-model="infoData.PeopleModel.MutualFriends"></span>
</p>
<p class="">
<span>所持外币：<i style="display: inline-block;width: 12px;height: 12px;border: 1px solid #000;margin: 0 5px;font-size: 10px;">√</i>日元<input style="width: 25%;" type="text" value="50万">日元 </span>
<span><i style="display: inline-block;width: 12px;height: 12px;border: 1px solid #000;margin: 0 5px;font-size: 10px;"></i>美元<input disabled style="width: 27%;" type="text"></span>美元
</p>
<p>
<span class="_fx_left">出境记录：
<span class="radio_span">
<label><input type="radio" value="2" v-model="infoData.PeopleModel.IsDepartureRecord">无</label>
<label><input type="radio" value="1" v-model="infoData.PeopleModel.IsDepartureRecord">有</label>
</span>
<!--<span>
<i v-if="infoData.PeopleModel.IsDepartureRecord!='2'"></i>
<i v-else>√</i>无
</span>
<span>
<i v-if="infoData.PeopleModel.IsDepartureRecord!='1'"></i>
<i v-else>√</i>有</span>-->
<input style="width: 27%;" type="text" v-model="infoData.PeopleModel.LastTime">
停留<input style="width: 10%;" type="text" v-model="infoData.PeopleModel.StayDay">日
国名<input style="width: 100%;" type="text" v-model="infoData.PeopleModel.NCNationality">
</span>
</p>
<p>
<span class="_fx_left">在日亲属：
<span><i>√</i>无<i></i>有</span>
在日亲属姓名：<input disabled style="width: 10%;" type="text" >
关系：<input disabled style="width: 100%;" type="text" >
</span>
</p>
<p> <span>职业：<input disabled style="width:15%;" type="text" ></span><span>住宅电话号码：<input disabled style="width:100%;" type="text"></span></p>
<p> <span>工作单位（学校）：<input disabled style="width:100%;" type="text" ></span></p>
<span>
本人声明以上内容均为事实，并清楚地认识到本人的入境资格、居留期限将在本人到达日本时均由日本移民官员决定。本人清楚地认识到持有签证者在到达日本港口请求入境时，如被发现是属于禁止入境者时，则无权进入日本。
</span>
<p> <span>申请年月日<input style="width:15%;" type="text" v-model="infoData.PeopleModel.Date"></span><span>申请人签名<input style="width:100%;" type="text"></span></p>
</div>
</div>
</div>
<div class="vpf_btn" >
<!-- <button class="normalBtn" type="button" @click="downLoad()"> 下载</button> -->
<button class="hollowFixedBtn" @click="goUrl(url)">返回</button>
<input type="button" class="normalBtnVpf" value="保存" @click="saveFrom" />
<!-- <button class="normalBtn" @click="creatQRCode()">生成电子签名</button> -->
</div>
</div>
</template>
<script>
import QRCode from 'qrcode'
import Vue from "vue"
Vue.use(QRCode)
export default {
data(){
return{
ID:0,
infoData:{
"PeopleModel":{
"Address":"gsda",
"AddressDetail":"gsdafsa",
"Birthday":"2018/08/10",
"Duty":"员工",
"EName":"GSAF",
"ESurName":"GSDSF",
"HistoryRecord":"良好",
"Id":119,
"IdentityType":"身份证",
"IsHightSchool":1,
"IsRecommend":2,
"Marriage":3,
"Name":"二狗",
"NationalityName":"中国",
"Nationality":2,
"PassportAddress":"北京",
"PassportExpiry":"2019/08/31",
"PassportNo":"P324234",
"Remarks":"gsa ",
"Sex":"1",
"SurName":"王",
"VisaPlanId":44,
"PassportType":2,
"Signature":null,
"OpenQRCode":"1",
"PassportIssued":"2018/08/17",
"IdCard":"123213213",
"Tel":"32423423",
"MobilePhone":"213123123",
"UnitName":"哥斯达",
"UnitPhone":"12312314",
"UnitPost":"公司",
"EmergencyAddress":"干撒发生的v",
"EmergencyContact":"vcxba",
"EmergencyRelation":"戈萨德",
"EmergencyTel":"234234",
"TravelCost":233333,
"TravelName":"搞的撒",
"MutualFriends":"公司打法倒萨个",
"IsDepartureRecord":1,
"LastTime":"2018/08",
"NCNationality":"公司",
"Date":"2018/08/17"
},
"PlanModel":{
"ArriveAirName":"东京机场",
"DepartAlCode":"IAC",
"DepartAlName":"测试航空公司",
"DepartFlight":"DDDDD123",
"EnterCountryTime":"2018/02/19",
"LeaveCountryTime":"2018/02/24",
"TotalDay":6
}
},
MarriageType:[],
PassportTypeList:[],
QRCode:false,
dialogVisible:false,
isOpen:false,
QRpath:'',
ok:false,
loading2:false,
url:'',
}
},mounted(){
this.ID = this.$route.query.data
this.ok = this.$route.query.ok
this.url = this.$route.query.url
this.getInfo()
this.getMarriageType()
this.getPassportTypeList()
this.getQR()
},methods:{
goUrl(path){
this.$router.push({ name: path })
},
handleClose(done){
done();
},
creatQRCode(type){
if(type==1){
this.apipost('dmc_post_SetOpenQRCode',{VisaPeopleId:this.ID},res=>{
if(res.data.resultCode==1){
this.$message.success(res.data.message)
}else{
this.$message.error(res.data.message)
}
},err=>{})
}
if(this.infoData.PeopleModel.OpenQRCode=="1"){
this.dialogVisible=true
setTimeout(() => {
let path = this.QRpath
var canvas = document.getElementById('canvas')
QRCode.toCanvas(canvas, path, function (error) {
if (error) console.error(error)
console.log('success!');
})
},1000);
}else{
this.dialogVisible=false
}
},
saveFrom(){
let msg=this.infoData.PeopleModel
this.apipost('dmc_post_visa_SetGroupVisaApplyForInfo',msg,res=>{
if(res.data.resultCode==1){
this.$message.success(res.data.message)
}else{
this.$message.error(res.data.message)
}
},err=>{})
},
// addForm(){
// let msg = {
// Address:this.infoData.PeopleModel.Address==null?'':this.infoData.PeopleModel.Address,
// City:this.infoData.PeopleModel.Address==null?'':this.infoData.PeopleModel.Address,
// Date:this.infoData.PeopleModel.Date==null?'':this.infoData.PeopleModel.Date,
// Email:'',
// HotelAddress:this.infoData.PeopleModel.HotelAddress==null?'':this.infoData.PeopleModel.HotelAddress,
// HotelName:this.infoData.PeopleModel.HotelName==null?'':this.infoData.PeopleModel.HotelName,
// HotelTel:this.infoData.PeopleModel.HotelTel==null?'':this.infoData.PeopleModel.HotelTel,
// Id:this.infoData.PeopleModel.Id,
// IdCard:this.infoData.PeopleModel.IdCard==null?'':this.infoData.PeopleModel.IdCard,
// IssuingAuthority:this.infoData.PeopleModel.IssuingAuthority==null?'':this.infoData.PeopleModel.IssuingAuthority,
// LastTime:this.infoData.PeopleModel.LastTime==null?'':this.infoData.PeopleModel.LastTime,
// MobilePhone:this.infoData.PeopleModel.MobilePhone==null?'':this.infoData.PeopleModel.MobilePhone,
// Name:this.infoData.PeopleModel.SurName==null?'':this.infoData.PeopleModel.SurName,
// Nationality:this.infoData.PeopleModel.Nationality==null?'':this.infoData.PeopleModel.Nationality,
// PassportIssued:this.infoData.PeopleModel.PassportIssued==null?'':this.infoData.PeopleModel.PassportIssued,
// Province:this.infoData.PeopleModel.Address==null?'':this.infoData.PeopleModel.Address,
// Purpose:this.infoData.PeopleModel.Purpose==null?'':this.infoData.PeopleModel.Purpose,
// EName:this.infoData.PeopleModel.EName==null?'':this.infoData.PeopleModel.EName,
// ESurName:this.infoData.PeopleModel.ESurName==null?'':this.infoData.PeopleModel.ESurName,
// SurName:this.infoData.PeopleModel.SurName==null?'':this.infoData.PeopleModel.SurName,
// Tel:this.infoData.PeopleModel.Tel==null?'':this.infoData.PeopleModel.Tel,
// UnitAddress:this.infoData.PeopleModel.UnitAddress==null?'':this.infoData.PeopleModel.UnitAddress,
// UnitName:this.infoData.PeopleModel.UnitName==null?'':this.infoData.PeopleModel.UnitName,
// UnitPhone:this.infoData.PeopleModel.UnitPhone==null?'':this.infoData.PeopleModel.UnitPhone,
// UnitPost:this.infoData.PeopleModel.UnitPost==null?'':this.infoData.PeopleModel.UnitPost,
// VisaPeopleId:this.ID,
// }
// this.apipost('dmc_post_visa_SetVisaApplyForInfo',msg,res=>{
// if(res.data.resultCode==1){
// this.downLoad()
// }else{
// this.$message.error(res.data.message)
// }
// },err=>{})
// },
downLoad(){ // 下载申请材料
this.loading2= true
this.apipost('dmc_get_DownLoadGuestApplicationForm',{VisaPlanId:this.ID},res=>{
if(res.data.resultCode==1){
const link = document.createElement('a');
let _loadUrl=this.domainManager().DomainUrl
let str = window.location.href
link.href = _loadUrl+res.data.data
document.body.appendChild(link);
link.click();
this.$message.success('导出成功！')
this.loading2 = false
}else{
this.loading2 = false
this.$message.error(res.data.message)
}
},err=>{})
},
getQR(){ // 获取二维码
this.apipost('dmc_get_GetPeopleForeignInfo',{VisaPeopleId:this.ID},res=>{
if(res.data.resultCode==1){
this.QRpath = res.data.data
console.log(this.QRpath)
}else{
this.$message.error(res.data.message)
}
},err=>{})
},
getInfo(){ // 获取信息
this.apipost('dmc_get_GetVisaApplyForGrouSignInfo',{VisaPeopleId:this.ID},res=>{
if(res.data.resultCode==1){
this.infoData = res.data.data
// this.infoData.PeopleModel.Birthday = this.infoData.PeopleModel.Birthday.replace('/','年').replace('/','月')
// this.infoData.PeopleModel.Birthday = this.infoData.PeopleModel.Birthday+'日'
this.infoData.PeopleModel.OpenQRCode = this.infoData.PeopleModel.OpenQRCode.toString()
if(this.infoData.PeopleModel.OpenQRCode=='1'){
this.dialogVisible=true
// this.creatQRCode()
}
this.infoData.PeopleModel.Sex = this.infoData.PeopleModel.Sex.toString()
}else{
this.$message.error(res.data.message)
}
},err=>{})
},
getPassportTypeList(){ // 获取护照类别
this.apipost('dmc_get_visa_GetPassportTypeList',{VisaPeopleId:this.ID},res=>{
if(res.data.resultCode==1){
this.PassportTypeList = res.data.data
}else{
this.$message.error(res.data.message)
}
},err=>{})
},
getMarriageType(){//获取婚姻
let msg = {};
this.apipost("dmc_get_visa_GetVisaMarriageTypeEnum",msg,res => {
if(res.data.resultCode==1){
this.MarriageType = res.data.data;
this.MarriageType.forEach(x=>{
x.Id = parseInt(x.Id)
})
}else{
this.$message.error(res.data.message)
}
},err => {});
},
}
}
</script>