TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

【更新】IM页面逻辑完善

Browse Source
This commit is contained in:
Jason.Chen
2022-01-21 12:15:45 +08:00
parent 92c6b37229
commit 21bee49729
8 changed files with 430 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

255
pages/im/friends/info.vue
View File

@@ -1,122 +1,145 @@
<template>
<view class="content">
<!-- 用户信息 -->
<view class="user-info">
<u-avatar
src="https://cdn.uviewui.com/uview/album/1.jpg"
size="58"
></u-avatar>
<view class="nickname">{{ userInfo.name }}</view>
<view class="sex">
<u-tag text="男" color="#fff" borderColor="#5db6ee" size="mini" icon="man" bgColor="#5db6ee"></u-tag>
<!-- <u-tag text="女" color="#fff" borderColor="#e4867a" size="mini" icon="woman" bgColor="#e4867a"></u-tag> -->
</view>
</view>
<view class="user-lists">
<view class="user-lists-item">
<label>地区</label>
<text>黑龙江 哈尔滨</text>
</view>
</view>
<!-- 发送消息 -->
<view class="info-footer">
<button class="open-btn" @click="toPrivate">发送消息</button>
</view>
</view>
<template>
<view class="content">
<!-- 用户信息 -->
<view class="user-info">
<u-avatar :src="userInfo.portraitUrl" size="100"></u-avatar>
<view class="nickname">{{ userInfo.name }}</view>
<!-- <view class="sex">
<u-tag text="男" color="#fff" borderColor="#5db6ee" size="mini" icon="man" bgColor="#5db6ee"></u-tag>
<u-tag text="女" color="#fff" borderColor="#e4867a" size="mini" icon="woman" bgColor="#e4867a"></u-tag>
</view> -->
<view class="address">
{{ userInfo.address}}
</view>
</view>
<!-- <view class="user-lists">
<view class="user-lists-item">
<label>地区</label>
<text>黑龙江 哈尔滨</text>
</view>
</view> -->
<!-- 发送消息 -->
<view class="info-footer">
<button class="open-btn" @click="toPrivate">发送消息</button>
</view>
</view>
</template>
<script>
import {
getUserInfo
} from '@/apis/interfaces/im.js'
export default {
data() {
return {
userInfo: {}
}
},
onLoad(e) {
getUserInfo(e.targetId).then(res => {
this.userInfo = res
})
},
methods: {
toPrivate() {
uni.navigateTo({
url: '/pages/im/private/index?targetId=10047&conversationType=1'
})
}
}
<script>
import {
getUserInfo
} from '@/apis/interfaces/im.js'
export default {
data() {
return {
targetId: '',
userInfo: {}
}
},
onLoad(e) {
this.targetId = e.targetId
getUserInfo(e.targetId).then(res => {
this.userInfo = res
uni.setNavigationBarTitle({
title: res.name
})
})
},
methods: {
toPrivate() {
uni.navigateTo({
url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
})
}
}
}
</script>
<style lang="scss" scoped>
.content{
min-height: 100vh;
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;
color: $text-color;
}
.sex{
padding-top: $padding/2;
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;
justify-content: space-between;
line-height: 90rpx;
font-size: $title-size-lg;
label{
color: $text-color;
}
text{
color: $text-gray;
}
}
}
// 发送消息
.info-footer{
padding: $padding;
width: 100%;
box-sizing: border-box;
.open-btn{
width: 100%;
height: 90rpx;
line-height: 90rpx;
background: $main-color;
border-radius: $radius-lg;
padding: 0;
margin: 0;
color: white;
font-size: $title-size;
&::after{
display: none;
}
}
}
<style lang="scss" scoped>
.content {
min-height: 100vh;
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 {
line-height: 64rpx;
font-size: 26rpx;
color: $text-gray;
}
.sex {
padding-top: $padding/2;
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;
justify-content: space-between;
line-height: 90rpx;
font-size: $title-size-lg;
label {
color: $text-color;
}
text {
color: $text-gray;
}
}
}
// 发送消息
.info-footer {
padding: $padding;
width: 100%;
box-sizing: border-box;
.open-btn {
width: 100%;
height: 90rpx;
line-height: 90rpx;
background: $main-color;
border-radius: $radius-lg;
padding: 0;
margin: 0;
color: white;
font-size: $title-size;
&::after {
display: none;
}
}
}
</style>