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

(function() {
	Vue.component('select-industry', {
		template: `<div class="modal fade" id="selindustry" tabindex="-1" role="dialog" aria-labelledby="selindustryLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header bgc-f9f9f9">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="selindustryLabel">请选择行业</h4>
						</div>
						<div class="modal-body">
							<div class="p15 bgc-fff">
								<ul class="nav nav-tabs" role="tablist" id="industrylist">
									<li role="presentation" class="active">
										<a href="#home" aria-controls="home" role="tab" data-toggle="tab" id="_home">{{industryname}}</a>
									</li>
									<li role="presentation">
										<a href="#direction" aria-controls="direction" role="tab" data-toggle="tab" id="_direction">{{directionname}}</a>
									</li>
								</ul>
								<div class="tab-content industrybox">
									<div role="tabpanel" class="tab-pane active w3-row-padding industry" id="home">
										<div :id="'industry_'+industry.id" class="w3-quarter mb20" v-for="industry in industrys" @click="selectindustry(industry.id,industry.name)">
											<div class="industryname">{{industry.name}}</div>
										</div>
									</div>
									<div role="tabpanel" class="tab-pane  w3-row-padding industry" id="direction">
										<div :id="'direction_'+direction.id" class="w3-quarter mb20" v-for="direction in directions" @click="selectdirection(direction.id,direction.name)">
											<div class="industryname">{{direction.name}}</div>
										</div>
									</div>
								</div>
								<div class="c-t-center">
									<button type="button" class="btn btn-default c-f16 mt20" style="width:144px;" @click="back">取 消</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>`,
		props: ["industryid", "directionid"],
		data: function() {
			return {
				industrys: [{
					id: 0,
					name: "政府科研NGO"
				}, {
					id: 1,
					name: "IT互联网",
					direction: [{
						id: 0,
						name: "开发"
					}, {
						id: 1,
						name: "测试"
					}, {
						id: 2,
						name: "运维/安全"
					}, {
						id: 3,
						name: "硬件"
					}, {
						id: 4,
						name: "产品"
					}, {
						id: 5,
						name: "运营"
					}, {
						id: 6,
						name: "设计"
					}, {
						id: 7,
						name: "编辑/文档"
					}, ]
				}, {
					id: 2,
					name: "文化传媒"
				}, {
					id: 3,
					name: "医疗生物"
				}, {
					id: 4,
					name: "通信"
				}, {
					id: 5,
					name: "金融"
				}, {
					id: 6,
					name: "学生"
				}, {
					id: 7,
					name: "教育培训"
				}, {
					id: 8,
					name: "司法法律"
				}, {
					id: 9,
					name: "房产建筑"
				}, {
					id: 10,
					name: "服务业"
				}, {
					id: 7,
					name: "教育培训"
				}, {
					id: 8,
					name: "司法法律"
				}, {
					id: 9,
					name: "房产建筑"
				}, {
					id: 10,
					name: "服务业"
				}, {
					id: 7,
					name: "教育培训"
				}, {
					id: 8,
					name: "司法法律"
				}, {
					id: 9,
					name: "房产建筑"
				}, {
					id: 10,
					name: "服务业"
				}],
				directions: [],
				industryname:"请选择行业",
				directionname:"请选择方向",
			}
		},
		mounted: function() {
			this.initindustry()
		},
		methods: {
			initindustry: function() {
				var vm = this
				//			getAllIndustry() //获取所有行业
				$("#industry_" + vm.industryid).addClass("selected")
				if(vm.industryid == -1) {
					$('#_direction').parent("li").addClass("hidden")
				} else {
					vm.getDirection(vm.industryid)
				}
			},
			selectindustry: function(id, name) {
				var vm = this
				if(vm.industryid != -1) {
					$("#industry_" + vm.industryid).removeClass("selected")
				}
				$("#industry_" + id).addClass("selected")
				vm.industryid = id
				vm.industryname = name
				if($('#_direction').parent("li").hasClass("hidden")) {
					$('#_direction').parent("li").removeClass("hidden")
				}
				$('#industrylist a[href="#direction"]').tab('show') //转到方向页面
				vm.getDirection(id) //通过id获取方向
			},
			getDirection: function(id) {
				//			getAllDirection() //获取该行业所有方向			
				var vm = this
				vm.directions = vm.industrys[id].direction
			},
			selectdirection: function(id, name) {
				var vm = this
				if(vm.directionid != -1) {
					$("#direction_" + vm.directionid).removeClass("selected")
				}
				$("#direction_" + id).addClass("selected")
				vm.directionid = id
				vm.directionname = name
			},
			back: function() {
				//				var index = top.layer.getFrameIndex(window.name);
				//				top.layer.close(index);
				$('#selindustry').modal('hide')
			},
		},
	})

})()