229 lines
6.5 KiB
Vue
229 lines
6.5 KiB
Vue
<template>
|
|
<view>
|
|
<view class="chat-input-bar">
|
|
<view class="chat-input-container">
|
|
<view class="u-flex u-flex-items-center" style="background-color: #FFFFFF;">
|
|
<!-- 输入框 -->
|
|
<view style="flex: 1;position: relative;overflow: hidden;" @click.stop="openPinglun">
|
|
<u--textarea autoHeight fixed :showConfirmBar="false" border="none" confirmHold
|
|
:autoFocus="autoFocus" :placeholder="placeholder" maxlength="100" :disabled="disabled"
|
|
:cursor-spacing="20" v-model="value" :focus="focus" @blur="blur"
|
|
@focus="emojiShow=false,more=false" @linechange="linechange"
|
|
:customStyle="'background-color: #f2f0f4; border-radius: '+ borderRadius +'rpx;'" />
|
|
<view style="position: absolute;left: 0;top: 0;flex: 1;" @click="openPinglun" v-if="open" />
|
|
</view>
|
|
|
|
<!--表情按钮 -->
|
|
<view style="margin-left: 20rpx;" @click.stop="emojiShow = !emojiShow,more=false,blur()">
|
|
<image src="https://qicheoss.oss-cn-shanghai.aliyuncs.com/xcximage/douyin/expression.png"
|
|
style="width: 48rpx;height: 48rpx;" />
|
|
</view>
|
|
<!-- 更多按钮 -->
|
|
<view style="margin-left: 20rpx;" @click.stop="more = !more,emojiShow=false,blur()">
|
|
<image src="https://qicheoss.oss-cn-shanghai.aliyuncs.com/xcximage/douyin/more.png"
|
|
style="width: 48rpx;height: 48rpx;" />
|
|
</view>
|
|
<!--发送按钮 -->
|
|
<view v-if="value!==''" style="margin-left: 20rpx;" @click.stop="sendSMS(value,0)">
|
|
<image src="https://smfwq2.oss-cn-shanghai.aliyuncs.com/2023/12/25/63571017a4a042b682e1c6be08a3cdda.png"
|
|
style="width: 48rpx;height: 48rpx;" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 功能 -->
|
|
<template v-if="more">
|
|
<u-grid col="4" :border="false" @click="gridItemTap" customStyle="background-color: #fff;" ref="grid">
|
|
<u-grid-item v-for="(item,index) in gridItem" :key="index" customStyle="margin-bottom: 10rpx;">
|
|
<u--image :src="item.img" width="52" height="52" />
|
|
<view style="margin-top: 10rpx;">
|
|
<u--text :text="item.text" color="#999" size="24rpx" align="center" />
|
|
</view>
|
|
</u-grid-item>
|
|
</u-grid>
|
|
</template>
|
|
<!-- 表情 -->
|
|
<template v-else-if="emojiShow">
|
|
<view>
|
|
<!-- #ifdef APP-PLUS -->
|
|
<waterfall column-count="8" column-width="auto" column-gap="0" left-gap="10"
|
|
style="height: 200rpx;background-color: #fff;">
|
|
<cell v-for="(item,index) in emoicon" :key="index" style="padding: 10rpx;" @click="value += item">
|
|
<text style="font-size: 36rpx;">{{item}}</text>
|
|
</cell>
|
|
</waterfall>
|
|
<!-- #endif -->
|
|
<!-- #ifndef APP-PLUS -->
|
|
<u-list height="200rpx" customStyle="background-color:#fff;padding:10rpx 0;">
|
|
<u-grid col="10">
|
|
<u-grid-item v-for="(item,index) in emoicon" :key="index" @click="value += item"
|
|
customStyle="margin-bottom:20rpx;">
|
|
<u-list-item>
|
|
<text style="font-size: 36rpx;text-align: left;">{{item}}</text>
|
|
</u-list-item>
|
|
</u-grid-item>
|
|
</u-grid>
|
|
</u-list>
|
|
<!-- #endif -->
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import utils from "@/utils/util.js";
|
|
export default {
|
|
name: "chat-input-bar",
|
|
props: {
|
|
groupID: ''
|
|
},
|
|
data() {
|
|
return {
|
|
value: '',
|
|
borderRadius: 50, //评论框圆角大小
|
|
emojiShow: false, //表情显示
|
|
autoFocus: false, //自动焦点
|
|
focus: false,
|
|
disabled: false,
|
|
open: true,
|
|
more: false,
|
|
placeholder: "发送信息~",
|
|
emoicon: [
|
|
"😁", "😋", "😜", "😉", "😌", "😅", "😳", "😊", "😝", "😰", "😠", "😩", "😲", "😞", "😭", "😍",
|
|
"😖", "😱", "😡", "😚", "😤", "🐼", "🐲", "😺", "😸", "😹", "😽", "🙀", "🐴", "🐮", "🍺", "🔥",
|
|
"💔", "🉑", "💢", "💣", "💩", "💪", "👍", "👊", "👋", "👌", "👐"
|
|
],
|
|
gridItem: [{
|
|
img: 'https://qicheoss.oss-cn-shanghai.aliyuncs.com/xcximage/douyin/album.png',
|
|
text: '相册'
|
|
},
|
|
{
|
|
img: 'https://qicheoss.oss-cn-shanghai.aliyuncs.com/xcximage/douyin/video.png',
|
|
text: '视频'
|
|
},
|
|
|
|
{
|
|
img: 'https://qicheoss.oss-cn-shanghai.aliyuncs.com/xcximage/douyin/phone.png',
|
|
text: '语音通话'
|
|
},
|
|
{
|
|
img: 'https://qicheoss.oss-cn-shanghai.aliyuncs.com/xcximage/douyin/video.png',
|
|
text: '视频通话'
|
|
}
|
|
]
|
|
};
|
|
},
|
|
methods: {
|
|
//发送
|
|
sendSMS(value, type) {
|
|
if (!value) return uni.$u.toast('内容不能为空');
|
|
this.$emit('sendSMS', {
|
|
msg: value,
|
|
msgType: type
|
|
});
|
|
this.value = '';
|
|
},
|
|
//点击更多事件
|
|
gridItemTap(index) {
|
|
switch (index) {
|
|
case 0:
|
|
// 从相册选择图片
|
|
utils.uploadImageOne({
|
|
count: 1,
|
|
sizeType: ['original'],
|
|
sourceType: ['album', 'camera'],
|
|
dir: 'crmebimage/public/product/'
|
|
}, null, (res) => {
|
|
uni.hideLoading();
|
|
this.sendSMS(res.data, 1);
|
|
});
|
|
break;
|
|
case 1:
|
|
// 从相册选择视频
|
|
utils.uploadVideo({
|
|
dir: 'crmebimage/public/product/'
|
|
}, null, true, res => {
|
|
uni.hideLoading();
|
|
this.sendSMS(res.data, 2);
|
|
});
|
|
break;
|
|
case 2:
|
|
//语音通话
|
|
this.$emit('TUICallKit', 1);
|
|
break;
|
|
case 3:
|
|
//语音通话
|
|
this.$emit('TUICallKit', 2);
|
|
break;
|
|
}
|
|
},
|
|
//输入框行数变化时
|
|
linechange({
|
|
detail
|
|
}) {
|
|
if (Math.abs(detail.height) < 26) {
|
|
this.borderRadius = 50
|
|
} else {
|
|
this.borderRadius = 10
|
|
}
|
|
},
|
|
//打开输入框
|
|
openPinglun() {
|
|
this.emojiShow = false;
|
|
this.more = false;
|
|
// #ifndef APP-PLUS
|
|
this.open = false;
|
|
uni.$u.debounce(() => {
|
|
this.autoFocus = true;
|
|
}, 50);
|
|
// #endif
|
|
// #ifdef APP-PLUS
|
|
if (plus.os.name == "iOS") {
|
|
this.open = false;
|
|
this.disabled = false;
|
|
uni.$u.debounce(() => {
|
|
this.autoFocus = true;
|
|
}, 50);
|
|
} else {
|
|
this.focus = true;
|
|
this.$nextTick(() => {
|
|
this.open = false;
|
|
if (!this.open) {
|
|
plus.key.showSoftKeybord();
|
|
}
|
|
});
|
|
}
|
|
// #endif
|
|
},
|
|
//失去焦点
|
|
blur() {
|
|
// #ifdef APP-PLUS
|
|
if (plus.os.name == "iOS") {
|
|
this.disabled = true;
|
|
this.autoFocus = false;
|
|
}
|
|
this.open = true;
|
|
plus.key.hideSoftKeybord();
|
|
// #endif
|
|
// #ifndef APP-PLUS
|
|
this.open = true;
|
|
// #endif
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chat-input-bar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
border-top: solid 1px #f5f5f5;
|
|
background-color: #fff;
|
|
padding: 30rpx 15rpx;
|
|
}
|
|
|
|
.chat-input-container {
|
|
flex: 1;
|
|
}
|
|
</style> |