router.js router.get(’/getImagelist’,initMiddleware, controller.default.product.getImagelist);controller.jsapp/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”:[]}; } }extendapp/extend/helper.js var showdown = require(‘showdown’); formatAttr(str){ var converter = new showdown.Converter(); return converter.makeHtml(str); }viewapp/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>效果点击版本显示不同的商品点击颜色出现不同的图片