2025-03-21 16:50:18 +08:00

862 lines
24 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view style="background-color: #ffffff;letter-spacing: 1rpx;">
<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="30"></tn-tabs>
</view>
</view>
</tn-nav-bar>
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<!-- <view class="tn-flex tn-flex-col-center tn-flex-row-between" @click="selectShow= true"
style="padding: 30rpx;">
<view>
<text>{{HomeTitle}}</text>
<text class="tn-icon-down-triangle"></text>
</view>
<view>
<text>筛选</text>
</view>
</view> -->
</view>
<view style="background-color: #FFF;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: 15rpx;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: 6rpx;top: 6rpx">
<tn-button v-if="!serach_do" backgroundColor="#3056D3" shape="round" padding="10rpx 10rpx"
width="150rpx" @click="serach()" height="60rpx">
<text style="color:#ffffff;font-weight: bold;">搜 索</text>
</tn-button>
<tn-button v-if="serach_do" backgroundColor="#3056D3" shape="round" padding="10rpx 10rpx"
width="150rpx" @click="reset()" height="60rpx">
<text style="color:#ffffff;font-weight: bold;">重 置</text>
</tn-button>
</view>
</view>
</view>
</view>
<view v-if="pickerIndex==2">
<view class="tn-flex tn-flex-center tn-flex-col-center tn-flex-row-around" style="padding-bottom: 20rpx;">
<view @click="pickerShow =true">
<text>{{pickerList[pickerIndex].name}}</text>
<text class="tn-icon-down"></text>
</view>
<view @click="region_show= true">
<text>{{region_name}}</text>
<text class="tn-icon-down"></text>
</view>
</view>
<view @click="coversShow = true"
style="position: fixed;top: 50%;right: 30rpx;z-index: 1;width: 90rpx;height: 90rpx;background-color: #ffffff;border-radius: 50%;">
<image src="/static/map.png" style="width: 90rpx;height: 90rpx;"></image>
</view>
<map @callouttap="openLock" :style="{width: '100%',height: my_page+'px'}" :scale="scale"
:latitude="latitude" :longitude="longitude" :markers="covers">
</map>
<tn-popup v-model="coversShow" mode="bottom" :mask="false" height="50%" :borderRadius="10">
<view style="padding:30rpx 0rpx 0rpx 0rpx;text-align: center;font-size: 34rpx;font-weight: 600;">
企业数量{{covers.length}}</view>
<scroll-view scroll-y style="height: 85%;">
<view v-for="(item,index) in covers" style="padding:10rpx 30rpx;">
<view class="tn-flex tn-flex-center tn-flex-col-center tn-flex-row-between">
<view @click="tn('/pages/packageA/user/my_card?id='+item.id)"
class="tn-classify__content__sub-classify__content__item tn-flex tn-flex-center tn-flex-col-center">
<view style="width: 100rpx;height: 100rpx">
<image v-if="item.photo_image!=''&&item.photo_image!=null"
:src="apiImgUrl+item.photo_image"
style="width: 100rpx;height: 100rpx;border-radius:50%;">
</image>
<image v-if="item.photo_image==''||item.photo_image==null" src="/static/def.png"
style="width: 100rpx;height: 100rpx;border-radius:50%;">
</image>
</view>
<view style="margin-left: 20rpx;">
<view style="font-size: 28rpx;font-weight: 600;">
<text>{{item.nikename}}</text>
</view>
<view class="tn-text-ellipsis-2"
style="font-size: 24rpx;margin-top: 10rpx;color: #888888;">
<text>{{item.title==null?'':item.title}}</text>
</view>
</view>
</view>
<view @click="openMark(item)">
<image src="/static/make.png" style="height: 60rpx;width: 60rpx;"></image>
</view>
</view>
<view v-if="index<covers.length-1"
style="height: 1rpx;border-top: #BABDC7 1rpx dashed;margin: 10rpx 40rpx;"></view>
</view>
</scroll-view>
</tn-popup>
</view>
<view v-if="pickerIndex!=2" class="tn-classify__container">
<view class="tn-classify__container__wrap tn-flex tn-flex-nowrap tn-flex-row-around"
:style="{backgroundColor:'#ffffff',height:my_page+'px'}">
<!-- 左边容器 -->
<scroll-view v-if="!serach_do" scroll-y class="tn-classify__left-box left-width">
<view class="tn-classify__tabbar__item tn-flex tn-flex-col-center" style="padding: 30rpx 20rpx;">
<view @click="pickerShow =true" class="tn-classify__tabbar__item__title"
style="text-align: center;width: 100%;">
<text>{{pickerList[pickerIndex].name}}</text>
<text class="tn-icon-down"></text>
</view>
</view>
<view v-if="pickerIndex==1" v-for="(item, index) in industry_list" :key="index"
:id="`tabbar_item_${index}`" class="tn-classify__tabbar__item tn-flex tn-flex-col-center"
:class="[tabbarItemClass(index)]" @tap.stop="clickClassifyNav(index)"
style="padding: 30rpx 20rpx;">
<view class="tn-classify__tabbar__item__title" style="text-align: center;width: 100%;">
{{ item.industry_name }}
</view>
</view>
<view v-if="pickerIndex==0" v-for="(item, index) in zz_list" :key="index"
:id="`tabbar_item_${index}`" class="tn-classify__tabbar__item tn-flex tn-flex-col-center"
:class="[tabbarItemClass(index)]" @tap.stop="clickClassifyNavZZ(index)"
style="padding: 30rpx 20rpx;">
<view class="tn-classify__tabbar__item__title" style="text-align: center;width: 100%;">
{{ item.position_name }}
</view>
</view>
</scroll-view>
<!-- 右边容器 -->
<scroll-view class="tn-classify__right-box" @scrolltolower="rightBottom" @scroll="getScroll"
:scroll-top="top" scroll-y :style="{width: !serach_do?'72%':'100%'}">
<block>
<view class="tn-classify__content">
<!-- 分类内容子栏目 -->
<view class="tn-classify__content__sub-classify__content " style="padding-bottom: 120rpx;">
<view v-for="(item,index) in list" :key="index" style="margin-bottom: 20rpx;">
<view v-if="item.neirong"
style="font-weight: 300;;background-color: #3056D3;color:#ffffff;width: 100%;height: 60rpx;line-height: 60rpx;text-align: center;">
{{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-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;font-weight: 600;">
<text>{{v.nikename}}</text>
</view>
<view class="tn-text-ellipsis-2"
style="font-size: 24rpx;margin-top: 10rpx;color: #888888;">
<text>{{v.enterprise_name==null?'':v.enterprise_name}}</text>
</view>
</view>
</view>
<view v-if="k<item.neirong.length-1"
style="height: 1rpx;background-color: #F1F2F8;margin: 0 auto;width: 80%;">
</view>
</view>
</view>
<view v-if="member_list.length>0" style="margin-bottom: 20rpx;">
<view
style="font-weight: 300;;background-color: #3056D3;color:#ffffff;width: 100%;height: 60rpx;line-height: 60rpx;text-align: center;">
会员
</view>
<view v-for="(v,k) in member_list">
<view @click="tn('/pages/packageA/user/my_card?id='+v.member_id)"
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;font-weight: 600;">
<text>{{v.nikename}}</text>
</view>
<view class="tn-text-ellipsis-2"
style="font-size: 24rpx;margin-top: 10rpx;color: #888888;">
<text>{{v.enterprise_name==null?'':v.enterprise_name}}</text>
</view>
</view>
</view>
<view v-if="k<member_list.length-1"
style="height: 1rpx;background-color: #F1F2F8;margin: 0 auto;width: 80%;">
</view>
</view>
</view>
<view v-if="list.length==0" style="text-align: center;padding: 20rpx">
暂无
</view>
</view>
</view>
</block>
</scroll-view>
</view>
</view>
<tn-picker mode="selector" v-model="pickerShow" :range="pickerList" rangeKey="name"
@confirm="inPickerList"></tn-picker>
<tn-select :searchShow="false" v-model="region_show" mode="multi-auto" :list="region_list"
@confirm="getDqId"></tn-select>
<!-- <view @click="tn('/pages/index/apply_in')" style="line-height: 40rpx;text-align: center;position: fixed;bottom:15%;right: 20rpx;width: 120rpx;height: 120rpx;border-radius: 50%;background: linear-gradient(270deg, #EE7E45, #EE9657);-->
<!--box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(12,0,5,0.2);">-->
<!-- <view style="color: #fff;letter-spacing: 2rpx;padding: 20rpx;font-size: 32rpx;">申请入会-->
<!-- </view>-->
<!-- </view>-->
<!-- <tn-select :safeAreaInsetBottom="true" v-model="selectShow" mode="single" :list="selectList"
@confirm="confirm"></tn-select> -->
</view>
</template>
<script>
import {
addressList,
associationIndex,
newIndustryIndex,
huiYuanList,
getRegion,
positionList,
latitudeAndLongitude
} from '@/util/api.js';
import store from "@/store";
export default {
data() {
return {
serach_content: '',
list: [],
topCurrent: 0,
tabbarIndex: 0,
// 分类菜单item的信息
tabbarItemInfo: [],
// scrollView的top值
scrollViewBasicTop: 0,
// scrollView的高度
scrollViewHeight: 0,
// 左边scrollView的滚动高度
leftScrollViewTop: 0,
// 右边scrollView的滚动高度
rightScrollViewTop: 0,
// 当前选中的tabbar序号
currentTabbarIndex: 0,
apiImgUrl: this.$store.state.imgUrl,
industry_list: [],
leftId: 0,
selectShow: false,
HomeTitle: '',
selectList: [],
member_list: [],
zz_list: [],
page: 1,
gid: store.state.Gid,
gname: '',
top: 0,
my_page: 0,
pickerShow: false,
pickerIndex: 0,
pickerList: [{
name: '按职位',
id: 1
}, {
name: '按行业',
id: 2
}, {
name: '按区域',
id: 3
}],
serach_do: false,
covers: [],
coversShow: false,
region_show: false,
region_name: '全部',
region_list: [],
region_id: 0,
scale: 5,
latitude: 34.776787,
longitude: 113.733079
}
},
computed: {
tabbarItemClass() {
return index => {
if (index === this.currentTabbarIndex) {
return 'tn-classify__tabbar__item--active tn-bg-my-ccc'
} else {
let clazz = ''
if (this.currentTabbarIndex > 0 && index === this.currentTabbarIndex - 1) {
clazz += ' tn-classify__tabbar__item--active--prev'
}
if (this.currentTabbarIndex < this.industry_list.length && index === this.currentTabbarIndex +
1) {
clazz += ' tn-classify__tabbar__item--active--next'
}
return clazz
}
}
}
},
// onLoad(d) {
// console.log(d.id);
// if (typeof(d.id) != 'undefined') {
// this.gid = d.id;
// }
// this.getIndustryList();
// this.getAssociationIndex();
// this.getRegionList();
// },
methods: {
getDqId(d) {
var city = d[0];
var area = d[1];
// var area = d.area;
// var city = d.city;
// var province = d.province;
if (city.value == 0) {
this.region_name = '全部';
} else {
this.region_name = city.label + '/' + area.label;
}
this.region_id = area.value;
this.scale = 5;
this.latitude = 34.776787;
this.longitude = 113.733079;
this.coversShow = false;
this.getLatitudeAndLongitude();
},
openMark(d) {
console.log(d);
this.scale = 15;
this.latitude = d.latitude;
this.longitude = d.longitude;
this.coversShow = false;
},
openLock(d) {
console.log(d);
var id = d.detail.markerId;
const cover = this.covers.find(item => item.id == id);
uni.showModal({
title: '导航提醒',
content: '确定要开启导航吗?',
success: function(res) {
if (res.confirm) {
uni.openLocation({
latitude: cover.latitude,
longitude: cover.longitude,
name: cover.title,
success() {
console.log('导航成功');
},
fail(error) {
console.error('导航失败', error);
}
});
}
}
});
},
getLatitudeAndLongitude() {
latitudeAndLongitude({
region_id: this.region_id,
enterprise_name: this.serach_content,
nikename: this.serach_content,
})
.then(res => {
console.log(res);
var list = res.data;
const transformedSelectList = list.map(item => ({
latitude: parseFloat(item.dimension),
longitude: parseFloat(item.longitude),
id: item.id,
iconPath: '/static/make.png',
width: 30,
height: 30,
company_image: item.company_image,
nikename: item.nikename,
title: item.enterprise_name,
photo_image: item.photo_image,
callout: {
content: item.enterprise_name,
textAlign: 'center',
fontSize: 16,
borderRadius: 5,
color: "#3056D3"
}
}));
console.log(transformedSelectList);
this.covers = transformedSelectList;
})
.catch(error => {
uni.showToast({
title: error,
icon: 'none',
duration: 2000
});
})
},
inPickerList(d) {
this.top = 0;
this.currentTabbarIndex = 0;
this.pickerIndex = d[0];
this.leftHyId = 0;
this.member_list = [];
this.list = [];
this.page = 1;
this.getAddressList();
this.getMemberList();
this.scale = 5;
this.latitude = 34.776787;
this.longitude = 113.733079;
this.getLatitudeAndLongitude();
},
preventTouchMove() {
},
rightBottom() {
if (this.leftZzId == 15 || this.pickerIndex == 1) {
uni.showLoading({
title: '加载中...'
});
console.log(1);
this.page = this.page + 1;
//this.getAddressList();
this.getMemberList();
}
},
getScroll(d) {
this.top = d.scrollTop;
},
onload() {
console.log(this.list.length);
console.log(this.member_list.length);
this.serach_content = '';
this.coversShow = false;
this.serach_do = false;
// this.member_list = [];
// this.list = [];
if (this.list.length > 0 || this.member_list.length > 0) {
return;
}
this.currentTabbarIndex = 0;
this.gid = store.state.Gid;
this.gname = store.state.Gname;
this.getIndustryList();
this.getAssociationIndex();
this.getPositionListIndex();
this.getLatitudeAndLongitude();
this.getRegionList();
const key = uni.getSystemInfoSync();
const kk = uni.getWindowInfo();
console.log(kk);
var c = this.sizeDeal(120);
var s = this.sizeDeal(140);
this.my_page = parseInt(key.windowHeight) - parseInt(store.state.vuex_custom_bar_height) - parseInt(s) -
parseInt(c) - parseInt(key.safeAreaInsets.bottom);
//console.log(key);
},
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
});
})
},
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: '全部',
children: [{
value: 0,
label: '全部',
}],
});
this.region_list = key;
}
})
.catch(error => {
uni.showToast({
title: error,
icon: 'none',
duration: 2000
});
})
},
// confirm(d) {
// var info = d[0];
// this.list = [];
// this.gid = info.value;
// this.getAssociationIndex();
// this.getIndustryList();
// },
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 = 0;
uni.showLoading({
title: '加载中...'
});
this.getAddressList();
this.getMemberList();
}
})
.catch(error => {
uni.showToast({
title: error,
icon: 'none',
duration: 2000
});
})
},
reset() {
this.serach_content = '';
this.coversShow = true;
this.serach_do = false;
this.member_list = [];
this.list = [];
this.page = 1;
this.getAddressList();
this.getMemberList();
this.getLatitudeAndLongitude();
},
serach() {
if (this.serach_content == '') {
this.serach_do = false;
} else {
this.serach_do = true;
}
this.coversShow = true;
this.member_list = [];
this.list = [];
this.page = 1;
this.leftHyId = 0;
this.leftDqId = 0;
this.getAddressList();
this.getMemberList();
this.getLatitudeAndLongitude();
},
getMemberList() {
huiYuanList({
region_id: this.leftDqId,
association_id: this.gid,
industry_id: this.leftHyId,
nikename: this.serach_content,
page: this.page,
size: 15,
})
.then(res => {
console.log(res);
if (res.code == 1) {
this.member_list.push(...res.data[0].neirong);
}
setTimeout(function() {
uni.hideLoading();
}, 2000);
})
.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.push(...res.data);
} else {
this.showNo = true;
}
setTimeout(function() {
uni.hideLoading();
}, 2000);
})
.catch(error => {
uni.showToast({
title: error,
icon: 'none',
duration: 2000
});
})
},
clickClassifyNavZZ(index) {
this.top = 0;
uni.showLoading({
title: '加载中...'
});
this.currentTabbarIndex = index;
this.leftZzId = this.zz_list[index].id;
this.member_list = [];
this.list = [];
this.top = this.randomBetween();
this.page = 1;
this.getAddressList();
if (this.leftZzId == 15) {
this.getMemberList();
}
//this.getMemberList();
},
clickClassifyNav(index) {
this.top = 0;
console.log(index);
console.log(this.industry_list[index].id);
uni.showLoading({
title: '加载中...'
});
this.currentTabbarIndex = index;
this.leftHyId = this.industry_list[index].id;
this.member_list = [];
this.list = [];
this.top = this.randomBetween();
this.page = 1;
this.getAddressList();
this.getMemberList();
//this.getAddressList();
//this.handleLeftScrollView(index)
//this.switchClassifyContent();
},
randomBetween() {
let baseRandom = Math.random() * (0.99999 - 0.00001) + 0.00001;
return baseRandom.toFixed(5); //
},
// 点击分类后处理scrollView滚动到居中位置
handleLeftScrollView(index) {
const tabbarItemTop = this.tabbarItemInfo[index].top - this.scrollViewBasicTop
if (tabbarItemTop > this.scrollViewHeight / 2) {
this.leftScrollViewTop = tabbarItemTop - (this.scrollViewHeight / 2) + this.tabbarItemInfo[index]
.height
} else {
this.leftScrollViewTop = 0
}
},
// 切换对应分类的数据
switchClassifyContent() {
this.rightScrollViewTop = 1
this.$nextTick(() => {
this.rightScrollViewTop = 0
})
//this.classifyContent.subClassify[0].title = this.tabbar[this.currentTabbarIndex]
},
tn(url) {
uni.navigateTo({
url: url
})
},
sizeDeal(size) {
// 使用uni.upx2px进行转换
const pxValue = uni.upx2px(size);
return pxValue;
},
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: #F1F2F8;
}
/* 分类列表和内容 end */
/* 侧边导航 start */
&__tabbar {
&__item {
&:first-child {
border-top-right-radius: 0rpx;
}
&:last-child {
border-bottom-right-radius: 0rpx;
}
&--active {
background-color: #F1F2F8;
position: relative;
font-weight: bold;
color: #3056D3;
&--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;
background-color: #FFFFFF;
}
}
}
/* 子栏目 end */
}
/* 分类内容 end */
}
.tn-bg-my-ccc {
background-color: #F1F2F8;
}
</style>