diff --git a/src/pages/dialog/index.vue b/src/pages/dialog/index.vue index b08a70c..aebfa4a 100644 --- a/src/pages/dialog/index.vue +++ b/src/pages/dialog/index.vue @@ -187,7 +187,7 @@ <div class="footBox"> <div v-if="!dialogueStore.isOpenMultiSelect"> <div - class="pt-[16rpx] ml-[32rpx] mr-[32rpx] flex items-center justify-between" + class="pt-[16rpx] ml-[32rpx] mr-[32rpx] flex items-start justify-between" > <div class="flex-1 quillBox"> <QuillEditor @@ -195,38 +195,69 @@ id="editor" :options="editorOption" @editorChange="onEditorChange" - style="height: 100%; border: none;" + style="width: 100%; flex: 1; height: 100%; border: none;" @click="onEditorClick" /> <!-- <tm-input type=textarea autoHeight focusColor="#F9F9F9" color="#F9F9F9" :inputPadding="[12]" placeholder=""></tm-input> --> + <div class="quote-area" v-if="state?.quoteInfo"> + <span + v-if="state?.quoteInfo?.msg_type === 1" + class="text-[28rpx] text-[#999]" + > + {{ + state?.quoteInfo?.nickname + + ':' + + state?.quoteInfo?.extra?.content + }} + </span> + <span + v-if="state?.quoteInfo?.msg_type === 3" + class="text-[28rpx] text-[#999]" + > + {{ + state?.quoteInfo?.nickname + + ':' + + '[' + + $t('msg.type') + + ']' + }} + </span> + <img + @click="clearQuoteInfo" + style="width: 30rpx; height: 30rpx;" + src="/src/static/image/login/check-circle-filled@3x.png" + /> + </div> + </div> + <div class="flex items-center justify-end h-[72rpx]"> + <tm-image + :margin="[10, 0]" + @click="handleEmojiPanel" + :width="52" + :height="52" + :round="12" + :src="state.isOpenEmojiPanel ? keyboard : smile" + ></tm-image> + <tm-image + @click="handleFilePanel" + :margin="[10, 0]" + :width="52" + :height="52" + :round="12" + :src="addCircleGray" + ></tm-image> + <tm-button + @click="onSendMessageClick" + :margin="[0, 0]" + :padding="[0, 30]" + color="#46299D" + :fontSize="28" + size="mini" + :shadow="0" + label="发送" + ></tm-button> </div> - <tm-image - :margin="[10, 0]" - @click="handleEmojiPanel" - :width="52" - :height="52" - :round="12" - :src="state.isOpenEmojiPanel ? keyboard : smile" - ></tm-image> - <tm-image - @click="handleFilePanel" - :margin="[10, 0]" - :width="52" - :height="52" - :round="12" - :src="addCircleGray" - ></tm-image> - <tm-button - @click="onSendMessageClick" - :margin="[0, 0]" - :padding="[0, 30]" - color="#46299D" - :fontSize="28" - size="mini" - :shadow="0" - label="发送" - ></tm-button> </div> <div v-if="state.isOpenEmojiPanel" class="mt-[50rpx]"> <emojiPanel @on-select="onEmoticonEvent" /> @@ -401,6 +432,7 @@ const state = ref({ onfocusItem: null, sessionId: '', localPageLoadDone: true, //分页加载缓存中的聊天记录是否完毕 + quoteInfo: null, //引用信息 }) uniOnload((options) => { @@ -739,6 +771,12 @@ const multipleChoose = (item) => { const actionCite = (item) => { console.log('引用') + state.value.quoteInfo = item +} + +//清除引用信息 +const clearQuoteInfo = () => { + state.value.quoteInfo = null } const actionWithdraw = (item) => { @@ -938,6 +976,27 @@ onUnmounted(() => { .footBox { min-height: 162rpx; background-color: #fff; + + .quote-area { + margin: 4rpx 0 0 0; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + overflow: hidden; + width: 100%; + span { + display: -webkit-inline-box; + text-overflow: ellipsis; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + width: 100%; + } + img { + margin: 0 0 0 30rpx; + flex-shrink: 0; + } + } } .load-toolbar { @@ -1084,6 +1143,7 @@ onUnmounted(() => { text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; + overflow: hidden; } } @@ -1140,6 +1200,10 @@ onUnmounted(() => { } .quillBox { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; :deep(.ql-clipboard) { position: relative; opacity: 0; diff --git a/src/uni_modules/tmui/locale/zh-Hans.json b/src/uni_modules/tmui/locale/zh-Hans.json index e2d6866..ad991eb 100644 --- a/src/uni_modules/tmui/locale/zh-Hans.json +++ b/src/uni_modules/tmui/locale/zh-Hans.json @@ -149,5 +149,6 @@ "button.multiple.choice": "多选", "button.text.close": "关闭", "choose.deps.all": "全部", - "choose.deps.current": "当前" + "choose.deps.current": "当前", + "msg.type": "图片" }