Recently, the small program project needs such a demand as the address
book. The simple rendering is as
follows. First, we need to adjust the background interface to obtain the name and other information, and convert the obtained Chinese name into pinyin. What we do here is to convert the initials of the name. The abbreviated format of uppercase (for example: "Ahn'Qiraj" is converted to "AQL") here only needs the first letter of the first word of the name, which can be realized by using the interception function of js. Here I use js- pinyin, render the converted content to the page.
The first step is to download the js-pinyin package
(you can refer to this )
npm install js-pinyin
The second step is to introduce js-pinyin in main.js
import pinyin from 'js-pinyin'
The third step is to call the interface in the methdos function to obtain the data of the name, and the obtained data structure is as shown in the figure below. The
fourth step processes the obtained data to obtain the following data structure
// 处理获取的数据
for (let k in this.List) {
this.employeeNameList.push(this.List[k].employeeName + ' ' + this.List[k].phoneNumber)
}
After processing the modified data structure, the following data structure is obtained for our use
let firstName = {
};
this.AlphabetList.forEach((item, index) => {
firstName[item] = [];
this.employeeNameList.forEach((el) => {
/** 主要在这一句，el代表每个名字如 “安琪拉” ，
pinyin.getFirstLetter(el) 取的是名字的首字母 “AQL” ，
.substring(0, 1) 就是只取第一个字符 ‘A’ **/
let first = pinyin.getFirstLetter(el).substring(0, 1);
if (first == item) {
firstName[item].push(el)
}
})
})
this.firstName = firstName
Look at the html code part again, use the van-index-bar component in the vant library, if you don’t know, you can refer to the vant official website address
<van-index-bar >
<view wx:for="{
{firstName}}" wx:for-index="key" wx:for-item="value">
<!--显示 A-Z -->
<van-index-anchor index='{
{key}}'>
</van-index-anchor>
<!--遍历每个字母对应的名字数组-->
<view style="margin-left: 40rpx;height: 60rpx;line-height: 60rpx;color: #848484;padding: 15rpx;font-size: 42rpx;" wx:for='{
{value}}' wx:for-item='employeeName' @tap="callphone(`${employeeName}`)">{
{
employeeName}}
</view>
</view>
</van-index-bar>
The fifth step is to bind the callphone event on the html code, define the callphone event in methods, and use it to dial the phone after clicking
// 传入号码拨打电话
callphone(phone) {
console.log('传入的电话', phone);
let phonename = phone
console.log('传入的电话名字', phonename);
this.List.forEach((item, index) => {
if (item.employeeName === phone) {
phone = item.phoneNumber
}
})
console.log(phone)
const res = uni.getSystemInfoSync();
// ios系统默认有个模态框
if (res.platform == 'ios') {
uni.makePhoneCall({
phoneNumber: phone,
success() {
console.log('拨打成功了');
},
fail() {
console.log('拨打失败了');
}
})
} else {
//安卓手机手动设置一个showActionSheet
uni.showActionSheet({
itemList: [phone, '呼叫'],
success: function(res) {
console.log(res);
if (res.tapIndex == 1) {
uni.makePhoneCall({
phoneNumber: phone
})
}
}
})
}
}
}
The details are relatively cumbersome, and the overall code is provided to everyone, and the code can be modified according to your own needs.
<template>
<view class="">
<view class="" v-if="show"></view>
<van-index-bar v-else>
<view wx:for="{
{firstName}}" wx:for-index="key" wx:for-item="value">
<!--显示 A-Z -->
<van-index-anchor index='{
{key}}'>
</van-index-anchor>
<!--遍历每个字母对应的名字数组-->
<view
style="margin-left: 40rpx;height: 60rpx;line-height: 60rpx;color: #848484;padding: 15rpx;font-size: 42rpx;"
wx:for='{
{value}}' wx:for-item='employeeName' @tap="callphone(`${employeeName}`)">{
{
employeeName}}
</view>
</view>
</van-index-bar>
</view>
</template>
<script>
import pinyin from "wl-pinyin";
export default {
data() {
return {
show: false,
token: '',
phoneNumber: '',
firstName: {
},
employeeNameList: [],
indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
AlphabetList: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T",
"W", "X", "Y", "Z"
],
List: [{
"createdAt": "2020-08-27 18:06:53",
"employeeName": "安琪拉",
"objectId": "4a3eed5344",
"phoneNumber": "18012251502",
"serialNumber": "1",
"updatedAt": "2020-08-27 18:06:53",
},
{
"createdAt": "2020-08-27 18:06:53",
"employeeName": "蔡文姬",
"objectId": "4a3eed5344",
"phoneNumber": "18012251500",
"serialNumber": "1",
"updatedAt": "2020-08-27 18:06:53",
},
{
"createdAt": "2020-08-27 18:06:53",
"department": "总经理办公室",
"employeeName": "貂蝉",
"objectId": "4a3eed5344",
"phoneNumber": "15330220110",
"serialNumber": "1",
"staffPosition": "总经理",
"updatedAt": "2020-08-27 18:06:53",
"username": "18012251502"
},
{
"createdAt": "2020-08-27 18:06:53",
"department": "总经理办公室",
"employeeName": "东皇太一",
"objectId": "4a3eed5344",
"phoneNumber": "10000220110",
"serialNumber": "1",
"staffPosition": "总经理",
"updatedAt": "2020-08-27 18:06:53",
"username": "18012251502"
},
{
"createdAt": "2020-08-27 18:06:53",
"department": "生产部",
"employeeName": "吕布",
"objectId": "7236fed315",
"phoneNumber": "18257122100",
"serialNumber": "41",
"staffPosition": "装配",
"updatedAt": "2020-08-27 18:06:53",
"username": "18257122100"
},
{
"createdAt": "2020-08-27 18:06:53",
"department": "技术部",
"employeeName": "赵云",
"objectId": "6a1daa9a80",
"phoneNumber": "15852855556",
"serialNumber": "42",
"staffPosition": "管理员",
"updatedAt": "2020-08-27 18:07:26",
"username": "15852855556"
}, ,
{
"createdAt": "2020-08-27 18:06:53",
"department": "技术部",
"employeeName": "甄姬",
"objectId": "6a1daa9a80",
"phoneNumber": "15852855556",
"serialNumber": "42",
"staffPosition": "管理员",
"updatedAt": "2020-08-27 18:07:26",
"username": "15852855556"
}, ,
{
"createdAt": "2020-08-27 18:06:53",
"department": "技术部",
"employeeName": "妲己",
"objectId": "6a1daa9a80",
"phoneNumber": "15852851116",
"serialNumber": "42",
"staffPosition": "管理员",
"updatedAt": "2020-08-27 18:07:26",
"username": "15852855556"
}, ,
{
"createdAt": "2020-08-27 18:06:53",
"department": "技术部",
"employeeName": "妲己",
"objectId": "6a1daa9a80",
"phoneNumber": "15852800006",
"serialNumber": "42",
"staffPosition": "管理员",
"updatedAt": "2020-08-27 18:07:26",
"username": "15852855556"
}
]
}
},
onShow() {
// 判断是否登录 登录显示通讯录
this.token = uni.getStorageSync('token')
if (this.token == '') {
this.show = true
uni.showModal({
content: '请先登录',
showCancel: true,
success(res) {
if (res.confirm) {
uni.reLaunch({
url: '/pages/views/login'
})
}
}
});
}
},
onLoad() {
// 判断是否登录 登录显示通讯录
this.token = uni.getStorageSync('token')
if (this.token == '') {
this.show = true
uni.showModal({
content: '请先登录',
showCancel: true,
success(res) {
if (res.confirm) {
uni.reLaunch({
url: '/pages/views/login'
})
}
}
});
}
// 处理获取的数据
for (let k in this.List) {
// this.employeeNameList.push(this.List[k].employeeName)
this.employeeNameList.push(this.List[k].employeeName + ' ' + this.List[k].phoneNumber)
// this.phoneNumber.push(this.List[k].phoneNumber)
}
console.log(this.employeeNameList, '名字列表')
let firstName = {
};
this.AlphabetList.forEach((item, index) => {
firstName[item] = [];
this.employeeNameList.forEach((el) => {
/** 主要在这一句，el代表每个名字如 “安琪拉” ，
pinyin.getFirstLetter(el) 取的是名字的首字母 “AQL” ，
.substring(0, 1) 就是只取第一个字符 ‘A’ **/
let first = pinyin.getFirstLetter(el).substring(0, 1);
if (first == item) {
firstName[item].push(el)
}
})
})
this.firstName = firstName
console.log(this.firstName, '7878')
},
methods: {
// 传入号码拨打电话
callphone(phone) {
console.log('传入的电话', phone);
let phonename = phone
console.log('传入的电话ming', phonename);
this.List.forEach((item, index) => {
if (item.employeeName === phone) {
phone = item.phoneNumber
}
})
console.log(phone)
const res = uni.getSystemInfoSync();
// ios系统默认有个模态框
if (res.platform == 'ios') {
uni.makePhoneCall({
phoneNumber: phone,
success() {
console.log('拨打成功了');
},
fail() {
console.log('拨打失败了');
}
})
} else {
//安卓手机手动设置一个showActionSheet
uni.showActionSheet({
itemList: [phone, '呼叫'],
success: function(res) {
console.log(res);
if (res.tapIndex == 1) {
uni.makePhoneCall({
phoneNumber: phone
})
}
}
})
}
}
}
}
</script>
<style>
</style>