customAgent/src/components/abstract.vue

<script setup>
import { ref, onMounted, onActivated, computed, inject } from 'vue';
import { Post } from '@/utils/https'
import { messageSend } from '@/utils/api'
import { getHiddenProp, getVisibilityState, decryptByVersionNo1, decodeEntryOpenid, isSit, Encrypt, isDev, isProd } from "@/utils";
import orderIcon from '@/assets/images/chat/order.svg'
import todoIcon from '@/assets/images/chat/todo.svg'
import rightsIcon from '@/assets/images/chat/rights‌.svg'
const store = inject('appStore', null)
const businessHandleInfo = ref({})
const orderCount = ref(0)
const emit = defineEmits(['ready', 'businessClick'])
console.log(import('@/assets/images/chat/todo.svg'), 11);
const abstractList = computed(() => [
  {
    title: '保障状态',
    num: orderCount.value,
    text: '保单保障中',
    unit: '张',
    name: '查保单',
    btnText: '查保单',
    btnBg: 'linear-gradient(90deg, #025cea 0%, #0595f6 100%)',
    icon: orderIcon,
  },
  {
    title: '待办任务',
    num: businessHandleInfo.value?.contents?.length || 0,
    text: '待办需处理',
    unit: '个',
    name: '去处理',
    btnText: '去处理',
    btnBg: 'linear-gradient(111deg, #ff752a 44%, #feb52d 136%)',
    icon: todoIcon,
  },
  {
    title: '权益领取',
    num: 0,
    text: '生存金权益',
    unit: '项',
    name: '去领取',
    btnText: '去领取',
    btnBg: 'linear-gradient(261deg, #2ed0c6 3%, #08b7ac 65%)',
    icon: rightsIcon,
  },
]
  .filter(item => item.num > (import.meta.env.VITE_USER_NODE_ENV === 'development' ?
    -1 : 0))
)
const businessHandle = (userId) => {
  if (
    store.source == "95270000" ||
    store.source == "95320000" ||
    store.source == "95350000" ||
    store.source == "96060000"
  ) {
    return Post("notify/info", { userInfoId: userId })
      .then((res) => {
        if (res.data?.contents?.length > 0) {
          businessHandleInfo.value = res.data
        } else {
          businessHandleInfo.value = {}
        }
        store?.setBusinessHandleInfo?.(businessHandleInfo.value)
      })
      .catch((error) => {
        console.log(error);
      });
  }
  return Promise.resolve()
}

const businessClick = () => {
  emit('businessClick')
}
const isIdentityNo = (value) => /^\d{15}$|^\d{17}[\dXx]$/.test(String(value || '').trim())

// 与 liics 一致：明文身份证来自解密 userInfo.pid（encryptPid 是给外部系统用的密文，不能直接解）
const getIdentityCardno = () => {
  const versionNo = store.userInfo?.versionNo1 || ''
  const pidCipher = store.userInfo?.pid || ''
  if (!versionNo || !pidCipher) return ''

  const identityCardno = decryptByVersionNo1(versionNo, pidCipher)
  console.log('decrypt pid =>', JSON.stringify(identityCardno))
  return isIdentityNo(identityCardno) ? identityCardno.trim() : ''
}

const getOrderCount = () => {
  try {
    const identityCardno = getIdentityCardno()
    if (!identityCardno) {
      console.warn('证件号解密失败', {
        hasPid: Boolean(store.userInfo?.pid),
        hasVersionNo1: Boolean(store.userInfo?.versionNo1),
      })
      return Promise.resolve()
    }

    return Post('policy/queryCount', {
      dentityCardno: identityCardno,
      userId: store.userId
    }).then(res => {
      orderCount.value = res?.data?.policyCount || 0
    }).catch((error) => {
      console.log(error)
    })
  } catch (error) {
    console.log(error)
    return Promise.resolve()
  }
}
const toDetail = (record) => {
  if (record.title === '待办任务') {
    businessClick()
  }
  if (record.title === '保障状态') {
    const text = record?.name || '查保单'
    // 发送文字并直接走对话接口
    const request = store?.sendingRobot?.({
      reqAndResType: '1',
      msgText: text,
      msgSource: store?.manualService,
    }) || messageSend(text)
    Promise.resolve(request).catch((err) => {
      console.log(err)
    })
  }
}
const refreshAbstractData = async () => {
  await Promise.all([businessHandle(store?.userId), getOrderCount()])
}

const hasLoadedOnce = ref(false)

onMounted(async () => {
  try {
    await refreshAbstractData()
  } finally {
    hasLoadedOnce.value = true
    emit('ready')
  }
})

