uniIM/pages/friend/index.vue

<template>
  <!-- <view class="chat_content" @touchmove.stop.prevent> -->
  <view>
    <cu-custom bgImage="/static/barBG.png" :isBack="false">
      <template v-slot:content>
		  <text style="letter-spacing: 4rpx;font-style: italic;color:black;font-weight: bold;">通讯录</text>
      </template>
      <template v-slot:right>
        <text class="cuIcon cuIcon-add text-black text-bold" @tap="newFriend"></text>
      </template>
    </cu-custom>
    <view class="cu-bar bg-white solid-bottom margin-top" @tap="toValidateFriend">
      <view class="action">
        <text class="cuIcon-title text-orange"></text>
        <text class="text-black text-bold">新的朋友</text>
      </view>
      <view class="action">
        <view class="cu-tag bg-cyan" v-if="friendStore.waitValidateList.length>0">{{ friendStore.waitValidateList.length }}</view>
      </view>
    </view>
    <!-- <index-bar :index-map="map" :bottom="true" class="tab-bar-mar"> -->
      <view v-for="(item,key) in map.keys()" :key="key">
        <view :class="'indexItem-' + item" :id="'indexes-' + item" :data-index="item">
          <view class="padding">{{ item }}</view>
          <view class="cu-list menu-avatar no-padding">
            <view class="cu-item" v-for="(user) in map.get(item)" :key="user.id" @touchmove="handleListTouchMove"
                  @touchstart="handleListTouchStart" @touchend="handleListTouchEnd" :data-target="'move-box-' + user.id"
                  :class="modalName==='move-box-'+ user.id?'move-cur':''" @tap="showFriend(user.id)">
              <vim-avatar :img="user.avatar" :name="user.name" />
              <view class="content">
                <view class="text-black text-jiachu">{{ user.name }}</view>
                <view class="text-black text-sm">
                  {{ user.name }}
                </view>
              </view>
              <view class="move">
                <view class="bg-red" @tap.stop="delFriend(user.id)">删除</view>
              </view>
            </view>
          </view>

        </view>
      </view>
	  <view style="height: 150rpx;"></view>
    <!-- </index-bar> -->

    <view class="cu-modal" :class="show?'show':''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content text-black text-bold">添加好友</view>
          <view class="action" @tap="hideModal">
            <text class="cuIcon-close text-red text-bold"></text>
          </view>
        </view>
        <view class="bg-white">
          <view class="cu-bar search bg-white">
            <view class="search-form">
              <text class="cuIcon-search"></text>
              <input type="text" v-model="mobile" placeholder="搜索用户名或手机号" confirm-type="search"/>
            </view>
            <view class="action">
              <button class="cu-btn bg-green text-bold" @tap="search">搜索</button>
            </view>
          </view>
          <view class="cu-list menu-avatar" style='max-height: 20vh;overflow-y: scroll'>
            <view @click="check(user)"  class="cu-item no-padding" v-for="(user) in users" :key="user.id">
              <vim-avatar :img="user.avatar" :name="user.name" />
              <view class="content">
                <view class="text-grey">{{ user.name }}</view>
              </view>
              <view class="action">
                <text class="cuIcon text-cyan" :class="user.id === checkedUserId?'cuIcon-check':''"></text>
              </view>
            </view>
          </view>
        </view>
        <view class='padding'>
          <textarea placeholder='验证消息' class='solid padding text-sm textarea bg-white' v-model='message'></textarea>
        </view>
        <view class="cu-bar bg-white">
          <view class="action margin-0 flex-sub text-green solid-left text-bold" @tap="hideModal">取消</view>
          <view class="action margin-0 flex-sub text-bold solid-left" @tap="addFriend">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {getCurrentInstance, ref} from "vue";
import FriendApi from "@/api/FriendApi";
import UserApi from "@/api/UserApi";
import Tools from "@/utils/Tools";
import MessageUtils from "@/utils/MessageUtils";
import CuCustom from '@/colorui/components/cu-custom.vue'
import IndexBar from '@/components/IndexBar.vue'
import type User from "@/mode/User";
import {useUserStore} from "@/store/userStore";
import {useFriendStore} from "@/store/friendStore";
import {handleListTouchEnd, handleListTouchMove, handleListTouchStart, modalName} from "@/hooks/useMoveMenu";
import VimAvatar from "@/components/VimAvatar.vue";

const friendStore = useFriendStore();
//@ts-ignore
const {proxy} = getCurrentInstance();

const map = ref(new Map());
const show = ref(false);
const message = ref<string>("");
const mobile = ref('');

const checkedUserId = ref('');

const userStore = useUserStore()

const users = ref<User[]>([]);


const check = (user: User) => {
  checkedUserId.value = user.id
}

const loadFriends = () => {
  FriendApi.friends().then(res => {
	  console.log(res);
    map.value = Tools.listToMap(res.data);
  })
  
  UserApi.currentUser()
      .then((res) => {
		  console.log('currentUser',res);
        userStore.setUser(res.data);
        uni.setStorageSync('userId', res.data.id)
      });
}

const search = () => {
  UserApi.search(mobile.value.trim()).then((res) => {
    users.value = res.data;
  });
}

const addFriend = () => {
  if (checkedUserId.value) {
    FriendApi.add({ friendId: checkedUserId.value, message: message.value })
        .then((res) => {
          loadFriends();
          MessageUtils.message(res.msg);
          friendStore.notifyFlushFriendStore(checkedUserId.value)
          show.value = false;
        })
        .catch((res) => {
          MessageUtils.message(res.msg);
        });
  }else {
    MessageUtils.message('请选择好友');
  }
}

/**
 * 删除好友
 */
const delFriend = (friendId: string) => {
  uni.showModal({
    title: '提示',
    content: '是否删除好友？',
    cancelText: '取消',
    confirmText: '确定',
    success: res => {
      if (res.confirm) {
        FriendApi.delete(friendId).then(() => {
          loadFriends();
        });
      }
    }
  })
};

const showFriend = (id: string) => {
	console.log('currentUser',useUserStore().getUser())
  uni.navigateTo({
    url: '/pages/pub/user?id=' + id
  })
};

const newFriend = () => {
  message.value = '';
  show.value = true;
}

const toValidateFriend = () => {
  uni.navigateTo({
    url: '/pages/friend/validate'
  })
}

const hideModal = () => {
  show.value = false;
}

loadFriends();
</script>

<style scoped>
.chat_content {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
}
.cu-modal {
  z-index: 999;
}
.textarea{
  height: 10vh;
  width: 100%;
}
</style>