From fc639d546b92664e49084f14622c8aec74f29f7f Mon Sep 17 00:00:00 2001
From: hejin <jmy13864291147@163.com>
Date: Sat, 19 Jul 2025 11:54:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5=EF=BC=9A?=
 =?UTF-8?q?=20=20=20=20=20=20=20=E5=AF=B9=E6=8E=A5=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E6=96=B0=E9=97=BB=E5=88=86=E9=A1=B5=E5=9F=BA=E7=A1=80=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=20=20=20=20=20=20=20=E5=AF=B9=E6=8E=A5=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E4=BA=A7=E5=93=81=E9=A1=B5=E9=9D=A2=E5=9F=BA=E7=A1=80?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 env.js                   |  6 ++-
 locales/en.json          |  4 +-
 locales/zh.json          |  4 +-
 nuxt.config.js           |  7 ++++
 pages/index.vue          | 13 ++++--
 pages/news.vue           |  1 +
 pages/news/_id.vue       | 77 +++++++++++++++++++++++++++-------
 pages/news/index.vue     | 36 +++++++++++-----
 pages/products.vue       |  2 +-
 pages/products/_id.vue   | 91 +++++++++++++++++++---------------------
 pages/products/index.vue |  3 +-
 11 files changed, 157 insertions(+), 87 deletions(-)

