Authored by 李靖

开发完成

'use strict';
const css = require('../css');
const co = require('bluebird').coroutine;
const _ = require('lodash');
const mRoot = '../models';
const productDetailModel = require(`${mRoot}/product-detail`);
exports.index = (req, res, next) => {
co(function* () {
let params = {
productSkn: req.params[0],
protocol: req.protocol
};
let detailData = yield req.ctx(productDetailModel).index(params);
let mipPic = _.get(detailData, 'baseInfo.goods_list[0].images_list[0].image_url');
let mipId = _.get(detailData, 'baseInfo.product_skn');
let mipDes = _.get(detailData, 'baseInfo.phrase');
let miptitle = _.get(detailData, 'baseInfo.product_name');
return res.render('product/detail', Object.assign({
title: detailData.title,
css: yield css('product/detail.css'),
localStyle: detailData.mipCss,
mipFooter: true,
canonical: {
currentHref: `https://m.yohobuy.com/product/${detailData.baseInfo.product_skn}.html`
},
showAnaJson: {
mipsite: false,
miptitle: `${miptitle} | Yoho!Buy有货 | 潮流购物逛不停`,
mipId: mipId,
mipPublishTime: '',
mipPic: mipPic,
mipDes: mipDes,
mipUrl: `${req.protocol}://m.yohobuy.com${req.originalUrl}`,
miphtml: `${req.protocol}://m.yohobuy.com/mip/product/${mipId}.html`
}
}, detailData));
})().catch(next);
};
... ...
... ... @@ -256,12 +256,45 @@
vertical-align: bottom;
}
.list-too-little {
padding: 2% 4%;
border-bottom: 1px solid #e6e6e6;
color: #444;
font-size: 12px;
}
.list-too-little .word {
display: inline-block;
padding: 5px 15px;
border-radius: 10px;
border: 1px solid #bbb;
margin-right: 6px;
margin-top: 5px;
}
/* 底部开始 */
.mip-footer-fixed {
width: 100%;
height: 95px;
position: relative;
clear: both;
}
.mip-footer {
max-width: 750px;
margin: 0 auto;
background-color: #fff;
height: 95px;
width: 100%;
clear: both;
position: relative;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.mip-footer .option {
background-color: #fff;
font-size: 0;
}
... ... @@ -286,7 +319,6 @@
font-weight: bold;
margin-left: 5px;
transform: scaleY(0.5);
display: inline-block;
}
.mip-footer .copy-right {
... ... @@ -299,24 +331,10 @@
.mip-footer .mip-fixed {
position: relative !important;
z-index: 0 !important;
}
.mip-footer .mip-gototop {
display: inline;
}
.list-too-little {
padding: 2% 4%;
border-bottom: 1px solid #e6e6e6;
color: #444;
font-size: 12px;
}
.list-too-little .word {
display: inline-block;
padding: 5px 15px;
border-radius: 10px;
border: 1px solid #bbb;
margin-right: 6px;
margin-top: 5px;
display: inline !important;
}
/* 底部结束 */
... ...
.detail-page {
max-width: 750px;
width: 100%;
overflow: hidden;
margin: 0 auto;
background-color: #f0f0f0
}
.detail-page * {
box-sizing: border-box;
font-weight: normal;
}
.detail-page mip-img {
display: block;
margin: 0 auto;
max-width: 100%;
border: 0;
}
.detail-page .banner-pic {
width: 100%;
position: relative;
}
.detail-page .cart-icon {
margin: 0 auto 2px;
width: 24px;
height: 24px;
background-size: 100% 100%;
background-image: url("//cdn.yoho.cn/yohobuywap-node/6.4.0/img/product/cart.png");
}
.detail-page .shop-icon {
margin: 0 auto 4px;
width: 22px;
height: 22px;
background-size: 100% 100%;
background-image: url("//cdn.yoho.cn/yohobuywap-node/6.4.0/img/product/store-ico.png");
}
.detail-page .banner-pic .pic-container {
margin: 5% auto;
width: 70%;
padding-bottom: 93%;
position: relative;
}
.detail-page .banner-pic .pic-list {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.tag-container {
position: absolute;
top: 1.5%;
left: 2%;
z-index: 2;
height: 35px;
color: #fff;
font-size: 14px;
line-height: 22px;
}
.tag-container .good-tag {
display: inline-block;
box-sizing: border-box;
margin-left: 0.5px;
padding: 0 5px;
text-align: center;
height: 22px;
line-height: 22px;
vertical-align: top;
}
.tag-container .new-tag {
background-color: #78dc7e;
color: #fff;
}
.tag-container .hot-tag {
width: 60px;
background-color: #ff575c;
color: #fff;
}
.tag-container .renew-tag {
background-color: #78dc7e;
color: #fff;
}
.tag-container .sale-tag {
background-color: #ff575c;
color: #fff;
}
.tag-container .new-festival-tag {
color: #000;
width: 120px;
background-image: resolve("product/new-festival.png");
background-repeat: no-repeat;
background-color: #fff;
background-size: 120px 38px;
}
.tag-container .yohood-tag {
background-color: #000;
color: #fff;
}
.tag-container .limit-tag {
border: 1px solid #000;
background-color: #fff;
color: #000;
line-height: 22px;
}
.tag-container .soon-sold-out-tag {
background-color: #ffac5b;
color: #fff;
}
.tag-container .is-presell {
background-color: #000;
color: #fff;
width: 60px;
}
#mip-carousel-example {
padding: 5px 8px;
background: rgba(0, 0, 0, 0.2);
border-radius: 9px;
}
.mip-carousel-indicator-wrapper {
position: absolute;
bottom: 5px;
left: 0;
right: 0;
}
.mip-carousel-indicatorDot .mip-carousel-indecator-item {
width: 9px;
height: 9px;
}
.mip-carousel-indicatorDot .mip-carousel-activeitem {
background-color: #000;
}
.goods-name {
box-sizing: border-box;
padding: 20px;
width: 100%;
background-color: #515150;
color: #fff;
}
.goods-name .name {
font-size: 18px;
line-height: 28px;
}
.price-date {
position: relative;
padding:0 20px;
width: 100%;
height: 55px;
border-bottom: 1px solid #e0e0e0;
background-color: #fff;
color: #b0b0b0;
}
.goods-price {
float: left;
font-size: 16px;
}
.goods-price h2 {
display: inline-block;
line-height: 55px;
}
.goods-price .current-price {
margin-right: 10px;
color: #d0021b;
}
.goods-price .previous-price {
text-decoration: line-through;
}
.goods-discount {
margin-bottom: 15px;
padding-top: 0;
display: block;
width: 100%;
height: auto;
border-bottom: 1px solid #e0e0e0;
background-color: #fff;
color: #444;
font-size: 12px;
}
.goods-discount h2 {
position: relative;
padding: 15px;
line-height: 20px;
}
.goods-discount .promotion-icon {
background-color: #d0021b;
color: #fff;
padding: 0 4px;
border-radius: 4px;
margin-right: 10px;
font-size: 14px;
float: left;
}
.goods-discount .short-text {
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.page-block {
box-sizing: border-box;
margin-bottom: 15px;
padding: 0 15px;
width: 100%;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
background-color: #fff;
}
.enter-store {
width: 100%;
padding: 0 4% 15%;
position: relative;
}
.enter-store .store-logo {
position: absolute;
top: 0;
left: 4%;
width: 15%;
height: 100%;
}
.enter-store .store-logo img {
width: 100%;
height: 100%;
}
.enter-store .store-name {
margin-left: 2%;
position: absolute;
top: 0;
left: 19%;
height: 100%;
width: 50%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: flex;
align-items: center;
}
.enter-store .store-link {
position: absolute;
right: 4%;
top: 0;
width: 25%;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
}
.enter-store .store-linkspan {
position: absolute;
}
.product-desc{
background-color: #f0f0f0;
padding-bottom: 1px;
}
.goods-desc {
padding-top: 15px;
padding-bottom: 15px;
}
#reference-swiper-container .first-group div .avatar {
display: inline-block;
width: 30px;
width: 30px;
border-radius: 50%;
overflow-x: hidden;
margin-right: 10px;
}
.materials {
overflow: hidden;
}
.materials.page-block {
margin-bottom: 0;
border-bottom: none;
}
.materials.page-block .detail {
margin-bottom: 0;
}
.materials .detail .material-item {
position: relative;
display: block;
overflow: hidden;
margin: 5px 0;
width: 100%;
height: auto;
}
.materials .detail .material-item img {
margin: 0;
}
.materials .detail .material-item .material-image {
position: absolute;
top: 50%;
left: 0;
width: 23%;
transform: translateY(-50%);
}
.materials .detail .material-item .material-desc {
float: right;
box-sizing: border-box;
padding-left: 2%;
width: 76.9%;
height: auto;
color: #4b4b4b;
text-align: left;
word-wrap: break-word;
font-size: 16px;
line-height: 25px;
}
.materials .detail .material-item:last-child {
border-bottom: none;
}
.page-block .service {
width: 100%;
padding-bottom: 4.7%;
background-size: 100% 100%;
background-image: url("//cdn.yoho.cn/yohobuywap-node/6.4.0/img/product/service.png");
}
.page-block .title {
border-bottom: 1px solid #e0e0e0;
color: #444;
font-size: 18px;
line-height: 55px;
}
.page-block .title span {
color: #a0a0a0;
font-size: 12px;
}
.page-block .pro-detail {
margin-top: 20px;
margin-bottom: 20px;
}
.page-block .pro-detail * {
font-size: 18px !important;
color: #444;
line-height: 24px !important;
margin-bottom: 15px;
letter-spacing: 1px;
word-break: break-all;
}
.page-block video {
width: 100%;
height: auto;
}
.page-block .detail {
margin-top: 15px;
margin-bottom: 15px;
font-size: 18px;
line-height: 22px;
}
.goods-desc .detail {
margin-bottom: 1px;
}
.goods-desc .desc-text {
padding: 10px 5px;
background-color: #eee;
color: #444;
font-size: 14px;
}
.page-block .detail b {
font-weight: bold;
}
.page-block .detail i {
font-style: italic;
}
.page-block .detail.table {
width: 100%;
overflow: hidden;
}
.page-block .detail.table .column {
box-sizing: border-box;
padding: 4px 3%;
width: 49.9%;
border: 1px solid #fff;
background-color: #eee;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 16px;
}
.product-desc .swiper-wrapper {
width: 100%;
overflow-x: scroll;
white-space: nowrap;
font-size: 0;
line-height: 0;
}
.product-desc .tips {
margin-top: 10px;
color: #b0b0b0;
font-size: 12px;
}
.product-desc .swiper-slide {
display: inline-block;
}
.product-desc .swiper-slide .cell {
box-sizing: border-box;
padding: 4px 15px;
border: 1px solid #fff;
background-color: #eee;
white-space: nowrap;
font-size: 16px;
text-align: center;
line-height: 24px;
}
.page-block .detail.table .column:nth-child(2n+1) {
float: left;
}
.page-block .detail.table .column:nth-child(2n+2) {
float: right;
}
.page-block .detail.table .oldbox {
float: left;
overflow: hidden;
box-sizing: border-box;
padding: 6px 3%;
width: 49.9%;
height: 100%;
border: 1px solid #fff;
background-color: #eee;
text-overflow: ellipsis;
white-space: nowrap;
}
.wash-tips {
padding-top: 20px;
}
.wash-tips.page-block {
padding-right: 15px;
padding-left: 15px;
}
.wash-tips .tip {
display: inline-block;
vertical-align: top;
width: 16.6%;
}
.wash-tips .tip mip-img {
margin-bottom: 10px;
width: 32px;
height: 32px;
}
.wash-tips .tip .caption {
display: block;
padding: 0 5px;
min-height: 28px;
text-align: center;
font-size: 12px;
line-height: 14px;
}
.remind-tips {
padding-left: 10px;
font-size: 14px;
color: #e9221a;
margin-bottom: 20px;
}
.remind-tips mip-img {
width: 19px;
height: 19px;
float: left;
}
.remind-tips .wash-tags {
line-height: 19px;
margin-left: 5px;
}
.cart-bar-fixed {
height: 60px;
width: 100%;
position: relative;
clear: both;
}
.cart-bar {
position: fixed;
max-width: 750px;
margin: 0 auto;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 60px;
border-top: 1px solid #e0e0e0;
background-color: #fff;
padding: 10px;
z-index: 9;
}
.cart-bar a {
display: inline-block;
}
.cart-bar .new-foot-ico {
width: 20%;
margin-right: 6%;
text-align: center;
vertical-align: bottom;
height: 40px;
}
.cart-bar .new-foot-ico .tip {
color: #444;
font-size: 14px;
line-height: 15px;
}
.cart-bar .opa {
opacity: 0.4;
}
.cart-bar .addto-cart {
width: 45%;
height: 40px;
background-color: #eb0313;
color: #fff;
text-align: center;
font-size: 20px;
line-height: 40px;
}
.goods-container {
float: left;
background-color: #fff;
}
.goods-container .title {
text-align: center;
line-height: 40px;
font-size: 20px;
}
.good-info {
float: left;
box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 44%;
margin-left: 4%;
}
.good-detail-img {
position: relative;
width: 100%;
padding-top: 133.19%;
}
.good-detail-img .good-thumb {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.good-detail-img mip-img {
width: 100%;
}
.good-detail-img .mip-element {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.good-info .tag-container {
position: relative;
overflow: hidden;
width: 100%;
height: 20px;
}
.good-info .tag-container .good-tag {
display: block;
float: left;
box-sizing: border-box;
margin-right: 4px;
height: 20px;
text-align: center;
font-size: 12px;
line-height: 20px;
}
.good-info .tag-container .good-tag:last-child {
margin-right: 0;
}
.good-info .tag-container .new-tag {
width: 40px;
background-color: #78dc7e;
color: #fff;
}
.good-info .tag-container .hot-tag {
width: 60px;
background-color: #ff575c;
color: #fff;
}
.good-info .tag-container .renew-tag {
width: 50px;
background-color: #78dc7e;
color: #fff;
}
.good-info .tag-container .sale-tag {
width: 40px;
background-color: #ff575c;
color: #fff;
}
.good-info .tag-container .new-festival-tag {
color: #000;
width: 50px;
background-image: url("//cdn.yoho.cn/yohobuywap-node/6.2.37/img/product/new-festival.png");
background-repeat: no-repeat;
background-color: #fff;
background-size: 100px 28px;
}
.good-info .tag-container .limit-tag {
width: 60px;
border: 1px solid #000;
color: #000;
}
.good-info .tag-container .is-presell {
width: 40px;
background-color: #000;
color: #fff;
}
.good-info .tag-container .is-global {
padding: 3px 10px 0 8px;
color: #fff;
background-color: #462e3e;
line-height: 26px;
}
.good-info .tag-container .is-global span {
display: inline-block;
background-image: url("//cdn.yoho.cn/yohobuywap-node/6.2.37/img/product/airplane.png");
background-repeat: no-repeat;
padding-left: 32px;
background-size: auto 95%;
}
.good-detail-img .good-islike {
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
color: #b0b0b0;
text-align: center;
text-decoration: none;
font-size: 30px;
line-height: 60px;
}
.good-detail-img .good-like {
color: #d72928;
}
.good-detail-img mip-img {
display: block;
width: 100%;
}
.good-detail-img .few-tag {
position: absolute;
bottom: 0;
width: 100%;
height: 24px;
background: #ffac5b;
color: #fff;
text-align: center;
font-size: 12px;
line-height: 24px;
}
.good-detail-img .out-tag {
position: absolute;
bottom: 0;
width: 100%;
height: 32px;
background: #b0b0b0;
color: #fff;
text-align: center;
font-size: 18px;
line-height: 32px;
}
.good-detail-img .no-storage {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #000;
opacity: 0.4;
position: absolute;
top: 0;
}
.good-detail-img .no-storage .no-storage-img {
display: block;
width: 100%;
height: 100%;
background-image: url("//cdn.yoho.cn/yohobuywap-node/6.2.37/img/product/outlet_sellout_bg.png");
background-repeat: no-repeat;
background-size: contain;
}
.good-detail-text {
position: relative;
}
.good-detail-text .name a {
transform: scale(0.9);
margin: 7px 0 5px;
min-height: 30px;
color: #444;
font-size: 12px;
line-height: 18px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
height: 36px;
}
.good-detail-text .price {
font-size: 12px;
line-height: 22px;
white-space: nowrap;
transform: scale(0.9);
}
.good-detail-text .price .sale-price {
color: #d62927;
}
.good-detail-text .price .sale-price.no-price {
color: #000;
}
.good-detail-text .price .market-price {
font-size: 12px;
margin: 0 0 0 5px;
color: #b0b0b0;
text-decoration: line-through;
}
.good-detail-text .vip-grade {
display: inline-block;
margin-right: 8px;
width: 26px;
height: 16px;
vertical-align: text-bottom;
}
.vip-level {
box-sizing: box-border;
padding-right: 28px;
padding-left: 28px;
min-height: 55px;
border-bottom: 1px solid #e0e0e0;;
background-color: #fff;
color: #999;
font-size: 14px;
}
.vip-level .icons-item {
list-style-type: none;
float: left;
margin: 0;
width: 33.3%;
height: 55px;
}
.vip-level .icons-item.current-level .vip-price {
color: #d0021b;
}
.vip-level .icons-item span {
display: inline-block;
padding-left: 8px;
vertical-align: middle;
line-height: 55px;
}
.vip-level .icons-item .vip-img {
width: 34px;
height: 20px;
}
.vip-level .icons-item:nth-child(1) .vip-img {
background: url("//cdn.yoho.cn/yohobuywap-node/6.2.37/img/product/silver.png") no-repeat;
background-size: contain;
}
.vip-level .icons-item:nth-child(2) .vip-img {
background: url("//cdn.yoho.cn/yohobuywap-node/6.2.37/img/product/golden.png") no-repeat;
background-size: contain;
}
.vip-level .icons-item:nth-child(3) .vip-img {
background: url("//cdn.yoho.cn/yohobuywap-node/6.2.37/img/product/platinum.png") no-repeat;
background-size: contain;
}
.student-price {
float: left;
height: 55px;
line-height: 55px;
}
.student-price .student-value {
font-size: 16px;
}
.student-price .student-name {
background-color: #d0021b;
font-size: 12px;
padding: 3px 5px;
color: #fff;
border-radius: 3px;
margin-right: 15px;
}
.student-price .red {
color: #d0021b;
}
.good-detail-text .vip-grade-1 {
background: url("//cdn.yoho.cn/yohobuywap-node/6.2.37/img/product/silver.png") no-repeat;
background-size: contain;
}
.good-detail-text .vip-grade-2 {
background: url("//cdn.yoho.cn/yohobuywap-node/6.2.37/img/product/golden.png") no-repeat;
background-size: contain;
}
.good-detail-text .vip-grade-3 {
background: url("//cdn.yoho.cn/yohobuywap-node/6.2.37/img/product/platinum.png") no-repeat;
background-size: contain;
}
.good-detail-text .vip-info {
margin-top: 3px;
color: #444;
font-size: 12px;
line-height: 16px;
}
.good-detail-text .vip-info .vip-icon {
display: inline-block;
margin-right: 8px;
width: 44px;
height: 16px;
background: url("//cdn.yoho.cn/yohobuywap-node/6.2.37/img/product/vip-icon.png") no-repeat;
background-size: contain;
vertical-align: bottom;
}
.mip-footer {
bottom: 60px !important;
position: relative !important;
}
/* 底部开始 */
.mip-footer-fixed {
width: 100%;
height: 95px;
position: relative;
clear: both;
}
.mip-footer {
max-width: 750px;
margin: 0 auto;
background-color: #fff;
height: 95px;
width: 100%;
clear: both;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.mip-footer .option {
background-color: #fff;
font-size: 0;
}
.mip-footer .option a {
line-height: 50px;
font-size: 13px;
padding: 0 5%;
}
.mip-footer .option .login {
border-right: solid 1px #e0e0e0;
}
.mip-footer .option .back-to-top {
line-height: 50px;
font-size: 13px;
padding: 0 5%;
float: right;
}
.mip-footer .option .back-to-top span {
font-weight: bold;
margin-left: 5px;
transform: scaleY(0.5);
}
.mip-footer .copy-right {
background-color: #eee;
color: #666;
text-align: center;
line-height: 45px;
font-size: 13px;
}
.mip-footer .mip-fixed {
position: relative !important;
z-index: 0 !important;
}
.mip-footer .mip-gototop {
display: inline !important;
}
/* 底部结束 */
... ...
... ... @@ -28,7 +28,7 @@ module.exports = {
* 替换标签
* @param {*} $
*/
processTag($) {
processTag($, prefix) {
let css = [];
// mip-anim
... ... @@ -42,7 +42,7 @@ module.exports = {
// mip-img
$('img').each(function() {
let $this = $(this);
let mipImg = `<mip-img layout="responsive" width="350" height="263" src="${$this.attr('src')}" alt="${$this.attr('alt') || ''}" class="${$this.attr('class') || ''}"></mip-img>`; // eslint-disable-line
let mipImg = `<mip-img layout="container" src="${$this.attr('src')}" alt="${$this.attr('alt') || ''}" class="${$this.attr('class') || ''}"></mip-img>`; // eslint-disable-line
$this.replaceWith(mipImg);
});
... ... @@ -71,13 +71,24 @@ module.exports = {
$this.replaceWith(mipIframe);
});
// mip-input
$('input').each(function() {
let $this = $(this);
let mipInput = `<input id="${$this.attr('id')}" type="hidden" value="${$this.val()}">`;
$this.replaceWith(`<mip-form url="https://m.yohobuy.com/">${mipInput}</mip-form>`);
});
// mip-link
// $('a').each(function() {
// let $this = $(this);
// let mipLink = `<mip-link href="${$this.attr('href')}" class="${$this.attr('class') || ''}"
// title="${$this.attr('title') || ''}">${$this.html()}</mip-link>`; // eslint-disable-line
// $this.replaceWith(mipLink);
// });
if (prefix.mipLint) {
$('a').each(function() {
let $this = $(this);
let mipLink = `<a data-type="mip" class="${$this.attr('class') || ''}"
href="${$this.attr('href')}">${$this.html()}</a>`;
$this.replaceWith(mipLink);
});
}
// style
$('style').each(function() {
... ... @@ -106,7 +117,7 @@ module.exports = {
decodeEntities: false
});
let inlineStyle = this.processStyle($, prefix); // 必须先处理内联样式
let tagHtml = this.processTag($);
let tagHtml = this.processTag($, prefix);
return {
mipHtml: tagHtml.mipHtml,
... ...
... ... @@ -60,7 +60,7 @@ class List extends global.yoho.BaseModel {
_.forEach(_.slice(redisData.data, 0, 12), value => {
build.push({
name: value.keyword,
link: helpers.urlFormat(`/mip/list/${value.id}.html`, null)
link: helpers.urlFormat(`/mip/chanpin/${value.id}.html`, null)
});
});
resu.name = redisData.name;
... ...
'use strict';
const $ = require('cheerio');
const _ = require('lodash');
const mipUtils = require('../mip-utils');
class ProductDetail extends global.yoho.BaseModel {
constructor(ctx) {
super(ctx);
}
baseInfo(params) {
let options = {
data: {
method: 'app.product.data',
product_skn: params.productSkn
},
param: {
code: 200,
cache: true
}
};
return this.get(options).then(result => {
let brandId = _.get(result, 'data.brand_id');
let shopId = _.get(result, 'data.shop_id');
let optionsParams = {
data: {
method: 'app.product.queryShopsInfoById',
brand_id: brandId,
shop_id: shopId
},
param: {
cache: true
}
};
return this.get(optionsParams).then(data => {
if (result.data) {
result.data.enterStore = _.get(data, 'data');
}
return result;
});
});
}
intro(params) {
let options = {
data: {
method: 'app.product.intro',
product_skn: params.productSkn,
app_version: '5.6.0'
},
param: {
cache: true
}
};
return this.get(options).then(result => {
result = _.isString(result) ? result : '';
result = $.load(result);
result = result('#productDesc');
return (result.html() || '');
});
}
preference(params) {
let options = {
data: {
method: 'app.product.preference',
product_skn: params.productSkn
},
param: {
cache: true
}
};
return this.get(options).then(result => {
return result;
});
}
promotion(params) {
let options = {
data: {
method: 'app.product.promotion',
product_skn: params.productSkn
},
param: {
cache: true
}
};
return this.get(options).then(result => {
return result;
});
}
index(params) {
return Promise.all([
this.baseInfo(params),
this.intro(params),
this.preference(params),
this.promotion(params)
]).then(result => {
let resu = {
baseInfo: {},
intro: '',
preference: '',
promotion: [],
enterStore: [],
shoppingCount: '',
title: '',
mipCss: ''
};
let localCss = [];
if (_.get(result, '[0].data')) {
result[0].data.sales_price = result[0].data.sales_price.toFixed(2);
result[0].data.market_price = result[0].data.market_price.toFixed(2);
if (result[0].data.sales_price === result[0].data.market_price) {
result[0].data.market_price = 0;
}
resu.baseInfo = result[0].data;
let picBuild = [];
let build = [];
let tags = {};
_.forEach(result[0].data.tags, (value) => {
tags[value] = value;
});
resu.baseInfo.tags = tags;
_.forEach(result[0].data.goods_list, (value) => {
_.forEach(value.images_list, (item) => {
picBuild.push({
image_url: item.image_url
});
});
});
resu.baseInfo.images_list = picBuild;
_.forEach(result[0].data.enterStore, function(value) {
build.push({
storeName: value.brand_name,
url: `/shop/${value.brand_domain}-${value.shop_id}.html`,
img: value.brand_ico
});
});
resu.enterStore = build;
resu.title = `【${resu.baseInfo.brand_info.brand_name}${resu.baseInfo.middle_sort_name}
${resu.baseInfo.product_name}`;
}
if (_.get(result, '[1]')) {
resu.intro = mipUtils.process(result[1]).mipHtml;
localCss.push(mipUtils.process(result[1]).css);
}
if (_.get(result, '[2]')) {
// 处理a标签
let option = {
mipLint: true
};
let resultHtml = _.isString(result[2]) ? result[2] : '';
let goodsContainer = $.load(resultHtml)('#shop-goods-container');
let goodThumb = goodsContainer.find('.good-thumb');
let nameA = goodsContainer.find('.name a');
_.forEach(goodThumb, function(value) {
let href = $(value).attr('href').split('?')[0];
let skn = $(value).closest('.good-info').data('id');
if (skn) {
href = `${params.protocol}://m.yohobuy.com/mip/product/${skn}.html`;
}
$(value).attr('href', href);
});
_.forEach(nameA, function(value) {
let href = $(value).attr('href').split('?')[0];
let skn = $(value).closest('.good-info').data('id');
if (skn) {
href = `${params.protocol}://m.yohobuy.com/mip/product/${skn}.html`;
}
$(value).attr('href', href);
});
resu.preference = mipUtils.process(goodsContainer.html(), option).mipHtml;
}
if (_.get(result, '[3].data')) {
resu.promotion = result[3].data;
}
resu.mipCss = localCss.join('');
return resu;
});
}
}
module.exports = ProductDetail;
... ...
... ... @@ -13,6 +13,7 @@ const rewrite = require('../../doraemon/middleware/rewrite');
const mip = require('../../doraemon/middleware/mip');
const guang = require(`${cRoot}/guang`);
const chanpin = require(`${cRoot}/chanpin`);
const productDetail = require(`${cRoot}/product-detail`);
router.use(mip);
... ... @@ -21,4 +22,6 @@ router.get(/^\/guang\/(.*?)\.html/, rewrite.resolve, guang.detailIndex);
router.get('/chanpin/:id.html', chanpin.index);
router.get(/^\/product\/(\d+)\.html/, productDetail.index);
module.exports = router;
... ...
<div class="detail-page yoho-page">
{{# baseInfo}}
<div class="banner-pic">
<div class="pic-container">
<div class="tag-container">
{{# tags}}
{{# is_new}}
<p class="good-tag new-tag">NEW</p>
{{/ is_new}}
{{# is_advance}}
<p class="good-tag renew-tag">再到着</p>
{{/ is_advance}}
{{# is_discount}}
<p class="good-tag sale-tag">SALE</p>
{{/ is_discount}}
{{# is_yohood}}
<p class="good-tag new-festival-tag">新品节</p>
{{/ is_yohood}}
{{# is_limited}}
<p class="good-tag limit-tag">限量</p>
{{/ is_limited}}
{{# is_soon_sold_out}}
<p class="good-tag soon-sold-out-tag">即将售罄</p>
{{/ is_soon_sold_out}}
{{# is_presell}}
<p class="good-tag is-presell">预售</p>
{{/ is_presell}}
{{/ tags}}
</div>
<mip-carousel class="pic-list" layout="responsive" width="450" height="600" indicatorId="mip-carousel-example">
{{# images_list}}
<mip-img src="{{image2 image_url w=450 h=600 q=60}}"></mip-img>
{{/ images_list}}
</mip-carousel>
</div>
<div class="mip-carousel-indicator-wrapper">
<div class="mip-carousel-indicatorDot" id="mip-carousel-example">
{{# images_list}}
{{#if @index}}
<div class="mip-carousel-indecator-item"></div>
{{else}}
<div class="mip-carousel-activeitem mip-carousel-indecator-item"></div>
{{/if}}
{{/ images_list}}
</div>
</div>
</div>
<div class="goods-name">
<h1 class="name">{{product_name}}</h1>
</div>
<div class="price-date">
<div class="goods-price">
<h2 class="current-price">¥{{sales_price}}</h2>
{{#if market_price}}
<h2 class="previous-price">¥{{market_price}}</h2>
{{/if}}
</div>
</div>
{{#if student_price}}
<div class="price-date">
<div class="student-price">
<i class="student-name">学生价</i><span class="student-value">¥{{student_price}}</span>
</div>
</div>
{{else if vip}}
<ul class="vip-level clearfix">
{{#each vip}}
<li class="icons-item {{#if currentLevel}} current-level {{/if}}">
<span class="vip-img">
</span>
<span class="vip-price">{{price}}</span>
</li>
{{/each}}
</ul>
{{/if}}
{{/ baseInfo}}
{{#if promotion}}
<div class="goods-discount" id="goodsDiscount">
{{# promotion}}
<h2 class="short-text"><span class="promotion-icon"></span>{{promotionTitle}}</h2>
{{/ promotion}}
</div>
{{/if}}
{{# enterStore}}
<div id="enter-store" class="enter-store page-block tap-hightlight">
<a class="store-logo" href="{{url}}">
<mip-img src="{{image2 img w=100 h=100 q=90}}" alt="{{storeName}}"></mip-img>
</a>
<a class="store-name" href="{{url}}">{{storeName}}</a>
<a class="store-link" href="{{url}}">进入店铺&nbsp;<span>&gt;</span></a>
</div>
{{/ enterStore}}
<div class="product-desc">
{{{intro}}}
</div>
<div id="shop-goods-container" class="goods-container">{{{preference}}}</div>
<div class="cart-bar-fixed">
<div class="cart-bar">
<a href="//m.yohobuy.com/cart/index/index" class="new-foot-ico" rel="nofollow">
<div class="cart-icon"></div>
<div class="tip">购物车</div>
</a>
<a {{# enterStore}}href="{{url}}"{{/ enterStore}} class="new-foot-ico store{{#unless enterStore}} opa{{/unless}}">
<div class="shop-icon"></div>
<div class="tip">品牌店铺</div>
</a>
{{# baseInfo}}
<a href="//m.yohobuy.com/product/{{product_skn}}.html" class="addto-cart add-to-cart-url">立即购买</a>
{{/ baseInfo}}
</div>
</div>
{{> mip-footer}}
</div>
\ No newline at end of file
... ...
<div class="mip-footer">
<div class="option">
<a href="//m.yohobuy.com/signin.html" class="login">登录</a>
<a href="//m.yohobuy.com/reg.html" class="reg">注册</a>
<mip-fixed class="mip-fixed" type="gototop">
<mip-gototop class="mip-gototop">
<span class="back-to-top">回到顶部<span></span></span>
</mip-gototop>
</mip-fixed>
<div class="mip-footer-fixed">
<div class="mip-footer">
<div class="option">
<a href="//m.yohobuy.com/signin.html" class="login">登录</a>
<a href="//m.yohobuy.com/reg.html" class="reg">注册</a>
<mip-fixed class="mip-fixed" type="gototop">
<mip-gototop class="mip-gototop">
<span class="back-to-top">回到顶部<span></span></span>
</mip-gototop>
</mip-fixed>
</div>
<p class="copy-right">
CopyRight©2007-{{currentYear}} 南京新与力文化传播有限公司
</p>
</div>
<p class="copy-right">
CopyRight©2007-{{currentYear}} 南京新与力文化传播有限公司
</p>
</div>
\ No newline at end of file
... ...
... ... @@ -97,7 +97,8 @@ const newDetail = {
param: result.productSkn,
miniQrType: 1,
isOpen: _.get(req.app, 'locals.wap.wechat.miniPathOpen', false)
}) // param:品牌ID, name:品牌名称, miniQrType 1:商品 2 品牌,miniapp_type 0:有货,1:新与力
}), // param:品牌ID, name:品牌名称, miniQrType 1:商品 2 品牌,miniapp_type 0:有货,1:新与力
miphtml: `https://m.yohobuy.com/mip/product/${result.productSkn}.html`,
});
}).catch(next);
},
... ...
... ... @@ -2,7 +2,7 @@
<html mip>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>{{title}} | Yoho!Buy有货 | 潮流购物逛不停</title>
<link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css">
{{# canonical}}
... ...