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

im聊天模块，我的群聊样式调整；通讯录页面优化处理；我的二维码样式重构；

Browse Source
This commit is contained in:
张冬雪
2022-02-17 13:04:10 +08:00
parent 88493f7fa6
commit 7c9a8f702d
11 changed files with 194 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
pages.json
View File

@@ -390,7 +390,7 @@
"path": "pages/im/friends/index",
"name": "imFriends",
"style": {
"navigationBarTitleText": "我的好友",
"navigationBarTitleText": "通讯录",
"app-plus": {
"titleNView": {
"type": "default",
@@ -429,7 +429,9 @@
"path": "pages/im/friends/mine",
"name": "imFriendsMine",
"style": {
"navigationBarTitleText": "我的资料"
"navigationBarTitleText": "我的二维码",
"navigationBarBackgroundColor": "#34CE98",
"navigationBarTextStyle": "white"
}
},
{

15
pages/im/components/friendSearchList.vue
View File

@@ -48,11 +48,11 @@
action(type, item) {
if (type === 'isFriend') {
// ，后期可以跳转到信息介绍页面，先留在这里
return uni.showToast({
title: '已是好友，无需重复添加',
icon: 'none',
duration: 2000
});
// return uni.showToast({
// title: '已是好友，无需重复添加',
// icon: 'none',
// duration: 2000
// });
}
this.$emit('action', {
type,
@@ -94,7 +94,7 @@
.name {
width: 100%;
color: $text-color;
font-size: $title-size + 2;
font-size: $title-size;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -106,7 +106,7 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: $title-size-m;
font-size: $title-size-m - 2;
margin-top: $margin - 10;
color: $text-gray-m;
}
@@ -115,6 +115,7 @@
.agress-btn {
display: flex;
color: #fff;
font-size: $title-size-m;
span {
display: inline-block;

9
pages/im/components/messageCell.vue
View File

@@ -46,7 +46,7 @@
<style lang="scss" scoped>
.message--cell {
display: flex;
padding: 20rpx 0 0 20rpx;
padding: 20rpx 10rpx 0 30rpx;
.avatar {
position: relative;
@@ -61,9 +61,10 @@
box-sizing: border-box;
position: relative;
flex: 1;
border-bottom-width: 0.5px !important;
border-color: $u-border-color !important;
border-color: #f9f9f9 !important;
border-bottom-style: solid;
.header {
@@ -84,10 +85,12 @@
}
.time {
font-size: $title-size-sm - 2;
font-size: $title-size-sm - 3;
color: $text-gray-m;
position: absolute;
right: 30rpx;
padding-top: 4rpx;
font-weight: normal;
}
}
}

2
pages/im/components/messagePreview.nvue
View File

@@ -54,7 +54,7 @@
.preview {
word-break: break-all;
color: $text-gray-m;
padding-top: $padding - 22;
padding-top: 6rpx;
padding-bottom: $padding;
font-size: $title-size-m - 2;
height: 32rpx;

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

@@ -1,7 +1,7 @@
<template>
<view>
<u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
<view class="friend-flex u-border-bottom" @click="toPending">
<view class="friend-flex" @click="toPending">
<u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_01.png')"></u-avatar>
<u-badge max="99" absolute :offset="[23, 20]" :value="pendingCount" />
<view class="info">新的朋友</view>
@@ -12,21 +12,21 @@
</view>
<block v-if="friends.length > 0">
<u-index-item v-for="(item, fkey) in friends" :key="fkey">
<u-index-anchor :text="indexs[fkey]" bgColor="#F9F9F9" height="20" size="12" color="#666" />
<view v-for="(friendItem, index) in item" :key="index" class="friend-flex u-border-bottom"
<u-index-anchor :text="indexs[fkey]" bgColor="#ededed" height="20" size="12" color="#666"
style="padding:10rpx 30rpx" />
<view v-for="(friendItem, index) in item" :key="index" class="friend-flex"
@click="toFriend(friendItem.targetId)">
<u-avatar class="avatar-img" size="40" shape="square" :src="contact(friendItem.targetId).portraitUrl" />
<u-avatar class="avatar-img" size="40" shape="square"
:src="contact(friendItem.targetId).portraitUrl" />
<view class="info">
<view class="name">{{ contact(friendItem.targetId).name }}</view>
<view class="address">hash:{{ friendItem.address }}</view>
<!-- <view class="address">Hash:{{ friendItem.address }}</view> -->
</view>
</view>
</u-index-item>
</block>
<block v-else>
<u-empty class="pages-null" mode="data" text="暂无好友">
</u-empty>
<u-empty class="pages-null" mode="data" text="暂无好友" />
</block>
</u-index-list>
</view>
@@ -90,9 +90,18 @@
},
// 新朋友
toPending() {
uni.navigateTo({
url: '/pages/im/friends/pending'
});
if (this.pendingCount > 0) {
uni.navigateTo({
url: '/pages/im/friends/pending'
});
} else {
uni.showToast({
title: ` 暂无好友申请 ~ `,
icon: "none",
mask: true,
duration: 3000
})
}
}
},
onNavigationBarButtonTap(e) {
@@ -112,21 +121,25 @@
// 好友列表
.friend-flex {
position: relative;
padding: 24rpx $padding;
padding: 0 $padding 0 $padding;
display: flex;
flex-direction: row;
align-items: center;
.avatar-img{
box-sizing: border-box;
.avatar-img {
box-shadow: 0 0 20rpx rgba($color: $main-color, $alpha: 0.2);
}
.info {
flex: 1;
margin-left: $padding;
border-bottom: solid 1rpx #f9f9f9;
height: 120rpx;
line-height: 120rpx;
.name {
font-size: $title-size + 2;
font-size: $title-size + 2;
font-size: $title-size;
color: #454545 !important;
@extend .nowrap;
}
@@ -135,7 +148,24 @@
color: $text-gray-m;
font-size: $title-size-m - 3;
padding-top: 10rpx;
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 600rpx;
}
}
}
.list-cell {
display: flex;
box-sizing: border-box;
width: 100%;
padding: 10px 24rpx;
overflow: hidden;
color: #323233;
font-size: 14px;
line-height: 24px;
background-color: #fff;
}
</style>

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

@@ -1,32 +1,20 @@
<template>
<view class="content">
<view class="friend-ewm-content">
<view class="bg"></view>
<!-- 用户信息 -->
<view class="info-flex">
<u-avatar :src="infoObj.portraitUrl" shape="square" size="50" bg-color="#fff"></u-avatar>
<view class="info-text">
<view class="info-flex-item">
<u-avatar :src="infoObj.portraitUrl" shape="square" size="210rpx" bg-color="#fff" class="avatar" />
<view class="nickname">{{infoObj.name}}</view>
<view class="address">地址：{{infoObj.address}}</view>
</view>
</view>
<!-- 用户身份 -->
<view class="info-btns">
<view class="item">
<label>性别</label>
<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 class="item">
<label>地址</label>
<view class="text">{{infoObj.address}}</view>
</view>
</view>
<!-- 二维码 -->
<view class="info-code">
<uqrcode class="info-code-src" :size="198" :text="qrContent" />
<view class="info-code-text">
<view>ZH-HEALTH扫一扫上面的二维码</view>
<view>添加我的好友</view>
<view class="address">{{infoObj.address}}</view>
<view class="info-code">
<uqrcode class="info-code-src" :size="160" :text="qrContent" />
<view class="info-code-text">扫描二维码加我ZH大健康好友</view>
</view>
<u-icon class="download" :name="require('@/static/imgs/copy-333.png')" size="14" :bold="true"
@click="copy" :label="'应用下载:'+ downUrl" labelPos="left" labelSize="14" space="6"
labelColor="#26a377" />
<view class="copy" @click="copy"> 复制地址 </view>
</view>
</view>
</view>
@@ -48,141 +36,126 @@
gender: 0,
hash: ''
},
downUrl: 'http://www.baidu.com',
qrContent: 'ADDFRIEND|'
}
},
onLoad(e) {
this.qrContent += e.targetId
getUserInfo(e.targetId).then(res => {
this.infoObj = res
})
onLoad(e) {
this.qrContent += e.targetId
getUserInfo(e.targetId).then(res => {
this.infoObj = res
})
},
methods: {
copy() {
uni.setClipboardData({
data: this.downUrl,
success: function() {
uni.showToast({
title: ` 下载链接已复制到剪贴板 `,
icon: 'none',
position:'bottom',
mask: true,
duration: 2000
})
}
});
}
}
}
</script>
<style lang="scss" scoped>
.content {
background: $window-color;
.friend-ewm-content {
background: #fff;
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;
}
.bg {
background-color: red;
width: 100%;
height: 340rpx;
background-color: $main-color;
}
// 用户信息
.info-flex {
padding: $padding;
margin: 0 $margin;
display: flex;
padding: $padding 0;
// margin: 0 $margin;
background: white;
border-radius: $radius;
border-radius: 50rpx 50rpx 0 0;
position: relative;
top: -100rpx;
.info-text {
width: calc(100% - 50px);
padding-left: $padding;
.info-flex-item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
box-sizing: border-box;
position: relative;
top: -160rpx;
.avatar {
// padding: 14rpx;
border-radius: 10rpx;
background-color: #fff;
border: solid 14rpx rgba($color: #fff, $alpha:1);
}
.nickname {
line-height: 30px;
font-size: $title-size + 6;
line-height: 80rpx;
font-size: $title-size + 5;
color: $text-color;
text-align: left;
font-weight: 600;
}
.address {
line-height: 20px;
font-size: $title-size-sm;
line-height: 60rpx;
font-size: $title-size-m + 2;
color: $text-gray;
text-align: left;
@extend .nowrap;
}
}
}
// footer
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: $padding*2 $padding;
display: flex;
justify-content: space-around;
.info-code {
background: white;
margin: 0 $margin;
border-radius: $radius;
padding: $padding * 1.4 $padding $padding;
text-align: center;
.footer-item {
margin: 0 $margin/2;
&-src {
display: inline-block;
border-radius: 10rpx;
border: solid 20rpx rgba($color: #f9f9f9, $alpha:1);
background-color: #fff;
padding: 14rpx;
}
.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 {
text-align: center;
color: $text-gray;
font-size: $title-size-m + 1;
line-height: 40rpx;
padding: 8rpx 0 $padding 0;
}
}
.text {
.download {
background-color: #f9f9fb;
padding: 20rpx 30rpx 10rpx 30rpx;
border-radius: 10rpx;
}
.copy {
font-size: $title-size + 4;
color: $main-color;
font-size: $title-size-m;
text-align: center;
padding-top: 10rpx;
}
}
}
// btns
.info-btns {
background: white;
margin: $margin;
border-radius: $radius;
.item {
line-height: 100rpx;
border-bottom: solid 1rpx $border-color;
display: flex;
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;
background-color: rgba($color: $main-color, $alpha: .1);
padding: 20rpx 100rpx;
border-radius: 50rpx;
margin-top: 40rpx;
}
}
}

3
pages/im/friends/search.vue
View File

@@ -62,8 +62,7 @@
});
});
},
action(e) {
action(e) {
uni.navigateTo({
url: '/pages/im/friends/info?targetId=' + e.item.targetId
})

36
pages/im/group/index.vue
View File

@@ -1,12 +1,13 @@
<template>
<view>
<view v-for="(item, index) in groups" :key="index" class="friend-flex u-border-bottom"
@click="toGroup(item.targetId)">
<u-avatar size="40" shape="square" :src="contact(item.targetId).portraitUrl" />
<view class="group">
<view class="title"> 群聊 </view>
<view v-for="(item, index) in groups" :key="index" class="friend-flex" @click="toGroup(item.targetId)">
<u-avatar size="38" shape="square" :src="contact(item.targetId).portraitUrl" />
<view class="info">
<view class="name">{{ item.name }}</view>
</view>
</view>
<view class="group-count"> {{groups.length}}个群聊 </view>
<u-modal negativeTop="300" :show="createModal" title="创建群聊" showCancelButton @cancel="onHideModal"
@confirm="onCreateGroup">
<view class="slot-content">
@@ -82,6 +83,24 @@
</script>
<style lang="scss" scoped>
.group {
min-height: 100vh;
background-color: $window-color;
.title{
font-size: $title-size-m;
color: $text-gray-m;
padding: 10rpx $padding;
}
.group-count{
text-align: center;
font-size: $title-size;
color: $text-gray;
background-color: #fff;
padding: 10rpx $padding $padding $padding;
font-weight: normal;
}
}
// 好友列表
.friend-flex {
position: relative;
@@ -89,14 +108,17 @@
display: flex;
flex-direction: row;
align-items: center;
background-color: #fff;
.info {
flex: 1;
margin-left: $padding;
margin-left: $padding + 10;
border-bottom: solid 1rpx #f9f9f9;
padding-bottom: $padding;
.name {
font-size: $title-size + 2;
font-size: $title-size + 2;
font-size: $title-size + 1;
color: #454545 !important;
}

4
pages/user/index.vue
View File

@@ -260,7 +260,9 @@
success: function() {
uni.showToast({
title: '复制成功',
icon: 'none'
icon: 'none',
mask:true,
duration:2000
})
}
});

BIN
static/imgs/copy-333.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

2
uni.scss
View File

@@ -37,7 +37,7 @@ $uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */
$uni-border-color:#c8c7cc;
$uni-border-color:#f9f9f9;
/* 尺寸变量 */