116 lines
3.0 KiB
Vue
116 lines
3.0 KiB
Vue
<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
|
|
class="products-item box_shadow mt-2"
|
|
:to="`/products/${item.id}?catgId=${item.catgId}&maxCatgId=${item.maxCatgId}`"
|
|
>
|
|
<article class="product-card box_shadow">
|
|
<img style="height: 200px;" class="img_reset" :src="item.mainPic" alt="product"></img>
|
|
<div class="product-card-content">
|
|
<h4 class="text-ellipsis">{{ item.title }}</h4>
|
|
<div class="prod-desc text-ellipsis" v-html="item.description"></div>
|
|
<!-- <p>{{ $t('common.truckModel') }}: ZZ4257N3247C1</p>
|
|
<p>{{ $t('common.dimension') }}: 6800x2490x3668</p>
|
|
<p>{{ $t('common.approachingAngle/Departure') }}: 16/70</p> -->
|
|
</div>
|
|
</article>
|
|
</nuxt-link>
|
|
</li>
|
|
</ul>
|
|
<div v-html="prodDown"></div>
|
|
<SeoPagination class="mt-4" :total="pordObj.total" />
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'products-list',
|
|
watchQuery: ['pageNum', 'catgId', 'maxCatgId'],
|
|
data() {
|
|
return {
|
|
bannerTopOptions: {
|
|
|
|
},
|
|
}
|
|
},
|
|
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.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: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.products-list {
|
|
box-sizing: border-box;
|
|
ul {
|
|
margin: 0;
|
|
li {
|
|
padding: 0 .3125rem;
|
|
.products-item {
|
|
width: 100%;
|
|
display: inline-block;
|
|
border: 1px solid #e6e8ec;
|
|
.product-card {
|
|
width: 100%;
|
|
height: min-content;
|
|
}
|
|
.product-card-content {
|
|
width: 100%;
|
|
height: 8.25rem;
|
|
padding: 1.125rem 1rem;
|
|
border-top: .0625rem solid #e6e8ec;
|
|
font-size: .875rem;
|
|
h4 {
|
|
margin-bottom: .8125rem;
|
|
color: #212222;
|
|
-webkit-line-clamp: 1;
|
|
font-size: .875rem;
|
|
}
|
|
p {
|
|
color: #878b90;
|
|
}
|
|
.prod-desc {
|
|
-webkit-line-clamp: 4; //行数
|
|
}
|
|
.view-details {
|
|
margin: 0 auto;
|
|
margin-top: 2rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</style> |