ChuangHengWx/pagesPublish/industry.vue

<template>
	<view class="default_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='选择行业'></cus-header>
		<view class="data adf">
			<view class="data-left">
				<view class="data-left-item" :class="{'active':findex===index}" @click="selectFirstType(item,index)"
					v-for="(item,index) in firstList" :key="index">{{item.name}}</view>
				<!-- <view class="data-left-item" @click="handleAdd(1)">自定义</view> -->
			</view>
			<view class="data-right">
				<view class="data-right-item" :class="{'active':item.select}" @click="selectSecondType(item,index)"
					v-for="(item,index) in secondList" :key="index">
						{{item.name}}
						<image :src="imgBase+'icon_selected.png'" v-if="item.select"></image>
					</view>
				<!-- <view class="data-right-item" @click="handleAdd(2)" v-if="firstName">自定义</view> -->
			</view>
		</view>
		<view class="bottom">
			<!-- <view class="bottom-top adfac">
				<view class="bottom-top-left adfac">已选（<text>{{1}}</text>/{{3}}）</view>
				<view class="bottom-top-right">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation="true" :scroll-left="scrollLeft">
						<view class="scroll-view-item_H" :id="'svih_'+index" v-for="(item,index) in selectedList" :key="index">
							<view class="cl_item">
								<text>{{item.name}}</text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view> -->
			<view class="bottom-top adfac">
				已选：<span>{{firstName}}</span><span v-if="secondName" style="margin: 0 10rpx;">-</span><span v-if="secondName">{{secondName}}</span>
			</view>
			<view class="bottom-btns adfacjb">
				<!-- <view class="bottom-btns-btn" @click="clear">清空条件</view> -->
				<view class="zt_btn" @click="confirm">确定</view>
			</view>
		</view>
		<view class="dialog adffc" v-if="show">
			<view class="box">
				<view class="box-top adfac">
					<view class="box-top-btn cancel" @click="show=false">取消</view>
					<view class="box-top-title">其他自定义</view>
					<view class="box-top-btn add" @click="addIndustry">添加</view>
				</view>
				<view class="box-inp">
					<u--input type="text" v-model="name" border="none" fontSize="30rpx" color="#002846" :placeholder="'请输入自定义'+(type==1?'主':'子')+'行业'" clearable></u--input>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				scrollLeft:0,
				findex:'',
				fid:'',
				fpid:'',
				firstName:'',
				secondName:'',
				sid:'',
				spid:'',
				firstList:[
					{
						name:'IT/互联网',
						children:[
							{name:'网络与信息安全'}
						]
					}
				],
				dataMap:new Map(),
				secondList:[],
				selectedList:[],
				show:false,
				name:'',
				type:1,
			}
		},
		onLoad() {
			this.getData()
		},
		methods:{
			getData(){
				this.$api.get('/core/industry/list').then(({data:res})=>{
					if(res.code!==0) return this.$showToast(res.msg)
					this.firstList = res.data;
					this.firstList.forEach((l,i)=>{
						this.$set(this.firstList[i],'select',false)
						this.dataMap.set(l.id,l.children)
					})
				})
			},
			selectFirstType(item,index){
				if(index!==this.findex){
					this.firstName = this.secondName = '';
				}
				this.findex = index;
				this.firstName = item.name;
				this.fid = item.id;
				this.fpid = item.pid;
				this.firstList.forEach((l,i)=>{
					this.$set(this.firstList[i],'select',i===index)
				})
				this.secondList = this.dataMap.get(item.id);
				this.secondList.forEach((l,i)=>{
					this.$set(this.secondList[i],'select',false)
				})
			},
			selectSecondType(item,index){
				this.secondName = item.name;
				this.sid = item.id;
				this.spid = item.pid;
				this.secondList.forEach((l,i)=>{
					this.$set(this.secondList[i],'select',i===index)
				})
			},
			handleAdd(type){
				this.type = type;
				this.show = true;
			},
			clear(){
				this.firstList.forEach((l,i)=>{
					this.$set(this.firstList[i],'select',false)
				})
				this.secondList.forEach((l,i)=>{
					this.$set(this.secondList[i],'select',false)
				})
				this.selectedList = [];
			},
			addIndustry(){
				if(!this.name) return this.$showToast('请输入行业名称')
				this.$api.post('/core/industry',{
					pid:this.type===1?'0':this.fid,
					name:this.name
				}).then(({data:res})=>{
					if(res.code!==0) return this.$showToast(res.msg)
					this.findex = '';
					this.fid = '';
					this.fpid = '';
					this.firstName = '';
					this.sid = '';
					this.spid = '';
					this.secondName = '';
					this.firstList = [];
					this.secondList = [];
					this.name = '';
					this.show = false;
					this.getData()
				})
			},
			confirm(){
				if(this.secondList.length===0&&!this.firstName) return this.$showToast('请选择主行业')
				if(this.secondList.length&&!this.secondName) return this.$showToast(`请选择子行业`)
				const industryId = this.secondList.length?this.sid:this.fid;
				const industryName = this.secondList.length?this.secondName:this.firstName;
				this.getOpenerEventChannel().emit('selectConfirm',{
					industryId,
					industryName
				})
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.default_page{
		box-sizing: border-box;
		.data{
			flex: 1;
			&-left{
				width: 324rpx;
				background: #FFFFFF;
				overflow-y: auto;
				&-item{
					padding: 18rpx 36rpx;
					position: relative;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #002846;
					line-height: 37rpx;
					&.active{
						font-weight: bold;
						color: #009191;
						&::before{
							content: '';
							width: 8rpx;
							height: 64rpx;
							background: #199C9C;
							position: absolute;
							left: 0;
							top: 50%;
							margin-top: -32rpx;
						}
					}
				}
			}
			&-right{
				flex: 1;
				background: #F7F7F7;
				overflow-y: auto;
				&-item{
					padding: 30rpx 100rpx 30rpx 30rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #002846;
					line-height: 37rpx;
					position: relative;
					&.active{
						color: #009191;
					}
					image{
						width: 36rpx;
						height: 36rpx;
						position: absolute;
						right: 30rpx;
						top: 50%;
						margin-top: -18rpx;
					}
				}
			}
		}
		
		.bottom{
			width: 100%;
			height: 290rpx;
			background: #FFFFFF;
			padding: 36rpx 30rpx;
			box-sizing: border-box;
			&-top{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #667E90;
				line-height: 42rpx;
				span{
					color: #002846;
				}
			}
			&-btns{
				margin-top: 50rpx;
				&-btn{
					width: 268rpx;
					height: 88rpx;
					background: #EBF6F6;
					border-radius: 44rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #009191;
					line-height: 88rpx;
					text-align: center;
				}
				.zt_btn{
					// width: calc(100% - 298rpx);
					width: 100%;
				}
			}
		}
		
		.dialog{
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: 1000;
			background: rgba(0, 0, 0, .4);
			.box{
				width: 100%;
				border-radius: 24rpx 24rpx 0 0;
				background: #FFFFFF;
				padding: 36rpx 36rpx 300rpx;
				box-sizing: border-box;
				position: absolute;
				bottom: 0;
				left: 0;
				&-top{
					&-btn{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						line-height: 42rpx;
						width: 80rpx;
						&.cancel{
							color: #002846;
						}
						&.add{
							color: #009191;
							text-align: right;
						}
					}
					&-title{
						flex: 1;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 36rpx;
						color: #002846;
						line-height: 50rpx;
						text-align: center;
					}
				}
				&-inp{
					margin-top: 98rpx;
					padding-bottom: 30rpx;
					border-bottom: 1rpx solid #E2E2E2;
				}
				&-textarea{
					margin-top: 30rpx;
					padding-bottom: 30rpx;
					border-bottom: 1rpx solid #E2E2E2;
				}
			}
		}
	}
</style>