109 lines
3.4 KiB
Vue
109 lines
3.4 KiB
Vue
<!--
|
|
* @Description:搜索新朋友页面
|
|
* @Author: Aimee·Zhang
|
|
* @Date: 2022-01-24 10:49:15
|
|
* @LastEditors: Aimee·Zhang
|
|
* @LastEditTime: 2022-01-25 10:18:26
|
|
-->
|
|
|
|
<template>
|
|
<view class="search">
|
|
<!-- 搜索 、 -->
|
|
<u-sticky>
|
|
<view class="header-search">
|
|
<u-search placeholder="输入用户账号、手机号" height="74" searchIcon="search" @custom="search"
|
|
v-model="searchValue" @search="search" inputAlign="center" bgColor="#f9f9f9" :focus="focused" />
|
|
</view>
|
|
</u-sticky>
|
|
<block v-if="searchResult.length > 0">
|
|
<applyFriend :lists="searchResult" :isApply="true" @action="action" />
|
|
</block>
|
|
<view class="no-lists" v-else>
|
|
<u-image class="cover" radius="4" width="400rpx" height="400rpx"
|
|
:src="require('@/static/imgs/no-search.png')" :lazy-load="true" />
|
|
<span>暂无匹配内容~</span>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
searchFriend,
|
|
pedingFriend
|
|
} from '@/apis/interfaces/im.js';
|
|
import applyFriend from '@/components/friend-apply-reject-agree';
|
|
export default {
|
|
components: {
|
|
applyFriend
|
|
},
|
|
data() {
|
|
return {
|
|
searchResult: [],
|
|
searchValue: '',
|
|
focused: true
|
|
};
|
|
},
|
|
methods: {
|
|
search() {
|
|
searchFriend(this.searchValue)
|
|
.then(res => {
|
|
this.searchResult = res;
|
|
})
|
|
.catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: 'none'
|
|
});
|
|
});
|
|
},
|
|
// 操作申请
|
|
action(e) {
|
|
uni.showLoading();
|
|
pedingFriend(e.item.userId)
|
|
.then(res => {
|
|
uni.showToast({
|
|
title: '申请成功',
|
|
icon: "none",
|
|
success: () => {
|
|
this.searchResult.splice(this.searchResult.findIndex((it, index) => it
|
|
.userId === e.item.userId), 1);
|
|
if (this.searchResult.length === 0) {
|
|
this.searchValue = ''
|
|
}
|
|
}
|
|
});
|
|
})
|
|
.catch(err => {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: err.message,
|
|
duration: 2000
|
|
});
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.header-search {
|
|
padding: $padding/2 $padding;
|
|
// background: $window-color;
|
|
}
|
|
|
|
.no-lists {
|
|
padding-top: $padding * 3;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
font-size: $title-size-m;
|
|
color: $text-gray-m;
|
|
|
|
span {
|
|
padding-top: $padding;
|
|
}
|
|
}
|
|
</style>
|