customAgent/src/components/quick-access.vue

<template>
  <div class="quick-access-box" :class="$elder ? 'elder-wrapper' : ''"
    v-if="quickData.activityList && quickData.activityList.length > 0">
    <div class="quick-btn-box an-move-left">
      <a class="btn-item opacity" href="javascript:;" v-for="(item, index) in normalActivityList" :key="index"
        @click.stop="quickBtnClick(item)" v-saclick="{
          clickName: 'quick_access',
          clickData: Object.assign({ buttonName: item.name }, saData),
        }">
        <!-- 开放标签 -->
        <!-- <wx-open-launch-weapp
          @click.stop="quickBtnClick(item)"
          v-if="item.addParams === '7'"
          class="mask-btn"
          id="launch-btn"
          :appid="isProd() ? 'wx68b00bbff4c69cc9' : 'wx0fe22fef352fafc1'"
          :username="isProd() ? 'gh_70448c19370c' : 'gh_4ac87cf1592a'"
          :path="item.url"
        >
          <script type="text/wxtag-template">
            <style>.btn {width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: rgba(255, 255, 255, 0);border: none;}
            </style>
            <button class="btn"></button>
          </script>
        </wx-open-launch-weapp> -->
        <div class="btn-icon" :data-type="item.category" :data-url="item.url" :data-params="item.funcData">
          <img class="quick_btn_icon" v-lazy="getIconUrl(item.content)" :alt="item.name" />
        </div>
        <div class="btn-name">{{ item.name }}</div>
      </a>
      <a v-if="$elder" class="btn-item opacity" href="javascript:;" @click.stop="fixedBtnClick($event, 0)">
        <div class="btn-icon">
          <img class="quick_btn_icon" src="../assets/images/human-guider.png" />
        </div>
        <div class="btn-name fixed-name">人工客服</div>
      </a>
      <a v-if="$elder && source != '95290000'" class="btn-item opacity" href="javascript:;"
        @click.stop="fixedBtnClick($event, 1)">
        <div class="btn-icon">
          <img class="quick_btn_icon" src="../assets/images/tel-guider.png" />
        </div>
        <div class="btn-name fixed-name">电话客服</div>
      </a>
    </div>

    <!-- 第二排特殊快捷入口 -->
    <div class="special-quick-btn-box an-move-left" v-if="specialActivityList && specialActivityList.length > 0">
      <a class="btn-item opacity" href="javascript:;" v-for="(item, index) in specialActivityList"
        :key="'special-' + index" @click.stop="specialBtnClick(item)" v-saclick="{
          clickName: 'special_quick_access',
          clickData: Object.assign({ buttonName: item.name }, saData),
        }">
        <div class="btn-icon" :data-type="item.category" :data-url="item.url" :data-params="item.funcData">
          <img class="quick_btn_icon" v-lazy="getIconUrl(item.content)" :alt="item.name" />
        </div>
        <div class="btn-name">{{ item.name }}</div>
      </a>
    </div>
  </div>
</template>

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

const store = inject('appStore', null)
const userId = inject('userId', ref(''))
const source = inject('source', ref(''))
const userInfo = inject('userInfo', ref({}))
const manualService = inject('manualService', ref('1'))
const mescrollContent = inject('mescrollContent', ref(null))
const elder = inject('elder', false)
const Socket = inject('Socket', {})

const quickData = ref({})

onMounted(() => {
  initQuick()
})

function initQuick() {
  let param = {
    paramKey: 'WELCOME_SPEECH',
    source: source.value,
    userInfoId: userId.value,
    entrance: store?.state?.entrance,
    txfModules: userInfo.value?.txfModules || '',
  }

  store
    ?.dispatch?.('post', { url: 'welcome/speech', data: param })
    .then((res) => {
      if (res.code && res.code != 0) {
        showToast(res.msg)
        return
      }
      quickData.value = res.data
    })
    .catch((error) => console.log(error))
}

const normalActivityList = computed(() => {
  return quickData.value?.activityList || []
})

function getIconUrl(content) {
  if (!content) return ''
  if (content.startsWith('http')) return content
  try {
    return require(`@/assets/images/${content}`)
  } catch (e) {
    return content
  }
}

function isProd() {
  return import.meta.env.PROD
}

const isBtnsubmit = ref(true)

function quickBtnClick(item) {
  if (!isBtnsubmit.value) return
  const text = item.name

  if (item.category == '1' && item.url) {
    if (item.url.indexOf('http') > -1) {
      window.location.href = item.url
    } else {
      utils.AppToHttpHtml(item.url)
    }
    return
  }

  if (item.category == '2') {
    let textMessage = '&' + text + '&'
    let sendParmas = {
      reqAndResType: '1',
      msgText: textMessage,
      msgSource: manualService.value,
      questionType: 6,
    }

    scrollTopBody()
    store
      ?.dispatch?.('sendingRobot', sendParmas)
      .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)
}
</script>

<style scoped>
.quick-access-box {
  padding-top: 12px;
}

.quick-btn-box {
  width: 100%;
  display: flex;
  text-align: center;
  min-height: 75px;
  overflow-y: hidden;
  overflow-x: scroll;
}

.btn-icon {
  display: inline-block;
  width: 27px;
  height: 27px;
  margin-top: 8px;
  margin-bottom: 6px;
}

.btn-item .btn-name {
  width: 100%;
  font-size: 9px;
  color: #666666;
  line-height: 14px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.quick_btn_icon {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

.btn-item {
  width: 50px;
  height: 60px;
  min-width: 50px;
  max-width: 50px;
  font-size: 13px;
  line-height: 13px;
  color: #666666;
  background: #ffffff;
  border-radius: 8px;
  margin-right: 10px;
  overflow: hidden;
  position: relative;
}

.mask-btn {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.elder-wrapper {
  padding-top: 8px;
}

.elder-wrapper .quick-btn-box {
  overflow: hidden;
  flex-flow: wrap;
  justify-content: space-between;
}

.elder-wrapper .btn-item {
  margin-top: 8px;
  width: 168px;
  height: 65px;
  min-width: unset;
  max-width: unset;
  margin-right: unset;
  position: relative;
}

.elder-wrapper .btn-item .btn-icon {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: unset;
  left: 0;
}

.elder-wrapper .btn-item .btn-icon .quick_btn_icon {
  border-radius: unset;
}

.elder-wrapper .btn-item .btn-name {
  font-size: 22px;
  color: #ffffff;
  line-height: 33px;
  position: absolute;
  top: 16px;
  left: 42px;
  max-width: 118px;
  display: flex;
  justify-content: center;
}

.btn-item.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
</style>