Homestay_manage_app/pagesSub/common/common.vue

<template>
	<view class="container">
		<!-- 旅客列表区域 -->
		<view class="list" v-if="list.length">
			<!-- 每一个旅客区域 -->
			<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" @click="handleClick(item)">
						<view class="item_box">
							<view class="box_key">姓名</view>
							<view class="box_value">{{ item.user_name }}</view>
						</view>
						<view class="item_box">
							<view class="box_key">身份证号</view>
							<view class="box_value">{{ item.card_number }}</view>
						</view>
						<view class="item_box">
							<view class="box_key">联系电话</view>
							<view class="box_value">{{ item.user_phone }}</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>

		<view class="noData" v-else>
			<img src="../../static/images/noData.png" />
			暂无数据
		</view>

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

<script>
export default {
	data() {
		return {
			// 旅客列表
			list: [],
			type: ''
		}
	},
	onLoad(options) {
		if (options.type) {
			this.type = options.type
		}
	},
	onShow() {
		this.getDataList()
	},
	methods: {
		// 获取旅客列表
		async getDataList() {
			const res = await this.$myRequest({
				url: '/mhotel/ampgetUserContactList.action',
				data: {
					userId: uni.getStorageSync('userInfo').id
				}
			})
			// console.log(res)
			if (res.code === 200) {
				this.list = res.data.pageList
			}
		},
		handleClick(item) {
			if (this.type) {
				uni.$emit('change', {
					name: item.user_name,
					phone: item.user_phone
				})
				uni.navigateBack(1)
			}
		},
		// 右侧选项内容编辑按钮回调
		handleClickEdit(item) {
			// console.log(item)
			const info = JSON.stringify(item)
			uni.navigateTo({
				url: `/pagesSub/addOrEdit/addOrEdit?type=2&info=${info}`
			})
		},
		// 右侧选项内容删除按钮回调
		handleClickDelete(item) {
			console.log(item)
			uni.showModal({
				title: '提示',
				content: `确定删除${item.user_name}吗？`,
				success: async (res) => {
					if (res.confirm) {
						const res = await this.$myRequest({
							url: '/mhotel/ampdelContact.action',
							data: {
								contactId: item.id
							}
						})
						// console.log(res)
						if (res.code === 200) {
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
							setTimeout(() => {
								this.getDataList()
							}, 1500)
						}
					}
				}
			})
		},
		// 添加按钮回调
		handleClickAdd() {
			uni.navigateTo({
				url: '/pagesSub/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;
				}
			}
		}
	}

	.noData {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: calc(100vh - 186rpx);

		img {
			margin-top: 150rpx;
			width: 600rpx;
			height: 600rpx;
		}
	}

	.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>