egg(93)–egg之商品详情数据渲染关联商品关联赠品关联配件关联颜色

jiezi

6 年前

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 –>

<!– 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){%>

<%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>

<p> 三利纯棉 A 类标准简约素雅大浴巾 70×140cm 男女同款柔软舒适吸水裹身巾豆绿 </p>

</a>

</div>
<div class=”item”>

<p> 三利纯棉 A 类标准简约素雅大浴巾 70×140cm 男女同款柔软舒适吸水裹身巾豆绿 </p>

</a>

</div>
<div class=”item”>

<p> 三利纯棉 A 类标准简约素雅大浴巾 70×140cm 男女同款柔软舒适吸水裹身巾豆绿 </p>

</a>

</div>
</div>

<%-productInfo.goods_content%>
</div>
<div class=”detail_info_item”>
<ul>

<h2> 充电与电池 </h2>
</div>

有线充电支持 QC 4.0+ 快充 <br>
USB Type-C 双面充电接口 <br>
内置电池，免更换 <br>
标配 18W QC3.0 充电器 & 附赠 10W 无线充电器
</div>

</li>

<h2> 充电与电池 </h2>
</div>

有线充电支持 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>

</li>
<li>
<div>
<img src=”//static.i360mall.com/mall/images/eval-stars.png”>
</div>
<p> 这已经是第六部了，一如既往地好用。美中不足得是，尾插和数据线的链接口，用过一段时间，就会有充电接触不良的问题，希望厂家将来有改进。</p>

</li>
</ul>
</div>

</div>

<!– footer –>
<footer class=”mt20 center”>

</footer>

</body>
</html>
效果