lcoco/pages/my/set/blacklist.vue

<template>
	<view class="blacklist-box">
		<en-nav title="黑名单" :title-color="'#333'" @navHeight="setNavHeight"></en-nav>
		<scroll-view class="blacklist-list" :scroll-y="true" :scroll-x="true"
			:style="{'height':'calc(100% - '+navHeight+'rpx)'}">
			<view class="blacklist-item" v-for="(item,i) in list">
				<view class="blacklist-left">
					<image class="blacklist-img" src="/static/img/temporary/4.png" mode="aspectFill"></image>
				</view>
				<view class="blacklist-right">
					<view class="blacklist-title">
						<view class="title-text sys-color-black sys-weight-600 sys-height-44">{{item.nickName}}</view>
						<view class="title-icon" @click.stop="showDel(item,i)">
							<text class="iconfont sys-height-44 sys-color-black">&#xe74b;</text>
						</view>
					</view>
					<view class="blacklist-text">
						<view class="text-item sys-color-gray-9">{{item.gender}}/24/{{item.constellation}}</view>
						<view class="text-item sys-color-gray-9">{{item.date}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<en-blank v-if="list<=0"></en-blank>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="center" cancelText="取消" confirmText="确定" title="移除黑名单" content="是否移除黑名单"
				@confirm="delBlackItem()" @close="close()"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import EnNav from "@/components/en-utils/en-nav/en-nav";
	import {
		delBlackItem,
		getBlackList
	} from "@/api/my";
	import tools from "@/service/tools";
	import EnBlank from "@/components/en-utils/en-blank/en-blank";
	export default {
		components: {
			EnBlank,
			EnNav
		},
		data() {
			return {
				navHeight: 0,
				list: [],
				isAjax: false,
				total: undefined,
				page: 1,
				selectItem: {},
				selectIndex: 0,
			}
		},
		mounted() {
			this.startList()
		},
		methods: {
			setNavHeight(navHeight) {
				this.navHeight = navHeight
			},
			close() {
				this.isPop = false;
				this.$refs.alertDialog.close()
			},
			showDel(selectItem, selectIndex) {
				this.selectItem = selectItem
				this.selectIndex = selectIndex
				this.$refs.alertDialog.open()
			},
			delBlackItem() {
				delBlackItem(this.selectItem.id).then((res) => {
					if (res.code === 1) {
						tools.success('取消成功')
						this.close()
						this.list.splice(this.selectIndex, 1)

					} else {
						tools.error(res.msg)
					}
				})
			},
			startList() {
				if (this.userId <= 0) {
					// return false
				}
				this.list = []
				this.isAjax = false
				this.total = undefined
				this.page = 1
				this.getBlackList()


			},
			getBlackList() {
				if (this.isAjax) {
					return
				}
				this.isAjax = true
				let that = this
				getBlackList({
					'pageNo': this.page,
					'pageSize': '20'
				}).then((res) => {
					this.isAjax = false
					if (res.code === 0) {
						res.data.data.forEach((item) => {
								that.list.push(item)
							})
							++that.page
						that.total = res.data.total
					}
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.blacklist-box {
		height: 100vh;
		padding: 0 32rpx;
		overflow-x: auto;

		.blacklist-list {
			width: calc(100vw - 64rpx);
		}

		.blacklist-item {
			width: calc(100vw - 64rpx);
			display: flex;
			justify-content: space-between;

			.blacklist-left {
				padding: 32rpx 0;
				margin-right: 28rpx;

				.blacklist-img {
					border-radius: 50%;
					width: 96rpx;
					height: 96rpx;
				}
			}

			.blacklist-right {

				padding: 32rpx 0;
				width: calc(100% - 124rpx);
				border-bottom: 1rpx solid #F2F2F2;

				.blacklist-title {
					display: flex;
					justify-content: space-between;
					height: 44rpx;

					.title-text {
						font-size: 32rpx;
					}

					.title-icon {
						.iconfont {
							font-size: 24rpx;
						}
					}
				}

				.blacklist-text {
					display: flex;
					justify-content: space-between;
					margin-top: 4rpx;

					.text-item {
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>