From 016bcbc267215c77bbc4480e7cead625159b0e70 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期一, 25 十一月 2024 17:24:27 +0800
Subject: [PATCH] 分享按钮建议生成二维码，手机扫码可以进入到详情页面
---
customer_list/common/static/fonts/ywiconfont/iconfont.ttf | 0
customer_list/common/static/fonts/ywiconfont/iconfont.woff | 0
src/components/chat/Chat.vue | 68 +++++++++++++++++++++++++++++-----
src/components/chat/components/playBar/PlayBar.vue | 3 -
src/layout/component/sidebar/SidebarOther.vue | 37 ++++++++++++++++++
customer_list/common/static/fonts/ywiconfont/iconfont.css | 6 +-
customer_list/common/static/fonts/ywiconfont/iconfont.woff2 | 0
7 files changed, 97 insertions(+), 17 deletions(-)
diff --git a/customer_list/common/static/fonts/ywiconfont/iconfont.css b/customer_list/common/static/fonts/ywiconfont/iconfont.css
index 9d5f85f..ce9e4e1 100644
--- a/customer_list/common/static/fonts/ywiconfont/iconfont.css
+++ b/customer_list/common/static/fonts/ywiconfont/iconfont.css
@@ -1,8 +1,8 @@
@font-face {
font-family: "ywifont"; /* Project id 4655417 */
- src: url('iconfont.woff2?t=1731921224815') format('woff2'),
- url('iconfont.woff?t=1731921224815') format('woff'),
- url('iconfont.ttf?t=1731921224815') format('truetype');
+ src: url('iconfont.woff2?t=1732515923924') format('woff2'),
+ url('iconfont.woff?t=1732515923924') format('woff'),
+ url('iconfont.ttf?t=1732515923924') format('truetype');
}
.ywifont {
diff --git a/customer_list/common/static/fonts/ywiconfont/iconfont.ttf b/customer_list/common/static/fonts/ywiconfont/iconfont.ttf
index cb8a556..dad02e7 100644
--- a/customer_list/common/static/fonts/ywiconfont/iconfont.ttf
+++ b/customer_list/common/static/fonts/ywiconfont/iconfont.ttf
Binary files differ
diff --git a/customer_list/common/static/fonts/ywiconfont/iconfont.woff b/customer_list/common/static/fonts/ywiconfont/iconfont.woff
index 6144a77..a117c3e 100644
--- a/customer_list/common/static/fonts/ywiconfont/iconfont.woff
+++ b/customer_list/common/static/fonts/ywiconfont/iconfont.woff
Binary files differ
diff --git a/customer_list/common/static/fonts/ywiconfont/iconfont.woff2 b/customer_list/common/static/fonts/ywiconfont/iconfont.woff2
index d83d4be..cd97c24 100644
--- a/customer_list/common/static/fonts/ywiconfont/iconfont.woff2
+++ b/customer_list/common/static/fonts/ywiconfont/iconfont.woff2
Binary files differ
diff --git a/src/components/chat/Chat.vue b/src/components/chat/Chat.vue
index 2e6bd2a..eec5621 100644
--- a/src/components/chat/Chat.vue
+++ b/src/components/chat/Chat.vue
@@ -1,7 +1,7 @@
<template>
<div class="flex h-full">
<div class="flex flex-col h-full flex-auto">
- <div ref="chatListDom" class="relative h-full flex flex-col items-center overflow-y-auto">
+ <div ref="chatListDom" class="relative h-full flex flex-col items-center overflow-y-auto" style="height: calc(100% - 50px)">
<span
class="more-loading absolute text-blue-400 left-[50%] translate-x-[-50%] cursor-pointer w-10"
v-loading="moreIsLoading"
@@ -84,7 +84,7 @@
class="absolute flex items-center bottom-0 group invisible"
>
<div
- class="bg-[#fff] flex items-center mr-4 space-x-2 flex-nowrap rounded-[6px] py-2 px-2 group-hover:visible"
+ class="bg-[#fff] flex items-center relative mr-4 space-x-2 flex-nowrap rounded-[6px] py-2 px-2 group-hover:visible"
>
<el-tooltip effect="dark" content="澶嶅埗" placement="top">
<div class="flex items-center justify-center size-[20px]">
@@ -113,6 +113,7 @@
</el-tooltip>
</div>
</div>
+
<template v-if="item.content?.values">
<div v-if="item.content.errCode === ErrorCode.Message" class="flex-column w-full">
<p class="text-red-500">
@@ -255,7 +256,10 @@
</div>
</div>
- <div class="sticky bottom-0 w-full p-6 bg-[rgb(247,248,250)] flex justify-center" v-if="!isSharePage && !isShareCheck">
+ <div
+ class="sticky bottom-0 w-full px-6 pt-12 pb-6 bg-[rgb(247,248,250)] flex justify-center"
+ v-if="!isSharePage && !isShareCheck"
+ >
<PlayBar
v-model:voicePageIsShow="voicePageIsShow"
:isTalking="isTalking"
@@ -271,13 +275,32 @@
<div class="sticky bottom-0 w-full p-6 bg-[rgb(247,248,250)] flex justify-center" v-if="isShareCheck"></div>
</div>
<CustomDrawer v-model:isShow="drawerIsShow" @updateChatInput="updateChatInput" />
+ <el-dialog
+ title="鍒嗕韩閾炬帴"
+ v-model="shareCodeIsShow"
+ width="25%"
+ center
+ modal-append-to-body
+ lock-scroll
+ :before-close="closeShareClick"
+ >
+ <div class="w100 h100 flex justify-center items-center flex-col">
+ <div class="qrcode h100" ref="qrcodeRef"></div>
+ <div class="h100 w100 flex flex-col justify-center items-center">
+ <span class="h100 text-[#8d8e99] text-[12px] mt-2">{{ shareCoderUrl }}</span>
+ <span class="text-[#1d86ff] text-[12px] cursor-pointer" @click="copyShareCodeClick">澶嶅埗</span>
+ </div>
+ </div>
+ </el-dialog>
</div>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus';
+import { findLast, orderBy } from 'lodash-es';
import moment from 'moment';
-import { computed, onActivated, onMounted, ref } from 'vue';
+import QRCode from 'qrcodejs2-fixes';
+import { computed, nextTick, onActivated, onMounted, ref } from 'vue';
import useClipboard from 'vue-clipboard3';
import FeedbackPanel from './components/FeedbackPanel.vue';
import { useAssistantContentOpt } from './hooks/useAssistantContentOpt';
@@ -303,11 +326,10 @@
isSharePage,
roomConfig,
} from '/@/stores/chatRoom';
+import { getCurrentPosition } from '/@/utils/brower';
import emitter from '/@/utils/mitt';
import { ErrorCode } from '/@/utils/request';
import { toMyFixed } from '/@/utils/util';
-import { findLast, orderBy } from 'lodash-es';
-import { getCurrentPosition } from '/@/utils/brower';
const chatWidth = '75%';
const voicePageIsShow = ref(false);
let isTalking = ref(false);
@@ -785,17 +807,43 @@
};
const isShareCheck = ref(false);
+const qrcodeRef = ref<HTMLElement | null>(null);
+const shareCodeIsShow = ref(false); //鏄惁寮圭獥鏄剧ず鍒嗕韩浜岀淮鐮�
+const shareCoderUrl = ref('');
const shareClick = async (item: ChatMessage) => {
item.isChecked = true;
shareCheckChange(true, item);
// 鐩墠鍙垎浜竴涓紝涓嶈繘鍏ュ閫夋ā寮忥紝鍒嗕韩澶氫釜
// isShareCheck.value = true;
-
+ shareCodeIsShow.value = true;
const url = await generateShareUrl();
- ElMessage.success('宸插鍒跺垎浜摼鎺�');
- toClipboard(url);
+ shareCoderUrl.value = url;
+ const qrCodeElement = document.querySelector('.qrcode');
+ // ElMessage.success('宸插鍒跺垎浜摼鎺�');
+ nextTick(() => {
+ (<HTMLElement>qrCodeElement && qrCodeElement).innerHTML = '';
+ new QRCode(qrCodeElement, {
+ text: url,
+ width: 100,
+ height: 100,
+ colorDark: '#000000',
+ colorLight: '#ffffff',
+ });
+ });
+ // toClipboard(url);
};
-
+//閾炬帴澶嶅埗
+const copyShareCodeClick = () => {
+ const url = shareCoderUrl.value;
+ if (!url) return;
+ toClipboard(url);
+ ElMessage.success('宸插鍒跺垎浜摼鎺�');
+};
+//鍏抽棴鍒嗕韩寮圭獥
+const closeShareClick = () => {
+ shareCodeIsShow.value = false;
+ resetShare();
+};
const shareCheckChange = (isChecked: boolean, item: ChatMessage) => {
const toFindRole = item.role === RoleEnum.user ? RoleEnum.assistant : RoleEnum.user;
diff --git a/src/components/chat/components/playBar/PlayBar.vue b/src/components/chat/components/playBar/PlayBar.vue
index 67fb6fa..70be667 100644
--- a/src/components/chat/components/playBar/PlayBar.vue
+++ b/src/components/chat/components/playBar/PlayBar.vue
@@ -218,9 +218,6 @@
});
const clearTextarea = () => {
inputValue.value = '';
- if (inputRef.value) {
- inputRef.value.value = '';
- }
};
const inputText = (text) => {
nextTick(() => {
diff --git a/src/layout/component/sidebar/SidebarOther.vue b/src/layout/component/sidebar/SidebarOther.vue
index b0767e9..6490b1d 100644
--- a/src/layout/component/sidebar/SidebarOther.vue
+++ b/src/layout/component/sidebar/SidebarOther.vue
@@ -32,6 +32,7 @@
<span class="use_name">{{ firstUserCharacter }}</span>
</div>
<div class="isShow_Profile" v-show="isShowExitLogin">
+ <div class="exit" @click="feedbackClick"><i class="ywifont ywicon-youxiang"></i> 鐢ㄦ埛鍙嶉</div>
<div class="exit" @click="logoutClick"><i class="ywifont ywicon-tuichu"></i> 閫�鍑虹櫥褰�</div>
</div>
</div>
@@ -91,8 +92,17 @@
</div>
</div>
<div class="expand-sidebar" @click="toggleSidebar" v-if="!isSharePage">
- <i class="text-[#fff] transition-all ywifont ywicon-zuoyoujiantou1" ></i>
+ <i class="text-[#fff] transition-all ywifont ywicon-zuoyoujiantou1"></i>
</div>
+ <el-dialog v-model="userFeedbackVisible" title="鐢ㄦ埛鍙嶉" width="500" :before-close="handleCloseFeedback">
+ <el-input v-model="userFeedbackText" :rows="8" type="textarea" placeholder="娆㈣繋璇磋浣犵殑鎯虫硶" />
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="handleCloseFeedback">鍙栨秷</el-button>
+ <el-button type="primary" @click="confirmFeedback" :disabled="is_input_title"> 纭� 瀹� </el-button>
+ </div>
+ </template>
+ </el-dialog>
</div>
</template>
@@ -165,6 +175,27 @@
gotoRoute({ name: 'AboutUs' });
};
//#endregion
+//#region ====================== 鐢ㄦ埛鍙嶉 ======================
+const userFeedbackVisible = ref(false);
+const userFeedbackText = ref('');
+const is_input_title = computed(() => {
+ return userFeedbackText.value == '' ? true : false;
+});
+const feedbackClick = () => {
+ userFeedbackVisible.value = true;
+};
+const handleCloseFeedback = () => {
+ userFeedbackVisible.value = false;
+};
+const confirmFeedback = () => {
+ const data = {
+ content: userFeedbackText.value,
+ contact: '鐢ㄦ埛鍙嶉',
+ }; //TODO 鍙戦�佺敤鎴峰弽棣�
+ handleCloseFeedback();
+};
+
+//#endregion
//#region ====================== 鏄剧ず/閫�鍑虹櫥褰� ======================
//鐧诲綍
const openLoginDlg = async () => {
@@ -182,6 +213,7 @@
isLoginStatus.value = false;
LoginInfo.remove();
};
+
const toggleExitLoginBtnRef = ref<HTMLDivElement>(null);
onClickOutside(toggleExitLoginBtnRef, () => {
@@ -358,6 +390,9 @@
padding: 16px 12px;
gap: 8px;
cursor: pointer;
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.04);
+ }
}
}
}
--
Gitblit v1.9.3