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

Merge branch 'master' of http://124.222.105.7:3000/dianliang/dl_site_nuxt

Browse Source
This commit is contained in:
PQZ 2025-07-21 15:47:20 +08:00
commit 82a5082a57
11 changed files with 157 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
env.js
View File

@ -2,12 +2,14 @@ module.exports = {
// 测试环境 接口请求地址 (http)或(https)://www.a.com(换成你的域名)/api // 测试环境 接口请求地址 (http)或(https)://www.a.com(换成你的域名)/api
test: { test: {
MODE: '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 // 开发环境 接口请求地址 (http)或(https)://www.a.com(换成你的域名)/api
dev: { dev: {
MODE: '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/' VUE_APP_WEBSOCKET: 'ws://localhost:8099/ws/asset/'
}, },
// 生产环境 接口请求地址 (http)或(https)://www.a.com(换成你的域名)/api 非独立部署默认为空 // 生产环境 接口请求地址 (http)或(https)://www.a.com(换成你的域名)/api 非独立部署默认为空

4
locales/en.json
View File

@ -27,7 +27,9 @@
"sendInquiry": "Send Inquiry", "sendInquiry": "Send Inquiry",
"chatNow": "Chat Now", "chatNow": "Chat Now",
"menu": "Menu", "menu": "Menu",
"search": "Search" "search": "Search",
"next": "Next",
"prev": "Prev"
}, },
"menu": { "menu": {
"Home": "Home", "Home": "Home",

4
locales/zh.json
View File

@ -27,7 +27,9 @@
"sendInquiry": "发送咨询", "sendInquiry": "发送咨询",
"chatNow": "立即聊天", "chatNow": "立即聊天",
"menu": "菜单", "menu": "菜单",
"search": "搜索" "search": "搜索",
"next": "下一个",
"prev": "上一个"
}, },
"menu": { "menu": {
"Home": "首页", "Home": "首页",

7
nuxt.config.js
View File

@ -132,5 +132,12 @@ export default {
server: { server: {
port: 3001, port: 3001,
host: '0.0.0.0', // default: localhost host: '0.0.0.0', // default: localhost
proxy: {
'/dev': {
target: 'http://192.168.1.17:8099/',
pathRewrite: { '^/dev': '' },
changeOrigin: true,
}
}
}, },
} }

13
pages/index.vue
View File

@ -59,10 +59,10 @@
> >
<b-carousel-slide v-for="(item,index) in hotProductList" :key="index"> <b-carousel-slide v-for="(item,index) in hotProductList" :key="index">
<template v-slot:img> <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"> <li class="col-6 col-md-3 mb-4" v-for="son in item" :key="son.id">
<article class="product-card box_shadow"> <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"> <div class="product-card-content">
<h4>{{ son.title }}</h4> <h4>{{ son.title }}</h4>
<div v-html="son.description"></div> <div v-html="son.description"></div>
@ -158,7 +158,7 @@
</section> </section>
<!-- Join our newsletter --> <!-- Join our newsletter -->
<section style="background-color: #0070de;"> <!-- <section style="background-color: #0070de;">
<div class="join-our-newsletter container"> <div class="join-our-newsletter container">
<h5 class="title">{{ $t('index.joinOurNewsletter') }}</h5> <h5 class="title">{{ $t('index.joinOurNewsletter') }}</h5>
<h4 class="sub-title">{{ $t('index.signUpOurNewsletter') }}</h4> <h4 class="sub-title">{{ $t('index.signUpOurNewsletter') }}</h4>
@ -179,7 +179,7 @@
</li> </li>
</ul> </ul>
</div> </div>
</section> </section> -->
</div> </div>
</template> </template>
@ -349,6 +349,11 @@ export default {
} }
.product-card { .product-card {
background-color: #fff; background-color: #fff;
.cover {
width: 100%;
height: 24.1875rem;
object-fit: cover;
}
.product-card-content { .product-card-content {
padding: 1.125rem 1rem; padding: 1.125rem 1rem;
border-top: .0625rem solid #e6e8ec; border-top: .0625rem solid #e6e8ec;

1
pages/news.vue
View File

@ -9,6 +9,7 @@
class="col-md-3 mb-4 mb-md-0" class="col-md-3 mb-4 mb-md-0"
:headerTitle="$t('news.allNews')" :headerTitle="$t('news.allNews')"
:treeData="categoryTree" :treeData="categoryTree"
baseUrl="/news"
/> />
<main class="col-md-9"> <main class="col-md-9">
<div class="pretty-header"> <div class="pretty-header">

77
pages/news/_id.vue
View File

@ -2,25 +2,25 @@
<!-- 新闻详情 --> <!-- 新闻详情 -->
<div class="news-info"> <div class="news-info">
<div class="info-top"> <div class="info-top">
<h2 class="news-title">How To Maintain The Chassis Of A Truck?</h2> <h2 class="news-title">{{ detais.title }}</h2>
<p class="news-date">- Oct 25, 2024-</p> <p class="news-date">{{ detais.createTime }}</p>
</div> </div>
<div class="news-content"> <div class="news-content">
<div></div> <div class="rich-text" v-html="detais.content"></div>
<ContactFooter /> <ContactFooter />
<div class="guide"> <div class="guide">
<nuxt-link to="/"> <nuxt-link :to="`/news/${prevNews.id}`" v-if="prevNews">
Previous: How To Maintain The Chassis Of A Truck? {{ $t('common.prev') }}: {{ prevNews.title }}
</nuxt-link> </nuxt-link>
<nuxt-link to="/"> <nuxt-link :to="`/news/${nextNews.id}`" v-if="nextNews">
Next: Flatbed Trailer Buying Guide {{ $t('common.next') }}: {{ nextNews.title }}
</nuxt-link> </nuxt-link>
</div> </div>
</div> </div>
<div class="related-news mb-4"> <!-- <div class="related-news mb-4">
<div class="pretty-header"> <div class="pretty-header">
<h2>{{ $t('news.relatedNews') }}</h2> <h2>{{ $t('news.relatedNews') }}</h2>
</div> </div>
@ -33,9 +33,9 @@
<p class="text-ellipsis">he Importance Of Regular Maintenance For Your Flatbed Trailer</p> <p class="text-ellipsis">he Importance Of Regular Maintenance For Your Flatbed Trailer</p>
<span>- Oct 25, 2024-</span> <span>- Oct 25, 2024-</span>
</nuxt-link> </nuxt-link>
</div> </div> -->
<div class="related-products"> <div class="related-products" v-if="relatedProductList.length">
<div class="pretty-header"> <div class="pretty-header">
<h2>{{ $t('news.relatedProducts') }}</h2> <h2>{{ $t('news.relatedProducts') }}</h2>
</div> </div>
@ -46,17 +46,23 @@
controls controls
indicators 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> <template v-slot:img>
<ul class="row justify-content-around pl-0"> <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"> <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"> <div class="product-card-content">
<h4>SINOTRUK HOWO Tractor Truck Head</h4> <h4>{{ son.title }}</h4>
<p>{{ $t('common.truckModel') }}: ZZ4257N3247C1</p> <div v-html="son.content"></div>
<!-- <p>{{ $t('common.truckModel') }}: ZZ4257N3247C1</p>
<p>{{ $t('common.dimension') }}: 6800x2490x3668</p> <p>{{ $t('common.dimension') }}: 6800x2490x3668</p>
<p>{{ $t('common.approachingAngle/Departure') }}: 16/70</p> <p>{{ $t('common.approachingAngle/Departure') }}: 16/70</p> -->
</div> </div>
</article> </article>
</li> </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: { methods: {
} }

36
pages/news/index.vue
View File

@ -3,35 +3,36 @@
<section class="news-list"> <section class="news-list">
<nuxt-link <nuxt-link
class="news-item box_shadow row mt-4" class="news-item box_shadow row mt-4"
to="/news/123123" :to="`/news/${item.id}`"
v-for="item in 6" v-for="item in pordObj.records"
:key="item" :key="item.id"
> >
<b-img <b-img
class="col-md-4" class="col-md-4"
src="~assets/image/banner/home-pord1.png" :src="item.mainPic"
alt="Responsive image" :alt="item.title"
> >
</b-img> </b-img>
<article class="col-md-8"> <article class="col-md-8">
<h3 class="title">Advantages Of Front Shovel And Backhoe For Excavators</h3> <h3 class="title text-ellipsis">
<p class="news-content text-ellipsis "> {{ item.title }}
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. </h3>
</p> <p class="news-content text-ellipsis" v-html="item.description"></p>
<div> <div>
<span>- Aug 19, 2022-</span> <span>{{ item.createTime }}</span>
<img src="~assets/image/icon/goto1.png" :alt="$t('common.viewDetails')"> <img src="~assets/image/icon/goto1.png" :alt="$t('common.viewDetails')">
</div> </div>
</article> </article>
</nuxt-link> </nuxt-link>
<SeoPagination class="mt-4" /> <SeoPagination class="mt-4" :total="pordObj.total" />
</section> </section>
</template> </template>
<script> <script>
export default { export default {
name: 'news-list', name: 'news-list',
watchQuery: ['pageNum', 'catgId'],
data() { data() {
return { return {
bannerTopOptions: { 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: { methods: {
} }

2
pages/products.vue
View File

@ -36,7 +36,7 @@ export default {
}, },
async asyncData({$axios}) { async asyncData({$axios}) {
// 获取新闻分类 // 获取新闻分类
const categoryTree = await $axios.$get('/web/prodCategory') const categoryTree = await $axios.$get('/web/prodCategory?catgId=660179025d0e2e0e4263db0eec86a8cc')
return { return {
categoryTree categoryTree

91
pages/products/_id.vue
View File

@ -17,7 +17,7 @@
class="products-img-item" class="products-img-item"
:class="src===currentImgUrl ? 'is-products-img-active' : ''" :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> </swiper-slide>
<div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div> <div class="swiper-button-next" slot="button-next"></div>
@ -26,41 +26,10 @@
</div> </div>
</div> </div>
<article class="prod-details col-md-7"> <article class="prod-details col-md-7">
<h2 class="products-title">SINOTRUK HOWO Tractor Truck Head</h2> <h2 class="products-title">
<div class="parameter"> {{ prodDetail.title }}
<p> </h2>
<label>{{ $t('common.truckModel') }}:</label> <div class="parameter" v-html="prodDetail.description"></div>
<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>
<div class="visit"> <div class="visit">
<a class="box_shadow" href="javascript:;"> <a class="box_shadow" href="javascript:;">
@ -81,16 +50,14 @@
<div class="pretty-header"> <div class="pretty-header">
<h2>{{ $t('products.productDetails') }}</h2> <h2>{{ $t('products.productDetails') }}</h2>
</div> </div>
<div class="desc pt-3 pb-3"> <div class="desc rich-text pt-3 pb-3" v-html="prodDetail.content"></div>
富文本内容
</div>
<div class="guide"> <div class="guide">
<nuxt-link to="/"> <nuxt-link :to="`/products/${prevNews.id}`" v-if="prevNews">
Previous: How To Maintain The Chassis Of A Truck? {{ $t('common.prev') }}: {{ prevNews.title }}
</nuxt-link> </nuxt-link>
<nuxt-link to="/"> <nuxt-link :to="`/products/${nextNews.id}`" v-if="nextNews">
Next: Flatbed Trailer Buying Guide {{ $t('common.next') }}: {{ nextNews.title }}
</nuxt-link> </nuxt-link>
</div> </div>
</div> </div>
@ -230,16 +197,42 @@ export default {
}, },
} }
}, },
asyncData({$axios, params}) { async asyncData({$axios, params}) {
let productsImages = [ let {
require('../../assets/image/banner/home-pord1.png'), data: {
require('../../assets/image/banner/home1.png'), 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]; let currentImgUrl = productsImages[0];
return { return {
prodDetail,
currentImgUrl, 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: { methods: {

3
pages/products/index.vue
View File

@ -5,7 +5,7 @@
<li class="col-12 col-md-4" v-for="item in pordObj.records" :key="item.id"> <li class="col-12 col-md-4" v-for="item in pordObj.records" :key="item.id">
<nuxt-link <nuxt-link
class="products-item box_shadow mt-2" class="products-item box_shadow mt-2"
to="/products/123123" :to="`/products/${item.id}`"
> >
<article class="product-card box_shadow"> <article class="product-card box_shadow">
<img style="height: 200px;" class="img_reset" :src="item.mainPic" alt="product"></img> <img style="height: 200px;" class="img_reset" :src="item.mainPic" alt="product"></img>
@ -42,7 +42,6 @@ export default {
catgId: query.catgId || '', catgId: query.catgId || '',
} }
let {data: pordObj} = await $axios('/web/prodPageList', {params}) let {data: pordObj} = await $axios('/web/prodPageList', {params})
console.log(pordObj);
return { return {
pordObj pordObj