使用 APICloud AVM 框架封装通讯录组件

[{  "zkey": "A",  "children": [{    "name": "安强",    "phone": "11111111111",    "zkey": "A"  }]}, {  "zkey": "B",  "children": [{    "name": "边亮",    "phone": "11111111111",    "zkey": "B"  }, {    "name": "白菊",    "phone": "11111111111",    "zkey": "B"  }, {    "name": "贺之",    "phone": "11111111111",    "zkey": "B"  }, {    "name": "白梓",    "phone": "11111111111",    "zkey": "B"  }, {    "name": "卜军",    "phone": "11111111111",    "zkey": "B"  }]}]

<template>    <view>        <scroll-view class="page" scroll-y show-scrollbar="false" id="book">            <safe-area></safe-area>            <view class="item" v-for="(item, index) in list" v-show="item.children.length>0">                <view class="nav" id={item.zkey}>                    <text class="nav-title">{item.zkey}</text>                </view>                <view class="box" v-for="(it, pindex) in item.children" data-phone={it.phone}  @click="takePhone">                    <image class="avator" src='../../image/avator.png' mode="widthFix"></image>                    <view class="right">                        <text class="name">{it.name}</text>                    </view>                </view>            </view>             </scroll-view>        <scroll-view class="right-nav" scroll-y show-scrollbar="false">            <view class="right-nav-item" data-id={item.zkey} @click="scrollToE" v-for="(item, index) in list">                <text class={item.zkey==zIndex?'right-nav-item-on':'right-nav-item-off'}>{item.zkey}</text>            </view>        </scroll-view>    </view></template><script>    export default {        name: 'tell',        installed(){         },        props:{            list: Array        },        data() {            return{                zIndex:''            }        },        methods: {            scrollToE(e){                var id = e.target.dataset.id;                var book = document.getElementById('book');                book.scrollTo({                    view:id                })                this.data.zIndex = id;            },            takePhone(e){                var phone = e.target.dataset.phone;                this.fire('takeCall', phone);            }        }    }</script><style>    .page {        height: 100%;        background-color: #ffffff;    }    .nav{        margin: 0 10px;        padding: 0 10px;    }    .nav-title{        font-size: 20px;    }    .box{        flex-flow: row nowrap;        justify-content: flex-start;        align-items: center;        margin: 10px;        border-bottom: 1px solid #ccc;        padding-bottom: 10px;    }    .right{        padding-left: 20px;    }    .bt{        flex-flow: row nowrap;        justify-content: flex-start;        align-items: center;    }    .bt-position{        font-size: 14px;        color: #666666;    }    .bt-part{        font-size: 14px;        color: #666666;        padding-left: 20px;    }    .right-nav{        position: absolute;        right: 10px;        width: 30px;        padding: 30px 0;        height: 100%;        align-items: center;    }    .right-nav-item{        padding-bottom: 5px;    }    .right-nav-item-on{        color: #035dff;    }    .right-nav-item-off{        color: #666666;    }    .avator{        width: 30px;        padding: 5px;    }</style>

<template>    <view class="page">        <safe-area></safe-area>        <tell v-bind:list="bookdata" ontakeCall="takeCall"></tell>    </view></template><script>    import '../../components/tell.stml'    export default {        name: 'tellbook',        apiready(){//like created         },        data() {            return{                bookdata:[{"zkey":"A","children":[{"name":"安强","phone":"11111111111","zkey":"A"}]},{"zkey":"B","children":[{"name":"边玉亮","phone":"11111111111","zkey":"B"},{"name":"白文菊","phone":"11111111111","zkey":"B"},{"name":"步贺之","phone":"11111111111","zkey":"B"},{"name":"白梓蓉","phone":"11111111111","zkey":"B"},{"name":"卜冰军","phone":"11111111111","zkey":"B"}]},{"zkey":"#","children":[{"name":"asd","phone":"11111111111","zkey":"#"},{"name":"3455","phone":"11111111111","zkey":"#"},{"name":"*3dd","phone":"11111111111","zkey":"#"},{"name":"tyuuu","phone":"11111111111","zkey":"#"}]}]            }        },        methods: {            takeCall(e){                //console.log(JSON.stringify(e));                var phone = e.detail;                api.call({                    type: 'tel_prompt',                    number: phone                });            }        }    }</script><style>    .page {        height: 100%;    }</style>