无限级通讯录

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
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注