接口对接：

对接完成新闻分页基础接口对接完成产品页面基础接口
2025-07-19 11:54:56 +08:00 · 2025-07-19 11:54:56 +08:00 · fc639d546b
commit fc639d546b
parent a1fd60420d
11 changed files with 157 additions and 87 deletions
--- 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 非独立部署默认为空
--- 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",
--- a/locales/zh.json
+++ b/locales/zh.json
@ -27,7 +27,9 @@
    "sendInquiry": "发送咨询",
    "chatNow": "立即聊天",
    "menu": "菜单",
-    "search": "搜索"
+    "search": "搜索",
+    "next": "下一个",
+    "prev": "上一个"
  },
  "menu": {
    "Home": "首页",
--- 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,
+      }
+    }
  },
 }
--- 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;
--- 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">
--- 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: {
    
  }
--- 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: {
    
  }
--- 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
--- 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: {
--- 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