customAgent/src/components/leave-message.vue

<template>
  <div class="leave-box" v-if="tokenExist" :class="elder ? 'elder-wrapper' : ''">
    <div class="leave-message" v-if="isShow">
      <van-popup
        class="leave-message-popup-box an-move-up"
        v-model:show="isShow"
        :close-on-click-overlay="false"
      >
        <div class="leave-message-box">
          <div class="leave-message-cont">
            <div class="leave-message-title">感谢您选择神厨小福贵，<br />请输入您的留言：</div>
            <div class="leave-message-textarea">
              <textarea
                class="input-textarea"
                placeholder="请输入您的留言（字数不超过200字）"
                maxlength="200"
                @blur="textareaBlur"
                v-model.trim="leaveMessageCont"
              ></textarea>
            </div>
          </div>
          <div class="leave-message-btn">
            <div class="leave-message-pos flex flex-align-center flex-pack-justify before-top">
              <button class="leave-message-cancel" @click="cancelFn">取消</button>
              <button class="leave-message-define" @click="leaveMessage">留言</button>
            </div>
          </div>
          <div class="leave-message-loading flex flex-align-center" v-if="submitLoading">
            <van-loading type="spinner"></van-loading>
          </div>
        </div>
      </van-popup>
    </div>
    <div class="success-leave-message" v-if="isSuccessShow">
      <van-popup
        class="leave-message-popup-box"
        v-model:show="isSuccessShow"
        :close-on-click-overlay="false"
      >
        <div class="leave-message-box">
          <div class="success-icon-box">
            <div class="success-icon"></div>
            <div class="success-tips">
              <template v-if="weappSource.includes(source)">
                <div class="success-tips-title">留言已提交，感谢您的关注。</div>
                您可在 <span class="bold">2个自然日</span> 内点击神厨小福贵小程序 -<span
                  class="highlight-blue"
                  >【我的】</span
                >- 右上角<span class="highlight-blue">【消息】</span>模块查看回复内容。
              </template>
              <template v-else>
                <div class="success-tips-title">留言已提交，感谢您的关注。</div>
              </template>
            </div>
          </div>
          <div class="leave-message-btn">
            <div class="leave-message-pos before-top">
              <button class="success-leave-message-define" @click="successConfirm">确认</button>
            </div>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script setup>
import { ref, inject, onMounted } from 'vue'
import { showToast, showLoadingToast, closeToast } from 'vant'
import { Post } from '@/utils/https'
import utils from '@/utils/utils'

const props = defineProps({
  tokenExist: { type: Boolean, default: false },
  isMessageShow: { type: Boolean, default: false },
})

const store = inject('appStore', null)
const userId = inject('userId', ref(''))
const sessionId = inject('sessionId', ref(''))
const source = inject('source', ref(''))
const manualService = inject('manualService', ref('1'))
const elder = inject('elder', false)

const isShow = ref(false)
const submitLoading = ref(false)
const isSuccessShow = ref(false)
const leaveMessageCont = ref('')
const weappSource = [
  '95820000',
  '95830000',
  '95840000',
  '95850000',
  '95810000',
  '95900000',
  '95930000',
]

onMounted(() => {
  isShow.value = props.isMessageShow
})

function cancelFn() {
  store?.commit?.('set_leaveMessage', false)
}

function successConfirm() {
  isSuccessShow.value = false
  store?.commit?.('set_leaveMessage', false)
  utils.closeWindow()
}

function textareaBlur() {
  setTimeout(() => {
    const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
    window.scrollTo(0, Math.max(scrollHeight - 1, 0))
  }, 100)
}

function leaveMessage() {
  if (!leaveMessageCont.value) {
    showToast('请输入留言内容')
    return
  }

  const param = {
    fromFlag: 1,
    userId: userId.value || userId,
    sessionId: sessionId.value || sessionId,
    source: source.value || source,
    reqAndResType: '1',
    msgType: '1',
    msgText: leaveMessageCont.value,
    msgSource: manualService.value || manualService,
    cmd: 'commond',
    intents: null,
    timestamp: new Date().valueOf(),
  }

  submitLoading.value = true

  Post('HumanChat/report', param)
    .then((res) => {
      if (res.code && res.code !== 0) {
        submitLoading.value = false
        showToast(res.msg)
        return
      }
      store?.commit?.('set_isLeaveMessageSuccess', true)
      setTimeout(() => {
        submitLoading.value = false
        isShow.value = false
        isSuccessShow.value = true
      }, 1000)
      exitMessage()
    })
    .catch((error) => {
      submitLoading.value = false
      console.log(error)
    })
}

function exitMessage() {
  const param = { userId: userId.value || userId }
  showLoadingToast({ message: '退出中...', duration: 0, loadingType: 'spinner', forbidClick: true })
  Post('HumanChat/closeEvent', param)
    .then(() => closeToast())
    .catch(console.log)
}
</script>

<style scoped>
/* ... 样式保持不变 ... */
</style>