借鉴参考链接

  <template><div class="bxgd"><!-- 导航栏 --><!-- <div class="nav"><div class="user"@click="goback"><img src="./../../../../static/images/fh_btn@2x.png" /></div><div class="navTitle">通讯录</div><div class="tips"></div></div> --><!-- 搜索 --><div class="filter"><van-search v-model="query.data.searchStr"shape="round"background="#fff"@search="handleChange"></van-search><div class="search-icon"@click="handleChange"></div></div><!-- 主体 --><div class="main"><!-- 列表 --><div class="list"><van-index-bar v-if="!query.data.searchStr":index-list="indexList"><div v-for="(item,index) in mailData":key="index"><van-index-anchor :index="item.ch" /><van-cell v-for="(item2,index2) in item.data":key="index2"@click="showDia(item2.personnelPhone,item2.personnelName)">{{item2.departmentName}}-{{item2.personnelName}}</van-cell></div></van-index-bar><div v-else><van-cell v-for="(item2,index2) in allData":key="index2"@click="showDia(item2.personnelPhone,item2.personnelName)">{{item2.departmentName}}-{{item2.personnelName}}</van-cell></div></div></div><van-popup v-model="showphoneDia"position="bottom"round:style="{ height: '35%' }"><PhoneDia :ToPhone='ToPhone':ToName='ToName'></PhoneDia><div class="popup-close"@click="showphoneDia=false">取消</div></van-popup></div>
