yueche_app/pages/commonPeople/commonPeople.vue

<template>
	<view class="container">
		<!-- 添加按钮区域 -->
		<view class="add" @click="handleAdd">+ 添加常用旅客</view>

		<!-- 每一个旅客信息区域 -->
		<view v-for="item in dataList" :key="item.id" class="box">
			<view class="box_msg">
				<view class="msg_name">{{ item.username }}</view>
				<view class="msg_identity">身份证 {{ item.sfzh }}</view>
				<view class="msg_phone">手机号 {{ item.mobile }}</view>
			</view>

			<view class="box_btn">
				<wd-icon name="delete" color="#DC2626" size="20" @click="handleDelete(item)"></wd-icon>
				<wd-icon name="edit-1" color="#ABA6A6" size="20" @click="handleEdit(item)" />
			</view>
		</view>

		<view v-if="!dataList.length">
			<wd-status-tip image="content" tip="暂无数据" />
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { myRequest } from '@/utils/api.ts'

// 用户信息
const userInfo = ref()

// 每页多少条
const pageSize = ref(8)
// 当前页
const currentPage = ref(1)
// 总条数
const total = ref(0)
// 常用旅客数组数据
const dataList = ref([])

onLoad(() => {
	userInfo.value = uni.getStorageSync('carUserInfo')
	console.log(userInfo.value)
	getCommonData()
})

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

// 获取常用旅客列表数据
const getCommonData = async () => {
	let data = {
		page: currentPage.value,
		rows: pageSize.value,
		mobile: uni.getStorageSync('carUserInfo').mobile
	}
	const res = await myRequest({
		url: '/ctUserlist.action',
		data
	})
	console.log(res)
	dataList.value = [...dataList.value, ...res.rows]
	total.value = res.total
}

// 点击添加旅客回调
const handleAdd = () => {
	uni.navigateTo({
		url: '/pages/handlePeople/handlePeople'
	})
}

// 编辑旅客回调
const handleEdit = (item) => {
	let info = encodeURIComponent(JSON.stringify(item))
	uni.navigateTo({
		url: `/pages/handlePeople/handlePeople?info=${info}`
	})
}

// 删除图标回调
const handleDelete = (item) => {
	// console.log(item)
	uni.showModal({
		title: '提示',
		content: `确定删除${item.username}吗？`,
		success: (res) => {
			if (res.confirm) {
				deleteReq(item.id)
			}
		}
	})
}

// 删除请求
const deleteReq = async (id) => {
	let data = {
		id
	}
	const res = await myRequest({
		url: '/ctUserdel.action',
		data
	})
	// console.log(res)
	if (res.code == 200) {
		uni.showToast({
			title: res.message,
			icon: 'success'
		})
		setTimeout(() => {
			currentPage.value = 1
			dataList.value = []
			total.value = 0
			getCommonData()
		}, 1500)
	}
}
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	padding: 30rpx;
	min-height: 100vh;
	color: #001713;
	background-color: #fffdfb;
	overflow-y: auto;

	.add {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
		width: 100%;
		height: 104rpx;
		font-size: 32rpx;
		color: #ff8205;
		border-radius: 10rpx;
		background-color: #fff2e5;
	}

	.box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 30rpx 40rpx;
		margin-bottom: 20rpx;
		width: 100%;
		height: 200rpx;
		border-radius: 16rpx;
		background-color: #fff;
		box-shadow: 0 3rpx 6rpx #ccc;

		.box_msg {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 100%;
			font-size: 24rpx;
			color: #aba6a6;

			.msg_name {
				font-size: 36rpx;
				color: #001713;
			}
		}

		.box_btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 200rpx;
		}
	}
}
</style>