shengqingqixie-wechat/pages/index/directory.vue

<template>
	<view style="background-color: #EBF4F7;letter-spacing: 1rpx;min-height: 100vh">
		<tn-nav-bar :isBack="false" backTitle="" :bottomShadow="true" backgroundColor="#FFFFFF">
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
				<view class="tn-margin-top"
					style=";text-shadow:  1rpx 0 0 #FFF, 0 1rpx 0 #FFF, -1rpx 0 0 #FFF , 0 -1rpx 0 #FFF;">

					<tn-tabs :list="[{name:'通讯录'}]" :current="topCurrent" activeColor="#000" :bold="false"
						:fontSize="36"></tn-tabs>
				</view>
			</view>
		</tn-nav-bar>
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<view class="tn-flex tn-flex-center tn-flex-col-center" @click="openMode" style="padding: 30rpx;">
				<view>
					<text v-if="tabbarIndex == 0" style="font-size: 34rpx;font-weight: 600;">所属行业</text>
					<text v-if="tabbarIndex == 1" style="font-size: 34rpx;font-weight: 600;">所属区域</text>
					<text v-if="tabbarIndex == 2" style="font-size: 34rpx;font-weight: 600;">组织架构</text>
					<text class="tn-icon-down-triangle" style="margin-left: 10rpx;"></text>
				</view>
				<view style="margin-left: 10rpx;">
					<view v-if="!isSerach">{{ tabRightInfo.name }}</view>
					<view v-if="isSerach">全部</view>
				</view>
			</view>
			<view class="tn-flex tn-flex-row-between tn-flex-col-center" style="padding: 20rpx;">
				<view class="justify-content-item align-content-item" style="width: 100%;">
					<view class="tn-flex tn-flex-col-center"
						style="border-radius: 100rpx;padding: 10rpx 20rpx 10rpx 20rpx;width: 98%;background-color: #ffffff;">
						<text
							class="tn-icon-search justify-content-item tn-padding-right-xs tn-color-gray tn-text-lg"></text>
						<input v-model="serach_content" class="justify-content-item" placeholder="输入想要搜索的内容"
							name="input" placeholder-style="color:#AAAAAA" style="width: 90%;"></input>
					</view>
				</view>
				<view class="align-content-item">
					<view class="justify-content-item tn-text-center">
						<tn-button @click="serach_do" backgroundColor="#ffffff" shape="round" padding="20rpx 20rpx"
							width="120rpx">
							<text class="tn-color-black">搜索</text>
						</tn-button>
					</view>
				</view>
			</view>
			<template v-for="(item,index) in list">
				<view v-if="item.neirong">
					<view class="tn-flex tn-flex-center tn-flex-col-center tn-flex-row-center"
						style="margin-top: 20rpx;">
						<view style="background: #d9d9d980;height: 3rpx;width: 35%;"></view>
						<view style="margin: 0rpx 30rpx;font-size: 32rpx;">{{ item.position_name }}</view>
						<view style="background: #d9d9d980;height: 3rpx;width: 35%;"></view>
					</view>
					<view v-for="(v,k) in item.neirong" @click="tn('/pages/index/my_card?id='+v.member_id)"
						style="padding-left: 20rpx;"
						class="tn-classify__content__sub-classify__content__item tn-flex tn-flex-center  tn-flex-col-center">
						<view style="width: 100rpx;height: 100rpx">
							<image :src="apiImgUrl+v.photo_image"
								style="width: 100rpx;height: 100rpx;border-radius:50%;">
							</image>
						</view>
						<view style="margin-left: 20rpx;">
							<view style="font-size: 28rpx;">
								<text>{{ v.nikename }}</text>
							</view>
							<view class="tn-text-ellipsis-2" style="font-size: 24rpx;margin-top: 10rpx;">
								<text>{{ v.enterprise_name }}</text>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
		<tn-popup v-model="screenMode" mode="bottom" width="100%" height="100%" :customStyle="{position: 'fixed'}">
			<tn-nav-bar :isBack="false" backTitle="" :bottomShadow="true" backgroundColor="#FFFFFF">
				<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
					<view class="tn-margin-top"
						style=";text-shadow:  1rpx 0 0 #FFF, 0 1rpx 0 #FFF, -1rpx 0 0 #FFF , 0 -1rpx 0 #FFF;">

						<tn-tabs :list="[{name:'通讯录'}]" :current="topCurrent" activeColor="#000" :bold="false"
							:fontSize="36"></tn-tabs>
					</view>
				</view>
			</tn-nav-bar>
			<view style="background: #EBF4F7;height: 100%;">
				<view :style="{paddingTop: vuex_custom_bar_height +'px'}"></view>
				<view class="tn-flex">
					<view style="width: 400rpx;">
						<view v-for="(item,index) in tabList" @click="tabbarIndexCur(index)"
							class="tn-flex  tn-flex-col-center"
							:style="{'background-color': tabbarIndex==index?'#ffffff':'transparent',padding:'20rpx 0rpx'}">
							<view :class="tabbarIndex==index?'actBackground':''"
								style="height: 50rpx;width: 15rpx;border-radius: 0px 10rpx 10rpx 0px;">
							</view>
							<view
								:style="{'margin-left':' 20rpx','color':tabbarIndex==index?'#3f8bf2':'#000000','font-size':'30rpx'}">
								{{ item }}
							</view>
						</view>
					</view>
					<view style="background-color: #ffffff;width: 100%;max-height: 1300rpx;overflow: scroll">
						<template v-for="(item,index) in tabRightList">
							<view class="tn-flex tn-flex-col-center" style="padding:20rpx 0rpx;"
								@click="tabRightListCur(index)">
								<view :class="tabRightIndex==index?'actBackground':''"
									style="height: 50rpx;width: 15rpx;border-radius: 0px 10rpx 10rpx 0px;">
								</view>
								<view
									:style="{'margin-left': '30rpx','color':tabRightIndex==index? '#3f8bf2':'#000000','font-size':'30rpx'}">
									{{ item.name }}
								</view>
							</view>
							<view v-if="index<tabRightList.length-1"
								style="width: 100%;background: #d9d9d9cc;height: 1rpx;margin-left: 40rpx"></view>
						</template>
					</view>
				</view>
				<view class="tn-flex tn-flex-row-around" style="position: fixed;bottom: 100rpx;width: 100%;">
					<tn-button @click="delMode" width="330rpx" height="80rpx" backgroundColor="#ffffff"
						fontColor="#000000">取消
					</tn-button>
					<tn-button @click="serach_do" width="330rpx" height="80rpx" backgroundColor="#3f8bf2"
						fontColor="#ffffff">筛选
					</tn-button>
				</view>
			</view>
		</tn-popup>
	</view>
