From 9bee4f48db0c5b99b5683545fac737856d94d082 Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期三, 23 四月 2025 11:34:39 +0800
Subject: [PATCH] 修改联系我们
---
src/components/CustomerService.vue | 213 ++++++----------------------------------------------
1 files changed, 26 insertions(+), 187 deletions(-)
diff --git a/src/components/CustomerService.vue b/src/components/CustomerService.vue
index 883bc3c..ae109af 100644
--- a/src/components/CustomerService.vue
+++ b/src/components/CustomerService.vue
@@ -1,196 +1,35 @@
<template>
- <div class="bg-white w-full h-[600px] shadow-lg rounded-lg flex flex-col">
- <!-- 椤堕儴鏍囬鏍� -->
- <div class="h-14 bg-white border-b flex items-center px-4 justify-between">
- <div class="flex items-center gap-2">
- <el-avatar :size="32" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
- <div>
- <div class="text-base font-medium">宸ユ晥姹囪仛骞冲彴瀹㈡湇</div>
- <div class="text-xs text-gray-400">鍦ㄧ嚎</div>
- </div>
- </div>
- <div class="flex items-center gap-2">
- <el-button type="primary" plain size="small" @click="endChat">缁撴潫浼氳瘽</el-button>
- </div>
- </div>
-
- <!-- 鑱婂ぉ鍐呭鍖哄煙 -->
- <div class="flex-1 bg-[#f9f9f9] p-4 overflow-y-auto" ref="chatContainer">
- <div class="flex flex-col gap-4">
- <!-- 绯荤粺娑堟伅 -->
- <div class="text-center text-gray-400 text-sm">
- <span>{{ currentTime }}</span>
- </div>
-
- <!-- 娑堟伅鍒楄〃 -->
- <div v-for="(message, index) in messages" :key="index">
- <!-- 瀹㈡湇娑堟伅 -->
- <div v-if="message.type === 'service'" class="flex items-start gap-2">
- <el-avatar :size="36" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
- <div class="max-w-[70%]">
- <div class="bg-white rounded-lg p-3 shadow-sm">
- {{ message.content }}
- </div>
- </div>
- </div>
-
- <!-- 鐢ㄦ埛娑堟伅 -->
- <div v-else class="flex items-start gap-2 flex-row-reverse">
- <el-avatar :size="36" :src="userAvatar" />
- <div class="max-w-[70%]">
- <div class="bg-primary text-white rounded-lg p-3 shadow-sm">
- {{ message.content }}
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <!-- 蹇嵎鏈嶅姟鎸夐挳 -->
- <!-- <div class="bg-white px-4 py-2 border-t grid grid-cols-4 gap-2">
- <div v-for="(service, index) in quickServices" :key="index"
- class="flex items-center justify-center gap-2 p-2 hover:bg-gray-50 cursor-pointer rounded-lg"
- @click="selectQuickService(service)">
- <el-icon><component :is="service.icon" /></el-icon>
- <span class="text-sm">{{ service.name }}</span>
- </div>
- </div> -->
-
- <!-- 搴曢儴宸ュ叿鏍忓拰杈撳叆妗� -->
- <div class="h-40 bg-white border-t p-4">
- <!-- 宸ュ叿鏍� -->
- <div class="flex items-center gap-4 mb-2">
- <el-tooltip content="琛ㄦ儏" placement="top">
- <el-button text>
- <el-icon><ChatRound /></el-icon>
- </el-button>
- </el-tooltip>
- <el-tooltip content="鍥剧墖" placement="top">
- <el-button text>
- <el-icon><PictureFilled /></el-icon>
- </el-button>
- </el-tooltip>
- <el-tooltip content="鏂囦欢" placement="top">
- <el-button text>
- <el-icon><Document /></el-icon>
- </el-button>
- </el-tooltip>
- <el-tooltip content="璇勪环" placement="top">
- <el-button text>
- <el-icon><Star /></el-icon>
- </el-button>
- </el-tooltip>
- </div>
-
- <!-- 杈撳叆妗� -->
- <div class="flex flex-col gap-2">
- <el-input
- v-model="messageInput"
- type="textarea"
- :rows="2"
- placeholder="璇疯緭鍏ユ秷鎭�..."
- resize="none"
- @keyup.enter.native="sendMessage"
- />
- <div class="flex justify-end">
- <el-button type="primary" @click="sendMessage">鍙戦��</el-button>
- </div>
- </div>
- </div>
- </div>
+ <div class="bg-white">
+ <iframe ref="iframeRef" :src="url" class="w-full h-full border-none overflow-hidden"></iframe>
+ </div>
</template>
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { ChatRound, PictureFilled, Document, Star, Service, Goods, Van, QuestionFilled } from '@element-plus/icons-vue'
+<script setup lang="ts" name="CustomerService">
+const emit = defineEmits(['close']);
-interface Message {
- type: 'user' | 'service'
- content: string
- time: string
-}
+import { ref, onMounted } from 'vue';
+import { ChildRegister } from '@/utils/iframeCall';
+const getUrl = () => {
+ const isDev = import.meta.env.DEV;
+ if (isDev) {
+ return 'http://localhost:5679';
+ }
+ return 'http://www.xpump.net/iie-mobile?v=132323';
+};
-interface QuickService {
- name: string
- icon: string
- action: string
-}
+const url = getUrl();
-const messageInput = ref('')
-const messages = ref<Message[]>([
- {
- type: 'service',
- content: '鎮ㄥソ锛屽鏈嶆櫤鑳藉姪鐞嗕负鎮ㄦ湇鍔★紒',
- time: '20:45'
- },
- {
- type: 'service',
- content: '鎴戜竴鐩村湪杩欙紝鏈夐棶棰樺彲浠ラ殢鏃跺挩璇㈠摝~',
- time: '20:45'
- }
-])
-
-const quickServices = [
- { name: '鎴戣鍌崟', icon: 'Van', action: 'order_tracking' },
- { name: '浠锋牸淇濇姢', icon: 'Goods', action: 'price_protection' },
- { name: '閫�鎹�/鍞悗', icon: 'Service', action: 'after_sales' },
- { name: '鍜ㄨ甯姪', icon: 'QuestionFilled', action: 'help' }
-]
-
-const userAvatar = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
-const currentTime = new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
-
-const sendMessage = () => {
- if (!messageInput.value.trim()) return
-
- // 娣诲姞鐢ㄦ埛娑堟伅
- messages.value.push({
- type: 'user',
- content: messageInput.value,
- time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
- })
-
- // 妯℃嫙瀹㈡湇鑷姩鍥炲
- setTimeout(() => {
- messages.value.push({
- type: 'service',
- content: '鎮ㄧ殑闂鎴戝凡缁忔敹鍒帮紝璇风◢绛夌墖鍒伙紝鎴戜細灏藉揩涓烘偍瑙ｇ瓟銆�',
- time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
- })
- }, 1000)
-
- messageInput.value = ''
-}
-
-const selectQuickService = (service: QuickService) => {
- messages.value.push({
- type: 'user',
- content: service.name,
- time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
- })
-}
-
-const endChat = () => {
- // 瀹炵幇缁撴潫浼氳瘽鐨勯�昏緫
- messages.value.push({
- type: 'service',
- content: '鎰熻阿鎮ㄧ殑鍜ㄨ锛屽鏋滆繕鏈夊叾浠栭棶棰橀殢鏃舵壘鎴戝摝~',
- time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
- })
-}
+const iframeRef = ref<HTMLIFrameElement>();
onMounted(() => {
- // 鍙互鍦ㄨ繖閲屾坊鍔犲垵濮嬪寲閫昏緫
-})
+ window.addEventListener('message', (event) => {
+ if (event.data.type === 'close') {
+ emit('close');
+ } else if (event.data.type === 'childIsReady') {
+ console.log('馃殌 ~ child is ready',);
+ ChildRegister.registerNotifyFunction();
+ }
+ });
+});
</script>
-
-<style scoped>
-:deep(.el-textarea__inner) {
- resize: none;
-}
-
-.bg-primary {
- background-color: #409EFF;
-}
-</style>
\ No newline at end of file
+<style scoped lang="scss"></style>
--
Gitblit v1.9.3