dianliang/dl_site_nuxt
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

接口对接：

Browse Source 
首页：
          1. 首页轮播图
          2. 首页公司简介
          3. 热门产品
          4. 普通产品
      新闻：
          1.分类
     footer接口
This commit is contained in:
hejin 2025-07-12 19:41:58 +08:00
parent 1f6382798d
commit 0551d7062f
12 changed files with 175 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
components/aside-tree.vue
View File

@ -7,6 +7,7 @@
:data="treeData"
node-key="id"
highlight-current
:props="props"
/>
</nav>
</div>
@ -43,61 +44,23 @@ export default {
headerTitle: {
type: String,
default: ''
},
treeData: {
type: Array,
default: () => []
},
props: {
type: Object,
default: () => {
return {
children: 'children',
label: 'label'
}
}
}
},
data () {
return {
treeData: [
{
id: 1,
label: 'Level 1 - 1',
children: [
{
id: 4,
label: 'Level 2 - 1-1',
children: [
{
id: 9,
label: 'Level 3 - 1-1-1'
},
{
id: 10,
label: 'Level 3 - 1-1-2'
}
]
}
]
},
{
id: 2,
label: 'Level 1 - 2',
children: [
{
id: 5,
label: 'Level 2 - 2-1'
},
{
id: 6,
label: 'Level 2 - 2-2'
}
]
},
{
id: 3,
label: 'Level 1 - 3',
children: [
{
id: 7,
label: 'Level 2 - 3-1'
},
{
id: 8,
label: 'Level 2 - 3-2'
}
]
}
]
}
return {}
},
mounted () {

24
components/footer.vue
View File

@ -5,23 +5,26 @@
<dl class="introduce col-6 col-md-2">
<dt>{{ $t('footer.contactUs') }}</dt>
<dl>
<div v-html="footerInfo.contactUs"></div>
</dl>
<!-- <dl>
Detailed address
</dl>
<dl>
Shangang xintiandi No8, 19 floor, Lixia district, jinan, Shandong, China
</dl>
</dl> -->
</dl>
<dl class="introduce col-6 col-md-2">
<dt>Contact Us</dt>
<dl>
<nuxt-link to="/">About Us</nuxt-link>
<nuxt-link to="/abou-us">About Us</nuxt-link>
</dl>
<dl>
<nuxt-link to="/">Contact us</nuxt-link>
<nuxt-link to="/contact-us">Contact us</nuxt-link>
</dl>
<dl>
<nuxt-link to="/">Feedback</nuxt-link>
<nuxt-link to="/feedback">Feedback</nuxt-link>
</dl>
</dl>
@ -46,26 +49,31 @@
<div class="contact col-6 col-md-2">
<div class="box">
<b-img src="~assets/image/common/contact.png" fluid alt="Contact Us"></b-img>
<p class="mt-1">Scan the code and check us out</p>
<b-img :src="footerInfo.qrCode" fluid :alt="footerInfo.companyName"></b-img>
<p class="mt-1">{{ footerInfo.companyName }}</p>
</div>
</div>
</div>
</div>
<h4 class="copyright">
Copyright © Sinotruck Howo Sales Co.,Ltd All rights reserved.Privacy Policy
{{ footerInfo.copyright }}
</h4>
</footer>
</template>
<script>
import { mapState } from 'vuex';
import footer from '../middleware/footer';
export default {
data() {
return {
}
},
computed: {
...mapState(['footerInfo'])
}
}
</script>

7
env.js
View File

@ -2,16 +2,17 @@ module.exports = {
// 测试环境 接口请求地址 (http)或(https)://www.a.com(换成你的域名)/api
test: {
MODE: 'test',
VUE_APP_API_URL: 'http://www.suodee.com/api'
VUE_APP_API_URL: 'http://122.51.230.86:8099/'
},
// 开发环境 接口请求地址 (http)或(https)://www.a.com(换成你的域名)/api
dev: {
MODE: 'dev',
VUE_APP_API_URL: 'http://www.suodee.com/api'
VUE_APP_API_URL: 'http://122.51.230.86:8099/'
},
// 生产环境 接口请求地址 (http)或(https)://www.a.com(换成你的域名)/api 非独立部署默认为空
prod: {
MODE: 'prod',
VUE_APP_API_URL: 'http://www.suodee.com/api'
VUE_APP_API_URL: 'http://122.51.230.86:8099/'
}
};

12
locales/en.json
View File

@ -95,5 +95,17 @@
},
"footer": {
"contactUs": "Contact us"
},
"seo": {
"news": {
"title": "China National Heavy Duty Truck Group Co., Ltd. - News List",
"keywords": "China National Heavy Duty Truck Group (CNHTC) HOWO, HOWO Trucks, Heavy Truck Sales, Commercial Vehicles, Heavy duty Trucks, HOWO News, CNHTC News, Truck Trading, HOWO After sales Service, Large Trucks",
"description": "China National Heavy Duty Truck Group Co., Ltd. provides the latest news, product information, and industry trends on HOWO trucks, focusing on heavy-duty truck sales and services. Understand the information of HOWO models, grasp the trends of the heavy-duty truck industry, and help you make wise purchasing decisions."
},
"product": {
"title": "China National Heavy Duty Truck Group HOWO Product Display - HOWO Truck Series",
"keywords": "China National Heavy Duty Truck Group (CNHTC) HOWO, HOWO Trucks, Heavy Truck Products, Heavy duty Trucks, Commercial Vehicles, HOWO Models, CNHTC Products, HOWO Truck Series, Large Trucks, Commercial Vehicle Products",
"description": "China National Heavy Duty Truck Group Co., Ltd. provides a rich range of HOWO truck products, including various models and configurations. Understand the performance, technical specifications, and industry advantages of our heavy-duty trucks to meet your procurement needs."
}
}
}

