customer_web/src/views/HomePage.vue

<template>
  <div id="index">
    <div class="one">
      <a-image :src="head" width="100%" :preview="false" />
    </div>
    <div class="two">
      <div class="left">
        <div class="left_1" ref="scrollRef">
          <a-spin size="large" :spinning="spinning">
            <div class="chat" v-for="(item, index) in list" :key="index" :class="[item.user ? 'message_right' : 'message_left']">
              <div class="chat_right" v-if="item.user">
                <span>{{ item.content || '暂无内容' }}</span>
              </div>
              <div class="chat_left" v-else>
                <span>{{ item.content || '暂无内容' }}</span>
              </div>
            </div>
            <div class="time">
              <p>{{ time }}</p>
            </div>
            <div class="kf">
              <div class="kf_1">
                <a-avatar :src="kf" />
              </div>
              <div class="kf_2">您好，小智正在为您服务</div>
            </div>
            <div class="chat" v-for="(item, index) in messageList" :key="index" :class="[item.user ? 'message_right' : 'message_left']">
              <div class="chat_right" v-if="item.user">
                <span>{{ item.content || '暂无内容' }}</span>
              </div>
              <div class="chat_left" v-else>
                <span>{{ item.content || '暂无内容' }}</span>
              </div>
            </div>
          </a-spin>
        </div>
        <div class="left_2">
          <div class="search"></div>
          <div class="text">
            <a-textarea :bordered="false" v-model:value="text" placeholder="请输入您的问题" allow-clear :auto-size="{ minRows: 4, maxRows: 5 }" />
          </div>
          <div class="send">
            <span>shift+enter换行，enter发送</span>
            <a-button type="primary" @click="onSend">发送</a-button>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right_1">
          <div class="title">
            <div class="title_1">常见问题</div>
            <div class="title_2" @click="toChange"><SyncOutlined /> <span>换一批</span></div>
          </div>
          <div class="list">
            <div class="list_1" v-for="(item, index) in problemList" :key="index" @click="toSend(item)">
              <div class="index">{{ index + 1 }}</div>
              <div class="content">{{ item.content || '暂无内容' }}</div>
            </div>
          </div>
        </div>
        <div class="right_1">
          <div class="title">
            <div class="title_1">历史记录</div>
            <div class="title_2" @click="toDel"><DeleteOutlined /> <span>清空</span></div>
          </div>
          <div class="list">
            <div class="list_2" v-for="(item, index) in historyList" :key="index" @click="toSend(item)">
              <div class="content">{{ item.content || '暂无内容' }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import moment from 'moment'
// 图片引入
import head from '/images/head-bg.png'
import kf from '/images/kf.png'
import { DeleteOutlined, SyncOutlined } from '@ant-design/icons-vue'
const user = ref({ id: '1' })
const time = computed(() => moment().format('YYYY-MM-DD HH:mm:ss'))
const text = ref('')
// 最底部
const scrollRef = ref(null)
// 加载中
const spinning = ref(false)
// 聊天记录
const list = ref([
  { id: '1', content: '任务书提交不成功，显示暂未开启', time: '2024-09-20 11:13', user: user.value.id },
  { id: '2', content: '提供账号（身份证号码+密码）登录，确认项目名称以及是否填写完毕，提交。是二级代理商缓存的问题，最好使用360安全浏览器（极速模式），清理缓存，或使用笔记本电脑连接手机热点，然后等待30分钟左右再操作即可。', time: '2024-09-20 11:13' },
  { id: '3', content: '变更单位名称', time: '2024-09-20 11:13', user: user.value.id },
  { id: '4', content: '如果没有在研项目或有在研项目已结项，提供工商局变更手续扫描件发送至邮箱 3165837280@qq.com，并将最新营业执照上传至单位账号-信息维护中，可变更。如果有在研项目未结项，请联系咨询相关处室。', time: '2024-09-20 11:13' },
  { id: '5', content: '任务书提交后是否能修改？', time: '2024-09-20 11:13', user: user.value.id },
  { id: '6', content: '不能修改，只有审核不通过被退回时能修改。只要上方没有【保存】键都不能修改。', time: '2024-09-20 11:13' },
  { id: '7', content: '中省直单位的所属科技管理部门是否能选科技厅？', time: '2024-09-20 11:13', user: user.value.id },
  { id: '8', content: '如单位账号-单位性质处已显示中直或者省直，可直接选择科技厅（系统默认选择科技厅），中省直单位如单位性质处未选择中直或者省直，需联系系统后台，提供中省直财政预算代码，待确认无误后，可更改单位性质，可选科技厅。', time: '2024-09-20 11:13' }
])
// 常见问题
const problemList = ref([
  { id: '1', content: '任务书提交不成功，显示暂未开启' },
  { id: '2', content: '变更单位名称' },
  { id: '3', content: '任务书提交后是否能修改？' },
  { id: '4', content: '中省直单位的所属科技管理部门是否能选科技厅？' },
  { id: '5', content: '项目负责人注册时未找到本单位' },
  { id: '6', content: '任务书提交不成功，显示暂未开启' }
])
// 历史记录
const historyList = ref([
  { id: '1', content: '单位注册时名称写错，能修改吗？' },
  { id: '2', content: '用户名及密码找回' }
])
// 实时记录
const messageList = ref([])
// 请求
onMounted(async () => {
  spinning.value = true
  await search()
  spinning.value = false
})
const search = async () => {
  let res
  messageList.value.push({ content: 'Hi,很高兴为您服务，请问有什么需要帮助？', time: moment().format('YYYY-MM-DD HH:mm:ss') })
  await scrollToBottom()
}
// 发送问题
const toSend = async (item) => {
  spinning.value = true
  const info = { content: item.content, time: moment().format('YYYY-MM-DD HH:mm:ss'), user: user.value.id }
  messageList.value.push(info)
  await scrollToBottom()
  spinning.value = false
}
// 换一批
const toChange = () => {
  console.log('换一批')
}
// 清空
const toDel = () => {
  console.log('清空')
}
// 发送
const onSend = async () => {
  spinning.value = true
  const info = { content: text.value, time: moment().format('YYYY-MM-DD HH:mm:ss'), user: user.value.id }
  messageList.value.push(info)
  await scrollToBottom()
  spinning.value = false
}
// 滚动到最底部
const scrollToBottom = () => {
  if (scrollRef.value) {
    scrollRef.value.scrollTo({ top: scrollRef.value.scrollHeight, behavior: 'smooth' })
  }
}
</script>
<style scoped lang="scss">
.one {
  width: 100%;
}
.two {
  display: flex;
  height: 91vh;
  width: 100%;
  .left {
    width: 80%;
    height: 100%;
    .left_1 {
      padding: 16px;
      height: 690px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      overflow: auto;
      background: url(/images/chat-bg.png) no-repeat bottom right #f6f9fb;
      .chat {
        .chat_left {
          background-color: #fff;
          border-radius: 0 15px 15px 15px;
          padding: 10px 20px;
          font-size: 16px;
          max-width: 560px;
        }
        .chat_right {
          max-width: 560px;
          background: rgba(0, 119, 255, 0.644);
          padding: 10px 20px;
          font-size: 16px;
          border-radius: 15px 0 15px 15px;
          color: #fff;
        }
      }
      .message_left {
        display: flex;
        justify-content: flex-start;
        margin: 10px 0;
      }
      .message_right {
        display: flex;
        justify-content: flex-end;
        margin: 10px 0;
      }
      .time {
        text-align: center;
        padding: 10px;
        p {
          display: inline-block;
          height: 26px;
          line-height: 26px;
          text-align: center;
          background-color: #d9e1e6;
          border-radius: 4px;
          font-size: 12px;
          color: #fff;
          padding: 0 12px;
        }
      }
      .kf {
        position: relative;
        text-align: center;
        .kf_1 {
          position: absolute;
          top: -20%;
          left: 49%;
        }
        .kf_2 {
          background: #fff;
          border-radius: 10px;
          display: inline-block;
          padding: 30px 10px 10px;
          line-height: 1;
          min-width: 200px;
        }
      }
    }
    .left_2 {
      height: 150px;
      background: #fff;
      border-top: 1px solid #f6f6f6;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      .send {
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        span {
          color: #ccc;
          margin: 0 10px 0 0;
        }
      }
    }
  }
  .right {
    background-color: #fff;
    width: 20%;
    height: 100%;
    .right_1 {
      border-bottom: 1px solid #ddd;
      padding: 10px 18px;
      .title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .title_1 {
          font-size: 20px;
          color: #333;
        }
        .title_2 {
          cursor: pointer;
          font-size: 14px;
          color: #999;
        }
      }
      .list {
        max-height: 530px;
        overflow: auto;
        .list_1 {
          display: flex;
          align-items: center;
          cursor: pointer;
          margin-bottom: 10px;
          .index {
            width: 20px;
            height: 20px;
            line-height: 20px;
            background-color: #bad7fc;
            text-align: center;
            color: #fff;
          }
          .content {
            font-size: 14px;
            color: #666;
            margin-left: 12px;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .list_2 {
          display: flex;
          flex-flow: wrap;
          .content {
            padding: 6px 10px;
            background-color: #f5f7fa;
            text-align: center;
            border-radius: 18px;
            font-size: 14px;
            color: #676767;
            margin-right: 6px;
            margin-bottom: 6px;
            cursor: pointer;
          }
        }
      }
    }
    .right_1:last-child {
      border-bottom: none;
    }
  }
}
@media screen and (max-width: 1280px) {
  #index {
    min-width: 1920px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1921px) {
  #index {
    max-width: 1920px;
    margin: 0 auto;
  }
}
/* 自定义整个滚动条 */
::-webkit-scrollbar {
  width: 5px; /* 滚动条宽度 */
}

/* 自定义滚动条的滑块（thumb） */
::-webkit-scrollbar-thumb {
  background: #cfd6dd; /* 滑块颜色 */
}
/* 当hover或active状态时，自定义滑块的颜色 */
::-webkit-scrollbar-thumb:hover {
  background: #cfd6dd;
}
</style>