From b7d447a4204adf629aee3545dcddca051145c1a2 Mon Sep 17 00:00:00 2001
From: libaogang <237412637@qq.com>
Date: Sun, 17 Nov 2024 20:44:10 +0800
Subject: [PATCH] =?UTF-8?q?uniapp=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
im-uniapp/App.vue | 31 +++-
.../components/chat-at-box/chat-at-box.vue | 24 +--
.../chat-group-readed/chat-group-readed.vue | 5 +-
im-uniapp/components/chat-item/chat-item.vue | 57 ++++---
.../chat-message-item/chat-message-item.vue | 79 +++++-----
.../components/chat-record/chat-record.vue | 32 ++--
.../components/friend-item/friend-item.vue | 21 ++-
.../components/group-item/group-item.vue | 23 +--
.../components/head-image/head-image.vue | 37 +++--
im-uniapp/components/nav-bar/nav-bar.vue | 118 +++++++++++++++
im-uniapp/components/pop-menu/pop-menu.vue | 32 ++--
im-uniapp/im-var.scss | 60 ++++++++
im-uniapp/im.scss | 141 +++++++++++++++++
im-uniapp/pages.json | 7 +-
im-uniapp/pages/chat/chat-box.vue | 61 ++++----
im-uniapp/pages/chat/chat.vue | 31 +---
im-uniapp/pages/common/user-info.vue | 143 ++++++++++--------
im-uniapp/pages/friend/friend-add.vue | 14 +-
im-uniapp/pages/friend/friend.vue | 45 +++---
im-uniapp/pages/group/group-edit.vue | 60 ++++----
im-uniapp/pages/group/group-info.vue | 65 ++++----
im-uniapp/pages/group/group-invite.vue | 33 ++--
im-uniapp/pages/group/group-member.vue | 25 ++-
im-uniapp/pages/group/group.vue | 22 +--
im-uniapp/pages/login/login.vue | 13 +-
im-uniapp/pages/mine/mine-edit.vue | 58 +++----
im-uniapp/pages/mine/mine-password.vue | 32 ++--
im-uniapp/pages/mine/mine.vue | 112 ++++++++------
im-uniapp/pages/register/register.vue | 11 +-
im-uniapp/uni.scss | 46 ++++++
30 files changed, 922 insertions(+), 516 deletions(-)
create mode 100644 im-uniapp/components/nav-bar/nav-bar.vue
create mode 100644 im-uniapp/im-var.scss
create mode 100644 im-uniapp/im.scss
diff --git a/im-uniapp/App.vue b/im-uniapp/App.vue
index e2c7c3a..b594875 100644
--- a/im-uniapp/App.vue
+++ b/im-uniapp/App.vue
@@ -383,6 +383,7 @@
\ No newline at end of file
diff --git a/im-uniapp/components/chat-at-box/chat-at-box.vue b/im-uniapp/components/chat-at-box/chat-at-box.vue
index d9627dd..0273268 100644
--- a/im-uniapp/components/chat-at-box/chat-at-box.vue
+++ b/im-uniapp/components/chat-at-box/chat-at-box.vue
@@ -10,7 +10,7 @@
-
+
@@ -21,13 +21,13 @@
-
+
+ size="small">
{{ m.showNickName}}
-
-
-
+
+
+
@@ -112,7 +112,7 @@
flex-direction: column;
background-color: white;
padding: 10rpx;
- border-radius: 15rpx;
+ //border-radius: 15rpx;
.chat-at-top {
display: flex;
@@ -148,19 +148,23 @@
overflow: hidden;
.member-item {
- height: 120rpx;
+ height: 110rpx;
display: flex;
position: relative;
padding: 0 30rpx;
align-items: center;
background-color: white;
white-space: nowrap;
+ margin-bottom: 1px;
+
+ &.checked {
+ background-color: $im-color-primary-light-9;
+ }
.member-name {
flex: 1;
padding-left: 20rpx;
- font-size: 30rpx;
- font-weight: 600;
+ font-size: $im-font-size;
line-height: 60rpx;
white-space: nowrap;
overflow: hidden;
diff --git a/im-uniapp/components/chat-group-readed/chat-group-readed.vue b/im-uniapp/components/chat-group-readed/chat-group-readed.vue
index 5a8de75..3359d70 100644
--- a/im-uniapp/components/chat-group-readed/chat-group-readed.vue
+++ b/im-uniapp/components/chat-group-readed/chat-group-readed.vue
@@ -2,7 +2,7 @@
-
+
@@ -100,7 +100,8 @@
flex-direction: column;
background-color: white;
padding: 10rpx;
- border-radius: 15rpx;
+
+ //border-radius: 15rpx;
.scroll-bar {
height: 800rpx;
}
diff --git a/im-uniapp/components/chat-item/chat-item.vue b/im-uniapp/components/chat-item/chat-item.vue
index 7dcf1c1..dfa6265 100644
--- a/im-uniapp/components/chat-item/chat-item.vue
+++ b/im-uniapp/components/chat-item/chat-item.vue
@@ -3,13 +3,13 @@
-
+
{{chat.showName}}
-
+
{{$date.toTimeText(chat.lastSendTime,true)}}
@@ -17,7 +17,7 @@
{{atText}}
{{chat.sendNickName+': '}}
-
+
@@ -76,28 +76,29 @@
\ No newline at end of file
diff --git a/im-uniapp/components/friend-item/friend-item.vue b/im-uniapp/components/friend-item/friend-item.vue
index 5a475f5..726fe46 100644
--- a/im-uniapp/components/friend-item/friend-item.vue
+++ b/im-uniapp/components/friend-item/friend-item.vue
@@ -1,7 +1,6 @@
-
+
{{ friend.nickName}}
@@ -37,7 +36,7 @@
\ No newline at end of file
+
diff --git a/im-uniapp/components/group-item/group-item.vue b/im-uniapp/components/group-item/group-item.vue
index 5bf3f89..087d36f 100644
--- a/im-uniapp/components/group-item/group-item.vue
+++ b/im-uniapp/components/group-item/group-item.vue
@@ -1,7 +1,7 @@
+ :url="group.headImage">
{{ group.showGroupName}}
@@ -33,21 +33,24 @@
.group-item {
height: 100rpx;
display: flex;
- margin-bottom: 1rpx;
+ margin-bottom: 2rpx;
position: relative;
- padding: 10rpx;
- padding-left: 20rpx;
+ padding: 18rpx 20rpx;
align-items: center;
background-color: white;
white-space: nowrap;
- &:hover {
- background-color: #f5f6ff;
- }
- .group-name {
- font-size: 32rpx;
+ &:hover {
+ background-color: $im-bg-active;
+ }
+
+ &.active {
+ background-color: $im-bg-active;
+ }
+
+ .group-name {
+ font-size: $im-font-size;
padding-left: 20rpx;
- font-weight: 600;
text-align: left;
white-space: nowrap;
overflow: hidden;
diff --git a/im-uniapp/components/head-image/head-image.vue b/im-uniapp/components/head-image/head-image.vue
index f8298c2..5a12ed3 100644
--- a/im-uniapp/components/head-image/head-image.vue
+++ b/im-uniapp/components/head-image/head-image.vue
@@ -3,7 +3,7 @@
- {{name.substring(0,1).toUpperCase()}}
+ {{name?.substring(0,1).toUpperCase()}}
@@ -24,20 +24,20 @@
type: Number
},
size: {
- type: Number,
- default: 20
+ type: [Number, String],
+ default: 'default'
},
url: {
type: String
},
name: {
type: String,
- default: "?"
+ default: null
},
online: {
type: Boolean,
default: false
- }
+ },
},
methods: {
showUserInfo(e) {
@@ -49,15 +49,30 @@
}
},
computed: {
+ _size(){
+ if(typeof this.size === 'number'){
+ return this.size;
+ } else if(typeof this.size === 'string'){
+ return {
+ 'default': 96,
+ 'small': 84,
+ 'smaller': 72,
+ 'mini': 60,
+ 'minier': 48,
+ 'lage': 108,
+ 'lager': 120,
+ }[this.size]
+ }
+ },
avatarImageStyle() {
- return `width:${this.size}rpx;
- height:${this.size}rpx;`
+ return `width:${this._size}rpx;
+ height:${this._size}rpx;`
},
avatarTextStyle() {
- return `width: ${this.size}rpx;
- height:${this.size}rpx;
- background-color:${this.textColor};
- font-size:${this.size*0.5}rpx;
+ return `width: ${this._size}rpx;
+ height:${this._size}rpx;
+ background-color:${this.name ? this.textColor : '#fff'};
+ font-size:${this._size*0.5}rpx;
`
},
textColor() {
diff --git a/im-uniapp/components/nav-bar/nav-bar.vue b/im-uniapp/components/nav-bar/nav-bar.vue
new file mode 100644
index 0000000..d928939
--- /dev/null
+++ b/im-uniapp/components/nav-bar/nav-bar.vue
@@ -0,0 +1,118 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/im-uniapp/components/pop-menu/pop-menu.vue b/im-uniapp/components/pop-menu/pop-menu.vue
index 9677c9a..e9b2cb4 100644
--- a/im-uniapp/components/pop-menu/pop-menu.vue
+++ b/im-uniapp/components/pop-menu/pop-menu.vue
@@ -6,7 +6,7 @@
@@ -75,7 +75,7 @@
if(item.color){
return `color:${item.color};`
}
- return `color:#4f76e6;`;
+ // return `color:#4f76e6;`;
}
}
}
@@ -90,29 +90,29 @@
bottom: 0;
width: 100%;
height: 100%;
- background-color: #333;
z-index: 999;
- opacity: 0.5;
-
}
.menu {
position: fixed;
- border: 1px solid #b4b4b4;
- border-radius: 7px;
+ border-radius: 4px;
overflow: hidden;
- background-color: #f5f6ff;
+ background-color: #fff;
z-index: 1000;
+ box-shadow: $im-box-shadow-dark;
.menu-item {
- height: 25px;
- min-width: 150rpx;
- line-height: 25px;
- font-size: 18px;
+ height: 28px;
+ min-width: 120rpx;
+ line-height: 28px;
+ font-size: $im-font-size-small;
display: flex;
- padding: 10px;
- justify-content: center;
- border-bottom: 1px solid #d0d0d8;
-
+ padding: 6px 20px;
+ justify-content: flex-start;
+
+ &:hover {
+ background: $im-bg-active;
+ }
+
.menu-icon {
margin-right: 10rpx;
}
diff --git a/im-uniapp/im-var.scss b/im-uniapp/im-var.scss
new file mode 100644
index 0000000..2a06ac2
--- /dev/null
+++ b/im-uniapp/im-var.scss
@@ -0,0 +1,60 @@
+// 颜色
+$im-color-primary: #3e45d7;
+$im-color-primary-light-1: mix(#fff, $im-color-primary, 10%);
+$im-color-primary-light-2: mix(#fff, $im-color-primary, 20%);
+$im-color-primary-light-3: mix(#fff, $im-color-primary, 30%);
+$im-color-primary-light-4: mix(#fff, $im-color-primary, 40%);
+$im-color-primary-light-5: mix(#fff, $im-color-primary, 50%);
+$im-color-primary-light-6: mix(#fff, $im-color-primary, 60%);
+$im-color-primary-light-7: mix(#fff, $im-color-primary, 70%);
+$im-color-primary-light-8: mix(#fff, $im-color-primary, 80%);
+$im-color-primary-light-9: mix(#fff, $im-color-primary, 90%);
+$im-color-primary-dark-1: mix(#000, $im-color-primary, 10%);
+$im-color-primary-dark-2: mix(#000, $im-color-primary, 20%);
+$im-color-primary-dark-3: mix(#000, $im-color-primary, 30%);
+$im-color-primary-dark-4: mix(#000, $im-color-primary, 40%);
+
+$im-color-success: #18bc37;
+$im-color-warning: #f3a73f;
+$im-color-danger: #e43d33;
+$im-color-info: #8f939c;
+
+// 文字颜色
+$im-text-color: #000000;
+$im-text-color-light: #6a6a6a;
+$im-text-color-lighter: #909399;
+$im-text-color-lighter-extra: #c7c7c7;
+
+// 边框颜色
+$im-border: #F0F0F0;
+$im-border-light: #EDEDED;
+$im-border-lighter: #DCDCDC;
+$im-border-lighter-extra: #B9B9B9;
+
+// 文字大小
+$im-font-size: 30rpx;
+$im-font-size-small: 28rpx;
+$im-font-size-smaller: 26rpx;
+$im-font-size-smaller-extra: 24rpx;
+$im-font-size-large: 32rpx;
+$im-font-size-larger: 34rpx;
+$im-font-size-larger-extra: 36rpx;
+
+// 阴影
+$im-box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+$im-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+$im-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .12);
+$im-box-shadow-dark: 0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
+
+// 背景
+$im-bg: #f7f7f7;
+$im-bg-active: #f1f1f1;
+
+// 标题
+$im-title-size: 26px;
+$im-title-size-1: 22px;
+$im-title-size-2: 18px;
+
+$font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+
+$im-nav-bar-height: 50px;
\ No newline at end of file
diff --git a/im-uniapp/im.scss b/im-uniapp/im.scss
new file mode 100644
index 0000000..212dccf
--- /dev/null
+++ b/im-uniapp/im.scss
@@ -0,0 +1,141 @@
+/** 原生button样式 **/
+uni-button {
+ font-size: $im-font-size !important;
+}
+uni-button[type='primary'] {
+ colo: #fff !important;
+ background-color: $im-color-primary !important;
+}
+
+uni-button[type='primary'][plain] {
+ color: $im-color-primary !important;
+ border: 1px solid $im-color-primary;
+ background-color: transparent;
+}
+
+uni-button[type='warn'] {
+ colo: #fff !important;
+ background-color: $im-color-danger !important;
+}
+
+uni-button[type='warn'][plain] {
+ color: $im-color-danger !important;
+ border: 1px solid $im-color-danger !important;
+ background-color: transparent !important;
+}
+
+uni-button[size='mini'] {
+ font-size: $im-font-size-smaller !important;
+}
+
+.button-hover[type='primary'] {
+ colo: #fff !important;
+ background-color: $im-color-primary-dark-1 !important;
+}
+
+/** uni-ui input激活后边框、图标颜色 **/
+.uni-easyinput__content.is-focused:not(.is-input-error-border) {
+ border-color: $im-color-primary-light-2 !important;
+
+ .content-clear-icon {
+ color: $im-color-primary-light-2 !important;
+ }
+}
+
+/** 底部导航 **/
+.uni-tabbar-bottom .uni-tabbar {
+ box-shadow: $im-box-shadow;
+}
+
+.uni-tabbar-border {
+ display: none;
+}
+
+.segmented-control {
+ border-color: $im-color-primary !important;
+
+ .segmented-control__item--button {
+ border-color: $im-color-primary !important;
+ }
+ .segmented-control__item--button--active {
+ background-color: $im-color-primary !important;
+
+ .segmented-control__text{
+ color: #fff !important;
+ }
+ }
+ .segmented-control__text{
+ color: $im-color-primary !important;
+ }
+}
+
+.uni-radio-input {
+ //border-color: $im-color-primary !important;
+ //background-color: $im-color-primary !important;
+}
+
+.uni-section__content-title {
+ font-size: $im-font-size !important;
+ color: $im-text-color-light;
+}
+
+.uni-forms-item__label {
+ color: $im-text-color;
+ font-size: $im-font-size !important;
+}
+.uni-forms-item {
+ //margin-bottom: 8px !important;
+}
+.uni-easyinput__content-input {
+ font-size: $im-font-size !important;
+}
+.uni-easyinput__placeholder-class {
+ color: $im-text-color-lighter;
+ font-size: $im-font-size !important;;
+}
+.uni-easyinput__content-textarea {
+ font-size: $im-font-size !important;;
+}
+.uni-input-input:disabled {
+ color: $im-text-color-light;
+}
+.uni-forms-item.is-direction-top .uni-forms-item__label {
+ padding: 0 !important;
+}
+.uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text {
+ font-size: $im-font-size !important;
+}
+.uni-card .uni-card__content {
+ color: unset !important;
+ padding: 10px 0 !important;
+}
+.uni-tag-text--small{
+ font-size: 10px !important;
+ font-weight: bolder !important;
+}
+
+.nav-bar {
+ height: 100rpx;
+ padding: 0 20rpx;
+ display: flex;
+ align-items: center;
+ background-color: white;
+ border-bottom: 1px solid $im-border;
+
+ .nav-search {
+ flex: 1;
+ }
+
+ .nav-add {
+ cursor: pointer;
+ }
+}
+
+
+.bottom-btn {
+ margin: 40rpx 40rpx;
+
+ uni-button + uni-button {
+ margin-top: 20rpx;
+ }
+}
\ No newline at end of file
diff --git a/im-uniapp/pages.json b/im-uniapp/pages.json
index 924ff42..1f9613c 100644
--- a/im-uniapp/pages.json
+++ b/im-uniapp/pages.json
@@ -44,10 +44,9 @@
}
],
"globalStyle": {
- "navigationBarTitleText": "盒子IM",
- "navigationBarTextStyle": "black",
- "navigationBarBackgroundColor": "#F0F0F0",
- "backgroundColor": "#fdfdfd"
+ "navigationStyle": "custom",
+ "navigationBarBackgroundColor": "#f7f7f7",
+ "backgroundColor": "#f7f7f7"
},
"tabBar": {
"color": "#000000",
diff --git a/im-uniapp/pages/chat/chat-box.vue b/im-uniapp/pages/chat/chat-box.vue
index affae06..ab8c7e2 100644
--- a/im-uniapp/pages/chat/chat-box.vue
+++ b/im-uniapp/pages/chat/chat-box.vue
@@ -1,9 +1,6 @@
-
+ {{title}}
@@ -21,7 +18,7 @@
-
+
@@ -779,12 +776,13 @@
padding: 5px;
background-color: #f9f9f9;
line-height: 50px;
- font-size: 36rpx;
+ font-size: $im-font-size-large;
+ box-shadow: $im-box-shadow-lighter;
+ z-index: 1;
.btn-side {
position: absolute;
line-height: 60rpx;
- font-size: 28rpx;
cursor: pointer;
&.right {
@@ -811,9 +809,9 @@
padding: 0 10rpx;
.icon-at {
- font-size: 35rpx;
- color: darkblue;
- font-weight: 600;
+ font-size: $im-font-size-larger;
+ color: $im-color-primary;
+ font-weight: bold;
}
.chat-at-scroll-box {
@@ -833,33 +831,37 @@
}
+ $icon-color: rgba(0,0,0, 0.88);
.send-bar {
display: flex;
align-items: center;
padding: 10rpx;
- margin-bottom: 10rpx;
- border-top: #eee solid 1px;
- background-color: #f7f8fd;
+ //margin-bottom: 10rpx;
+ border-top: $im-border solid 1px;
+ background-color: $im-bg;
height: 80rpx;
+ //box-shadow: $im-box-shadow-lighter;
+ z-index: 1;
.iconfont {
- font-size: 68rpx;
- margin: 6rpx;
+ font-size: 60rpx;
+ margin: 0 10rpx;
+ color: $icon-color;
}
.chat-record {
flex: 1;
-
}
.send-text {
flex: 1;
overflow: auto;
- padding: 20rpx;
+ padding: 14rpx 20rpx;
background-color: #fff;
- border-radius: 20rpx;
- font-size: 30rpx;
+ border-radius: 8rpx;
+ font-size: $im-font-size;
box-sizing: border-box;
+ margin: 0 10rpx;
.send-text-area {
width: 100%;
@@ -875,28 +877,30 @@
.chat-tab-bar {
height: 500rpx;
padding: 20rpx;
- background-color: #f8f8f8;
+ background-color: $im-bg;
.chat-tools {
display: flex;
flex-wrap: wrap;
+ padding-top: 20rpx;
.chat-tools-item {
- width: 140rpx;
+ width: 25%;
padding: 16rpx;
+ box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
.tool-icon {
- padding: 28rpx;
- font-size: 60rpx;
+ padding: 26rpx;
+ font-size: 54rpx;
border-radius: 20%;
background-color: white;
- color: black;
+ color: $icon-color;
- &.active {
- background-color: #ddd;
+ &:active {
+ background-color: $im-bg-active;
}
}
@@ -914,10 +918,11 @@
.emotion-item-list {
display: flex;
flex-wrap: wrap;
+ justify-content: space-between;
.emotion-item {
- width: 40px;
- height: 40px;
+ width: 34px;
+ height: 34px;
text-align: center;
cursor: pointer;
padding: 6px;
diff --git a/im-uniapp/pages/chat/chat.vue b/im-uniapp/pages/chat/chat.vue
index b69f611..692bdc9 100644
--- a/im-uniapp/pages/chat/chat.vue
+++ b/im-uniapp/pages/chat/chat.vue
@@ -1,17 +1,18 @@
+ 消息
消息接收中...
-
+
- 温馨提示：您现在还没有任何聊天消息，快跟您的好友发起聊天吧~
+ 温馨提示：您现在还没有任何聊天消息，快跟您的好友发起聊天吧~
@@ -31,6 +32,7 @@
export default {
data() {
return {
+ showSearch: false,
searchText: "",
menu: {
show: false,
@@ -120,34 +122,16 @@
\ No newline at end of file
+
diff --git a/im-uniapp/pages/friend/friend-add.vue b/im-uniapp/pages/friend/friend-add.vue
index 624bef1..41e3988 100644
--- a/im-uniapp/pages/friend/friend-add.vue
+++ b/im-uniapp/pages/friend/friend-add.vue
@@ -1,16 +1,18 @@
-
+ 添加好友
+
+
+
+ :online="user.online" :url="user.headImage">
{{ user.nickName}}