12
locales/zh.json
View File

@ -95,5 +95,17 @@
},
"footer": {
"contactUs": "联系我们"
},
"seo": {
"news": {
"title": "中国重汽豪沃销售有限公司 - 新闻列表",
"keywords": "中国重汽豪沃, 豪沃卡车, 重卡销售, 商用车, 重型卡车, 豪沃新闻, 重汽新闻, 卡车交易, 豪沃售后服务, 大型卡车",
"description": "中国重汽豪沃销售有限公司提供最新的豪沃卡车新闻、产品信息及行业动态，专注于重卡销售与服务。了解豪沃车型资讯，掌握重型卡车行业趋势，助您做出明智的采购决策。"
},
"product": {
"title": "中国重汽豪沃产品展示 - 豪沃卡车系列",
"keywords": "中国重汽豪沃, 豪沃卡车, 重卡产品, 重型卡车, 商用车, 豪沃车型, 重汽产品, 豪沃卡车系列, 大型卡车, 商用车产品",
"description": "中国重汽豪沃销售有限公司提供丰富的豪沃卡车产品系列，包括各种车型和配置。了解我们的重型卡车性能、技术参数及行业优势，满足您的采购需求。"
}
}
}

7
middleware/footer.js Normal file
View File

@ -0,0 +1,7 @@
export default async function ({
$axios,
store
}) {
const footerInfo = await $axios.$get('/web/footerInfo')
store.commit('SET_FOOTER_INFO', footerInfo)
}

2
nuxt.config.js
View File

