aiwen/src/pages/student/consult.vue

<script setup lang="ts">
import type { type_dyaw_xlfw_zxhd, type_dyaw_xlfw_zxhd_log } from '~/types';
import user from '~/store/user';
import { createSocket, socketSend } from '~/utils/ws';
import type { TSocketRes } from '~/utils/ws';
import { formatTimestamp } from '~/utils/time'

const router = useRouter()
let teacher
const SessionConsultTeacher = sessionStorage.getItem('consult_teacher')
if (SessionConsultTeacher !== null) {
  teacher = JSON.parse(SessionConsultTeacher)
} else {
  router.back()
}

const dyaw_xlfw_zxhd: type_dyaw_xlfw_zxhd = (await request({
  url: '/dyaw/xlfw_zxhd/add',
  data: {
    dyaw_xlfw_zxhd: {
      dxz_stu_user_id: user.user_id,
      dxz_tea_user_id: teacher.user_id
    }
  }
})).data.one_info

const ChatAudioRef = $ref<typeof import('~/components/chat-audio/index.vue')['default']>()
let rateDialogVisible = $ref(false)
let endTime = $ref<string>()
let rateNum = $ref(5)
function handleClickEnd() {
  // ChatAudioRef && ChatAudioRef.open()
  endTime = getDatabaseTime(new Date())
  rateDialogVisible = true
}
function handleConfirmRate() {
  request({
    url: '/dyaw/xlfw_zxhd/edit',
    data: {
      dxz_id: dyaw_xlfw_zxhd.dxz_id,
      dyaw_xlfw_zxhd: {
        dxz_star: rateNum,
        dxz_star_datetime: endTime,
        dxz_status: '1'
      }
    }
  }).then(res => {
    if (res.code === '1') {
      rateDialogVisible = false
      router.back()
    }
  })
}

let infoList = $ref<Array<type_dyaw_xlfw_zxhd_log>>([])
let inputValue = $ref('')
let isSending = $ref(false)
let TinyRef = $ref<typeof import('~/components/tinymce-area/index.vue')['default']>()
async function handleClickSend() {
  if (isSending) return;
  isSending = true
  const reqDate = {
    dxz_id: dyaw_xlfw_zxhd.dxz_id,
    dxzl_stu_user_id: dyaw_xlfw_zxhd.dxz_stu_user_id,
    dxzl_stu_user_realname: dyaw_xlfw_zxhd.dxz_stu_user_realname,
    dxzl_tea_user_id: dyaw_xlfw_zxhd.dxz_tea_user_id,
    dxzl_tea_user_realname: dyaw_xlfw_zxhd.dxz_tea_user_realname,
    dxzl_last_msg_content: encodeURIComponent(inputValue),
    dxzl_type: inputValue.includes('><img') ? '2' : '1'
  }

  // infoList.push({
  //   create_user_id: user.user_id,
  //   create_dateline: Date.now().toString().slice(0, 10),

  //   ...reqDate
  // })
  TinyRef?.clear()
  // console.log('inputValue :>> ', inputValue);
  request({
    url: '/dyaw/xlfw_zxhd_log/add',
    data: {
      dyaw_xlfw_zxhd_log: reqDate
    }
  }).then(res => {
    if (res.code === '1') {
      const fullSendData = {
        create_user_id: user.user_id,
        create_dateline: Date.now().toString().slice(0, 10),
        ...reqDate,
        dxzl_id: `${res.data.insert_id}`
      }
      infoList.push(fullSendData)
      socketSend(ws, fullSendData)
      isSending = false
    }
  })
}

request({
  url: '/dyaw/xlfw_zxhd_log/index',
  data: {
    dxz_id: dyaw_xlfw_zxhd.dxz_id,
    limit: 100
  }
}).then(res => {
  if (res.code === '1') {
    infoList = res.data.page_data.reverse()
  }
})
const ws = createSocket(
  { teacher: teacher.user_id, student: user.user_id },
  {
    message(socketRes: TSocketRes<type_dyaw_xlfw_zxhd_log>) {
      if (socketRes.from_client_name.endsWith('teacher')) {
        infoList.push(socketRes.content)
      }
    }
  }
)

const scrollbarRef = $ref<HTMLElement>()
function scrollToBottom() {
  if (!scrollbarRef) return;
  const scrollHeight = scrollbarRef!.scrollHeight;
  scrollbarRef!.scrollTo(0, scrollHeight);
}
watch(
  () => (infoList),
  () => {
    nextTick(() => {
      scrollToBottom()
    })
  },
  {
    deep: true,
  }
)

</script>

<template>
  <div class="h-640px bg-hex-f2f2f295 flex justify-center divide-x">
    <div class="w-1000px h-full divide-y">
      <div class="bg-pink-300 flex justify-between h-48px items-center px-18px">
        <span class="text-lg px-1 tracking-wider">{{`${dyaw_xlfw_zxhd.dxz_tea_user_realname}老师正在为您服务`}}</span>
        <div class="text-pink-300 text-sm bg-white w-100px h-32px flex_center rounded-2xl cursor-pointer"
          @click="handleClickEnd">结束会话</div>
      </div>
      <div ref="scrollbarRef"
        class="bg-hex-fff8fb space-y-2 h-410px py-2 px-6 scrollbar scrollbar-thin scrollbar-thumb-rounded-md scrollbar-thumb-gray-200 scrollbar-track-transparent">
        <div class="w-full text-center text-sm">{{ formatTimestamp(dyaw_xlfw_zxhd.create_dateline) }} 开始沟通</div>
        <info-item v-for="item in infoList" :key="item.dxzl_id" :left="item.create_user_id === user.user_id"
          :d="item"></info-item>
      </div>
      <div class="bg-white h-180px p-5px flex flex-col justify-between">
        <!-- <div class="h-48px"></div>
        <el-input type="textarea"></el-input> -->
        <tinymce-area v-model="inputValue" ref="TinyRef"></tinymce-area>
        <div class="flex justify-end">
          <div class="bg-pink-300 text-sm text-white w-80px h-32px flex_center rounded-2xl cursor-pointer"
            @click="handleClickSend">发送</div>
        </div>
      </div>
    </div>
    <div
      class="w-400px h-full bg-white overflow-y-auto flex flex-col items-center px-30px py-4 divide-y scrollbar scrollbar-thin scrollbar-thumb-rounded-md scrollbar-thumb-gray-200 scrollbar-track-transparent">
      <div class="w-full"></div>
      <div>

      </div>
    </div>
  </div>

  <el-dialog v-model="rateDialogVisible" title="请评价" align-center width="405px">
    <p>于 {{ endTime }} 结束沟通</p>
    <div class="flex items-center my-4">
      <div>评价：</div>
      <el-rate size="large" v-model="rateNum"></el-rate>
    </div>
    <template #footer>
      <div class="flex_center">
        <el-button round type="primary" @click="handleConfirmRate">
          确认
        </el-button>
        <el-button round @click="rateDialogVisible = false">取消</el-button>
      </div>
    </template>

  </el-dialog>

  <chat-audio ref="ChatAudioRef"></chat-audio>
</template>

<style scoped lang="scss">

</style>