商品列表

商品列表:
html代码：

js代码：

class GoodItem{
    constructor(props,parent) {
        this.props = props;
        this.googItem = this.initGood(parent);
        // 不把赋值写里面，将赋值全部删了然后写一个render方法
        // 去掉第一句this.props = props; 直接给函数传参
        // 并且将所有需要传参的 修改为 GoodItem的属性，用于访问
        // this.render(props);
    }
    render(_props){
        // this.googImg.src = _props.src;
        // this.spanPrice.textContent = '￥'+_props.nowPrice;
        // this.spanDelPrice.textContent = '￥'+ _props.delPrice;
        // this.span.width =  _props.percent *100+'%',
        // this.spanPercent.textContent =_props.percent *100+'%';
    }
    initGood(parent){
        if(this.googItem) return  this.googItem;
        let goodItem = document.createElement('div');
        goodItem.className = 'goodItem';
        Object.assign(goodItem.style,{
            width:'290px',
            height:'390px',
            marginLeft:'10px',
            marginBottom:'20px',
            float:'left',
            backgroundColor: 'white',
        })
        this.createInfo(goodItem);
        this.createSnapUp(goodItem);
        if(!parent)parent = document.body;
        parent.appendChild(goodItem);
        return goodItem;
    }
    createInfo(parent){
        let goodInfo = document.createElement('div');
        goodInfo.className = 'goodInfo',
        Object.assign(goodInfo.style,{
            textAlign: 'center',
            height:'330px',
            width:'100%',
        })
        // this.googImg = new Image();
        let goodImg = new Image();
        goodImg.src = this.props.src;
        Object.assign(goodImg.style,{
            marginTop: '20px',
            transition: 'all 1s ease 0s',
        })
        goodImg.addEventListener('mouseenter',this.mouseHandler)
        goodImg.addEventListener('mouseleave',this.mouseHandler)
        goodInfo.appendChild(goodImg);
        let goodMsg = document.createElement('p');
        goodMsg.textContent = this.props.text;
        Object.assign(goodMsg.style,{
            fontSize:'14px',
            fontFamily:'Microsoft YaHei',
            overflow:'hidden',
            height:'40px',
            width:'230px',
            lineHeight:'22px',
            margin:'10px auto 0',
        })
        goodInfo.appendChild(goodMsg);
        parent.appendChild(goodInfo);
    }
    createSnapUp(parent){
        let SnapUp = document.createElement('div');
        SnapUp.className = 'SnapUp';
        Object.assign(SnapUp.style,{
            border:'1px solid rgb(224,18,34)',
            boxSizing :'border-box',
            width:'290px',
            height:'62px',
            position:'relative',
        })
        let snapUpLeft = document.createElement('div');
        Object.assign(snapUpLeft.style,{
            margin:'0 87px 0 5px',
        })
        let div1 = document.createElement('div');
        Object.assign(div1.style,{
            fontSize:'14px'
        })
        let div2 = document.createElement('div');
        Object.assign(div2.style,{
            fontSize:'16px',
            marginLeft:'5px',
            lineHeight: '27px',
        })
        // this.spanPrice = document.createElement('span');
        let spanPrice = document.createElement('span');
        // this.spanDelPrice = document.createElement('span');
        spanPrice.textContent = '￥'+ this.props.nowPrice;
        let spanDelPrice = document.createElement('span');
        spanDelPrice.textContent = '￥'+ this.props.delPrice;
        Object.assign(spanPrice.style,{
           fontSize:'24px',
            color:'rgb(224,18,34)',
        })
        Object.assign(spanDelPrice.style,{
          textDecoration:'line-through',
          marginLeft:'10px',
        })

        let spanPercent = document.createElement('span');
        // this.spanPercent = document.createElement('span');
        spanPercent.textContent =this.props.percent *100+'%';
        let spanProgress = document.createElement('span');
        Object.assign(spanProgress.style,{
            marginLeft:'28px',
            position: 'absolute',
            width:'100px',
            height:'12px',
            border:'1px solid rgb(224,18,34)',
            boxSizing: 'border-box',
            display:'inline-block',
            bottom:'9px',
        })
        let span = document.createElement('span');
        //this.span = document.createElement('span');
        Object.assign(span.style,{
            position: 'absolute',
            width:this.props.percent *100+'%',
            height:'100%',
            backgroundColor:'rgb(224,18,34)',
        })
        spanProgress.appendChild(span);
        div2.appendChild(spanPercent)
        div2.appendChild(spanProgress)
        div1.appendChild(spanPrice);
        div1.appendChild(spanDelPrice);

        let snapUpNow =  document.createElement('div');
        Object.assign(snapUpNow.style,{
            position:'absolute',
            top:'0',
            right:'0',
            textAlign: 'center',
            width:'87px',
            height:'100%',
            backgroundColor:'rgb(224,18,34)'
        })
        let a = document.createElement('a');
        a.textContent = '立即抢购';
        a.href = './demo.html?id='+this.props.id+'&time='+new Date().getTime();
        Object.assign(a.style,{
            textDecoration: 'none',
            lineHeight:'62px',
            color:'#fff',
            display:'block',
            width:'100%',
            height:'100%',
        })
        snapUpNow.appendChild(a);
        snapUpLeft.appendChild(div1);
        snapUpLeft.appendChild(div2);
        SnapUp.appendChild(snapUpLeft);
        SnapUp.appendChild(snapUpNow);

        parent.appendChild(SnapUp);
    }
    mouseHandler(e){
       if(e.type === 'mouseenter'){
           Object.assign(this.style,{
               marginTop :'0px',
               transition:'all 1s ease 0s',
               marginBottom: '20px',
           })
       }else if(e.type === 'mouseleave'){
           Object.assign(this.style,{
               marginTop :'20px',
               transition:'all 1s ease 0s',
               marginBottom: '0px'
           })
       }
    }
}