wangyifeng
9a739e7402
Some checks are pending
Check / lint (push) Waiting to run
Check / typecheck (push) Waiting to run
Check / build (build, 18.x, ubuntu-latest) (push) Waiting to run
Check / build (build, 18.x, windows-latest) (push) Waiting to run
Check / build (build:app, 18.x, ubuntu-latest) (push) Waiting to run
Check / build (build:app, 18.x, windows-latest) (push) Waiting to run
Check / build (build:mp-weixin, 18.x, ubuntu-latest) (push) Waiting to run
Check / build (build:mp-weixin, 18.x, windows-latest) (push) Waiting to run
399 lines
11 KiB
Vue
399 lines
11 KiB
Vue
<template>
|
|
<div class="add-friend-page">
|
|
<zPaging ref="zPaging" :show-scrollbar="false" @scrolltolower="doLoadMore">
|
|
<template #top>
|
|
<div :class="'top_bg'">
|
|
<customNavbar
|
|
:class="'index_top_navbar'"
|
|
:title="$t('addFriend.pageTitle')"
|
|
></customNavbar>
|
|
<div class="pl-[32rpx] pr-[32rpx] pt-[32rpx] pb-[32rpx]">
|
|
<customInput
|
|
:searchText="searchVal"
|
|
@inputSearchText="inputSearchText"
|
|
></customInput>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div class="add-friend">
|
|
<div class="add-friend-list" v-if="state.friendsList.length > 0">
|
|
<div
|
|
class="members-list-each"
|
|
v-for="(item, index) in state.friendsList"
|
|
:key="index"
|
|
@click="toUserDetail(item)"
|
|
>
|
|
<div class="members-info">
|
|
<avatarModule
|
|
:mode="1"
|
|
:avatar="item.avatar"
|
|
:groupType="0"
|
|
:userName="item.nickname"
|
|
:customStyle="{ width: '72rpx', height: '72rpx' }"
|
|
:customTextStyle="{
|
|
fontSize: '32rpx',
|
|
fontWeight: 'bold',
|
|
color: '#fff',
|
|
lineHeight: '44rpx',
|
|
}"
|
|
></avatarModule>
|
|
<div class="members-info-area">
|
|
<div
|
|
class="members-info-basic"
|
|
:style="{ padding: item.company_name ? 0 : '0 0 24rpx' }"
|
|
>
|
|
<span class="members-name">
|
|
{{ item.nickname }}
|
|
</span>
|
|
<span class="members-jobNum">
|
|
{{ item.job_num }}
|
|
</span>
|
|
<!-- <span class="members-company">{{ item.company_name }}</span> -->
|
|
</div>
|
|
<div class="members-positions-area">
|
|
<tm-popover position="bc">
|
|
<tm-scrolly :refresher="false" :height="84">
|
|
<div class="members-positions">
|
|
<div
|
|
class="members-positions-each"
|
|
v-for="(postionItem,
|
|
positionIndex) in item.user_position"
|
|
:key="positionIndex"
|
|
>
|
|
{{ postionItem.position_name }}
|
|
</div>
|
|
</div>
|
|
</tm-scrolly>
|
|
<template v-slot:label>
|
|
<tm-scrolly
|
|
:refresher="false"
|
|
:height="
|
|
item.user_position.length >= 4
|
|
? 180
|
|
: item.user_position.length === 3
|
|
? 140
|
|
: item.user_position.length === 2
|
|
? 100
|
|
: item.user_position.length === 1
|
|
? 60
|
|
: 0
|
|
"
|
|
>
|
|
<div class="members-positions-popover-box">
|
|
<div
|
|
class="members-positions-popover"
|
|
v-for="(postionItem,
|
|
positionIndex) in item.user_position"
|
|
:key="positionIndex"
|
|
>
|
|
{{ postionItem.position_name }}
|
|
</div>
|
|
</div>
|
|
</tm-scrolly>
|
|
</template>
|
|
</tm-popover>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="company-infos" v-if="item.company_name">
|
|
<div class="company-each">
|
|
<span>{{ item.company_name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="addressBook-noData" v-if="state.friendsList.length === 0">
|
|
<img src="@/static/image/search/search-no-data.png" />
|
|
<span>
|
|
{{
|
|
searchVal
|
|
? $t('addFriend.message.notFindData')
|
|
: $t('search.hint')
|
|
}}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</zPaging>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import customInput from '@/components/custom-input/custom-input.vue'
|
|
import zPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
|
|
import avatarModule from '@/components/avatar-module/index.vue'
|
|
import { ServeFriendSearch } from '@/api/addressBook/index'
|
|
import { handleSetWebviewStyle } from '@/utils/common'
|
|
|
|
import { ref, onMounted, reactive } from 'vue'
|
|
|
|
import { useI18n } from 'vue-i18n'
|
|
const { t } = useI18n()
|
|
|
|
const searchVal = ref('')
|
|
|
|
const state = reactive({
|
|
friendsListPage: 1, //当前查询的可添加好友列表分页
|
|
friendsListPageSize: 10, //可添加好友列表单页数量
|
|
friendsList: [], //可添加好友列表
|
|
hasMoreFriends: true, //是否还有更多可添加好友数据
|
|
})
|
|
|
|
onMounted(() => {
|
|
getFriendsList()
|
|
handleSetWebviewStyle()
|
|
})
|
|
|
|
//输入搜索内容
|
|
const inputSearchText = (e) => {
|
|
searchVal.value = e
|
|
}
|
|
|
|
//搜索可添加好友（精确搜索）
|
|
const getFriendsList = () => {
|
|
let params = {
|
|
name: searchVal.value,
|
|
}
|
|
ServeFriendSearch(params)
|
|
.then((res) => {
|
|
console.error(res)
|
|
if (res?.code === 200) {
|
|
if (state.friendsListPage === 1) {
|
|
state.friendsList = res.data?.user_list || []
|
|
} else {
|
|
state.friendsList = state.friendsList.concat(
|
|
res.data?.user_list || [],
|
|
)
|
|
}
|
|
if (state.friendsList.length < res.data?.count) {
|
|
state.hasMoreFriends = true
|
|
} else {
|
|
state.hasMoreFriends = false
|
|
}
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err)
|
|
})
|
|
}
|
|
|
|
//点击进入用户详情页面
|
|
const toUserDetail = (userInfo) => {
|
|
uni.navigateTo({
|
|
url:
|
|
'/pages/dialog/dialogDetail/userDetail??erpUserId=' +
|
|
userInfo.erp_user_id,
|
|
})
|
|
}
|
|
|
|
//加载更多数据
|
|
const doLoadMore = (e) => {
|
|
state.friendsListPage += 1
|
|
getFriendsList()
|
|
}
|
|
|
|
watch(
|
|
() => searchVal.value,
|
|
(newVal) => {
|
|
state.friendsListPage = 1
|
|
getFriendsList()
|
|
},
|
|
)
|
|
</script>
|
|
<style scoped lang="scss">
|
|
::v-deep .zp-paging-container-content {
|
|
height: 100%;
|
|
display: flex;
|
|
}
|
|
|
|
::v-deep .index_top_navbar .tmicon-angle-left {
|
|
color: #fff !important;
|
|
}
|
|
|
|
::v-deep .index_top_navbar .text-weight-b {
|
|
color: #fff !important;
|
|
}
|
|
|
|
::v-deep .index_top_navbar .statusHeightTop > .noNvueBorder:first-child {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.top_bg {
|
|
background: url('@/static/image/mine/page_top.png') no-repeat;
|
|
background-size: cover;
|
|
background-position: bottom center;
|
|
}
|
|
|
|
:deep(.animateAll_tabs_tmui) {
|
|
width: 120rpx !important;
|
|
height: 10rpx !important;
|
|
}
|
|
|
|
.add-friend-page {
|
|
.add-friend {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-image: url('@/static/image/clockIn/z3280@3x.png');
|
|
background-size: cover;
|
|
background-position: bottom center;
|
|
background-attachment: fixed;
|
|
width: 100%;
|
|
|
|
.add-friend-list {
|
|
margin: 30rpx 24rpx;
|
|
overflow: hidden;
|
|
flex: 1;
|
|
gap: 30rpx 0;
|
|
|
|
.members-list-each {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
width: 100%;
|
|
border-radius: 8rpx;
|
|
|
|
.swipe-action {
|
|
width: 100%;
|
|
overflow: visible !important;
|
|
|
|
:deep(.wd-swipe-action__right) {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #cf3050;
|
|
padding: 0 48rpx;
|
|
border-radius: 0 8rpx 8rpx 0;
|
|
span {
|
|
color: #fff;
|
|
line-height: 1;
|
|
font-size: 30rpx;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
|
|
.members-info {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
gap: 16rpx;
|
|
padding: 24rpx 24rpx 0;
|
|
|
|
.members-info-area {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
gap: 16rpx;
|
|
|
|
.members-info-basic {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
|
|
.members-name {
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
width: 150rpx;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.members-jobNum {
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
color: #999;
|
|
word-break: break-all;
|
|
margin: 10rpx 0 0;
|
|
}
|
|
|
|
.members-company {
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
color: #999;
|
|
}
|
|
}
|
|
.members-positions-area {
|
|
.members-positions {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
gap: 10rpx;
|
|
padding: 4rpx 0 0;
|
|
max-height: 84rpx;
|
|
overflow: hidden;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
|
|
.members-positions-each {
|
|
background-color: #eee9f8;
|
|
line-height: 1;
|
|
font-size: 24rpx;
|
|
padding: 4rpx 16rpx;
|
|
color: #46299d;
|
|
}
|
|
}
|
|
.members-positions-popover-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10rpx 0;
|
|
|
|
.members-positions-popover {
|
|
background-color: #eee9f8;
|
|
line-height: 1;
|
|
font-size: 24rpx;
|
|
padding: 8rpx 16rpx;
|
|
color: #46299d;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.company-infos {
|
|
margin: 0 0 0 88rpx;
|
|
padding: 0 0 24rpx 24rpx;
|
|
.company-each {
|
|
span {
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.addressBook-noData {
|
|
margin: 30rpx 24rpx;
|
|
overflow: hidden;
|
|
flex: 1;
|
|
gap: 30rpx 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
img {
|
|
width: 500rpx;
|
|
}
|
|
span {
|
|
font-size: 30rpx;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|