jxred/pages/category/search.vue

<template>
	<view class="content">
		<view class="Search-box">
			<view class="Search-box-size">
				<image class="box-img" src="https://zhxc2030.com/img/img01.png"></image>
				<input class="box-word" placeholder="默认关键字" v-model="keyword" @input="searchlist">
			</view>
		</view>
		<view class="select-box">
			<!-- <u-select v-model="show" :list="array"></u-select> -->
			<u-select v-model="show" mode="single-column" :list="array" value-name='name' label-name='name' @confirm="confirm"></u-select>
		</view>

		<!-- 空白页 -->
		<!-- <picker @change="PickerInstitution"  :range="array" class="box-right" @input="searchlist">
			<text>{{ keyword }}</text>
		</picker> -->
		<!-- <empty v-if="list.length === 0"></empty> -->
		<!-- <uni-load-more :status="loadingType"></uni-load-more> -->
	</view>
</template>

<script>
	import {
		mechanism
	} from '@/api/ask.js'
	import empty from '@/components/empty';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			empty,
			uniLoadMore
		},
		data() {
			return {
				show: false,
				institution:'',
				list: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
				keyword: '',
				page: 1, // 页数
				limit: 10, //每页条数
				loadingType: 'more',
				// list: [],
				array: [],
			}
		},
		onLoad() {
			// this.getlist();
		},
		methods: {
			// 选择机构
			PickerInstitution: function(e) {
				console.log(3333)
				// this.keyword = this.array[e.target.value];
				// this.index = e.target.value + 1;
			},
			searchlist(e) {
				let obj = this;
				obj.keyword = e.detail.value
				console.log('e.detail.value', e.detail.value)
				// console.log('obj.keyword',obj.keyword)
				mechanism({
					page: obj.page,
					limit: obj.limit,
					keyword: obj.keyword
				}).then(data => {
					console.log('请求成功',data)
					this.array = data.data.map(item => item)
					this.show = true
				})
			},
			showSelect(){
				console.log('点击打开')
				this.show = true
				console.log(this.array)
			},
			
			
			
			
			
			confirm(e){
				console.log('点击确认')
				// console.log(3)
				this.keyword = e[0].value
				this.institution = e[0].value
				console.log('当前机构值',this.institution)
				// 
				uni.removeStorage({
				    key: 'institution',
				    success: function (res) {
				        console.log('success');
				    }
				});
				let institution = e[0].value
				uni.setStorageSync('institution', institution)
				// uni.showModal({
				// 	title:'institution的值',
				// 	content:JSON.stringify(institution)
				// })
				uni.switchTab({
					url:'/pages/category/category'
				})
				// console.log(uni.setStorageSync)
			}
		}

	}
</script>

<style lang="scss">
	.content {
		line-height: 1;

		//搜索框
		.Search-box {
			z-index: 999;
			height: 80rpx;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			// background: #FFFFFF;
			padding-top: 10rpx;
			padding-right: 24rpx;
			padding-left: 24rpx;

			.Search-box-sort {
				float: left;
				margin-left: 32rpx;
				margin-right: 19rpx;

				.sort-text {
					width: 57rpx;
					height: 29rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
					line-height: 58rpx;
					margin-right: 19rpx;
				}

				.sort-img {
					width: 21rpx;
					height: 11rpx;
					margin-bottom: 4rpx;
				}
			}

			.Search-box-size {
				// width:70%;
				height: 58rpx;
				border-radius: 32rpx;
				background-color: #f1f1f1;
				padding-left: 36rpx;
				display: flex;
				align-items: center;

				.box-img {
					height: 32rpx;
					width: 32rpx;
					margin-right: 16rpx;
				}

				// .box-right{
				// 	height: 58rpx;
				// 	// width: 100%;
				// 	background-color: pink;
				// }

				.box-word {
						width: 100%;
					font-size: 26rpx;
					font-weight: 500;
					color: rgba(205, 203, 203, 1);
					line-height: 55rpx;
				}
			}
		}
		// 选择框
		.select-box{
			margin-top: 100rpx;
		}
	}
</style>