diff --git a/dist/dev/mp-weixin/common/libraries/public.js b/dist/dev/mp-weixin/common/libraries/public.js index 3b3619d..28e8931 100644 --- a/dist/dev/mp-weixin/common/libraries/public.js +++ b/dist/dev/mp-weixin/common/libraries/public.js @@ -2,4 +2,11 @@ function formatPhoneNumber(phone) { return phone ? phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") : ""; } +const quickActions = [ + { label: "我的账单", message: "请帮我查询我的账单信息", icon: "FWJF.svg" }, + { label: "我要报修", message: "我要报修", icon: "FWJF.svg" }, + { label: "工单查询", message: "请帮我查询我的工单", icon: "GDCX.svg" }, + { label: "社区服务", message: "请提供社区服务信息", icon: "QBGL.svg" } +]; exports.formatPhoneNumber = formatPhoneNumber; +exports.quickActions = quickActions; diff --git a/dist/dev/mp-weixin/pages/ai/chat.js b/dist/dev/mp-weixin/pages/ai/chat.js index 30a3801..a70cd8c 100644 --- a/dist/dev/mp-weixin/pages/ai/chat.js +++ b/dist/dev/mp-weixin/pages/ai/chat.js @@ -4,6 +4,7 @@ require("../../common/libraries/request.js"); const common_store_useWeAppAuthStore = require("../../common/store/useWeAppAuthStore.js"); require("../../common/store/useWorkStore.js"); const common_libraries_upload = require("../../common/libraries/upload.js"); +const common_libraries_public = require("../../common/libraries/public.js"); require("../../gen/Apis.js"); require("../../common/libraries/setTabBar.js"); require("../../common/libraries/apiLoading.js"); @@ -573,6 +574,10 @@ const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({ inputMessage.value = question; handleSendMessage(); }; + const handleQuickAction = (action) => { + inputMessage.value = action.message; + handleSendMessage(); + }; const handleConfirmation = (message, confirmation) => { if (message.selectedConfirmation !== void 0) { return; @@ -771,10 +776,13 @@ const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({ console.log("页面卸载,WebSocket连接已关闭"); } }); - common_vendor.onLoad(async () => { + common_vendor.onLoad(async (op) => { quickQuestionsData.value = await getQuickQuestions(); console.log("页面加载时已获取开场白按钮数据:", quickQuestionsData.value.length); getHistoryMessages(1); + if (op == null ? void 0 : op.message) { + handleQuickAction(op); + } }); return (_ctx, _cache) => { return common_vendor.e({ @@ -888,32 +896,39 @@ const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({ }), i: common_vendor.o(chooseImage) } : {}) : {}, { - j: common_vendor.o(($event) => isInputFocused.value = true), - k: common_vendor.o(($event) => isInputFocused.value = false), - l: common_vendor.o(handleSendMessage), - m: inputMessage.value, - n: common_vendor.o(($event) => inputMessage.value = $event.detail.value), - o: !inputMessage.value.trim() && !isInputFocused.value && selectedImages.value.length === 0 + j: common_vendor.f(common_vendor.unref(common_libraries_public.quickActions), (action, index, i0) => { + return { + a: common_vendor.t(action.label), + b: index, + c: common_vendor.o(($event) => handleQuickAction(action), index) + }; + }), + k: common_vendor.o(($event) => isInputFocused.value = true), + l: common_vendor.o(($event) => isInputFocused.value = false), + m: common_vendor.o(handleSendMessage), + n: inputMessage.value, + o: common_vendor.o(($event) => inputMessage.value = $event.detail.value), + p: !inputMessage.value.trim() && !isInputFocused.value && selectedImages.value.length === 0 }, !inputMessage.value.trim() && !isInputFocused.value && selectedImages.value.length === 0 ? { - p: common_vendor.p({ + q: common_vendor.p({ type: "camera", size: "24", color: "#666" }), - q: common_vendor.o(chooseImage) + r: common_vendor.o(chooseImage) } : {}, { - r: (inputMessage.value.trim() || isInputFocused.value || selectedImages.value.length > 0) && !loading.value + s: (inputMessage.value.trim() || isInputFocused.value || selectedImages.value.length > 0) && !loading.value }, (inputMessage.value.trim() || isInputFocused.value || selectedImages.value.length > 0) && !loading.value ? { - s: common_vendor.p({ + t: common_vendor.p({ type: "paperplane-filled", size: "20", color: "#fff" }), - t: common_vendor.o(handleSendMessage) + v: common_vendor.o(handleSendMessage) } : {}, { - v: loading.value + w: loading.value }, loading.value ? { - w: common_vendor.p({ + x: common_vendor.p({ type: "spinner-cycle", size: "20", color: "#ccc" diff --git a/dist/dev/mp-weixin/pages/ai/chat.json b/dist/dev/mp-weixin/pages/ai/chat.json index 832d9d0..cab5d4c 100644 --- a/dist/dev/mp-weixin/pages/ai/chat.json +++ b/dist/dev/mp-weixin/pages/ai/chat.json @@ -1,5 +1,6 @@ { "navigationBarTitleText": "客服服务", + "enablePullDownRefresh": true, "usingComponents": { "uni-icons": "../../uni_modules/uni-icons/components/uni-icons/uni-icons" } diff --git a/dist/dev/mp-weixin/pages/ai/chat.wxml b/dist/dev/mp-weixin/pages/ai/chat.wxml index acf2ece..0e73b6b 100644 --- a/dist/dev/mp-weixin/pages/ai/chat.wxml +++ b/dist/dev/mp-weixin/pages/ai/chat.wxml @@ -1 +1 @@ -{{line.a}}{{question.a}}{{message.C}}{{c}}添加图片 \ No newline at end of file +{{line.a}}{{question.a}}{{message.C}}{{c}}添加图片{{action.a}} \ No newline at end of file diff --git a/dist/dev/mp-weixin/pages/ai/chat.wxss b/dist/dev/mp-weixin/pages/ai/chat.wxss index a777aed..a77eb3c 100644 --- a/dist/dev/mp-weixin/pages/ai/chat.wxss +++ b/dist/dev/mp-weixin/pages/ai/chat.wxss @@ -3,12 +3,11 @@ flex-direction: column; min-height: 100vh; width: 100vw; - background-color: #f5f5f5; } .chat-messages.data-v-b15798f7 { width: 100%; padding: 30rpx 20rpx; - padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); + padding-bottom: calc(220rpx + env(safe-area-inset-bottom)); box-sizing: border-box; flex: 1; } @@ -19,59 +18,25 @@ margin-bottom: 30rpx; animation: fadeIn-b15798f7 0.3s ease-in; } -.message-item.user-message.data-v-b15798f7 { - justify-content: flex-end; +.ai-message.data-v-b15798f7 { align-items: flex-start; } -.message-item.user-message .message-content-wrapper.data-v-b15798f7 { - align-items: flex-end; -} -.message-item.user-message .message-content.data-v-b15798f7 { - background-color: #1c64f2; - color: #fff; - margin-right: 0; - flex-shrink: 0; -} -.message-item.user-message .message-content .message-images.data-v-b15798f7 { - margin-bottom: 0; -} -.message-item.user-message .message-content .message-images .message-image-item.data-v-b15798f7 { - border-radius: 8rpx; -} -.message-item.user-message .message-time.data-v-b15798f7 { - color: #999; - font-size: 22rpx; - margin-top: 6rpx; - text-align: right; - min-width: 80rpx; -} -.message-item.user-message .message-meta.data-v-b15798f7 { - display: flex; - align-items: center; - justify-content: flex-end; - margin-top: 6rpx; - gap: 8rpx; - flex-direction: row; -} -.message-item.ai-message.data-v-b15798f7 { +.ai-message .message-content-wrapper.data-v-b15798f7 { align-items: flex-start; } -.message-item.ai-message .message-content-wrapper.data-v-b15798f7 { - align-items: flex-start; -} -.message-item.ai-message .message-content.data-v-b15798f7 { - background-color: #fff; +.ai-message .message-content.data-v-b15798f7 { + background-color: #f5f5f5; color: #333; margin-left: 12rpx; margin-right: 0; flex-shrink: 0; } -.message-item.ai-message .message-time.data-v-b15798f7 { +.ai-message .message-time.data-v-b15798f7 { color: #999; font-size: 22rpx; min-width: 80rpx; } -.message-item.ai-message .message-meta.data-v-b15798f7 { +.ai-message .message-meta.data-v-b15798f7 { display: flex; align-items: center; justify-content: flex-start; @@ -80,10 +45,44 @@ margin-left: 12rpx; flex-direction: row; } -.message-item.ai-message .message-avatar.data-v-b15798f7 { +.ai-message .message-avatar.data-v-b15798f7 { margin-right: 0; flex-shrink: 0; } +.user-message.data-v-b15798f7 { + justify-content: flex-end; + align-items: flex-start; +} +.user-message .message-content-wrapper.data-v-b15798f7 { + align-items: flex-end; +} +.user-message .message-content.data-v-b15798f7 { + background-color: #1c64f2; + color: #fff; + margin-right: 0; + flex-shrink: 0; +} +.user-message .message-content .message-images.data-v-b15798f7 { + margin-bottom: 20rpx; +} +.user-message .message-content .message-images .message-image-item.data-v-b15798f7 { + border-radius: 8rpx; +} +.user-message .message-time.data-v-b15798f7 { + color: #999; + font-size: 22rpx; + margin-top: 6rpx; + text-align: right; + min-width: 80rpx; +} +.user-message .message-meta.data-v-b15798f7 { + display: flex; + align-items: center; + justify-content: flex-end; + margin-top: 6rpx; + gap: 8rpx; + flex-direction: row; +} @keyframes fadeIn-b15798f7 { from { opacity: 0; @@ -95,8 +94,8 @@ to { } } .message-avatar.data-v-b15798f7 { - width: 60rpx; - height: 60rpx; + width: 80rpx; + height: 80rpx; border-radius: 50%; overflow: hidden; flex-shrink: 0; @@ -134,6 +133,7 @@ to { word-wrap: break-word; word-break: break-all; box-sizing: border-box; + background-color: #1c64f2; } .message-content.loading.data-v-b15798f7 { opacity: 0.7; @@ -143,7 +143,6 @@ to { } .user-message .message-content.data-v-b15798f7:has(.message-images) { padding: 8rpx; - background-color: transparent; } .message-content view.data-v-b15798f7 { display: block; @@ -194,9 +193,9 @@ to { } .confirmation-btn.data-v-b15798f7 { width: 38rpx; - border-radius: 12rpx; - padding: 16rpx 32rpx; - font-size: 28rpx; + border-radius: 10rpx; + padding: 16rpx 22rpx; + font-size: 24rpx; line-height: 1.4; text-align: center; transition: all 0.2s ease; @@ -225,16 +224,16 @@ to { bottom: 0; left: 0; right: 0; - background-color: #fff; - border-top: 1px solid #e5e5e5; + background-color: #f8f8f8; + border-top: 1px solid #eee; padding: 20rpx 20rpx; - padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); + padding-bottom: calc(30rpx + env(safe-area-inset-bottom)); z-index: 100; } .input-container.data-v-b15798f7 { display: flex; align-items: center; - background-color: #f5f5f5; + background-color: #fff; border-radius: 50rpx; padding: 10rpx 20rpx; } @@ -271,7 +270,33 @@ to { } .image-preview-area.data-v-b15798f7 { margin-bottom: 20rpx; - padding: 0 20rpx; +} +.quick-actions-bar.data-v-b15798f7 { + display: flex; + flex-wrap: wrap; + gap: 16rpx; + padding: 0 0 16rpx 0; +} +.quick-action-btn.data-v-b15798f7 { + height: 60rpx; + padding: 0 24rpx; + background-color: #ffffff; + border: 1px solid #e5e5e5; + border-radius: 100rpx; + font-size: 23rpx; + color: #333333; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease; + white-space: nowrap; +} +.quick-action-btn.data-v-b15798f7:active { + transform: scale(0.98); + background-color: #f8f8f8; +} +.quick-action-btn text.data-v-b15798f7 { + display: block; } .image-preview-list.data-v-b15798f7 { display: flex; diff --git a/dist/dev/mp-weixin/pages/index/components/AiInput.js b/dist/dev/mp-weixin/pages/index/components/AiInput.js index 6c8ce93..e57fc63 100644 --- a/dist/dev/mp-weixin/pages/index/components/AiInput.js +++ b/dist/dev/mp-weixin/pages/index/components/AiInput.js @@ -1,6 +1,7 @@ "use strict"; const common_vendor = require("../../../common/vendor.js"); require("../../../common/libraries/getPageConfig.js"); +const common_libraries_public = require("../../../common/libraries/public.js"); require("../../../common/store/useWeAppAuthStore.js"); require("../../../gen/Apis.js"); require("../../../common/libraries/request.js"); @@ -18,6 +19,11 @@ if (!Math) { const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({ __name: "AiInput", setup(__props) { + const handleAiPage = (i) => { + common_vendor.index.navigateTo({ + url: `/pages/ai/chat?message=${i == null ? void 0 : i.message}` + }); + }; const handleInputChange = () => { common_vendor.index.navigateTo({ url: "/pages/ai/chat" @@ -30,7 +36,15 @@ const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({ size: "20", color: "#666" }), - b: common_vendor.o(handleInputChange) + b: common_vendor.o(handleInputChange), + c: common_vendor.f(common_vendor.unref(common_libraries_public.quickActions), (i, index, i0) => { + return { + a: `/static/svg/${i.icon}`, + b: common_vendor.t(i.label), + c: `item_${index}`, + d: common_vendor.o(($event) => handleAiPage(i), `item_${index}`) + }; + }) }; }; } diff --git a/dist/dev/mp-weixin/pages/index/components/AiInput.wxml b/dist/dev/mp-weixin/pages/index/components/AiInput.wxml index 4dbddc8..780508a 100644 --- a/dist/dev/mp-weixin/pages/index/components/AiInput.wxml +++ b/dist/dev/mp-weixin/pages/index/components/AiInput.wxml @@ -1 +1 @@ -HI,遇到什么问题了,可以问我哦~ 点击联系在线客服 房屋缴费 工单查询 房屋绑定 钱包 \ No newline at end of file +HI,遇到什么问题了,可以问我哦~ 点击联系在线客服 {{i.b}} \ No newline at end of file diff --git a/dist/dev/mp-weixin/static/svg/ai_avatar.svg b/dist/dev/mp-weixin/static/svg/ai_avatar.svg new file mode 100644 index 0000000..7d7d81e --- /dev/null +++ b/dist/dev/mp-weixin/static/svg/ai_avatar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/common/libraries/public.ts b/src/common/libraries/public.ts index d579410..f7e72fe 100644 --- a/src/common/libraries/public.ts +++ b/src/common/libraries/public.ts @@ -1,3 +1,9 @@ +export interface QuickAction { + label: string // 按钮显示文字 + message: string // 点击后发送的消息内容 + icon: string // 按钮图标 +} + export const monthsDifferenceEndDay = (str: string, num: number) => { // 获取当前日期 const currentDate = new Date(str) @@ -75,3 +81,10 @@ export const onSplitArray = (val: string, type: string) => { export function formatPhoneNumber(phone: string) { return phone ? phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : '' } + +export const quickActions: QuickAction[] = [ + { label: '我的账单', message: '请帮我查询我的账单信息',icon:"FWJF.svg" }, + { label: '我要报修', message: '我要报修',icon:"FWJF.svg" }, + { label: '工单查询', message: '请帮我查询我的工单',icon:"GDCX.svg" }, + { label: '社区服务', message: '请提供社区服务信息',icon:"QBGL.svg" } +] \ No newline at end of file diff --git a/src/pages.json b/src/pages.json index 10e7f8f..be24d46 100644 --- a/src/pages.json +++ b/src/pages.json @@ -37,7 +37,8 @@ { "path": "pages/ai/chat", "style": { - "navigationBarTitleText": "客服服务" + "navigationBarTitleText": "客服服务", + "enablePullDownRefresh": true } }, { diff --git a/src/pages/ai/chat.vue b/src/pages/ai/chat.vue index c862000..128187e 100644 --- a/src/pages/ai/chat.vue +++ b/src/pages/ai/chat.vue @@ -9,7 +9,7 @@ :class="message.role === 'user' ? 'user-message' : 'ai-message'" > - + @@ -229,6 +229,7 @@ import dayjs from 'dayjs' import relativeTime from 'dayjs/plugin/relativeTime' import 'dayjs/locale/zh-cn' import { upload } from '@/common/libraries/upload' +import { quickActions,QuickAction } from '@/common/libraries/public' // 配置dayjs dayjs.extend(relativeTime) @@ -251,11 +252,6 @@ interface Message { } } -// 快捷按钮接口定义 -interface QuickAction { - label: string // 按钮显示文字 - message: string // 点击后发送的消息内容 -} const auth = useWeAppAuthStore() const inputMessage = ref('') @@ -287,13 +283,7 @@ const currentOffset = ref(0) // 当前偏移量 const quickQuestionsData = ref([]) // 存储开场白数据 const lastMessageContent = ref('') // 用于防止重复显示相同的消息 -// 快捷按钮数据定义 -const quickActions: QuickAction[] = [ - { label: '我的账单', message: '请帮我查询我的账单信息' }, - { label: '我要报修', message: '我要报修' }, - { label: '工单查询', message: '请帮我查询我的工单' }, - { label: '社区服务', message: '请提供社区服务信息' } -] + // 获取开场白按钮数据 const getQuickQuestions = async () => { @@ -1285,13 +1275,16 @@ onUnmounted(() => { }) // 页面加载时获取历史记录和开场白 -onLoad(async () => { +onLoad(async (op) => { // 始终获取开场白数据 quickQuestionsData.value = await getQuickQuestions() console.log('页面加载时已获取开场白按钮数据:', quickQuestionsData.value.length) // 获取历史记录 getHistoryMessages(1) + if(op?.message){ + handleQuickAction(op as QuickAction) + } }) @@ -1414,8 +1407,8 @@ onLoad(async () => { } .message-avatar { - width: 60rpx; - height: 60rpx; + width: 80rpx; + height: 80rpx; border-radius: 50%; overflow: hidden; flex-shrink: 0; @@ -1530,9 +1523,9 @@ onLoad(async () => { .confirmation-btn { width: 38rpx; - border-radius: 12rpx; - padding: 16rpx 32rpx; - font-size: 28rpx; + border-radius: 10rpx; + padding: 16rpx 22rpx; + font-size: 24rpx; line-height: 1.4; text-align: center; transition: all 0.2s ease; diff --git a/src/pages/index/components/AiInput.vue b/src/pages/index/components/AiInput.vue index 4757f6d..c943fa4 100644 --- a/src/pages/index/components/AiInput.vue +++ b/src/pages/index/components/AiInput.vue @@ -17,10 +17,16 @@ - + + + + {{ i.label }} + + + @@ -50,6 +50,12 @@