使用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>