feat: 详情页解锁逻辑，未加接口

src/components/detail/DetailInfoCell.vue

 <!-- 详情页下方信息块 -->
 <template>
-  <section class="bg-white">
-    <h2 v-if="title" class="flex h-8 items-center" :class="{ 'justify-center': titleCenter }">
-      <div
-        v-if="!titleCenter && showTitleIcon"
-        class="h-[18px] w-[3px] rounded-[30px] bg-[#C0322B]"
-      ></div>
-      <div
-        class="ml-[13px] font-yahei text-xl font-bold leading-8 tracking-[2px] text-[#1A1A1A]"
-        :class="{ 'text-2xl': titleCenter }"
-      >
-        {{ title }}
-      </div>
-    </h2>
-    <div
-      v-if="titleCenter || toListText"
-      class="relative flex h-[17px] items-center justify-center"
-    >
-      <div v-if="titleCenter" class="title-bottom-bg h-1 w-[102px] rounded-[30px]"></div>
-      <div
-        v-if="toListText"
-        class="absolute right-0 flex cursor-pointer justify-end text-xs"
-        @click="handleToList"
-      >
-        更多
-      </div>
-    </div>
-    <div
-      ref="test"
-      class="mt-5"
-      :class="{ 'content-hidden': !isContentExpand }"
-      :style="contentStyle"
-    >
-      <slot></slot>
-    </div>
-    <div
-      v-if="showContentExpand"
-      class="flex h-10 w-full cursor-pointer justify-center"
-      @click="changeContentExpand(!isContentExpand)"
-    >
-      <div class="flex h-full items-center px-4">
-        <div class="text-xs leading-[14px] text-[#4D4D4D]">
-          {{ isContentExpand ? '收起' : '展示全部' }}
+  <section
+    class="relative bg-white"
+    :class="{ 'outline outline-1 outline-[#C0322B]/[.45]': secretMode }"
+  >
+    <div :class="{ 'blur-[12px]': secretMode && !isLogin }">
+      <h2 v-if="title" class="flex h-8 items-center" :class="{ 'justify-center': titleCenter }">
+        <div
+          v-if="!titleCenter && showTitleIcon"
+          class="h-[18px] w-[3px] rounded-[30px] bg-[#C0322B]"
+        ></div>
+        <div
+          class="ml-[13px] font-yahei text-xl font-bold leading-8 tracking-[2px] text-[#1A1A1A]"
+          :class="{ 'text-2xl': titleCenter }"
+        >
+          {{ title }}
+        </div>
+      </h2>
+      <div :class="{ 'blur-[12px]': secretMode && isLogin }">
+        <div
+          v-if="titleCenter || toListText"
+          class="relative flex h-[17px] items-center justify-center"
+        >
+          <div v-if="titleCenter" class="title-bottom-bg h-1 w-[102px] rounded-[30px]"></div>
+          <div
+            v-if="toListText"
+            class="absolute right-0 flex cursor-pointer justify-end text-xs"
+            @click="handleToList"
+          >
+            更多
+          </div>
         </div>
-        <div class="ml-1">
-          <img class="h-3 w-3" src="@/assets/images/icon-arrow_down.png" alt="" />
+        <div
+          ref="test"
+          class="mt-5"
+          :class="{ 'content-hidden': !isContentExpand }"
+          :style="contentStyle"
+        >
+          <slot></slot>
+        </div>
+        <div
+          v-if="showContentExpand"
+          class="flex h-10 w-full cursor-pointer justify-center"
+          @click="changeContentExpand(!isContentExpand)"
+        >
+          <div class="flex h-full items-center px-4">
+            <div class="text-xs leading-[14px] text-[#4D4D4D]">
+              {{ isContentExpand ? '收起' : '展示全部' }}
+            </div>
+            <div class="ml-1">
+              <img class="h-3 w-3" src="@/assets/images/icon-arrow_down.png" alt="" />
+            </div>
+          </div>
         </div>
       </div>
     </div>
+    <SecretInfo v-if="secretMode" :example-type="exampleType!"></SecretInfo>
   </section>
 </template>
 
 <script lang="ts" setup>
 import { ref, computed, watchEffect } from 'vue';