</template>

<script>
	import {
		addressList,
		getPosition,
		newIndustryIndex,
		getRegion
	} from '@/util/api.js';
	import store from "@/store";

	export default {
		data() {
			return {
				screenMode: false,
				serach_content: '',
				list: [],
				tabList: ['所属行业', '所属区域', '组织架构'],
				topCurrent: 0,
				tabbarIndex: 0,
				apiImgUrl: this.$store.state.imgUrl,
				industry_list: [],
				leftId: 0,
				selectShow: false,
				HomeTitle: '',
				selectList: [],
				gid: store.state.Gid,
				top: 0,
				tabRightList: '',
				tabRightIndex: 0,
				tabRightInfo: {},
				isSerach: false,
			}
		},
		mounted() {
			// console.log(d.id);
			// if (typeof(d.id) != 'undefined') {
			// 	this.gid = d.id;
			// }
			this.loadTabData();
		},
		methods: {
			async loadTabData() {
				if (this.tabbarIndex === 0) {
					await this.getIndustryList();
				}
				if (this.tabbarIndex === 1) {
					await this.getRegionList();
				}
				if (this.tabbarIndex === 2) {
					await this.getPositionList();
				}
				console.log(this.tabRightInfo);
				this.getAddressList();
			},
			openMode() {
				uni.$emit('showTab', {
					index: false
				})
				this.screenMode = true;
			},
			delMode() {
				uni.$emit('showTab', {
					index: true
				})
				this.screenMode = false;
			},
			serach_do() {
				this.list = [];
				this.isSerach = false;
				this.serach_content = '';
				this.getAddressList();
			},
			getAddressList() {
				var industry_id = 0;
				var position_id = 0;
				var region_id = 0;
				if (this.serach_content == '') {
					this.isSerach = false;
					if (this.tabbarIndex == 0) {
						industry_id = this.tabRightInfo.id;
					} else if (this.tabbarIndex == 1) {
						region_id = this.tabRightInfo.id;
					} else {
						position_id = this.tabRightInfo.id;
					}
				} else {
					this.isSerach = true;
					industry_id = 0;
					position_id = 0;
					region_id = 0;
				}
				addressList({
						association_id: this.gid,
						industry_id: industry_id,
						position_id: position_id,
						region_id: region_id,
						nikename: this.serach_content,
					})
					.then(res => {
						console.log(res);
						if (res.code == 1) {
							this.list = res.data.ret;
						}
						this.delMode();
					})
					.catch(error => {
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
					})
			},
			tabbarIndexCur(d) {
				this.tabRightIndex = 0;
				this.tabbarIndex = d;
				if (d == 0) {
					this.getIndustryList();
				}
				if (d == 1) {
					this.getRegionList();
				}
				if (d == 2) {
					this.getPositionList();
				}
			},
			tabRightListCur(d) {
				this.tabRightIndex = d;
				this.tabRightInfo = this.tabRightList[d];
			},
			confirm(d) {
				var info = d[0];
				this.list = [];
				this.gid = info.value;
				this.getIndustryList();
			},
			getRegionList() {
				return new Promise((resolve, reject) => {
					getRegion({
							association_id: this.gid
						})
						.then(res => {
							if (res.code == 1) {
								var key = res.data;
								var transformedSelectList = key.map(item => ({
									id: item.id,
									name: item.region_name
								}));
								transformedSelectList.unshift({
									id: 0,
									name: '全部'
								});
								this.tabRightList = transformedSelectList;
							}
							resolve(); // 当操作成功时调用resolve
						})
						.catch(error => {
							uni.showToast({
								title: error,
								icon: 'none',
								duration: 2000
							});
						})
				})

			},
			getPositionList() {
				return new Promise((resolve, reject) => {
					getPosition({
							association_id: this.gid
						})
						.then(res => {
							if (res.code == 1) {
								var key = res.data;
								var transformedSelectList = key.map(item => ({
									id: item.id,
									name: item.position_name
								}));
								transformedSelectList.unshift({
									id: 0,
									name: '全部'
								});
								this.tabRightList = transformedSelectList;
							}
							resolve(); // 当操作成功时调用resolve
						})
						.catch(error => {
							uni.showToast({
								title: error,
								icon: 'none',
								duration: 2000
							});
						})
				})

			},
			onload() {
				//this.tabbarIndex = 0;
				//this.gid = store.state.Gid;
				//this.getIndustryList();
				//this.getAddressList();
				//this.getAssociationIndex();
			},
			getIndustryList() {
				return new Promise((resolve, reject) => {
					newIndustryIndex({
							association_id: this.gid
						})
						.then(res => {
							console.log(res);
							if (res.code == 1) {
								var key = res.data;
								key.push({
									id: 0,
									industry_name: '其他行业'
								});
								var transformedSelectList = key.map(item => ({
									id: item.id,
									name: item.industry_name
								}));
								transformedSelectList.unshift({
									id: 0,
									name: '全部'
								});
								this.tabRightList = transformedSelectList;
								this.tabRightInfo = transformedSelectList[0];

							}
							resolve(); // 当操作成功时调用resolve
						})
						.catch(error => {
							uni.showToast({
								title: error,
								icon: 'none',
								duration: 2000
							});
						})
				})

			},
			tn(url) {
				uni.navigateTo({
					url: url
				})
			},
			goBack() {
				if (getCurrentPages().length > 1) {
					uni.navigateBack()
				} else {
					uni.redirectTo({
						url: '/pages/index/index'
					})

				}
			}
		}
	}
