无限级通讯录
WXML
<view class='title-container'>
<view class="title" wx:for="{{branchTitle}}" wx:key="key" wx:for-index="index" wx:for-item="item" bindtap='toPre' data-level="{{item.level}}">
<block wx:if="{{index==0}}">
<text>{{item.title}}</text>
</block>
<block wx:else>
<image class='next-icon' mode='aspectFit' src='/resource/cal/next.png'></image>
<text>{{item.title}}</text>
</block>
</view>
</view>
<view class='address-container'>
<view class='address-list' wx:for="{{address}}" wx:key="keyL" wx:for-index="indexL" wx:for-item="itemL">
<block wx:if="{{itemL.type == 'branch'}}">
<view class='address-one' bindtap='toId' data-id="{{itemL.id}}">
<view class='left' style='background-color:red'>
<view>{{itemL.name_slice}}</view>
</view>
<view class='right'>
<view class='name-container'>
<text class='name'>{{itemL.name}}</text>
</view>
</view>
</view>
</block>
<block wx:elif="{{itemL.type == 'people'}}">
<view class='address-one'>
<view class='left'>
<view>{{itemL.name_slice}}</view>
</view>
<view class='right'>
<view class='name-container'>
<text class='name'>{{itemL.name}}</text>
<text class='job'>{{itemL.job}}</text>
</view>
<view class='tel-container'>
<text class='tel'>{{itemL.tel}}</text>
</view>
</view>
</view>
</block>
</view>
</view>
JS
// pages/addressbook/addressbook.js
const util = require('../../utils/util.js')
Page({
/**
* 页面的初始数据
*/
data: {
address: [],
branchTitle: [{
'level': 0,
'title': '总部'
}],
level: 0,
},
toId: function (e) {
console.log(e)
var id = e.currentTarget.dataset.id
var address = this.id2Detail(id)
var title = this.id2Title(id)
var oldBranchTitle = this.data.branchTitle
var length = oldBranchTitle.length
var branchTitle = oldBranchTitle
branchTitle = branchTitle.concat([{
'level': length + 1,
'title': title
}])
var obj = {
'address': JSON.stringify(address),
'branchTitle': JSON.stringify(branchTitle)
}
var str = util.obj2Query(obj)
wx.navigateTo({
url: '/pages/addressbook/addressbook?' + str,
})
console.log(address)
},
toPre: function (e) {
var level = e.currentTarget.dataset.level
var currentLevel = this.data.level
console.log(currentLevel)
console.log('currentLevel - level = ' + currentLevel + '-' + level + '=' + (currentLevel - level))
if (currentLevel - level != 0) {
wx.navigateBack({
delta: currentLevel - level
})
}
},
addressFormat: function (address = []) {
var i
for (i in address) {
if (address[i].type == 'branch') {
address[i]['name_slice'] = address[i].name.substr(0, 2)
} else if (address[i].type == 'people') {
address[i]['name_slice'] = address[i].name.substr(address[i].name.length - 2, 2)
}
}
return address
},
id2Title: function (id) {
var address = this.data.address
var i
for (i in address) {
if (address[i].id == id) {
return address[i].name
}
}
},
id2Detail: function (id) {
var address = this.data.address
var i
for (i in address) {
if (address[i].id == id) {
return address[i].subclass
}
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log('onLoad')
console.log(options)
if (options.hasOwnProperty('address')) {
var address = JSON.parse(options.address)
var branchTitle = JSON.parse(options.branchTitle)
var level = branchTitle[branchTitle.length - 1].level
address = this.addressFormat(address)
this.setData({
address: address,
branchTitle: branchTitle,
level: level
})
} else {
this.init()
}
},
init: function () {
var address = [{
'id': 1,
'name': '总经办',
'type': 'branch',
'subclass': [{
'id': 2,
'type': 'people',
'name': '张震岳',
'job': '法务',
'tel': '18888888888'
},
{
'id': 3,
'type': 'people',
'name': '李宇春',
'job': '法务',
'tel': '18888888868'
},
]
},
{
'id': 4,
'name': '人事行政部',
'type': 'branch',
'subclass': [{
'id': 5,
'type': 'people',
'name': '佐助',
'job': '人事总监',
'tel': '1883333668'
},
{
'id': 6,
'type': 'people',
'name': '鸣人',
'job': '招聘主管',
'tel': '1666688888'
}
]
},
{
'id': 8,
'name': '运营部',
'type': 'branch',
'subclass': [{
'id': 5,
'type': 'people',
'name': '易烊千玺',
'job': '运营总监',
'tel': '1883333668'
},
{
'id': 6,
'type': 'people',
'name': '王源',
'job': '总监助理',
'tel': '1666688888'
},
{
'id': 8,
'name': '华北区',
'type': 'branch',
'subclass': [{
'id': 8,
'name': '北京芍药居',
'type': 'branch',
'subclass': [{
'id': 5,
'type': 'people',
'name': '爱德华',
'job': '人事总监',
'tel': '1883333668'
},
{
'id': 6,
'type': 'people',
'name': '阿尔冯思',
'job': '招聘主管',
'tel': '1666688888'
}
]
},
{
'id': 38,
'name': '天津芥园道',
'type': 'branch',
'subclass': [{
'id': 25,
'type': 'people',
'name': '若林源三',
'job': '人事总监',
'tel': '1883333668'
},
{
'id': 6,
'type': 'people',
'name': '大空翼',
'job': '招聘主管',
'tel': '1666688888'
}
]
},
{
'id': 5,
'type': 'people',
'name': '郑少秋',
'job': '华北区总监',
'tel': '1883333668'
},
{
'id': 6,
'type': 'people',
'name': '刘德华',
'job': '华北区总监助理',
'tel': '1666688888'
}
]
},
{
'id': 12,
'name': '西南区',
'type': 'branch',
'subclass': [{
'id': 18,
'name': '昆明汇都店',
'type': 'branch',
'subclass': [{
'id': 5,
'type': 'people',
'name': '邓紫棋',
'job': '人事总监',
'tel': '1883333668'
},
{
'id': 6,
'type': 'people',
'name': '汪峰',
'job': '招聘主管',
'tel': '1666688888'
}
]
},
{
'id': 36,
'name': '成都武侯祠',
'type': 'branch',
'subclass': [{
'id': 5,
'type': 'people',
'name': '林俊杰',
'job': '人事总监',
'tel': '1883333668'
},
{
'id': 6,
'type': 'people',
'name': '王菲',
'job': '招聘主管',
'tel': '1666688888'
}
]
},
{
'id': 5,
'type': 'people',
'name': '萨琳娜',
'job': '人事总监',
'tel': '1883333668'
},
{
'id': 6,
'type': 'people',
'name': '田馥甄',
'job': '招聘主管',
'tel': '1666688888'
}
]
},
]
},
{
'id': 7,
'type': 'people',
'name': '孙总',
'job': '董事长',
'tel': '16666666666'
}
]
address = this.addressFormat(address)
this.setData({
address: address
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.log('onshow')
console.log(this.data.branchTitle)
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
WXSS
.title-container {
padding: 30rpx 50rpx;
font-size: 30rpx;
background-color: #fefefe;
box-shadow: 0 10rpx 10rpx #efefef;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.title {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.next-icon {
width: 20rpx;
height: 20rpx;
margin: 0 10rpx;
}
.address-container {
margin-top: 20rpx;
background-color: #fefefe;
}
.address-list {
padding: 30rpx 50rpx;
}
.address-one {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.address-one .left {
width: 90rpx;
height: 90rpx;
border-radius: 50%;
background-color: #2396f2;
color: #fff;
font-size: 30rpx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-right: 20rpx;
}
.address-one .right {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
font-size: 30rpx;
}
.name {
font-weight: 700;
margin-right: 20rpx;
}
.job {
color: #aaa;
font-size: 26rpx;
}
.tel {
color: #aaa;
font-size: 26rpx;
}
.swiper-tab {
width: 100%;
border-bottom: 2rpx solid #ccc;
text-align: center;
height: 88rpx;
line-height: 88rpx;
font-weight: bold;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.swiper-tab-item {
display: inline-block;
/* width: 33.33%; */
width: inherit;
color: red;
}
.active {
color: aqua;
border-bottom: 4rpx solid red;
}
util.js
const obj2Query = function (params = new Object()) {
console.log('obj2Query 方法')
var arr = Object.keys(params)
if (arr.length == 0) {
return ''
}
var str = ''
for (var i in params) {
str = str + '&' + i + '=' + params[i]
}
return str
}
module.exports = {
obj2Query: obj2Query
}
