145 lines
3.6 KiB
Vue
145 lines
3.6 KiB
Vue
<template>
|
|
<view>
|
|
<missthee-indexlist @select-item='selectHandler'
|
|
:data="txlList"></missthee-indexlist>
|
|
|
|
<u-loading-page :loadingText="loadingPageData.loadingText" :image="loadingPageData.image"
|
|
:iconSize="loadingPageData.iconSize" :loadingMode="loadingPageData.loadingMode"
|
|
:bgColor="loadingPageData.bgColor" :loading="loading" :color="loadingPageData.color"
|
|
:loadingColor="loadingPageData.loadingColor">
|
|
</u-loading-page>
|
|
<m-tabbar fixed fill :current="2" :tabbar="tabbar"></m-tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import TabbarConfig from '@/totalTabbar.js'
|
|
import {
|
|
pinyin
|
|
} from "@/api/convertPinyin.js";
|
|
import {
|
|
getAddressList
|
|
} from "@/api/index.js"
|
|
import '../../components/missthee-indexlist/missthee-indexlist.vue'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
tabbar: TabbarConfig,
|
|
indexList: [],
|
|
txlList: {},
|
|
loading: false,
|
|
loadingPageData: {
|
|
// 自定义提示内容
|
|
loadingText: '',
|
|
// 自定义图片
|
|
image: '',
|
|
// 自定义加载动画模式
|
|
loadingMode: 'spinner',
|
|
// 自定义背景色
|
|
bgColor: 'rgba(0, 0, 0, 0.3)',
|
|
color: '#eee',
|
|
loadingColor: '#ddd',
|
|
iconSize: 28
|
|
},
|
|
}
|
|
},
|
|
onShow() {
|
|
this.indexList = "ABCDEFGHIJKLMNOPQRSTUVWXYZ#".split("")
|
|
this.getAddressList()
|
|
},
|
|
methods: {
|
|
selectHandler(e) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: e.phone, // 电话号码
|
|
success: function() {
|
|
console.log('Call succeeded');
|
|
},
|
|
fail: function() {
|
|
console.log('Call failed');
|
|
}
|
|
});
|
|
},
|
|
getAddressList() {
|
|
this.loading = true
|
|
|
|
var _this = this
|
|
getAddressList({}).then(response => {
|
|
this.loading = false
|
|
console.log("开始处理" + new Date())
|
|
if (response.code == 200) {
|
|
this.txlList = this.sortContacts(response.data, "username");
|
|
console.log("结束处理" + new Date())
|
|
} else {
|
|
uni.$u.toast('获取通讯录失败');
|
|
}
|
|
});
|
|
},
|
|
/** JS 按 A-Z 排序通讯录(中文、英文、特殊字符)
|
|
* @param arrList 需要排序的数组
|
|
* @param char 指定排序的字段
|
|
* @param isAll 是否显示全部类型(true.A ~ Z全部显示 false.只显示已有的值)
|
|
* @returns {*[]|null} 返回结果 { initial: "", data: [] }
|
|
*/
|
|
sortContacts(arrList, char = "username", isAll = false) {
|
|
if (!String.prototype.localeCompare) return null;
|
|
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ#".split(""); // ABCDEFGHIJKLMNOPQRSTUVWXYZ
|
|
const zh = "阿八嚓哒妸发旮哈*讥咔垃痳拏噢妑七呥涩它**穵夕丫帀".split("");
|
|
const result = []; // 最终数据
|
|
let curr = {}; // 当前数据循环
|
|
for (let i = 0; i < letters.length; i++) {
|
|
curr[letters[i]] = []
|
|
}
|
|
arrList.forEach((item, index) => {
|
|
// if(index>4){
|
|
// return
|
|
// }
|
|
const initial = item[char].trim().charAt(0); // 截取第一个字符
|
|
const chinaName = pinyin.getFullChars(initial).charAt(0).toUpperCase();
|
|
item["id"] = index;
|
|
if (letters.includes(chinaName)) {
|
|
curr[chinaName].push(item);
|
|
} else {
|
|
// console.log(chinaName, item)
|
|
curr["#"].push(item);
|
|
}
|
|
});
|
|
return curr;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #ffffff !important;
|
|
}
|
|
|
|
.list {
|
|
|
|
&__item {
|
|
@include flex;
|
|
padding: 6px 12px;
|
|
align-items: center;
|
|
|
|
&__avatar {
|
|
height: 35px;
|
|
width: 35px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
&__user-name {
|
|
font-size: 16px;
|
|
margin-left: 10px;
|
|
color: $u-main-color;
|
|
}
|
|
}
|
|
|
|
&__footer {
|
|
color: $u-tips-color;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
margin: 15px 0;
|
|
}
|
|
}
|
|
</style> |