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

uniapp 界面美化

master
xsx 2 years ago
parent
3c708f07ef
commit
7ae6e6315d
15 changed files with 170 additions and 93 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. 7
      im-commom/src/main/java/com/bx/imcommon/mq/RedisMQPullTask.java
  2. 3
      im-ui/src/components/friend/FriendItem.vue
  3. 3
      im-uniapp/App.vue
  4. 3
      im-uniapp/components/chat-item/chat-item.vue
  5. 12
      im-uniapp/components/head-image/head-image.vue
  6. 2
      im-uniapp/main.js
  7. 3
      im-uniapp/package.json
  8. 12
      im-uniapp/pages.json
  9. 44
      im-uniapp/pages/chat/chat-box.vue
  10. 2
      im-uniapp/pages/friend/friend-add.vue
  11. 2
      im-uniapp/pages/friend/friend-search.vue
  12. 117
      im-uniapp/pages/friend/friend.vue
  13. 10
      im-uniapp/pages/group/group.vue
  14. 23
      im-uniapp/store/friendStore.js
  15. 20
      im-uniapp/uni.scss

7
im-commom/src/main/java/com/bx/imcommon/mq/RedisMQPullTask.java
View File

@ -42,7 +42,7 @@ public class RedisMQPullTask implements CommandLineRunner {
consumers.forEach((consumer -> {
// 注解参数
RedisMQListener annotation = consumer.getClass().getAnnotation(RedisMQListener.class);
String key = consumer.generateKey();
String queue = annotation.queue();
int batchSize = annotation.batchSize();
int period = annotation.period();
// 获取泛型类型
@ -54,6 +54,7 @@ public class RedisMQPullTask implements CommandLineRunner {
List<Object> datas = new LinkedList<>();
try {
if(consumer.isReady()){
String key = consumer.generateKey();
// 拉取一个批次的数据
List<Object> objects = pullBatch(key, batchSize);
for (Object obj : objects) {
@ -69,7 +70,7 @@ public class RedisMQPullTask implements CommandLineRunner {
}
}
} catch (Exception e) {
log.error("数据消费异常,队列:{}", key, e);
log.error("数据消费异常,队列:{}", queue, e);
}
// 继续消费数据
if (!EXECUTOR_SERVICE.isShutdown()) {
@ -90,7 +91,7 @@ public class RedisMQPullTask implements CommandLineRunner {
List<Object> objects = new LinkedList<>();
if (redisMQTemplate.isSupportBatchPull()) {
// 版本大于6.2，支持批量拉取
objects = redisMQTemplate.opsForList().leftPop(key, 100);
objects = redisMQTemplate.opsForList().leftPop(key, batchSize);
} else {
// 版本小于6.2，只能逐条拉取
Object obj = redisMQTemplate.opsForList().leftPop(key);

3
im-ui/src/components/friend/FriendItem.vue
View File

@ -59,7 +59,7 @@
},
onSelectMenu(item) {
this.$emit(item.key.toLowerCase(), this.msgInfo);
}
}
},
computed:{
friend(){
@ -78,6 +78,7 @@
default: true
}
}
}
</script>

3
im-uniapp/App.vue
View File

@ -351,8 +351,9 @@
</script>
<style lang="scss">
@import "@/uni_modules/uview-plus/index.scss";
@import url('./static/icon/iconfont.css');
.tab-page {
// #ifdef H5
height: calc(100vh - 46px - 50px); // h5平台100vh是包含了顶部和底部，需要减去

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

@ -64,8 +64,7 @@
display: flex;
margin-bottom: 2rpx;
position: relative;
padding: 10rpx;
padding-left: 20rpx;
padding: 10rpx 20rpx;
align-items: center;
background-color: white;
white-space: nowrap;

12
im-uniapp/components/head-image/head-image.vue
View File

@ -55,7 +55,9 @@
},
avatarTextStyle() {
return `width: ${this.size}rpx;height:${this.size}rpx;
color:${this.textColor};font-size:${this.size*0.6}rpx;`
color:${this.textColor};font-size:${this.size*0.5}rpx;
border: 2px solid ${this.textColor};
box-shadow: 0px 0px 5rpx ${this.textColor}`
},
textColor() {
let hash = 0;
@ -76,18 +78,18 @@
.avatar-image {
position: relative;
overflow: hidden;
border-radius: 10%;
border: 1px solid #ccc;
border-radius: 50%;
border: 2px solid #6664eb;
vertical-align: bottom;
box-shadow: 0px 0px 10rpx #6664eb;
}
.avatar-text {
background-color: #f2f2f2;
border-radius: 10%;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ccc;
}
.online {

2
im-uniapp/main.js
View File

@ -7,6 +7,7 @@ import * as socketApi from './common/wssocket';
import * as messageType from './common/messageType';
import store from './store';
import { createSSRApp } from 'vue'
import uviewPlus from '@/uni_modules/uview-plus'
// #ifdef H5
import * as recorder from './common/recorder-h5';
// #endif
@ -18,6 +19,7 @@ import * as recorder from './common/recorder-app';
export function createApp() {
const app = createSSRApp(App)
app.use(store);
app.use(uviewPlus);
app.config.globalProperties.$http = request;
app.config.globalProperties.$wsApi = socketApi;
app.config.globalProperties.$msgType = messageType;

3
im-uniapp/package.json
View File

@ -4,6 +4,7 @@
"scripts": {}
},
"dependencies": {
"js-audio-recorder": "^1.0.7"
"js-audio-recorder": "^1.0.7",
"pinyin-pro": "^3.23.1"
}
}

12
im-uniapp/pages.json
View File

@ -1,5 +1,12 @@
{
"easycom": {
"autoscan": true,
"custom": {
"^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
"^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
"^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
}
},
"pages": [{
"path": "pages/login/login"
}, {
@ -43,7 +50,7 @@
"backgroundColor": "#fdfdfd"
},
"tabBar": {
"color": "#999999",
"color": "#000000",
"selectedColor": "#09C160",
"borderStyle": "black",
"backgroundColor": "#ffffff",
@ -52,6 +59,7 @@
"iconPath": "static/tarbar/chat.png",
"selectedIconPath": "static/tarbar/chat_active.png",
"text": "消息"
},
{
"pagePath": "pages/friend/friend",

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

@ -50,14 +50,14 @@
<view class="chat-tools-item">
<image-upload :maxCount="9" sourceType="album" :onBefore="onUploadImageBefore"
:onSuccess="onUploadImageSuccess" :onError="onUploadImageFail">
<view class="tool-icon iconfont icon-picture"></view>
<view class="tool-icon iconfont icon-picture" style="background-color:#497eed;"></view>
</image-upload>
<view class="tool-name">相册</view>
</view>
<view class="chat-tools-item">
<image-upload sourceType="camera" :onBefore="onUploadImageBefore" :onSuccess="onUploadImageSuccess"
:onError="onUploadImageFail">
<view class="tool-icon iconfont icon-camera"></view>
<view class="tool-icon iconfont icon-camera" style="background-color: #7454b0;"></view>
</image-upload>
<view class="tool-name">拍摄</view>
</view>
@ -65,31 +65,32 @@
<view class="chat-tools-item">
<file-upload :onBefore="onUploadFileBefore" :onSuccess="onUploadFileSuccess"
:onError="onUploadFileFail">
<view class="tool-icon iconfont icon-folder"></view>
<view class="tool-icon iconfont icon-folder" style="background-color: #c99122;"></view>
</file-upload>
<view class="tool-name">文件</view>
</view>
<view class="chat-tools-item" @click="onRecorderInput()">
<view class="tool-icon iconfont icon-microphone"></view>
<view class="tool-icon iconfont icon-microphone" style="background-color: #a8a53f;"></view>
<view class="tool-name">语音消息</view>
</view>
<view v-if="chat.type == 'GROUP'" class="chat-tools-item" @click="switchReceipt()">
<view class="tool-icon iconfont icon-receipt" :class="isReceipt?'active':''"></view>
<view class="tool-icon iconfont icon-receipt" style="background-color: #663399;"
:class="isReceipt?'active':''"></view>
<view class="tool-name">回执消息</view>
</view>
<!-- #ifndef MP-WEIXIN -->
<!-- 音视频不支持小程序 -->
<view v-if="chat.type == 'PRIVATE'" class="chat-tools-item" @click="onPriviteVideo()">
<view class="tool-icon iconfont icon-video"></view>
<view class="tool-icon iconfont icon-video" style="background-color: #8380E7;"></view>
<view class="tool-name">视频通话</view>
</view>
<view v-if="chat.type == 'PRIVATE'" class="chat-tools-item" @click="onPriviteVoice()">
<view class="tool-icon iconfont icon-call"></view>
<view class="tool-icon iconfont icon-call" style="background-color: #8380E7;"></view>
<view class="tool-name">语音通话</view>
</view>
<view v-if="chat.type == 'GROUP'" class="chat-tools-item" @click="onGroupVideo()">
<view class="tool-icon iconfont icon-call"></view>
<view class="tool-icon iconfont icon-call" style="background-color: #8380E7;"></view>
<view class="tool-name">语音通话</view>
</view>
<!-- #endif -->
@ -752,7 +753,7 @@
align-items: center;
height: 60rpx;
padding: 5px;
background-color: white;
background-color: #f8f8f8;
line-height: 50px;
font-size: 40rpx;
font-weight: 600;
@ -781,7 +782,7 @@
border: #dddddd solid 1px;
overflow: hidden;
position: relative;
background-color: #f8f8f8;
background-color: #f7f8fd;
.scroll-box {
height: 100%;
@ -823,11 +824,12 @@
padding: 10rpx;
margin-bottom: 10rpx;
border: #dddddd solid 1px;
background-color: white;
background-color: #f7f8fd;
.iconfont {
font-size: 60rpx;
margin: 3rpx;
font-size: 68rpx;
margin: 6rpx;
color: $uni-text-color-icon;
}
.chat-record {
@ -837,14 +839,13 @@
.send-text {
flex: 1;
background-color: #f8f8f8 !important;
background-color: white !important;
overflow: auto;
padding: 20rpx;
background-color: #fff;
border-radius: 20rpx;
font-size: 30rpx;
box-sizing: border-box;
.send-text-area {
width: 100%;
}
@ -852,6 +853,7 @@
.btn-send {
margin: 5rpx;
background-color: $uni-text-color-icon;
}
}
@ -859,7 +861,7 @@
.chat-tab-bar {
height: 500rpx;
padding: 20rpx;
background-color: whitesmoke;
background-color: #f8ffff;
.chat-tools {
display: flex;
@ -871,13 +873,13 @@
display: flex;
flex-direction: column;
align-items: center;
.tool-icon {
padding: 28rpx;
font-size: 60rpx;
background-color: white;
border-radius: 20%;
background-color: rebeccapurple;
border-radius: 50%;
color: white;
&.active {
background-color: #ddd;
}
@ -886,7 +888,7 @@
.tool-name {
height: 60rpx;
line-height: 60rpx;
font-size: 25rpx;
font-size: 28rpx;
}
}
}

2
im-uniapp/pages/friend/friend-add.vue
View File

@ -1,7 +1,7 @@
<template>
<view class="page friend-add">
<view class="search-bar">
<uni-search-bar v-model="searchText" :focus="true" @confirm="onSearch()" @cancel="onCancel()"
<uni-search-bar v-model="searchText" radius="100" :focus="true" @confirm="onSearch()" @cancel="onCancel()"
placeholder="用户名/昵称"></uni-search-bar>
</view>
<view class="user-items">

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

@ -1,6 +1,6 @@
<template>
<view class="page friend-search" >
<view>
<view class="search-bar">
<uni-search-bar v-model="searchText" :focus="true" @cancel="onCancel()" placeholder="输入好友昵称搜索"></uni-search-bar>
</view>
<view class="friend-items">

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

@ -2,36 +2,40 @@
<view class="tab-page friend">
<view class="nav-bar">
<view class="nav-search">
<uni-search-bar @focus="onFocusSearch" cancelButton="none" placeholder="点击搜索好友" ></uni-search-bar>
<uni-search-bar radius="100" @focus="onFocusSearch" cancelButton="none" placeholder="点击搜索好友"></uni-search-bar>
</view>
<view class="nav-add" @click="onAddNewFriends()">
<uni-icons type="personadd" size="30"></uni-icons>
<view class="nav-add" @click="onAddNewFriends()">
<uni-icons type="personadd" size="35"></uni-icons>
</view>
</view>
<view class="friend-tip" v-if="friends.length==0">
温馨提示：您现在还没有任何好友，快点击右上方'+'按钮添加好友吧~
</view>
<view class="friend-items" v-else>
<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
<!-- 先展示在线好友-->
<view v-for="(friend,index) in friends" :key="index">
<friend-item v-if="!friend.delete&&friend.online" :friend="friend"></friend-item>
</view>
<!-- 再展示离线好友-->
<view v-for="(friend,index) in friends" :key="index">
<friend-item v-if="!friend.delete&&!friend.online" :friend="friend"></friend-item>
</view>
</scroll-view>
<up-index-list :index-list="friendIdx" >
<template v-for="(friends,i) in friendGroup">
<up-index-item>
<up-index-anchor :text="friendIdx[i]=='*'?'在线':friendIdx[i]"
bgColor="#f2f3fd"></up-index-anchor>
<view v-for="(friend,idx) in friends" :key="idx">
<friend-item :friend="friend"></friend-item>
</view>
</up-index-item>
</template>
</up-index-list>
</view>
</view>
</template>
<script>
import { pinyin } from 'pinyin-pro';
export default {
data() {
return {
friendIdx: [],
friendGroup: []
}
},
methods: {
@ -40,17 +44,68 @@
url: "/pages/friend/friend-search"
})
},
onAddNewFriends(){
onAddNewFriends() {
uni.navigateTo({
url: "/pages/friend/friend-add"
})
},
firstLetter(strText) {
// 使用pinyin-pro库将中文转换为拼音
let pinyinOptions = {
toneType: 'none', // 无声调
type: 'normal' // 普通拼音
};
let pyText = pinyin(strText, pinyinOptions);
return pyText[0];
},
isEnglish(character) {
return /^[A-Za-z]+$/.test(character);
},
init() {
// 按首字母分组
let groupMap = new Map();
this.friends.forEach((f) => {
if (f.delete) {
return;
}
let letter = this.firstLetter(f.nickName).toUpperCase();
// 非英文一律为#组
if (!this.isEnglish(letter)) {
letter = "#"
}
if (f.online) {
letter = '*'
}
if (groupMap.has(letter)) {
groupMap.get(letter).push(f);
} else {
groupMap.set(letter, [f]);
}
})
// 排序
let arrayObj = Array.from(groupMap);
arrayObj.sort((a, b) => {
// #组在最后面
if (a[0] == '#' || b[0] == '#') {
return b[0].localeCompare(a[0])
}
return a[0].localeCompare(b[0])
})
groupMap = new Map(arrayObj.map(i => [i[0], i[1]]));
this.friendIdx = Array.from(groupMap.keys())
this.friendGroup = Array.from(groupMap.values());
}
},
computed:{
friends(){
computed: {
friends() {
return this.$store.state.friendStore.friends;
}
},
},
onShow() {
this.init();
}
}
</script>
@ -60,30 +115,36 @@
border: #dddddd solid 1px;
display: flex;
flex-direction: column;
.friend-tip{
.friend-tip {
position: absolute;
top: 400rpx;
padding: 50rpx ;
padding: 50rpx;
text-align: center;
line-height: 50rpx;
text-align: left;
color: darkblue;
font-size: 30rpx;
}
.nav-bar {
margin: 5rpx;
padding: 2rpx 10rpx;
display: flex;
align-items: center;
background-color: white;
.nav-search{
flex:1;
}
.nav-search {
flex: 1;
}
.nav-add {
line-height: 56px;
cursor: pointer;
.uni-icons {
color: $uni-text-color-icon !important;
}
}
}
@ -93,7 +154,7 @@
border: #dddddd solid 1px;
overflow: hidden;
position: relative;
.scroll-bar {
height: 100%;
}

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

@ -2,7 +2,7 @@
<view class="tab-page group">
<view class="nav-bar">
<view class="nav-search">
<uni-search-bar @focus="onFocusSearch" cancelButton="none" placeholder="点击搜索群聊"></uni-search-bar>
<uni-search-bar v-model="searchText" cancelButton="none" placeholder="点击搜索群聊"></uni-search-bar>
</view>
<view class="nav-add" @click="onCreateNewGroup()">
<uni-icons type="personadd" size="30"></uni-icons>
@ -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="group"></group-item>
<group-item v-if="!group.quit&&group.remark.startsWith(searchText)" :group="group"></group-item>
</view>
</scroll-view>
</view>
@ -25,11 +25,13 @@
export default {
data() {
return {
searchText:""
}
},
methods: {
onFocusSearch() {},
onFocusSearch() {
},
onCreateNewGroup() {
uni.navigateTo({
url: "/pages/group/group-edit"

23
im-uniapp/store/friendStore.js
View File

@ -36,10 +36,20 @@ export default {
state.friends.push(friend);
}
},
setOnlineStatus(state, onlineUsers) {
state.friends.forEach((f) => {
let onlineUser = onlineUsers.find((o) => f.id == o.userId);
f.online = !!onlineUser
setOnlineStatus(state, onlineTerminals) {
state.friends.forEach((f)=>{
let userTerminal = onlineTerminals.find((o)=> f.id==o.userId);
if(userTerminal){
f.online = true;
f.onlineTerminals = userTerminal.terminals;
f.onlineWeb = userTerminal.terminals.indexOf(TERMINAL_TYPE.WEB)>=0
f.onlineApp = userTerminal.terminals.indexOf(TERMINAL_TYPE.APP)>=0
}else{
f.online = false;
f.onlineTerminals = [];
f.onlineWeb = false;
f.onlineApp = false;
}
});
},
refreshOnlineStatus(state) {
@ -51,8 +61,9 @@ export default {
http({
url: '/user/terminal/online?userIds=' + userIds.join(','),
method: 'GET'
}).then((onlineUsers) => {
this.commit("setOnlineStatus", onlineUsers);
}).then((onlineTerminals) => {
this.commit("setOnlineStatus", onlineTerminals);
})
}
// 30s后重新拉取

20
im-uniapp/uni.scss
View File

@ -1,19 +1,5 @@
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
*/
/* 颜色变量 */
@import '@/uni_modules/uview-plus/theme.scss';
@import '@/uni_modules/uni-scss/variables.scss';
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
@ -26,7 +12,7 @@ $uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
$uni-text-color-icon: #663399;
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;

Write Preview
Loading…
Cancel
Save