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

弹出菜单优化

master
xsx 2 years ago
parent
17d52ced4a
commit
258c8bee81
9 changed files with 138 additions and 132 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. 16
      im-uniapp/common/recorder-app.js
  2. 14
      im-uniapp/common/recorder-h5.js
  3. 13
      im-uniapp/components/chat-item/chat-item.vue
  4. 119
      im-uniapp/components/chat-message-item/chat-message-item.vue
  5. 3
      im-uniapp/components/chat-record/chat-record.vue
  6. 52
      im-uniapp/components/pop-menu/pop-menu.vue
  7. 48
      im-uniapp/pages/chat/chat.vue
  8. 3
      im-uniapp/pages/login/login.vue
  9. 2
      im-uniapp/pages/register/register.vue

16
im-uniapp/common/recorder-app.js
View File

@ -39,12 +39,18 @@ let upload = () => {
filePath: wavFile.tempFilePath,
name: 'file',
success: (res) => {
const duration = (new Date().getTime() - startTime.getTime()) / 1000
const data = {
duration: Math.round(duration),
url: JSON.parse(res.data).data
let r = JSON.parse(res.data);
if (r.code != 200) {
reject(r.message);
} else {
const duration = (new Date().getTime() - startTime.getTime()) /
1000
const data = {
duration: Math.round(duration),
url: r.data
}
resolve(data);
}
resolve(data);
},
fail: (e) => {
reject(e);

14
im-uniapp/common/recorder-h5.js
View File

@ -33,11 +33,17 @@ let upload = () => {
file: file,
name: 'file',
success: (res) => {
const data = {
duration: parseInt(rc.duration),
url: JSON.parse(res.data).data
let r = JSON.parse(res.data);
if(r.code != 200){
console.log(res)
reject(r.message);
}else {
const data = {
duration: parseInt(rc.duration),
url: r.data
}
resolve(data);
}
resolve(data);
},
fail: (e) => {
reject(e);

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

@ -8,9 +8,12 @@
</view>
<view class="chat-right">
<view class="chat-name">
<view class="chat-tag" v-if="chat.type=='GROUP'">
<uni-tag circle text="群" size="mini" type="primary"></uni-tag>
</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>
@ -121,7 +124,13 @@
display: flex;
line-height: 44rpx;
height: 44rpx;
.chat-tag {
display: flex;
align-items: center;
margin-right: 3rpx;
}
.chat-name-text {
flex: 1;
font-size: 30rpx;

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

@ -2,62 +2,68 @@
<view class="chat-msg-item">
<view class="chat-msg-tip"
v-if="msgInfo.type==$enums.MESSAGE_TYPE.RECALL||msgInfo.type == $enums.MESSAGE_TYPE.TIP_TEXT">
{{msgInfo.content}}</view>
{{msgInfo.content}}
</view>
<view class="chat-msg-tip" v-if="msgInfo.type==$enums.MESSAGE_TYPE.TIP_TIME">
{{$date.toTimeText(msgInfo.sendTime)}}
</view>
<view class="chat-msg-normal" v-if="isNormal"
:class="{'chat-msg-mine':msgInfo.selfSend}">
<view class="chat-msg-normal" v-if="isNormal" :class="{'chat-msg-mine':msgInfo.selfSend}">
<head-image class="avatar" @longpress.prevent="$emit('longPressHead')" :id="msgInfo.sendId" :url="headImage"
:name="showName" :size="80"></head-image>
<view class="chat-msg-content">
<view v-if="msgInfo.groupId && !msgInfo.selfSend" class="chat-msg-top">
<text>{{showName}}</text>
</view>
<view class="chat-msg-bottom" @touchmove="onHideMenu()">
<view v-if="msgInfo.type==$enums.MESSAGE_TYPE.TEXT" @longpress.native="onShowMenu($event)">
<rich-text class="chat-msg-text"
:nodes="$emo.transform(msgInfo.content)"
></rich-text>
<view class="chat-msg-bottom">
<view v-if="msgInfo.type==$enums.MESSAGE_TYPE.TEXT">
<pop-menu :items="menuItems" @select="onSelectMenu">
<rich-text class="chat-msg-text" :nodes="$emo.transform(msgInfo.content)"></rich-text>
</pop-menu>
</view>
<view class="chat-msg-image" v-if="msgInfo.type==$enums.MESSAGE_TYPE.IMAGE">
<view class="img-load-box" @longpress="onShowMenu($event)">
<image class="send-image" mode="heightFix" :src="JSON.parse(msgInfo.content).thumbUrl"
lazy-load="true" @click.stop="onShowFullImage()">
</image>
<loading v-if="loading"></loading>
</view>
<pop-menu :items="menuItems" @select="onSelectMenu">
<view class="img-load-box">
<image class="send-image" mode="heightFix" :src="JSON.parse(msgInfo.content).thumbUrl"
lazy-load="true" @click.stop="onShowFullImage()">
</image>
<loading v-if="loading"></loading>
</view>
</pop-menu>
<text title="发送失败" v-if="loadFail" @click="onSendFail"
class="send-fail iconfont icon-warning-circle-fill"></text>
</view>
<view class="chat-msg-file" v-if="msgInfo.type==$enums.MESSAGE_TYPE.FILE">
<view class="chat-file-box" @longpress="onShowMenu($event)">
<view class="chat-file-info">
<uni-link class="chat-file-name" :text="data.name" showUnderLine="true" color="#007BFF"
:href="data.url"></uni-link>
<view class="chat-file-size">{{fileSize}}</view>
<pop-menu :items="menuItems" @select="onSelectMenu">
<view class="chat-file-box">
<view class="chat-file-info">
<uni-link class="chat-file-name" :text="data.name" showUnderLine="true"
color="#007BFF" :href="data.url"></uni-link>
<view class="chat-file-size">{{fileSize}}</view>
</view>
<view class="chat-file-icon iconfont icon-file"></view>
<loading v-if="loading"></loading>
</view>
<view class="chat-file-icon iconfont icon-file"></view>
<loading v-if="loading"></loading>
</view>
</pop-menu>
<text title="发送失败" v-if="loadFail" @click="onSendFail"
class="send-fail iconfont icon-warning-circle-fill"></text>
</view>
<view class="chat-msg-audio chat-msg-text" v-if="msgInfo.type==$enums.MESSAGE_TYPE.AUDIO"
@click="onPlayAudio()" @longpress="onShowMenu($event)">
<text class="iconfont icon-voice-play"></text>
<text class="chat-audio-text">{{JSON.parse(msgInfo.content).duration+'"'}}</text>
<text v-if="audioPlayState=='PAUSE'" class="iconfont icon-play"></text>
<text v-if="audioPlayState=='PLAYING'" class="iconfont icon-pause"></text>
</view>
<view class="chat-realtime chat-msg-text" v-if="isAction"
@click="$emit('call')" @longpress="onShowMenu($event)">
<text v-if="msgInfo.type==$enums.MESSAGE_TYPE.ACT_RT_VOICE" class="iconfont icon-chat-voice"></text>
<text v-if="msgInfo.type==$enums.MESSAGE_TYPE.ACT_RT_VIDEO" class="iconfont icon-chat-video"></text>
<text>{{msgInfo.content}}</text>
</view>
<pop-menu v-if="msgInfo.type==$enums.MESSAGE_TYPE.AUDIO" :items="menuItems" @select="onSelectMenu">
<view class="chat-msg-audio chat-msg-text" @click="onPlayAudio()">
<text class="iconfont icon-voice-play"></text>
<text class="chat-audio-text">{{JSON.parse(msgInfo.content).duration+'"'}}</text>
<text v-if="audioPlayState=='PAUSE'" class="iconfont icon-play"></text>
<text v-if="audioPlayState=='PLAYING'" class="iconfont icon-pause"></text>
</view>
</pop-menu>
<pop-menu v-if="isAction" :items="menuItems" @select="onSelectMenu">
<view class="chat-realtime chat-msg-text" @click="$emit('call')">
<text v-if="msgInfo.type==$enums.MESSAGE_TYPE.ACT_RT_VOICE"
class="iconfont icon-chat-voice"></text>
<text v-if="msgInfo.type==$enums.MESSAGE_TYPE.ACT_RT_VIDEO"
class="iconfont icon-chat-video"></text>
<text>{{msgInfo.content}}</text>
</view>
</pop-menu>
<view class="chat-msg-status" v-if="!isAction">
<text class="chat-readed" v-show="msgInfo.selfSend && !msgInfo.groupId
&& msgInfo.status==$enums.MESSAGE_STATUS.READED">已读</text>
@ -72,8 +78,7 @@
</view>
</view>
<chat-group-readed ref="chatGroupReaded" :groupMembers="groupMembers" :msgInfo="msgInfo"></chat-group-readed>
<pop-menu v-if="menu.show" :menu-style="menu.style" :items="menuItems" @close="onHideMenu()"
@select="onSelectMenu"></pop-menu>
</view>
</template>
@ -106,36 +111,8 @@
style: ""
}
}
},
methods: {
onShowMenu(e) {
uni.getSystemInfo({
success: (res) => {
let touches = e.touches[0];
let style = "";
/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
if (touches.clientY > (res.windowHeight / 2)) {
style = `bottom:${res.windowHeight-touches.clientY}px;`;
} else {
style = `top:${touches.clientY}px;`;
}
if (touches.clientX > (res.windowWidth / 2)) {
style += `right:${res.windowWidth-touches.clientX}px;`;
} else {
style += `left:${touches.clientX}px;`;
}
this.menu.style = style;
//
this.$nextTick(() => {
this.menu.show = true;
});
}
})
},
onHideMenu(){
this.menu.show = false;
},
onSendFail() {
uni.showToast({
title: "该文件已发送失败，目前不支持自动重新发送，建议手动重新发送",
@ -148,11 +125,12 @@
this.innerAudioContext = uni.createInnerAudioContext();
let url = JSON.parse(this.msgInfo.content).url;
this.innerAudioContext.src = url;
console.log(url);
this.innerAudioContext.onEnded((e) => {
console.log('停止')
this.audioPlayState = "STOP"
})
this.innerAudioContext.onError((e) =>{
this.innerAudioContext.onError((e) => {
console.log("播放音频出错");
console.log(e)
});
@ -226,7 +204,7 @@
}
return items;
},
isAction(){
isAction() {
return this.$msgType.isAction(this.msgInfo.type);
},
isNormal() {
@ -292,7 +270,7 @@
display: block;
word-break: break-all;
white-space: pre-line;
&:after {
content: "";
@ -484,6 +462,7 @@
padding-right: 0;
padding-left: 8px;
}
.icon-voice-play {
transform: rotateY(180deg);
}

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

@ -99,7 +99,6 @@
})
}).finally(() => {
this.$rc.close();
console.log("录音完成")
})
},
startTimer() {
@ -132,7 +131,7 @@
return `bottom:${bottom}px;`
},
recordBarStyle() {
const bgColor = this.recording ? "royalblue" : "#f8f8f8";
const bgColor = this.recording ? "royalblue" : "white";
const textColor = this.recording ? "white" : "black";
return `background-color:${bgColor};
color:${textColor};`

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

@ -1,7 +1,11 @@
<template>
<view>
<view class="pop-menu" @tap="onClose()" @contextmenu.prevent=""></view>
<view class="menu" :style="menuStyle">
<view @longpress.stop="onLongPress($event)" @touchmove="onTouchMove" @touchend="onTouchEnd">
<slot></slot>
</view>
<view v-if="isShowMenu" class="pop-menu" @tap="onClose()" @contextmenu.prevent=""></view>
<view v-if="isShowMenu" 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" :style="itemStyle(item)" size="22"></uni-icons>
<text :style="itemStyle(item)"> {{item.name}}</text>
@ -14,22 +18,56 @@
export default {
name: "pop-menu",
data() {
return {}
return {
isShowMenu : false,
style : ""
}
},
props: {
menuStyle: {
type: String
},
items: {
type: Array
}
},
methods: {
onLongPress(e){
if(this.isTouchMove){
return;
}
uni.getSystemInfo({
success: (res) => {
let touches = e.touches[0];
let style = "";
/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
if (touches.clientY > (res.windowHeight / 2)) {
style = `bottom:${res.windowHeight-touches.clientY}px;`;
} else {
style = `top:${touches.clientY}px;`;
}
if (touches.clientX > (res.windowWidth / 2)) {
style += `right:${res.windowWidth-touches.clientX}px;`;
} else {
style += `left:${touches.clientX}px;`;
}
this.menuStyle = style;
//
this.$nextTick(() => {
this.isShowMenu = true;
});
}
})
},
onTouchMove(){
this.isTouchMove = true;
},
onTouchEnd(){
this.isTouchMove = false;
},
onSelectMenu(item) {
this.$emit("select", item);
this.isShowMenu = false;
},
onClose() {
this.$emit("close");
this.isShowMenu = false;
},
itemStyle(item){
if(item.color){

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

@ -16,14 +16,13 @@
</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="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>
<pop-menu v-if="isShowChat(chatStore.chats[chatPos.idx])" :items="menu.items"
@select="onSelectMenu($event,chatPos.idx)">
<chat-item :chat="chatStore.chats[chatPos.idx]"
:active="menu.chatIdx==chatPos.idx" :index="chatPos.idx"></chat-item>
</pop-menu>
</view>
</scroll-view>
<pop-menu v-show="menu.show" :menu-style="menu.style" :items="menu.items" @close="onCloseMenu()"
@select="onSelectMenu"></pop-menu>
</view>
</template>
@ -36,6 +35,7 @@
show: false,
style: "",
chatIdx: -1,
isTouchMove: false,
items: [{
key: 'DELETE',
name: '删除该聊天',
@ -52,49 +52,19 @@
}
},
methods: {
onSelectMenu(item) {
onSelectMenu(item,chatIdx) {
switch (item.key) {
case 'DELETE':
this.removeChat(this.menu.chatIdx);
this.removeChat(chatIdx);
break;
case 'TOP':
this.moveToTop(this.menu.chatIdx);
this.moveToTop(chatIdx);
break;
default:
break;
}
this.menu.show = false;
},
onShowMenu(e, chatIdx) {
this.menu.chatIdx = chatIdx;
uni.getSystemInfo({
success: (res) => {
let touches = e.touches[0];
let style = "";
/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
if (touches.clientY > (res.windowHeight / 2)) {
style = `bottom:${res.windowHeight-touches.clientY}px;`;
} else {
style = `top:${touches.clientY}px;`;
}
if (touches.clientX > (res.windowWidth / 2)) {
style += `right:${res.windowWidth-touches.clientX}px;`;
} else {
style += `left:${touches.clientX}px;`;
}
this.menu.style = style;
this.menu.chatIdx = chatIdx;
//
this.$nextTick(() => {
this.menu.show = true;
});
}
})
},
onCloseMenu() {
this.menu.chatIdx = -1;
this.menu.show = false;
},
removeChat(chatIdx) {
this.$store.commit("removeChat", chatIdx);
},

3
im-uniapp/pages/login/login.vue
View File

@ -10,8 +10,7 @@
</uni-forms-item>
<button class="btn-submit" @click="submit" type="primary">登录</button>
</uni-forms>
<navigator class="nav-register" url="/pages/register/register" render-link="true"
hover-class="other-navigator-hover">
<navigator class="nav-register" url="/pages/register/register">
没有账号,前往注册
</navigator>

2
im-uniapp/pages/register/register.vue
View File

@ -16,7 +16,7 @@
</uni-forms-item>
<button class="btn-submit" @click="submit" type="warn">注册并登陆</button>
</uni-forms>
<navigator class="nav-login" url="/pages/login/login" render-link="true" hover-class="other-navigator-hover">
<navigator class="nav-login" url="/pages/login/login" >
返回登陆页面
</navigator>
</view>

Write Preview
Loading…
Cancel
Save