659 lines
17 KiB
Vue
659 lines
17 KiB
Vue
<template>
|
|
<view style="background: #F1F2F8;">
|
|
<tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="#ffffff">
|
|
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
|
|
<view style="width: 100%;">
|
|
<view
|
|
style="text-align: center;font-size: 34rpx;color: #000000;letter-spacing: 1px;font-weight: bold;">
|
|
<text>通讯录</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</tn-nav-bar>
|
|
|
|
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"
|
|
style="background-color: #FFF;padding-bottom:10rpx;z-index: 200;">
|
|
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin">
|
|
<view class="justify-content-item align-content-item" style="width: 100%;position: relative;">
|
|
<view class="tn-flex tn-flex-col-center"
|
|
style="border-radius: 100rpx;padding: 20rpx;width: 100%;background-color:#F1F2F8;">
|
|
<text style="color: #BABDC7;"
|
|
class="tn-icon-search justify-content-item tn-padding-right-xs tn-text-lg"></text>
|
|
<input v-model="serach_content" class="justify-content-item" placeholder="请会员姓名/手机号进行搜索"
|
|
name="input" placeholder-style="color:#BABDC7"
|
|
style="width: 100%;padding-right: 200rpx;"></input>
|
|
</view>
|
|
<view style="position: absolute;right: 10rpx;top: 10rpx">
|
|
<tn-button backgroundColor="rgba(48,86,211,0.1)" shape="round" padding="20rpx 20rpx"
|
|
width="150rpx" @click="serach_do()">
|
|
<text style="color:#3056D3;font-weight: bold;">搜 索</text>
|
|
</tn-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view :class="isFixed?'fixed':'abc'" style="width: 100%;z-index: 200;"
|
|
:style="{top:isFixed?vuex_custom_bar_height+'px':'auto'}">
|
|
<view class="tn-flex tn-flex-col-center tn-flex-row-around"
|
|
style="padding: 30rpx;background-color: #ffffff;">
|
|
<view @click="openDqShow = !openDqShow;openHyShow=false;jsDqShow=false;zzDqShow=false;">
|
|
<text :class="openDqShow?'textThis':'textNo'">
|
|
{{dq_name=='全部'?'地区':dq_name}}
|
|
</text>
|
|
<text style="color: #BABDC7;"
|
|
:class="openDqShow?'tn-icon-up-triangle':'tn-icon-down-triangle'"></text>
|
|
</view>
|
|
<view @click="openHyShow = !openHyShow;openDqShow=false;jsDqShow=false;zzDqShow=false;">
|
|
<view :class="openHyShow?'textThis tn-text-ellipsis':'textNo tn-text-ellipsis'"
|
|
style="max-width: 120rpx;display: inline-block;vertical-align: middle;">
|
|
{{hy_name=='全部'?'行业':hy_name}}
|
|
</view>
|
|
<text style="color: #BABDC7;vertical-align: middle;"
|
|
:class="openHyShow?'tn-icon-up-triangle':'tn-icon-down-triangle'"></text>
|
|
</view>
|
|
<!-- <view @click="jsDqShow = !jsDqShow;openDqShow=false;openHyShow=false;zzDqShow=false;"
|
|
style="margin-right: 40rpx;">
|
|
<text :class="jsDqShow?'textThis':'textNo'">{{js_name=='全部'?'届数':js_name}}</text>
|
|
<text style="color: #BABDC7;"
|
|
:class="jsDqShow?'tn-icon-up-triangle':'tn-icon-down-triangle'"></text>
|
|
</view> -->
|
|
<view @click="zzDqShow = !zzDqShow;openDqShow=false;openHyShow=false;jsDqShow=false;">
|
|
<text :class="zzDqShow?'textThis':'textNo'">{{zz_name=='全部'?'组织架构':zz_name}}</text>
|
|
<text style="color: #BABDC7;"
|
|
:class="zzDqShow?'tn-icon-up-triangle':'tn-icon-down-triangle'"></text>
|
|
</view>
|
|
</view>
|
|
<view v-if="jsDqShow">
|
|
<view style="border-radius: 0 0 20rpx 20rpx;background-color: #ffffff;padding-bottom: 30rpx;">
|
|
<scroll-view scroll-y="" style="height: 500rpx;">
|
|
<view v-for="(item,index) in js_list" @click="clickClassifyJs(index)"
|
|
style="padding: 20rpx 30rpx;font-size: 28rpx;">
|
|
<view :class="item.id==leftJsId?'textThis':'textNo'">{{item.name}}</view>
|
|
<view v-if="index<js_list.length-1"
|
|
style="width: 100%;height: 1px;background-color: #F1F2F8;margin-top: 30rpx;"></view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<view v-if="zzDqShow">
|
|
<view style="border-radius: 0 0 20rpx 20rpx;background-color: #ffffff;padding-bottom: 30rpx;">
|
|
<scroll-view scroll-y="" style="height: 500rpx;">
|
|
<view v-for="(item,index) in zz_list" @click="clickClassifyZz(index)"
|
|
style="padding: 20rpx 30rpx;font-size: 28rpx;">
|
|
<view :class="item.id==leftZzId?'textThis':'textNo'">{{item.position_name}}</view>
|
|
<view v-if="index<zz_list.length-1"
|
|
style="width: 100%;height: 1px;background-color: #F1F2F8;margin-top: 30rpx;"></view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<view v-if="openDqShow">
|
|
<view style="border-radius: 0 0 20rpx 20rpx;background-color: #ffffff;padding-bottom: 30rpx;">
|
|
<view class="tn-flex">
|
|
<view style="width: 50%;">
|
|
<scroll-view scroll-y="" style="height: 500rpx;">
|
|
<view v-for="(item,index) in region_list" @click="clickClassifyDq(index)"
|
|
style="padding: 20rpx 30rpx;font-size: 28rpx;">
|
|
<view :class="item.value==leftDqId?'textThis':'textNo'">
|
|
<text>{{item.label}}</text>
|
|
<text v-if="item.value!=0" style="margin-left: 15rpx;"
|
|
class="tn-icon-right"></text>
|
|
</view>
|
|
<view v-if="index<region_list.length-1"
|
|
style="width: 100%;height: 1px;background-color: #F1F2F8;margin-top: 30rpx;">
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view style="width: 50%;">
|
|
<scroll-view scroll-y="" style="height: 500rpx;">
|
|
<view v-for="(item,index) in region_children_list"
|
|
@click="clickClassifyDqChildren(index)"
|
|
style="padding: 20rpx 30rpx;font-size: 28rpx;">
|
|
<view :class="item.value==leftDqId?'textThis':'textNo'">
|
|
<text>{{item.label}}</text>
|
|
</view>
|
|
<view v-if="index<region_list.length-1"
|
|
style="width: 100%;height: 1px;background-color: #F1F2F8;margin-top: 30rpx;">
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="openHyShow">
|
|
<view style="border-radius: 0 0 20rpx 20rpx;background-color: #ffffff;padding-bottom: 30rpx;">
|
|
<scroll-view scroll-y="" style="height: 500rpx;">
|
|
<view v-for="(item,index) in industry_list" @click="clickClassifyHy(index)"
|
|
style="padding: 20rpx 30rpx;font-size: 28rpx;">
|
|
<view :class="item.id==leftHyId?'textThis':'textNo'">{{item.industry_name}}</view>
|
|
<view v-if="index<industry_list.length-1"
|
|
style="width: 100%;height: 1px;background-color: #F1F2F8;margin-top: 30rpx;"></view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="openHyShow" @click="openHyShow = false" @touchmove.stop.prevent="() => {}"
|
|
style="position: absolute;width: 100%;height:100%;background-color: rgba(0, 0,0, 0.3);z-index: 100;"></view>
|
|
<view style="padding:120rpx 30rpx 100rpx 30rpx;">
|
|
<view style="overflow: hidden;">
|
|
<view v-for="(item,index) in list" :key="index"
|
|
style="border-radius: 20rpx;margin-bottom:30rpx;background-color: #ffffff;">
|
|
<view
|
|
style="border-radius: 20rpx 20rpx 0rpx 0rpx;background: #E6E8F1;text-align: center;font-size: 34rpx;font-weight: bold;height: 110rpx;line-height: 110rpx;">
|
|
{{item.position_name}}
|
|
</view>
|
|
<view v-if="item.neirong" v-for="(v,k) in item.neirong">
|
|
<view @click="tn('/pages/packageA/user/my_card?id='+v.member_id)"
|
|
class="tn-flex tn-flex-center tn-flex-col-center" style="padding: 35rpx;">
|
|
<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>
|
|
<text
|
|
style="font-size: 32rpx;font-weight: bold;vertical-align: middle;">{{v.nikename}}</text>
|
|
<tn-tag size="sm" padding="0px 5px" margin="0 0 0 20rpx" width="auto" shape="radius"
|
|
backgroundColor="#F1F2F8" fontColor="#888888">{{v.position_name}}</tn-tag>
|
|
</view>
|
|
<view class="tn-text-ellipsis-2"
|
|
style="font-size: 28rpx;margin-top: 10rpx;color: #666666;">
|
|
<text>{{v.enterprise_name==null?v.work_unit:v.enterprise_name}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="k<item.neirong.length-1"
|
|
style="height: 1rpx;border-top: #BABDC7 1rpx dashed;margin: 10rpx 40rpx;"></view>
|
|
</view>
|
|
</view>
|
|
<view v-if="showNo" style="margin-top: 30px;text-align: center">暂无数据</view>
|
|
</view>
|
|
</view>
|
|
<tn-select :safeAreaInsetBottom="true" v-model="selectShow" mode="single" :list="selectList"
|
|
@confirm="confirm"></tn-select>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
addressList,
|
|
associationIndex,
|
|
newIndustryIndex,
|
|
getRegion,
|
|
positionList
|
|
} from '@/util/api.js';
|
|
import store from "@/store";
|
|
export default {
|
|
data() {
|
|
return {
|
|
showNo: false,
|
|
isFixed: false,
|
|
serach_content: '',
|
|
list: [],
|
|
topCurrent: 0,
|
|
tabbarIndex: 0,
|
|
// 分类菜单item的信息
|
|
tabbarItemInfo: [],
|
|
// 当前选中的tabbar序号
|
|
currentTabbarIndex: 0,
|
|
apiImgUrl: this.$store.state.imgUrl,
|
|
industry_list: [],
|
|
leftHyId: 0,
|
|
selectShow: false,
|
|
HomeTitle: '',
|
|
selectList: [],
|
|
gid: store.state.Gid,
|
|
top: 0,
|
|
openHyShow: false,
|
|
selectTopNumber: 220,
|
|
hy_name: '全部',
|
|
openDqShow: false,
|
|
region_list: [],
|
|
region_children_list: [],
|
|
dq_name: '全部',
|
|
leftDqId: 0,
|
|
zzDqShow: false,
|
|
zz_name: '全部',
|
|
zz_list: [],
|
|
leftZzId: 0,
|
|
|
|
jsDqShow: false,
|
|
js_name: '全部',
|
|
js_list: [{
|
|
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: 8,
|
|
name: '第八届'
|
|
},
|
|
{
|
|
id: 9,
|
|
name: '第九届'
|
|
},
|
|
{
|
|
id: 10,
|
|
name: '第十届'
|
|
},
|
|
{
|
|
id: 11,
|
|
name: '第十一届'
|
|
}
|
|
],
|
|
leftJsId: 0,
|
|
}
|
|
},
|
|
onLoad(d) {
|
|
console.log(d.id);
|
|
if (typeof(d.id) != 'undefined') {
|
|
this.gid = d.id;
|
|
}
|
|
this.getIndustryList();
|
|
this.getAssociationIndex();
|
|
this.getRegionList();
|
|
},
|
|
methods: {
|
|
serach_do() {
|
|
this.list = [];
|
|
this.getAddressList();
|
|
},
|
|
getScroll(d) {
|
|
this.top = d.scrollTop;
|
|
},
|
|
onload() {
|
|
this.gid = store.state.Gid;
|
|
this.getIndustryList();
|
|
this.getAssociationIndex();
|
|
this.getRegionList();
|
|
this.getPositionListIndex();
|
|
},
|
|
confirm(d) {
|
|
var info = d[0];
|
|
this.list = [];
|
|
this.gid = info.value;
|
|
this.getAssociationIndex();
|
|
this.getIndustryList();
|
|
},
|
|
getPositionListIndex() {
|
|
positionList({
|
|
association_id: 1
|
|
})
|
|
.then(res => {
|
|
console.log(res);
|
|
if (res.code == 1) {
|
|
this.zz_list = res.data;
|
|
this.zz_list.unshift({
|
|
id: 0,
|
|
position_name: '全部'
|
|
});
|
|
}
|
|
})
|
|
.catch(error => {
|
|
uni.showToast({
|
|
title: error,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
})
|
|
},
|
|
getAssociationIndex() {
|
|
associationIndex()
|
|
.then(res => {
|
|
console.log(res);
|
|
if (res.code == 1) {
|
|
var key = res.data;
|
|
const transformedSelectList = key.map(item => ({
|
|
value: item.id,
|
|
label: item.association_name
|
|
}));
|
|
const foundNumber = transformedSelectList.find((element) => element.value == this.gid);
|
|
this.HomeTitle = foundNumber.label;
|
|
this.selectList = transformedSelectList;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
uni.showToast({
|
|
title: error,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
})
|
|
},
|
|
getIndustryList() {
|
|
newIndustryIndex({
|
|
association_id: this.gid
|
|
})
|
|
.then(res => {
|
|
console.log(res);
|
|
if (res.code == 1) {
|
|
this.industry_list = res.data;
|
|
this.industry_list.push({
|
|
id: -1,
|
|
industry_name: '其他行业'
|
|
});
|
|
this.industry_list.unshift({
|
|
id: 0,
|
|
industry_name: '全部'
|
|
});
|
|
this.leftHyId = res.data[0].id;
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
});
|
|
this.getAddressList();
|
|
}
|
|
})
|
|
.catch(error => {
|
|
uni.showToast({
|
|
title: error,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
})
|
|
},
|
|
getAddressList() {
|
|
addressList({
|
|
number_of_sessions: this.leftJsId,
|
|
position_id: this.leftZzId,
|
|
region_id: this.leftDqId,
|
|
association_id: this.gid,
|
|
industry_id: this.leftHyId,
|
|
nikename: this.serach_content
|
|
})
|
|
.then(res => {
|
|
console.log(res);
|
|
if (res.code == 1) {
|
|
this.list = res.data;
|
|
} else {
|
|
this.showNo = true;
|
|
}
|
|
setTimeout(function() {
|
|
uni.hideLoading();
|
|
}, 2000);
|
|
})
|
|
.catch(error => {
|
|
uni.showToast({
|
|
title: error,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
})
|
|
},
|
|
getRegionList() {
|
|
getRegion({
|
|
association_id: 1,
|
|
})
|
|
.then(res => {
|
|
if (res.code == 1) {
|
|
var key = res.data;
|
|
// const transformedSelectList = key.map(item => ({
|
|
// value: item.id,
|
|
// label: item.region_name
|
|
// }));
|
|
key.unshift({
|
|
value: 0,
|
|
label: '全部'
|
|
});
|
|
this.region_list = key;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
uni.showToast({
|
|
title: error,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
})
|
|
},
|
|
clickClassifyJs(index) {
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
});
|
|
this.isFixed = false;
|
|
this.showNo = false;
|
|
this.jsDqShow = false;
|
|
this.currentTabbarIndex = index;
|
|
this.leftJsId = this.js_list[index].id;
|
|
this.js_name = this.js_list[index].name;
|
|
this.list = [];
|
|
this.getAddressList();
|
|
},
|
|
clickClassifyZz(index) {
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
});
|
|
this.isFixed = false;
|
|
this.showNo = false;
|
|
this.zzDqShow = false;
|
|
this.currentTabbarIndex = index;
|
|
this.leftZzId = this.zz_list[index].id;
|
|
this.zz_name = this.zz_list[index].position_name;
|
|
this.list = [];
|
|
this.getAddressList();
|
|
},
|
|
clickClassifyHy(index) {
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
});
|
|
this.isFixed = false;
|
|
this.showNo = false;
|
|
this.openHyShow = false;
|
|
this.currentTabbarIndex = index;
|
|
this.leftHyId = this.industry_list[index].id;
|
|
this.hy_name = this.industry_list[index].industry_name;
|
|
this.list = [];
|
|
this.getAddressList();
|
|
},
|
|
clickClassifyDq(index) {
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
});
|
|
// this.isFixed = false;
|
|
// this.showNo = false;
|
|
// this.openDqShow = false;
|
|
this.currentTabbarIndex = index;
|
|
this.region_children_list = this.region_list[index].children;
|
|
this.leftDqId = this.region_list[index].value;
|
|
this.dq_name = this.region_list[index].label;
|
|
this.list = [];
|
|
this.getAddressList();
|
|
},
|
|
clickClassifyDqChildren(index) {
|
|
this.currentTabbarIndex = index;
|
|
this.isFixed = false;
|
|
this.showNo = false;
|
|
this.openDqShow = false;
|
|
//this.region_children_list = this.region_list[index].children;
|
|
this.leftDqId = this.region_children_list[index].value;
|
|
this.dq_name = this.region_children_list[index].label;
|
|
this.list = [];
|
|
this.getAddressList();
|
|
},
|
|
ReachScroll(e) {
|
|
//当距离大于20的时候吸顶
|
|
if (e.detail.scrollTop > 100) {
|
|
this.isFixed = true;
|
|
} else {
|
|
this.isFixed = false;
|
|
}
|
|
},
|
|
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 */
|
|
}
|
|
|
|
.my-page {
|
|
height: calc(100vh - 286rpx);
|
|
padding-bottom: 100rpx;
|
|
}
|
|
|
|
.textThis {
|
|
color: #3056D3;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.textNo {
|
|
color: #000000;
|
|
}
|
|
|
|
.fixed {
|
|
position: fixed;
|
|
}
|
|
|
|
.abc {
|
|
position: absolute;
|
|
}
|
|
</style> |