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

已于 2022-11-16 17:22:59 修改
阅读量850 收藏 2
点赞数 2
分类专栏： vue页面 文章标签： javascript 前端 开发语言
于 2022-08-21 14:57:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zongzi494/article/details/126450898
版权

借鉴参考链接

  <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 = phone
      this.ToName = name

      this.$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.data

          this.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.data
          res.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>

在这里插入图片描述
仿照钉钉写的一个弹框（右侧为钉钉）

zongzi_494
关注
专栏目录
vant-联系人卡片
weixin_57218747的博客
07-14 1984
vant https://vant-contrib.gitee.io/vant/#/zh-CN/ 安装:npm i vant 1 使用vant 1.1 按需引入组件 npm i babel-plugin-import -D 1.2 配置babel（新增配置） { "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ]
h5前端 调用手机通讯录
yfsir的博客
08-21 9350
要做一个手机短信邀请功能，代码如下： // 发送短信的内容 var dx ; // 数组 用来存放要发送的手机号 var arr=[]; var contacts_json = ''; // 先调取到手机通讯录 mui.plusReady(function () { plus.contacts.getAddressB...
微信小程序用vant组件制作通讯录
qq_41862164的博客
09-18 1580
微信小程序用vant组件制作通讯录 效果图： 代码如下： .wxml: 在这里插入<van-index-bar index-list="{{ indexList }}"> <view> <van-index-anchor index="省" use-slot="true">省级负责人</van-index-anchor> <view class='user' wx:for='{{provList}}'wx:key='name'&gt
vue vant 通讯录组件
weixin_47996469的博客
09-06 1748
1.处理数据 引入第三方库将汉字转换成拼音，再提取首字母去完成匹配 import pinyin from "wl-pinyin" 定义一个字母表数组 index:["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"] 格式化数据 this.index.forEach((item) => {
通讯录H5版
11-16
通讯录为H5版本，主要以html、ajax、css、js等来写通讯录页面
h5+vue+element+vant模板
11-03
在当前的Web开发领域，H5（HTML5）、Vue.js、Element UI以及Vant UI都是极为重要的技术组件，它们共同构建了一个高效、易用且功能丰富的前端开发框架。以下将详细解析这些技术及其在"露电官网h5"项目中的应用。 ...
基于vite+vuex+vue-router+vant3.0的h5应用框架，开箱即用
06-21
【标题】: "基于vite+vuex+vue-router+vant3.0的h5应用框架，开箱即用" 这个标题所代表的知识点聚焦在一套现代化的前端开发框架组合，用于构建高效、便捷的H5（HTML5）应用程序。其中涉及到的核心技术包括： 1. **...
Vue3.0+Vant3.0+Vue-Router4.0高仿微信记账本H5项目。.zip
最新发布
10-21
在这个“Vue3.0+Vant3.0+Vue-Router4.0高仿微信记账本H5项目”中，开发者利用这些技术来实现一个类似微信的移动记账应用程序，让用户可以在手机网页上方便地管理个人财务。 **Vue3.0**： Vue3.0是Vue.js框架的最新...
Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui）.zip
05-03
Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：...
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
安卓H5技术通讯录
04-24
在使用hbuilder构建安卓app时，无法直接使用java。需要使用js语言进行开发。plus对象集成了原生app需要的一些功能。其中h5中localstorage可以做本地数据存储
融云web+h5
09-05
已经忘了怎么打开，但是代码是可以用的。注释里面都有写。可以参考代码实现功能
基于融云H5网页实时聊天
12-26
利用三方融云api实现网页实时聊天 H5页面
Vue结合vant框架实现通讯录a-z排序
热门推荐
qq_34661750的博客
07-28 8万+
显示效果 实现的文件有， 工具：convertToPinyin.js 页面：friends.vue 代码 friends.vue 主要代码参考selectFriends方法调取数据成功后的信息过滤。 说明： 1.其中组件NavBar/Toast/Button/Cell/CellGroup我已在main.js中全局注册，若单独使用请在vue页面中配置，如何配置可参考vant官网。 提示：在main.js中进行全局注册，引入组件，然后使用Vue.component(Cell.name,Cell)对导入的组件进
vue项目之 拨打电话
岁末zzz的博客
06-10 1816
<button type="button" v-on:click="phoneCall('110')" >预约热线：110</button> export default { methods: { phoneCall: function (msg) { console.log(msg) //window.location.href =...
vant 验证手机号_vue3.0版聊天室|vue3+vant3.x仿微信聊天+朋友圈
weixin_29086203的博客
01-13 603
项目介绍随着vue3越来越稳定了，加上Vite工具的推出，2021年再一次让vue.js变得很受开发者青睐。今天给大家分享的是基于vue3.0+有赞vant3技术建构开发的仿微信app界面聊天实战案例。Vue3ChatRoom项目支持发送消息/emoj表情图、图片/视频预览、网址查看、长按菜单、红包/朋友圈等功能。Vue3+vant-ui实现下拉刷新、左滑菜单功能。Vue3+Image组件实现朋友...
Vant IndexBar 实现 A - Z 通讯录效果
Jaycee的小木屋
09-22 1737
先看下最终效果图，主要是渲染一个A - Z 的 通讯录。同样的，如果你要做的是城市列表，也可以参考一下。 这边是 Vant IndexBar 官方文档 方便你查阅。 之前的通讯录只是一个列表，名字没有顺序，查找起来不太方便，正好看到Vant组件库里有IndexBar这个组件，所以就立马换掉了，总的来说有以下两个步骤。 1. 格式化数据 一开始，后台给我的数据是这样的，而我只想要一个包含名字的列表就够了。 [ { "createdAt": "2020-08-27 18:06:53",
vue 拨打电话
u014678583的博客
10-17 618
亲测有效！ bindUrl(tel) { //tel为手机号码参数 window.location.href = `tel://${tel}`; },
vue3+ts+vant开发h5
08-20
使用Vant组件库可以快速搭建出漂亮且响应式的移动端界面，同时还提供了一些常用的功能和布局组件，方便开发者快速构建H5应用。 总结来说，使用Vue3结合TypeScript和Vant组件库的开发组合，我们可以获得更高效的开发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值