<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
<meta http-equiv="Access-Control-Allow-Origin" content="*"/>
<link rel="stylesheet" href="css/base.css" type="text/css"/>
<link href="css/login.css" rel="stylesheet" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/flog.css"/>
</head>
<body>
<!--<div class="warp" id="app" @click="mainClick()">-->
<div class="warp" id="app">
<img src="img/logo-2.png" class="logo"/>
<div class="form" id="formdiv">
<div class="intl-tel-input allow-dropdown warpinput">
<div class="flag-container">
<div class="selected-flag" tabindex="0">
<div class="iti-flag" :class="languageData.classname" id="flag_iti"></div>
</div>
</div>
<input type="text" :placeholder="languageData.telplaceholder"
class="country_input" id="country_name" @click="showcountryfn($event)" readonly/>
<img src="img/triangle_3.png" alt="" class="triangle" v-show="!isShowSelect">
<img src="img/select_up.png" alt="" class="triangle" v-show="isShowSelect">
<div class="country-list phone_div" v-show="showcountry" id="country_list">
<input type="text" :placeholder="languageData.country_search" id="flag" @keyup="searchList()"
@click="showList($event)"
class="search_input" style="text-align: left;" v-model="searchValue"/>
<ul id="country_ul">
<li class="country preferred" v-for="item in countryData"
@click="selcountry(item.county,item.classname,item.phoneCo,$event)">
<div class="flag-box">
<div class="iti-flag " :class="item.classname"></div>
</div>
<span class="country-name">{{item.county}}</span>
<span class="dial-code">{{item.phoneCo}}</span>
</li>
</ul>
</div>
</div>
<!--<div class="codediv"><input type="text" class="codeint" /><span><img src="image/code.png" /> </span></div>-->
<div class="btn redbtn ">{{languageData.nextbtn}}</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<script>
var demo = new Vue({
el: '#app',
data: {
getDataUrl: './static/countryJson.json', //存数据接口
languageUrl: './static/language.json', //多语言数据接口,
language: '',
languageData: '',
countryData: '',
telplaceholder: '',
isShowSelect: false,
showcountry: false,
phoneCo: '',
countryDataList: [],
searchValue: '',
county: '',
inputVal: ''
},
created() {
this.getData(),//定义方法
this.getLanguage(),//定义
this.language = this.getBrowserLanguage();
this.getphone();
},
methods: {
getData() {
let that = this;
that.$http({ //调用接口
method: 'GET',
url: this.getDataUrl //this指data
}).then(function (response) { //接口返回数据
this.countryData = response.body[this.language]
}, function (error) {
})
},
//获取多语言
getLanguage() {
let that = this;
that.$http({ //调用接口
method: 'GET',
url: this.languageUrl //this指data
}).then(function (response) { //接口返回数据
this.languageData = response.body[this.language];
let inputval = document.getElementById("country_name");
inputval.value = this.languageData.county
}, function (error) {
})
},
//获取浏览器语言类型
getBrowserLanguage() {
let language;
let result = "";
let l_language = localStorage.getItem("language");
if (!l_language || l_language == '') {
if (navigator.language) {
language = navigator.language;
} else {
language = navigator.browserLanguage;
}
if (language.indexOf("zh-") >= 0) {
//中文
result = "cn";
} else if (language.indexOf("en-") >= 0) {
//英文
result = "en-us";
} else if (language.indexOf("ja-") >= 0) {
//日语
result = "ja";
} else {
result = "en-us";
}
} else {
result = l_language;
}
return result;
},
showcountryfn($event) {
let ele_datalist = document.getElementById("country_list");
ele_datalist.style.display = "block";
let element = window.document.getElementById('flag');
element.focus();
this.showcountry = !this.showcountry;
this.isShowSelect = !this.isShowSelect;
$event.stopPropagation();
},
showList($event) {
$event.stopPropagation();
},
selcountry(county, classname, phoneCo, $event) {
let inputval = document.getElementById("country_name");
inputval.value = county
let ele_class = document.getElementById("flag_iti");
ele_class.setAttribute("class", "iti-flag " + classname + "");
country_code = phoneCo;
this.showcountry = false;
this.isShowSelect = false;
$event.stopPropagation();
},
getphone() {
let that = this;
that.$http({ //调用接口
method: 'GET',
url: this.getDataUrl //this指data
}).then(function (v) {
if (this.language == 'cn') {
this.countryDataList = v.body.cn;
this.phoneCo = '+86'
} else if (this.language == 'en-us') {
this.countryDataList = v.body.en;
this.phoneCo = '+1'
} else if (this.language == 'ja') {
this.countryDataList = v.body.ja;
this.phoneCo = '+81'
} else if (this.language == 'ko') {
this.countryDataList = v.body.ko;
this.phoneCo = '+82'
} else if (this.language == 'vi') {
this.countryDataList = v.body.vi;
this.phoneCo = '+84'
}
}, function (v) {
});
},
// var ele_key = document.getElementById("flag")
searchList() {
this.showcountry = true;
let val = this.searchValue;
//获取输入框里匹配的数据
let srdata = [];
for (let i = 0; i < this.countryDataList.length; i++) {
if (val.trim().length > 0 && this.countryDataList[i].county.indexOf(val) > -1 || val.trim().length > 0 && this.countryDataList[i].phoneCo.indexOf(val) > -1) {
let ele_datalist = document.getElementById("country_list");
ele_datalist.style.display = "block";
this.showcountry = true;
srdata.push(this.countryDataList[i]);
}
}
//获取到的数据准备追加显示, 前期要做的事情: 清空数据,然后显示数据列表,如果获取到的数据为空,则不显示
let ele_datalist = document.getElementById("country_list");
ele_datalist.style.display = "block";
let ele_ullist = document.getElementById("country_ul");
ele_ullist.style.display = "block";
ele_ullist.innerHTML = "";
if (srdata.length == 0) {
ele_datalist.style.display = "block";
let htm = ""
for (let i = 0; i < this.countryDataList.length; i++) {
htm += '<li class="country preferred" data-code="' + this.countryDataList[i].phoneCo + '">' +
'<div class="flag-box">' +
'<div class="iti-flag ' + this.countryDataList[i].classname + '"></div>' +
'</div>' +
'<span class="country-name">' + this.countryDataList[i].county + '</span>' +
'<span class="dial-code">' + this.countryDataList[i].phoneCo + '</span>'
}
ele_ullist.innerHTML = htm;
let list = document.getElementById("country_ul").getElementsByTagName("li");
let inputval = document.getElementById("country_name");
let flag_iti = document.getElementById("flag_iti");
for (let i = 0; i < list.length; i++) {
list[i].index = i;
list[i].onclick = function () {
this.isShowSelect = false;
c_code = this.attributes["data-code"].nodeValue;
country_code = c_code.split('+')[1];
inputval.value = this.children[1].innerHTML
flag_iti.className = this.children[0].children[0].className;
ele_datalist.style.display = "none";
}
}
}
//将搜索到的数据追加到显示数据列表, 然后每一行加入点击事件, 点击后将数据放入搜索框内, 数据列表隐藏
let self = document.getElementById("country_name");
for (let i = 0; i < srdata.length; i++) {
this.showcountry = true;
let ele_li = document.createElement("li");
let ele_div = document.createElement("div");
let ele_flag = document.createElement("div");
let ele_span = document.createElement("span");
let ele_span1 = document.createElement("span");
ele_li.setAttribute("class", "country");
ele_li.setAttribute("class", "preferred");
ele_li.setAttribute("class", "country");
ele_div.setAttribute("class", "flag-box");
ele_flag.setAttribute("class", "iti-flag " + srdata[i].classname + "");
ele_span.setAttribute("class", "country-name")
ele_span1.setAttribute("class", "dial-code");
ele_span.textContent = srdata[i].county;
ele_span1.textContent = srdata[i].phoneCo;
ele_li.onclick = function () {
this.isShowSelect = false;
// this.inputVal = this.getElementsByClassName('country-name')[0].innerHTML;
self.value = this.getElementsByClassName('country-name')[0].innerHTML;
var ele_class = document.getElementById("flag_iti");
ele_class.setAttribute("class", this.children[0].children[0].className);
ele_datalist.style.display = "none";
}
ele_li.appendChild(ele_div);
ele_li.appendChild(ele_span);
ele_li.appendChild(ele_span1);
ele_div.appendChild(ele_flag);
ele_ullist.appendChild(ele_li);
}
}
}
})
/*
* *github地址是https://github.com/jiuyuetian007/vueSelectInput
*/
</script>
</html>