hbj_app/pages/indexpage/fireMan/tiaoban/choosePerson/choosePerson.vue

<template>
	<view>
		<view style="padding: 10rpx 15rpx;">
			<u-search :placeholder="'搜索：'+teamName" v-model="keyword" :clearabled="false" :showAction="false"
				@change="searchName" @tap="$u.throttle(btnAClick, 500)"></u-search>
			<view style="margin-top: 20rpx;">
				<u-radio-group v-model="radioName" placement="column">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in nameList" :key="index"
						@change="radioChange" :label="item.userName" :name="item.id">
						<view class="menu-item-box" style="display: flex;align-items: center;margin-bottom: 5rpx;">
							<text
								style="background-color: #0087fc;padding: 18rpx 13rpx;color: white;border-radius: 10rpx;margin-right: 15rpx;">
								{{item.userName===undefined ? ":" : item.userName.slice(-2)}}
							</text>
							<view style="font-weight: 600;">{{ item.userName }}({{item.teamName}})</view>
						</view>
					</u-radio>
				</u-radio-group>
				<view v-if="nameList.length === 0" class="listName" style="display: flex;flex-direction: column;align-items: center;justify-content: c
					;margin-top: 100rpx;">
					<image src="../../../../../static/images/none.png" style="width: 316rpx;height: 181rpx;"></image>
					<span style="color: #9f9f9f;margin-top: 30rpx;">暂无人员~</span>
				</view>
			</view>
		</view>

		<view class="bottom">
			<view style="color: #0087fc;width: 400rpx;text-align: center;">
				已选择：{{ radioName== ''? "":changeName()[0].userName}}
			</view>
			<u-button class="confirm" @click="confirm" :disabled="isdisable">确认
			</u-button>
		</view>
	</view>
</template>

<script>
	import {
		listFiremen
	} from '@/api/fireman/index.js'
	export default {
		onLoad(options) {
			this.teamId = options.teamId
		},
		data() {
			return {
				current: 0,
				keyword: '', //输入框绑定
				teamId: '', //申请人的teamId
				radioName: '', //选择人员双向绑定
				nameList: [], //人员列表，
				teamName: '', //队伍名字
				isdisable: true, //是否禁用
			};
		},
		mounted() {
			this.getList(this.teamId)
		},
		methods: {
			btnBClick() {
				// 此处用法为在js中调用，需要写uni.$u.throttle()
				uni.$u.throttle(this.toNext, 500)
			},
			toNext() {
				console.log('btnBClick');
			},
			getList(teamId) {
				listFiremen({
					teamId: teamId
				}).then(res => {
					this.nameList = res.rows;
					this.teamName = this.nameList[0].teamName
					console.log("中队", res.rows);
				})
			},
			// 根据name绑定的id值显示name
			changeName() {
				let data = this.nameList.filter(item => item.id == this.radioName)
				// console.log(data, "筛选");
				return data
			},
			// 选中
			radioChange(n) {
				if (n) {
					this.isdisable = false
				}
			},
			// 搜索姓名
			searchName(e) {
				console.log(e);
				listFiremen({
					userName: e,
					teamId: this.teamId
				}).then(res => {
					this.nameList = res.rows
				})
			},
			// 确认按钮
			confirm() {
				if (this.radioName) {
					// 1. 获取当前页面栈实例（此时最后一个元素为当前页）
					let pages = getCurrentPages()

					// 2. 上一页面实例
					// 注意是length长度，所以要想得到上一页面的实例需要 -2
					// 若要返回上上页面的实例就 -3，以此类推
					let prevPage = pages[pages.length - 2]

					// 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
					prevPage.$vm.getChooseName(this.radioName)

					// 4. 返回上一页面
					uni.navigateBack({
						delta: 1 // 返回的页面数
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		box-sizing: border-box !important;
		// padding: 10rpx 15rpx;

		.bottom {
			position: fixed;
			bottom: 0;
			width: 100vw;
			height: 100rpx;
			box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(35, 35, 36, 0.05);
			// border-radius: 20rpx;
			border: 1px solid #EEEEEE;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.confirm {
				background-color: #0087fc;
				color: #fff;
				width: 200rpx;
				border-radius: 10rpx;
				// padding: 5rpx 15rpx;
			}
		}
	}
</style>