customAgent/src/components/abstract.vue

<script setup>
import { ref, onMounted, computed, inject } from 'vue';
import { Post } from '@/utils/https'
import { messageSend } from '@/utils/api'
import { getHiddenProp, getVisibilityState, decryptByVersionNo1, isSit, Encrypt, isDev, isProd } from "@/utils";
const store = inject('appStore', null)
const businessHandleInfo = ref({})
const abstractList = computed(() => [
  {
    title: '保障状态',
    num: 3,
    text: '保单保障中',
    unit: '张',
    name: '查保单',
    btnText: '查保单',
    btnBg: 'linear-gradient(90deg, #025cea 0%, #0595f6 100%)',
  },
  {
    title: '待办任务',
    num: businessHandleInfo.value?.contents?.length || 0,
    text: '待办需处理',
    unit: '个',
    name: '去处理',
    btnText: '去处理',
    btnBg: 'linear-gradient(111deg, #ff752a 44%, #feb52d 136%)',
  },
  {
    title: '权益领取',
    num: 0,
    text: '生存金权益',
    unit: '项',
    name: '去领取',
    btnText: '去领取',
    btnBg: 'linear-gradient(261deg, #2ed0c6 3%, #08b7ac 65%)',
  },
].filter(item => item.num > 0))
const businessHandle = () => {
  if (
    store.source == "95270000" ||
    store.source == "95320000" ||
    store.source == "95350000" ||
    store.source == "95810000"
  ) {
    Post("notify/info", { userInfoId: store.userId })
      .then((res) => {
        if (res.data?.contents.length > 0) {
          businessHandleInfo.value = res.data;
        }
      })
      .catch((error) => {
        console.log(error);
      });
  }
}
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
    }

    Post('policy/queryCount', {
      dentityCardno: identityCardno,
    })
  } catch (error) {
    console.log(error)
  }
}
const toDetail = (record) => {
  const text = record?.name
  console.log('text',text);
  if (!text) return
  messageSend(text).catch((err) => {
    console.log(err)
  })
}
onMounted(async () => {
  businessHandle()
  getOrderCount()
})
</script>
<template>
  <div class="abstract-con" v-if="abstractList.length">
    <div class="title">
      <span>今日皮卡丘摘要</span><img src="@/assets/images/chat/star.svg" alt="" srcset="" />
    </div>
    <div class="list">
      <div :class="`item ${(abstractList || []).length === 1 ? 'singleItem' : ''}`"
        v-for="(item, index) in abstractList || []" :key="index">
        <div>
          <div class="title">{{ item.title }}</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 class="btn" :style="{ background: item.btnBg }" @click="toDetail(item)">{{ item.btnText }}</div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.abstract-con {
  flex-direction: column;
  justify-content: center;
  padding: 10rem 12rem;
  gap: 12rem;
  align-self: stretch;

  background: linear-gradient(77deg, #fcfdfd80 -1%, #f5f7fee6 99%);

  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;

    /* 科个中性/正文-标题 17204D */
    /* 样式描述：用于正文标题 */
    color: #17204d;

    img {
      width: 20rem;
      margin-left: 4.6rem;
    }
  }

  .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;

      .title {
        margin-left: 18rem;
        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 {
        margin-left: 36rem;

        .title {
          font-family: PingFang SC;
          font-size: 14rem;
          font-weight: 500;
          line-height: normal;
          letter-spacing: 0rem;
          margin-left: 0;

          /* 科个中性/正文-标题 17204D */
          /* 样式描述：用于正文标题 */
          color: #17204d;
          margin-bottom: 4rem;
        }

        .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>