customAgent/src/components/business-handle.vue

<template>
  <div>
    <!-- <van-swipe style="height:30rem;margin-top:10rem" class="businessBox" vertical :scrollable="false" :autoplay="3000"
      :show-indicators="false">
      <van-swipe-item @click="swiperClick" v-for="(item, index) in businessHandleInfo.contents" :key="index">
        <div class="item">
          <img :src="getIconUrl(item.icon)" alt="" style="width:30rem;height:30rem;">
          <div class="item-content">
            <div class="line">{{ item.name }}</div>
            <van-icon name="arrow-down" />
          </div>
        </div>
      </van-swipe-item>
    </van-swipe> -->
    <van-popup
      v-model:show="Popupshow"
      teleport="body"
      round
      position="bottom"
      closeable
      :z-index="3000"
    >
      <div class="displayFlex">
        <div class="title">您有{{ displayInfo?.contents?.length || 0 }}个待办</div>
        <div class="popupContent">
          <div
            class="item popupContentItem"
            v-for="(item, index) in displayInfo.contents || []"
            :key="index"
            @click="richCallAnswer(item)"
          >
            <img
              src="@/assets/images/chat/todo-icon.svg"
              alt=""
              style="width: 22rem; height: 22rem"
            />
            <div class="item-content">
              <div>{{ item.name }}</div>
              <van-icon name="arrow" color="#5A9CFF" />
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { Icon, Swipe, SwipeItem, Popup } from 'vant'
import { useAppStore } from '@/store/app.js'

const props = defineProps({
  businessHandleInfo: { type: Object, default: () => ({}) },
  autoOpen: { type: Boolean, default: true },
})

const store = useAppStore()
const { userId, mescrollContent, manualService, businessHandleInfo: storeBusinessHandleInfo } = storeToRefs(store)

const Popupshow = ref(false)
const isBtnsubmit = ref(true)
const hasAutoOpened = ref(false)

const displayInfo = computed(() => {
  const fromProp = props.businessHandleInfo
  if (fromProp && Array.isArray(fromProp.contents) && fromProp.contents.length) return fromProp
  return storeBusinessHandleInfo.value || {}
})

function getIconUrl(icon) {
  try {
    return new URL(`../assets/images/${icon}.png`, import.meta.url).href
  } catch (e) {
    return ''
  }
}

function swiperClick() {
  Popupshow.value = true
}

function richCallAnswer(item) {
  const text = item.name
  const serialNumber = item.serialNumber
  const sessionId = item.sessionId

  const mdParmas = {
    userInfoId: userId.value,
    sessionId,
    serialNumber,
    clickTime: new Date().getTime()
  }
  Promise.resolve(store.updateClickTime?.(mdParmas)).catch(err => {
    console.error(err)
  })

  let sendParmas = {
    cmd: 'business-handle',
    reqAndResType: '1',
    msgText: '&' + text + '&',
    intentId: '',
    msgSource: manualService.value,
    realText: text,
    questionType: 6,
  }

  if (isBtnsubmit.value) {
    isBtnsubmit.value = false
    Popupshow.value = false
    scrollTopBody()
    const sending = store.sendingRobot(sendParmas)
    Promise.resolve(sending).then(() => {
      isBtnsubmit.value = true
    }).catch(err => {
      isBtnsubmit.value = true
      console.log(err)
    })
  }
}

function scrollTopBody() {
  setTimeout(() => {
    try {
      if (mescrollContent.value) {
        mescrollContent.value.scrollTop = mescrollContent.value.scrollHeight || 0
      }
    } catch (error) {
      console.log(error.message)
    }
  }, 300)
}
defineExpose({
  swiperClick
})
</script>

<style scoped lang="scss">
.businessBox {
  background: #fff;
  padding: 10rem;
  border-radius: 16rem 16rem 16rem 2rem;
}

.item {
  display: flex;
  justify-content: space-around;
}

.item > img {
  width: 30rem;
  height: 30rem;
  margin-right: 10rem;
}

.item-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  font-size: 15rem;
  i{
    padding-top: 4rem;
  }
}

.line {
  font-size: 14rem;
}

.displayFlex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 16rem 16rem 0rem 0rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16rem 16rem 0rem 16rem;
  gap: 24rem;
  width: 100vw;
  background: linear-gradient(180deg, #f0f8ff 0%, #f6f9ff 100%);
  .title {
    font-family: PingFang SC;
    font-size: 16rem;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    letter-spacing: 0rem;

    font-variation-settings: 'opsz' auto;
  }
}

.popupContent {
  display: flex;
  flex-direction: column;
  max-height: 300rem;
  overflow: auto;
  width: 100%;
  gap: 12rem;
  padding-bottom: 12rem;
}

.popupContentItem {
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.9);
  padding: 12px;
  gap: 12px;
  border-radius: 12px;
}
</style>