uniIM/pages/pub/users.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
  <cu-custom bgImage="/static/bg.png" :isBack="true">
    <template v-slot:content>
      <text class="text-black">通讯录</text>
    </template>
  </cu-custom>
  <view class="cu-bar margin-left">
    <uni-easyinput placeholder="请输入姓名或者手机号搜索" type="search" v-model="keyword" :clearable="true" />
    <view class="action">
      <button class="cu-btn block bg-gray" style="height: 2.2rem" @tap="handleSearch">
        <text class="cuIcon-search"></text>
      </button>
    </view>
  </view>
  <view class="cu-list menu">
    <view  class="cu-item no-padding" v-for="(user) in users" :key="user.id" @tap="handleUser(user.id)">
      <vim-avatar :img="user.avatar" :name="user.name" />
      <view class="content padding-left">
        <view class="text-grey">{{ user.name }}</view>
      </view>
      <view class="action">
        <text class="cuIcon cuIcon-more"></text>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import VimAvatar from "@/components/VimAvatar.vue";
import UserApi from "@/api/UserApi";
import {ref} from "vue";
import type User from "@/mode/User";
import {onLoad} from "@dcloudio/uni-app";
import CuCustom from "@/colorui/components/cu-custom.vue";
import UniEasyinput from "@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
import MessageUtils from "@/utils/MessageUtils";
import Auth from "@/api/Auth";
const fontValue=ref(Auth.getfontSize());

const users = ref<Array<User>>([])
const keyword = ref<string>('')
const handleSearch = () => {
  if(keyword.value.trim() !== ''){
    UserApi.search(keyword.value.trim()).then((res) => {
      users.value = res.data;
    });
  }else {
    MessageUtils.message('请输入用户名或手机号')
  }
}

const handleUser = (id:string) => {
  uni.navigateTo({
    url: '/pages/pub/user?id=' + id
  })
}
onLoad((opt)=>{
  keyword.value = opt?.keyword
  handleSearch()
})
</script>

<style scoped>

</style>