Authored by 陈轩

限定商品展示页

... ... @@ -253,3 +253,36 @@ exports.consultsubmit = (req, res, next) => {
return res.json(data);
}).catch(next);
};
/**
* 限定商品 详情页;
*/
exports.limit = (req, res, next) => {
const uid = req.user.uid;
const productCode = (req.query.code || '').trim();
if (!productCode) {
return next(/* 404 */);
}
detailModel.getLimitProductData(uid, productCode)
.then(result => {
if (_.isEmpty(result)) {
return next();
}
result.appSrc = 'http://www.yohoshow.com/about/index/yohobuyqr/';
result.wxshare = {
shareLink: helpers.urlFormat('/product/detail/limit', {code: productCode}),
shareImg: result.banner.replace('//', 'http://'),
shareTitle: result.name,
shareDesc: '我在Yoho!Buy有货发现了一个限定发售商品',
};
res.render('detail/limit', result);
})
.catch(error => {
next(error);
});
};
... ...
... ... @@ -689,7 +689,74 @@ let getProductData = (data) => {
});
};
const getLimitProductData = (uid, limitProductCode) => {
const param = {
method: 'app.limitProduct.limitProductDetail',
limitProductCode,
uid
};
return api.get('', param).then(result => {
if (!(result && result.data)) {
return Promise.reject(result);
}
let obj = {};
// if (!result.data.hasOwnProperty('attachment')) {
// return
// }
obj.price = result.data.price;
obj.name = result.data.productName;
obj.releaseDate = `${result.data.saleTime}发售`;
obj.banner = helpers.image(result.data.defaultUrl, 750, '');
obj.description = result.data.description;
obj.attaches = [];
for (let item of result.data.attachment) {
if (item.isDefault === 1) { // 排除默认图片
continue;
}
let attach = {};
switch (item.attachType) {
case 1:
attach.isImg = true;
attach.attachUrl = helpers.image(item.attachUrl, 750, '');
attach.attachName = item.intro;
attach.intro = item.intro;
break;
case 2:
attach.isVideo = true;
attach.attachUrl = item.attachUrl;
attach.img = helpers.image(item.intro, 750, '');
break;
case 3:
attach.isText = true;
attach.intro = item.intro;
break;
default:
break;
}
attach.orderBy = item.orderBy;
obj.attaches.push(attach);
}
if (obj.attaches.length > 1) {
obj.attaches.sort((v1, v2) => {
return v1.orderBy - v2.orderBy;
});
}
return obj;
});
};
module.exports = {
getProductData,
getUserProfile: _getUserProfile
getUserProfile: _getUserProfile,
getLimitProductData
};
... ...
... ... @@ -37,6 +37,9 @@ router.get('/detail/consultform', auth, detail.consultform); // 商å“咨询表å
router.get('/detail/comments', detail.comments); // 商品评价
router.post('/detail/consultsubmit', auth, detail.consultsubmit); // 商品咨询提交接口
// 限定商品
router.get('/detail/limit', detail.limit);
router.post('/detail/consultupvote', detail.consultUpvoteOrUseful); // 商品咨询提交接口
router.post('/detail/consultuseful', detail.consultUpvoteOrUseful); // 商品咨询提交接口
... ...
<div class="limit-good-page yoho-page">
<div class="top clearfix">
<p>我在Yoho!Buy有货发现了一个限定发售商品</p>
</div>
<div class="banner">
<img src="{{banner}}" alt="">
</div>
<div class="detail clearfix">
<p class="name">{{name}}</p>
<div class="sale-info">
<span class="price">{{price}}</span>
<span class="date">
<span class="iconfont">&#xe603;</span>
<span class="text">{{releaseDate}}</span>
</span>
</div>
</div>
{{#if attaches}}
<div class="good-desc">
{{# attaches}}
{{#if isImg}}
<img src="{{attachUrl}}" alt="{{attachName}}">
{{else if isText}}
<p class="desc">{{intro}}</p>
{{else}}
<video poster="{{img}}" controls="controls" controls="controls" preload="metadata" loop="loop" width="100%" name="media">
<source src="{{attachUrl}}" type="video/ogg;codecs=" theora,vorbis"" media="screen" />
<source src="{{attachUrl}}"/>
</video>
{{/if}}
{{/attaches}}
</div>
{{/if}}
<div class="bottom">
<div class="logo"></div>
<div class="left">
<a href="{{appSrc}}">
<button class="btn">
立即下载
</button>
</a>
</div>
<div class="right">
<span>下载Yoho!Buy有货APP</span>
<span>抢购超级限量款</span>
</div>
</div>
{{#wxshare}}
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<input id="shareLink" type="hidden" value="{{shareLink}}">
<input id="shareImg" type="hidden" value="{{shareImg}}">
<input id="shareTitle" type="hidden" value="{{shareTitle}}">
<input id="shareDesc" type="hidden" value="{{shareDesc}}">
{{/wxshare}}
</div>
... ...
... ... @@ -2,3 +2,4 @@
@import "comments-consults";
@import "product-description";
@import "recommend-for-you";
@import "limit";
... ...
.limit-good-page {
background-color: #f4f4f4;
color: #444;
.top {
font-size: 24px;
height: 80px;
line-height: 88px;
margin-bottom: 4px;
background-color: #fff;
padding: 8px 0 8px 20px;
div {
width: 0%;
display: inline-block;
img {
width: 60px;
position: relative;
top: 10px;
}
}
p {
display: inline-block;
width: 80%;
}
}
.detail {
background-color: #fff;
padding: 24px 32px;
border-bottom: 1PX solid #e6e6e6;
margin-bottom: 1rem;
.name {
font-size: 36px;
margin-bottom: 20px;
}
.sale-info {
height: 40px;
line-height: 40px;
}
.price {
font-size: 32px;
color: #d0021b;
float: left;
}
.date {
font-size: 24px;
float: right;
.text {
position: relative;
top: 3.2px;
}
}
.iconfont {
vertical-align: middle;
}
}
.good-desc {
padding: 20px;
border-top: 1PX solid #e6e6e6;
background-color: #fff;
p {
font-size: 24px;
line-height: 40px;
text-indent: 2em;
}
img {
margin: 12px 0;
max-width: 100%;
}
}
.bottom {
background-color: #fff;
padding: 20px 80px 80px;
margin: 0 auto;
.logo {
height: 100px;
background-image: resolve("product/logo-bottom.png");
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
}
.btn {
font-size: 32px;
background-color: #fff;
border: 1PX solid #444;
border-radius: 8px;
padding: 12px 24px;
}
.btn:active {
background-color: #ccc;
}
.left,
.right {
float: left;
}
.left {
width: 39%;
}
.right {
width: 60%;
font-size: 26px;
span {
display: block;
width: 95%;
margin: 0 auto;
}
}
}
}
... ...