图片.png
/* eslint-disable prefer-arrow-callback */
import Taro, { Component } from "@tarojs/taro";
import {
View,
Image,
Text,
ScrollView,
Button,
Picker
} from "@tarojs/components";
import {
AtSearchBar,
AtFloatLayout,
AtTag,
AtModal,
AtModalAction,
AtModalContent,
AtIndexes
} from "taro-ui";
import lookDetail from "./images/lookDetail.png";
import sex_gril from "../../../pages/vein/card/images/sex_gril.png";
import sex_boy from "../../../pages/vein/card/images/sex_boy.png";
import callphone from "./images/phone.svg";
import api from "../../../utils/network/request";
import user from "../../../utils/auth/user";
import close from "../../../assets/images/close.png";
import screen from "../../../pages/user/company/images/screen.png";
import del from "../../../pages/user/company/images/del.svg";
import caret from "./images/caret-down.png";
import "./cell.less";
export default class Index extends Taro.Component {
config = {
navigationBarTitleText: "商会通讯录",
navigationBarBackgroundColor: "#ECC97A"
};
state = {
searchValue: "",
setLog: "",
sessionIsOpened: false,
PostOpened: false,
active_pos_id: 0,
phone: "",
id: 0,
active_post: {},
// 届数
active_session: { member_num: 0, session: 1 },
lists: [],
sessionLists: [],
postList: [],
session: 0,
coc_id: 0,
position_id: 0,
position: "",
addressBooksList: [],
bookList: [],
scrollTop: "",
levelName: "全部",
isShowGetUser: false,
cityNames: "",
home_province_id: "",
home_city_id: "",
home_district_id: ""
};
componentWillMount() {}
componentDidMount() {
const coc_id = this.$router.params.id;
if (coc_id === undefined) {
return false;
}
this.setState({ coc_id: coc_id });
this.getSessionList(coc_id, 1);
}
componentDidShow() {
this.getScopeUserInfo();
}
getScopeUserInfo() {
Taro.getSetting({
success: res => {
if (!res.authSetting["scope.userInfo"]) {
this.setState({ isShowGetUser: true });
}
}
});
}
// 搜索框
onSearchChange(value) {
this.setState({
searchValue: value
});
}
// 届数接口
getSessionList(coc_id) {
const _this = this;
api.request({
method: "POST",
url: "/coc/session",
data: {
access_token: user.getToken(),
coc_id: coc_id
},
success: function(res) {
const sessionLists = res.data.result;
_this.setState({
sessionLists: sessionLists
});
if (sessionLists[0] !== undefined) {
_this.setState(
{
active_session: sessionLists[0]
},
() => {
_this.getCellList();
_this.getPositionList();
}
);
}
},
error: function(res) {}
});
}
// 获取职务列表的接口
getPositionList = () => {
const _this = this;
api.request({
method: "POST",
url: "/coc/position",
data: {
access_token: user.getToken(),
session: this.state.active_session.session,
coc_id: this.state.coc_id
},
success: function(res) {
res.data.result.unshift({
desc: "",
equity: null,
id: 0,
last_payment_time: 1609372800,
member_num: 1,
name: "全部",
pay_freq: 1,
price: "0.00",
unit: 0
});
_this.setState({
postList: res.data.result
});
},
error: function(res) {}
});
};
// 商会通讯录接口 默认返回当届通讯录
getCellList(position_id) {
let position = 0;
if (position_id !== undefined) {
position = position_id;
} else if (this.state.active_post.id !== undefined) {
position = this.state.active_post.id;
}
api.request({
methods: "POST",
url: "/coc/book",
data: {
access_token: user.getToken(),
coc_id: this.$router.params.id,
session:
this.state.active_session.session === undefined
? 1
: this.state.active_session.session,
position_id: position,
home_province_id:
this.state.home_province_id === undefined
? ""
: this.state.home_province_id,
home_city_id:
this.state.home_city_id === undefined ? "" : this.state.home_city_id,
home_district_id:
this.state.home_district_id === undefined
? ""
: this.state.home_district_id,
name:
this.state.searchValue === undefined ? "" : this.state.searchValue,
num: 9999
},
success: response => {
if (response.data.code == 1007) {
Taro.showToast({
title: "您不是当届商会会员，无权访问该届通讯录",
icon: "none",
duration: 1000
});
return;
}
if (response.data.result.length > 0) {
if (response.data.result.length > 3) {
Taro.showLoading({
title: "加载中"
});
setTimeout(function() {
Taro.hideLoading();
}, 2000);
}
const bookList = [];
response.data.result.map(item => {
bookList.push({ key: item.key });
});
this.setState({ addressBooksList: response.data.result, bookList });
} else {
this.setState({ addressBooksList: [], bookList: [] });
}
},
error: response => {}
});
}
// 打开届数职务筛选界面
handleSessionOpened() {
this.setState({
sessionIsOpened: true
});
}
// 关闭届数职务筛选界面
handleSessionClose() {
this.setState({
sessionIsOpened: false
});
}
// 搜索框
submitSearch() {
this.getCellList();
}
// 职务选择事件
onSelectPost(position) {
const that = this;
this.setState(
{
active_post: position
},
() => {
// this.handleSessionClose();
// this.getCellList(position.id);
}
);
}
// 届数选择事件
onSelectClick(sessiones) {
const that = this;
this.setState(
{
active_session: sessiones
},
() => {
this.getPositionList();
// this.handleSessionClose();
// this.getCellList();
}
);
}
//重置
reset() {
this.setState({
active_session: { session: 1 },
active_post: "",
addressBooksList: [],
bookList: []
});
}
//确定
sure() {
this.handleSessionClose();
this.getCellList(this.state.active_post.id);
}
// 右边icon点击事件
handleRightIconClick(item, e) {
e.stopPropagation();
if (item.phone.length === 0) {
Taro.showToast({
title: "该会员还未绑定手机号哦",
icon: "none",
duration: 1500
});
} else {
this.makeCall(item.phone);
}
}
// 拨打电话
makeCall = phone => {
if (phone.length === 0) {
Taro.showToast({
title: "该会员还未绑定手机号哦",
icon: "none",
duration: 1500
});
} else {
Taro.makePhoneCall({
phoneNumber: phone,
success: function() {}
});
}
};
goToIndex = key => {
const { addressBooksList = [] } = this.state;
let i = 0;
let child = 0;
for (let is = 0; is <= addressBooksList.length; is++) {
if (addressBooksList[is].key === key) {
break;
}
i++;
child += addressBooksList[is].items.length;
}
Taro.showToast({
title: key,
icon: "none",
duration: 1000
});
this.setState({
scrollTop: i * 21 + child * 160
});
};
gotoNameCard = id => {
// 名片详情的跳转
Taro.navigateTo({
url: `/coc/pages/bookMember/index?id=${id}&&coc_id=${this.$router.params.id}`
});
};
getUserInfo = res => {
user.syncWxUser(res);
};
render() {
const {
isShowGetUser,
bookList,
scrollTop,
addressBooksList,
SelecCty = [],
cityNames
} = this.state;
return (
{isShowGetUser && (
获取用户信息授权
)}
{this.state.active_session.session ? (
第{this.state.active_session.session}届
{this.state.active_post.name}
) : (
届与职务
)}
{/*籍贯 */}
{
this.setState(
{
cityNames: e.detail.value,
home_province_id: e.target.code[0],
home_city_id: e.target.code[1],
home_district_id: e.target.code[2],
SelecCty: e.target.code
},
() => this.getCellList()
);
}}
>
{cityNames ? (
{cityNames[0] == "全部" ? (
籍贯
) : (
{cityNames[0]}
{cityNames[2]}
)}
) : (
籍贯
)}
请选择届与职务
届别
{this.state.sessionLists &&
this.state.sessionLists.map((item, index) => {
return (
第{item.session}届
);
})}
职务
{this.state.postList &&
this.state.postList.map((item, index) => {
return (
{item.name}
);
})}
重置
确定
{/* 通讯录 */}
console.log(e)}
onRightIconClick={this.handleRightIconClick.bind(this)}
>
{addressBooksList.length == 0 && (
暂无数据
)}
{addressBooksList.map(title => {
return (
{title.key}
{title.items.map(item => {
return (
{item.name}
{item.position.name}
{item.native_place && (
籍贯：{item.native_place}
)}
{item.company.company_name}
拨打电话
查看详情
);
})}
);
})}
{/* 右侧索引英文 */}
{bookList.map(item => {
return (
this.goToIndex(item.key)}>
{item.key}
);
})}
);
}
}
.at-modal__content {
padding: 50px 24px 72px 24px;
min-height: 0px !important;
color: #353535;
font-size: 30px;
box-sizing: content-box;
width: auto;
}
.at-float-layout__container{
min-height: 80vh;
}
.app_use {
text-align: center;
}
.at-search-bar__action {
background-color: #ffffff;
color: #333333;
}
.at-accordion__header::after {
border: 0 solid #f3f3f3;
}
// 手风琴居中
.at-accordion__info__title {
text-align: center;
color: #333333;
font-size: 30px;
font-weight: bold;
}
// 届数筛选弹框样式
.min-160 {
min-width: 195px !important;
margin-right: 30px !important;
border-radius: 6px;
color: #999999;
border: 1px solid rgba(221, 221, 221, 1);
}
.at-tag {
height: 60px;
line-height: 60px;
background: #ffffff;
}
// 届数筛选按钮颜色
.at-tag--active {
background-color: #ebc87f;
border: 0;
color: #ffffff;
font-size: 28px;
border-radius: 6px;
border: 1px solid rgba(235, 200, 127, 1);
}
.pop-up {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.action {
width: 695px;
height: 100px;
margin: 0 auto;
line-height: 100px;
display: flex;
align-items: center;
justify-content: space-between;
.title {
font-size: 30px;
color: #333333;
}
.close {
width: 25px;
height: 25px;
display: inline-block;
}
}
.navTitle {
width: 695px;
height: 100px;
margin: 0 auto;
line-height: 100px;
}
.at-col {
flex: 1;
width: 90%;
min-width: 25%;
max-width: 100%;
margin: 15px 15px;
}
.footerAction {
position: fixed;
left: 205px;
bottom: 40px;
width: 350px;
display: flex;
align-items: center;
justify-content: space-between;
.reset {
width: 146px;
height: 60px;
line-height: 60px;
text-align: center;
border-radius: 41px;
border: 1px solid rgba(235, 200, 127, 1);
font-size: 30px;
color: #ebc87f;
}
.sure {
width: 146px;
height: 60px;
line-height: 60px;
text-align: center;
border-radius: 41px;
font-size: 30px;
background: #ebc87f;
color: #ffffff;
}
}
.cell {
.at-row {
font-size: 36px;
color: #333333;
}
.content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 30px;
border-bottom: 1px solid #f3f3f3;
font-size: 30px;
.content-post {
display: flex;
align-items: center;
.post-del {
position: relative;
.caret-del {
width: 18px;
height: 18px;
position: absolute;
top: 0px;
right: -8px;
}
}
.caret-img {
width: 15px;
height: 9px;
padding: 12px 20px;
}
}
.content-address {
.address {
display: flex;
align-items: center;
.caret-img {
width: 15px;
height: 9px;
padding: 12px 20px;
}
}
}
.session-detail {
display: flex;
align-items: center;
.personnel {
flex: 1;
color: #111111;
}
.screen-img {
width: 30px;
height: 30px;
}
}
}
.footer {
padding: 0 15px;
padding-bottom: 160px;
.mail {
width: 647px;
height: 294px;
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
border-radius: 12px;
margin: 0 0 26px 10px;
.mail-top {
display: flex;
height: 219px;
align-items: center;
border-bottom: 1px solid #e6e6e6;
.logo {
width: 160px;
height: 160px;
border-radius: 100%;
margin: 0 20px;
}
.mail-left {
display: flex;
align-items: center;
.mail-name {
font-size: 32px;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
max-width: 230px;
}
.mail-post {
font-size: 24px;
color: #666666;
margin: 0 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
max-width: 150px;
}
.sex {
width: 30px;
height: 30px;
}
}
.m-10 {
margin: 10px 0;
}
.words {
font-size: 22px;
color: #999999;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
.mail-bottom {
display: flex;
height: 74px;
align-items: center;
.b-r-1 {
border-right: 1px solid #e6e6e6;
}
.detail {
display: flex;
align-items: center;
width: 323px;
justify-content: center;
.back {
width: 40px;
height: 40px;
margin-right: 21px;
}
.look {
font-size: 28px;
color: #999999;
}
}
}
}
}
.charterBox {
position: fixed;
right: 0;
top: 168px;
width: 30px;
font-size: 24px;
line-height: 2;
background-color: #ffffff;
z-index: 100;
height: 100vh;
}
.tips {
padding-top: 50%;
font-size: 28px;
color: #888888;
text-align: center;
}
}