chat-pc/src/components/user/UserCardModal.vue

<script lang="ts" setup>
import { ref, computed, reactive } from 'vue'
import { CloseOne, Male, Female, SendOne } from '@icon-park/vue-next'
import { ServeSearchUser } from '@/api/contact'
import { ServeCreateContact } from '@/api/contact'
import { ServeContactGroupList, ServeContactMoveGroup, ServeEditContactRemark } from '@/api/contact'
import { useTalkStore } from '@/store'
import { useRouter } from 'vue-router'
import xNModal from '@/components/x-naive-ui/x-n-modal/index.vue'
import { NSkeleton } from 'naive-ui'
const router = useRouter()
const talkStore = useTalkStore()
const emit = defineEmits(['update:show', 'update:uid', 'updateRemark'])
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  uid: {
    type: Number,
    default: 0
  }
})

const loading = ref(true)
const isOpenFrom = ref(false)
const userInfo: any = ref({
  id: 0,
  avatar: '',
  gender: 0,
  mobile: '',
  motto: '',
  nickname: '',
  remark: '',
  email: '',
  status: 1,
  text: ''
})

const editCardPopover: any = ref(false)
const modelRemark = ref('')

const options = ref<any>([])
// const groupName = computed(() => {
//   const item = options.value.find((item: any) => {
//     return item.key == state.group_id
//   })

//   if (item) {
//     return item.label
//   }

//   return '未设置分组'
// })

const onLoadData = () => {
  ServeSearchUser({
    erp_user_id: props.uid
  }).then(({ code, data }) => {
    if (code == 200) {
      userInfo.value = data

      // modelRemark.value = state.remark

      loading.value = false
    } else {
      window['$message'].info('用户信息不存在', { showIcon: false })
    }
  })

  // ServeContactGroupList().then((res) => {
  //   if (res.code == 200) {
  //     let items = res.data.items || []
  //     options.value = []
  //     for (const iter of items) {
  //       options.value.push({ label: iter.name, key: iter.id })
  //     }
  //   }
  // })
}

const onToTalk = () => {
  talkStore.toTalk(1, props.uid, router)
  emit('update:show', false)
}

// const onJoinContact = () => {
//   if (!state.text.length) {
//     return window['$message'].info('备注信息不能为空')
//   }

//   ServeCreateContact({
//     friend_id: props.uid,
//     remark: state.text
//   }).then((res) => {
//     if (res.code == 200) {
//       isOpenFrom.value = false
//       window['$message'].success('申请发送成功')
//     } else {
//       window['$message'].error(res.message)
//     }
//   })
// }

// const onChangeRemark = () => {
//   ServeEditContactRemark({
//     friend_id: props.uid,
//     remark: modelRemark.value
//   }).then(({ code, message }) => {
//     if (code == 200) {
//       editCardPopover.value.setShow(false)
//       window['$message'].success('备注成功')
//       state.remark = modelRemark.value

//       emit('updateRemark', {
//         user_id: props.uid,
//         remark: modelRemark.value
//       })
//     } else {
//       window['$message'].error(message)
//     }
//   })
// }

// const handleSelectGroup = (value) => {
//   ServeContactMoveGroup({
//     user_id: props.uid,
//     group_id: value
//   }).then(({ code, message }) => {
//     if (code == 200) {
//       state.group_id = value
//       window['$message'].success('分组修改成功')
//     } else {
//       window['$message'].error(message)
//     }
//   })
// }

// const reset = () => {
//   loading.value = true

//   Object.assign(state, {
//     id: 0,
//     avatar: '',
//     gender: 0,
//     mobile: '',
//     motto: '',
//     nickname: '',
//     remark: '',
//     email: '',
//     status: 1,
//     text: ''
//   })

//   isOpenFrom.value = false
// }

// const onUpdate = (value) => {
//   if (!value) {
//     setTimeout(reset, 100)
//   }

//   emit('update:show', value)
// }

const onAfterEnter = () => {
  onLoadData()
}
</script>

