customAgent/src/components/hot-question.vue

<template>
  <div class="hot-question an-move-left" v-if="hotList.length > 0">
    <div class="hot-question-main" v-if="!$elder">
      <!-- <div class="hot-banner">
        <div class="hot-exchange" v-lazy:background-image="{ src: hotUrl }">
          <span class="hot-exchange-title hide">热门问题</span>
          <a
            href="javascript:;"
            class="hot-exchange-btn"
            @click.stop="changeHotQuestion"
          >
            <span class="hot-exchange-icon"></span>换一换
          </a>
        </div>
      </div> -->
      <!-- <div class="hot-content">
        <a
          href="javascript:;"
          class="hot-content-list opacity"
          v-for="(item, index) in newHotList"
          :key="index"
          @click.stop="hotQuestionChooseClick(item)"
          v-show="item.name"
        >
          <div class="hot-item-question">{{ item.name }}</div>
        </a>
      </div> -->
      <div class="hotcontent">
        <div class="content_body">
          <van-tabs
            v-model="active"
            title-active-color="#025CEA"
            @change="activeChange($event)"
            :ellipsis="false"
            :class="['van-tabs__nav1', { 'van-tabs__line_one': isOnlyOneTab, isQA: isQA }]"
            line-height="2"
          >
            <van-tab :title="isQA ? one_list_name : '热点'">
              <div class="tab-content" :style="{ height: getContentHeight(0) }" ref="tab0">
                <div class="tab-inner">
                  <div class="visible-content">
                    <van-cell
                      v-for="(QAitem, QAindex) in isQA
                        ? hotList.slice(0, 4)
                        : newHotList.slice(0, 4)"
                      :key="QAindex"
                      :value="isQA ? QAitem.name : QAitem.name"
                      @click.stop="hotQuestionChooseClick(isQA ? QAitem.name : QAitem.name, QAitem)"
                      v-show="isQA ? QAitem.name : QAitem.name"
                      class="van_cell"
                      is-link
                      :border="false"
                    >
                    </van-cell>
                  </div>
                  <div class="hidden-content" :class="{ 'fade-in': footerOpen }">
                    <van-cell
                      v-for="(item, index) in isQA ? hotList.slice(4) : newHotList.slice(4)"
                      :key="index + 4"
                      :value="item.name"
                      @click.stop="hotQuestionChooseClick(item.name, item)"
                      v-show="item.name"
                      class="van_cell"
                      is-link
                      :border="false"
                    >
                    </van-cell>
                  </div>
                </div>
              </div>
            </van-tab>
            <van-tab v-for="(item, index) in tabsList" :key="index" :title="item.name">
              <div
                class="tab-content"
                :style="{ height: getContentHeight(index + 1) }"
                :ref="'tab' + (index + 1)"
              >
                <div class="tab-inner">
                  <div class="visible-content">
                    <van-cell
                      v-for="(reserveitem, reserveindex) in item.question.slice(0, 4)"
                      :key="reserveindex"
                      :value="reserveitem"
                      @click="hotQuestionChooseClick(reserveitem)"
                      class="van_cell"
                      is-link
                      :border="false"
                    >
                    </van-cell>
                  </div>
                  <div class="hidden-content" :class="{ 'fade-in': footerOpen }">
                    <van-cell
                      v-for="(reserveitem, reserveindex) in item.question.slice(4)"
                      :key="reserveindex + 4"
                      :value="reserveitem"
                      @click="hotQuestionChooseClick(reserveitem)"
                      class="van_cell"
                      is-link
                      :border="false"
                    >
                    </van-cell>
                  </div>
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </div>
        <div v-show="isExchange" class="change_body">
          <div class="border_div">
            <div class="refresh-btn-img" @click.stop="changeHotQuestion">
              <img :class="exchangeIcon" :src="refreshPic['exchange']" />
              <span>换一换</span>
            </div>
          </div>
        </div>
        <div v-if="footerMore" class="contentfooter" @click="openClick">
          <div class="flag_body">
            <span>{{ isOpen }}</span>
            <van-icon v-if="!footerOpen" name="arrow-down" />
            <van-icon v-else name="arrow-up" />
          </div>
        </div>
      </div>
    </div>
    <!-- 关爱版 -->
    <!-- <div class="hot-question-elder-main" v-else>
      <div class="hot-title">猜你想问</div>
      <div class="hot-content">
        <a
          href="javascript:;"
          class="hot-content-list opacity"
          v-for="(item, index) in newHotList"
          :key="index"
          @click.stop="hotQuestionChooseClick(item)"
          v-show="item.name"
        >
          <div class="hot-item-question">{{ item.name }}</div>
          <van-icon
            class="hot-item-question-arrow"
            name="arrow"
            color="#7E849F"
            size="10px"
          />
        </a>
      </div>
      <div class="hot-content-underline"></div>
      <div class="hot-content-switcher" @click.stop="changeHotQuestion">
        <span class="hot-exchange-icon"></span>换一换
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { ref, computed, inject, onMounted, nextTick } from 'vue'
import { showToast, Tab, Tabs, Cell } from 'vant'
import { Post } from '@/utils/https'
import utils from '@/utils/utils'
import wx from 'weixin-js-sdk'
import exchangeImg from '@/assets/images/icon-exchange.png'
import hotBg from '@/assets/images/hot-bg.png'