// keep-alive 返回 chat 时刷新待办和保单数量
onActivated(async () => {
  if (!hasLoadedOnce.value) return
  await refreshAbstractData()
})
</script>
<template>
  <div class="abstract-con" v-if="abstractList.length">
    <div class="title">
      <span>今日皮卡丘摘要</span><img src="@/assets/images/chat/star.webp" alt="" srcset="" />
    </div>
    <div class="list">
      <div
        :class="`item ${(abstractList || []).length === 1 ? 'singleItem' : ''}`"
        v-for="(item, index) in abstractList || []"
        :key="index"
      >
        <div>
          <img :src="item.icon" alt="" srcset="" v-if="(abstractList || []).length === 1" />
          <div>
            <div class="title">
              <img :src="item.icon" alt="" srcset="" v-if="(abstractList || []).length > 1" />
              <span>{{ item.title }}</span>
            </div>
            <div
              class="content"
              :style="{ display: (abstractList || []).length > 2 ? 'block' : 'flex' }"
            >
              <div class="nums">
                <div class="num">
                  {{ item.num }}<span>{{ item.unit }}</span>
                </div>
              </div>
              <div
                class="text"
                :style="{ marginTop: (abstractList || []).length > 2 ? '8rem' : '0' }"
              >
                {{ item.text }}
              </div>
            </div>
          </div>
        </div>
        <div class="btn" :style="{ background: item.btnBg }" @click="toDetail(item)">
          {{ item.btnText }}
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.abstract-con {
  position: relative;
  z-index: 1;
  flex-direction: column;
  justify-content: center;
  padding: 10rem 12rem;
  gap: 12rem;
  align-self: stretch;
  background: linear-gradient(77deg, #fcfdfd80 -1%, #f5f7fee6 99%);
  margin-bottom: 16rem;
  box-sizing: border-box;
  border: 1rem solid rgba(255, 255, 255, 0.9);

  backdrop-filter: blur(10rem);
  border-radius: 12rem;

  > .title {
    font-family: PingFang SC;
    font-size: 16rem;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0rem;
    display: flex;
    align-items: center;
    /* 科个中性/正文-标题 17204D */
    /* 样式描述：用于正文标题 */
    color: #17204d;
    margin-bottom: 4rem;
    img {
      margin-left: 4rem;
      width: 19.94px;
      height: 14.9px;
    }
  }

  .list {
    margin-top: 13rem;
    display: flex;
    gap: 8rem;

    .item {
      display: flex;
      flex-direction: column;
      gap: 12rem;
      flex: 1;
      border-radius: 8rem;
      display: flex;
      flex-direction: column;
      padding: 12rem;
      gap: 12rem;

      background: #fcfdfd;

      box-shadow: 0rem 4rem 10rem 0rem #e7effd;
      img {
        width: 18rem;
        margin-right: 2rem;
        vertical-align: bottom;
      }
      .title {
        font-family: PingFang SC;
        font-size: 12rem;
        font-weight: normal;
        line-height: 16rem;
        letter-spacing: 0rem;

        /* 科个中性/正文-副标题 7E849F */
        color: #7e849f;
      }

      .content {
        .nums {
          font-family: DIN-Medium;
          font-size: 24rem;
          font-weight: bold;
          line-height: 24rem;
          letter-spacing: 0rem;

          font-variation-settings: 'opsz' auto;
          color: #17204d;

          .num {
            display: flex;
            align-items: flex-end;
          }

          span {
            font-family: PingFang SC;
            font-size: 12rem;
            font-weight: normal;
            line-height: 16rem;
            letter-spacing: 0rem;
            margin: 0 3rem 0 3rem;

            /* 中性/重要文本色 */
            /* 样式描述：17204D */
            color: #17204d;
          }
        }

        .text {
          font-family: PingFang SC;
          font-size: 12rem;
          font-weight: normal;
          line-height: 16rem;
          letter-spacing: 0rem;

          /* 中性/次要文本色 */
          /* 样式描述：7E849F */
          color: #7e849f;
          align-self: flex-end;
        }
      }

      .btn {
        border-radius: 100rem;
        font-family: PingFang SC;
        font-size: 14rem;
        font-weight: 500;
        line-height: 19rem;
        text-align: center;
        letter-spacing: 0rem;

        color: #ffffff;
        padding: 4rem 12rem;
        height: 28rem;
        cursor: pointer;
      }
    }

    .singleItem {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      > div {
        display: flex;
        img {
          width: 28rem;
          vertical-align: middle;
          margin-right: 8rem;
        }
        .title {
          font-family: PingFang SC;
          font-size: 14rem;
          font-weight: 500;
          line-height: normal;
          letter-spacing: 0rem;
          margin-left: 0;
          color: #17204d;
          margin-bottom: 0;
        }

        .content {
          .nums {
            font-size: 12rem;
            font-weight: normal;
            line-height: 16rem;
            letter-spacing: 0rem;

            z-index: 1;
            font-family: PingFang SC;
            font-weight: 500;
            color: #17204d;

            span {
              color: #7e849f;
              margin-left: 0;
            }
          }
        }
      }
    }
  }
}
</style>