YingXingAI/pages/main/search/search.vue

<template>
	<view>
		<u-navbar :is-back="true" title="" :custom-back="router">
			<view class="slot-wrap flex-row search">
				<!-- <u-input style='flex:0;' v-model="searchType" placeholder='' type="select" @click="show = true" />
				<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback"></u-action-sheet> -->
				<u-search v-model='searchText' :input-style="searchStyle" search-icon="" @custom="search" :search='search'
					:show-action="false" >
				</u-search>
				<u-button style="width: 120rpx;height: 60rpx;border-radius: 50rpx;margin-left: 20rpx;" type="primary" @click="toSearch">搜索</u-button>
			</view>
		</u-navbar>
		<view class="flex-col group_1" v-if='state==0'>
			<view class="flex-col section_1">
				<text class="text_1 text_2">推荐搜索</text>
				<view class="justify-left group_2" style="margin-top:0.2rem;">
					<view class="flex-row" style='flex-wrap:wrap;'>
						<text class="text_1 text_5" @click='search(item)' v-for="(item,index) in keyword.split(',')"
							:key='index'>{{item}}</text>
					</view>
				</view>
			</view>
			<view class="flex-col section_2">
				<text class="text_1 text_6">可能认识的人</text>
				<view class="flex-col group_4">
					<scroll-view scroll-x="true" class="flex-row equal-division">
						<view class="flex-col items-center equal-division-item" @click="toDetil(item.userId)" v-for="(item, index) in mayKnowList"
							:key="index">
							<u-avatar :src="$u.http.config.imgUrl+item.imageUrl" class="image_2" ></u-avatar>
							<text class="text_1 text_7">{{item.name.length > 3? item.name.slice(0, 3) + "...": item.name}}</text>
							<!-- <text class="text_1 text_8">{{item.workFieldName}}</text> -->
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="userList" v-if='state==1'>
			<view class="flex-col group_2">
				<view class="flex-col list">
					<template v-for="(v, i) in searchList">
						<view class="list-item flex-row group_5" :key="i" @click="toDetil(v.userId)">
							<u-avatar class="image_1" size="0.4rem" mode="circle"
								:src="$u.http.config.imgUrl+v.imageUrl">
							</u-avatar>
							<view class="right-section justify-between view_4">
								<view class="top-group flex-col view_5">
									<view class="text_2 flex-row view_6">
										<text class="text_11">{{v.name}}</text>
									</view>
									<text class="text_4 text_15">{{v.workFieldName}}</text>
								</view>
								<text class="text_6 text_16">{{(v.distance>1000?(v.distance/1000).toFixed(1)+'KM':v.distance+'M')}}</text>
							</view>
						</view>
					</template>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchText:'',//搜索内容
				state: 0,
				searchType: '姓名',
				show: false,
				searchStyle: {
					width: "100%",
				},
				keyword: '',
				actionSheetList: [{
						text: '姓名'
					},
					{
						text: '工作'
					},
				],
				nearbyList: [],
				searchList: [],
				mayKnowList:[],
				fromPage:''
			};
		},
		onLoad(e) {
			this.getSearchInfo()
			if(e.type){
				this.fromPage = e.type
			}
			if(e.word){
				this.search(e.word)
			}
		},
		methods: {
			// // 点击actionSheet回调
			// actionSheetCallback(index) {
			// 	this.searchType = this.actionSheetList[index].text;
			// },
			toDetil(id){
				this.$u.route({url:'/pages/AlumniCircle/userDetail/userDetail?id='+id+'&type=3&word='+this.searchText})
			},
			toSearch(){
				this.search(this.searchText)
			},
			// 搜索
			search(value) {
				this.searchText=value
				if (!value) {
					this.$u.toast('请输入搜索词')
					return;
				}
				const data = {
					userId: this.vuex_user.id,
					key: value
				}
				this.$u.api.getSearch(data).then(res => {
					if(res.length){
					this.searchList = res;
					this.state = 1
					}else{
						this.$u.toast('搜索结果为空')
					}
				})
			},
			router(){
				if(this.searchText){
					this.searchText=''
					this.state = 0
				}
				else{
					if(this.fromPage == "home"){
						uni.switchTab({
							url:'/pages/home/home/home'
						})
					}else{
						uni.switchTab({
							url:'/pages/main/index/index'
						})
					}
				}
			},
			// 获取搜索界面数据
			getSearchInfo() {

				this.$u.api.getPosition().then((res) => {
					const data = {
						userId: res.userId,
						lat: res.latitude,
						lon: res.longitude
					}
					this.$u.api.SearchInfo(data).then(ress => {
						this.keyword = ress.keyword;
						this.nearbyList = ress.nearbyList
						this.mayKnowList = ress.mayKnowList
						
					})
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
::v-deep .u-navbar-placeholder,
.u-navbar-inner {
	height: 100rpx !important;
	padding: 20rpx 0rpx !important;
}
	::v-deep .u-avatar__sex {
		width: 0.1rem !important;
		height: 0.1rem !important;
		border: none;
	}

	::v-deep .u-slot-content {
		display: block;
	}

	.search ::v-deep {
		// .u-content {
		// 	border-bottom-left-radius: 0 !important;
		// 	border-top-left-radius: 0 !important;
		// 	padding:0,
		// }
		padding: 20rpx;

		.u-input__input {
			width: 0.25rem;
			min-height: 0.32rem !important;
			padding-left: 0.1rem;
			font-size: 0.12rem;
		}

		.u-input {
			background-color: rgb(242, 242, 242);
			border-radius: 50px;
			border-bottom-right-radius: 0 !important;
			border-top-right-radius: 0 !important;
			padding-left: 0.05rem
		}
	}

	.group_1 {
		padding: 0.14rem 0.15rem 0.2rem;
		flex: 1 1 auto;
		overflow-y: auto;

		.section_1 {
			padding: 0.2rem 0.17rem;
			background-color: rgb(255, 255, 255);
			border-radius: 0.1rem;

			.text_2 {
				color: rgb(56, 58, 63);
				font-size: 0.16rem;
				line-height: 0.17rem;
				white-space: nowrap;
			}

			.group_2 {
				margin-top: 0.23rem;
				padding: 0 0.015rem;
				color: rgb(63, 63, 63);
				font-size: 0.14rem;
				line-height: 0.13rem;
				white-space: nowrap;
				position: relative;

				.text_3 {
					text-transform: uppercase;
					position: absolute;
					left: 0.015rem;
					top: 50%;
					transform: translateY(-50%);
				}

				.text_5 {
          border:1px solid rgb(163, 161, 161);
          border-radius: 0.05rem;
          padding-left:0.1rem;
          padding-right:0.1rem;
          padding-top:0.02rem;
          padding-bottom:0.05rem;
					margin-right: 0.1rem;
					margin-bottom: 0.08rem;
				}
			}
		}

		.section_2 {
			margin-top: 0.18rem;
			padding: 0.2rem 0.17rem;
			background-color: rgb(255, 255, 255);
			border-radius: 0.1rem;

			.text_6 {
				// margin-left: 0.17rem;
				color: rgb(56, 58, 63);
				font-size: 0.16rem;
				line-height: 0.17rem;
				white-space: nowrap;
			}

			.group_4 {
				margin-top: 0.15rem;

				// padding: 0.8rem 0 0.01rem;
				// position: relative;
				// .section_3 {
				//   margin-left: 0.17rem;
				//   margin-right: 0.2rem;
				//   background-image: url("https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6216dee45a7e3f031061d0f1/621c59e162a7d90011002985/16460344151483836600.png");
				//   background-size: 100% 100%;
				//   background-repeat: no-repeat;
				//   height: 0.2rem;
				// }
				.equal-division {
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					width: auto;

					::v-deep .uni-scroll-view-content {
						display: flex;
						white-space: nowrap;
					}

					// position: absolute;
					.equal-division-item {
						padding: 0.065rem 0 0.05rem;
						margin-right: 6%;
						.text_7 {
							margin-top: 0.095rem;
							color: rgb(63, 63, 63);
							font-size: 0.14rem;
							line-height: 0.13rem;
							white-space: nowrap;
						}

						.text_8 {
							margin-top: 0.06rem;
							color: rgb(46, 155, 255);
							font-size: 0.1rem;
							line-height: 0.1rem;
							white-space: nowrap;
							background: #eaf5ff;
							border-radius: 0.2rem;
							padding: 0.05rem 0.1rem;
						}
					}

					.equal-division-item_1 {
						padding: 0.065rem 0 0.055rem;
						flex: 1 1 0.66rem;

						.text_9 {
							margin-top: 0.095rem;
							color: rgb(63, 63, 63);
							font-size: 0.14rem;
							line-height: 0.13rem;
							white-space: nowrap;
						}

						.text_10 {
							margin-top: 0.15rem;
							color: rgb(46, 155, 255);
							font-size: 0.1rem;
							line-height: 0.1rem;
							white-space: nowrap;
						}
					}

					.equal-division-item_2 {
						padding: 0.065rem 0.035rem 0.06rem 0.14rem;
						flex: 1 1 0.66rem;

						.text_11 {
							margin-top: 0.095rem;
							align-self: center;
							color: rgb(63, 63, 63);
							font-size: 0.14rem;
							line-height: 0.13rem;
							white-space: nowrap;
						}

						.text_12 {
							margin-top: 0.15rem;
							align-self: center;
							color: rgb(46, 155, 255);
							font-size: 0.1rem;
							line-height: 0.095rem;
							white-space: nowrap;
						}
					}

					.equal-division-item_3 {
						padding: 0.05rem 0.065rem 0.06rem 0.14rem;
						flex: 1 1 0.66rem;

						.text_13 {
							margin-top: 0.11rem;
							align-self: flex-end;
							color: rgb(63, 63, 63);
							font-size: 0.14rem;
							line-height: 0.13rem;
							white-space: nowrap;
						}

						.text_14 {
							margin-right: 0.07rem;
							margin-top: 0.15rem;
							align-self: flex-end;
							color: rgb(46, 155, 255);
							font-size: 0.1rem;
							line-height: 0.095rem;
							white-space: nowrap;
						}
					}

					.equal-division-item_4 {
						padding: 0.05rem 0 0.06rem;
						flex: 1 1 0.66rem;

						.text_15 {
							margin-top: 0.12rem;
							color: rgb(63, 63, 63);
							font-size: 0.14rem;
							line-height: 0.13rem;
							white-space: nowrap;
						}

						.text_16 {
							margin-top: 0.15rem;
							color: rgb(46, 155, 255);
							font-size: 0.1rem;
							line-height: 0.095rem;
							white-space: nowrap;
						}
					}

					.image_2 {
						border-radius: 50%;
						width: 0.4rem;
						height: 0.4rem;
						box-shadow: 0 0 1px #6f6f6f;
					}
				}
			}
		}

		.section_4 {
			margin-top: 0.14rem;
			padding: 0.14rem 0.21rem 0.25rem;
			background-color: rgb(255, 255, 255);
			border-radius: 0.1rem;

			.text_17 {
				color: rgb(56, 58, 63);
				font-size: 0.18rem;
				line-height: 0.15rem;
				white-space: nowrap;
			}

			.group_5 {
				margin-top: 0.22rem;
				padding: 0 0.28rem;

				.section_5 {
					margin-top: 0.04rem;
					padding: 0.1rem 0.015rem 0.14rem 0.16rem;
					color: rgb(255, 255, 255);
					font-size: 0.09rem;
					line-height: 0.075rem;
					white-space: nowrap;
					background-image: url("https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6216dee45a7e3f031061d0f1/621c59e162a7d90011002985/16480042463399723422.png");
					background-size: 100% 100%;
					background-repeat: no-repeat;
					width: 1.16rem;
					height: 1.16rem;

					.group_7 {
						margin-top: 0.29rem;

						.text_22 {
							margin-top: 0.07rem;
							align-self: center;
						}
					}

					.text_18 {
						align-self: center;
					}

					.text_19 {
						margin-top: 0.1rem;
					}

					.text_20 {
						margin-top: 0.07rem;
						align-self: flex-end;
					}
				}

				.group_8 {
					margin-bottom: 0.035rem;
					width: 0.96rem;

					.text_23 {
						color: rgb(56, 58, 63);
						font-size: 0.15rem;
						line-height: 0.15rem;
						white-space: nowrap;
					}

					.group_9 {
						color: rgb(56, 58, 63);
						font-size: 0.13rem;
						line-height: 0.15rem;
						white-space: nowrap;
						padding: 0 0.025rem;

						.section_6 {
							margin: 0.025rem 0 0.02rem;
							background-color: rgb(255, 190, 11);
							width: 0.1rem;
							height: 0.1rem;
						}

						.text_24 {
							margin-left: 0.1rem;
						}

						.section_7 {
							margin: 0.015rem 0 0.03rem;
							background-color: rgb(251, 86, 7);
							width: 0.1rem;
							height: 0.1rem;
						}

						.text_25 {
							margin-left: 0.095rem;
						}

						.section_8 {
							margin: 0.025rem 0 0.02rem;
							background-color: rgb(131, 56, 236);
							width: 0.1rem;
							height: 0.1rem;
						}

						.text_26 {
							margin-left: 0.095rem;
						}

						.section_9 {
							margin: 0.015rem 0 0.03rem;
							background-color: rgb(58, 134, 255);
							width: 0.1rem;
							height: 0.1rem;
						}

						.text_27 {
							margin-left: 0.1rem;
						}

						.section_10 {
							margin: 0.015rem 0 0.03rem;
							background-color: rgb(83, 207, 142);
							width: 0.1rem;
							height: 0.1rem;
						}

						.text_28 {
							margin-left: 0.095rem;
						}
					}

					.view {
						margin-top: 0.1rem;
					}

					.view_1 {
						margin-top: 0.045rem;
					}

					.view_2 {
						margin-top: 0.03rem;
					}

					.view_3 {
						margin-top: 0.045rem;
					}

					.view_4 {
						margin-top: 0.035rem;
					}
				}
			}
		}

		.text_1 {
			text-transform: uppercase;
		}
	}

	.userList {
		background: #fff;

		.list-item {
			padding-left: 0.2rem;
		}

		.image_1 {
			align-self: center;
			width: 0.4rem;
			height: 0.4rem;
			border-radius: 50%;
			box-shadow: 0 0 1px #6f6f6f;
		}

		.right-section {
			margin-left: 0.15rem;
			padding: 0.14rem 0 0.18rem;
			flex: 1 1 auto;
			box-shadow: 0px 0.005rem rgb(234, 234, 234);
			height: 0.66rem;
		}

		.top-group {
			margin-right: 0.1rem;
		}

		.text_6 {
			margin-top: 0.09rem;
			color: rgb(180, 182, 189);
			font-size: 0.12rem;
			line-height: 0.12rem;
			letter-spacing: 0.012rem;
			white-space: nowrap;
		}

		.text_2 {
			color: rgb(2, 2, 2);
			font-size: 0.15rem;
			line-height: 0.14rem;
			letter-spacing: 0.015rem;
			white-space: nowrap;
		}

		.text_4 {
			margin-bottom: 0.05rem;
			color: rgb(193, 196, 204);
			font-size: 0.12rem;
			line-height: 0.095rem;
			letter-spacing: 0.012rem;
			white-space: nowrap;
		}

		.text_11 {
			margin-bottom: 0.03rem;
			color: rgb(2, 2, 2);
			font-size: 0.15rem;
			line-height: 0.14rem;
			letter-spacing: 0.015rem;
			white-space: nowrap;
		}

		.right-text-wrapper {
			padding: 0.035rem 0.08rem;
			color: rgb(115, 129, 255);
			margin-left: 0.1rem;
			font-size: 0.11rem;
			line-height: 0.11rem;
			letter-spacing: 0.011rem;
			white-space: nowrap;
			background-color: rgba(115, 129, 255, 0.1);
			border-radius: 0.09rem;
			height: 0.18rem;
		}

		.text_13 {
			margin-right: 0.03rem;
		}

		//   .group_2 {
		//     padding-bottom: 0.15rem;
		//     flex: 1 1 auto;
		//     overflow-y: auto;
		//   }

		.group_4 {
			padding: 0 0.01rem;
			padding-left: 0.2rem;
		}

		.group_5 {
			padding-left: 0.2rem;
			margin-top: 0.015rem;
		}

		.group_4:active,
		.group_5:active {
			background: #efefef;
		}

		.group_8 {
			padding-left: initial;
		}

		.view_2 {
			margin-left: 0.11rem;
			padding: 0.18rem 0.035rem 0.14rem;
			height: 0.67rem;
			margin-right: 0.03rem;
		}

		.view_4 {
			margin-left: 0.16rem;
			padding: 0.15rem 0 0.14rem;
			height: 0.67rem;
		}

		.view_3 {
			margin-right: initial;
		}

		.view_5 {
			margin-right: initial;
		}

		.text_16 {
			margin-top: 0.07rem;
			color: rgb(193, 196, 204);
			line-height: 0.095rem;
			margin-right: 0.095rem;
		}

		.text_28 {
			margin-top: initial;
			position: absolute;
			left: 0;
			bottom: 0.17rem;
		}

		.text_8 {
			line-height: 0.14rem;
		}

		.text_9 {
			margin-right: 0.025rem;
		}

		.view_6 {
			color: initial;
			font-size: initial;
			line-height: initial;
			letter-spacing: initial;
			white-space: initial;
		}

		.text_15 {
			margin-bottom: initial;
			color: rgb(180, 182, 189);
			line-height: 0.12rem;
			margin-top: 0.08rem;
		}

		.view_19 {
			margin-left: 0.045rem;
		}
	}
</style>