好友资料页面

This commit is contained in:
2022-01-26 11:01:42 +08:00
parent 33ee2ebd55
commit 5b3f036ed0
3 changed files with 306 additions and 225 deletions

View File

@@ -1,6 +1,5 @@
{ {
"pages": [ "pages": [{
{
"path": "pages/index/index", "path": "pages/index/index",
"name": "Index", "name": "Index",
"style": { "style": {
@@ -140,15 +139,15 @@
"navigationBarTextStyle": "white" "navigationBarTextStyle": "white"
} }
}, },
{ {
"path": "pages/setting/setting", "path": "pages/setting/setting",
"name": "Setting", "name": "Setting",
"style": { "style": {
"navigationBarTitleText": "设置中心", "navigationBarTitleText": "设置中心",
"navigationBarBackgroundColor": "#34CE98", "navigationBarBackgroundColor": "#34CE98",
"navigationBarTextStyle": "white" "navigationBarTextStyle": "white"
} }
}, },
{ {
"path": "pages/store/index", "path": "pages/store/index",
"name": "Store", "name": "Store",
@@ -158,15 +157,13 @@
"app-plus": { "app-plus": {
"titleNView": { "titleNView": {
"backgroundColor": "#FFFFFF", "backgroundColor": "#FFFFFF",
"buttons": [ "buttons": [{
{ "float": "right",
"float": "right", "text": "\ue603",
"text": "\ue603", "fontSrc": "/static/iconfont.ttf",
"fontSrc": "/static/iconfont.ttf", "color": "#000",
"color": "#000", "fontSize": "20px"
"fontSize": "20px" }]
}
]
} }
} }
} }
@@ -372,8 +369,8 @@
"path": "pages/im/index", "path": "pages/im/index",
"name": "IM", "name": "IM",
"style": { "style": {
"navigationBarBackgroundColor": "#FFFFFF", "navigationBarBackgroundColor": "#FFFFFF",
"navigationStyle":"custom" "navigationStyle": "custom"
} }
}, },
{ {
@@ -386,14 +383,12 @@
"app-plus": { "app-plus": {
"titleNView": { "titleNView": {
"type": "default", "type": "default",
"buttons": [ "buttons": [{
{ "float": "right",
"float": "right", "fontSrc": "/static/iconfont.ttf",
"fontSrc": "/static/iconfont.ttf", "text": "\ue607",
"text": "\ue607", "fontSize": "20px"
"fontSize": "20px" }]
}
]
} }
} }
} }
@@ -409,28 +404,26 @@
"path": "pages/im/friends/index", "path": "pages/im/friends/index",
"name": "imFriends", "name": "imFriends",
"style": { "style": {
"navigationBarTitleText": "我的好友", "navigationBarTitleText": "我的好友",
"app-plus": { "app-plus": {
"titleNView": { "titleNView": {
"type": "default", "type": "default",
"buttons": [ "buttons": [{
{ "float": "right",
"float": "right", "fontSrc": "/static/iconfont.ttf",
"fontSrc": "/static/iconfont.ttf", "text": "\ue603",
"text": "\ue603", "fontSize": "20px"
"fontSize": "20px" }]
} }
] }
}
}
} }
}, },
{ {
"path": "pages/im/friends/pending", "path": "pages/im/friends/pending",
"name": "imFriendsPending", "name": "imFriendsPending",
"style": { "style": {
"navigationBarTitleText": "新朋友", "navigationBarTitleText": "新朋友",
"navigationBarBackgroundColor":"#F3F6FB" "navigationBarBackgroundColor": "#F3F6FB"
} }
}, },
{ {
@@ -438,15 +431,15 @@
"name": "SearchFriend", "name": "SearchFriend",
"style": { "style": {
"navigationBarTitleText": "好友搜索", "navigationBarTitleText": "好友搜索",
"navigationBarBackgroundColor":"#F3F6FB" "navigationBarBackgroundColor": "#F3F6FB"
} }
}, },
{ {
"path": "pages/im/friends/info", "path": "pages/im/friends/info",
"name": "imFriendsInfo", "name": "imFriendsInfo",
"style": { "style": {
"navigationBarTitleText": "好友资料", "navigationBarTitleText": "好友资料",
"navigationBarBackgroundColor":"#F3F6FB" "navigationBarBackgroundColor": "#FFFFFF"
} }
}, },
{ {
@@ -509,16 +502,14 @@
"titleNView": { "titleNView": {
"backgroundImage": "linear-gradient(to right, #34ce98, #22aa98)", "backgroundImage": "linear-gradient(to right, #34ce98, #22aa98)",
"type": "transparent", "type": "transparent",
"buttons": [ "buttons": [{
{ "float": "right",
"float": "right", "text": "\ue607",
"text": "\ue607", "fontSrc": "/static/iconfont.ttf",
"fontSrc": "/static/iconfont.ttf", "color": "#FFF",
"color": "#FFF", "fontSize": "20px",
"fontSize": "20px", "background": "rgba(0,0,0,0)"
"background": "rgba(0,0,0,0)" }],
}
],
"backButton": { "backButton": {
"background": "rgba(0,0,0,0)" "background": "rgba(0,0,0,0)"
} }
@@ -572,16 +563,15 @@
"name": "UserFiles", "name": "UserFiles",
"style": { "style": {
"navigationBarTitleText": "健康档案管理", "navigationBarTitleText": "健康档案管理",
"navigationBarBackgroundColor": "#34CE98", "navigationBarBackgroundColor": "#34CE98",
"navigationBarTextStyle": "white" "navigationBarTextStyle": "white"
} }
} }
], ],
"tabBar": { "tabBar": {
"borderStyle": "white", "borderStyle": "white",
"selectedColor": "#34CE98", "selectedColor": "#34CE98",
"list": [ "list": [{
{
"iconPath": "static/tabBar/tabBar_00.png", "iconPath": "static/tabBar/tabBar_00.png",
"selectedIconPath": "static/tabBar/tabBar_show_00.png", "selectedIconPath": "static/tabBar/tabBar_show_00.png",
"pagePath": "pages/index/index", "pagePath": "pages/index/index",
@@ -623,4 +613,4 @@
"easycom": { "easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
} }
} }

View File

@@ -4,135 +4,206 @@
<view class="user-info"> <view class="user-info">
<u-avatar :src="userInfo.portraitUrl" size="100" /> <u-avatar :src="userInfo.portraitUrl" size="100" />
<view class="nickname">{{ userInfo.name }}</view> <view class="nickname">{{ userInfo.username }}</view>
<!-- <view class="sex"> <view class="gender">
<u-tag text="" color="#fff" borderColor="#5db6ee" size="mini" icon="man" bgColor="#5db6ee"></u-tag> <u-tag text="保密" v-if="userInfo.gender === 0" color="#fff" borderColor="#999" size="mini"
<u-tag text="女" color="#fff" borderColor="#e4867a" size="mini" icon="woman" bgColor="#e4867a"></u-tag> bgColor="#999"></u-tag>
</view> --> <u-tag text="男" v-if="userInfo.gender === 1" color="#fff" borderColor="#5db6ee" size="mini" icon="man"
bgColor="#5db6ee"></u-tag>
<u-tag text="女" v-if="userInfo.gender === 2" color="#fff" borderColor="#e4867a" size="mini" icon="woman"
bgColor="#e4867a"></u-tag>
</view>
<view class="address">{{ userInfo.address }}</view> <view class="address">{{ userInfo.address }}</view>
<!-- 通过/拒绝/已通过/已拒绝 -->
</view> </view>
<!-- <view class="user-lists">
<view class="user-lists-item"> <view class="actions">
<label>地区</label> <u-cell-group>
<text>黑龙江 哈尔滨</text> <u-cell isLink title="设置备注" @click="setRemark"></u-cell>
</view> <u-cell isLink title="设置标签" @click="setRemark"></u-cell>
</view> --> <u-cell title="聊天免打扰">
<!-- 发送消息 --> <u-switch slot="value" size="18" v-model="status" activeColor="#34CE98" @change="setStatus">
<view class="info-footer"><button class="open-btn" @click="toPrivate">发送消息</button></view> </u-switch>
</u-cell>
<u-cell title="聊天置顶">
<u-switch slot="value" size="18" v-model="isTop" activeColor="#34CE98" @change="setTop">
</u-switch>
</u-cell>
<!-- <u-cell title="加入黑名单">
<u-switch slot="value" size="18" v-model="block" activeColor="#34CE98" @change="setBlock"></u-switch>
</u-cell> -->
<u-cell isLink titleStyle="color: red" title="删除好友" @click="deleteFriend"></u-cell>
</u-cell-group>
</view>
<view class="footer">
<u-button @click="toPrivate()">
<u-icon name="chat" size="20" /> 发送消息
</u-button>
<u-button @click="toPrivate()">
<u-icon name="mic" size="20" /> 音视频通话
</u-button>
</view>
</view> </view>
</template> </template>
<script> <script>
import { getUserInfo } from '@/apis/interfaces/im.js'; import {
getUserInfo
} from '@/apis/interfaces/im.js'
import * as RongIMLib from '@rongcloud/imlib-uni'
export default { export default {
data() { data() {
return { return {
targetId: '', targetId: '',
userInfo: {} userInfo: {},
}; status: false, // 0 是免打扰1是正常通知
}, isTop: false,
mounted() { block: false,
getUserInfo(this.$Route.query.id).then(res => { conversationType: 1
this.userInfo = res; };
uni.setNavigationBarTitle({ },
title: res.name onLoad(e) {
}); this.targetId = e.targetId
}); getUserInfo(e.targetId).then(res => {
}, console.log(res);
methods: { this.userInfo = res
toPrivate() { uni.setNavigationBarTitle({
uni.redirectTo({ title: res.name
url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId })
}); })
RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({
status
}) => {
this.status = !Boolean(status)
})
RongIMLib.getConversation(this.conversationType, this.targetId, ({
conversation
}) => {
this.isTop = conversation.isTop
})
},
methods: {
toPrivate() {
uni.redirectTo({
url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
})
},
setRemark() {
uni.showToast({
icon: 'none',
title: '开发中'
})
},
deleteFriend() {
uni.showModal({
title: '删除确认',
content: '确认删除后不可恢复',
success: (e) => {
if (e.confirm) {
uni.showToast({
icon: 'none',
title: '开发中'
})
}
}
})
},
setStatus() {
RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status, ({
status
}) => {
this.status = !Boolean(status)
})
},
setTop() {
RongIMLib.setConversationToTop(this.conversationType, this.targetId, this.isTop, (res) => {
RongIMLib.getConversation(this.conversationType, this.targetId, ({
conversation
}) => {
this.isTop = conversation.isTop
})
})
},
setBlock() {
}
} }
} };
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content { .content {
min-height: 100vh; min-height: 100vh;
background: $window-color; background: $window-color;
}
// 用户信息
.user-info {
padding: $padding * 3 $padding;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: white;
.nickname {
font-size: 42rpx;
padding-top: $padding;
} }
.address { .actions {
line-height: 64rpx; background: white;
font-size: 26rpx; margin-top: $padding / 2;
color: $text-gray;
} }
.sex { // 用户信息
padding-top: $padding/2; .user-info {
padding: $padding 0;
text {
font-size: $title-size-sm;
background: #303133;
padding: 0 10rpx;
color: white;
border-radius: $radius-m;
line-height: 30rpx;
display: inline-block;
}
}
}
.user-lists {
margin-top: $margin;
background: white;
.user-lists-item {
padding: 0 $padding;
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
line-height: 90rpx; justify-content: center;
font-size: $title-size-lg; align-items: center;
background: white;
label { .nickname {
color: $text-color; font-size: 42rpx;
padding-top: $padding;
} }
text { .address {
line-height: 64rpx;
font-size: 26rpx;
color: $text-gray; color: $text-gray;
} }
}
}
// 发送消息 .gender {
.info-footer { padding-top: $padding/2;
padding: $padding;
width: 100%;
box-sizing: border-box;
.open-btn { text {
width: 100%; font-size: $title-size-sm;
height: 90rpx; background: #303133;
line-height: 90rpx; padding: 0 10rpx;
background: $main-color; color: white;
border-radius: $radius-lg; border-radius: $radius-m;
padding: 0; line-height: 30rpx;
margin: 0; display: inline-block;
color: white; }
font-size: $title-size; }
}
&::after {
display: none; .user-lists {
margin-top: $margin;
background: white;
.user-lists-item {
padding: 0 $padding;
display: flex;
justify-content: space-between;
line-height: 90rpx;
font-size: $title-size-lg;
label {
color: $text-color;
}
text {
color: $text-gray;
}
}
}
.footer {
padding: $padding / 2;
.u-button {
margin-top: $padding / 2;
} }
} }
}
</style> </style>

View File

@@ -10,74 +10,94 @@
<view class="pending"> <view class="pending">
<u-sticky> <u-sticky>
<view class="header-search" @click="$Router.push({ name: 'SearchFriend' })"> <view class="header-search" @click="$Router.push({ name: 'SearchFriend' })">
<u-search placeholder="输入手机号码搜索" height="74" searchIcon="search" inputAlign="center" bgColor="white" :disabled="true" :show-action="false" /> <u-search placeholder="输入手机号码搜索" height="74" searchIcon="search" inputAlign="center" bgColor="white"
:disabled="true" :show-action="false" />
</view> </view>
</u-sticky> </u-sticky>
<block v-if="pedings.length > 0"><applyFriend :lists="pedings" :isAgree="true" :isReject="false" @action="action" /></block> <block v-if="pedings.length > 0">
<applyFriend :lists="pedings" :isAgree="true" :isReject="false" @action="action" />
</block>
<view class="no-lists" v-else> <view class="no-lists" v-else>
<u-image class="cover" radius="4" width="400rpx" height="400rpx" :src="require('@/static/imgs/no-friend.png')" :lazy-load="true" /> <u-image class="cover" radius="4" width="400rpx" height="400rpx"
:src="require('@/static/imgs/no-friend.png')" :lazy-load="true" />
<span>暂无申请记录~</span> <span>暂无申请记录~</span>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import { getPedings, resolveFriend, rejectFriend } from '@/apis/interfaces/im.js'; import {
import applyFriend from '@/components/friend-apply-reject-agree'; getPedings,
export default { resolveFriend,
components: { rejectFriend
applyFriend } from '@/apis/interfaces/im.js';
}, import * as RongIMLib from '@rongcloud/imlib-uni'
data() { import applyFriend from '@/components/friend-apply-reject-agree'
return {
// pedings: [{userId:10990,name:'张三'}] export default {
pedings: [] components: {
}; applyFriend
},
onLoad() {
this.getPeddingList();
},
methods: {
// 操作同意或拒绝
action(e) {
let url = e.type === 'agree' ? resolveFriend : rejectFriend;
uni.showModal({
title: e.type === 'agree' ? '通过' : '拒绝',
content: e.type === 'agree' ? '通过后即可与该用户畅所欲言' : '拒绝后将不会收到该用户发来信息',
success: res => {
if (res.confirm) {
url(e.item.userId).then(res => {
this.getPeddingList();
});
}
}
});
}, },
getPeddingList() { data() {
getPedings().then(res => { return {
this.pedings = res; pedings: []
}); }
},
onLoad() {
this.getPeddingList()
},
methods: {
// 操作同意或拒绝
action(e) {
let url = e.type === 'agree' ? resolveFriend : rejectFriend
uni.showModal({
title: e.type === 'agree' ? '通过' : '拒绝',
content: e.type === 'agree' ? '通过后即可与该用户畅所欲言' : '拒绝后将不会收到该用户发来信息',
success: res => {
if (res.confirm) {
url(e.item.userId).then(res => {
this.getPeddingList()
})
}
}
})
},
getPeddingList() {
// 获取系统中的好友关系会话列表
// RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], 50, 0, (res) => {
// if (res.code === 0) {
// this.pedings = res.conversations.filter((item) => {
// return item.objectName == RongIMLib.ObjectName.ContactNotification
// })
// }
// })
getPedings().then(res => {
console.log(res)
this.pedings = res
})
}
} }
} };
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.header-search { .header-search {
padding: $padding/2 $padding; padding: $padding/2 $padding;
background: $window-color; background: $window-color;
} }
.no-lists{
padding-top: $padding * 3; .no-lists {
display: flex; padding-top: $padding * 3;
flex-direction: column; display: flex;
align-items: center; flex-direction: column;
justify-content: center; align-items: center;
box-sizing: border-box; justify-content: center;
font-size: $title-size-m; box-sizing: border-box;
color: $text-gray-m; font-size: $title-size-m;
span{ color: $text-gray-m;
padding-top: $padding ;
span {
padding-top: $padding;
}
} }
}
</style> </style>