220 lines
7.4 KiB
XML
220 lines
7.4 KiB
XML
<import name="sendbox" src="@components/FloatingSendBox/FloatingSendBox.ux"></import>
|
|
<import name="full-screen-input" src="@components/FullScreenInput/FullScreenInput.ux"></import>
|
|
|
|
<template>
|
|
<div class="page">
|
|
<image style="position: absolute; margin-top: 233px" if="{{anims.show_loading}}" src="{{anims.loading_src.value}}"></image>
|
|
<scroll class="scroll" scroll-y="true" id="mainscroll" bounces="true">
|
|
<div for="{{messages}}">
|
|
<div class="targetmsg-container" if="{{$item.receiver_id == myId}}">
|
|
<div class="targetmsg"
|
|
style="margin-top: {{MsgBoxStyleCalcMarginTop($item.msg_seqno)}}; margin-bottom: {{MsgBoxStyleCalcMarginBottom($item.msg_seqno)}}">
|
|
<image class="msgprofpic" src="{{targetPic}}@75w_75h" alt="/common/fullgray.png"></image>
|
|
<div class="msgbox" style="margin-left: 5px"
|
|
onclick="ShowMessageDetail($item.content, $item.msg_type)">
|
|
<!-- 普通文本消息 -->
|
|
<text class="msgtext" if="{{$item.msg_type == 1}}">
|
|
{{ JSON.parse($item.content).content }}
|
|
</text>
|
|
<!-- 已撤回的文本消息 -->
|
|
<text class="msgtext" if="{{$item.msg_type == 5}}">
|
|
{{ $t("dmpage.withdrawn") }} {{ JSON.parse($item.content).content }}
|
|
</text>
|
|
<!-- 图片消息 -->
|
|
<image class="imgmsg" if="{{$item.msg_type == 2}}" src="{{JSON.parse($item.content).url}}@156w_125h" alt="/common/fullgray.png"></image>
|
|
<!-- 不支持显示的消息 -->
|
|
<text class="msgtext" if="{{($item.msg_type != 5) && ($item.msg_type != 2) && ($item.msg_type != 1)}}">
|
|
{{ $t("dmpage.withdrawn") }}
|
|
</text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mymsg-container" if="{{$item.receiver_id == targetId}}">
|
|
<div class="mymsg"
|
|
style="margin-top: {{MsgBoxStyleCalcMarginTop($item.msg_seqno)}}; margin-bottom: {{MsgBoxStyleCalcMarginBottom($item.msg_seqno)}}">
|
|
<div style="background-color: #ff7da8" class="msgbox"
|
|
onclick="ShowMessageDetail($item.content, $item.msg_type)">
|
|
<!-- 普通文本消息 -->
|
|
<text class="msgtext" if="{{$item.msg_type == 1}}">
|
|
{{ JSON.parse($item.content).content }}
|
|
</text>
|
|
<!-- 已撤回的文本消息 -->
|
|
<text class="msgtext" if="{{$item.msg_type == 5}}">
|
|
{{ $t("dmpage.withdrawn") }} {{ JSON.parse($item.content).content }}
|
|
</text>
|
|
<!-- 图片消息 -->
|
|
<image class="imgmsg" if="{{$item.msg_type == 2}}" src="{{JSON.parse($item.content).url}}@156w_125h" alt="/common/fullgray.png"></image>
|
|
<!-- 不支持显示的消息 -->
|
|
<text class="msgtext" if="{{($item.msg_type != 5) && ($item.msg_type != 2) && ($item.msg_type != 1)}}">
|
|
{{ $t("dmpage.withdrawn") }}
|
|
</text>
|
|
</div>
|
|
<image style="margin-left: 5px" class="msgprofpic" src="{{myPic}}@75w_75h" alt="/common/fullgray.png"></image>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</scroll>
|
|
<sendbox input_text="{{input_text}}" @clickinput="OpenInput" @clicksend="SendMsg" style="position: absolute"></sendbox>
|
|
<full-screen-input style="position: absolute" if="{{inputmode}}" @send="FinishInput" @exit="ExitInput"></full-screen-input>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import router from "@system.router"
|
|
import prompt from "@system.prompt"
|
|
|
|
export default {
|
|
public: {
|
|
myId: 0,
|
|
targetId: 1,
|
|
myPic: "",
|
|
targetPic: ""
|
|
},
|
|
private: {
|
|
messages: [
|
|
{
|
|
msg_seqno: "placeholder",
|
|
receiver_id: 0,
|
|
content: `{"content": "占位符"}`
|
|
}
|
|
],
|
|
inputmode: false,
|
|
anims: {
|
|
show_loading: false
|
|
},
|
|
input_text: ""
|
|
},
|
|
async SendMsg() {
|
|
// 发送消息
|
|
try {
|
|
const result = await this.$app.$def.biliclient.SendDMSessionMessage(
|
|
this.targetId,
|
|
1,
|
|
this.input_text
|
|
)
|
|
if (result.code !== 0) {
|
|
prompt.showToast({
|
|
message: `发送失败！错误代码：${result.code} 原因：${result.message}`
|
|
})
|
|
} else {
|
|
this.UpdateMessages()
|
|
this.input_text = ""
|
|
}
|
|
} catch (error) {
|
|
prompt.showToast({
|
|
message: `发送失败！${error.message}`
|
|
})
|
|
}
|
|
},
|
|
ShowMessageDetail(content, type) {
|
|
switch (type) {
|
|
// 文本类消息直接丢给textdetail
|
|
case 1:
|
|
router.push({
|
|
uri: "pages/tools/textdetail",
|
|
params: {
|
|
text: JSON.parse(content).content,
|
|
titletext: "消息详情"
|
|
}
|
|
})
|
|
break
|
|
case 2:
|
|
router.push({
|
|
uri: "pages/tools/picturedetail",
|
|
params: {
|
|
img_uri: JSON.parse(content).url
|
|
}
|
|
})
|
|
break
|
|
default:
|
|
prompt.showToast({
|
|
message: "该类型消息暂不支持展示详情"
|
|
})
|
|
break
|
|
}
|
|
},
|
|
RefreshMessageList(input_text_set = "") {
|
|
// 更改数组length以强迫快应用框架重渲染页面
|
|
this.messages.push({})
|
|
this.messages.pop()
|
|
// 同时也刷新自定义组件的ViewModel
|
|
this.input_text = "Loading..."
|
|
// 将内容设置为默认为空字符串的input_text_set以适配FinishInput
|
|
this.input_text = input_text_set
|
|
setTimeout(() => {
|
|
this.ScrollToEnd()
|
|
}, 500)
|
|
},
|
|
FinishInput(evt) {
|
|
this.inputmode = false
|
|
this.RefreshMessageList(evt.detail.content)
|
|
},
|
|
ExitInput() {
|
|
this.inputmode = false
|
|
this.input_text = ""
|
|
this.RefreshMessageList()
|
|
},
|
|
OpenInput() {
|
|
this.inputmode = true
|
|
},
|
|
MsgBoxStyleCalcMarginTop(msg_seqno) {
|
|
return msg_seqno === this.messages[0].msg_seqno ? "85px" : "15px"
|
|
},
|
|
MsgBoxStyleCalcMarginBottom(msg_seqno) {
|
|
return msg_seqno === this.messages[this.messages.length - 1].msg_seqno ? "160px" : "0px"
|
|
},
|
|
async UpdateMessages(initial = false) {
|
|
// 更新消息
|
|
try {
|
|
let response = await this.$app.$def.biliclient.getDMSessionMessage(1, this.targetId, 30)
|
|
let newMessages = response.messages.reverse()
|
|
|
|
if (
|
|
newMessages.length > 0 &&
|
|
newMessages[newMessages.length - 1].msg_seqno !==
|
|
this.messages[this.messages.length - 1].msg_seqno
|
|
) {
|
|
this.messages = newMessages
|
|
setTimeout(this.ScrollToEnd, 500)
|
|
}
|
|
|
|
if (initial && this.anims.show_loading) {
|
|
this.anims.show_loading = false
|
|
this.anims.loading.stop()
|
|
}
|
|
|
|
// 释放内存，防止挂机OOM崩溃
|
|
response = null
|
|
newMessages = null
|
|
} catch (error) {
|
|
prompt.showToast({
|
|
message: `更新消息失败！${error.message}`
|
|
})
|
|
}
|
|
},
|
|
ScrollToEnd() {
|
|
this.$element("mainscroll").getScrollRect({
|
|
success: (rect) => {
|
|
this.$element("mainscroll").scrollTo({top: rect.height})
|
|
}
|
|
})
|
|
},
|
|
onReady() {
|
|
global.runGC()
|
|
this.UpdateMessages(true) // 初始化加载消息
|
|
this.messageUpdateInterval = setInterval(this.UpdateMessages, 3000) // 每3秒更新一次消息
|
|
},
|
|
onDestroy() {
|
|
clearInterval(this.messageUpdateInterval)
|
|
},
|
|
onInit() {
|
|
global.animengine.defaults.loading.CreateLoadingAnimation(this)
|
|
this.anims.loading.start()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
@import '@less/global.less';
|
|
@import './dmpage.less';
|
|
</style> |