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

(function() {
	Vue.component('selsect-address', {
		template: `<div class="dropdown">
						<a id="addressLabel" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
							<input id="addrcode" placeholder="请选择家庭住址" type="text" class="form-control c-323232" name="addrcode"><span class="caret selcaret"></span>
						</a>
						<div class="bgc-fff dropdown-menu dropdown-menu-right" aria-labelledby="addressLabel" style="width:308px;" id="dropdown-address">
						<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 class="w3-third mb20" v-for="city in cities" @click="selectCi(city.id,city.name)">
									<div :id="city.id" style="padding: 5px 13px 3px;">{{city.name}}</div>
								</div>
							</div>
							<div role="tabpanel" class="tab-pane w3-row-padding industry" id="county" data-stopPropagation="true">
								<div  class="w3-third mb20" v-for="county in counties" @click="selectCo(county.id,county.name)">
									<div :id="county.id" style="padding: 5px 13px 3px;">{{county.name}}</div>
								</div>
							</div>
						</div>
					</div>`,
		props: [],
		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
					},
				],
				"address": '',
				"cities": [],
				"counties": [],
				"cityid": -1,
				"countyid": -1,
				"provinceid": -1,
				"cityname": "城市",
				"countyname": "县区",
				"provincename": "省份",
			}
		},
		mounted: function() {
			this.initinfo()
			$(".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: {
			initinfo: function() {
				var vm = this;
				var loginInfo = JSON.parse(sessionStorage.getItem("oauthInfo"));
				var data1 = {
					userName: loginInfo.user,
					token: loginInfo.accessToken
				}
				loginAPI.getUserInfo(data1).then(function(res) {
					vm.userinfo = res
					if(vm.userinfo.provinceId != 0) {
						//						vm.provinceid = vm.userinfo.provinceId
						//						vm.cityid = vm.userinfo.cityId
						//						vm.countyid = vm.userinfo.areaId
						//						vm.provincename = vm.userinfo.provinceName
						//						vm.cityname = vm.userinfo.cityName
						//						vm.countyname = vm.userinfo.areaName
						vm.selectP(vm.userinfo.provinceId, vm.userinfo.provinceName)
						setTimeout(function() {
							vm.selectCi(vm.userinfo.cityId, vm.userinfo.cityName)
						}, 1000)
						setTimeout(function() {
							vm.selectCo(vm.userinfo.areaId, vm.userinfo.areaName)
						}, 2000)
					}
				})
			},
			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,
								}
							})
						}
					}
				})
			},
			selectP: function(id, name) {
				var vm = this
				$("#" + id).addClass("active")
				if(vm.provinceid != -1) {
					$("#" + vm.provinceid).removeClass("active")
				}
				vm.initcity()
				vm.initcounty()
				vm.provinceid = id
				vm.provincename = name
				vm.getAddress(id, true)
				$('#addresslist a[href="#city"]').tab('show')
				vm.addAddress()
			},
			selectCi: function(id, name) {
				var vm = this
				$("#" + vm.cityid).removeClass("active")
				vm.initcounty()
				$("#" + id).addClass("active")
				vm.cityid = id
				vm.cityname = name
				vm.getAddress(id, false)
				$('#addresslist a[href="#county"]').tab('show')
				vm.addAddress()
			},
			selectCo: function(id, name) {
				var vm = this
				$("#" + vm.countyid).removeClass("active")
				$("#" + id).addClass("active")
				vm.countyid = id
				vm.countyname = name
				vm.addAddress()
			},
			initcity: function() {
				var vm = this
				$("#" + vm.cityid).removeClass("active")
				vm.cityid = 0
				vm.cityname = "城市"
			},
			initcounty: function() {
				var vm = this
				$("#" + vm.countyid).removeClass("active")
				vm.countyid = 0
				vm.countyname = "县区"
			},
			addAddress: function() {
				var vm = this
				var address = ''
				if(vm.provincename != "省市") {
					address += vm.provincename
					if(vm.cityname != "城市") {
						address += vm.cityname
						if(vm.countyname != "县区") {
							address += vm.countyname
						}
					}
				}
				$("#addrcode").val(address)
			}
		},
	})

})()