Files
ZhHealth/pages/im/friends/pending.vue

120 lines
3.9 KiB
Vue

<template>
<view>
<!-- 搜索 -->
<u-sticky>
<view class="header-search">
<u-search placeholder="输入手机号码搜索" bgColor="white" @custom="search" @search="search"
v-model="searchValue"></u-search>
</view>
</u-sticky>
<u-list height="auto">
<u-list-item v-for="(item, index) in searchResult" :key="index">
<u-cell :title="item.name">
<u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
<div style="width: 50px;" slot="value">
<u-button type="success" size="small" @click="pending(item.userId)">申请</u-button>
</div>
</u-cell>
</u-list-item>
</u-list>
<!-- 新朋友 -->
<u-divider text="好友申请"></u-divider>
<u-list height="auto">
<u-swipe-action>
<u-list-item v-for="(item, index) in pedings" :key="index">
<u-swipe-action-item autoClose :options="options" @click="action($event, item)">
<u-cell :title="item.name">
<u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
</u-cell>
</u-swipe-action-item>
</u-list-item>
</u-swipe-action>
</u-list>
</view>
</template>
<script>
import {
getPedings,
resolveFriend,
rejectFriend,
searchFriend,
pedingFriend
} from '@/apis/interfaces/im.js'
export default {
data() {
return {
searchResult: [],
searchValue: '',
pedings: [],
options: [{
text: '通过',
style: {
backgroundColor: '#3c9cff'
}
}, {
text: '拒绝',
style: {
backgroundColor: '#f56c6c'
}
}]
}
},
onLoad() {
this.getPeddingList()
},
methods: {
search() {
console.log('sousuo');
searchFriend(this.searchValue).then(res => {
console.log(res);
this.searchResult = res
}).catch(err => {
console.log('err', err);
})
},
action(e, item) {
if (e.index == 0) {
resolveFriend(item.userId).then(res => {
this.getPeddingList()
})
} else {
rejectFriend(item.userId).then(res => {
this.getPeddingList()
})
}
},
getPeddingList() {
getPedings().then(res => {
this.pedings = res
})
},
pending(userId) {
uni.showLoading()
pedingFriend(userId).then(res => {
uni.showToast({
title: '申请成功',
success: () => {
this.searchResult = []
}
})
}).catch(err => {
uni.showToast({
icon: 'error',
title: err.message
})
})
}
}
}
</script>
<style lang="scss" scoped>
.header-search {
padding: $padding/2 $padding;
background: $window-color;
}
</style>