453 lines
12 KiB
Vue
453 lines
12 KiB
Vue
<template>
|
||
<div class="outer-layer user-detail-page">
|
||
<div class="root">
|
||
<ZPaging ref="zPaging" :show-scrollbar="false">
|
||
<template #top>
|
||
<customNavbar class="tmNavBar"></customNavbar>
|
||
</template>
|
||
<div class="user-detail-info">
|
||
<div class="user-info-head user-info-card">
|
||
<div class="user-info-avatar">
|
||
<img
|
||
:src="state?.userInfo?.avatar"
|
||
v-if="state?.userInfo?.avatar"
|
||
/>
|
||
<span
|
||
v-if="!state?.userInfo?.avatar"
|
||
class="text-[46rpx] font-bold"
|
||
>
|
||
{{
|
||
state?.userInfo?.nickname.length >= 2
|
||
? state?.userInfo?.nickname.slice(-2)
|
||
: state?.userInfo?.nickname
|
||
}}
|
||
</span>
|
||
</div>
|
||
<div class="user-info">
|
||
<span class="text-[40rpx] font-medium user-info-name">
|
||
{{ state?.userInfo?.nickname }}
|
||
</span>
|
||
<span
|
||
class="text-[28rpx] font-medium user-info-job-num"
|
||
v-if="state?.userInfo?.job_num"
|
||
>
|
||
{{ $t('user.info.jobNum') + '：' + state?.userInfo?.job_num }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="user-info-main user-info-card">
|
||
<div class="user-info-main-title">
|
||
<img src="@/static/image/mine/ming001@3x.png" />
|
||
<span class="text-[28rpx] font-medium">
|
||
{{ $t('index.mine.basic') }}
|
||
</span>
|
||
</div>
|
||
<div class="user-info-main-list">
|
||
<div
|
||
class="user-info-main-each"
|
||
v-for="(item, index) in state.userBasicInfos"
|
||
:key="index"
|
||
>
|
||
<span class="text-[28rpx] font-medium user-info-main-each-hint">
|
||
{{ item.name }}
|
||
</span>
|
||
<span class="text-[28rpx] font-medium user-info-main-each-text">
|
||
{{ item.value }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<template #bottom>
|
||
<customBtn
|
||
:isBottom="true"
|
||
:btnText="
|
||
state.canSendMsg
|
||
? $t('user.detail.sendMsg')
|
||
: $t('addressBook.btns.addFriend')
|
||
"
|
||
:subBtnText="
|
||
!state.canSendMsg || state.userInfo.sys_id === state.uid
|
||
? ''
|
||
: $t('user.detail.ringBell')
|
||
"
|
||
@clickBtn="checkSendPermission"
|
||
@clickSubBtn="handleCall"
|
||
></customBtn>
|
||
</template>
|
||
</ZPaging>
|
||
</div>
|
||
<tm-drawer
|
||
placement="bottom"
|
||
v-model:show="state.isShowPhoneCall"
|
||
:hideHeader="true"
|
||
:height="416"
|
||
:round="6"
|
||
>
|
||
<div class="do-phone-call">
|
||
<div class="do-phone-call-header">
|
||
<span>{{ $t('popup.title.phone') }}</span>
|
||
<img
|
||
src="@/static/image/login/check-circle-filled@3x.png"
|
||
@click="hidePhoneCallPopup"
|
||
/>
|
||
</div>
|
||
<div class="do-phone-call-number">
|
||
<span>{{ state.phoneNumber }}</span>
|
||
</div>
|
||
<div class="do-phone-call-btn">
|
||
<customBtn
|
||
:btnText="$t('do.phone.call')"
|
||
@clickBtn="doPhoneCall"
|
||
></customBtn>
|
||
</div>
|
||
</div>
|
||
</tm-drawer>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import customBtn from '@/components/custom-btn/custom-btn.vue'
|
||
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { reactive } from 'vue'
|
||
|
||
import { useTalkStore, useUserStore } from '@/store'
|
||
const talkStore = useTalkStore()
|
||
const userStore = useUserStore()
|
||
|
||
import { getUserInfoByClickAvatar } from '@/api/user/index'
|
||
import { ServeCheckFriend, ServeAddFriend } from '@/api/addressBook/index'
|
||
|
||
import { useI18n } from 'vue-i18n'
|
||
const { t } = useI18n()
|
||
|
||
const state = reactive({
|
||
erpUserId: '', //erp用户id
|
||
userInfo: null, //用户详情
|
||
userBasicInfos: [], //用户基本信息
|
||
isShowPhoneCall: false, //是否显示电话拨号弹框
|
||
phoneNumber: '', //手机号
|
||
uid: computed(() => userStore.uid), //当前用户id
|
||
canSendMsg: false, //是否可以发送消息（是好友或同公司别），如果不可以就需要先加好友
|
||
})
|
||
|
||
onLoad((options) => {
|
||
console.log(options)
|
||
if (options.erpUserId) {
|
||
state.erpUserId = Number(options.erpUserId)
|
||
getUserInfo()
|
||
}
|
||
})
|
||
|
||
//获取用户信息
|
||
const getUserInfo = () => {
|
||
let params = {
|
||
erp_user_id: state.erpUserId,
|
||
}
|
||
console.log(params)
|
||
const resp = getUserInfoByClickAvatar(params)
|
||
console.log(resp)
|
||
resp.then(({ code, data }) => {
|
||
console.log(data)
|
||
if (code == 200) {
|
||
state.userInfo = data
|
||
checkNeedAddFriend()
|
||
let department = ''
|
||
let post = ''
|
||
if (data?.erp_dept_position?.length > 0) {
|
||
data.erp_dept_position.forEach((item) => {
|
||
if (!department) {
|
||
department = item.department_name
|
||
} else {
|
||
department = department + '、' + item.department_name
|
||
}
|
||
if (!post) {
|
||
post = item.position_name
|
||
} else {
|
||
post = post + '、' + item.position_name
|
||
}
|
||
})
|
||
}
|
||
|
||
let hasAddDepartment = department.split('、')
|
||
let uniqueArr = [...new Set(hasAddDepartment)]
|
||
department = uniqueArr.join('、')
|
||
|
||
let manager = ''
|
||
if (data?.leaders?.length > 0) {
|
||
data.leaders.forEach((item) => {
|
||
if (!manager) {
|
||
manager = item.user_name
|
||
} else {
|
||
manager = manager + '、' + item.user_name
|
||
}
|
||
})
|
||
}
|
||
state.userBasicInfos = [
|
||
{
|
||
name: t('index.mine.company'),
|
||
value: data.company_name,
|
||
},
|
||
{
|
||
name: t('index.mine.department'),
|
||
value: department,
|
||
},
|
||
{
|
||
name: t('index.mine.post'),
|
||
value: post,
|
||
},
|
||
{
|
||
name: t('index.mine.manager'),
|
||
value: manager,
|
||
},
|
||
{
|
||
name: t('index.mine.phone'),
|
||
value: data.tel_num,
|
||
},
|
||
{
|
||
name: t('index.mine.entry'),
|
||
value: data.enter_date,
|
||
},
|
||
]
|
||
state.phoneNumber = data.tel_num
|
||
} else {
|
||
}
|
||
})
|
||
|
||
resp.catch(() => {})
|
||
}
|
||
|
||
//点击唤起拨号弹框
|
||
const handleCall = () => {
|
||
state.isShowPhoneCall = true
|
||
}
|
||
|
||
//点击隐藏拨号弹框
|
||
const hidePhoneCallPopup = () => {
|
||
state.isShowPhoneCall = false
|
||
}
|
||
|
||
//点击对用户发起单聊
|
||
const toTalkUser = () => {
|
||
talkStore.toTalk(1, state.userInfo.sys_id, state.erpUserId)
|
||
}
|
||
|
||
//点击拨打唤起拨号
|
||
const doPhoneCall = () => {
|
||
uni.makePhoneCall({
|
||
phoneNumber: state.phoneNumber,
|
||
success: () => {
|
||
console.log('拨号成功')
|
||
},
|
||
fail: (err) => {
|
||
console.error('失败:', err)
|
||
},
|
||
})
|
||
}
|
||
|
||
//检查是否可以发送消息，如果不可以要先添加好友
|
||
const checkSendPermission = () => {
|
||
if (state.canSendMsg) {
|
||
toTalkUser()
|
||
} else {
|
||
doAddFriend()
|
||
}
|
||
}
|
||
|
||
//校验是否需要加好友
|
||
const checkNeedAddFriend = () => {
|
||
let params = {
|
||
receiver_id: state.userInfo.sys_id, //聊天的用户id
|
||
talk_type: 1,
|
||
}
|
||
ServeCheckFriend(params).then((res) => {
|
||
console.log(res)
|
||
if (res?.code === 200) {
|
||
state.canSendMsg = res.data?.is_friend || false
|
||
}
|
||
})
|
||
}
|
||
|
||
//主动加好友（单向好友）
|
||
const doAddFriend = () => {
|
||
let params = {
|
||
receiver_id: state.userInfo.sys_id, //聊天的用户id
|
||
talk_type: 1,
|
||
}
|
||
ServeAddFriend(params).then((res) => {
|
||
console.log(res)
|
||
if (res?.code === 200) {
|
||
message.success(t('addressBook.message.addSuccess') + ' !')
|
||
state.canSendMsg = true
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.outer-layer {
|
||
flex: 1;
|
||
background-image: url('@/static/image/mine/1111.png');
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.tmNavBar {
|
||
::v-deep .noNvueBorder {
|
||
border-bottom: 0 !important;
|
||
background-color: unset !important;
|
||
box-shadow: unset !important;
|
||
}
|
||
}
|
||
|
||
.user-detail-page {
|
||
.user-detail-info {
|
||
padding: 86rpx 32rpx 0;
|
||
.user-info-card {
|
||
background-color: #fff;
|
||
box-shadow: 0 6px 12px 2px rgba(188, 188, 188, 0.08);
|
||
border-radius: 8rpx;
|
||
}
|
||
.user-info-head {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
padding: 20rpx 32rpx;
|
||
.user-info-avatar {
|
||
width: 154rpx;
|
||
height: 154rpx;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
background: linear-gradient(to right, #674bbc, #46299d);
|
||
box-shadow: 0 6px 12px 2px rgba(70, 41, 157, 0.16);
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
span {
|
||
line-height: 64rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.user-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
margin: 0 0 0 32rpx;
|
||
.user-info-name {
|
||
line-height: 56rpx;
|
||
color: $theme-text;
|
||
}
|
||
.user-info-job-num {
|
||
margin: 12rpx 0 0;
|
||
line-height: 40rpx;
|
||
color: #b4b4b4;
|
||
}
|
||
}
|
||
}
|
||
.user-info-main {
|
||
margin: 20rpx 0 0;
|
||
padding: 0 18rpx;
|
||
.user-info-main-title {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
padding: 38rpx 12rpx 32rpx;
|
||
img {
|
||
width: 36rpx;
|
||
height: 40rpx;
|
||
}
|
||
span {
|
||
line-height: 40rpx;
|
||
color: $theme-text;
|
||
margin: 0 0 0 20rpx;
|
||
}
|
||
}
|
||
.user-info-main-list {
|
||
.user-info-main-each {
|
||
padding: 14rpx;
|
||
border-top: 1px solid $theme-border-color;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
.user-info-main-each-hint {
|
||
line-height: 40rpx;
|
||
color: $theme-text;
|
||
width: 112rpx;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
.user-info-main-each-text {
|
||
margin: 0 0 0 56rpx;
|
||
line-height: 40rpx;
|
||
color: #747474;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.do-phone-call {
|
||
.do-phone-call-header {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 42rpx 0;
|
||
position: relative;
|
||
span {
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
color: #747474;
|
||
font-weight: 400;
|
||
}
|
||
img {
|
||
position: absolute;
|
||
top: 44rpx;
|
||
right: 30rpx;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
}
|
||
.do-phone-call-number {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 32rpx 0;
|
||
border-top: 2rpx solid #e7e7e7;
|
||
border-bottom: 2rpx solid #e7e7e7;
|
||
span {
|
||
font-size: 32rpx;
|
||
line-height: 44rpx;
|
||
color: #1a1a1a;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
.do-phone-call-btn {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 50rpx 0;
|
||
:deep(.custom-btn-class) {
|
||
width: 690rpx;
|
||
font-size: 32rpx;
|
||
line-height: 44rpx;
|
||
padding: 18rpx 0;
|
||
height: 80rpx;
|
||
background: linear-gradient(to right, #674bbc, #46299d);
|
||
}
|
||
}
|
||
}
|
||
</style>
|