<template>
|
<view class="uni-project-event-logs" :style="{'height':'calc(100% - ' +bottomHeight+ ')'}">
|
<view class="chat-container" @touchstart="hideDrawer">
|
<view class="log-header">
|
<view class="tab-item" :class="{'sel-tab':index == currentLogPage}"
|
v-for="(logPageItem, index) in logTypeArray" :key="index" @click="clickLogTab(index)">
|
<text>{{logPageItem.text}}</text>
|
</view>
|
</view>
|
<swiper class="log-content" :current="currentLogPage" @change="changeSwiper">
|
<swiper-item v-for="(logPageItem, index) in logTypeArray" :key="index">
|
<EventLog ref="refEventLog" + index :eventId="eventId" :logType="logPageItem.text" :playId="playId"
|
:isMobilePlatform="isMobilePlatform" @playVoice="playVoice" @loadFail="onLoadFailed(index)">
|
</EventLog>
|
</swiper-item>
|
</swiper>
|
</view>
|
<view class="uni-panel-msg-bottom">
|
|
<view class="uni-panel-btn-left" @click="clickChangeVoice">
|
<view class="uni-panel-btn-voice" :class="isVoiceMsg ? 'fu-imkeyboard' :'fu-yuyin'"></view>
|
</view>
|
|
<view class="uni-panel-msg-text "
|
:style="{width:(!isVoiceMsg && msgInput) ? 'calc(100% -118px)':'calc(100% - 103px)'}">
|
<textarea v-if="!isVoiceMsg" auto-height fixed maxlength="-1" :focus="focusInput" cursor-spacing="10"
|
show-confirm-bar="{{false}}" type="text" :adjust-position="false ? true:false" v-model="msgInput"
|
@linechange="inputBindLineChange" @focus="inputBindFocus" @blur="inputBindBlur"
|
@keyboardheightchange="inputBindkeyboardheightchange"></textarea>
|
<view class="uni-panel-btn-sound" v-else @touchstart="voiceStart" @touchmove.stop.prevent="voiceIng"
|
@touchend="voiceEnd" @touchcancel="voiceCancel">{{voiceTis}}</view>
|
|
</view>
|
|
<view class="uni-panel-btn-right" v-if="!isVoiceMsg && msgInput">
|
<button class="uni-panel-btn-send" @click="sendTaskMsg">发送</button>
|
</view>
|
<view class="uni-panel-btn-right" v-else @click="showMore">
|
<view class="uni-panel-btn-add fu-add"></view>
|
</view>
|
</view>
|
<!-- 抽屉栏 -->
|
<view class="uni-panel-popup-layer" v-if="!hideMore">
|
<!-- 更多功能 相册-拍照-->
|
<view class="uni-panel-popup-more-layer" :class="{hidden:hideMore}">
|
<view class="uni-panel-popup-list">
|
<view class="uni-panel-popup-list-box" @click="clickChooseImage">
|
<view class="icon fs-picture"></view>
|
</view>
|
<view class="uni-panel-popup-list-box" v-if="isMobilePlatform" @click="clickCamera">
|
<view class="icon fs-photo"></view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="uni-panel-safe-bottom" :style="{height:safeAreaBottom + 'px',background:'#f1f1f1'}" />
|
<!-- 录音UI效果 v-if="isVoiceRecord"-->
|
<viewAudioRecord ref="refAudioRecord" @recordStart="recordVioceStart" @recordEnd="recordVioceEnd">
|
</viewAudioRecord>
|
|
</view>
|
</template>
|
|
<script>
|
import TaskInit from "@/common/extend.js"
|
import viewAudioRecord from '@/components/audio-record.vue'
|
import {
|
showModal,
|
showToast,
|
getGuid
|
} from "@/common/Page.js"
|
import EventLog from "./log.vue"
|
|
// #ifndef MP-DINGTALK
|
const audioContext = uni.createInnerAudioContext();
|
// #endif
|
|
export default {
|
name: "pageProjectEventLogs",
|
components: {
|
viewAudioRecord,
|
EventLog
|
},
|
props: {
|
eventId: {
|
type: String,
|
default () {
|
return "";
|
}
|
},
|
|
},
|
data() {
|
return {
|
isMobilePlatform: false,
|
safeAreaBottom: getApp().globalData.safeAreaBottom,
|
msgInput: "",
|
holdkeyboardInput: false,
|
bottomHeight: '0px', //input框的数据
|
keywordHeight: 0,
|
isVoiceMsg: false,
|
voiceTis: '按住 说话',
|
playId: "",
|
// more参数
|
hideMore: true,
|
focusInput: false,
|
old: {
|
focusInput: false,
|
},
|
currentLogPage: 0,
|
logTypeArray: [{
|
text: "分析"
|
}, {
|
text: "措施"
|
}, {
|
text: "总结"
|
}],
|
}
|
|
},
|
mounted() {
|
const _this = this
|
_this.loadPlatform();
|
//语音自然播放结束
|
// #ifndef MP-DINGTALK
|
audioContext.onEnded((res) => {
|
console.log('语音自然播放结束');
|
_this.setData({
|
playId: ""
|
})
|
});
|
audioContext.onError((res) => {
|
console.log("播放错误", res);
|
});
|
audioContext.onStop = () => {
|
console.log("播放语音停止事件")
|
_this.setData({
|
playId: ""
|
})
|
return
|
}
|
// #endif
|
_this.$nextTick(function() {
|
_this.$refs[`refEventLog`][_this.currentLogPage].loadData()
|
});
|
|
},
|
methods: {
|
setData: function(obj) {
|
let that = this;
|
let keys = [];
|
let val, data;
|
|
Object.keys(obj).forEach(function(key) {
|
keys = key.split(".");
|
val = obj[key];
|
data = that.$data;
|
keys.forEach(function(key2, index) {
|
if (index + 1 == keys.length) {
|
that.$set(data, key2, val);
|
} else {
|
if (!data[key2]) {
|
that.$set(data, key2, {});
|
}
|
}
|
data = data[key2];
|
});
|
});
|
},
|
clickLogTab(index) {
|
|
if (!this.logTypeArray[index].loaded) {
|
this.logTypeArray[index].loaded = true
|
this.$refs[`refEventLog`][index].loadData()
|
}
|
this.msgInput = ""
|
this.setData({
|
currentLogPage: index
|
})
|
},
|
changeSwiper(evt) {
|
let index = evt.target.current || evt.detail.current;
|
if (!this.logTypeArray[index].loaded) {
|
this.logTypeArray[index].loaded = true
|
this.$refs[`refEventLog`][index].loadData()
|
}
|
this.msgInput = ""
|
this.setData({
|
currentLogPage: index
|
})
|
},
|
onLoadFailed(index) {
|
|
this.logTypeArray[index].loaded = false
|
},
|
//发送讨论内容
|
sendTaskMsg() {
|
let sText = this.msgInput.trim()
|
if (sText.length < 1) {
|
showToast("不能发送空白信息", "none")
|
return
|
}
|
let guid = getGuid();
|
this.msgInput = ""
|
this.$refs[`refEventLog`][this.currentLogPage].addTaskDiscuzMsg(guid, sText)
|
},
|
|
loadPlatform() {
|
let bRet = false
|
switch (getApp().globalData.platform) {
|
case 'android':
|
bRet = true;
|
break;
|
case 'ios':
|
bRet = true;
|
break;
|
default:
|
break;
|
}
|
this.isMobilePlatform = bRet
|
},
|
// 选择图片发送
|
clickChooseImage() {
|
if (uni.canIUse('chooseMedia')) {
|
this.getMedia('album');
|
} else {
|
const _this = this
|
let app = getApp()
|
let sizeType = ['original', 'compressed']
|
//#ifdef MP-DINGTALK
|
sizeType = ['compressed']
|
// #endif
|
|
uni.chooseImage({
|
count: 10,
|
sizeType: sizeType, //original 原图，compressed 压缩图，默认二者都有
|
sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。
|
success: (res) => {
|
_this.hideDrawer();
|
let tempFiles = []
|
if (res.files) {
|
for (let i = 0; i < res.files.length; i++) {
|
let tmpFile = {
|
path: res.files[i].path,
|
size: res.files[i].size || 0,
|
fileType: "file"
|
}
|
if (TaskInit.fileUtils.isPictureType(tmpFile
|
.path)) //图片
|
{
|
tmpFile.fileType = "image"
|
}
|
tempFiles.push(tmpFile)
|
}
|
} else if (res.tempFiles) {
|
for (let i = 0; i < res.tempFiles.length; i++) {
|
let tmpFile = {
|
path: res.tempFiles[i].path,
|
size: res.tempFiles[i].size || 0,
|
fileType: "file"
|
}
|
if (TaskInit.fileUtils.isPictureType(tmpFile
|
.path)) //图片
|
{
|
tmpFile.fileType = "image"
|
}
|
tempFiles.push(tmpFile)
|
|
|
}
|
} else {
|
for (let i = 0; i < res.tempFilePaths.length; i++) {
|
|
let tmpFile = {
|
path: res.tempFilePaths[i],
|
size: 0,
|
fileType: "file"
|
}
|
if (TaskInit.fileUtils.isPictureType(tmpFile
|
.path)) //图片
|
{
|
tmpFile.fileType = "image"
|
}
|
tempFiles.push(tmpFile)
|
|
|
}
|
}
|
_this.uploadMedias(tempFiles, false)
|
|
},
|
fail: (err) => {
|
console.log('chooseImage fail', err)
|
if (_this.isMobilePlatform && err.errMsg.indexOf('cancel') <
|
0 && err.errMsg
|
.indexOf(
|
'取消') < 0) {
|
uni.getSetting({
|
success: (res) => {
|
let authStatus = res.authSetting[
|
'scope.album'];
|
if (!authStatus) {
|
showModal(
|
"需要从您的相册获取图片，请在设置界面打开相关权限",
|
"授权失败").then((
|
res) => {
|
if (res) {
|
uni.openSetting()
|
}
|
})
|
}
|
}
|
})
|
}
|
}
|
})
|
}
|
},
|
|
//拍照发送
|
clickCamera() {
|
if (uni.canIUse('chooseMedia')) {
|
this.getMedia('camera');
|
} else {
|
console.log("chooseVideo")
|
const _this = this
|
uni.chooseVideo({
|
|
sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。
|
maxDuration: 30,
|
camera: 'back',
|
success(res) {
|
_this.hideDrawer();
|
console.log("chooseVideo success", res)
|
res.fileType = "video"
|
_this.uploadMedias([res], true)
|
|
},
|
fail: (err) => {
|
console.log("chooseVideofail ", err)
|
}
|
});
|
|
}
|
|
},
|
getMedia(strType) {
|
const _this = this
|
let app = getApp()
|
console.log("chooseMedia")
|
uni.chooseMedia({
|
count: 10,
|
mediaType: ['image', 'video'],
|
sourceType: [strType], //album 从相册选图，camera 使用相机，默认二者都有。
|
sizeType: ['original'], //original 原图，compressed 压缩图，默认二者都有
|
maxDuration: 30,
|
camera: 'back',
|
success(res) {
|
console.log('chooseMedia success', res)
|
_this.hideDrawer();
|
let tempFiles = []
|
for (let i = 0; i < res.tempFiles.length; i++) {
|
let fileType = "image"
|
if (TaskInit.fileUtils.isVideoType(res.tempFiles[i].path)) //视频
|
{
|
fileType = "video"
|
tempFiles.push({
|
tempFilePath: res.tempFiles[i].path,
|
size: res.tempFiles[i].size,
|
fileType: fileType,
|
duration: 1,
|
width: 100,
|
height: 100,
|
thumbTempFilePath: ""
|
})
|
} else {
|
fileType = "image"
|
tempFiles.push({
|
tempFilePath: res.tempFiles[i].path,
|
size: res.tempFiles[i].size,
|
fileType: fileType,
|
})
|
}
|
|
|
}
|
if (strType == "camera") {
|
_this.uploadMedias(tempFiles, true)
|
} else {
|
_this.uploadMedias(tempFiles, false)
|
}
|
},
|
fail: (err) => {
|
//_this.openDrawer();
|
if (_this.isMobilePlatform && err.errMsg.indexOf('cancel') < 0) {
|
uni.getSetting({
|
success: (res) => {
|
console.log("getSetting", res)
|
let authStatus = true
|
if (strType == "album")
|
authStatus = res.authSetting[
|
'scope.album'];
|
else if (strType == "camera")
|
authStatus = res.authSetting[
|
'scope.camera'];
|
|
if (!authStatus) {
|
showModal("需要从您的相册获取图片，请在设置界面打开相关权限",
|
"授权失败").then((
|
res) => {
|
if (res) {
|
uni.openSetting()
|
}
|
})
|
}
|
}
|
})
|
}
|
}
|
})
|
},
|
inputBindFocus(e) {
|
const _this = this
|
console.log("inputBindFocus")
|
// input 展示的位置
|
this.old.focusInput = true
|
if (_this.hideMore == false) {
|
_this.setData({
|
hideMore: true,
|
})
|
}
|
this.bottomHeight = (e.detail.height) + "px";
|
this.$refs[`refEventLog`][this.currentLogPage].scrollBottom()
|
},
|
inputBindLineChange(e) {
|
//console.log("inputBindLineChange",e)
|
},
|
inputBindkeyboardheightchange(e) {
|
//console.log("inputBindkeyboardheightchange",e)
|
// this.bottomHeight=(e.detail.height )+ "px";
|
},
|
|
inputBindBlur() {
|
console.log("inputBindBlur")
|
this.old.focusInput = false
|
// input 失去焦点，键盘隐藏，设置 input 所在盒子的 bottom 值为0
|
this.bottomHeight = "0px"
|
|
},
|
//更多功能(点击+弹出)
|
showMore() {
|
const _this = this
|
console.log("showMore", _this.hideMore, !_this.hideMore)
|
const flagVoiceMsg = _this.isVoiceMsg;
|
_this.isVoiceMsg = false;
|
|
if (flagVoiceMsg) {
|
_this.setData({
|
hideMore: false,
|
bottomHeight: '0px'
|
})
|
return
|
}
|
if (_this.hideMore) {
|
_this.focusInput = _this.old.focusInput
|
_this.$nextTick(function() {
|
_this.focusInput = false
|
});
|
_this.setData({
|
hideMore: false,
|
bottomHeight: '0px'
|
})
|
//_this.openDrawer();
|
} else {
|
_this.focusInput = _this.old.focusInput
|
_this.$nextTick(function() {
|
_this.focusInput = true
|
});
|
setTimeout(() => {
|
_this.hideMore = true;
|
}, 150);
|
}
|
},
|
// 隐藏抽屉
|
hideDrawer() {
|
// console.log("hideDrawer")
|
const _this = this
|
_this.bottomHeight = '0px'
|
setTimeout(() => {
|
_this.setData({
|
hideMore: true,
|
})
|
}, 150);
|
},
|
|
clickChangeVoice() {
|
console.log("clickChangeVoice", this.isVoiceMsg)
|
let bFlag = !this.isVoiceMsg
|
this.setData({
|
isVoiceMsg: bFlag,
|
hideMore: true,
|
bottomHeight: '0px'
|
})
|
if (!bFlag) {
|
this.focusInput = this.old.focusInput
|
this.$nextTick(function() {
|
this.focusInput = true
|
});
|
} else {
|
this.focusInput = false
|
this.old.focusInput = false
|
|
}
|
},
|
//录音开始UI效果
|
voiceStart(e) {
|
this.$refs.refAudioRecord.voiceStart(e)
|
},
|
// 录音中(判断是否触发上滑取消发送)
|
voiceIng(e) {
|
this.$refs.refAudioRecord.voiceIng(e)
|
},
|
// 结束录音
|
voiceEnd(e) {
|
|
this.$refs.refAudioRecord.voiceEnd(e)
|
this.voiceTis = '按住 说话';
|
},
|
// 录音被打断
|
voiceCancel() {
|
this.$refs.refAudioRecord.voiceCancel()
|
this.voiceTis = '按住 说话';
|
|
},
|
recordVioceStart() {
|
this.voiceTis = '松开 结束';
|
|
},
|
recordVioceEnd(param) {
|
|
this.uploadMedias([param]);
|
|
},
|
uploadMedias(data) {
|
this.$refs[`refEventLog`][this.currentLogPage].uploadMedias(data)
|
},
|
// 播放语音
|
playVoice(e) {
|
const _this = this
|
// #ifdef MP-DINGTALK
|
if (uni.canIUse("getBackgroundAudioManager")) {
|
|
const bgAudioManager = uni.getBackgroundAudioManager()
|
if (_this.playId == e.ID) {
|
bgAudioManager.stop()
|
return
|
}
|
bgAudioManager.onError = (err) => {
|
console.log("播放语音失败", err)
|
_this.setData({
|
playId: ""
|
})
|
this.showError("播放语音失败," + JSON.stringify(err))
|
return
|
}
|
bgAudioManager.onStop = () => {
|
console.log("播放语音停止事件")
|
_this.setData({
|
playId: ""
|
})
|
return
|
}
|
bgAudioManager.onEnded = () => {
|
console.log("播放语音结束事件")
|
_this.setData({
|
playId: ""
|
})
|
return
|
}
|
_this.setData({
|
playId: e.ID
|
})
|
bgAudioManager.title = '语音';
|
bgAudioManager.singer = '暂无';
|
bgAudioManager.src = e.mediaSrc;
|
bgAudioManager.play()
|
}
|
// #endif
|
// #ifndef MP-DINGTALK
|
audioContext.src = e.mediaSrc;
|
_this.setData({
|
playId: e.ID,
|
})
|
_this.$nextTick(function() {
|
audioContext.play();
|
});
|
// #endif
|
|
|
},
|
showError(ex) {
|
let tip = typeof ex === 'string' ? ex :( ex.message || ex.err_msg || ex.errMsg || ex.err_info || "")
|
|
showModal(tip, "提示", false)
|
},
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.uni-project-event-logs {
|
display: flex;
|
flex-direction: column;
|
|
|
.chat-container {
|
display: flex;
|
flex: 1;
|
font-size: 14px;
|
padding: 0px 1% 8px 1%;
|
width: 98%;
|
height: calc(100% - 500px);
|
flex-direction: column;
|
|
.log-header {
|
margin: 10px;
|
display: flex;
|
flex-direction: row;
|
|
.tab-item {
|
padding: 4px 5px;
|
margin: 0 5px;
|
}
|
|
.sel-tab {
|
border-radius: 5px;
|
background-color: #86bbd8;
|
|
}
|
}
|
|
|
.log-content {
|
display: flex;
|
flex-direction: column;
|
flex: 1;
|
|
}
|
}
|
|
.uni-panel-popup-layer {
|
display: flex;
|
transition: all .15s linear;
|
width: 96%;
|
height: 54px;
|
padding: 12px 2% 16px;
|
background-color: #f1f1f1;
|
border-top: 1px solid #ddd;
|
//position: fixed;
|
z-index: 102;
|
//top: 100%;
|
}
|
|
.uni-panel-showLayer {
|
transform: translate3d(0, -84px, 0);
|
}
|
|
.uni-panel-popup-more-layer {
|
display: flex;
|
width: 100%;
|
height: 54px;
|
}
|
|
.uni-panel-popup-list {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.uni-panel-popup-list-box {
|
width: 40px;
|
height: 40px;
|
border-radius: 8px;
|
background-color: #fff;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin: 5px 8px 5px 8px;
|
}
|
|
.uni-panel-popup-list-box .icon {
|
font-size: 32px;
|
}
|
|
.uni-panel-msg-bottom {
|
display: flex;
|
flex-direction: row;
|
width: 100%;
|
z-index: 101;
|
align-items: flex-end;
|
justify-content: space-between;
|
padding: 8px;
|
|
background: #f1f1f1; // pink;
|
|
}
|
|
.uni-panel-msg-text {
|
display: flex;
|
width: calc(100% - 120px);
|
margin-bottom: 2px;
|
border: 1px solid #eeeeec;
|
border-radius: 5px;
|
background: #FFF;
|
font-size: 15px;
|
}
|
|
.uni-panel-msg-text textarea {
|
display: flex;
|
width: 96%;
|
padding: 5px;
|
min-height: 24px;
|
max-height: 150px;
|
}
|
.uni-panel-btn-left {
|
display: flex;
|
height: 100%;
|
|
.uni-panel-btn-voice {
|
display: flex;
|
margin-left: 12px;
|
font-size: 28px;
|
justify-content: center;
|
align-items: center;
|
border-radius: 10rpx;
|
padding: 4px;
|
margin-bottom: 2px;
|
}
|
}
|
|
.uni-panel-btn-right {
|
display: flex;
|
height: 100%;
|
align-items: center;
|
|
.uni-panel-btn-send {
|
display: flex;
|
font-size: 15px !important;
|
justify-content: center;
|
border-radius: 10rpx;
|
margin-right: 12px;
|
padding: 0 10rpx;
|
color: #fff;
|
background-color: #00aaff;
|
}
|
|
.uni-panel-btn-add {
|
display: flex;
|
font-size: 28px;
|
padding: 4px;
|
justify-content: center;
|
align-items: center;
|
margin-right: 12px;
|
margin-bottom: 2px;
|
}
|
}
|
|
|
|
.uni-panel-btn-sound {
|
flex: 1;
|
height: 35px;
|
line-height: 2.1;
|
font-size: 16px;
|
text-align: center;
|
margin: 0 10px;
|
|
}
|
|
|
|
.hidden {
|
display: none !important;
|
}
|
|
/* loadmore */
|
.uni-loadmore {
|
height: 80rpx;
|
line-height: 80rpx;
|
text-align: center;
|
padding-bottom: 30rpx;
|
}
|
}
|
</style>
|