</template>记得加indexList 就从mailData里面提取ch的数组 不然可能点击跳转不对
<script>import { http } from "../../api/index";
import PinyinMatch from "pinyin-match";
import PhoneDia from "@/components/PhoneDia";  //电话弹框export default {components: {PhoneDia},data () {return {showphoneDia: false,ToPhone: '',ToName: '',query: {data: {searchStr: '',},},allData: [],indexList: [],mailData: [{ "ch": "A", "data": [{ "personnelPhone": "13600000000", "departmentName": "暗淡" }] },{ "ch": "B", "data": [{ "personnelPhone": "13600000000", "departmentName": "包子" }] },{ "ch": "C", "data": [{ "personnelPhone": "13600000000", "departmentName": "重庆" }] },{ "ch": "D", "data": [{ "personnelPhone": "13600000000", "departmentName": "地方" }] },{ "ch": "E", "data": [{ "personnelPhone": "13600000000", "departmentName": "二期" }] },{ "ch": "F", "data": [{ "personnelPhone": "13600000000", "departmentName": "发货" }] },{ "ch": "Z", "data": [{ "personnelPhone": "13600000000", "departmentName": "周岩" }] },{ "ch": "T", "data": [{ "personnelPhone": "13600000000", "departmentName": "田松" }] },{ "ch": "D", "data": [{ "personnelPhone": "13600000000", "departmentName": "玳瑁猫" }] },{ "ch": "J", "data": [{ "personnelPhone": "13600000000", "departmentName": "加菲猫" }, { "personnelPhone": "13600000000", "departmentName": "金渐层" }, { "personnelPhone": "13600000000", "departmentName": "橘猫" }] },{ "ch": "L", "data": [{ "personnelPhone": "13600000000", "departmentName": "蓝白猫" }, { "personnelPhone": "13600000000", "departmentName": "蓝猫" }, { "personnelPhone": "13600000000", "departmentName": "狸花猫" }, { "personnelPhone": "13600000000", "label": "狸花猫" }] }],isRefreshing: false, //是否处于刷新状态loading: false, //数据是否处于加载状态finished: true, //数据是否加载完毕listData: [],//列表数据activeNames: [0],activeNames2: [0],activeNames3: [0],activeNames4: [0],}},watch: {'query.data.searchStr' (val) {if (val) {let dataList = []// let mark = ''this.mailData.forEach(item => {if (item.data !== undefined) {item.data.forEach(i => {const a = `${i.personnelName}${i.departmentName}`if (PinyinMatch.match(a, val)) {dataList.push({ personnelPhone: i.personnelPhone, personnelName: i.personnelName, departmentName: i.departmentName })// mark = item.ch// console.log('dataList', dataList);}})}})this.allData = dataList}}},mounted () {// this.txlsearch();this.onLoadData()},filters: {formdataeg (val) {var resultPhone = val.replace(/^(\d{3})\d{4}(\d+)/, "$1****$2");return resultPhone},},methods: {showDia (phone, name) {this.ToPhone = phonethis.ToName = namethis.$nextTick(() => {this.showphoneDia = true})},//触发事件handleEvent (event) {switch (event) {//下拉刷新数据case "refresh":this.finished = false;this.loading = true;this.txlsearch();break;//上拉加载数据case "load":this.txlsearch();break;}},getnewchildren (item) {if (item.state == 0) {let formdata = new FormData()formdata.append('orgId', item.id)http.post(this.$api.sipingrivers.floodList, formdata).then(res => {if (res.data.code == 200) {// console.log(this.listData);console.log(item);this.addchildren(this.listData, item.id, res.data.data)// console.log(res.data.data);}})} else {return}},addchildren (arr, id, data) {console.log(arr, id, data);arr[0].children.map(item => {if (item.id == id) {item.children = data}})console.log(arr);},//返回到上一页goback () {// this.$router.push({//   path: "/fxyjment"// });},handleChange (name, index) {console.log(name);console.log('mailData', this.mailData);// this.listData = [];// this.txlsearch();},txlsearch () {if (this.isRefreshing) {this.listData = [];this.query.current = 1;this.isRefreshing = false;}http.post(this.$api.sipingrivers.getAddressList).then(res => {if (res.data.code === 200) {console.log(res.data.data);this.listData = res.data.datathis.loading = false;this.finished = true;} else {this.loading = false;this.finished = true;this.$toast({message: res.data.message,type: "fail"});}}).catch(() => {this.loading = false;this.finished = true;});},//请求数据onLoadData () {this.indexList = []this.mailData = []http.post(this.$api.floodprevention.getAddressList).then(res => {if (res.data.code === 200) {console.log(res.data.data);this.mailData = res.data.datares.data.data.map(item => {this.indexList.push(item.ch)})} else {this.loading = false;this.finished = true;this.$toast({message: res.data.message,type: "fail"});}}).catch(() => {this.loading = false;this.finished = true;});},}
}
</script>

