La123123.
/
im-backed
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

uniapp页面优化

master
xsx 2 years ago
parent
ce86855fbd
commit
982bb095d3
13 changed files with 97 additions and 103 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 27
      im-uniapp/components/chat-item/chat-item.vue
  2. 16
      im-uniapp/components/chat-message-item/chat-message-item.vue
  3. 2
      im-uniapp/components/friend-item/friend-item.vue
  4. 2
      im-uniapp/components/group-item/group-item.vue
  5. 2
      im-uniapp/components/group-rtc-join/group-rtc-join.vue
  6. 32
      im-uniapp/components/pop-menu/pop-menu.vue
  7. 2
      im-uniapp/pages.json
  8. 2
      im-uniapp/pages/chat/chat-box.vue
  9. 33
      im-uniapp/pages/chat/chat.vue
  10. 6
      im-uniapp/pages/common/user-info.vue
  11. 52
      im-uniapp/pages/friend/friend-search.vue
  12. 15
      im-uniapp/pages/friend/friend.vue
  13. 9
      im-uniapp/pages/group/group.vue

27
im-uniapp/components/chat-item/chat-item.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="chat-item" :class="active?'active':''" >
<view class="chat-item" :class="active?'active':''">
<!--rich-text中的表情包会屏蔽事件，所以这里用一个遮罩层捕获点击事件 -->
<view class="mask" @tap="showChatBox()"></view>
<view class="left">
@ -8,13 +8,16 @@
</view>
<view class="chat-right">
<view class="chat-name">
<view class="chat-name-text">{{chat.showName}}</view>
<view class="chat-name-text">
{{chat.showName}}
<uni-tag v-if="chat.type=='GROUP'" disabled text="群" size="mini" type="primary"></uni-tag>
</view>
<view class="chat-time">{{$date.toTimeText(chat.lastSendTime,true)}}</view>
</view>
<view class="chat-content">
<view class="chat-at-text">{{atText}}</view>
<view class="chat-send-name" v-show="chat.sendNickName">{{chat.sendNickName+':&nbsp;'}}</view>
<rich-text class="chat-content-text" :nodes="$emo.transform(chat.lastContent)"></rich-text>
<rich-text class="chat-content-text" :nodes="$emo.transform(chat.lastContent)"></rich-text>
</view>
</view>
</view>
@ -67,22 +70,23 @@
padding: 10rpx 20rpx;
align-items: center;
background-color: white;
white-space: nowrap;
white-space: nowrap;
&:hover {
background-color: #eeeeee;
background-color: #f5f6ff;
}
&.active {
background-color: #eeeeee;
background-color: #f5f6ff;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
}
.left {
position: relative;
display: flex;
@ -139,10 +143,11 @@
display: flex;
line-height: 60rpx;
height: 60rpx;
.chat-at-text {
color: #c70b0b;
font-size: 24rpx;
}
}
.chat-send-name {
font-size: 26rpx;
@ -153,7 +158,7 @@
font-size: 28rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-overflow: ellipsis;
}
}
}

16
im-uniapp/components/chat-message-item/chat-message-item.vue
View File

