yizhizan-h5/pages/my/searchCompanys.vue

<template>
	<view class="page-container">
		<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">
					<u-radio-group v-model="companyId" @change="handleChangeSelect">
						<u-radio
							shape="circle"
							v-for="company in companys"
							:key="company.companyId"
							:name="company.companyId"
						>{{ company.companyName }}</u-radio>
					</u-radio-group>
					<!-- <view class="company-item" v-for="company in companys" :key="company.companyId">
						<u-radio 
							v-model="company.checked" 
							:name="company.companyId"
							@change="checkboxChange"
						>{{company.companyName}}</u-radio>						
					</view> -->
				</view>
			</scroll-view>			
		</view>
		
		<view class="button-section">
			<view class="submit-btn" @click="handleSave">确定</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/nav-bar/index.vue'
	export default {
		components: {
			navBar
		},
		data() {
			return {
				searchValue: '',
				companyId: '',
				companyName: '',
				companys: [],
				searching: false,
			};
		},
		methods: {
			getData() {
				if (!this.searchValue) {
					return this.$queue.showToast('请输入公司名称')
				}
				if (this.searching) return
				this.searching = true
				uni.showLoading({
					title: '搜索中'
				})
				this.$Request
					.getT('/app/company/getVerifiedCompany', {
						companyName: this.searchValue
					})
					.then(res => {
						if (res.code === 0) {
							this.companyId = ''
							this.companyName = ''
							if (res.data && res.data.length) {
								this.companys = res.data								
							} else {
								this.$queue.showToast('没有搜索到对应公司')
							}
						}
					})
					.finally(() => {
						this.searching = false
						uni.hideLoading()
					})
			},
			handleChangeSelect(e) {
				this.companys.forEach(c => {
					if (c.companyId == e) {
						this.companyName = c.companyName
					}
				})
			},
			// 提交数据
			handleSave() {
				if (!this.companyId) {
					return this.$queue.showToast('请选择公司')
				}
				uni.$emit('selectCompany', {
					companyId: this.companyId,
					companyName: this.companyName
				})
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common.scss';
	
	.page-container {
		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>