<template>
  <x-n-modal content-style="padding:0;" :closable="false" class="w-311px min-h-445px" style="border-radius: 10px;overflow:hidden;" :show="show"  :on-after-enter="onAfterEnter">
    <div class="section relative px-7px pt-82px pb-20px">
      <div class="absolute top-9px right-7px pointer z-10" @click="emit('update:show', false)">
        <img class="w-20px h-20px" src="@/assets/image/close.png" alt="">
      </div>
      
      <template v-if="loading">
        <div class="flex py-10px bg-#fff px-16px rounded-4px items-center mb-10px">
          <div class="w-59px h-59px rounded-8px mr-12px overflow-hidden">
            <n-skeleton circle height="59px" width="59px" />
          </div>
          <div class="w-full">
            <n-skeleton text style="width: 80%; margin-bottom: 5px;" />
            <n-skeleton text style="width: 60%;" />
          </div>
        </div>
        <div class="bg-#fff rounded-4px mb-20px">
          <div class="flex px-15px py-9px" v-for="i in 6" :key="i">
            <n-skeleton text style="width: 30%; margin-right: 10px;" />
            <n-skeleton text style="width: 60%;" />
          </div>
        </div>
        <div>
          <n-skeleton text style="width: 100%; height: 42px; border-radius: 4px;" />
        </div>
      </template>
      
      <template v-else>
        <div class="flex py-10px bg-#fff px-16px rounded-4px items-center mb-10px">
          <div class="w-59px h-59px  rounded-8px mr-12px overflow-hidden">
           <n-image width="59" :src="userInfo.avatar" >

           </n-image>
          </div>
          <div>
            <div class="text-#000 text-16px mb-5px">{{ userInfo.nickname }}</div>
            <div class="text-#ACACAC text-12px">工号：{{ userInfo.job_num }}</div>
          </div>
        </div>
        <div class="bg-#fff rounded-4px mb-20px">
          <div class="flex px-15px py-9px">
            <div class="text-#000 text-12px w-84px">公司别</div>
            <div class="text-#747474 text-12px">{{ userInfo.company_name }}</div>
          </div>
          <div class="flex px-15px py-9px">
            <div class="text-#000 text-12px w-84px">主管</div>
            <div class="text-#747474 text-12px">{{ userInfo.leaders?.map(x=>x.user_name)?.join(',') }}</div>
          </div>
          <div class="flex px-15px py-9px">
            <div class="text-#000 text-12px w-84px">部门</div>
            <div class="text-#747474 text-12px">{{ userInfo.erp_dept_position?.map(x=>x.department_name)?.join(',') }}</div>
          </div>
          <div class="flex px-15px py-9px">
            <div class="text-#000 text-12px w-84px">手机号</div>
            <div class="text-#747474 text-12px">{{ userInfo.tel_num }}</div>
          </div>
          <div class="flex px-15px py-9px">
            <div class="text-#000 text-12px w-84px">岗位</div>
            <div class="text-#747474 text-12px">{{ userInfo.erp_dept_position?.map(x=>x.position_name)?.join(',') }}</div>
          </div>
          <div class="flex px-15px py-9px">
            <div class="text-#000 text-12px w-84px">入职日期</div>
            <div class="text-#747474 text-12px">{{ userInfo.enter_date }}</div>
          </div>
        </div>
        <div>
          <n-button block color="#EEE9F8" text-color="#46299D"     @click="onToTalk">
              <div class="flex items-center justify-center py-11px">
                <img class="w-19.8px h-20px mr-15px" src="@/assets/image/faxi@2x.png" alt="">
                <span>发送消息</span>
              </div>
          </n-button>
        </div>
      </template>
    </div>
  </x-n-modal>
</template>

<style lang="less" scoped>
.section {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url('@/assets/image/zu6254@2x.png');
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--im-bg-color);

  .header {
    width: 100%;
    height: 230px;
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 20px;
    position: relative;
    overflow: hidden;

    &::before {
      width: 150px;
      height: 150px;
      content: '';
      position: absolute;
      z-index: 1;
      border-radius: 50%;
      right: -25%;
      top: -25%;
    }

    .nickname {
      position: absolute;
      bottom: 20px;
      width: 80%;
      height: 30px;
      font-size: 16px;
      line-height: 30px;
      text-align: center;
      color: #ffffff;
    }

    .gender {
      width: 20px;
      height: 20px;
      position: absolute;
      right: 122px;
      bottom: 65px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
    }

    .close {
      position: absolute;
      right: 20px;
      top: 20px;
      z-index: 1;
      &:hover {
        cursor: pointer;
        transform: scale(1.1);
      }
    }
  }

  .main {
    padding: 20px 30px;
    max-height: 300px;
    .motto {
      min-height: 26px;
      border-radius: 5px;
      padding: 5px 8px;
      line-height: 25px;
      background: #f3f5f7;
      color: var(--im-text-color);
      font-size: 12px;
      margin-bottom: 20px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      position: relative;
    }
  }

  .footer {
    height: 60px;
    padding: 0 15px;
  }
}

.infos {
  .info-item {
    height: 30px;
    width: 100%;
    margin: 3px 0;
    display: flex;
    align-items: center;

    .name {
      width: 45px;
      flex-shrink: 0;
      color: #625f5f;
    }

    .text {
      flex: 1 auto;
      margin-left: 5px;
    }

    .edit {
      text-decoration: underline;
      text-decoration-style: solid;
      text-underline-offset: 3px;
    }
  }
}

html[theme-mode='dark'] {
  .section {
    .header {
      background: #2c2c32;
    }

    .motto {
      background-color: rgb(44, 44, 50);
    }
  }

  .infos {
    .info-item {
      .name {
        color: #afabab;
      }
    }
  }
}
</style>