customAgent/src/components/hot-user-popup.vue

<template>
  <van-popup
    v-model:show="visible"
    position="bottom"
    :style="{ height: '60%' }"
    round
    :close-on-click-overlay="true"
    @close="handleClose"
    class="hot-user-popup"
    get-container="body"
  >
    <div class="hot-user-content" :class="elder ? 'elder-wrapper' : ''">
      <div class="close-btn-wrapper">
        <van-icon name="cross" :size="elder ? 24 : 20" color="#999" @click.stop="handleClose" />
      </div>

      <div class="tips-section" v-if="hotUserData && hotUserData.tips">
        <div class="tips-content" v-html="formattedTips"></div>
      </div>

      <div
        class="product-section"
        v-if="hotUserData && hotUserData.productList && hotUserData.productList.length > 0"
      >
        <div class="product-list">
          <div
            class="product-card"
            v-for="(product, index) in hotUserData.productList"
            :key="index"
          >
            <div class="card-header">
              <div class="hot-tag" v-if="product.isHot">
                <img src="@/assets/images/fire.png" alt="热卖" class="fire-icon" />
                <span class="hot-text">热卖</span>
              </div>
              <div class="tip-tag" v-if="product.tip">
                {{ product.tip }}
              </div>
            </div>

            <div class="product-info">
              <div class="product-name-row">
                <div class="product-name-wrapper">
                  <span class="product-name-text">{{ product.productName }}</span>
                  <span v-if="product.saleStatus" class="sale-status on-sale">{{
                    product.saleStatus
                  }}</span>
                </div>
              </div>
              <div class="product-code">险种代码：{{ product.productCode }}</div>
            </div>

            <div class="product-actions">
              <button
                v-if="product.introQuestion"
                class="action-btn"
                @click="
                  handleActionClick(
                    product.productName,
                    product.productCode,
                    product.introQuestion,
                    '产品简介'
                  )
                "
              >
                产品简介
              </button>
              <button
                v-if="product.reserveQuestion"
                class="action-btn"
                @click="
                  handleActionClick(
                    product.productName,
                    product.productCode,
                    product.reserveQuestion,
                    '投保预约'
                  )
                "
              >
                投保预约
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, computed, watch, inject } from 'vue'
import { showToast, Popup, Icon } from 'vant'
import { Post } from '@/utils/https'

const props = defineProps({
  show: { type: Boolean, default: false },
})
const emit = defineEmits(['update:show', 'close'])

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 mescrollContent = inject('mescrollContent', ref(null))

const visible = ref(false)
const hotUserData = computed(() => store?.state?.hotUserData || {})

const formattedTips = computed(() => {
  if (!hotUserData.value || !hotUserData.value.tips) return ''
  return hotUserData.value.tips
})

watch(
  () => props.show,
  (val) => {
    visible.value = val
  },
  { immediate: true }
)

watch(visible, (val) => {
  if (!val) {
    emit('update:show', false)
    emit('close')
  }
})

function handleClose() {
  visible.value = false
}

function handleActionClick(productName, productCode, question, buttonName) {
  if (!question) return
  sendTrackingData(productName, productCode, buttonName)
  sendQuestion(question)
}

function sendTrackingData(productName, productCode, buttonName) {
  const now = new Date()
  const clickTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(
    now.getDate()
  ).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(
    now.getMinutes()
  ).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`

  Post('product/record/save', {
    userId: userId.value,
    productName,
    productCode,
    channel: source.value,
    sessionId: sessionId.value,
    clickTime,
    buttonName,
  }).catch((err) => console.log(err))

  store
    ?.dispatch('userBehavior', {
      eventType: '10',
      eventMsg: `高温用户点击:${productName}`,
    })
    .catch((err) => console.log(err))
}

function sendQuestion(text) {
  const sendParams = {
    reqAndResType: '1',
    msgText: text,
    msgSource: manualService.value,
    questionType: 10,
  }
  store
    ?.dispatch('sendingRobot', sendParams)
    .then(() => {
      scrollTopBody()
    })
    .catch((err) => 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>
.hot-user-popup {
  border-radius: 16px 16px 0 0;
}

.hot-user-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 5px 16px 12px 16px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #fff5f0 0%, #fff8f5 100%);
  overscroll-behavior-y: none;
  overflow: hidden;
}

.close-btn-wrapper {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 1px;
}

.close-btn-wrapper .van-icon {
  cursor: pointer;
  padding: 4px;
}
</style>