@ -126,7 +126,7 @@
style += `left:${touches.clientX}px;`;
}
this.menu.style = style;
//
//
this.$nextTick(() => {
this.menu.show = true;
});
@ -207,7 +207,8 @@
items.push({
key: 'DELETE',
name: '删除',
icon: 'trash'
icon: 'trash',
color: '#e64e4e'
});
if (this.msgInfo.selfSend && this.msgInfo.id > 0) {
items.push({
@ -282,16 +283,16 @@
position: relative;
line-height: 60rpx;
margin-top: 10rpx;
padding: 10rpx 20rpx;
background-color: white;
border-radius: 10rpx;
padding: 8rpx 20rpx;
background-color: #eee;
border-radius: 20rpx;
color: #333;
font-size: 30rpx;
text-align: left;
display: block;
word-break: break-all;
white-space: pre-line;
box-shadow: 1px 1px 1px #c0c0f0;
&:after {
content: "";
@ -301,7 +302,7 @@
width: 6rpx;
height: 6rpx;
border-style: solid dashed dashed;
border-color: white transparent transparent;
border-color: #eee transparent transparent;
overflow: hidden;
border-width: 18rpx;
}
@ -460,7 +461,6 @@
margin-left: 10px;
background-color: #587ff0;
color: #fff;
box-shadow: 1px 1px 1px #ccc;
&:after {
left: auto;

2
im-uniapp/components/friend-item/friend-item.vue
View File

@ -48,7 +48,7 @@
white-space: nowrap;
&:hover {
background-color: #eeeeee;
background-color: #f5f6ff;
}
.friend-info {

2
im-uniapp/components/group-item/group-item.vue
View File

@ -41,7 +41,7 @@
background-color: white;
white-space: nowrap;
&:hover {
background-color: #eeeeee;
background-color: #f5f6ff;
}
.group-name {

2
im-uniapp/components/group-rtc-join/group-rtc-join.vue
View File

@ -1,6 +1,6 @@
<template>
<uni-popup ref="popup" type="center">
<uni-popup-dialog mode="base" message="成功消息" :duration="2000" title="是否加入通话?" confirmText="加入"
<uni-popup-dialog mode="base" :duration="2000" title="是否加入通话?" confirmText="加入"
@confirm="onOk">
<div class="group-rtc-join">
<div class="host-info">

32
im-uniapp/components/pop-menu/pop-menu.vue
View File

@ -1,9 +1,10 @@
<template>
<view class="pop-menu" @tap="onClose()" @touchmove="onClose" @contextmenu.prevent="">
<view>
<view class="pop-menu" @tap="onClose()" @contextmenu.prevent=""></view>
<view class="menu" :style="menuStyle">
<view class="menu-item" v-for="(item) in items" :key="item.key" @click.prevent="onSelectMenu(item)">
<uni-icons :type="item.icon" size="22"></uni-icons>
<text> {{item.name}}</text>
<view class="menu-item" v-for="(item) in items" :key="item.key" @click.prevent="onSelectMenu(item)">
<uni-icons :type="item.icon" :style="itemStyle(item)" size="22"></uni-icons>
<text :style="itemStyle(item)"> {{item.name}}</text>
</view>
</view>
</view>
@ -29,6 +30,12 @@
},
onClose() {
this.$emit("close");
},
itemStyle(item){
if(item.color){
return `color:${item.color};`
}
return `color:#4f76e6;`;
}
}
}
@ -43,25 +50,30 @@
bottom: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
background-color: #333;
z-index: 99;
opacity: 0.5;
}
.menu {
position: fixed;
border: 1px solid #b4b4b4;
border-radius: 7px;
overflow: hidden;
box-shadow: 0px 0px 10px #ccc;
background-color: #eeeeee;
background-color: #f5f6ff;
z-index: 100;
.menu-item {
height: 25px;
min-width: 150rpx;
line-height: 25px;
font-size: 18px;
display: flex;
padding: 10px;
align-items: center;
justify-content: center;
border-bottom: 1px solid #d0d0d8;
}
}
</style>

2
im-uniapp/pages.json
View File

@ -17,8 +17,6 @@
"path": "pages/group/group"
}, {
"path": "pages/mine/mine"
}, {
"path": "pages/friend/friend-search"
}, {
"path": "pages/common/user-info"
}, {

2
im-uniapp/pages/chat/chat-box.vue
View File

@ -782,7 +782,7 @@
border: #dddddd solid 1px;
overflow: hidden;
position: relative;
background-color: #f7f8fd;
background-color: white;
.scroll-box {
height: 100%;

33
im-uniapp/pages/chat/chat.vue
View File

@ -6,12 +6,17 @@
<view>消息接收中...</view>
</loading>
</view>
<view class="nav-bar">
<view class="nav-search">
<uni-search-bar radius="100" v-model="searchText" cancelButton="none" placeholder="搜索"></uni-search-bar>
</view>
</view>
<view class="chat-tip" v-if="!loading && chatStore.chats.length==0">
温馨提示：您现在还没有任何聊天消息，快跟您的好友发起聊天吧~
</view>
<scroll-view class="scroll-bar" v-else scroll-with-animation="true" scroll-y="true">
<view v-for="(chatPos,i) in chatsPos" :key="i">
<chat-item v-if="!chatStore.chats[chatPos.idx].delete" :chat="chatStore.chats[chatPos.idx]"
<chat-item v-if="isShowChat(chatStore.chats[chatPos.idx])" :chat="chatStore.chats[chatPos.idx]"
:active="menu.chatIdx==chatPos.idx" :index="chatPos.idx"
@longpress.native="onShowMenu($event,chatPos.idx)"></chat-item>
</view>
@ -26,6 +31,7 @@
export default {
data() {
return {
searchText: "",
menu: {
show: false,
style: "",
@ -33,7 +39,8 @@
items: [{
key: 'DELETE',
name: '删除该聊天',
icon: 'trash'
icon: 'trash',
color: '#e64e4e'
},
{
key: 'TOP',
@ -94,6 +101,12 @@
moveToTop(chatIdx) {
this.$store.commit("moveTop", chatIdx);
},
isShowChat(chat){
if(chat.delete){
return false;
}
return !this.searchText || chat.showName.includes(this.searchText)
},
refreshUnreadBadge() {
if (this.unreadCount > 0) {
uni.setTabBarBadge({
@ -158,7 +171,23 @@
border: #dddddd solid 1px;
display: flex;
flex-direction: column;
.nav-bar {
padding: 2rpx 20rpx;
display: flex;
align-items: center;
background-color: white;
border-bottom: 1px solid #ddd;
height: 110rpx;
.nav-search {
flex: 1;
height: 110rpx;
}
}
.chat-tip {
position: absolute;
top: 400rpx;

6
im-uniapp/pages/common/user-info.vue
View File

@ -161,10 +161,12 @@
flex-direction: column;
padding-left: 40rpx;
flex: 1;
.info-primary {
display: flex;
align-items: center;
.info-username {
font-size: 40rpx;
font-weight: 600;

52
im-uniapp/pages/friend/friend-search.vue
View File

@ -1,52 +0,0 @@
<template>
<view class="page friend-search" >
<view class="search-bar">
<uni-search-bar v-model="searchText" :focus="true" @cancel="onCancel()" placeholder="输入好友昵称搜索"></uni-search-bar>
</view>
<view class="friend-items">
<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
<view v-for="(friend,index) in $store.state.friendStore.friends" :key="index">
<friend-item v-if="searchText&&!friend.delete&&friend.nickName.startsWith(searchText)"
:friend="friend" :index="index"></friend-item>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
searchText:""
}
},
methods: {
onCancel(){
uni.navigateBack();
}
}
}
</script>
<style scoped lang="scss">
.friend-search {
position: relative;
border: #dddddd solid 1px;
display: flex;
flex-direction: column;
.search-bar {
background: white;
}
.friend-items{
position: relative;
flex: 1;
overflow: hidden;
.scroll-bar {
height: 100%;
}
}
}
</style>

15
im-uniapp/pages/friend/friend.vue
View File

@ -2,7 +2,7 @@
<view class="tab-page friend">
<view class="nav-bar">
<view class="nav-search">
<uni-search-bar radius="100" @focus="onFocusSearch" cancelButton="none" placeholder="点击搜索好友"></uni-search-bar>
<uni-search-bar radius="100" @input="onInput" cancelButton="none" placeholder="点击搜索好友"></uni-search-bar>
</view>
<view class="nav-add" @click="onAddNewFriends()">
<uni-icons type="personadd" size="35"></uni-icons>
@ -34,15 +34,15 @@
export default {
data() {
return {
searchText: '',
friendIdx: [],
friendGroup: []
}
},
methods: {
onFocusSearch() {
uni.navigateTo({
url: "/pages/friend/friend-search"
})
onInput(searchText){
this.searchText = searchText;
this.refreshFriendGroup()
},
onAddNewFriends() {
uni.navigateTo({
@ -68,6 +68,9 @@
if (f.delete) {
return;
}
if(this.searchText && !f.nickName.includes(this.searchText)){
return;
}
let letter = this.firstLetter(f.nickName).toUpperCase();
// 非英文一律为#组
if (!this.isEnglish(letter)) {
@ -135,11 +138,9 @@
.nav-search {
flex: 1;
}
.nav-add {
line-height: 56px;
cursor: pointer;
}
}

9
im-uniapp/pages/group/group.vue
View File

@ -2,10 +2,10 @@
<view class="tab-page group">
<view class="nav-bar">
<view class="nav-search">
<uni-search-bar v-model="searchText" cancelButton="none" placeholder="点击搜索群聊"></uni-search-bar>
<uni-search-bar v-model="searchText" cancelButton="none" radius="100" placeholder="点击搜索群聊"></uni-search-bar>
</view>
<view class="nav-add" @click="onCreateNewGroup()">
<uni-icons type="personadd" size="30"></uni-icons>
<uni-icons type="personadd" size="35"></uni-icons>
</view>
</view>
<view class="group-tip" v-if="$store.state.groupStore.groups.length==0">
@ -14,7 +14,7 @@
<view class="group-items" v-else>
<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
<view v-for="group in $store.state.groupStore.groups" :key="group.id">
<group-item v-if="!group.quit&&group.remark.startsWith(searchText)" :group="group"></group-item>
<group-item v-if="!group.quit&&group.remark.includes(searchText)" :group="group"></group-item>
</view>
</scroll-view>
</view>
@ -50,7 +50,7 @@
flex-direction: column;
.nav-bar {
margin: 5rpx;
padding: 2rpx 10rpx;
display: flex;
align-items: center;
background-color: white;
@ -60,7 +60,6 @@
}
.nav-add {
line-height: 56px;
cursor: pointer;
}
}

Write Preview
Loading…
Cancel
Save