yizhizan-h5/package/my/hiddenManagement/index.vue

<template>
	<view class="hidden-management">
		<view>
			<nav-bar color="#000" title="屏蔽管理"></nav-bar>
			<view class="content">
				<view class="title">屏蔽管理</view>
				<view class="tip">请设置指定公司不可看见你的简历，屏蔽后双向不被推荐</view>
				<view class="search-bar flex align-center" @click="toHiddenCompany">
					<image src="@/static/images/svg/search.svg" class="search-icon"></image>
					搜索需要屏蔽的公司
				</view>
			</view>
		</view>
		<scroll-view
			class="company-list"
			:scroll-y="true"
			:refresher-threshold="80"
			:refresher-enabled="true"
			:refresher-triggered="isRefreshing"
			scroll-with-animation="true"
			@refresherrefresh="handleRefresh"
			@scrolltolower="loadMore"
		>
			<view class="scroll-wrapper">
				<view class="company-item" v-for="item in hideCompanys" :key="item.companyId">
					<siwper-delete @delete="handleDelete(item)">
						<view class="company-content flex align-center">
							<image :src="item.company.companyLogo ? item.company.companyLogo : '/static/images/logo.jpg'" class="company-icon"></image>
							<view class="company-info">
								<view class="company-name">{{ item.companyName }}</view>
								<view class="text">{{ item.company.companyPeople }} <template v-if="item.company.type == '0'">· 跨境电商</template></view>
							</view>
						</view>
					</siwper-delete>
				</view>				
			</view>
		</scroll-view>
		
		<u-modal
			v-model="showDeleteModal"
			:async-close="true"
			:content="content"
			:show-cancel-button="true"
			@confirm="confirm"
		></u-modal>
	</view>
</template>

<script>
	import navBar from '@/components/nav-bar/index.vue'
	import siwperDelete from '@/components/swiper-delete.vue'
	
	export default {
		components: {
			navBar,
			siwperDelete
		},
		data() {
			return {
				hideCompanys: [],
				loading: false,
				page: 1,
				isRefreshing: false,
				showDeleteModal: false,
				selectCompany: {},
				content: '是否确定删除屏蔽',
				total: 0
			};
		},
		onLoad() {
			this.getHideCompany()
			
			// 添加屏蔽后返回刷新数据
			uni.$on('refreshList', () => {
				this.page = 1
				this.getHideCompany()
			})
		},
		onUnload() {
			uni.$off('refreshList')
		},
		methods: {
			// 获取屏蔽公司列表数据
			getHideCompany() {
				uni.showLoading({
					title: '加载中'
				})
				this.loading = true
				this.$Request
					.getT('/app/shieldCompany/selectShieldList', {
						page: this.page,
						limit: 10,
					})
					.then(res => {
						if (res.code === 0) {
							this.hideCompanys = this.page != 1 ? [...this.hideCompanys, ...res.data.list] : res.data.list
							this.total = res.data.totalCount
						}
					})
					.finally(() => {
						this.isRefreshing = false
						this.loading = false
						uni.hideLoading()
					})
			},
			// 删除屏蔽
			deleteCompany() {
				uni.showLoading({
					title: '删除中'
				})
				this.$Request
					.postJson('/app/shieldCompany/deleteShieldCompany', {
						shieldCompanyId: this.selectCompany.shieldCompanyId,
					})
					.then(res => {
						this.$queue.showToast('删除成功')
						this.page = 1
						this.getHideCompany()
					})
					.finally(() => {
						this.showDeleteModal = false
						uni.hideLoading()
					})
			},
			handleDelete(item) {
				this.showDeleteModal = true
				this.selectCompany = item
			},
			confirm() {
				this.deleteCompany()
			},
			toHiddenCompany() {
				uni.navigateTo({
					url: '/package/my/hiddenManagement/hiddenCompany'
				})
			},
			handleRefresh() {
				if (this.isRefreshing) return
				this.isRefreshing = true
				this.page = 1
				this.getHideCompany()
			},
			loadMore() {
				if (this.loading || this.hideCompanys.length >= this.total) return
				this.page++
				this.getHideCompany()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hidden-management {
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-family: DM Sans;
		
		.content {
			padding: 32rpx 40rpx 0;
			
			.title {
				font-size: 48rpx;
				font-weight: 700;
				line-height: 60rpx;
				color: rgba(51, 51, 51, 1);
				margin-bottom: 20rpx;
			}
			
			.tip {
				font-size: 24rpx;
				line-height: 32rpx;
				color: rgba(102, 102, 102, 1);
				margin-bottom: 28rpx;
			}
			
			.search-bar {
				border: 1px solid rgba(231, 230, 228, 1);
				border-radius: 12rpx;
				background: rgba(237, 237, 237, 1);
				padding: 16rpx 24rpx;
				color: rgba(188, 188, 188, 1);
				font-size: 28rpx;
				margin-bottom: 28rpx;
				.search-icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}
			}
		}
		
		.company-list {
			height: 300px;
			flex: 1;
			padding: 0 40rpx;
			.scroll-wrapper {
				padding-bottom: 20rpx;
			}
			.company-item {
				border: 1px solid rgba(227, 231, 236, 1);
				border-radius: 12rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				overflow: hidden;
			}
			.company-content {
				padding: 20rpx 32rpx;
				.company-icon {
					display: block;
					width: 60rpx;
					height: 60rpx;
					margin-right: 24rpx;
					border: 1px solid #eee;
					border-radius: 60rpx;
				}
			}
		}
	}
</style>