<template>
|
<div class="custom-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 in item" :key="cell.type">
|
<a href="javascript:;">
|
<img :src="cell.imgurl" alt="">
|
</a>
|
</div>
|
</div>
|
<div v-else-if="goods.cols === 2">
|
<div class="col-2" v-for="cell in item" :key="cell.type">
|
<a href="javascript:;">
|
<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="cell.link" class="link" v-text="cell.link"></a>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import {dict} from '../store/dictionary'
|
export default {
|
name: 'goodsList',
|
props: {
|
goods: {
|
type: Object,
|
required: true
|
}
|
},
|
data () {
|
return {
|
dict: dict,
|
dataList: null
|
}
|
},
|
mounted: function () {
|
this.dataList = []
|
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>
|
.custom-list {
|
font-size: 16px;
|
width: 100%;
|
border-bottom: 5px solid #EEEEEE;
|
}
|
.custom-list h4 {
|
background: #ffffff;
|
height: 3em;
|
line-height: 3em;
|
padding-left: 1em;
|
}
|
.custom-list .row a img {
|
display: block;
|
width: 100%;
|
}
|
.custom-list .row .tail {
|
height: 20px;
|
padding: 5px;
|
}
|
.custom-list .row .tail span {
|
display: inline-block;
|
}
|
.custom-list .row .tail .title {
|
width: 100%;
|
font-size: 0.8em;
|
font-weight: bold;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
.custom-list .row .tail .sign {
|
font-size: 0.8em;
|
display: inline-block;
|
border: 1px solid #ff0000;
|
border-radius: 3px;
|
position: relative;
|
padding: 2px 5px 0px;
|
top: -5px;
|
}
|
.custom-list .row .tail .price {
|
color: #ff0000;
|
font-size: 1.1em;
|
position: relative;
|
top: -6px;
|
}
|
.custom-list .row .tail .link {
|
display: block;
|
float: right;
|
font-size: 0.8em;
|
border: 1px solid #bcbcbc;
|
border-radius: 3px;
|
padding: 3px 15px 0px;
|
color: #bcbcbc;
|
margin-top: -6px;
|
}
|
</style>
|
