737 lines
16 KiB
Vue
737 lines
16 KiB
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>
|