eric-utilslist
Version:
基础组件类，五星好评,商品列表,计数器
291 lines (286 loc) • 9 kB
JavaScript
import Component from "./Component.js";
import Utils from "./Utils.js";
export default class Goods extends Component {
static styleBool = false;
static ADD_GOODS_EVENT="add_goods_event";
data;
prev;
img;
price;
id;
constructor(_data) {
super("div");
this.elem.target="_blank";
this.elem.addEventListener("mouseover", e => this.mouseHandler(e));
this.elem.addEventListener("click",e=>this.clickHandler(e));
if (_data) this.setData(_data);
this.elem.className = "goods";
if (!Goods.styleBool) Goods.setStyle();
}
clickHandler(e){
var evt=new Event(Goods.ADD_GOODS_EVENT);
evt.id=this.id;
this.dispatchEvent(evt);
}
setData(_data) {
if (!_data) return;
this.data = _data;
this.elem.href="./item.html?id="+_data.list[0].id;
this.id=_data.list[0].id;
this.elem.innerHTML = `
<div class='iconImg'>
<img src='${_data.list[0].img}'>
${!_data.schedule ? "" : `<div class='iconPromote'>
${!_data.schedule.img ? "" : `<img src='${_data.schedule.img}'>`}
${!_data.schedule.info ? "" : `<span class='iconPromoteTxt'>${_data.schedule.info}</span>`}
</div>`}
</div>
<div class='iconList clear'>
${_data.list.reduce((v,t)=>v+`<img class='icon-img' id='${t.id}' src='${t.img}'>`,"")}
</div>
<div class='priceCon'>
￥<i>${Number(_data.list[0].price).toFixed(2)}</i>
</div>
<div class='titleCon'>
<span class='titleIcon'>京品</span>
<a href='#'>${_data.info}</a>
</div>
<div class='info clear'>
${_data.arguments.reduce((v,t)=>v+`<span class='infoitem'>${t}</span>`,"")}
</div>
<div class='judgeCon'>
<span class='judge'>${_data.judge>10000 ? ~~(_data.judge/10000)+"+万" : _data.judge}</span>条评论
</div>
<div class='shoppingCon'>
<a href='#' class='shopping'>${_data.shop}</a><img src='./img/chat.png'>
</div>
${!_data.icons ? "" : Object.keys(_data.icons).reduce((v,key)=>{
if(!_data.icons[key] || _data.icons[key].length===0) return v;
return v+_data.icons[key].reduce((value,item)=>value+`<span class='${key}'>${item}</span>`,"")
},"")}
`
this.img = this.elem.querySelector(".iconImg>img");
this.price = this.elem.querySelector(".priceCon>i");
var evt = new MouseEvent("mouseover", {
bubbles: true
});
this.elem.querySelector(".iconList>img").dispatchEvent(evt);
}
mouseHandler(e) {
if (e.target.className !== "icon-img") return;
if (this.prev) {
this.prev.style.borderColor = "#ddd"
}
this.prev = e.target;
this.prev.style.borderColor = "red";
if (this.img) this.img.src = e.target.src;
if (this.price) this.price.textContent = Number(this.data.list.find(t => t.id == e.target.id).price).toFixed(2);
this.elem.href="./item.html?id="+e.target.id
this.id=Number(e.target.id);
}
static setStyle() {
Goods.styleBool = true;
Utils.setCSS(`.goods{
width: 240px;
height: 444px;
padding: 12px 9px;
font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
color: #666;
position: relative;
float: left;
text-decoration: none;
}
.goods:hover{
box-shadow: 0px 0px 4px #CCC;
}
.goods>.iconImg{
text-decoration: none;
width: 100%;
height: 220px;
text-align: center;
display: block;
position: relative;
}
.goods>.iconImg>img{
width: 220px;
height: 220px;
}
.goods>.iconImg>.iconPromote{
width: 220px;
height: 25px;
text-align: left;
position: absolute;
bottom: 0;
left:0;
background-color: rgba(0,0,0,0.6);
}
.goods>.iconImg>.iconPromote>img{
margin-left: 10px;
vertical-align: middle;
}
.goods>.iconImg .iconPromoteTxt{
line-height: 25px;
color: white;
margin-left: 10px;
}
.goods>.iconList{
margin-left: 2px;
}
.goods>.iconList>img{
float:left;
/* #e4393c */
border: 1px solid #ddd;
padding: 1px;
width:25px;
height: 25px;
margin: 2px;
}
.clear::after
{
content: "";
display: block;
height: 0;
overflow: hidden;
clear: both;
visibility: hidden;
}
.goods>.priceCon{
font-size: 16px;
color: #e4393c;
margin: 0;
margin-top: 8px;
}
.goods>.priceCon>i{
font-size: 20px;
font-style: normal;
font-weight: 400;
font-family: Verdana;
}
.goods>.titleCon{
width: 220px;
overflow: hidden;
white-space: nowrap;
margin: 0;
margin-top: 8px;
padding: 0;
}
.goods>.titleCon>.titleIcon{
float: left;
height: 16px;
padding: 0 3px;
margin-top: 2px;
margin-right: 3px;
overflow: hidden;
color: #fff;
font: 12px/16px "Helvetica Neue","Hiragino Sans GB",SimSun,serif;
background: #c81623;
border-radius: 2px;
}
.goods>.titleCon>a{
text-decoration: none;
color: #666;
}
.goods>.titleCon>a:hover{
color: #c81623;
}
.goods>.info{
margin: 0;
margin-top: 8px;
}
.goods>.info>.infoitem{
float: left;
height: 19px;
line-height: 19px;
padding: 0 6px;
margin-right: 7px;
color: #999;
background: #f4f4f4;
text-decoration: none;
}
.goods>.info>.infoitem:hover{
color: #c81623;
}
.goods>.judgeCon{
margin-top: 8px;
}
.goods>.judgeCon>.judge
{
color: #646fb0;
font-family: verdana;
font-weight: 700;
}
.goods>.shoppingCon{
margin-top: 8px;
margin-bottom: 10px;
}
.goods>.shoppingCon>.shopping{
color: #999;
text-decoration: none;
display: inline-block;
max-width: 122px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right:10px;
}
.goods>.shoppingCon>.shopping:hover{
color: #c81623;
}
.icon1,.icon3,.icon2{
float: left;
height: 16px;
line-height: 16px;
padding: 0 3px;
margin-right: 3px;
overflow: hidden;
text-align: center;
font-style: normal;
font-size: 12px;
font-family: "Helvetica Neue","Hiragino Sans GB",SimSun,serif;
background: #e23a3a;
color: #FFF;
cursor: default;
border-radius: 2px;
}
.icon4{
float: left;
height: 14px;
line-height: 14px;
padding: 0 3px;
border: 1px solid #e23a3a;
margin-right: 3px;
overflow: hidden;
text-align: center;
font-style: normal;
font-size: 12px;
font-family: "Helvetica Neue","Hiragino Sans GB",SimSun,serif;
border-radius: 2px;
color: #e23a3a;
}
.icon3{
background: #31c19e;
}
.icon2{
float: left;
height: 14px;
line-height: 14px;
line-height: 16px\0;
padding: 0 3px;
margin-right: 3px;
overflow: hidden;
text-align: center;
font-style: normal;
font-size: 12px;
font-family: "Helvetica Neue","Hiragino Sans GB",SimSun,serif;
border-radius: 2px;
border:1px solid #4d88ff;
color: #4d88ff;
background-color: white;
}
.double11{
position: absolute;
right: 10px;
top:20px;
}`)
}
}