egg(94)--egg之商品详情数据渲染 商品颜色选择

router.js

    router.get('/getImagelist',initMiddleware, controller.default.product.getImagelist);

controller.js

app/controller/default/product.js

  async getImagelist(){


    try {

      var color_id=this.ctx.request.query.color_id;
      var goods_id=this.ctx.request.query.goods_id;
  
      var goodsImages=await this.ctx.model.GoodsImage.find({"goods_id":goods_id,"color_id":this.app.mongoose.Types.ObjectId(color_id)});
  
      
      if(goodsImages.length==0){

        var goodsImages=await this.ctx.model.GoodsImage.find({"goods_id":goods_id}).limit(8);
      }

      // console.log(goodsImages);
      this.ctx.body={"success":true,"result":goodsImages};

      
    } catch (error) {

      this.ctx.body={"success":false,"result":[]};
      
    }
  }

extend

app/extend/helper.js

    var showdown  = require('showdown');
    formatAttr(str){
        var converter = new showdown.Converter();       
        return converter.makeHtml(str);
    }

view

app/view/default/product_info.html

<% include  ./public/header.html%>
<!--end header -->

<!-- start banner_x -->
<% include  ./public/banner.html%>
<!-- end banner_x -->

    
    <!-- xiangqing -->


    
    <div class="jieshao mt20 w">
        <div class="left fl">
            

            <div class="swiper-container">
                <div class="swiper-wrapper" id="swiper-wrapper">
                    <%for(var i=0;i<goodsImageResult.length;i++){%>

                            
                        <div class="swiper-slide">

                                <img src="<%=goodsImageResult[i].img_url%>">
                        </div>

                    <%}%>
                            
                </div>

                <div class="swiper-pagination"></div>

                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
        
            </div>
        
        
        
        </div>
        <div class="right fr">
            <div class="h3 ml20 mt20"><%=productInfo.title%></div>
            <div class="jianjie mr40 ml20 mt10"><%=productInfo.sub_title%></div>
            <div class="jiage ml20 mt10"><%=productInfo.shop_price%>元</div>


            
            <%if(relationGoods.length>0){%>
                <div class="ft20 ml20 mt20">选择版本</div>
                <div class="xzbb ml20 mt10 clearfix">

                    <%for(var i=0;i<relationGoods.length;i++){%>
                        <div class="banben fl <%if(productInfo._id.toString()==relationGoods[i]._id.toString()){%>active <%}%>" >
                            <a href="/pinfo?id=<%=relationGoods[i]._id%>">
                                <span><%=relationGoods[i].goods_version%></span>
                                <span><%=relationGoods[i].shop_price%>元</span>
                            </a>
                        </div>
                    <%}%>
                    
                </div>

            <%}%>




            <%if(goodsColor.length>0){%>

                <div class="ft20 ml20 mt20 clear">选择颜色</div>
                <div class="xzbb ml20 mt10 clearfix" id="color_list">
                    
                        <%for(var i=0;i<goodsColor.length;i++){%>
                        <div class="banben fl" goods_id="<%=productInfo._id%>" goods_color="<%=goodsColor[i]._id%>">
                            <a>
                                <span class="yuandian" style="background:<%=goodsColor[i].color_value%>"></span>
                                <span class="yanse"><%=goodsColor[i].color_name%></span>
                            </a>
                        </div>
                        <%}%>

                    
                </div>

            <%}%>
            <div class="xqxq mt20 ml20 clear">
                <div class="top1 mt10">
                    <div class="left1 fl">小米6 全网通版 6GB内存 64GB 亮黑色</div>
                    <div class="right1 fr">2499.00元</div>
                    <div class="clear"></div>
                </div>
                <div class="bot mt20 ft20 ftbc">总计：2499元</div>
            </div>
            <div class="xiadan ml20 mt20">                    
                    <input class="jrgwc" type="button" name="jrgwc" value="加入购物车" />
            </div>
        </div>
        <div class="clear"></div>
    </div>


    <div class="container clearfix">


        <div class="c_left">

                <h2>看了又看</h2>

                <div class="item">    

                        <a target="_blank" href="#">
                            
                            <img src="//img10.360buyimg.com/N1/jfs/t24550/324/210570328/559386/cc08975f/5b2910bbNfaceb0b4.jpg" />
                            
                            <p class="price recommendLookPrice4183081">￥31.90</p>                            
                            
                            <p>三利 纯棉A类标准简约素雅大浴巾 70×140cm 男女同款 柔软舒适吸水裹身巾 豆绿</p>
                                                
                        </a>


                </div>
                <div class="item">    

                        <a target="_blank" href="#">
                            
                            <img src="//img10.360buyimg.com/N1/jfs/t24550/324/210570328/559386/cc08975f/5b2910bbNfaceb0b4.jpg" />
                            
                            <p class="price recommendLookPrice4183081">￥31.90</p>                            
                            
                            <p>三利 纯棉A类标准简约素雅大浴巾 70×140cm 男女同款 柔软舒适吸水裹身巾 豆绿</p>
                                                
                        </a>


                </div>
                <div class="item">    

                        <a target="_blank" href="#">
                            
                            <img src="//img10.360buyimg.com/N1/jfs/t24550/324/210570328/559386/cc08975f/5b2910bbNfaceb0b4.jpg" />
                            
                            <p class="price recommendLookPrice4183081">￥31.90</p>                            
                            
                            <p>三利 纯棉A类标准简约素雅大浴巾 70×140cm 男女同款 柔软舒适吸水裹身巾 豆绿</p>
                                                
                        </a>


                </div>
        </div>


        <div class="c_right">
                     <ul class="detail_list clearfix">            
            
                        <li class="">详情描述</li>            
            
                        <li class="">规格参数</li>
            
                        <li class="">用户评价</li>
                    </ul>
            
            
                    <div class="detail_info">
            
                        <div class="detail_info_item">
            
                                    <%-productInfo.goods_content%>
                        </div>
                        <div class="detail_info_item">
                            <ul>
            
                                

                                <%for(var i=0;i<goodsAttr.length;i++){%>


                                    <%if(goodsAttr[i].attribute_value){%>
                                        <li class="row clearfix">
                    
                                            <div class="span5">
                    
                                                    <h2><%=goodsAttr[i].attribute_title%></h2>
                                            </div>
                    
                                            <div class="span15">
                                                    <%-helper.formatAttr(goodsAttr[i].attribute_value)%>
                                            </div>
                    
                    
                                        </li>

                                    
                                    <%}%>
            
                                 <%}%>
                                
                            </ul>
                        </div>
            
            
                        <div class="detail_info_item">
                            <ul class="comment_list">
                                <li>
                                        <div>
                                                <img src="//static.i360mall.com/mall/images/eval-stars.png">
                                        </div>
                                        <p>这已经是第六部了，一如既往地好用。美中不足得是，尾插和数据线的链接口，用过一段时间，就会有充电接触不良的问题，希望厂家将来有改进。</p>
            
                                        <p class="eval-order-info"> <span class="eval-time">2018-11-18 14:00:35</span><span>月岩白</span><span>6GB+64GB</span><span></span></p>
            
                                </li>
                                <li>
                                        <div>
                                                <img src="//static.i360mall.com/mall/images/eval-stars.png">
                                        </div>
                                        <p>这已经是第六部了，一如既往地好用。美中不足得是，尾插和数据线的链接口，用过一段时间，就会有充电接触不良的问题，希望厂家将来有改进。</p>
            
                                        <p class="eval-order-info"> <span class="eval-time">2018-11-18 14:00:35</span><span>月岩白</span><span>6GB+64GB</span><span></span></p>
            
                                </li>
                                <li>
                                        <div>
                                                <img src="//static.i360mall.com/mall/images/eval-stars.png">
                                        </div>
                                        <p>这已经是第六部了，一如既往地好用。美中不足得是，尾插和数据线的链接口，用过一段时间，就会有充电接触不良的问题，希望厂家将来有改进。</p>
            
                                        <p class="eval-order-info"> <span class="eval-time">2018-11-18 14:00:35</span><span>月岩白</span><span>6GB+64GB</span><span></span></p>
            
                                </li>
                                <li>
                                        <div>
                                                <img src="//static.i360mall.com/mall/images/eval-stars.png">
                                        </div>
                                        <p>这已经是第六部了，一如既往地好用。美中不足得是，尾插和数据线的链接口，用过一段时间，就会有充电接触不良的问题，希望厂家将来有改进。</p>
            
                                        <p class="eval-order-info"> <span class="eval-time">2018-11-18 14:00:35</span><span>月岩白</span><span>6GB+64GB</span><span></span></p>
            
                                </li>
                            </ul>
                        </div>
                        
            
                    </div>

        </div>


    
    </div>



    <!-- footer -->
    <footer class="mt20 center">
            
            <div class="mt20">小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select Region</div>
            <div>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div> 
            <div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>

        </footer>

    </body>
</html>

效果

点击版本显示不同的商品
点击颜色出现不同的图片