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

<template>
	<view class="hidden-management">
		<nav-bar title="屏蔽管理"></nav-bar>
		<view class="search-bar flex align-center justify-between">
			<view class="search-input flex align-center">
				<image src="@/static/images/svg/search.svg" class="search-icon"></image>
				<input v-model="searchValue" type="text" placeholder="输入的是一个公司的名称，全模糊搜索" class="input" />
			</view>
			<view class="search-btn" @click="getData">搜索</view>
		</view>
		<view class="content">
			<scroll-view :scroll-y="true" class="scroll-view">
				<view class="scroll-wrapper">
					<view class="company-item" v-for="company in companys" :key="company.companyId">
						<u-checkbox 
							v-model="company.checked" 
							:name="company.companyId"
							@change="checkboxChange"
						>{{company.companyName}}</u-checkbox>						
					</view>
				</view>
			</scroll-view>			
		</view>
		
		<view class="button-section">
			<view class="submit-btn" @click="handleSave">屏蔽所选公司（{{ selectCount }}）</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/nav-bar/index.vue'
	export default {
		components: {
			navBar
		},
		data() {
			return {
				searchValue: '',
				selectCount: 0,
				companys: [],
				selectCompanyIds: [],
				selectCompanyList: [],
				searching: false,
				loading: false
			};
		},
		methods: {
			getData() {
				if (this.searching) return
				this.searching = true
				uni.showLoading({
					title: '搜索中'
				})
				this.$Request
					.getT('/app/shieldCompany/selectCompanyListByName', {
						companyName: this.searchValue
					})
					.then(res => {
						if (res.code === 0) {
							this.selectCompanyIds = []
							this.selectCompanyList = []
							this.companys = res.data
						}
					})
					.finally(() => {
						this.searching = false
						uni.hideLoading()
					})
			},
			// 选择公司
			checkboxChange(item) {
				const company = this.companys.find(c => c.companyId == item.name)
				if (!item.value) {
					// 删除
					let deleteId = 0
					this.selectCompanyIds.forEach((id, index) => {
						if (id == item.name) {
							deleteId = index
						}
					})
					this.selectCompanyIds.splice(deleteId, 1)
					this.selectCompanyList.splice(deleteId, 1)
					this.selectCount--
				} else {
					// 新增
					this.selectCompanyIds.push(item.name)
					this.selectCompanyList.push(company)
					this.selectCount++
				}
			},
			// 提交数据
			handleSave() {
				if (this.loading) return
				if (!this.selectCompanyIds.length) {
					return uni.showToast({
						title: '请选择屏蔽公司',
						icon: 'none'
					})
					return
				}
				
				this.loading = true
				uni.showLoading({
					title: '保存中'
				})
				this.$Request
					.postJson('/app/shieldCompany/insertShieldCompanys', {
						shieldCompanyList: this.selectCompanyList
					})
					.then(res => {
						if (res.code === 0) {
							uni.navigateBack()
							uni.$emit('refreshList')
						}
					})
					.finally(() => {
						this.loading = false
						uni.hideLoading()
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common.scss';
	
	.hidden-management {
		display: flex;
		flex-direction: column;
		height: 100vh;
		font-family: DM Sans;
		
		.content {
			flex: 1;
			padding: 0 40rpx;
			overflow: auto;
		}
		.search-bar {
			margin: 32rpx 40rpx 40rpx;
			.search-input {
				flex: 1;
				box-sizing: border-box;
				border: 1px solid rgba(227, 231, 236, 1);
				border-radius: 48rpx;
				background: rgba(241, 241, 241, 1);
				padding: 8rpx 32rpx;
				.search-icon {
					display: block;
					width: 36rpx;
					height: 36rpx;
					margin-right: 16rpx;
				}
				.input {
					width: 500rpx;
					font-size: 20rpx;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
				}
			}
			.search-btn {
				width: 60rpx;
				font-size: 20rpx;
				font-weight: 500;
				line-height: 48rpx;
				color: rgba(1, 107, 246, 1);
				padding-left: 16rpx;
			}
		}
		
		.scroll-view {
			.scroll-wrapper {
				padding-bottom: 100rpx;
			}
		}
	}
</style>