zhxy-desk/components/peopleList.vue

<template>
	<view class="people-list">
		<view @click="itemClick(item)" v-for="(item,index) in list" :key="index" class="people-list-item">
			<view class="">
				{{item.name}}
			</view>
			<view class="people-list-item-right">
				<view v-if="item.show" class="people-list-item-right-active">
					<uni-icons color='#fff' type="checkmarkempty" size="12"></uni-icons>
				</view>
				<view  v-else class="people-list-item-right-border">

				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "peopleList",
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {

			};
		},
		methods:{
			itemClick(item) {
				console.log(item);
				item.show = !item.show
				this.$emit('updata:list',this.list)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.people-list {
		width: 100%;
	}

	.people-list-item {
		padding: 32rpx;
		border-bottom: 1px solid #f2f2f2;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.people-list-item-right {}

	.people-list-item-right-border {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 2px solid rgba(136, 230, 210, 1);
		box-sizing: border-box;
	}

	.people-list-item-right-active {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: rgba(5, 204, 161, 1);
		text-align: center;
		line-height: 40rpx;
	}
</style>