crm-mobile/pages_oa/concat/index.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar title="通讯录" />

      <view class="container">
        <uni-indexed-list :options="listData">
          <template v-slot:default="{ scopeData }">
            <view class="list">
              <view class="list-title">
                {{ scopeData.key }}
              </view>
              <view class="list-body">
                <concat-item
                  v-for="(item, index) in scopeData.items"
                  :key="index"
                  :concat-data="item.name" />
              </view>
            </view>
          </template>
        </uni-indexed-list>
      </view>
    </view>
  </view>
</template>

<script>
  import { addressList } from 'API/personal'
  import ConcatItem from './concatItem.vue'
  import UniIndexedList from '../component/uni-indexed-list.vue'

  export default {
    name: 'CompanyConcatIndex',
    components: {
      ConcatItem,
      UniIndexedList
    },
    data() {
      return {
        listData: [],
        params: {
          pageType: 0,
          search: ''
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        addressList(this.params).then(res => {
          this.formatData(res.list || [])
        }).catch(() => {
        })
      },

      formatData(list) {
        if (list.length === 0) {
          this.listData = []
          return
        }
        let initial = list[0].initial
        const arr = [
          {
            letter: list[0].initial,
            data: [list[0]]
          }
        ]
        for (let i = 1; i < list.length; i++) {
          const item = list[i]
          if (initial === item.initial) {
            arr[arr.length - 1].data.push(item)
          } else {
            initial = item.initial
            arr.push({
              letter: initial,
              data: [item]
            })
          }
        }

        this.listData = arr
      }
    }
  }
</script>

<style scoped lang="scss">
	.main-container {
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.container {
			flex: 1;
			overflow: hidden;

			.list {
				.list-title {
					color: $light;
					font-size: 26rpx;
					padding: 10rpx 30rpx;
				}
				.list-body {
					.concat-item:last-child {
						::v-deep .concat-item-body {
							border-bottom: 0 none;
						}
					}
				}
			}
		}
	}
</style>