1

admin

2026-01-06 089bf5d2378b3c4a61d795b2a92bede2c193b771

 src/components/user/user-contacts/UserContacts.vue

New file
@@ -0,0 +1,402 @@
<template>
  <div class="lum-dialog-mask">
    <el-container class="lum-dialog-box">
      <el-header class="no-padding header no-select" height="60px">
        <p>我的联系人</p>
        <p class="tools"><i class="el-icon-close" @click="close" /></p>
      </el-header>
      <el-main class="main no-padding">
        <el-container class="full-height">
          <el-aside width="250px" class="aside-border">
            <el-container class="full-height no-select">
              <el-header
                class="no-padding search-header"
                :class="{ shadow: headerShadow }"
                height="50px"
              >
                <el-input
                  v-model="keywords"
                  clearable
                  size="small"
                  placeholder="搜索 | 好友 or 群组"
                  prefix-icon="el-icon-search"
                />
              </el-header>
              <el-main class="no-padding">
                <el-scrollbar
                  ref="scrollbar2"
                  class="full-height"
                  tag="section"
                  :native="false"
                >
                  <ul class="friend-items no-select">
                    <li
                      v-for="item in search"
                      :key="item.index_name"
                      @click="triggerContacts(item)"
                    >
                      <el-avatar
                        class="avatar"
                        style="margin-top: 5px"
                        :size="25"
                        :src="item.avatar"
                      >
                        <img src="~@/assets/image/detault-avatar.jpg" />
                      </el-avatar>
                      <span class="nickname">
                        [{{ item.type == 1 ? '友' : '群' }}] {{ item.nickname }}
                      </span>
                      <span class="select-btn">
                        <i
                          class="el-icon-success"
                          :class="{ 'i-color-green': item.checked }"
                        />
                      </span>
                    </li>
                  </ul>
                </el-scrollbar>
              </el-main>
            </el-container>
          </el-aside>

          <el-main class="no-padding">
            <el-container class="full-height">
              <el-header height="40px">
                <el-divider class="no-select" content-position="left">
                  <span style="color: #c4c5c7">
                    已选联系人 ({{ selected.length }})
                  </span>
                </el-divider>
              </el-header>
              <el-main>
                <el-scrollbar :native="false" tag="section" class="full-height">
                  <div class="selectd-items">
                    <div
                      v-for="item in selected"
                      :key="item.index_name"
                      class="selectd-item no-select"
                    >
                      <el-avatar :size="25" :src="item.avatar">
                        <img src="~@/assets/image/detault-avatar.jpg" />
                      </el-avatar>
                      <p>{{ item.nickname }}</p>
                      <div
                        class="triangle-topleft"
                        :class="{ group: item.type == 2 }"
                      ></div>
                      <div class="del-mask" @click="delContacts(item)">
                        <i class="el-icon-delete" />
                      </div>
                    </div>
                  </div>
                </el-scrollbar>
              </el-main>
            </el-container>
          </el-main>
        </el-container>
      </el-main>
      <el-footer height="50px" class="no-padding footer">
        <el-button size="small" plain @click="close">取消</el-button>
        <el-button type="primary" size="small" @click="confirm">
          确认选择<span v-show="selected.length">({{ selected.length }})</span>
        </el-button>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import { ServeGetContacts } from '@/api/contacts'
import { ServeGetGroups } from '@/api/group'

