uniapp打开通讯录页面实现

热度:772020-09-01 08:30 收藏 0 点赞 0

项目要求:点击页面按钮,打开通讯录。这个通讯录不是真实的手机通讯录,而是本地的通讯录,后台录入的通讯。点击用户信息,能获取用户的姓名和手机号。


前台页面:

<div class="mui-input-row">
	<label>巡查人员</label>
	<input type="hidden" name="user" id="user" class="jz-input mui-input-clear" placeholder="">
	<span style="width:64%;position: absolute; top: 5px;" onclick="opentx()" id="gettongxun" >打开通讯录</span>
</div>
JS打开
 
				 function opentx(){
				  
					 //iframe层
					 layer.open({
					 index:'oif',
					 type: 2,
					 title: '通讯录',
					 shadeClose: true,
					 shade: 0.8,
					 area: ['80%', '70%'],
					 content: "/common/tongxun" //iframe的url
					 });
				 }

通讯页面:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <link href="{$tpl}index/css/mui.min.css" rel="stylesheet" />
        <link href="{$tpl}tongxun/css/mui.indexedlist.css" rel="stylesheet" />
        <style>
            html,
            body {
                height: 100%;
                overflow: hidden;
            }
            .mui-bar {
                -webkit-box-shadow: none;
                box-shadow: none;
            }

        .oa-contact-cell.mui-table .mui-table-cell {
            padding: 10px 0;
            vertical-align: middle;
        }

        .oa-contact-cell {
            position: relative;
            margin: -11px 0;
        }

        .oa-contact-avatar {
            width: 75px;
        }

        .oa-contact-avatar img {
            border-radius: 50%;
            width: 50px;
            height: 50px;
        }

        .oa-contact-content {
            width: 100%;
        }

        .oa-contact-name {
            margin-right: 20px;
        }

        .oa-contact-name,
        .oa-contact-position {
            float: left;
        }
        </style>
    </head>

    <body>

        <div class="mui-content">
            <div id='list' class="mui-indexed-list">
                <div class="mui-indexed-list-search mui-input-row mui-search">
                    <input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索用户">
                </div>
                <div class="mui-indexed-list-bar">
                    <a>A</a>
                    <a>B</a>
                    <a>C</a>
                    <a>D</a>
                    <a>E</a>
                    <a>F</a>
                    <a>G</a>
                    <a>H</a>
                    <a>I</a>
                    <a>J</a>
                    <a>K</a>
                    <a>L</a>
                    <a>M</a>
                    <a>N</a>
                    <a>O</a>
                    <a>P</a>
                    <a>Q</a>
                    <a>R</a>
                    <a>S</a>
                    <a>T</a>
                    <a>U</a>
                    <a>V</a>
                    <a>W</a>
                    <a>X</a>
                    <a>Y</a>
                    <a>Z</a>
                </div>
                <div class="mui-indexed-list-alert"></div>
                <div class="mui-indexed-list-inner">
                    <div class="mui-indexed-list-empty-alert">没有数据</div>
                        <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
						{loop table="tongxun" as="v"}
                            <li data-value="ZHA" data-tags="{fun pinyin($v['name'])}" class="mui-table-view-cell mui-indexed-list-item">
                                <div class="mui-slider-cell">
                                    <div class="oa-contact-cell mui-table">
                                        
                                        <div onclick="choose('{$v['name']}',{$v['id']})" class="oa-contact-content mui-table-cell">
                                            <div class="mui-clearfix">
                                                <h4 class="oa-contact-name">{$v['name']}</h4>
                                                <span class="oa-contact-position mui-h6"></span>
                                            </div>
                                            <p class="oa-contact-address mui-h6">
                                                {$v['tel']}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </li>
						{/loop}
                           


                        </ul>
                </div>
            </div>
        </div>
        <script src="{$tpl}index/js/mui.min.js"></script>
        <script src="{$tpl}tongxun/js/mui.indexedlist.js"></script>
        <script src="{$tpl}index/js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            mui.init();
            mui.ready(function() {
                var header = document.querySelector('header.mui-bar');
                var list = document.getElementById('list');
                //calc hieght
                list.style.height = (document.body.offsetHeight) + 'px';
                //create
                window.indexedList = new mui.IndexedList(list);
            });
			
			function choose(a,id){
			console.log(a);
				window.parent.$('#gettongxun').text(a);
				window.parent.$('#user').val(id);
				window.parent.close_f();
			}
            
        </script>
    </body>

</html>


暂无评论
登录后才可以评论~立即登录

如何获取资源?

您可以关注底部公众号,回复文章提示的 “ 关键词 ” 获取对应资源。

每日分享

每日分享收集的网络资源,其中包含开源项目、小工具、常用软件,以及音频视频、电子书籍等。

分享两个远程工具-ToDesk和向日葵

分享两个远程工具-ToDesk和向日葵...

在工作生活中经常用到远程,QQ远程很卡,第三方远程工具就比较方便了。

爱奇艺万能播放器2018年完整版

爱奇艺万能播放器2018年完整版

2018年的爱奇艺万能播放器,功能齐全,没有广告!

分享500套个人求职简历模板

分享500套个人求职简历模板

500套免费求职简历下载!

一款最近很火的自动跳过广告APP,无root直装版

一款最近很火的自动跳过广告APP,...

自动跳过广告,无需root

WPS免费去广告电脑软件

WPS免费去广告电脑软件

wps广告实在太多了,下载一个去广告版本

强制突破进入好友QQ空间

强制突破进入好友QQ空间

一款突破好友进入QQ空间的软件