npm安装
--
index.html引入文件
<link rel="stylesheet" href="static/iosSelect.css">
<script type="text/javascript" src="static/iosSelect.js"></script>
<template>
<div class="menu-container" ref="menuContainer">
<div class="referen-btn">保存</div>
<div class="contents">
<div class="userdatum-info">
<label for="">店铺名称</label>
<input type="text" placeholder="请填写店铺名称">
</div>
<div class="userdatum-info userdatum-info-next" @click.stop="changeMastDisplay('mastuserdatum')">
<label for="">所属行业</label>
<input type="text" placeholder="请填写所属行业">
</div>
<div class="userdatum-info" @click="initIosSelect">
<label for="">所属区域</label>
<input type="hidden" ref="contact_province_code" name="contact_province_code" data-id="0001" id="contact_province_code" value="" data-province-name="">
<input type="hidden" ref="contact_city_code" name="contact_city_code" id="contact_city_code" value="" data-city-name="">
<span ref="show_contact" data-city-code="52" data-province-code="2" data-district-code="50" id="show_contact">北京 北京 东城区</span>
</div>
<div class="userdatum-info">
<label for="">详细地址</label>
<input type="text" placeholder="请填写详细地址">
</div>
<div class="userdatum-info">
<label for="">联系人</label>
<input type="text" placeholder="请填写联系人">
</div>
<div class="userdatum-info">
<label for="">手机</label>
<input type="text" placeholder="请填写手机">
</div>
<div class="userdatum-info">
<label for="">邮箱</label>
<input type="text" placeholder="请填写邮箱">
</div>
</div>
</div>
</template>
<script>
export default {
name: 'UserDatum',
data () {
return {
iosProvinces:[],
iosCitys:[],
iosCountys:[]
}
},
methods: {
topath: function (name) {
this.$router.push({path:name});
},
changeMastDisplay: function (name) {
this.$store.commit('mastdisplay',name);
},
initIosSelect: function () {
let showContactDom = this.$refs.show_contact;
let contactProvinceCodeDom = this.$refs.contact_province_code;
let contactCityCodeDom = this.$refs.contact_city_code;
let sccode = showContactDom.getAttribute('data-city-code');
let scname = showContactDom.getAttribute('data-city-name');
let oneLevelId = showContactDom.getAttribute('data-province-code');
let twoLevelId = showContactDom.getAttribute('data-city-code');
let threeLevelId = showContactDom.getAttribute('data-district-code');
let iosSelect = new IosSelect(3,
[this.iosProvinces, this.iosCitys, this.iosCountys],
{
itemHeight: 35,
itemShowCount: 5,
relation: [1, 1],
oneLevelId: oneLevelId,
twoLevelId: twoLevelId,
threeLevelId: threeLevelId,
callback: function (selectOneObj, selectTwoObj, selectThreeObj) {
contactProvinceCodeDom.value = selectOneObj.id;
contactProvinceCodeDom.setAttribute('data-province-name', selectOneObj.value);
contactCityCodeDom.value = selectTwoObj.id;
contactCityCodeDom.setAttribute('data-city-name', selectTwoObj.value);
showContactDom.setAttribute('data-province-code', selectOneObj.id);
showContactDom.setAttribute('data-city-code', selectTwoObj.id);
showContactDom.setAttribute('data-district-code', selectThreeObj.id);
showContactDom.innerHTML = selectOneObj.value + ' ' + selectTwoObj.value + ' ' + selectThreeObj.value;
}
});
},
getareadata: function () {
this.API.getareadata().then((response) => {
response.filter((item,index) => {
let area = {
parentId:item.region_type,
id:item.region_id,
value:item.region_name,
...item
};
if(item.parent_id == 1){
this.iosProvinces.push(area);
}else if(item.parent_id == 2){
this.iosCitys.push(area);
}else if(item.parent_id == 3){
this.iosCountys.push(area);
}
});
}, (response) => {
mui.toast('网络错误');
});
}
},
components: {
},
computed: {
},
created: function () {
this.getareadata();
}
}
</script>
<style scoped>
*{
margin: 0;
padding: 0;
font-size: 14px;
font-family: "微软雅黑";
color: #333;
}
.menu-container{
background: #eee;
}
.contents{
margin-top: 44px;
position: relative;
padding: 0;
}
.userdatum-info{
height: 44px;
line-height: 44px;
padding: 0px 10px;
background: #fff;
border-bottom: 1px solid #e7e7e7;
position: relative;
}
.userdatum-info label, .userdatum-info input{
float: left;
margin: 0;
padding: 0;
}
.userdatum-info:after{
content: "";
display: block;
width: 0;
height: 0;
visibility: hidden;
clear: both;
}
.userdatum-info label{
width: 20%;
}
.userdatum-info input{
width: 80%;
border: none;
height: 43px;
line-height: 44px;
text-align: right;
}
.userdatum-info-next input{
padding-right: 15px;
background: url("../../../../assets/right-arrow.png") no-repeat right center;
}
.userdatum-info #show_contact{
position: absolute;
right: 10px;
top: 0px;
height: 44px;
line-height: 44px;
width: 80%;
text-align: right;
color: #666;
}
.referen-btn{
position: absolute;
top: 0;
right: 0;
width: 44px;
height: 44px;
text-align: center;
color: #fff;
font-size: 14px;
z-index: 10001;
line-height: 44px;
}
</style>