router.js
router.get('/pinfo',initMiddleware, controller.default.product.info);
controller.js
app/controller/default/product.js
async info() {
// 1、获取商品信息
var id=this.ctx.request.query.id;
var productInfo=await this.ctx.model.Goods.find({"_id":id});
//2、关联商品
var relationGoodsIds=this.ctx.service.goods.strToArray(productInfo[0].relation_goods);
var relationGoods=await this.ctx.model.Goods.find({
$or:relationGoodsIds
},'goods_version shop_price');
//3、获取关联颜色
var goodsColorIds=this.ctx.service.goods.strToArray(productInfo[0].goods_color);
var goodsColor=await this.ctx.model.GoodsColor.find({
$or:goodsColorIds
});
//4、关联赠品
var goodsGiftIds=this.ctx.service.goods.strToArray(productInfo[0].goods_gift);
var goodsGift=await this.ctx.model.Goods.find({
$or:goodsGiftIds
});
//5、关联配件
var goodsFittingIds=this.ctx.service.goods.strToArray(productInfo[0].goods_fitting);
var goodsFitting=await this.ctx.model.Goods.find({
$or:goodsFittingIds
});
await this.ctx.render('default/product_info.html',{
productInfo:productInfo[0],
relationGoods:relationGoods,
goodsColor:goodsColor,
goodsGift:goodsGift,
goodsFitting:goodsFitting
});
}
service
app/service/goods.js
strToArray(str){
try {
var tempIds=[];
if(str){
var idsArr=str.replace(/，/g,',').split(',');
for(var i=0;i<idsArr.length;i++){
tempIds.push({
"_id":this.app.mongoose.Types.ObjectId(idsArr[i])
});
}
}else{
tempIds=[{"1":-1}]
}
return tempIds;
} catch (error) {
return [{"1":-1}]; //返回一个不成立的条件
}
}
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">
<div class="swiper-slide">
<img src="/public/default/image/liebiao_xiaomi6.jpg">
</div>
<div class="swiper-slide">
<img src="/public/default/image/liebiao_xiaomi6.jpg">
</div>
<div class="swiper-slide">
<img src="/public/default/image/liebiao_xiaomi6.jpg">
</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">
<%for(var i=0;i<goodsColor.length;i++){%>
<div class="banben fl">
<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>
<li class="row clearfix">
<div class="span5">
<h2>充电与电池</h2>
</div>
<div class="span15">
有线充电支持 QC 4.0+ 快充<br>
USB Type-C 双面充电接口<br>
内置电池，免更换<br>
标配 18W QC3.0 充电器 & 附赠 10W 无线充电器
</div>
</li>
<li class="row clearfix">
<div class="span5">
<h2>充电与电池</h2>
</div>
<div class="span15">
有线充电支持 QC 4.0+ 快充<br>
USB Type-C 双面充电接口<br>
内置电池，免更换<br>
标配 18W QC3.0 充电器 & 附赠 10W 无线充电器
</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>
效果
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。