deming/pageE/setting/ShieldUsers.vue

<template>
	<view class="shield">
		<view class="shield-list" v-for="(item, index) in userList" :key="index">
			<view class="infomation">
				<u-avatar :src="item.member_avatar" size="80"></u-avatar>
				<view class="nickname u-line-1">{{ item.member_nickname }}</view>
			</view>
			<view class="btn" @click="cancelArticleShield(item.member_id)">取消屏蔽</view>
		</view>
		<u-empty text="暂无屏蔽用户" mode="list" v-if="!userList.length" margin-top="280" color="#333"></u-empty>
	</view>
</template>
<script>
export default {
	data() {
		return {
			src: 'https://dmmall.sdbairui.com/uploads/home/avatar/avatar_19.jpg',
			userList: [],
		}
	},
	onShow() {
		this.articlShieldList();
	},
	methods: {
		articlShieldList() {
			this.$u.api.articlShieldList().then(res => {
				this.userList = res.data;
			})
		},
		// 取消屏蔽
		cancelArticleShield(id) {
			this.$u.api.articleDelShield({ id: id }).then(res => {
				this.articlShieldList();
			})
		}
	}
};
</script>
<style lang="scss" scoped>
.shield {
	min-height: calc(100vh - var(--window-top));
	background-color: #ECECEC;
	padding-top: 1rpx;
	.shield-list {
		background-color: #FFF;;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 30rpx;
		color:rgba(51,51,51,1);
		margin-bottom: 2rpx;
		.infomation {
			display: flex;
			align-items: center;
			.nickname {
				width: 300rpx;
				font-size: 28rpx;
				margin-left: 20rpx;
			}
		}
		.btn {
			font-size: 24rpx;
			position: relative;
			&::before {
				position: absolute;
				left: -30rpx;
				top: 50%;
				transform: translate(0, -50%);
				content: '';
				width: 1rpx;
				height: 38rpx;
				background: rgba(236,236,236,1);
			}
		}
	}
}
</style>