H5+vant 电话通讯录安卓融云功能

借鉴参考链接

  <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 电话通讯录安卓融云功能相关推荐

安卓融云SDK的使用，会话列表，1v1发起单聊
安卓融云SDK的使用,会话列表,1v1发起单聊 1v1发起单聊继承ConversationFragment 前提把融云该导入的SDK和UI包都导入一下,这个不多说,按照官方文档即可不管是会话列表还 ...
融云 x 川航: 为民航通信安上“即时之翼”
过去,川航一个航班仅完成出港准备.机组呼叫拖车这一个流程,就需要飞行员.运控调度.机务调度.拖车调度.拖车司机 5 人之间通过电话.对讲机等沟通至少 4 次.关注[融云 RongCloud],了解协同 ...
融云SDK实现类QQ即时通讯的前端开发
一.概述接到一个需求,需要在我们的客户端里实现类似QQ的社交功能,以方便玩家之间的沟通互动.我们的客户端是C++实现的,在开会讨论考虑到成本和时间问题,实现这个功能的任务交个了前端.为了简化说明,我 ...
Android 融云IM集成以及使用详解(二)
Android 融云IM集成以及使用详解(二) 上篇讲解了集成和好友列表和消息记录的使用,这篇将讲解聊天界面和群聊界面的使用先附上一张效果图先介绍布局文件 <LinearLayout xml ...
在“企业通讯录”的盲区，融云的边界与分寸
一个完整的企业沟通工具(以下简称企业 IM),需要支持以下几个功能:IM 消息服务.通讯录管理.工作流集成.关注[融云 RongCloud],了解协同办公平台更多干货. 其中,企业通讯录是企业协同办公 ...
Android安卓集成融云推送踩坑
此文档单单接入推送,暂时没有用IM或其他如果您觉得可以帮助到您,麻烦帮我点个赞. -------------------------------- 写在前面,为什么要用这个,我并不想,实际接入过程中 ...
融云 | 企业通讯录的设计与实现
企业通讯录作为企业统一通信中其它业务功能的触发点,需要灵活.完备的功能和好用.便捷的人机界面,以便用户顺利完成业务协作,真正为企业运转提速,实现降本增效.关注[融云 RongCloud],了解协同办公 ...
Vue Cli 3项目使用融云IM实现聊天功能
介绍:前台使用vue+vant开发的单页面,后台使用ant design pro单页面,实现手机端和后台聊天功能. 效果如图(PC+移动): 一.申请融云账号(token.appKey) 建议先看教程 ...
融云服务器实时消息路由,IM 北极星产品功能介绍
IM 北极星概述 IM 北极星主要为开发者提供了终端用户连接及消息发送状态查询功能:通过查看用户的连接日志,判断用户某时间段内是否可以正常使用融云服务,如:用户反馈消息发送不成功,可能是因为该用户在 ...

H5+vant 电话通讯录安卓融云功能

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

最新文章

热门文章

H5+vant 电话通讯录 安卓融云功能

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

最新文章

热门文章

H5+vant 电话通讯录安卓融云功能

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