const props = defineProps({
  isTab: { type: Boolean, default: true },
  isQA: { type: Boolean, default: false },
})

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 hotList = ref([])
const newHotList = ref([])
const tabsList = ref([])
const active = ref(0)
const isOpen = ref(false)
const footerOpen = ref(false)
const footerMore = ref(false)
const numNone = ref(4)
const num = ref(4)
const timeStart = ref(0)
const timeEnd = ref(1)
const clickNum = ref(0)
const group = ref(0)
const exchangeIcon = ref('')
const refreshPic = { exchange: exchangeImg }
const hotUrl = hotBg
const one_list_name = ref('热点')
const isOnlyOneTab = computed(() => !tabsList.value || tabsList.value.length === 0)
const isExchange = computed(() => !props.isQA && hotList.value.length > 4)
const isBtnsubmit = ref(true)
const isItemsubmit = ref(true)
const planCode = ref('')

onMounted(() => {
  planCode.value = utils.getUrlParams().planCode || ''
  initTabList()
})

function initTabList() {
  const param = {
    userInfoId: userId.value,
    category: 3,
    source: source.value,
    planCode: planCode.value,
    sceneId: userInfo.value?.sceneId || '',
  }

  Post('config/activity', param)
    .then((res) => {
      if (res.code && res.code != 0) {
        showToast(res.msg)
        return
      }
      hotList.value = res.data || []
      initHotQuestionYTH((ythRes) => {
        if (Array.isArray(ythRes) && Array.isArray(hotList.value)) {
          hotList.value = [...ythRes, ...hotList.value]
        }
        renderR()
        initViewState()
      })
    })
    .catch((err) => console.log(err))
}

function initHotQuestionYTH(callback) {
  Post('config/getLqTabList', { userInfoId: userId.value, source: source.value })
    .then((res) => {
      if (res.code && res.code != 0) {
        showToast(res.msg)
        return
      }
      if (!res.data) {
        console.error('Invalid response data:', res)
        return
      }
      callback && callback(res.data)
    })
    .catch((err) => console.log(err))
}

function initViewState() {
  footerMore.value = false
  if (props.isQA && active.value === 0 && hotList.value.length > 4) {
    footerMore.value = true
  }
}

function activeChange(e) {
  footerMore.value = true
  isOpen.value = false
  numNone.value = 3
  isOpen.value = '展开'
  let len = 0
  if (active.value === 0) {
    len = hotList.value.length
  } else {
    const tabIndex = props.isQA ? active.value - 1 : active.value - 1
    len = tabsList.value[tabIndex] ? tabsList.value[tabIndex].question.length : 0
  }
  if ((active.value === 0 && !props.isQA) || len <= 4) {
    footerMore.value = false
  }
}

function changeHotQuestion() {
  if (hotList.value.length >= 4 && hotList.value.length > num.value) {
    listlen()
    autoIncre()
    clear()
    renderR()
    exchangeIcon.value = 'go'
    setTimeout(() => {
      exchangeIcon.value = ''
    }, 500)
  }
}

function listlen() {
  let len = hotList.value.length
  group.value = len / num.value
  if (len % num.value != 0) {
    group.value = parseInt(group.value) + 1
  }
}

function clear() {
  if (clickNum.value > group.value - 1) {
    timeStart.value = 0
    timeEnd.value = 1
    clickNum.value = 0
  }
}

