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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4
pages/user/index.vue
View File

@@ -260,7 +260,9 @@
success: function() { success: function() {
uni.showToast({ uni.showToast({
title: '复制成功', 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-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */ /* 边框颜色 */
$uni-border-color:#c8c7cc; $uni-border-color:#f9f9f9;
/* 尺寸变量 */ /* 尺寸变量 */