feat: 产业政策列表、产业政策详情

src/components/list/list-policy-item.vue

+<template>
+  <div class="flex py-5 px-[35px] cursor-pointer media-main" @click="handleDetail">
+    <div class="media-left" v-if="false">
+      <CommonImage class="w-[289px] h-[165px] mr-4"></CommonImage>
+    </div>
+    <div class="media-right">
+      <p class="text-lg text-[#1a1a1a] mb-[16px] font-semibold">{{ detail.title }}</p>
+      <div class="flex mb-[17px] flex-wrap h-[22px] overflow-hidden">
+        <span
+          class="text-xs text-[#2C68FF] bg-[rgba(44,104,255,0.08)] px-3 leading-[22px] mr-[13px] flex-wrap mb-2"
+          v-for="item in detail.industryList.split(',')"
+          :key="item"
+        >
+          {{ item }}
+        </span>
+      </div>
+      <p class="text-sm text-[#4d4d4d] leading-[22px] ell2 font-yahei">
+        {{ detail.content }}
+      </p>
+      <div class="mt-4 flex justify-between text-sm text-[#4d4d4d] leading-[22px]">
+        <div>发文机构：{{ detail.publisher }} | {{ detail.ctime }}</div>
+        <div class="flex items-center read-more">
+          <span>了解详情</span>
+          <img src="@/assets/images/icon-arrow_red.png" class="w-4 h-4 ml-1" alt="" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import type { PolicyListItem } from '@/types/api/policyList';
+import CommonImage from '@/components/common/CommonImage.vue';
+
+withDefaults(
+  defineProps<{
+    detail: PolicyListItem;
+  }>(),
+  {},
+);
+
+const emit = defineEmits<{
+  'to-detail': [];
+}>();
+
+const handleDetail = () => {
+  emit('to-detail');
+};
+</script>
+<style lang="scss" scoped>
+.media-main {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  &:hover {
+    box-shadow: 0px 8px 20px 0px rgba(90, 0, 0, 0.1);
+    .read-more {
+      display: flex;
+    }
+  }
+}
+.read-more {
+  display: none;
+  color: #c0322b;
+}
+</style>

src/router/router.ts

@@ -17,6 +17,8 @@ const CarrierList = () => import('@/views/carrier/CarrierList.vue');
 const IndustryCategory = () => import('@/views/industry/IndustryCategory.vue');
 /** 产业政策 */
 const IndustryPolicy = () => import('@/views/industry/IndustryPolicy.vue');
+/** 产业政策 */
+const IndustryPolicyDetail = () => import('@/views/industry/IndustryPolicyDetail.vue');
 /** 地图选址 */
 const MapSelection = () => import('@/views/map/MapSelection.vue');
 /** 关于立业云 */
@@ -60,6 +62,8 @@ export const enum RouteName {
   industryCategory = 'industry-category',
   /** 产业政策 */
   industryPolicy = 'industry-policy',
+  /** 产业政策详情 */
+  industryPolicyDetail = 'industry-policy-detail',
   /** 地图选址 */
   mapSelection = 'map-selection',
   /** 关于立业云 */
@@ -158,6 +162,11 @@ const routes: readonly RouteRecordRaw[] = [
       menuName: '产业政策',
     },
   },