<style lang="scss" scoped>
/deep/ .van-field__left-icon {display: none;
}.bxgd {width: 100%;height: 100%;overflow: hidden;
}.main {width: 100%;height: calc(100% - 0.44rem);overflow-y: auto;.list {width: 100%;height: 100%;/deep/ .van-pull-refresh {overflow-y: auto;height: 100%;}}
}.bxgd .filter {height: 0.44rem;position: relative;padding-top: 0;overflow: hidden;z-index: 99;
}.search-icon {position: absolute;right: 23px;top: 50%;transform: translateY(-50%);width: 24px;height: 24px;background: url("../../../static/images/newfxhj/gwmap/search.png") no-repeat;background-size: 100% 100%;
}.bxgd .list-item_field {height: 100%;min-height: 0.25rem;display: flex;justify-content: space-between;.label {display: flex;min-width: 67%;}.text {color: #000;font-size: 0.1225rem;font-weight: bold;margin-right: 0.0625rem;min-width: 0.425rem;text-align: center;}.personnelPhone {color: #999999;// max-width: 60%;}.icon {width: 20px;height: 20px;background: url("../../../static/images/newfxhj/messagecx/tel.png")no-repeat;background-size: 100% 100%;}
}.yiji {font-size: 0.125rem;font-weight: bold;
}/deep/ .dierji {.van-cell {// background-color: #f3f8ff;font-weight: bold;padding: 10px 0;}
}/deep/.van-search {padding-right: 52px;
}.bxgd .bigheight {min-height: 0.4rem;align-items: center;
}#phone2 {display: block;width: 100%;
}.popup-close {padding: 15px 0;text-align: center;font-size: 0.1575rem;
}
</style>

下面为弹框组件 多页面复制传值即可调用 因为新增了融云语音和视频功能所以需要区分开来

<template><div id="PhoneDia"><div><div class="popup-title">呼叫 {{ToName}}</div><div class="tonghua-item"@click="chaxunstatus(1)"><div class="svg-pix"><img :src="yuyin"></div><div>语音通话</div></div><div class="tonghua-item"@click="chaxunstatus(2)"><div class="svg-pix"><img :src="shipin"></div><div>视频通话</div></div><div class="tonghua-item"><div class="svg-pix"><img :src="putong"></div><a :href="'tel:'+ToPhone"id="phone2">普通电话</a></div><div class="popup-jianju"></div></div></div>
</template><script>
import { http } from "@/api/index";export default {props: {ToPhone: {type: String},ToName: {type: String}},data () {return {LoginPhone: JSON.parse(localStorage.getItem("userinfo")).phone,yuyin: require('../../static/images/address/yyth.svg'),shipin: require('../../static/images/address/spth.svg'),putong: require('../../static/images/address/ptdh.svg'),};},mounted () {},methods: {// 查询当前用户是否在线chaxunstatus (type) {let prams = {phone: this.ToPhone}http.post(this.$api.floodprevention.getUserStatus, prams).then(res => {if (res.data.code == 200) {let data = JSON.parse(res.data.data)if (data.status == 1) {// 1为在线switch (type) {case 1:this.setrongphone()break;case 2:this.setrongvideo()break;}} else {this.$toast({message: '当前呼叫人员不在线,请使用普通电话联系'});}}})},// 融云电话setrongphone () {console.log(this.LoginPhone, this.ToPhone);window.android.setrongphone(this.LoginPhone, this.ToPhone)},//融云视频setrongvideo () {console.log(this.LoginPhone, this.ToPhone);window.android.setrongvideo(this.LoginPhone, this.ToPhone)},}
};
</script><style lang="scss" scoped>
.popup-title {text-align: center;font-size: 0.1275rem;padding: 0.125rem;color: #969799;
}
.popup-jianju {height: 8px;width: 100%;background: #f2f1f6;
}.tonghua-item {padding: 10px;display: flex;align-items: center;font-size: 0.1475rem;border-top: 1px solid #efefef;
}.svg-pix {margin-right: 10px;height: 30px;width: 20px;img {width: 100%;height: 100%;fill: #000;}
}#phone2 {display: block;width: 100%;
}
</style>


仿照钉钉写的一个弹框(右侧为钉钉)

H5+vant 电话通讯录 安卓融云功能相关推荐

  1. 安卓融云SDK的使用,会话列表,1v1发起单聊

    安卓融云SDK的使用,会话列表,1v1发起单聊 1v1发起单聊 继承ConversationFragment 前提把融云该导入的SDK和UI包都导入一下,这个不多说,按照官方文档即可 不管是会话列表还 ...

  2. 融云 x 川航: 为民航通信安上“即时之翼”

    过去,川航一个航班仅完成出港准备.机组呼叫拖车这一个流程,就需要飞行员.运控调度.机务调度.拖车调度.拖车司机 5 人之间通过电话.对讲机等沟通至少 4 次.关注[融云 RongCloud],了解协同 ...

  3. 融云SDK实现类QQ即时通讯的前端开发

    一.概述 接到一个需求,需要在我们的客户端里实现类似QQ的社交功能,以方便玩家之间的沟通互动.我们的客户端是C++实现的,在开会讨论考虑到成本和时间问题,实现这个功能的任务交个了前端.为了简化说明,我 ...

  4. Android 融云IM集成以及使用详解(二)

    Android 融云IM集成以及使用详解(二) 上篇讲解了集成和好友列表和消息记录的使用,这篇将讲解聊天界面和群聊界面的使用 先附上一张效果图 先介绍布局文件 <LinearLayout xml ...

  5. 在“企业通讯录”的盲区,融云的边界与分寸

    一个完整的企业沟通工具(以下简称企业 IM),需要支持以下几个功能:IM 消息服务.通讯录管理.工作流集成.关注[融云 RongCloud],了解协同办公平台更多干货. 其中,企业通讯录是企业协同办公 ...

  6. Android安卓集成融云推送踩坑

    此文档单单接入推送,暂时没有用IM或其他 如果您觉得可以帮助到您,麻烦帮我点个赞. -------------------------------- 写在前面,为什么要用这个,我并不想,实际接入过程中 ...

  7. 融云 | 企业通讯录的设计与实现

    企业通讯录作为企业统一通信中其它业务功能的触发点,需要灵活.完备的功能和好用.便捷的人机界面,以便用户顺利完成业务协作,真正为企业运转提速,实现降本增效.关注[融云 RongCloud],了解协同办公 ...

  8. Vue Cli 3项目 使用融云IM实现聊天功能

    介绍:前台使用vue+vant开发的单页面,后台使用ant design pro单页面,实现手机端和后台聊天功能. 效果如图(PC+移动): 一.申请融云账号(token.appKey) 建议先看教程 ...

  9. 融云服务器实时消息路由,IM 北极星产品功能介绍

    IM 北极星 概述 IM 北极星主要为开发者提供了终端用户连接及消息发送状态查询功能:通过查看用户的连接日志,判断用户某时间段内是否可以正常使用融云服务,如:用户反馈消息发送不成功,可能是因为该用户在 ...

最新文章

  1. ThinkPhp插入数据到数据库
  2. LeetCode 1024. 视频拼接
  3. 初试poi HssfWorkBook导出excel
  4. 在RHEL6.2上,将一个分区开机自动挂载
  5. Unix环境高级编程学习笔记(五)
  6. java两个长度不同数组_两组数组,长度不一样,如果其中一个数组的值在另一个中不存在,则不符合要求.怎么算?...
  7. 面向失败的设计之播控系统!
  8. 希捷扩展PCIe产品组合 推出两款新闪存加速卡
  9. Linux系统常用命令(一)
  10. 分布式系统下数据一致性
  11. 为什么做AI的都选Python?
  12. HBase常用命令(超全超详细)
  13. 空号检测平台使用说明
  14. matlab抛物柱面 y 2=2x,求椭圆抛物面2y2+x2=z与抛物柱面2-x2=z的交线关于xOy面的投影柱面和在xOy面上的投影曲线方程...
  15. 解决阿里云轻量应用服务器不能安装应用
  16. AndroidIOS APP启动速度专项测试方法
  17. 无线耳机哪个品牌音质好?2023无线蓝牙耳机音质排行
  18. Ubuntu18.04平台下用GitHub搭建个人博客(含域名绑定和更换主题)
  19. 使用Wake On Lan远程唤醒
  20. 芯片封装的作用以及常见封装技术

热门文章

  1. 小甲鱼第一课(分支、字符串)
  2. Shell编程之免交互
  3. 创业项目-网赚项目 - 靠一份文档做到月入数万
  4. zigbee 终端设备如何离开当前网络
  5. 信用评分建模中样本容量不足怎么办
  6. C文件操作——文件的打开(fopen函数)和关闭(fclose函数)
  7. linux取消线程的原理,linux线程的取消(终止)方法
  8. 【解决】移动用户如何使用APP自行取消全国亲情网业务
  9. tooth的用法_关于tooth的用法总结大全
  10. Python【数学工具集项目】专栏——介绍(作者:CSDN用户(TDTX、philo42))【2021-07-09】