jyz/pages/rescuers/ToKey.vue

<template>
	<view class="container">
		<view class="input-box">
			<input placeholder="默认关键字" @input='onchance' v-model="mechanism" placeholder-style="color:#c0c0c0;" />
		</view>
		<mepicker ref="picker"
		  mode="selector"
		  :list="meList"
		  @change="handleChange"
		  @confirm="handleConfirm"
		  @cancel="handleCancel">
		</mepicker>
	</view>
</template>
<script>
	import mepicker from '@/components/picker/index.vue'
	import { hospitalList } from '@/api/record.js';
	export default {
		components: {
			mepicker
		},
		data() {
			return {
				mechanism:'',//机构
				hospital_id:"",//机构id
				meList: [],//机构列表
			};
		},
		onLoad(option) {
			if(option.mechanism == '' || option.mechanism == undefined){
				this.mechanism = '';
			}else{
				this.mechanism = option.mechanism;
			}
		},
		watch:{
			// meList(newValue, oldValue) {
			// 	if(newValue != oldValue){
			// 		this.mechanism = ''
			// 	}
			// },
		},
		methods:{
			//当键盘输入时，触发input事件
			onchance(e){
				this.keyword = e.detail.value;
				this.ListDate();
				this.handleTap('picker');
			},
			//显示弹窗
			handleTap(name) {
				this.$refs[name].show();
			},
			//加载机构列表
			ListDate(){
				let obj = this;
				hospitalList({
					keyword:obj.mechanism
				}).then(e => {
					obj.meList = e.data
				}).catch((e) => {
					console.log(e)
				});
			},
			handleChange (item) {
			},
			handleCancel (item) {
				
			},
			handleConfirm (item) {
				let obj = this;
				if(item != null){
					obj.mechanism = item.item.name;
					obj.hospital_id = item.item.id;
					uni.navigateTo({
						url:'/pages/rescuers/rescuers?hospital_id='+item.item.id+'&mechanism='+item.item.name
					})
					// uni.showT
				}else{
					obj.mechanism = '';
					obj.keyword = '';
				}
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.container{
		background-color: #FFFFFF;
		height: 100%;
		padding-top: 180rpx;
	}
	//搜索框
	.input-box {
		width: 92%;
		margin: 0rpx auto;
		height: 70rpx;
		background-color: #f5f5f5;
		border-radius: 50rpx;
		position: relative;
		display: flex;
		align-items: center;
		.icon {
			display: flex;
			align-items: center;
			position: absolute;
			top: 0;
			right: 0;
			width: 60rpx;
			height: 80rpx;
			font-size: 34rpx;
			color: #c0c0c0;
		}
		input {
			padding-left: 28rpx;
			height: 28rpx;
			font-size: 28rpx;
		}
	}
</style>