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

32次阅读

共计 6196 个字符，预计需要花费 16 分钟才能阅读完成。

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 充电器 &amp; 附赠 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 充电器 &amp; 附赠 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>
效果

正文完
eggjs
发表至：无分类
2019-01-02
 0