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

资料详情页面调整

Browse Source
This commit is contained in:
唐明明
2022-01-26 15:52:55 +08:00
parent 8bd933b3ee
commit 4d5d595329
3 changed files with 237 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
pages/im/friends/index.vue
View File

@@ -60,7 +60,6 @@
getFriends().then(res => { getFriends().then(res => {
this.indexs = res.indexList; this.indexs = res.indexList;
this.friends = res.itemArr; this.friends = res.itemArr;
console.log(res.itemArr);
}); });
}, },
computed: {}, computed: {},

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

@@ -1,55 +1,76 @@
<template> <template>
<view class="content"> <view class="content">
<!-- 用户信息 --> <!-- 用户信息 -->
<view class="user-info u-border-bottom"> <view class="info-flex">
<u-avatar :src="userInfo.portraitUrl" size="100" /> <u-avatar
:src="userInfo.portraitUrl"
<view class="nickname">{{ userInfo.username }}</view> shape="square"
<view class="gender"> size="50"
<u-tag text="保密" v-if="userInfo.gender === 0" color="#fff" borderColor="#999" size="mini" bg-color="#fff"
bgColor="#999"></u-tag> ></u-avatar>
<u-tag text="男" v-if="userInfo.gender === 1" color="#fff" borderColor="#5db6ee" size="mini" icon="man" <view class="info-text">
bgColor="#5db6ee"></u-tag> <view class="nickname">{{userInfo.name}}</view>
<u-tag text="女" v-if="userInfo.gender === 2" color="#fff" borderColor="#e4867a" size="mini" icon="woman" <view class="address" @longpress="copyAddress">地址：{{userInfo.address}}</view>
bgColor="#e4867a"></u-tag> </view>
</view>
<!-- 用户资料 -->
<view class="info-btns">
<view class="item">
<label>性别</label>
<view class="text" v-if="userInfo.gender === 0">保密</view>
<view class="text" v-if="userInfo.gender === 1">男</view>
<view class="text" v-if="userInfo.gender === 2">女</view>
</view> </view>
<view class="address" @longpress="copyAddress">{{ userInfo.address }}</view>
</view> </view>
<block v-if="userInfo.is_friend"> <block v-if="userInfo.is_friend">
<view class="actions"> <view class="info-btns">
<u-cell-group> <view class="item" @click="setRemark">
<u-cell isLink title="设置备注" @click="setRemark"></u-cell> <label>设置备注</label>
<u-cell isLink title="设置标签" @click="setRemark"></u-cell> <u-icon name="arrow-right" color="#999" size="16"></u-icon>
<u-cell title="聊天免打扰"> </view>
<u-switch slot="value" size="18" v-model="status" activeColor="#34CE98" @change="setStatus"> <view class="item" @click="setRemark">
</u-switch> <label>设置标签</label>
</u-cell> <u-icon name="arrow-right" color="#999" size="16"></u-icon>
<u-cell title="聊天置顶"> </view>
<u-switch slot="value" size="18" v-model="isTop" activeColor="#34CE98" @change="setTop"> <view class="item">
</u-switch> <label>聊天免打扰</label>
</u-cell> <u-switch size="22" v-model="status" activeColor="#34CE98" @change="setStatus"></u-switch>
<!-- <u-cell title="加入黑名单"> </view>
<u-switch slot="value" size="18" v-model="block" activeColor="#34CE98" @change="setBlock"></u-switch> <view class="item">
</u-cell> --> <label>聊天置顶</label>
<u-cell isLink titleStyle="color: red" title="删除好友" @click="deleteFriend"></u-cell> <u-switch size="22" v-model="isTop" activeColor="#34CE98" @change="setTop"></u-switch>
</u-cell-group> </view>
</view> </view>
<view class="footer"> <view class="footer">
<u-button @click="toPrivate"> <view class="footer-item" @click="deleteFriend">
<u-icon name="chat" size="20" /> 发送消息 <view class="icon">
</u-button> <u-icon class="icon-u" name="close-circle-fill" color="#fff" size="26"></u-icon>
<u-button @click="toPrivate"> </view>
<u-icon name="mic" size="20" /> 音视频通话 <view class="text">删除好友</view>
</u-button> </view>
<view class="footer-item" @click="toPrivate">
<view class="icon">
<u-icon class="icon-u" name="chat-fill" color="#fff" size="26"></u-icon>
</view>
<view class="text">发送消息</view>
</view>
<view class="footer-item" @click="toPrivate">
<view class="icon">
<u-icon class="icon-u" name="camera-fill" color="#fff" size="26"></u-icon>
</view>
<view class="text">视频通话</view>
</view>
</view> </view>
</block> </block>
<block v-else> <block v-else>
<view class="footer"> <view class="footer">
<u-button @click="toBeFriend" color="#34CE98"> <view class="footer-item" @click="toBeFriend">
<uni-icons color="#FFFFFF" type="staff" size="20"></uni-icons> 申请成为好友 <view class="icon">
</u-button> <u-icon class="icon-u" name="plus-people-fill" color="#fff" size="26"></u-icon>
</view>
<view class="text">申请好友</view>
</view>
</view> </view>
</block> </block>
</view> </view>
@@ -115,8 +136,8 @@
}, },
setRemark() { setRemark() {
uni.showToast({ uni.showToast({
icon: 'none', title: '开发中',
title: '开发中' icon : 'none'
}) })
}, },
deleteFriend() { deleteFriend() {
@@ -185,74 +206,97 @@
.content { .content {
min-height: 100vh; min-height: 100vh;
background: $window-color; background: $window-color;
} padding-top: $padding;
box-sizing: border-box;
.actions {
background: white;
margin-top: $padding / 2;
} }
// 用户信息 // 用户信息
.user-info { .info-flex{
padding: $padding 0; padding: $padding;
margin: 0 $margin;
display: flex; display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: white; background: white;
border-radius: $radius;
.nickname { .info-text{
font-size: 42rpx; width: calc(100% - 50px);
padding-top: $padding; padding-left: $padding;
} box-sizing: border-box;
.nickname{
.address { line-height: 30px;
line-height: 64rpx; font-size: $title-size + 6;
font-size: 26rpx;
color: $text-gray;
}
.gender {
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; color: $text-color;
text-align: left;
} }
.address{
text { line-height: 20px;
font-size: $title-size-sm;
color: $text-gray; color: $text-gray;
text-align: left;
@extend .nowrap;
} }
} }
} }
.footer { // footer
padding: $padding / 2; .footer{
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: $padding*2 $padding;
display: flex;
justify-content: space-around;
.footer-item{
margin: 0 $margin/2;
text-align: center;
.icon{
background: $main-color;
width: 88rpx;
height: 88rpx;
line-height: 88rpx;
display: inline-block;
border-radius: 50%;
.icon-u{
margin-top: calc((88rpx/2) - 13px);
margin-left: calc((88rpx/2) - 13px);
}
}
.text{
color: $main-color;
font-size: $title-size-m;
text-align: center;
padding-top: 10rpx;
}
}
}
.u-button { // btns
margin-top: $padding / 2;
.info-btns{
background: white;
margin: $margin;
border-radius: $radius;
.item{
line-height: 100rpx;
border-bottom: solid 1rpx $border-color;
display: flex;
align-items: center;
padding: 0 $padding;
justify-content: space-between;
font-size: $title-size-lg;
&:last-child{
border-bottom: none;
}
label{
width: 200rpx;
}
.text{
width: calc(100% - 200rpx);
color: $text-gray-m;
text-align: right;
@extend .nowrap;
} }
} }
}
</style> </style>

112
pages/im/friends/mine.vue
View File

@@ -13,30 +13,25 @@
<view class="address">地址：{{infoObj.address}}</view> <view class="address">地址：{{infoObj.address}}</view>
</view> </view>
</view> </view>
<!-- 按钮组 --> <!-- 用户身份 -->
<view class="info-btns"> <view class="info-btns">
<view class="item"> <view class="item">
<label>性别</label> <label>性别</label>
<view class="text">{{infoObj.gender === 0 ? '男': '女'}}</view> <view class="text" v-if="infoObj.gender === 0">保密</view>
<view class="text" v-if="infoObj.gender === 1">男</view>
<view class="text" v-if="infoObj.gender === 2">女</view>
</view> </view>
<view class="item"> <view class="item">
<label>地址二维码</label> <label>HASH</label>
<u-icon name="arrow-right" color="#999" size="14"></u-icon> <view class="text">{{infoObj.hash}}</view>
</view> </view>
</view> </view>
<!-- footer --> <!-- 二维码 -->
<view class="footer"> <view class="info-code">
<view class="footer-item"> <uqrcode class="info-code-src" :size="198" ref="uQRCode" text="qrContent" />
<view class="icon"> <view class="info-code-text">
<u-icon class="icon-u" name="chat-fill" color="#fff" size="26"></u-icon> <view>ZH-HEALTH扫一扫上面的二维码</view>
</view> <view>添加我的好友</view>
<view class="text">发消息</view>
</view>
<view class="footer-item">
<view class="icon">
<u-icon class="icon-u" name="chat-fill" color="#fff" size="26"></u-icon>
</view>
<view class="text">发消息</view>
</view> </view>
</view> </view>
</view> </view>
@@ -55,15 +50,18 @@
portraitUrl : '', portraitUrl : '',
gender : 0, gender : 0,
hash : '' hash : ''
} },
qrContent: 'ADDFRIEND|'
} }
}, },
onLoad(e){ onLoad(e){
console.log(e) console.log(e)
}, },
mounted() { mounted() {
getUserInfo(this.$Route.query.targetId).then(res => { getUserInfo(this.$Route.query.targetId).then(res => {
this.infoObj = res this.infoObj = res
this.qrContent += res.userId
console.log(this.infoObj) console.log(this.infoObj)
}) })
}, },
@@ -77,6 +75,52 @@
.content{ .content{
background: $window-color; background: $window-color;
min-height: 100vh; min-height: 100vh;
padding-top: $padding;
box-sizing: border-box;
.info-code{
background: white;
margin: 0 $margin;
border-radius: $radius;
padding: $padding*3 $padding $padding;
text-align: center;
&-src{
display: inline-block;
}
&-text{
text-align: center;
color: $text-gray;
font-size: $title-size-sm;
line-height: 40rpx;
padding: $padding 0;
}
}
// 用户信息
.info-flex{
padding: $padding;
margin: 0 $margin;
display: flex;
background: white;
border-radius: $radius;
.info-text{
width: calc(100% - 50px);
padding-left: $padding;
box-sizing: border-box;
.nickname{
line-height: 30px;
font-size: $title-size + 6;
color: $text-color;
text-align: left;
}
.address{
line-height: 20px;
font-size: $title-size-sm;
color: $text-gray;
text-align: left;
@extend .nowrap;
}
}
}
// footer // footer
.footer{ .footer{
position: fixed; position: fixed;
@@ -108,31 +152,11 @@
} }
} }
} }
// 用户信息
.info-flex{ // btns
padding: $padding;
display: flex;
.info-text{
width: calc(100% - 50px);
padding-left: $padding;
box-sizing: border-box;
.nickname{
line-height: 30px;
font-size: $title-size + 6;
color: $text-color;
}
.address{
line-height: 20px;
font-size: $title-size-lg;
color: $text-gray;
@extend .nowrap;
}
}
}
// 用户信息
.info-btns{ .info-btns{
background: white; background: white;
margin: 0 $margin; margin: $margin;
border-radius: $radius; border-radius: $radius;
.item{ .item{
line-height: 100rpx; line-height: 100rpx;
@@ -144,8 +168,14 @@
&:last-child{ &:last-child{
border-bottom: none; border-bottom: none;
} }
label{
width: 200rpx;
}
.text{ .text{
width: calc(100% - 200rpx);
color: $text-gray-m; color: $text-gray-m;
text-align: right;
@extend .nowrap;
} }
} }
} }