sr-publicServicePlatform/component/mine/select-address.js

(function() {
	Vue.component('selsect-address', {
		template: `<div class="bgc-fff dropdown-menu dropdown-menu-right" aria-labelledby="addressLabel" style="width:308px;">
						<ul class="nav nav-tabs" role="tablist" id="addresslist">
							<li role="presentation" class="active" style="width:102px;">
								<a href="#province" aria-controls="province" role="tab" data-toggle="tab" id="_province" data-stopPropagation="true">{{provincename}}</a>
							</li>
							<li role="presentation" style="width:102px;">
								<a href="#city" aria-controls="city" role="tab" data-toggle="tab" id="_city" data-stopPropagation="true">{{cityname}}</a>
							</li>
							<li role="presentation" style="width:102px;">
								<a href="#county" aria-controls="county" role="tab" data-toggle="tab" id="_county" data-stopPropagation="true">{{countyname}}</a>
							</li>
						</ul>
						<div class="tab-content industrybox" style="height: auto">
							<div role="tabpanel" class="tab-pane active industry c-t-left" id="province" data-stopPropagation="true">
								<div class="w3-row mt10">
									<div class="w3-col c-f16 pl10" style="width:50px;">A-G</div>
									<div class="w3-rest c-f14 c-666">
										<span :id="province.id" v-for="province in province1" @click="selectP(province.id,province.name)">{{province.name}}</span>
									</div>
								</div>
								<div class="w3-row mt10">
									<div class="w3-col c-f16 pl10" style="width:50px;">H-J</div>
									<div class="w3-rest c-f140 c-666">
										<span :id="province.id" v-for="province in province2" @click="selectP(province.id,province.name)">{{province.name}}</span>
									</div>
								</div>
								<div class="w3-row mt10">
									<div class="w3-col c-f16 pl10" style="width:50px;">L-S</div>
									<div class="w3-rest c-f14 c-666">
										<span :id="province.id" v-for="province in province3" @click="selectP(province.id,province.name)">{{province.name}}</span>
									</div>
								</div>
								<div class="w3-row mt10">
									<div class="w3-col c-f16 pl10" style="width:50px;">T-Z</div>
									<div class="w3-rest c-f14 c-666">
										<span :id="province.id" v-for="province in province4" @click="selectP(province.id,province.name)">{{province.name}}</span>
									</div>
								</div>
							</div>
							<div role="tabpanel" class="tab-pane w3-row-padding industry" id="city" data-stopPropagation="true">
								<div :id="city.id" class="w3-third mb20" v-for="city in cities" @click="selectCi(city.id,city.name)">
									<div>{{city.name}}</div>
								</div>
							</div>
							<div role="tabpanel" class="tab-pane w3-row-padding industry" id="county" data-stopPropagation="true">
								<div :id="county.id" class="w3-third mb20" v-for="county in counties" @click="selectCo(county.id,county.name)">
									<div>{{county.name}}</div>
								</div>
							</div>
						</div>
					</div>`,
		props: ["userinfo"],
		data: function() {
			return {
				"province1": [{
						id: 340000,
						abbreviation:"",
						level: 1,
						name:"安徽",
						pid: 156,
						postCode: null
					},
					{
						id: 820000,
						abbreviation:"",
						level: 1,
						name:"澳门",
						pid: 156,
						postCode: null
					},
					{
						id: 110000,
						abbreviation:"",
						level: 1,
						name:"北京",
						pid: 156,
						postCode: null
					},
					{
						id: 500000,
						abbreviation:"",
						level: 1,
						name:"重庆",
						pid: 156,
						postCode: null
					},
					{
						id: 350000,
						abbreviation:"",
						level: 1,
						name: "福建",
						pid: 156,
						postCode: null
					},
					{
						id: 440000,
						abbreviation:"",
						level: 1,
						name:"广东",
						pid: 156,
						postCode: null
					},
					{
						id: 450000,
						abbreviation:"",
						level: 1,
						name:"广西",
						pid: 156,
						postCode: null
					},
					{
						id: 520000,
						abbreviation:"",
						level: 1,
						name:"贵州",
						pid: 156,
						postCode: null
					},
					{
						id: 620000,
						abbreviation:"",
						level: 1,
						name:"甘肃",
						pid: 156,
						postCode: null
					},
				],
				"province2": [{
						id: 420000,
						abbreviation:"",
						level: 1,
						name:"湖北",
						pid: 156,
						postCode: null
					},
					{
						id: 230000,
						abbreviation:"",
						level: 1,
						name:"黑龙江",
						pid: 156,
						postCode: null
					},
					{
						id: 410000,
						abbreviation:"",
						level: 1,
						name: "河南",
						pid: 156,
						postCode: null
					},
					{
						id: 430000,
						abbreviation:"",
						level: 1,
						name:"湖南",
						pid: 156,
						postCode: null
					},
					{
						id: 460000,
						abbreviation:"",
						level: 1,
						name:"海南",
						pid: 156,
						postCode: null
					},
					{
						id: 130000,
						abbreviation:"",
						level: 1,
						name:"河北",
						pid: 156,
						postCode: null
					},
					{
						id: 220000,
						abbreviation:"",
						level: 1,
						name:"吉林",
						pid: 156,
						postCode: null
					},
					{
						id: 320000,
						abbreviation:"",
						level: 1,
						name:"江苏",
						pid: 156,
						postCode: null
					},
					{
						id: 360000,
						abbreviation:"",
						level: 1,
						name:"江西",
						pid: 156,
						postCode: null
					},
				],
				"province3": [{
						id: 210000,
						abbreviation:"",
						level: 1,
						name:"辽宁",
						pid: 156,
						postCode: null
					},
					{
						id: 140000,
						abbreviation:"",
						level: 1,
						name:"山西",
						pid: 156,
						postCode: null
					},
					{
						id: 640000,
						abbreviation:"",
						level: 1,
						name:"宁夏",
						pid: 156,
						postCode: null
					},
					{
						id: 150000,
						abbreviation:"",
						level: 1,
						name:"内蒙古",
						pid: 156,
						postCode: null
					}, {
						id: 630000,
						abbreviation:"",
						level: 1,
						name:"青海",
						pid: 156,
						postCode: null
					},
					{
						id: 370000,
						abbreviation:"",
						level: 1,
						name:"山东",
						pid: 156,
						postCode: null
					},
					{
						id: 310000,
						abbreviation:"",
						level: 1,
						name:"上海",
						pid: 156,
						postCode: null
					},
					{
						id: 510000,
						abbreviation:"",
						level: 1,
						name:"四川",
						pid: 156,
						postCode: null
					},
					{
						id: 610000,
						abbreviation:"",
						level: 1,
						name:"陕西",
						pid: 156,
						postCode: null
					},
				],
				"province4": [{
						id: 120000,
						abbreviation:"",
						level: 1,
						name:"天津",
						pid: 156,
						postCode: null
					},
					{
						id: 710000,
						abbreviation:"",
						level: 1,
						name:"台湾",
						pid: 156,
						postCode: null
					},
					{
						id: 540000,
						abbreviation:"",
						level: 1,
						name:"西藏",
						pid: 156,
						postCode: null
					},
					{
						id: 650000,
						abbreviation:"",
						level: 1,
						name:"新疆",
						pid: 156,
						postCode: null
					},
					{
						id: 810000,
						abbreviation:"",
						level: 1,
						name:"香港",
						pid: 156,
						postCode: null
					},
					{
						id: 530000,
						abbreviation:"",
						level: 1,
						name:"云南",
						pid: 156,
						postCode: null
					},
					{
						id: 330000,
						abbreviation:"",
						level: 1,
						name:"浙江",
						pid: 156,
						postCode: null
					},
				],
				"cities": [],
				"counties": [],
				"cityid": -1,
				"countyid": -1,
				"provinceid": -1,
				"cityname": "城市",
				"countyname": "县区",
				"provincename": "省份",
			}
		},
		mounted: function() {		
			$(".dropdown-menu").on("click", "[data-stopPropagation]", function(e) {
				e.stopPropagation();
				var tabid = e.currentTarget.id //js控制标签页
				var bbb=tabid.indexOf("_") 
				if(tabid.indexOf("_") > -1) {
					$('#' + tabid).tab('show')
				}
			});
		},
		methods: {
			selectP: function(id, name) {
				var vm = this
				$("#" + id).addClass("active")
				if(vm.provinceid != -1) {
					$("#" + vm.provinceid).removeClass("active")
				}
				vm.provinceid = id
				vm.provincename = name
				vm.getAddress(id, true)
				$('#addresslist a[href="#city"]').tab('show')
			},
			getAddress: function(id, iscity) {
				var vm = this
				mineAPI.addressGet(id).then(function(res) {
					if(res) {
						if(iscity) {
							vm.cities = res.map(function(res) {
								return {
									id: res.id,
									name: res.name,
								}
							})
						} else {
							vm.Counties = res.map(function(res) {
								return {
									id: res.id,
									name:res.name,
								}
							})
						}
					}
				})
			},
			selectC: function(id, name) {
				var vm = this
				$("#" + id).addClass("active")
				vm.countyid = id
				vm.countyname = name
				vm.getAddress(id, false)
				$('#addresslist a[href="#county"]').tab('show')
			},
		},
	})

})()