1064 lines
27 KiB
Vue
1064 lines
27 KiB
Vue
<template>
|
|
<view @touchmove.stop.prevent>
|
|
<view
|
|
:class="{ 'tui-reply-tabbar': !showVoiceMask }"
|
|
:style="{ paddingBottom: `${keyboardHeight}px` }"
|
|
>
|
|
<view :class="['tui-chat-tabbar', { isIos: 'tui-chat-ios-tabbar' }]">
|
|
<!-- v-show="showIndex != 2" -->
|
|
<!-- <view class="tui-icon tui-icon-im_keyboard" @tap="showKeyBoard(1)" v-show="showIndex == 2"></view> -->
|
|
|
|
<!-- <editor
|
|
id="editor"
|
|
class="tui-chat-input"
|
|
@input="inputReply"
|
|
@click.stop="showKeyBoard(1)"
|
|
:html="editorContent"
|
|
@ready="onEditorReady"
|
|
v-show="!isVoice"
|
|
>
|
|
</editor> -->
|
|
|
|
<view class="tui-send-box" v-show="!showVoiceMask">
|
|
<view
|
|
class="tui-icon tui-icon-im_voice"
|
|
v-if="!isVoice"
|
|
@tap="switchVoice"
|
|
></view>
|
|
<view
|
|
class="tui-icon tui-icon-im_keyboard"
|
|
v-if="isVoice"
|
|
@tap="switchInput"
|
|
></view>
|
|
</view>
|
|
|
|
<textarea
|
|
hold-keyboard
|
|
auto-height
|
|
class="tui-chat-input"
|
|
@input="inputReply"
|
|
:fixed="true"
|
|
:adjust-position="false"
|
|
maxlength="300"
|
|
:value="content"
|
|
:show-confirm-bar="false"
|
|
placeholder-class="tui-phcolor"
|
|
@tap.stop="showKeyBoard(1)"
|
|
ref="textarea"
|
|
v-show="!isVoice && !showVoiceMask"
|
|
placeholder="一起畅聊解决问题吧~"
|
|
></textarea>
|
|
|
|
<view
|
|
:class="[
|
|
showVoiceMask ? 'mask-bottom' : 'tui-chat-voice_btn',
|
|
{ 'no-area': needCancel },
|
|
]"
|
|
hover-class="tui-opcity"
|
|
:hover-stay-time="150"
|
|
v-if="isVoice"
|
|
@touchstart="handleTouchStart"
|
|
@touchmove="handleTouchMove"
|
|
@touchend="handleTouchEnd"
|
|
>
|
|
<text v-if="!showVoiceMask">
|
|
{{ isVoice ? "按住 说话" : "松开 发送" }}
|
|
</text>
|
|
|
|
<image
|
|
v-if="showVoiceMask"
|
|
:src="
|
|
needCancel
|
|
? '../../static/images/chat/voice2.png'
|
|
: '../../static/images/chat/voice.png'
|
|
"
|
|
></image>
|
|
</view>
|
|
|
|
<view
|
|
v-show="!showVoiceMask"
|
|
class="tui-icon tui-icon-im_face"
|
|
@tap="showKeyBoard(2)"
|
|
></view>
|
|
|
|
<view
|
|
v-show="!showVoiceMask && !content"
|
|
class="tui-icon tui-icon-im_more"
|
|
@tap="showKeyBoard(3)"
|
|
></view>
|
|
|
|
<view
|
|
class="tui-btn-send"
|
|
v-if="content"
|
|
:style="{ color: color }"
|
|
hover-class="tui-opcity"
|
|
:hover-stay-time="150"
|
|
@tap="hideKeyboard"
|
|
>
|
|
{{ sendText }}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="tui-reply-more">
|
|
<view class="tui-face-box" v-if="showIndex == 2">
|
|
<scroll-view scroll-y :style="{ height: replyContainerH + 'px' }">
|
|
<view class="tui-face-scroll">
|
|
<view
|
|
class="tui-face-img_box"
|
|
v-for="(item, index) in faceList"
|
|
:key="index"
|
|
@tap="inputFace(index)"
|
|
>
|
|
<image
|
|
:src="
|
|
'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/' +
|
|
item.url
|
|
"
|
|
class="tui-face-img"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="tui-delete-face_box">
|
|
<view
|
|
class="tui-delete-keybord"
|
|
:class="{ 'tui-opcity': !content }"
|
|
>
|
|
<text class="tui-icon tui-icon-delete_keybord"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="tui-more-box"
|
|
style="height:110px"
|
|
v-if="showIndex == 3"
|
|
>
|
|
<view
|
|
class="tui-more-item"
|
|
hover-class="tui-opcity"
|
|
:hover-stay-time="150"
|
|
@click="uploadPictures"
|
|
>
|
|
<view class="tui-more-icon">
|
|
<view class="tui-icon tui-icon-photo"></view>
|
|
</view>
|
|
<text class="tui-more-text">照片</text>
|
|
</view>
|
|
<view
|
|
class="tui-more-item"
|
|
hover-class="tui-opcity"
|
|
:hover-stay-time="150"
|
|
@click="photograph"
|
|
>
|
|
<view class="tui-more-icon">
|
|
<view class="custom-icon tui-icon-paishe"></view>
|
|
</view>
|
|
<text class="tui-more-text">拍摄</text>
|
|
</view>
|
|
<view
|
|
class="tui-more-item"
|
|
hover-class="tui-opcity"
|
|
:hover-stay-time="150"
|
|
@click="uploadVideo"
|
|
>
|
|
<view class="tui-more-icon">
|
|
<view class="tui-icon tui-icon-video"></view>
|
|
</view>
|
|
<text class="tui-more-text">视频</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="tui-inner-mask" v-if="isLocked"></view>
|
|
</view>
|
|
<view
|
|
class="tui-reply-mask"
|
|
v-if="mask && showVoiceMask"
|
|
:class="{
|
|
'tui-box-show': showIndex,
|
|
'tui-mask-show': showIndex && !maskOpacity,
|
|
}"
|
|
@touchmove.stop.prevent
|
|
@tap="hideKeyboard"
|
|
></view>
|
|
<view class="voice-mask" v-show="showVoiceMask">
|
|
<!--语音条 -->
|
|
<view
|
|
class="voice-bar voice-del"
|
|
:class="{ voiceDel: needCancel }"
|
|
:style="{ width: getVoiceBarWidth }"
|
|
>
|
|
<image
|
|
src="../../static/images/chat/yinping.png"
|
|
class="voice-volume"
|
|
></image>
|
|
<view class="trangle-bottom" :class="{ trangleDel: needCancel }"></view>
|
|
</view>
|
|
<view class="voice-send">
|
|
<!-- 取消和转文字图标 -->
|
|
<view class="voice-middle-wrapper">
|
|
<!-- 取消 -->
|
|
<view class="voice-left-wrapper">
|
|
<view class="cancel-del" :class="{ delTip: needCancel }">
|
|
松开 取消
|
|
</view>
|
|
<view
|
|
class="voice-middle-inner close"
|
|
:class="{ bigger: needCancel }"
|
|
>
|
|
<u-icon name="close" color="#fff" size="24"></u-icon>
|
|
</view>
|
|
</view>
|
|
<!-- 转文字 -->
|
|
<view class="send-tip" :class="{ sendTipNone: needCancel }">
|
|
松开 发送
|
|
</view>
|
|
</view>
|
|
<!-- 底部语音按钮 -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
//聊天栏 回复栏
|
|
// import emoji from "@/utils/emoji.js";
|
|
import emoji from "../../static/im/emojiData.js";
|
|
import uParse from "../../uni_modules/uview-ui/components/u-parse/u-parse.vue";
|
|
import permission from "@/utils/permission.js";
|
|
|
|
const recorderManager = uni.getRecorderManager();
|
|
|
|
export default {
|
|
components: { uParse },
|
|
name: "tChatBar",
|
|
props: {
|
|
//禁用聊天栏
|
|
isLocked: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
//是否显示遮罩
|
|
mask: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
//true表示遮罩透明
|
|
maskOpacity: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
sendText: {
|
|
type: String,
|
|
default: "发送",
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: "#5677fc",
|
|
},
|
|
isHideKeyBoard: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
created() {
|
|
//键盘高度监听
|
|
|
|
this.faceList = emoji.imgArr[1].emojiList
|
|
.reduce((acc, curr) => acc.concat(curr), [])
|
|
.filter((item) => item.alt != "[删除]");
|
|
|
|
let safeH = this.tui.isPhoneX() ? 34 : 0;
|
|
uni.onKeyboardHeightChange((res) => {
|
|
let h = res.height - safeH;
|
|
this.keyboardHeight = h > 0 ? h : 0;
|
|
//去除 完成那一栏高度影响
|
|
setTimeout(() => {
|
|
if (this.showIndex == 1 && this.keyboardHeight != 0) {
|
|
this.replyContainerH = this.keyboardHeight;
|
|
}
|
|
}, 100);
|
|
});
|
|
|
|
// #ifdef APP-PLUS
|
|
const platform = uni.getSystemInfoSync().platform;
|
|
if (platform == "ios") {
|
|
this.isIos = true;
|
|
}
|
|
// #endif
|
|
},
|
|
data() {
|
|
return {
|
|
showIndex: 0, //1-键盘 2-表情 3-其他
|
|
keyboardHeight: 0,
|
|
replyContainerH: uni.upx2px(500),
|
|
faceList: [],
|
|
content: "",
|
|
isVoice: false,
|
|
isEmoji: false,
|
|
editorContent: "",
|
|
isIos: false,
|
|
showVoiceMask: false,
|
|
voicePopupTouches: {},
|
|
voicelength: 0,
|
|
needCancel: false,
|
|
startX: 0,
|
|
startY: 0,
|
|
timer: 0,
|
|
maskBottomRect: null,
|
|
isRecording: false,
|
|
isOutside: false,
|
|
tempFilePath: null,
|
|
startTime: 0,
|
|
};
|
|
},
|
|
computed: {
|
|
// 计算语音条宽度
|
|
getVoiceBarWidth() {
|
|
return 230 + this.voicelength * 4 + "rpx";
|
|
},
|
|
},
|
|
watch: {
|
|
isHideKeyBoard: {
|
|
handler(newVal, oldVal) {
|
|
if (newVal) {
|
|
this.showIndex = 0;
|
|
}
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
onEditorReady() {
|
|
uni
|
|
.createSelectorQuery()
|
|
.select("#editor")
|
|
.context((res) => {
|
|
this.content = res.context;
|
|
})
|
|
.exec();
|
|
},
|
|
hideKeyboard() {
|
|
//隐藏键盘
|
|
this.showIndex = 0;
|
|
// uni.hideKeyboard();
|
|
|
|
this.$emit("sendMsg", this.content);
|
|
this.isEmoji = true;
|
|
this.content = "";
|
|
},
|
|
showKeyBoard(index) {
|
|
if (this.showIndex == index) return;
|
|
this.showIndex = index;
|
|
this.isVoice = false;
|
|
// if(index==1){
|
|
// this.$refs.textarea.focus();
|
|
// }
|
|
// setTimeout(function() {
|
|
// if(index==1){
|
|
// this.$refs.textarea.focus();
|
|
// }
|
|
// }, 150);
|
|
},
|
|
// inputReply(e) {
|
|
// this.editorContent = e.detail.html;
|
|
// },
|
|
inputReply(e) {
|
|
this.content = e.detail.value;
|
|
},
|
|
getEmojiUrl(emojiPath) {
|
|
return `https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${emojiPath}`;
|
|
},
|
|
// async inputFace(index) {
|
|
// // if (!this.content) {
|
|
// // uni.showToast({
|
|
// // title: "编辑器未准备好",
|
|
// // icon: "none",
|
|
// // });
|
|
// // return;
|
|
// // }
|
|
|
|
// const emojiUrl = this.getEmojiUrl(this.faceList[index].url);
|
|
|
|
// try {
|
|
// await this.content.insertImage({
|
|
// src: emojiUrl,
|
|
// width: "24px",
|
|
// height: "24px",
|
|
// alt: this.faceList.find((e) => e.url === emojiUrl),
|
|
// });
|
|
|
|
// console.log("表情插入成功");
|
|
// } catch (error) {
|
|
// console.error("插入表情失败:", error);
|
|
// uni.showToast({
|
|
// title: "插入表情失败",
|
|
// icon: "none",
|
|
// });
|
|
// }
|
|
// },
|
|
inputFace(index) {
|
|
let face = this.faceList[index].alt;
|
|
this.content = this.content + face;
|
|
},
|
|
parsedContent(content) {
|
|
return content.replace(
|
|
/\[img\](.*?)\[img\]/g,
|
|
'<img src="$1" width="25" height="25" />'
|
|
);
|
|
},
|
|
async switchVoice() {
|
|
// #ifdef APP-PLUS
|
|
// 获取权限
|
|
let result = await permission.premissionCheck(
|
|
"RECORD"
|
|
);
|
|
|
|
if (result != 1) {
|
|
return result
|
|
}
|
|
// #endif
|
|
this.isVoice = true;
|
|
this.showIndex = 0;
|
|
|
|
},
|
|
switchInput() {
|
|
this.isVoice = false;
|
|
},
|
|
async uploadPictures() {
|
|
// #ifdef APP-PLUS
|
|
// 获取相册权限
|
|
let result = await permission.premissionCheck(
|
|
"EXTERNAL_STORAGE"
|
|
);
|
|
|
|
if (result != 1) {
|
|
return result
|
|
}
|
|
// #endif
|
|
this.$emit("uploadPictures");
|
|
},
|
|
async photograph() {
|
|
// #ifdef APP-PLUS
|
|
// 获取相机权限
|
|
let result = await permission.premissionCheck(
|
|
"CAMERA"
|
|
);
|
|
|
|
if (result != 1) {
|
|
return result
|
|
}
|
|
// #endif
|
|
this.$emit("photograph");
|
|
},
|
|
async uploadVideo() {
|
|
// #ifdef APP-PLUS
|
|
// 获取相册相机权限
|
|
let result = await permission.premissionCheck(
|
|
"CAMERA_EXTERNAL_STORAGE"
|
|
);
|
|
|
|
if (result != 1) {
|
|
return result
|
|
}
|
|
// #endif
|
|
this.$emit("uploadVideo");
|
|
},
|
|
async getMaskBottomRect() {
|
|
return new Promise((resolve) => {
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query
|
|
.select(".mask-bottom")
|
|
.boundingClientRect((data) => {
|
|
this.maskBottomRect = data;
|
|
console.log("元素位置信息:", data); // 调试用
|
|
resolve(data);
|
|
})
|
|
.exec();
|
|
});
|
|
},
|
|
|
|
async handleTouchStart(e) {
|
|
console.log("handleTouchStart", e);
|
|
this.$emit("showVoicePopup");
|
|
this.showVoiceMask = true;
|
|
|
|
// 等待 DOM 更新
|
|
await this.$nextTick();
|
|
|
|
if (!this.maskBottomRect) {
|
|
await this.getMaskBottomRect();
|
|
}
|
|
|
|
recorderManager.start({
|
|
format: "mp3",
|
|
});
|
|
|
|
this.voicelength = 1;
|
|
this.startX = e.touches[0].pageX;
|
|
this.startY = e.touches[0].pageY;
|
|
this.timer = setInterval(() => {
|
|
this.voicelength += 1;
|
|
if (this.voicelength >= 60) {
|
|
clearInterval(this.timer);
|
|
this.handleTouchEnd();
|
|
}
|
|
}, 1000);
|
|
this.isRecording = true;
|
|
this.isOutside = false;
|
|
},
|
|
|
|
handleTouchMove(e) {
|
|
// 检查是否在mask-bottom区域外
|
|
if (!this.maskBottomRect) return;
|
|
|
|
const touchX = e.touches[0].pageX;
|
|
const touchY = e.touches[0].pageY;
|
|
|
|
// 检查是否在mask-bottom区域外
|
|
// 更精确的边界检查
|
|
const SAFE_MARGIN = 5; // 像素单位
|
|
const isNowOutside =
|
|
touchX < this.maskBottomRect.left - SAFE_MARGIN ||
|
|
touchX >
|
|
this.maskBottomRect.left + this.maskBottomRect.width + SAFE_MARGIN ||
|
|
touchY < this.maskBottomRect.top - SAFE_MARGIN ||
|
|
touchY >
|
|
this.maskBottomRect.top + this.maskBottomRect.height + SAFE_MARGIN;
|
|
|
|
// 调试输出
|
|
console.log(
|
|
`触摸点: (${touchX}, ${touchY})`,
|
|
`元素区域: [${this.maskBottomRect.left}, ${this.maskBottomRect.top}, ${this.maskBottomRect.width}, ${this.maskBottomRect.height}]`,
|
|
`是否在外: ${isNowOutside}`
|
|
);
|
|
|
|
// 如果状态发生变化（进入或离开区域）
|
|
if (isNowOutside !== this.isOutside) {
|
|
this.isOutside = isNowOutside;
|
|
|
|
if (this.isOutside) {
|
|
// 离开区域，暂停录制
|
|
recorderManager.pause();
|
|
console.log("已离开区域，暂停录制");
|
|
this.needCancel = true;
|
|
} else {
|
|
// 回到区域，继续录制
|
|
recorderManager.resume();
|
|
console.log("已回到区域，继续录制");
|
|
this.needCancel = false;
|
|
}
|
|
}
|
|
},
|
|
|
|
async handleTouchEnd(e) {
|
|
clearInterval(this.timer);
|
|
recorderManager.stop();
|
|
|
|
console.log("松开");
|
|
|
|
if (!this.needCancel) {
|
|
recorderManager.onStop((res) => {
|
|
const message = {
|
|
voice: res.tempFilePath,
|
|
length: this.voicelength,
|
|
};
|
|
console.log("recorderManager", res);
|
|
this.inputSubmit(message, 2);
|
|
});
|
|
} else {
|
|
this.inputSubmit();
|
|
}
|
|
this.showVoiceMask = false;
|
|
this.needCancel = false;
|
|
},
|
|
|
|
inputSubmit(msg = {}, types = "") {
|
|
if (msg && types) {
|
|
this.$emit("voiceEnd", msg);
|
|
} else {
|
|
this.$emit("voiceEnd");
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@font-face {
|
|
font-family: "ticons";
|
|
src: url(data:application/font-woff;charset=utf-8;base64,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)
|
|
format("woff");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
.tui-icon {
|
|
font-family: ticons;
|
|
font-size: 24px;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
line-height: 1;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
-webkit-font-smoothing: antialiased;
|
|
color: #222;
|
|
background: #fff;
|
|
}
|
|
|
|
.tui-icon-at:before {
|
|
content: "\eb90";
|
|
}
|
|
|
|
.tui-icon-location:before {
|
|
content: "\eb95";
|
|
}
|
|
|
|
.tui-icon-im_more {
|
|
&:before {
|
|
content: "\eb96";
|
|
}
|
|
}
|
|
|
|
.tui-icon-im_face {
|
|
margin-left: 28rpx;
|
|
margin-right: 28rpx;
|
|
content: "\eb97";
|
|
&:before {
|
|
content: "\eb97";
|
|
}
|
|
}
|
|
|
|
.tui-icon-link:before {
|
|
content: "\eb98";
|
|
}
|
|
|
|
.tui-icon-im_voice:before {
|
|
content: "\eb99";
|
|
}
|
|
|
|
.tui-icon-photo:before {
|
|
content: "\eb9a";
|
|
}
|
|
|
|
.tui-icon-redpacket:before {
|
|
content: "\eb9b";
|
|
}
|
|
|
|
.tui-icon-im_keyboard:before {
|
|
content: "\eb9c";
|
|
}
|
|
|
|
.tui-icon-principal:before {
|
|
content: "\eb9d";
|
|
}
|
|
|
|
.tui-icon-video:before {
|
|
content: "\eba2";
|
|
}
|
|
|
|
.tui-icon-delete_keybord:before {
|
|
content: "\e7b8";
|
|
}
|
|
|
|
.tui-icon-paishe::before {
|
|
content: "\e604";
|
|
}
|
|
|
|
.tui-reply-tabbar {
|
|
width: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
z-index: 1;
|
|
|
|
.tui-chat-tabbar {
|
|
width: 100%;
|
|
background-color: $uni-bg-color-grey;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 16rpx 24rpx;
|
|
|
|
box-sizing: border-box;
|
|
|
|
&::after {
|
|
content: " ";
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
border-top: 1rpx solid $uni-border-color;
|
|
-webkit-transform: scaleY(0.5);
|
|
transform: scaleY(0.5);
|
|
}
|
|
|
|
.tui-phcolor{
|
|
color: #666;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.tui-chat-input {
|
|
flex: 1;
|
|
// min-height: 80rpx;
|
|
min-height: rpx;
|
|
padding: $uni-spacing-col-base 10rpx;
|
|
background-color: $uni-bg-color;
|
|
margin: 0;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.tui-chat-voice_btn {
|
|
flex: 1;
|
|
height: 68rpx;
|
|
border-radius: 12rpx;
|
|
background-color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.tui-icon-ml {
|
|
margin-left: 28rpx;
|
|
}
|
|
|
|
// .tui-icon {
|
|
// margin-bottom: 13rpx;
|
|
// }
|
|
|
|
.tui-send-box {
|
|
width: 80rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.tui-btn-send {
|
|
flex-shrink: 0;
|
|
padding: 6rpx 24rpx;
|
|
font-size: 30rpx;
|
|
border-radius: 100rpx;
|
|
color: #fff !important;
|
|
background: #fe411b;
|
|
}
|
|
}
|
|
|
|
.tui-chat-ios-tabbar {
|
|
padding-bottom: 80rpx;
|
|
}
|
|
|
|
.tui-reply-more {
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: " ";
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
border-top: 1rpx solid $uni-border-color;
|
|
-webkit-transform: scaleY(0.5);
|
|
transform: scaleY(0.5);
|
|
}
|
|
|
|
.tui-face-box {
|
|
width: 100%;
|
|
position: relative;
|
|
background-color: $uni-bg-color-hover;
|
|
|
|
.tui-face-scroll {
|
|
width: 100%;
|
|
padding: $uni-spacing-row-lg 24rpx 80rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.tui-face-img_box {
|
|
width: 14.2857%;
|
|
height: 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.tui-face-img {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tui-delete-face_box {
|
|
position: absolute;
|
|
background-color: #fff;
|
|
// width: 108rpx;
|
|
// height: 92rpx;
|
|
padding: 6rpx 20rpx;
|
|
border-top-left-radius: 12rpx;
|
|
right: 30rpx;
|
|
bottom: 30rpx;
|
|
z-index: 10;
|
|
|
|
.tui-delete-keybord {
|
|
background-color: $uni-bg-color;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: $uni-border-radius-lg;
|
|
|
|
.tui-icon {
|
|
font-size: 48rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tui-more-box {
|
|
width: 100%;
|
|
padding: $uni-spacing-row-lg;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
background-color: $uni-bg-color-grey;
|
|
justify-content: space-evenly;
|
|
|
|
.tui-more-item {
|
|
width: 126rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
// margin-right: 40rpx;
|
|
|
|
&:active {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
.tui-more-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #ffffff;
|
|
height: 108rpx;
|
|
width: 108rpx;
|
|
border-radius: 20rpx;
|
|
|
|
.tui-icon {
|
|
font-size: 48rpx;
|
|
}
|
|
}
|
|
|
|
.tui-more-text {
|
|
font-size: 24rpx;
|
|
line-height: 24rpx;
|
|
color: #7e7e7e;
|
|
padding-top: 20rpx;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tui-inner-mask {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: rgba(248, 248, 248, 0.6);
|
|
}
|
|
}
|
|
|
|
.tui-reply-mask {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: $uni-bg-color-mask;
|
|
visibility: hidden;
|
|
transition: all 0.3s ease;
|
|
opacity: 0;
|
|
}
|
|
|
|
.tui-box-show {
|
|
visibility: visible !important;
|
|
}
|
|
|
|
.tui-mask-show {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tui-icon-paishe {
|
|
font-size: 60rpx;
|
|
}
|
|
|
|
.ql-container {
|
|
height: 100% !important;
|
|
}
|
|
|
|
.tui-chat-input {
|
|
::v-deep {
|
|
.ql-editor {
|
|
min-height: 56rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.voice-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
z-index: 200; /* 确保足够高 */
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.voice-bar {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -30%);
|
|
height: 150rpx;
|
|
background-color: #51ff50;
|
|
border-radius: 26rpx;
|
|
margin-bottom: 220rpx;
|
|
z-index: 200;
|
|
}
|
|
.voiceDel {
|
|
left: 80rpx;
|
|
top: 50%;
|
|
width: 170rpx !important;
|
|
transform: translateX(0%);
|
|
transform: translateY(-30%);
|
|
background-color: red;
|
|
}
|
|
.voice-volume {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 160rpx;
|
|
height: 36rpx;
|
|
}
|
|
.volumeDel {
|
|
width: 80rpx;
|
|
}
|
|
.trangle-bottom {
|
|
position: absolute;
|
|
bottom: -38rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-width: 20rpx;
|
|
border-style: solid;
|
|
border-color: #51ff50 transparent transparent transparent;
|
|
z-index: 9999;
|
|
}
|
|
.trangleDel {
|
|
border-color: red transparent transparent transparent;
|
|
}
|
|
.voice-send {
|
|
position: relative;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 9999;
|
|
}
|
|
.voice-middle-wrapper {
|
|
width: 100%;
|
|
display: flex;
|
|
position: absolute;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
margin-bottom: 40rpx;
|
|
bottom: 15%;
|
|
}
|
|
.voice-left-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
}
|
|
.cancel-del {
|
|
display: none;
|
|
}
|
|
.delTip {
|
|
display: block;
|
|
color: #bfbfbf;
|
|
margin: 0 22rpx 18rpx 0;
|
|
}
|
|
.voice-middle-inner {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #595959;
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
border-radius: 50%;
|
|
}
|
|
.close {
|
|
transform: rotate(350deg);
|
|
margin-left: 80rpx;
|
|
}
|
|
.bigger {
|
|
width: 170rpx;
|
|
height: 170rpx;
|
|
background: #ececec;
|
|
}
|
|
.to-text {
|
|
transform: rotate(10deg);
|
|
margin-right: 80rpx;
|
|
}
|
|
.close-icon {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
color: #fff;
|
|
}
|
|
.wen {
|
|
font-size: 40rpx;
|
|
color: #bfbfbf;
|
|
}
|
|
.send-tip {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0rpx;
|
|
transform: translate(-50%, 36%);
|
|
color: #bfbfbf;
|
|
}
|
|
.sendTipNone {
|
|
display: none;
|
|
}
|
|
.mask-bottom {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 180rpx;
|
|
border-top: #bababb 8rpx solid;
|
|
border-radius: 50% 50% 0 0;
|
|
background-image: linear-gradient(#949794, #e1e3e1);
|
|
z-index: 9999;
|
|
}
|
|
.mask-bottom image {
|
|
position: absolute;
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
margin: auto;
|
|
}
|
|
|
|
.no-area {
|
|
border-color: #595959;
|
|
background-image: linear-gradient(#595959, #595959);
|
|
}
|
|
</style>
|