</script>


<style lang="scss" scoped>
	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			margin: auto 30rpx;
			margin-right: 10rpx;
			flex-basis: 5%;
			width: 100rpx;
			position: absolute;
		}
	}


	.left-width {
		flex-basis: 28%;
	}

	/* 自定义导航栏内容 end */
	.tn-classify {

		/* 搜索栏 start */


		/* 搜索栏 end */

		/* 分类列表和内容 strat */
		&__container {}

		&__left-box {}

		&__right-box {
			background-color: #FFFFFF;
		}

		/* 分类列表和内容 end */

		/* 侧边导航 start */
		&__tabbar {
			&__item {
				height: 90rpx;

				&:first-child {
					border-top-right-radius: 0rpx;
				}

				&:last-child {
					border-bottom-right-radius: 0rpx;
				}

				&--active {
					background-color: #FFFFFF;
					position: relative;
					// font-weight: bold;
					color: #4AA2EF;

					&--prev {
						border-bottom-right-radius: 26rpx;
					}

					&--next {
						border-top-right-radius: 26rpx;
					}
				}
			}
		}

		/* 侧边导航 end */

		/* 分类内容 start */
		&__content {
			margin: 18rpx;

			/* 推荐商品 start */
			&__recomm {
				margin-bottom: 40rpx;

				&__swiper {}
			}

			/* 推荐商品 end */

			/* 子栏目 start */
			&__sub-classify {
				margin-bottom: 20rpx;
				padding-bottom: 40rpx;

				&--title {
					font-weight: bold;
					margin-bottom: 18rpx;

				}

				&__content {

					&__item {
						padding: 20rpx;
					}
				}
			}

			/* 子栏目 end */
		}

		/* 分类内容 end */
	}

	.actBackground {
		background: #3f8bf2
	}
</style>