+  {
+    // 产业政策详情
+    ...gen(RouteName.industryPolicyDetail),
+    component: IndustryPolicyDetail,
+  },
   {
     // 地图选址
     ...gen(RouteName.mapSelection),

src/types/api.ts

@@ -21,6 +21,10 @@ export enum RequestUrl {
   carrierList = '/lyy/api/carrier/v1.0/page',
   /** 载体详情 */
   carrierDetail = '/lyy/api/carrier/v1.0/detail',
+  /** 产业政策列表 */
+  policyList = '/lyy/api/industryPolicy/v1.0/page',
+  /** 产业政策详情 */
+  policyDetail = '/lyy/api/industryPolicy/v1.0/detail',
   /** 发送短信 */
   sendMessage = '/user/pc/v1.0/sendMsg',
   /** 修改密码发送验证码 */

src/types/api/policyList.ts

+// 列表
+export interface PolicyListItem {
+  content: string;
+  ctime: string;
+  id: number;
+  industryList: string;
+  publisher: string;
+  title: string;
+}
+// 查询条件
+export interface PolicyListCondition {
+  /** 政策名称 */
+  name: string;
+  /** 政策名称 */
+  title: string;
+}

src/views/industry/IndustryPolicy.vue

 <!-- 产业政策 -->
 <template>
-  <div>产业政策</div>
+  <div class="main-width mx-auto">
+    <CommonTitle class="my-[30px]" type-name="产业政策" @search="handleNameSearch"></CommonTitle>
+    <div>
+      <img class="main-width" src="@/assets/images/banner-policy.png" alt="" />
+    </div>
+    <h2 class="mt-[30px] flex h-8 items-center justify-center">
+      <div class="font-yahei text-2xl font-bold leading-8 tracking-[2px] text-[#1A1A1A]">
+        产业政策
+      </div>
+    </h2>
+    <div class="relative flex h-[17px] items-center justify-center">
+      <div class="title-bottom-bg h-1 w-[102px] rounded-[30px]"></div>
+    </div>
+    <div v-for="item in datas" :key="item.id" class="mb-5">
+      <PolicyListItemView
+        :detail="item"
+        @to-detail="handleDetail(RouteName.industryPolicyDetail, item)"
+      ></PolicyListItemView>
+    </div>
+    <ListPagination
+      v-model:current-page="pageNum"
+      v-model:page-size="pageSize"
+      :total="totalCount"
+    ></ListPagination>
+  </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import CommonTitle from '@/components/common/CommonTitle.vue';
+import PolicyListItemView from '@/components/list/list-policy-item.vue';
+import type { PolicyListItem, PolicyListCondition } from '@/types/api/policyList';
+// import { ref } from 'vue';
+import { useListView } from '@/composable/useListView.ts';
+import { RouteName } from '@/router/router.ts';
+import { RequestUrl } from '@/types/api.ts';
+import ListPagination from '@/components/list/ListPagination.vue';
+
+const { pageNum, pageSize, totalCount, datas, handleDetail, handleNameSearch } = useListView<
+  PolicyListItem,
+  PolicyListCondition
+>(RequestUrl.policyList);
+</script>
+<style lang="scss" scoped>
+.title-bottom-bg {
+  background: linear-gradient(
+    90deg,
+    #c0322b 0%,
+    rgba(192, 50, 43, 0.45) 66%,
+    rgba(192, 50, 43, 0) 100%
+  );
+}
+</style>

src/views/industry/IndustryPolicyDetail.vue

+<template>
+  <div class="main-width mx-auto detail-main">
+    <CommonTitle class="my-[30px]" type-name="产业政策" @search="searchToList"></CommonTitle>
+    <ElBreadcrumb class="my-[30px]" separator="/">
+      <ElBreadcrumbItem
+        v-for="item of breadcrumbs"
+        :key="item.name"
+        :to="item.to || undefined"
+        @click="noop"
+      >
+        {{ item.name }}
+      </ElBreadcrumbItem>
+    </ElBreadcrumb>
+    <div class="w-[800px] mx-auto">
+      <p class="text-2xl font-semibold text-[#1a1a1a] mb-5">{{ detail.title }}</p>
+      <div class="mt-4 text-sm text-[#4d4d4d] leading-[22px] mb-5">
+        <div>发文机构：{{ detail.publisher }} | 发文时间：{{ detail.ctime }}</div>
+      </div>
+      <div class="flex mb-[17px] flex-wrap">
+        <span
+          class="text-xs text-[#2C68FF] bg-[rgba(44,104,255,0.08)] px-3 leading-[22px] mr-[13px] flex-wrap mb-2"
+          v-for="item in detail.industryList.split(',')"
+          :key="item"
+        >
+          {{ item }}
+        </span>
+      </div>
+      <p class="text-sm text-[#4d4d4d] leading-[22px] font-yahei whitespace-pre-line">
+        {{ detail.content }}
+      </p>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { RequestUrl } from '@/types/api.ts';
+import { useRequest } from '@/composable/useRequest.ts';
+import type { PolicyListItem } from '@/types/api/policyList';
+import { useRoute } from 'vue-router';
+import { RouteName } from '@/router/router.ts';
+import { useJump } from '@/composable/useJump.ts';
+import { noop } from 'lodash-es';
+
+const route = useRoute();
+const { open } = useJump();
+
+const { request: getDetail } = useRequest<PolicyListItem>(
+  RequestUrl.policyDetail,
+  {},
+  route.query.id as string,
+);
+const detail = ref<PolicyListItem>({
+  title: '',
+  ctime: '',
+  publisher: '',
+  content: '',
+  id: 0,
+  industryList: '',
+});
+onMounted(async () => {
+  const { data } = await getDetail();
+  detail.value = data;
+});
+const searchToList = (params: any) => {
+  open({
+    name: RouteName.industryPolicy,
+    query: {
+      searchParams: JSON.stringify(params),
+    },
+  });
+};
+const breadcrumbs = computed(() => {
+  return [
+    {
+      name: '首页',
+      to: { name: RouteName.home },
+    },
+    {
+      name: '产业政策',
+      to: { name: RouteName.industryPolicy },
+    },
+    {
+      name: detail.value.title,
+    },
+  ];
+});
+</script>
+<style lang="scss">
+.detail-main {
+  .el-breadcrumb__item {
+    .el-breadcrumb__inner {
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.45);
+      line-height: 22px;
+      font-weight: 400;
+      cursor: pointer;
+    }
+    &:last-child {
+      .el-breadcrumb__inner {
+        color: rgba(0, 0, 0, 0.65);
+      }
+    }
+  }
+}
+</style>