修改联系我们

tanghaolin

8 天以前 9bee4f48db0c5b99b5683545fac737856d94d082

 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> 
<style scoped lang="scss"></style>