<template>
|
<div class="goods-list">
|
<h4 v-if="goods.title">{{goods.title}}</h4>
|
<div class="row" v-for="(item, index) in dataList" :key="index">
|
<div v-if="goods.cols === 1">
|
<div class="col-1" v-for="(cell, n) in item" :key="n">
|
<a href="javascript:;" @click="jumpmenu(cell)">
|
<img :src="cell.imgurl" alt="">
|
</a>
|
</div>
|
</div>
|
<div v-else-if="goods.cols === 2">
|
<div class="col-2" v-for="(cell, n) in item" :key="n">
|
<a href="javascript:;" @click="jumpmenu(cell)">
|
<img :src="cell.imgurl" alt="">
|
</a>
|
<div class="tail">
|
<p class="title" v-text="cell.name"></p>
|
</div>
|
<div class="tail">
|
<span class="sign" v-if="cell.sign" v-text="cell.sign"></span>
|
</div>
|
<div class="tail">
|
<span class="price">{{dict.money + cell.price}}</span>
|
<a href="javascript:;" v-if="routername === 'home'" class="link" v-text="dict.discover" @click="jumpdiscover(cell)"></a>
|
</div>
|
</div>
|
</div>
|
<div v-else>
|
<div class="col-1">
|
<a href="javascript:;">
|
<img :src="item" alt="">
|
</a>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import {dict} from '../store/dictionary'
|
export default {
|
name: 'goodsList',
|
props: {
|
goods: {
|
required: true
|
}
|
},
|
data () {
|
return {
|
dict: dict,
|
dataList: null,
|
routername: null
|
}
|
},
|
methods: {
|
jumpmenu (item) {
|
if (this.goods.view) {
|
this.$emit('goodslistjump', {
|
view: this.goods.view,
|
type: item.type ? item.type : null,
|
id: item.id ? item.id : null
|
})
|
}
|
},
|
jumpdiscover (item) {
|
this.$emit('goodslistjump', {
|
view: 'goods',
|
type: item.type ? item.type : null,
|
id: item.id ? item.id : null,
|
header: 'discover'
|
})
|
}
|
},
|
mounted: function () {
|
this.routername = this.$route.name
|
this.dataList = []
|
if (Array.isArray(this.goods)) {
|
this.dataList = this.goods
|
} else {
|
let sum = Math.ceil(this.goods.data.length / this.goods.cols)
|
for (let i = 0; i < sum; i++) {
|
this.dataList.push([])
|
}
|
this.goods.data.forEach((ele, index) => {
|
let n = Math.floor(index / this.goods.cols)
|
this.dataList[n].push(ele)
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.goods-list {
|
font-size: 16px;
|
width: 100%;
|
overflow-x: hidden;
|
border-bottom: 5px solid #EEEEEE;
|
}
|
.goods-list h4 {
|
background: #ffffff;
|
height: 3em;
|
line-height: 3em;
|
padding-left: 1em;
|
}
|
.goods-list .row a img {
|
display: block;
|
width: 100%;
|
}
|
.goods-list .row .tail {
|
height: 20px;
|
padding: 5px;
|
}
|
.goods-list .row .tail span {
|
display: inline-block;
|
}
|
.goods-list .row .tail .title {
|
width: 100%;
|
font-size: 0.8em;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
overflow: hidden;
|
}
|
.goods-list .row .tail .sign {
|
font-size: 0.6em;
|
display: inline-block;
|
border: 1px solid #ff0000;
|
border-radius: 3px;
|
position: relative;
|
padding: 1px 5px 0px;
|
top: 2px;
|
}
|
.goods-list .row .tail .price {
|
color: #ff0000;
|
font-size: 1.1em;
|
position: relative;
|
top: -3px;
|
}
|
.goods-list .row .tail .link {
|
display: block;
|
float: right;
|
font-size: 0.8em;
|
border: 1px solid #bcbcbc;
|
border-radius: 3px;
|
padding: 1px 12px 0px;
|
color: #bcbcbc;
|
margin-top: -3px;
|
}
|
</style>
|
