From c6c41b78094f972851dedbcfab0c8e313687b952 Mon Sep 17 00:00:00 2001
From: lwh <2679599887@qq.com>
Date: Fri, 30 Jun 2023 10:50:43 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E5=AF=B9=E6=8E=A5=E6=96=B0=E9=97=BB?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/business/news/index.scss   | 125 +++++++++++++-------------
 pages/news/[idx]-[page].vue           |  91 +++++++++----------
 server/api/news/getNewsList.js        |  25 ++++++
 server/api/news/getNewsType.js        |  24 +++++
 server/api/news/getinfoArticleInfo.js |  24 +++++
 5 files changed, 179 insertions(+), 110 deletions(-)
 create mode 100644 server/api/news/getNewsList.js
 create mode 100644 server/api/news/getNewsType.js
 create mode 100644 server/api/news/getinfoArticleInfo.js

diff --git a/assets/css/business/news/index.scss b/assets/css/business/news/index.scss
index 9eb6a79..6718b81 100644
--- a/assets/css/business/news/index.scss
+++ b/assets/css/business/news/index.scss
@@ -19,12 +19,13 @@
         .news-title:hover {
             color: #f08519;
         }
-        .news-title-active{
+
+        .news-title-active {
             color: #f08519;
         }
 
         .news-title-line {
-            width:1px;
+            width: 1px;
             height: 36px;
             background-color: #999999;
             margin: 0 30px;
@@ -33,71 +34,71 @@
 }
 
 // 新闻内容盒子
-.news-container-box {
+.news-contianer {
+    margin: 0px auto;
+    height: 300px;
+    width: 80%;
+    display: flex;
+    align-items: center;
+    padding: 10px 35px;
+    transition: .4s;
+    cursor: pointer;
+    margin-bottom: 35px;
+}
+
+.news-contianer:hover {
+    box-shadow: 0 0 15px 1px #e5e4e4;
+}
+
+.news-content-box {
+    height: 65%;
     width: 100%;
+    display: flex;
+    overflow: hidden;
+}
 
-    .news-big-box {
-        width: 105%;
-        display: flex;
-        // justify-content: center;
-        // flex-wrap: wrap;
+.news-cover-box {
+    overflow: hidden;
+    margin-right: 20px;
+    height: 100%;
+    width: 25%;
+    object-fit: cover;
 
-
-        .news-box {
-            padding: 20px;
-            transition: 0.4s;
-
-            .news-s-box {
-                height: 450px;
-                border-radius: 10px;
-                transition: 0.4s;
-                padding: 20px;
-                cursor: pointer;
-
-                .jump {
-                    text-decoration: dashed;
-                    color: black;
-                }
-
-                &:hover {
-                    box-shadow: 0 0 15px 10px rgb(227, 225, 225);
-                }
-
-                .news-img-box {
-                    width: 100%;
-                    height: 70%;
-                    overflow: hidden;
-
-                    img {
-                        width: 100%;
-                        height: 100%;
-                        object-fit: cover;
-                    }
-                }
-
-                .news-content-box {
-                    width: 100%;
-                    height: 30%;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-around;
-                    margin-top: 10px;
-
-                    .news-content-title {
-                        font-size: 25px;
-                        font-weight: bold;
-                    }
-
-                    .news-content-line {
-                        width: 100%;
-                        height: 1px;
-                        background: rgba(204, 204, 204, 1);
-                    }
-                }
-            }
-        }
+    img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
     }
+}
 
+.news-content-right-box {
+    width: 70%;
+}
+
+.news-title {
+    font-weight: normal;
+    font-size: 18px;
+    letter-spacing: 1px;
+    color: rgb(51, 51, 51);
+}
+
+.news-time {
+    font-size: 14px;
+    color: rgb(153, 153, 153);
+    margin: 15px 0px;
+}
+
+.news-intro {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    margin-bottom: 24px;
+    color: rgb(102, 102, 102);
+    width: 100%;
+    text-align: justify;
+    line-height: 22px;
 }
 
 // ted栏
diff --git a/pages/news/[idx]-[page].vue b/pages/news/[idx]-[page].vue
index 5ba9419..640a8ef 100644
--- a/pages/news/[idx]-[page].vue
+++ b/pages/news/[idx]-[page].vue
@@ -1,6 +1,6 @@
 <template>
     <Head>
-        <Title>{{ tdk.tdk_title }}</Title>
+        <Title>{{ tdkNewType }}{{ tdk.tdk_title }}</Title>
         <Meta :content=tdk.tdk_keyword name="keywords" />
         <Meta :content=tdk.tdk_description name="description" />
     </Head>
@@ -12,8 +12,9 @@
         <!-- 新闻类型 -->
         <div class="news-titile-pos-box">
             <div class="news-title-box" v-for="(item, index) in newsTypeList" :key="index">
-                <div :class="active.idx === index ? 'news-title news-title-active' : 'news-title'" @click="handleClickType(index)">{{item.name}}</div>    
-                <div class="news-title-line" v-if="index !== newsTypeList.length - 1"></div>    
+                <div :class="active.idx === index ? 'news-title news-title-active' : 'news-title'"
+                    @click="handleClickType(index)">{{ item.dictionary_name }}</div>
+                <div class="news-title-line" v-if="index !== newsTypeList.length - 1"></div>
             </div>
         </div>
 
@@ -23,36 +24,21 @@
 
                 <!-- 模块渲染列表 -->
                 <div v-if="newsList.length != 0" class="news-big-box row animate__animated animate__fadeIn">
-                    <div class="news-box col-lg-4 col-md-6 col-sm-12" v-for="(item, index) in newsList">
+                    <div class="news-box col-lg-12" v-for="(item, index) in newsList">
                         <div class="news-s-box">
-                            <nuxt-link v-if="item.info_article_link" :to="item.info_article_link" class="jump">
-                                <div class="news-img-box">
-                                    <img :src=item.info_article_cover alt="">
-                                </div>
-                                <div class="news-content-box">
-                                    <div class="news-content-title">{{ item.info_article_title }}</div>
-                                    <div class="news-content-line"></div>
-                                    <div class="news-content-sublevel">
-                                        <div class="news-content-more">现在阅读</div>
-                                        <div class="news-content-time">{{ item.info_article_create_time }}
+                            <nuxt-link :to="getLink(item)" class="jump">
+                                <div class="news-contianer" style="border: 1px solid #e5e4e4">
+                                    <div class="news-content-box">
+                                        <div class="news-cover-box">
+                                            <img :src=item.news_cover>
+                                        </div>
+                                        <div class="news-content-right-box">
+                                            <div class="news-title">{{ item.news_title }}</div>
+                                            <div class="news-time">{{ item.news_issue_date }}</div>
+                                            <div class="news-intro">{{ item.news_intro }}</div>
+                                            <el-button type="info">查看详情</el-button>
                                         </div>
                                     </div>
-
-                                </div>
-                            </nuxt-link>
-                            <nuxt-link v-else :to="'/news/details/' + item.info_article_id" class="jump">
-                                <div class="news-img-box">
-                                    <img :src=item.info_article_cover alt="">
-                                </div>
-                                <div class="news-content-box">
-                                    <div class="news-content-title">{{ item.info_article_title }}</div>
-                                    <div class="news-content-line"></div>
-                                    <div class="news-content-sublevel">
-                                        <div class="news-content-more">现在阅读</div>
-                                        <div class="news-content-time">{{ item.info_article_create_time }}
-                                        </div>
-                                    </div>
-
                                 </div>
                             </nuxt-link>
                         </div>
@@ -78,32 +64,27 @@
 </template>
 
 <script setup>
+
+// 预对接
 let newsList = ref(
     [
         // {
-        //     info_article_id: '1',
-        //     info_article_title: "【2023届联考成绩公示】为理想来为梦想战",
-        //     info_article_cover: "/img/business/nuxt/@2x.png",
-        //     info_article_create_time: "2023-02-23",
+        //     news_id: '1',
+        //     news_title: "米尔喊你抽奖啦！NXP i.MX开发板、米家台灯、血压计等礼品~",
+        //     news_intro: "一年一度端午节，与往常不一样的是今年的端午节多了一个特别的礼物那就是米尔将联合XP福利送~\n免费赠送i.MX开发板、台灯、血压计快来参与，你就是锦鲤~一等奖(5名)米尔基于NXPi.MX6U儿的开发板（价值558元）\n",
+        //     news_cover: "/uploads/NewsImg/20230629\\b3897ad4ecce0204b2086110539ec1b3.jpg",
+        //     news_issue_date: "2023-02-23",
         // },
     ]
 )
 
 let newsTypeList = ref([
     {
-        name: '公司新闻',
+        dictionary_name: '---',
         idx: 0
     },
-    {
-        name: '行业动态',
-        idx: 1
-    },
-    {
-        name: '技术分享',
-        idx: 2
-    },
 ])
-
+let tdkNewType = ref()
 
 const route = useRoute()
 const router = useRouter()
@@ -137,6 +118,14 @@ const handleClickType = function (index) {
     router.push(String(index) + "-" + String(page))
 }
 
+const getLink = function (item) {
+    if (item.news_link) {
+        return item.news_link;
+    } else {
+        return "/news/details/" + item.news_id;
+    }
+}
+
 
 /**
  * 接口对接
@@ -148,11 +137,17 @@ useFetch('/api/tdk/getTdk', { params: { tdk_type: 2 } }).then(res => {
     tdk.value = JSON.parse(res.data.value).data
 })
 
+// 获取新闻类型
+useFetch('/api/news/getNewsType').then(res => {
+    newsTypeList.value = JSON.parse(res.data.value).data || []
+    tdkNewType.value = newsTypeList?.value[active.idx]?.dictionary_name
+})
+
 // // 获取新闻列表
-// useFetch('/api/news/getinfoArticleList', { params: queryParams }).then(res => {
-//     total.value = JSON.parse(res.data.value).count || 0
-//     newsList.value = JSON.parse(res.data.value).data || []
-// })
+useFetch('/api/news/getNewsList', { params: queryParams }).then(res => {
+    total.value = JSON.parse(res.data.value).count || 0
+    newsList.value = JSON.parse(res.data.value).data || []
+})
 
 // // 添加流量访问
 // useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })
diff --git a/server/api/news/getNewsList.js b/server/api/news/getNewsList.js
new file mode 100644
index 0000000..e824f7a
--- /dev/null
+++ b/server/api/news/getNewsList.js
@@ -0,0 +1,25 @@
+import {
+    readRawBody,
+    getQuery,
+    getMethod
+} from 'h3'
+
+/**
+ * 获取新闻列表
+ */
+
+export default defineEventHandler(async (event) => {
+    // 基础url
+    const baseURL = process.env.NUXT_PROXY_WEB_API
+    const method = getMethod(event).toUpperCase()
+    let body
+    if (method !== 'GET') body = await readRawBody(event)
+    const res = await $fetch(baseURL + "/News.News/getNewsList", {
+        method,
+        baseURL: event.context.baseUrl,
+        headers: event.context.headers,
+        params: getQuery(event),
+        body
+    })
+    return res
+})
\ No newline at end of file
diff --git a/server/api/news/getNewsType.js b/server/api/news/getNewsType.js
new file mode 100644
index 0000000..d7e8b2d
--- /dev/null
+++ b/server/api/news/getNewsType.js
@@ -0,0 +1,24 @@
+import {
+    readRawBody,
+    getQuery,
+    getMethod
+} from 'h3'
+
+/**
+ * 获取新闻类型列表
+ */
+export default defineEventHandler(async (event) => {
+    // 基础url
+    const baseURL = process.env.NUXT_PROXY_WEB_API
+    const method = getMethod(event).toUpperCase()
+    let body
+    if (method !== 'GET') body = await readRawBody(event)
+    const res = await $fetch(baseURL + "/News.News/getNewsType", {
+        method,
+        baseURL: event.context.baseUrl,
+        headers: event.context.headers,
+        params: getQuery(event),
+        body
+    })
+    return res
+})
\ No newline at end of file
diff --git a/server/api/news/getinfoArticleInfo.js b/server/api/news/getinfoArticleInfo.js
new file mode 100644
index 0000000..2849cfe
--- /dev/null
+++ b/server/api/news/getinfoArticleInfo.js
@@ -0,0 +1,24 @@
+import {
+    readRawBody,
+    getQuery,
+    getMethod
+} from 'h3'
+
+/**
+ * 获取新闻详情
+ */
+export default defineEventHandler(async (event) => {
+    // 基础url
+    const baseURL = process.env.NUXT_PROXY_WEB_API
+    const method = getMethod(event).toUpperCase()
+    let body
+    if (method !== 'GET') body = await readRawBody(event)
+    const res = await $fetch(baseURL + "/ExaminationInformation.InfoArticle/getinfoArticleInfo", {
+        method,
+        baseURL: event.context.baseUrl,
+        headers: event.context.headers,
+        params: getQuery(event),
+        body
+    })
+    return res
+})
\ No newline at end of file