export default {
  name: 'UserContacts',
  data() {
    return {
      contacts: [],
      search: [],
      keywords: '',
      headerShadow: false,
    }
  },
  computed: {
    selected() {
      return this.contacts.filter(item => item.checked)
    },
  },
  watch: {
    keywords(val) {
      if (val == '') {
        this.search = this.contacts
      } else {
        this.search = this.contacts.filter(item => {
          return item.nickname.match(this.keywords) != null
        })
      }
    },
    contacts(arr) {
      if (this.keywords == '') {
        this.search = arr
      }
    },
  },
  mounted() {
    this.scrollEvent()
  },
  created() {
    this.loadFriends()
    this.loadUserGroups()
  },
  methods: {
    //触发选择联系人事件
    triggerContacts(item) {
      let index = this.contacts.findIndex(val => {
        return val.index_name == item.index_name
      })

      this.contacts[index].checked = !this.contacts[index].checked
    },
    //取消选中的联系人
    delContacts(item) {
      let index = this.contacts.findIndex(val => {
        return val.index_name == item.index_name
      })

      this.contacts[index].checked = false
    },
    //移除所有选中选项
    delAll() {
      this.contacts.forEach((item, i) => {
        this.contacts[i].checked = false
      })
    },
    //关闭窗口
    close(e) {
      this.delAll()
      this.$emit('close')

      e.stopPropagation();
    },
    //确认按钮点击事件
    confirm() {
      const arr = this.selected.map(item => ({
        id: item.id,
        type: item.type,
      }))

      this.$emit('confirm', arr)
    },

    //加载好友列表
    loadFriends() {
      ServeGetContacts().then(res => {
        if (res.code == 200) {
          for (let o of res.data) {
            this.contacts.push({
              id: o.id,
              type: 1,
              index_name: `1_${o.id}`,
              nickname: o.friend_remark ? o.friend_remark : o.nickname,
              avatar: o.avatar,
              checked: false,
            })
          }
        }
      })
    },

    //加载群聊列表接口
    loadUserGroups() {
      ServeGetGroups().then(res => {
        if (res.code == 200) {
          for (let o of res.data.rows) {
            this.contacts.push({
              id: o.id,
              type: 2,
              index_name: `2_${o.id}`,
              nickname: o.group_name,
              avatar: o.avatar,
              checked: false,
            })
          }
        }
      })
    },

    // 监听自定义滚动条事件
    scrollEvent() {
      let scrollbarEl = this.$refs.scrollbar2.wrap
      scrollbarEl.onscroll = () => {
        this.headerShadow = scrollbarEl.scrollTop > 0
      }
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.el-scrollbar__wrap {
  overflow-x: hidden;
}

.lum-dialog-box {
  width: 650px;
  max-width: 650px;
  height: 550px;

  .main {
    .aside-border {
      border-right: 1px solid #f5eeee;
    }
  }

  .footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 10px;
    border-top: 1px solid #f5eeee;
  }
}

.search-header {
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;

  &.shadow {
    box-shadow: 0 2px 6px 0 rgba(31, 35, 41, 0.05);
  }
}

.friend-items {
  li {
    padding: 10px;
    cursor: pointer;
    position: relative;

    &:hover {
      background: #f5f5f5;
    }

    .avatar {
      margin-top: 3px;
    }

    .nickname {
      width: 60%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      position: absolute;
      top: 10px;
      left: 52px;
      height: 35px;
      line-height: 35px;
      font-weight: 400;
      font-size: 13px;
    }

    .select-btn {
      position: absolute;
      width: 32px;
      height: 35px;
      right: 3px;
      top: 10px;
      line-height: 35px;
      text-align: center;

      i {
        color: #ccc;
      }

      .i-color-green {
        color: #26bcfe !important;
      }
    }
  }
}

.group-from {
  label {
    height: 45px;
    line-height: 47px;
    width: 50px;
    color: #606266;
    padding-right: 3px;
    font-size: 13px;
  }

  input {
    height: 25px;
    width: 100%;
    text-indent: 3px;
    color: #a9a4a4;
    font-size: 12px;
    border-bottom: 1px solid #efebeb;
  }
}

.selectd-items {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;

  .selectd-item {
    width: 23%;
    height: 65px;
    margin: 6px 2px 0px 2px;
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 0px 0px 3px 0 rgba(0, 0, 0, 0.1);

    .triangle-topleft {
      width: 0;
      height: 0;
      border-top: 15px solid #03a9f4;
      border-right: 15px solid transparent;
      position: absolute;
      top: 0;
      left: 0;

      &.group {
        border-top: 15px solid #ff9800;
      }
    }

    p {
      width: 90%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 10px;
      margin-top: 8px;
      text-align: center;
    }

    .del-mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(31, 35, 41, 0.5);
      display: none;
      justify-content: center;
      align-items: center;
      color: white;
      transition: ease 0.5s;
      border-radius: 2px;
    }

    &:hover .del-mask {
      display: flex;
    }
  }
}
</style>