+import type { ExampleType } from '@/types/enum.ts';
+import SecretInfo from '@/components/detail/SecretInfo.vue';
+import { useAppStore } from '@/stores/app.ts';
+import type { Infos } from './DetailInfo.vue';
 
 export interface DetailInfoCellProps {
   /** 标题 */
@@ -65,6 +77,12 @@ export interface DetailInfoCellProps {
   maxLines?: number;
   /** 是否显示标题icon */
   showTitleIcon?: boolean;
+  /** 登录后才可见（登录后有查看次数限制） */
+  secretMode?: boolean;
+  /** 块内显示的信息 */
+  infos?: Infos;
+  /** 样例类型 */
+  exampleType?: ExampleType;
 }
 const props = withDefaults(defineProps<DetailInfoCellProps>(), {
   title: '',
@@ -72,10 +90,15 @@ const props = withDefaults(defineProps<DetailInfoCellProps>(), {
   titleCenter: false,
   maxLines: -1,
   showTitleIcon: true,
+  secretMode: false,
+  infos: () => [],
+  exampleType: undefined,
 });
 
 const emit = defineEmits(['to-list']);
 
+const appStore = useAppStore();
+
 /** 当前内容是否展开 */
 const isContentExpand = ref(true);
 
@@ -84,6 +107,10 @@ const showContentExpand = computed(() => {
   return props.maxLines > -1;
 });
 
+const isLogin = computed(() => {
+  return appStore.isLogin;
+});
+
 const contentStyle = computed(() => {
   if (showContentExpand.value) {
     return {

src/components/detail/SecretInfo.vue

+<template>
+  <div class="absolute inset-0 overflow-hidden pt-[60px]" :class="{ 'top-[56px]': isLogin }">
+    <div class="text-5 font-yahei leading-7 text-[#1A1A1A]">
+      <div v-if="isLogin" class="">
+        <div v-if="isNoCount" class="flex items-center justify-center">
+          解锁额度已用完，可通过
+          <span class="mx-1 cursor-pointer font-bold text-[#C0322B]">提交选址需求</span>
+          或
+          <span class="mx-1 cursor-pointer font-bold text-[#C0322B]">联系我们</span>
+          获得专业选址顾问服务并获取更多信息
+        </div>
+        <div v-else class="flex items-center justify-center">
+          点击
+          <span class="mx-1 cursor-pointer font-bold text-[#C0322B]">解锁</span>
+          可查看数据详情，你还剩余
+          <span class="mx-1 font-bold text-[#C0322B]">20</span>
+          次解锁额度
+        </div>
+      </div>
+      <div v-else class="flex items-center justify-center">
+        点击
+        <span class="mx-1 cursor-pointer font-bold text-[#C0322B]">登陆</span>
+        后可查看相关的数据详情
+      </div>
+    </div>
+    <div v-if="!isLogin" class="mt-10 px-5">
+      <img :src="currentExampleImg" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ExampleType } from '@/types/enum.ts';
+import exampleCarrierDetailImg from '@/assets/images/example__carrier-detail.png';
+import examplePolicyImg from '@/assets/images/example__policy.png';
+import exampleElementImg from '@/assets/images/example_element.png';
+import { computed, ref } from 'vue';
+import { useAppStore } from '@/stores/app.ts';
+
+const props = withDefaults(
+  defineProps<{
+    /** 样例类型 */
+    exampleType: ExampleType;
+  }>(),
+  {},
+);
+
+const appStore = useAppStore();
+
+/** 解锁额度 */
+const count = ref(-1);
+
+/** 额度用光 */
+const isNoCount = computed(() => {
+  return count.value === 0;
+});
+
+const isLogin = computed(() => {
+  return appStore.isLogin;
+});
+
+const currentExampleImg = computed(() => {
+  const config: Record<ExampleType, string> = {
+    [ExampleType.carrierDetail]: exampleCarrierDetailImg,
+    [ExampleType.elementCost]: exampleElementImg,
+    [ExampleType.industryPolicy]: examplePolicyImg,
+  };
+
+  return config[props.exampleType];
+});
+</script>

src/stores/app.ts

@@ -20,6 +20,11 @@ export const useAppStore = defineStore('user', () => {
     return token.value ? `Bearer ${token.value}` : '';
   });
 
+  /** 当前是否已登录 */
+  const isLogin = computed(() => {
+    return !!token.value;
+  });
+
   const changeToken = (current: string) => {
     token.value = current;
   };
@@ -44,6 +49,8 @@ export const useAppStore = defineStore('user', () => {
   return {
     jwtToken,
     userInfo,
+    /** 当前是否已登录 */
+    isLogin,
     changeToken,
     initUserInfo,
   };

src/types/enum.ts

@@ -61,3 +61,15 @@ export enum SendMessageType {
   resetPassword = 3,
   changePassword = 4,
 }
+
+/**
+ * 样例类型
+ */
+export enum ExampleType {
+  /** 载体详情 */
+  carrierDetail,
+  /** 要素成本 */
+  elementCost,
+  /** 产业政策 */
+  industryPolicy,
+}

src/views/industrial-park/IndustrialParkDetail.vue

@@ -19,7 +19,12 @@
       <DetailInfoCell title="入驻要求">
         <DetailInfo :infos="joinRequired"></DetailInfo>
       </DetailInfoCell>
-      <DetailInfoCell title="要素成本">
+      <DetailInfoCell
+        secret-mode
+        :infos="elementCost"
+        :example-type="ExampleType.elementCost"
+        title="要素成本"
+      >
         <DetailInfo :infos="elementCost"></DetailInfo>
       </DetailInfoCell>
       <DetailInfoCell v-if="industrySupports.length" title="产业支持">
@@ -97,7 +102,7 @@ import MiniListItem, { type MiniDetail } from '@/components/detail/MiniListItem.
 import { haveValue } from '@/utils/filters.ts';
 import { useJump } from '@/composable/useJump.ts';
 import { RouteName } from '@/router/router.ts';
-import { DetailType } from '@/types/enum.ts';
+import { DetailType, ExampleType } from '@/types/enum.ts';
 import DetailMainInfo from '@/components/detail/DetailMainInfo.vue';
 
 const { detail, initDetail } = useDetail<IndustrialParkDetailResp>(RequestUrl.industrialParkDetal);