diff --git a/env.js b/env.js
index c1a6939..58fc6dd 100644
--- a/env.js
+++ b/env.js
@@ -2,12 +2,14 @@ module.exports = {
   // 测试环境 接口请求地址 (http)或(https)://www.a.com(换成你的域名)/api
   test: {
     MODE: 'test',
-    VUE_APP_API_URL: 'http://122.51.230.86:8099/'
+    // VUE_APP_API_URL: 'http://122.51.230.86:8099/'
+    VUE_APP_API_URL: '/dev'
   },
   // 开发环境 接口请求地址 (http)或(https)://www.a.com(换成你的域名)/api
   dev: {
     MODE: 'dev',
-    VUE_APP_API_URL: 'http://122.51.230.86:8099/',
+    // VUE_APP_API_URL: 'http://122.51.230.86:8099/',
+    VUE_APP_API_URL: 'http://192.168.1.17:8099/',
     VUE_APP_WEBSOCKET: 'ws://localhost:8099/ws/asset/'
   },
   // 生产环境 接口请求地址 (http)或(https)://www.a.com(换成你的域名)/api 非独立部署默认为空
diff --git a/locales/en.json b/locales/en.json
index b7b41e6..44cb8f1 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -27,7 +27,9 @@
     "sendInquiry": "Send Inquiry",
     "chatNow": "Chat Now",
     "menu": "Menu",
-    "search": "Search"
+    "search": "Search",
+    "next": "Next",
+    "prev": "Prev"
   },
   "menu": {
     "Home": "Home",
diff --git a/locales/zh.json b/locales/zh.json
index ab4861a..7454ffc 100644
--- a/locales/zh.json
+++ b/locales/zh.json
@@ -27,7 +27,9 @@
     "sendInquiry": "发送咨询",
     "chatNow": "立即聊天",
     "menu": "菜单",
-    "search": "搜索"
+    "search": "搜索",
+    "next": "下一个",
+    "prev": "上一个"
   },
   "menu": {
     "Home": "首页",
diff --git a/nuxt.config.js b/nuxt.config.js
index b6d1769..d73d6b2 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -132,5 +132,12 @@ export default {
   server: {
     port: 3001,
     host: '0.0.0.0', // default: localhost
+    proxy: {
+      '/dev': {
+        target: 'http://192.168.1.17:8099/',
+        pathRewrite: { '^/dev': '' },
+        changeOrigin: true,
+      }
+    }
   },
 }
diff --git a/pages/index.vue b/pages/index.vue
index 6c035b3..f025ab4 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -59,10 +59,10 @@
       >
         <b-carousel-slide v-for="(item,index) in hotProductList" :key="index">
           <template v-slot:img>
-            <ul class="row justify-content-around pl-0">
+            <ul class="row pl-0">
               <li class="col-6 col-md-3 mb-4" v-for="son in item" :key="son.id">
                 <article class="product-card box_shadow">
-                  <b-img :src="son.mainPic" fluid :alt="son.title"></b-img>
+                  <img class="cover" :src="son.mainPic" :alt="son.title"></img>
                   <div class="product-card-content">
                     <h4>{{ son.title }}</h4>
                     <div v-html="son.description"></div>
@@ -158,7 +158,7 @@
     </section>
 
     <!-- Join our newsletter -->
-    <section style="background-color: #0070de;">
+    <!-- <section style="background-color: #0070de;">
       <div class="join-our-newsletter container">
         <h5 class="title">{{ $t('index.joinOurNewsletter') }}</h5>
         <h4 class="sub-title">{{ $t('index.signUpOurNewsletter') }}</h4>
@@ -179,7 +179,7 @@
           </li>
         </ul>
       </div>
-    </section>
+    </section> -->
   </div>
 </template>
 
@@ -349,6 +349,11 @@ export default {
     }
     .product-card {
       background-color: #fff;
+      .cover {
+        width: 100%;
+        height: 24.1875rem;
+        object-fit: cover;
+      }
       .product-card-content {
         padding: 1.125rem 1rem;
         border-top: .0625rem solid #e6e8ec;
diff --git a/pages/news.vue b/pages/news.vue
index 38efef2..44050f1 100644
--- a/pages/news.vue
+++ b/pages/news.vue
@@ -9,6 +9,7 @@
           class="col-md-3 mb-4 mb-md-0" 
           :headerTitle="$t('news.allNews')"
           :treeData="categoryTree"
+          baseUrl="/news"
         />
         <main class="col-md-9">
           <div class="pretty-header">
diff --git a/pages/news/_id.vue b/pages/news/_id.vue
index 7a026f2..aa07f4f 100644
--- a/pages/news/_id.vue
+++ b/pages/news/_id.vue
@@ -2,25 +2,25 @@
   <!-- 新闻详情 -->
   <div class="news-info">
     <div class="info-top">
-      <h2 class="news-title">How To Maintain The Chassis Of A Truck?</h2>
-      <p class="news-date">- Oct 25, 2024-</p>
+      <h2 class="news-title">{{ detais.title }}</h2>
+      <p class="news-date">{{ detais.createTime }}</p>
     </div>
 
     <div class="news-content">
-      <div></div>
+      <div class="rich-text" v-html="detais.content"></div>
       <ContactFooter />
       <div class="guide">
-        <nuxt-link to="/">
-          Previous: How To Maintain The Chassis Of A Truck?
+        <nuxt-link :to="`/news/${prevNews.id}`" v-if="prevNews">
+          {{ $t('common.prev') }}: {{ prevNews.title }}
         </nuxt-link>
 
-        <nuxt-link to="/">
-          Next: Flatbed Trailer Buying Guide
+        <nuxt-link :to="`/news/${nextNews.id}`" v-if="nextNews">
+          {{ $t('common.next') }}: {{ nextNews.title }}
         </nuxt-link>
       </div>
     </div>
 
-    <div class="related-news mb-4">
+    <!-- <div class="related-news mb-4">
       <div class="pretty-header">
         <h2>{{ $t('news.relatedNews') }}</h2>
       </div>
@@ -33,9 +33,9 @@
         <p class="text-ellipsis">he Importance Of Regular Maintenance For Your Flatbed Trailer</p>
         <span>- Oct 25, 2024-</span>
       </nuxt-link>
-    </div>
+    </div> -->
 
-    <div class="related-products">
+    <div class="related-products" v-if="relatedProductList.length">
       <div class="pretty-header">
         <h2>{{ $t('news.relatedProducts') }}</h2>
       </div>
@@ -46,17 +46,23 @@
         controls
         indicators
       >
-        <b-carousel-slide v-for="item in 3" :key="item">
+        <b-carousel-slide v-for="item in relatedProductList" :key="item">
           <template v-slot:img>
             <ul class="row justify-content-around pl-0">
-              <li class="col-6 col-md-4 mb-4" v-for="son in 3" :key="son">
+              <li class="col-6 col-md-4 mb-4" v-for="son in item" :key="son.id">
                 <article class="product-card box_shadow">
-                  <b-img src="~assets/image/banner/home-pord1.png" fluid alt="product"></b-img>
+                  <b-img 
+                    :src="son.mainPic" 
+                    fluid 
+                    :alt="son.title"
+                  >
+                  </b-img>
                   <div class="product-card-content">
-                    <h4>SINOTRUK HOWO Tractor Truck Head</h4>
-                    <p>{{ $t('common.truckModel') }}: ZZ4257N3247C1</p>
+                    <h4>{{ son.title }}</h4>
+                    <div v-html="son.content"></div>
+                    <!-- <p>{{ $t('common.truckModel') }}: ZZ4257N3247C1</p>
                     <p>{{ $t('common.dimension') }}: 6800x2490x3668</p>
-                    <p>{{ $t('common.approachingAngle/Departure') }}: 16/70</p>
+                    <p>{{ $t('common.approachingAngle/Departure') }}: 16/70</p> -->
                   </div>
                 </article>
               </li>
@@ -76,6 +82,45 @@ export default {
       
     }
   },
+  async asyncData({$axios, params }) {
+    let {
+      data:{ 
+        busiProdNew:detais,
+        next:nextNews,
+        previous:prevNews,
+        randomList
+      }
+    } = await $axios.get(`/web/prodNewsInfo?id=${params.id}`)
+    const chunkSize = 3;
+    const relatedProductList = [];
+    for (let i = 0; i < randomList.length; i += chunkSize) {
+      relatedProductList.push(randomList.slice(i, i + chunkSize));
+    }
+    
+    return {
+      detais,
+      nextNews,
+      prevNews,
+      relatedProductList
+    }
+  },
+  head() {
+    return {
+      title: this.detais.title,
+      meta: [
+        {
+          hid: 'keywords',
+          name: 'keywords',
+          content: this.detais.prodKeyword
+        },
+        {
+          hid: 'description',
+          name: 'description',
+          content: this.detais.prodDescription
+        }
+      ]
+    }
+  },
   methods: {
     
   }
diff --git a/pages/news/index.vue b/pages/news/index.vue
index df8ae42..5487b96 100644
--- a/pages/news/index.vue
+++ b/pages/news/index.vue
@@ -3,35 +3,36 @@
   <section class="news-list">
     <nuxt-link 
       class="news-item box_shadow row mt-4" 
-      to="/news/123123"
-      v-for="item in 6"
-      :key="item"
+      :to="`/news/${item.id}`"
+      v-for="item in pordObj.records"
+      :key="item.id"
     >
       <b-img 
         class="col-md-4"
-        src="~assets/image/banner/home-pord1.png"
-        alt="Responsive image"
+        :src="item.mainPic"
+        :alt="item.title"
       >
       </b-img>
       <article class="col-md-8">
-        <h3 class="title">Advantages Of Front Shovel And Backhoe For Excavators</h3>
-        <p class="news-content text-ellipsis ">
-          When many customers maintain their trucks, they mostly only pay attention to the maintenance of tires and engines and do not pay much attention to the chassis. Little do they know that if the chassis is not maintained, the truck will have big problems. So how to maintain the chassis of a truck? The following article will introduce it in detail.
-        </p>
+        <h3 class="title text-ellipsis">
+          {{ item.title }}
+        </h3>
+        <p class="news-content text-ellipsis" v-html="item.description"></p>
         <div>
-          <span>- Aug 19, 2022-</span>
+          <span>{{ item.createTime }}</span>
           <img src="~assets/image/icon/goto1.png" :alt="$t('common.viewDetails')">
         </div>
       </article>
     </nuxt-link>
 
-    <SeoPagination class="mt-4" />
+    <SeoPagination class="mt-4" :total="pordObj.total" />
   </section>
 </template>
 
 <script>
 export default {
   name: 'news-list',
+  watchQuery: ['pageNum', 'catgId'],
   data() {
     return {
       bannerTopOptions: {
@@ -39,6 +40,19 @@ export default {
       },
     }
   },
+  async asyncData({$axios,query}) {
+    let params = {
+      pageNum: query.pageNum || 1,
+      pageSize: 6,
+      catgId: query.catgId || '',
+    }
+    let {data: pordObj} = await $axios('/web/newsPageList', {params})
+
+    return {
+      pordObj
+    }
+    
+  },
   methods: {
     
   }
diff --git a/pages/products.vue b/pages/products.vue
index ed6c968..04eee45 100644
--- a/pages/products.vue
+++ b/pages/products.vue
@@ -36,7 +36,7 @@ export default {
   },
   async asyncData({$axios}) {
     // 获取新闻分类
-    const categoryTree = await $axios.$get('/web/prodCategory')
+    const categoryTree = await $axios.$get('/web/prodCategory?catgId=660179025d0e2e0e4263db0eec86a8cc')
     
     return {
       categoryTree
diff --git a/pages/products/_id.vue b/pages/products/_id.vue
index 4fffe56..4da24d7 100644
--- a/pages/products/_id.vue
+++ b/pages/products/_id.vue
@@ -17,7 +17,7 @@
                 class="products-img-item"
                 :class="src===currentImgUrl ? 'is-products-img-active' : ''" 
               >
-                <img @click="() => {currentImgUrl = src}"  :src="src" alt="产品图片" />
+                <img @click="() => {currentImgUrl = src}"  :src="src" :alt="prodDetail.title" />
               </swiper-slide>
               <div class="swiper-button-prev" slot="button-prev"></div>
               <div class="swiper-button-next" slot="button-next"></div>
@@ -26,41 +26,10 @@
         </div>
       </div>
       <article class="prod-details col-md-7">
-        <h2 class="products-title">SINOTRUK HOWO Tractor Truck Head</h2>
-        <div class="parameter">
-          <p>
-            <label>{{ $t('common.truckModel') }}:</label>
-            <span>ZZ4257N3247C1</span>
-          </p>
-          <p>
-            <label>{{ $t('common.dimension') }}:</label>
-            <span>6800x2490x3668</span>
-          </p>
-          <p>
-            <label>{{ $t('common.approachingAngle/Departure') }}:</label>
-            <span>16/70</span>
-          </p>
-          <p>
-            <label>{{ $t('common.overhang') }}:</label>
-            <span>1500/700725</span>
-          </p>
-          <p>
-            <label>{{ $t('common.wheelBase') }}:</label>
-            <span>3200+1400、3225+1350</span>
-          </p>
-          <p>
-            <label>{{ $t('common.maxSpeed') }}:</label>
-            <span>102</span>
-          </p>
-          <p>
-            <label>{{ $t('common.curbWeight') }}:</label>
-            <span>11930</span>
-          </p>
-          <p>
-            <label>{{ $t('common.loadingWeight') }}:</label>
-            <span>40000</span>
-          </p>
-        </div>
+        <h2 class="products-title">
+          {{ prodDetail.title }}
+        </h2>
+        <div class="parameter" v-html="prodDetail.description"></div>
 
         <div class="visit">
           <a class="box_shadow" href="javascript:;">
@@ -81,16 +50,14 @@
       <div class="pretty-header">
         <h2>{{ $t('products.productDetails') }}</h2>
       </div>
-      <div class="desc pt-3 pb-3">
-        富文本内容
-      </div>
+      <div class="desc rich-text pt-3 pb-3" v-html="prodDetail.content"></div>
       <div class="guide">
-        <nuxt-link to="/">
-          Previous: How To Maintain The Chassis Of A Truck?
+        <nuxt-link :to="`/products/${prevNews.id}`" v-if="prevNews">
+          {{ $t('common.prev') }}: {{ prevNews.title }}
         </nuxt-link>
 
-        <nuxt-link to="/">
-          Next: Flatbed Trailer Buying Guide
+        <nuxt-link :to="`/products/${nextNews.id}`" v-if="nextNews">
+          {{ $t('common.next') }}: {{ nextNews.title }}
         </nuxt-link>
       </div>
     </div>
@@ -226,16 +193,42 @@ export default {
       },
     }
   },
-  asyncData({$axios, params}) {
-    let productsImages = [
-      require('../../assets/image/banner/home-pord1.png'),
-      require('../../assets/image/banner/home1.png'),
-    ];
+  async asyncData({$axios, params}) {
+    let {
+      data: {
+        busiProdNew: prodDetail,
+        pics,
+        next:nextNews,
+        previous:prevNews,
+      }
+    } = await $axios.get(`/web/prodNewsInfo?id=${params.id}`);
+    let picsArr = pics ? pics.split(',') : [];
+    let productsImages = [prodDetail.mainPic, ...picsArr];
     let currentImgUrl = productsImages[0];
 
     return {
+      prodDetail,
       currentImgUrl,
-      productsImages
+      productsImages,
+      nextNews,
+      prevNews
+    }
+  },
+  head() {
+    return {
+      title: this.prodDetail.title,
+      meta: [
+        {
+          hid: 'keywords',
+          name: 'keywords',
+          content: this.prodDetail.prodKeyword
+        },
+        {
+          hid: 'description',
+          name: 'description',
+          content: this.prodDetail.prodDescription
+        }
+      ]
     }
   },
   methods: {
diff --git a/pages/products/index.vue b/pages/products/index.vue
index 1170425..941fc38 100644
--- a/pages/products/index.vue
+++ b/pages/products/index.vue
@@ -5,7 +5,7 @@
       <li class="col-12 col-md-4"  v-for="item in pordObj.records" :key="item.id">
         <nuxt-link 
           class="products-item box_shadow mt-2" 
-          to="/products/123123"
+          :to="`/products/${item.id}`"
         >
           <article class="product-card box_shadow">
             <img style="height: 200px;" class="img_reset" :src="item.mainPic" alt="product"></img>
@@ -42,7 +42,6 @@ export default {
       catgId: query.catgId || '',
     }
     let {data: pordObj} = await $axios('/web/prodPageList', {params})
-    console.log(pordObj);
     
     return {
       pordObj