school_ecology_h5/pages/address_book/address_book.vue

<template>
	<view class="container">
		<!-- 搜索框区域 -->
		<common-search placeholder="请输入校友姓名" @change="handleChange"></common-search>

		<!-- 分段器区域 -->
		<view class="control">
			<common-controlTag :tagList="tagList" rangekey="name" @change="changeIndex"></common-controlTag>
		</view>

		<!-- 列表区域 -->
		<view class="list">
			<!-- 每一条通讯录区域 -->
			<view class="list_box" v-for="item in dataList" :key="item.id">
				<view class="box">
					<view class="box_key">学院和班级：</view>
					<view class="box_value">{{ item.collegeName }}</view>
				</view>
				<view class="box">
					<view class="box_key">联系人：</view>
					<view class="box_value">{{ item.name }}</view>
				</view>
				<view class="box" v-if="item.orgName">
					<view class="box_key">组织：</view>
					<view class="box_value">{{ item.orgName }}</view>
				</view>
				<view class="box" v-if="item.phone">
					<view class="box_key">联系方式：</view>
					<view class="box_value" @click="clickPhone(item.phone)">{{ item.phone }}</view>
					<uni-icons type="phone" size="20" color="#007AFF" @click="clickPhone(item.phone)"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 没有数据时展示的页面 -->
		<noData v-if="!dataList.length"></noData>
	</view>
</template>

<script setup>
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { getAddressBookType, getAddressBookData } from '@/api/index.js'

// 分段器数组
const tagList = ref([])
// 分段器当前索引
const currentIndex = ref(0)

// 搜索框绑定数据
const inputValue = ref('')

// 当前页
const currentPage = ref(1)
// 每页多少条
const pageCount = ref(6)
// 总条数
const total = ref(0)
// 数据列表
const dataList = ref([])

onLoad(() => {
	// 获取通讯录类型列表
	getType()
})

// 页面触底触发的函数
onReachBottom(() => {
	if (total.value > dataList.value.length) {
		currentPage.value++
		getData()
	} else {
		uni.showToast({
			title: '没有更多数据了~~',
			icon: 'none'
		})
	}
})

// 获取通讯录类型列表
const getType = async () => {
	const res = await getAddressBookType()
	// console.log(res)
	tagList.value = res.data

	// 获取通讯录分页数据
	getData()
}

// 获取通讯录分页数据
const getData = async () => {
	let data = {
		currentPage: currentPage.value,
		pageCount: pageCount.value,
		typeId: tagList.value[currentIndex.value].id,
		name: inputValue.value
	}
	const res = await getAddressBookData(data)
	// console.log(res)
	dataList.value = [...dataList.value, ...res.data.list]
	total.value = res.data.totalCount
}

// 输入框搜索回调
const handleChange = (e) => {
	inputValue.value = e
	currentPage.value = 1
	dataList.value = []
	getData()
}

// 切换分段器时的回调
const changeIndex = (e) => {
	if (currentIndex.value != e) {
		currentIndex.value = e
		currentPage.value = 1
		dataList.value = []
		getData()
	}
}

// 拨打电话回调
const clickPhone = (phoneNumber) => {
	uni.makePhoneCall({
		phoneNumber
	})
}
</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx 18rpx;
	min-height: 100vh;

	.control {
		margin-top: 20rpx;
	}

	.list {
		margin-top: 20rpx;
		font-size: 28rpx;

		.list_box {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 30rpx;
			margin-bottom: 20rpx;
			width: 714rpx;
			border-radius: 28rpx;
			box-shadow: 0 4rpx 34rpx rgba(211, 211, 211, 0.32);

			.box {
				display: flex;
				margin-bottom: 20rpx;

				.box_key {
					font-weight: bold;
				}

				.box_value {
					flex: 1;
					margin-right: 10rpx;
					color: #666666;
					overflow: hidden;
				}
			}
		}
	}
}
</style>