Homestay_manage_app/pages/common/common.vue

<template>
	<view class="container">
		<!-- 旅客列表区域 -->
		<view class="list">
			<!-- 每一个旅客区域 -->
			<uni-swipe-action>
				<uni-swipe-action-item v-for="item in list" :key="item.id">
					<!-- 右侧选项内容区域 -->
					<template v-slot:right>
						<view class="list_item_right">
							<!-- 编辑按钮区域 -->
							<view class="list_item_right_box edit" @click="handleClickEdit(item)">
								<img class="img" src="../../static/my/edit.png" />
							</view>
							<!-- 删除按钮区域 -->
							<view class="list_item_right_box delete" @click="handleClickDelete(item)">
								<img class="img" src="../../static/my/delete.png" />
							</view>
						</view>
					</template>

					<view class="list_item">
						<view class="item_box">
							<view class="box_key">姓名</view>
							<view class="box_value">{{ item.name }}</view>
						</view>
						<view class="item_box">
							<view class="box_key">身份证号</view>
							<view class="box_value">{{ item.identity }}</view>
						</view>
						<view class="item_box">
							<view class="box_key">联系电话</view>
							<view class="box_value">{{ item.phone }}</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>

		<!-- 添加按钮区域 -->
		<view class="btn" @click="handleClickAdd">添加</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					id: 1,
					name: '张三',
					identity: '360730199603164895',
					phone: '13677985689'
				},
				{
					id: 2,
					name: '李四',
					identity: '360730199603164895',
					phone: '13677985689'
				},
				{
					id: 3,
					name: '王五',
					identity: '360730199603164895',
					phone: '13677985689'
				},
				{
					id: 4,
					name: '老六',
					identity: '360730199603164895',
					phone: '13677985689'
				},
				{
					id: 5,
					name: '剑八',
					identity: '360730199603164895',
					phone: '13677985689'
				}
			]
		}
	},
	methods: {
		// 右侧选项内容编辑按钮回调
		handleClickEdit(item) {
			// console.log(item)
			const info = JSON.stringify(item)
			uni.navigateTo({
				url: `/pages/addOrEdit/addOrEdit?type=2&info=${info}`
			})
		},
		// 右侧选项内容删除按钮回调
		handleClickDelete(item) {
			console.log(item)
			uni.showModal({
				title: '提示',
				content: `确定删除${item.name}吗？`,
				success: (res) => {
					if (res.confirm) {
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
					}
				}
			})
		},
		// 添加按钮回调
		handleClickAdd() {
			uni.navigateTo({
				url: '/pages/addOrEdit/addOrEdit?type=1'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	padding: 0 20rpx;
	height: 100vh;
	background-color: #ebeced;

	.list {
		height: calc(100vh - 186rpx);
		overflow-y: auto;

		.list_item_right {
			display: flex;
			margin-top: 20rpx;
			width: 252rpx;
			height: 236rpx;

			.list_item_right_box {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;

				.img {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.edit {
				background-color: #096562;
			}

			.delete {
				background-color: #d43030;
			}
		}

		.list_item {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			margin-top: 20rpx;
			padding-left: 27rpx;
			width: 710rpx;
			height: 236rpx;
			opacity: 0.9;
			border-radius: 15rpx;
			background-color: #fff;

			.item_box {
				flex: 1;
				display: flex;
				align-items: center;
				font-size: 28rpx;

				.box_key {
					width: 120rpx;
					color: #808080;
				}

				.box_value {
					margin-left: 30rpx;
				}
			}
		}
	}

	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 45rpx 0;
		width: 710rpx;
		height: 96rpx;
		font-size: 32rpx;
		border-radius: 64rpx;
		color: #fff;
		background-color: #096562;
	}
}
</style>