借鉴参考链接

  <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. 2022-2028年中国自热米饭市场竞争策略及行业投资潜力预测报告
  2. java用1234组成,用javasecp代码展现数字1234可以组成多少个三位数
  3. 2021年春季学期-信号与系统-第十次作业参考答案-第五小题
  4. Jetson nano安装JupyterLab
  5. VTK:可视化之BillboardTextActor3D
  6. GridView的全选与反选
  7. GitLab创建项目 命令上传代码
  8. RestFull架构
  9. HNOI2019退役记
  10. AD域控exchange邮箱—powershell 程序暂停sleep 继续执行的方法
  11. 2013应届毕业生“人人网”校招应聘总结
  12. linux /proc/stat 计算线程cpu,Linux下用/proc/stat文件来计算cpu的利用率(附源码)
  13. Boost 库Program Options--第二篇
  14. 根据关键词获取多平台的商品列表接口解析
  15. 39个C语言小程序(适合新手)
  16. 音乐推荐,持续收集中
  17. CDH5.8安装说明
  18. 《拥抱》---梦中好友s:103
  19. linux srs安装教程,SRS环境搭建
  20. 商店管理系统的设计与实现

热门文章

  1. Linux内核基础篇——常用调试技巧汇总
  2. AUTOCAD——拉伸命令、拉长命令
  3. 五金冲压模具设计详细解说!
  4. 电容滤波、电感滤波、π型滤波比较
  5. 小白修神传~程序员成神之路
  6. android抽屉实现
  7. 类似于心理测试的游戏
  8. 2021年气象为何反常?未来会是神马?
  9. 第三章数据链路层测试题
  10. 【shaderforge小实例】 水中倒影