产品分页和文章分类增加显示富文本模块；增加后台产品和文章详情预览页面
This commit is contained in:
hejin
parent
300019a7fc
commit
f21acaa62a
217
pages/admin-preview/article-page/_id.vue
Normal file
217
pages/admin-preview/article-page/_id.vue
Normal file
@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<!-- 新闻详情 -->
|
||||
<div class="container article-page-info">
|
||||
<div class="info-top">
|
||||
<h2 class="article-page-title">{{ detais.title }}</h2>
|
||||
<p class="article-page-date">{{ detais.createTime }}</p>
|
||||
</div>
|
||||
|
||||
<div class="article-page-content">
|
||||
<div class="rich-text" v-html="detais.content"></div>
|
||||
<ContactFooter />
|
||||
<div class="guide" :style="{'justify-content': prevarticle ? 'space-between' : 'flex-end'}">
|
||||
<nuxt-link :to="`/article-page/${prevarticle.id}`" v-if="prevarticle">
|
||||
{{ $t('common.prev') }}: {{ prevarticle.title }}
|
||||
</nuxt-link>
|
||||
|
||||
<nuxt-link :to="`/article-page/${nextarticle.id}`" v-if="nextarticle">
|
||||
{{ $t('common.next') }}: {{ nextarticle.title }}
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="related-article-page mb-4">
|
||||
<div class="pretty-header">
|
||||
<h2>{{ $t('article.relatedarticle') }}</h2>
|
||||
</div>
|
||||
<nuxt-link
|
||||
class="article-page-related-item box_shadow"
|
||||
to="/"
|
||||
v-for="item in 6"
|
||||
:key="item"
|
||||
>
|
||||
<p class="text-ellipsis">he Importance Of Regular Maintenance For Your Flatbed Trailer</p>
|
||||
<span>- Oct 25, 2024-</span>
|
||||
</nuxt-link>
|
||||
</div> -->
|
||||
|
||||
<div class="related-products" v-if="relatedProductList.length">
|
||||
<div class="pretty-header">
|
||||
<h2>{{ $t('news.relatedProducts') }}</h2>
|
||||
</div>
|
||||
<b-carousel
|
||||
class="mt-3"
|
||||
id="carousel-1"
|
||||
:interval="4000"
|
||||
controls
|
||||
indicators
|
||||
>
|
||||
<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 item" :key="son.id">
|
||||
<article class="product-card box_shadow">
|
||||
<b-img
|
||||
:src="son.mainPic"
|
||||
fluid
|
||||
:alt="son.title"
|
||||
>
|
||||
</b-img>
|
||||
<div class="product-card-content">
|
||||
<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> -->
|
||||
</div>
|
||||
</article>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</b-carousel-slide>
|
||||
</b-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'article-page-info',
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
validate({query}) {
|
||||
return query.private === '1BC0FFEC2294283E9BDB89E188FCA574' ? true : false
|
||||
},
|
||||
async asyncData({$axios, params }) {
|
||||
let {
|
||||
data:{
|
||||
busiProdNew:detais,
|
||||
next:nextarticle,
|
||||
previous:prevarticle,
|
||||
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,
|
||||
nextarticle,
|
||||
prevarticle,
|
||||
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: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.article-page-info {
|
||||
.info-top {
|
||||
padding-bottom: .5rem;
|
||||
border-bottom: 1px solid #d8dde1;
|
||||
.article-page-title {
|
||||
margin: 1.5625rem 0;
|
||||
margin-bottom: .9375rem;
|
||||
color: #444444;
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.article-page-date {
|
||||
color: #9e9e9e;
|
||||
text-align: center;
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
.article-page-content {
|
||||
margin-bottom: 2.6875rem;
|
||||
.guide {
|
||||
padding-top: .625rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #515760;
|
||||
border-top: 1px solid #d8dde1;
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
.related-article-page {
|
||||
.news-related-item {
|
||||
padding: 1.125rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #d8dde1;
|
||||
font-size: .875rem;
|
||||
p {
|
||||
flex: 1;
|
||||
color: #444444;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
span {
|
||||
color: #9e9e9e;
|
||||
}
|
||||
}
|
||||
}
|
||||
.related-products {
|
||||
#carousel-1 {
|
||||
@mixin controls {
|
||||
width: 2.875rem;
|
||||
height: 2.875rem;
|
||||
background-color: #7f7f7f;
|
||||
background-size: 1.25rem;
|
||||
}
|
||||
::v-deep .carousel-control-prev-icon {
|
||||
@include controls;
|
||||
}
|
||||
::v-deep .carousel-control-next-icon {
|
||||
@include controls;
|
||||
}
|
||||
}
|
||||
.product-card {
|
||||
border: 1px solid #e6e8ec;
|
||||
.product-card-content {
|
||||
padding: 1.125rem 1rem;
|
||||
border-top: .0625rem solid #e6e8ec;
|
||||
font-size: .875rem;
|
||||
h4 {
|
||||
margin-bottom: .8125rem;
|
||||
color: #212222;
|
||||
font-size: .875rem;
|
||||
}
|
||||
p {
|
||||
color: #878b90;
|
||||
}
|
||||
.view-details {
|
||||
margin: 0 auto;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
440
pages/admin-preview/products/_id.vue
Normal file
440
pages/admin-preview/products/_id.vue
Normal file
@ -0,0 +1,440 @@
|
||||
<template>
|
||||
<!-- 产品详情 -->
|
||||
<div class="container products-info">
|
||||
<div class="row pl-0">
|
||||
<div class="products-preview col-md-5">
|
||||
<div class="preview-img">
|
||||
<no-ssr>
|
||||
<vuePhotoZoomPro :url="currentImgUrl" :width="100" :scale="3"/>
|
||||
</no-ssr>
|
||||
</div>
|
||||
<div class="products-scroll-box">
|
||||
<no-ssr>
|
||||
<swiper :options="swiperOptions">
|
||||
<swiper-slide
|
||||
v-for="src in productsImages"
|
||||
:key="src"
|
||||
class="products-img-item"
|
||||
:class="src===currentImgUrl ? 'is-products-img-active' : ''"
|
||||
>
|
||||
<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>
|
||||
</swiper>
|
||||
</no-ssr>
|
||||
</div>
|
||||
</div>
|
||||
<article class="prod-details col-md-7">
|
||||
<h2 class="products-title">
|
||||
{{ prodDetail.title }}
|
||||
</h2>
|
||||
<div class="parameter" v-html="prodDetail.description"></div>
|
||||
|
||||
<div class="visit">
|
||||
<a class="box_shadow" href="#form-target">
|
||||
<img src="~assets/image/icon/email-highlight.png" :alt="$t('common.sendInquiry')" />
|
||||
{{ $t('common.sendInquiry') }}
|
||||
</a>
|
||||
<a @click="chat" class="box_shadow" href="javascript:;">
|
||||
<img src="~assets/image/icon/msg-highlight.png" :alt="$t('common.chatNow')" />
|
||||
{{ $t('common.chatNow') }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<ContactFooter />
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="pretty-header">
|
||||
<h2>{{ $t('products.productDetails') }}</h2>
|
||||
</div>
|
||||
<div class="desc rich-text pt-3 pb-3" v-html="prodDetail.content"></div>
|
||||
<div class="guide" :style="{'justify-content': prevNews ? 'space-between' : 'flex-end'}">
|
||||
<nuxt-link :to="`/products/${prevNews.id}`" v-if="prevNews">
|
||||
{{ $t('common.prev') }}: {{ prevNews.title }}
|
||||
</nuxt-link>
|
||||
|
||||
<nuxt-link :to="`/products/${nextNews.id}`" v-if="nextNews">
|
||||
{{ $t('common.next') }}: {{ nextNews.title }}
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<div class="pretty-header" id="form-target">
|
||||
<h2>{{ $t('products.inquiry') }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="form-box box_shadow mt-3">
|
||||
<b-form @submit="onSubmit">
|
||||
<b-form-group
|
||||
id="input-name"
|
||||
label-for="input-name"
|
||||
v-if="formConfig.name"
|
||||
:invalid-feedback="$t('contactUs.name')"
|
||||
>
|
||||
<template v-solt:lable>
|
||||
<div class="mb-2 d-flex align-items-center">
|
||||
<b-img class="mr-1" src="~assets/image/icon/user.png" fluid :alt="$t('contactUs.name')"></b-img>
|
||||
<h6 class="label-text">{{ $t('contactUs.name') }}</h6>
|
||||
</div>
|
||||
</template>
|
||||
<b-form-input
|
||||
id="input-name"
|
||||
v-model="dataForm.name"
|
||||
:required="formConfig.nameMust"
|
||||
>
|
||||
</b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
id="input-title"
|
||||
label-for="input-title"
|
||||
v-if="formConfig.title"
|
||||
:invalid-feedback="$t('contactUs.title')"
|
||||
>
|
||||
<template v-solt:lable>
|
||||
<div class="mb-2 d-flex align-items-center">
|
||||
<b-img class="mr-1" src="~assets/image/icon/title.png" fluid :alt="$t('contactUs.title')"></b-img>
|
||||
<h6 class="label-text">{{ $t('contactUs.title') }}</h6>
|
||||
</div>
|
||||
</template>
|
||||
<b-form-input
|
||||
id="input-title"
|
||||
v-model="dataForm.title"
|
||||
:required="formConfig.titleMust"
|
||||
>
|
||||
</b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
id="input-company"
|
||||
label-for="input-company"
|
||||
v-if="formConfig.company"
|
||||
:invalid-feedback="$t('contactUs.company')"
|
||||
>
|
||||
<template v-solt:lable>
|
||||
<div class="mb-2 d-flex align-items-center">
|
||||
<b-img class="mr-1" src="~assets/image/icon/company.png" fluid :alt="$t('contactUs.company')"></b-img>
|
||||
<h6 class="label-text">{{ $t('contactUs.company') }}</h6>
|
||||
</div>
|
||||
</template>
|
||||
<b-form-input
|
||||
id="input-company"
|
||||
v-model="dataForm.company"
|
||||
:required="formConfig.companyMust"
|
||||
>
|
||||
</b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
id="input-mail"
|
||||
label-for="input-mail"
|
||||
v-if="formConfig.email"
|
||||
:invalid-feedback="$t('contactUs.mail')"
|
||||
>
|
||||
<template v-solt:lable>
|
||||
<div class="mb-2 d-flex align-items-center">
|
||||
<b-img style="filter: brightness(0%);" class="mr-1" src="~assets/image/icon/email.png" fluid :alt="$t('contactUs.mail')"></b-img>
|
||||
<h6 class="label-text">{{ $t('contactUs.mail') }}</h6>
|
||||
</div>
|
||||
</template>
|
||||
<b-form-input
|
||||
id="input-mail"
|
||||
type="email"
|
||||
v-model="dataForm.email"
|
||||
:required="formConfig.emailMust"
|
||||
>
|
||||
</b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
id="input-contactWay"
|
||||
label-for="input-contactWay"
|
||||
:invalid-feedback="$t('contactUs.contactWay')"
|
||||
v-if="formConfig.tel"
|
||||
>
|
||||
<template v-solt:lable>
|
||||
<div class="mb-2 d-flex align-items-center">
|
||||
<b-img style="filter: brightness(0%);" class="mr-1" src="~assets/image/icon/labl-phone.png" fluid :alt="$t('contactUs.contactWay')"></b-img>
|
||||
<h6 class="label-text">{{ $t('contactUs.contactWay') }}</h6>
|
||||
</div>
|
||||
</template>
|
||||
<b-form-input
|
||||
id="input-contactWay"
|
||||
v-model="dataForm.tel"
|
||||
:required="formConfig.telMust"
|
||||
>
|
||||
</b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
id="input-desc"
|
||||
label-for="input-desc"
|
||||
:invalid-feedback="$t('contactUs.desc')"
|
||||
>
|
||||
<template v-solt:lable>
|
||||
<div class="mb-2 d-flex align-items-center">
|
||||
<b-img style="filter: brightness(0%);" class="mr-1" src="~assets/image/icon/msg.png" fluid :alt="$t('contactUs.desc')"></b-img>
|
||||
<h6 class="label-text">{{ formConfig.content }}</h6>
|
||||
</div>
|
||||
</template>
|
||||
<b-form-textarea
|
||||
id="input-desc"
|
||||
v-model="dataForm.content"
|
||||
rows="3"
|
||||
>
|
||||
</b-form-textarea>
|
||||
</b-form-group>
|
||||
|
||||
<div class="text-center">
|
||||
<b-button class="w-25" type="submit" variant="primary" pill>
|
||||
{{ $t('common.submit') }}
|
||||
</b-button>
|
||||
</div>
|
||||
</b-form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 聊天记录弹出框-->
|
||||
<chat-form ref="chatFrom"></chat-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vuePhotoZoomPro from 'vue-photo-zoom-pro';
|
||||
import 'vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css';
|
||||
import chatForm from "../../products/chatForm.vue";
|
||||
if (process.client) {
|
||||
var { swiper, swiperSlide } = require("vue-awesome-swiper");
|
||||
}
|
||||
import "swiper/css/swiper.min.css";
|
||||
|
||||
export default {
|
||||
name: 'products-info',
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide,
|
||||
vuePhotoZoomPro,
|
||||
chatForm
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentImgUrl: '',
|
||||
dataForm: {
|
||||
name: '',
|
||||
title: '',
|
||||
company: '',
|
||||
email: '',
|
||||
tel: '',
|
||||
content: '',
|
||||
equipment: this.$store.state.device
|
||||
},
|
||||
swiperOptions: {
|
||||
slidesPerView :'auto',
|
||||
spaceBetween: 10,
|
||||
slidesPerGroupAuto:true,
|
||||
grabCursor: true,
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isMob: () => {
|
||||
return this.$store.state.device === '手机端' ? true : false
|
||||
}
|
||||
},
|
||||
validate({query}) {
|
||||
return query.private === 'CAC8F0807B8FB7EA72AF3596600F888A' ? true : false
|
||||
},
|
||||
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];
|
||||
|
||||
const { data: formConfig } = await $axios.get('/web/inquirySet')
|
||||
|
||||
return {
|
||||
prodDetail,
|
||||
currentImgUrl,
|
||||
productsImages,
|
||||
nextNews,
|
||||
prevNews,
|
||||
formConfig
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.prodDetail.title,
|
||||
meta: [
|
||||
{
|
||||
hid: 'keywords',
|
||||
name: 'keywords',
|
||||
content: this.prodDetail.prodKeyword
|
||||
},
|
||||
{
|
||||
hid: 'description',
|
||||
name: 'description',
|
||||
content: this.prodDetail.prodDescription
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit(e) {
|
||||
e.preventDefault()
|
||||
this.$axios.post('/web/inquirySave', this.dataForm).then(() => {
|
||||
this.$message.success(this.$t('common.submitSuccess'))
|
||||
setTimeout(() => {
|
||||
window.location.reload()
|
||||
}, 1500)
|
||||
})
|
||||
},
|
||||
/**打开聊天窗口，并建立连接*/
|
||||
chat(){
|
||||
this.$refs.chatFrom.show(this.prodDetail.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
.is-products-img-active {
|
||||
border: 1px solid #CC0001;
|
||||
}
|
||||
.swiper-button-next, .swiper-button-prev {
|
||||
width: 1.1875rem;
|
||||
height: 3.75rem;
|
||||
top: 38%;
|
||||
color: #ffffff;
|
||||
background-color: rgba(198, 198, 198, 0.6);
|
||||
opacity: 1 !important;
|
||||
&::after{
|
||||
font-size: unset;
|
||||
}
|
||||
}
|
||||
.swiper-button-prev {
|
||||
left: 0;
|
||||
}
|
||||
.swiper-button-next {
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.products-info {
|
||||
padding-top: .9375rem;
|
||||
.products-preview {
|
||||
height: min-content;
|
||||
.preview-img {
|
||||
width: 100%;
|
||||
max-height: 25.625rem;
|
||||
border: 1px solid #d9dde0;
|
||||
::v-deep .vue-photo-zoom-pro {
|
||||
max-height: 25rem;
|
||||
.img-region {
|
||||
max-width: 100% !important;
|
||||
max-height: 25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.products-scroll-box {
|
||||
width: 100%;
|
||||
height: 6.25rem;
|
||||
margin-top: .625rem;
|
||||
.products-img-item {
|
||||
width: 3.75rem !important;
|
||||
height: 3.75rem !important;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.prod-details {
|
||||
.products-title {
|
||||
width: 100%;
|
||||
height: min-content;
|
||||
min-height: 3.5rem;
|
||||
margin-bottom: 1.4375rem;
|
||||
padding: 0 1.4375rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
background: url('~assets/image/backGroundImg/products-title.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-family: 'SourceHanSansCN-Heavy';
|
||||
font-size: 1rem;
|
||||
}
|
||||
.parameter {
|
||||
height: min-content;
|
||||
min-height: 17.5rem;
|
||||
p {
|
||||
color: #2d2d30;
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
.visit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
a {
|
||||
flex: 1;
|
||||
height: 2.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
border-radius: 1.25rem;
|
||||
font-size: .875rem;
|
||||
&:first-child {
|
||||
margin-right: .75rem;
|
||||
background-color: #015fe8;
|
||||
}
|
||||
&:last-child {
|
||||
background-color: #fc8815;
|
||||
}
|
||||
img {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.guide {
|
||||
padding-top: .625rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #515760;
|
||||
border-top: 1px solid #d8dde1;
|
||||
font-size: .875rem;
|
||||
}
|
||||
.form-box {
|
||||
padding: 2.125rem 7.8125rem;
|
||||
border: 1px solid #ebeef0;
|
||||
background: linear-gradient( 180deg, #FDFEFE 0%, #F5FBFF 100%);
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// 特殊样式小屏幕处理
|
||||
@media screen and (max-width:400px) {
|
||||
.form-box {
|
||||
padding: 1.25rem !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<!-- 文章模块 -->
|
||||
<section class="article-page-list">
|
||||
<div v-html="prodUp"></div>
|
||||
<nuxt-link
|
||||
class="article-page-item box_shadow row mt-4"
|
||||
:to="`/article-page/${item.id}?maxCatgId=${item.maxCatgId}&catgId=${item.catgId}`"
|
||||
@ -24,7 +25,7 @@
|
||||
</div>
|
||||
</article>
|
||||
</nuxt-link>
|
||||
|
||||
<div v-html="prodDown"></div>
|
||||
<SeoPagination class="mt-4" :total="pordObj.total" />
|
||||
</section>
|
||||
</template>
|
||||
@ -40,6 +41,14 @@ export default {
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
prodUp() {
|
||||
return this.$store.state.device === '手机端' ? this.catgInfo.prodUpApp : this.catgInfo.prodUp
|
||||
},
|
||||
prodDown() {
|
||||
return this.$store.state.device === '手机端' ? this.catgInfo.prodDownApp : this.catgInfo.prodDown
|
||||
}
|
||||
},
|
||||
async asyncData({$axios,query}) {
|
||||
let params = {
|
||||
pageNum: query.pageNum || 1,
|
||||
@ -48,8 +57,17 @@ export default {
|
||||
}
|
||||
let {data: pordObj} = await $axios('/web/newsPageList', {params})
|
||||
|
||||
let catgInfo = {}
|
||||
if (params.catgId) {
|
||||
var {data: catgInfoRes} = await $axios.get(`/web/categoryInfo?id=${query.catgId || query.maxCatgId ||''}`)
|
||||
catgInfo = catgInfoRes
|
||||
}
|
||||
console.log(catgInfo);
|
||||
|
||||
|
||||
return {
|
||||
pordObj
|
||||
pordObj,
|
||||
catgInfo
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<!-- 产品列表 -->
|
||||
<section class="products-list">
|
||||
<div v-html="prodUp"></div>
|
||||
<ul class="row pl-0">
|
||||
<li class="col-12 col-md-4" v-for="item in pordObj.records" :key="item.id">
|
||||
<nuxt-link
|
||||
@ -20,6 +21,7 @@
|
||||
</nuxt-link>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-html="prodDown"></div>
|
||||
<SeoPagination class="mt-4" :total="pordObj.total" />
|
||||
</section>
|
||||
</template>
|
||||
@ -35,17 +37,31 @@ export default {
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
prodUp() {
|
||||
return this.$store.state.device === '手机端' ? this.catgInfo.prodUpApp : this.catgInfo.prodUp
|
||||
},
|
||||
prodDown() {
|
||||
return this.$store.state.device === '手机端' ? this.catgInfo.prodDownApp : this.catgInfo.prodDown
|
||||
}
|
||||
},
|
||||
async asyncData({$axios,query}) {
|
||||
let params = {
|
||||
pageNum: query.pageNum || 1,
|
||||
pageSize: 9,
|
||||
catgId: query.catgId || query.maxCatgId ||'',
|
||||
}
|
||||
let {data: pordObj} = await $axios('/web/prodPageList', {params})
|
||||
let {data: pordObj} = await $axios.get('/web/prodPageList', {params})
|
||||
|
||||
let catgInfo = {}
|
||||
if (params.catgId) {
|
||||
var {data: catgInfoRes} = await $axios.get(`/web/categoryInfo?id=${query.catgId || query.maxCatgId ||''}`)
|
||||
catgInfo = catgInfoRes
|
||||
}
|
||||
return {
|
||||
pordObj,
|
||||
maxCatgId: query.maxCatgId || '',
|
||||
catgInfo
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user