@ -77,7 +77,7 @@ export default {
icons: false
},
router: {
middleware: 'i18n'
middleware: ['i18n', 'footer']
},
/*
** Build configuration

65
pages/index.vue
View File

@ -14,8 +14,8 @@
<b-carousel-slide
v-for="(item,index) in bannerList"
:key="index"
:img-src="item"
img-alt="轮播图"
:img-src="item.pic"
:img-alt="item.title"
>
<!-- @click.native="goPage(item)" -->
</b-carousel-slide>
@ -26,7 +26,7 @@
<div class="company-profiler container">
<h5 class="title">{{ $t('index.companyProfile') }}</h5>
<h4 class="sub-title">{{ $t('index.corporateName') }}</h4>
<p class="describe">{{ $t('index.companyProfileContent') }}</p>
<div class="describe" v-html="companyInfo"></div>
<ul class="advantage row pl-0">
<li
v-for="item in advantageList"
@ -57,17 +57,18 @@
controls
indicators
>
<b-carousel-slide v-for="item in 3" :key="item">
<b-carousel-slide v-for="(item,index) in hotProductList" :key="index">
<template v-slot:img>
<ul class="row justify-content-around pl-0">
<li class="col-6 col-md-3 mb-4" v-for="son in 4" :key="son">
<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="~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.description"></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> -->
<nuxt-link class="view-details" to="/">
{{ $t('common.viewDetails') }}
<img src="~assets/image/icon/goto.png" :alt="$t('common.viewDetails')" />
@ -88,18 +89,19 @@
<h5 class="title">{{ $t('common.products') }}</h5>
<h4 class="sub-title">{{ $t('common.companyProducts') }}</h4>
<ul style="margin-top: 1.25rem;" class="row pl-0">
<li class="col-12 col-md-6 mb-4" v-for="item in 4" :key="item">
<li class="col-12 col-md-6 mb-4" v-for="item in productTopList" :key="item.id">
<article class="products-item box_shadow">
<nuxt-link to="/" class="row">
<div class="col-7 col-md-6">
<b-img src="~assets/image/banner/home-pord1.png" fluid alt="prodcuts"></b-img>
<div class="col-7 col-md-6 pr-0">
<b-img :src="item.mainPic" fluid :alt="item.title"></b-img>
</div>
<div class="products-info col-5 col-md-6">
<h3>Foton 8x4 Dump Truck</h3>
<p>{{ $t('common.brand') }}: Foton</p>
<h3>{{ item.title }}</h3>
<div v-html="item.description"></div>
<!-- <p>{{ $t('common.brand') }}: Foton</p>
<p>{{ $t('common.driveWheel') }}: 8x4</p>
<p>{{ $t('common.drivingStyle') }}: Left-Hand Driving or Right-hand Driving</p>
<p>{{ $t('common.placeofOrigin') }}: China</p>
<p>{{ $t('common.placeofOrigin') }}: China</p> -->
<div class="view-details d-md-block d-none">
{{ $t('common.viewDetails') }}
<img src="~assets/image/icon/goto.png" :alt="$t('common.viewDetails')" />
@ -182,6 +184,8 @@
</template>
<script>
import { onMounted } from 'vue'
export default {
name: 'index',
@ -233,16 +237,29 @@ export default {
icon: require('../assets/image/icon/YouTube.png'),
}
],
bannerList: [ require('../assets/image/banner/home1.png')], // 轮播图
}
},
// async asyncData({app}) {
// const {data: bannerList} = await app.$axios.get('/index/bannerList')
// return {
// bannerList, // 轮播图
// }
// },
async asyncData({$axios}) {
// 轮播图
const {data: bannerList} = await $axios.get('/web/pic')
// 公司介绍
const {data: companyInfo} = await $axios.get('/web/indexCompanyInfo')
// 热门产品
const {data: originalArray} = await $axios.get('/web/hotProduct')
const chunkSize = 4;
const hotProductList = [];
for (let i = 0; i < originalArray.length; i += chunkSize) {
hotProductList.push(originalArray.slice(i, i + chunkSize));
}
// 普通产品前十
const {data: productTopList} = await $axios.get('/web/product')
return {
bannerList,
companyInfo,
hotProductList,
productTopList
}
},
mounted() {
},
methods: {
@ -371,7 +388,7 @@ export default {
font-size: .875rem;
}
.view-details {
margin-top: 5.1875rem;
margin-top: .625rem;
}
}
}

31
pages/news.vue
View File

@ -5,7 +5,11 @@
<section class="container pt-4 pb-4">
<div class="row">
<AsideTree class="col-md-3 mb-4 mb-md-0" :headerTitle="$t('news.allNews')"/>
<AsideTree
class="col-md-3 mb-4 mb-md-0"
:headerTitle="$t('news.allNews')"
:treeData="categoryTree"
/>
<main class="col-md-9">
<div class="pretty-header">
<h2>Low Bed Trailer</h2>
@ -29,6 +33,31 @@ export default {
},
}
},
async asyncData({$axios}) {
// 获取新闻分类
const categoryTree = await $axios.$get('/web/prodCategory')
return {
categoryTree
}
},
head() {
return {
title: this.$t('seo.news.title'), // 页面标题
meta: [
{
hid: 'keywords',
name: 'keywords',
content: this.$t('seo.news.keywords')
},
{
hid: 'description',
name: 'description',
content: this.$t('seo.news.description')
}
]
}
},
methods: {
}

27
pages/products.vue
View File

@ -5,7 +5,7 @@
<section class="container pt-4 pb-4">
<div class="row">
<AsideTree class="col-md-3 mb-4 mb-md-0" :headerTitle="$t('products.allProducts')"/>
<AsideTree class="col-md-3 mb-4 mb-md-0" :treeData="categoryTree" :headerTitle="$t('products.allProducts')"/>
<main class="col-md-9">
<div class="pretty-header">
<h2>Low Bed Trailer</h2>
@ -29,6 +29,31 @@ export default {
},
}
},
async asyncData({$axios}) {
// 获取新闻分类
const categoryTree = await $axios.$get('/web/prodCategory')
return {
categoryTree
}
},
head() {
return {
title: this.$t('seo.product.title'), // 页面标题
meta: [
{
hid: 'keywords',
name: 'keywords',
content: this.$t('seo.product.keywords')
},
{
hid: 'description',
name: 'description',
content: this.$t('seo.product.description')
}
]
}
},
methods: {
}

7
plugins/axios.js
View File

@ -4,6 +4,11 @@ export default function ({redirect, $axios, app}) {
// 请求拦截器
$axios.interceptors.request.use(
config => {
config.params = {
...config.params,
tenantId: 'main'
}
return config
},
error => {
@ -15,7 +20,7 @@ export default function ({redirect, $axios, app}) {
response => {
let code = response.data ? response.data.code : 500;
switch (code) {
case 0:
case 200:
return response.data
default:
return Promise.reject(response.data.msg)

6
store/index.js
View File

@ -1,6 +1,7 @@
export const state = () => ({
locales: ['en', 'zh'],
locale: 'en'
locale: 'en',
footerInfo: {}
})
export const mutations = {
@ -8,6 +9,9 @@ export const mutations = {
if (state.locales.includes(locale)) {
state.locale = locale
}
},
SET_FOOTER_INFO (state, info) {
state.footerInfo = info
}
}