function autoIncre() {
  clickNum.value++
  timeStart.value++
  timeEnd.value++
}

function renderR() {
  if (hotList.value) {
    newHotList.value = hotList.value.slice(num.value * timeStart.value, num.value * timeEnd.value)
  }
}

function hotQuestionChooseClick(itemName, item = {}) {
  if (manualService.value == '2') return

  let sendParmas = {
    reqAndResType: '1',
    msgText: itemName,
    msgSource: manualService.value,
    questionType: 2,
  }

  if (!isItemsubmit.value) return
  isItemsubmit.value = false
  scrollTopBody()
  store
    ?.dispatch?.('sendingRobot', sendParmas)
    .then(() => {
      isItemsubmit.value = true
    })
    .catch((err) => {
      isItemsubmit.value = true
      console.log(err)
    })

  if (!!item.bqType) {
    Post('semantic/getYzsUrl', {
      userId: userId.value,
      bqType: item.bqType,
      urlType: '00',
    }).then((res) => {
      if (res.code === 0 && res.data) {
        wx.miniProgram.getEnv((miniRes) => {
          if (miniRes.miniprogram) {
            wx.miniProgram.navigateTo({
              url: `/pages/webview/webview?url=${encodeURIComponent(res.data)}`,
            })
          }
        })
      } else {
        showToast('网络异常，请重试')
      }
    })
  }
}

function scrollTopBody() {
  setTimeout(() => {
    try {
      if (mescrollContent.value)
        mescrollContent.value.scrollTop = mescrollContent.value.scrollHeight || 0
    } catch (e) {
      console.log(e.message)
    }
  }, 300)
}

function getContentHeight() {
  return 'auto'
}

function openClick() {
  footerOpen.value = !footerOpen.value
  isOpen.value = footerOpen.value ? '收起' : '展开'
}

function updateTabHeight() {
  nextTick(() => {
    try {
      const el = document.querySelector('.hot-question-main')
      if (el) {
        /* height update logic */
      }
    } catch (e) {
      console.log(e)
    }
  })
}
</script>

<style scoped>
.hot-question {
  padding-top: 10px;
}

.hot-question-main .hotcontent {
  display: flex;
  flex-direction: column;
  position: relative;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.content_body {
  width: 100%;
  min-height: 180px;
}

.van-tabs__nav1 :deep(.van-tabs__line) {
  width: 24px !important;
  background: #025cea;
}

.van_cell {
  position: relative;
  width: 100%;
  padding: 4px 16px 4px 35px;
}

.van_cell .van-icon {
  color: #7e849f;
}

.van_cell span {
  color: #000;
  font-size: 13px;
  font-weight: 400;
}

.van_cell:nth-child(odd)::before {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  content: '';
  width: 11px;
  height: 9px;
  background: url('~@/assets/images/qustion_icon.png');
  background-size: cover;
}

.van_cell:nth-child(even)::before {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  content: '';
  width: 11px;
  height: 9px;
  background: url('~@/assets/images/qustion_icon2.png');
  background-size: cover;
}

.van_cell :deep(.van-cell__right-icon) {
  font-size: 13px;
}

.van_cell:active {
  background: #fff;
}

.change_body {
  padding: 0px 16px;
}

.border_div {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.border_div::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 0.5px;
  background: #e4eaf2;
  left: 0;
  top: 0;
}

.refresh-btn-img {
  line-height: 17px;
  display: flex;
  align-items: center;
  padding: 10px 0px;
  cursor: pointer;
}

.refresh-btn-img img {
  width: 13px;
  height: 13px;
  margin-right: 4px;
}

.refresh-btn-img span {
  font-size: 14px;
  color: #000;
  font-weight: 700;
}

.go {
  transform: rotate(180deg);
  transition: all 0.6s;
}

.hot-exchange-icon {
  display: inline-block;
  width: 15px;
  height: 14.5px;
  vertical-align: middle;
  margin-right: 8.5px;
  transition: transform 0.4s;
}

.hot-exchange-icon.active {
  transform: rotate(360deg);
  transition: all 0.4s;
}

.van-tabs :deep(.van-tab) {
  padding: 0px 10px;
  color: #7e849f;
  font-size: 13px;
}

.van-tab--active {
  margin: 0px -2px;
}

.van-tab--active span {
  font-weight: 700;
  font-size: 14px;
  color: #025cea;
}
</style>