gypsy-crm-frontend-vu/components/PrefectInfo.vue

<template>
  <view class="PerfectInfo " v-if="isPerfectInfo">
    <!--    <i class="iconfont icondengpao"></i>-->
    <view class="content-wrapper content-padding">
      <view class="content">
        <view class="icon">
          <cwg-icon color="#333" icon="crm-user-pen" />
        </view>
        <view class="title">
          {{ t('Home.msg.content') }}
        </view>
      </view>

        <button
          class="btn-improve"
          @click="immediately"
        >
          {{ t('Home.msg.btn') }}
        </button>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { computed, ref,onMounted } from 'vue'
  import { useI18n } from 'vue-i18n'
  import useGlobalStore from '@/stores/use-global-store'
  import useUserStore from '@/stores/use-user-store'
  import useRouter from '@/hooks/useRouter'
  import useRoute from '@/hooks/useRoute'


  const router = useRouter()
  const route = useRoute()
  const { userInfo } = useUserStore()
  const { setApplyStatus } = useGlobalStore()
  const { t } = useI18n()
  // 认证弹窗，
  const dialogCheck = ref(null)

  const isPerfectInfo = computed(() => {
    const {status,applyRealStatus} = userInfo.customInfo
    setApplyStatus(!(status == 2 || applyRealStatus == 1|| applyRealStatus ==2))
    return !(status == 2 || applyRealStatus == 1|| applyRealStatus ==2) && route.path != '/pages/mine/improveImmediately'
  })
  const info = computed(() => {
    return userInfo.customInfo
  })

  function immediately() {
    router.push({
      path:'/pages/mine/improveImmediately'
    })
  }
  function initStatus() {
    dialogCheck.value.close()
  }

  onMounted(() => {
    if (info.value.status == 2|| [1,2].includes(info.value.applyRealStatus)) {
      // dialogCheck.value.open()
    }else{
      // dialogCheck.value.close()
    }
  })

</script>

<style scoped lang="scss">
  @import "@/uni.scss";

  .PerfectInfo {
    width: 100%;
    //padding: px2rpx(16);
    background-color: #fff9eb;

    .content {
      width: 100%;
      display: flex;
      align-items: center;
      height: px2rpx(40);
      flex: 1;
      .icon{
        margin-right: 10px;
      }
      //justify-content: center;
      .title {
        font-weight: 400;
        line-height: px2rpx(24);
        font-size: px2rpx(16);
        letter-spacing: 0px;
      }
    }

    .btn-improve {
      width: px2rpx(120);
      height: px2rpx(40);
      background-color: #ffde02;
      line-height: px2rpx(40);
      font-size: px2rpx(14);
      margin: 0;
    }
  }
  .content-wrapper {
    max-width: px2rpx(1320);
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
  }
  .content-padding {
    padding: px2rpx(16);

    @media screen and (max-width: 1645px) {
      padding: px2rpx(16) px2rpx(48);
    }

    @media screen and (max-width: 768px) {
      padding: px2rpx(16);
    }
  }

</style>