chat-app/src/pages/dialog/dialogDetail/userDetail.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="/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="$t('user.detail.sendMsg')"
            :subBtnText="$t('user.detail.ringBell')"
            @clickBtn="toTalkUser"
            @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="/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 } from '@/store'
const talkStore = useTalkStore()

import { getUserInfoByClickAvatar } from '@/api/user/index'

import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const state = reactive({
  erpUserId: '', //erp用户id
  userInfo: null, //用户详情
  userBasicInfos: [], //用户基本信息
  isShowPhoneCall: false, //是否显示电话拨号弹框
  phoneNumber: '', //手机号
})

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
      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)
    },
  })
}
</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;
        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>