共计 5518 个字符，预计需要花费 14 分钟才能阅读完成。
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>
效果
点击版本显示不同的商品点击颜色出现不同的图片
