Merge branch 'feature/mipDetail' into 'gray'

Feature/mip detail



See merge request !1220

@@ -216,7 +216,6 @@ const detailIndex = (req, res, next) => {
                 currentHref: `https://m.yohobuy.com/guang/${id}.html`
             },
             showAnaJson: {
-                addBaiduSite: false,
                 title: `${detail.getArticle.article_title} | Yoho!Buy有货 | 潮流购物逛不停`,
                 publishTime: mipPublishTime,
                 pic: mipPic,

+'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.skn,
+            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 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: {
+                url: `${req.protocol}://m.yohobuy.com${req.originalUrl}`,
+                title: `${miptitle} | Yoho!Buy有货 | 潮流购物逛不停`,
+                pic: mipPic,
+                des: mipDes,
+                publishTime: ''
+            }
+        }, 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 !important;
 }
-
-.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;
-}
+/* 底部结束 */

+.detail-page {
+    max-width: 750px;
+    width: 100%;
+    overflow: hidden;
+    margin: 0 auto;
+    background-color: #f0f0f0
+}
+
+.detail-page * {
+    box-sizing: border-box;
+    font-weight: normal;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.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;
+}
+/* 底部结束 */

@@ -5,15 +5,15 @@ module.exports = {
     /**
      * 分离 CSS
      * @param {*} $
-     * @param {*} prefix
+     * @param {*} option
      */
-    processStyle($, prefix) {
+    processStyle($, option) {
         let css = [];
 
         $('*').each(function(index) {
             let $this = $(this);
             let localStyle = $this.attr('style');
-            let className = `yoho-inline-style-${prefix}-${index}`;
+            let className = `yoho-inline-style-${option.prefix}-${index}`;
 
             if (localStyle) {
                 css.push(`.${className}{${localStyle}}`);
@@ -28,13 +28,13 @@ module.exports = {
      * 替换标签
      * @param {*} $
      */
-    processTag($) {
+    processTag($, option) {
         let css = [];
 
         // mip-anim
         $('img[src*=".gif"]').each(function() {
             let $this = $(this);
-            let mipAnim = `<mip-anim layout="responsive" width="350" height="263" src="${$this.attr('src')}" alt="${$this.attr('alt') || ''}" class="${$this.attr('class') || ''}"></mip-anim>`; // eslint-disable-line
+            let mipAnim = `<mip-anim layout="container" src="${$this.attr('src')}" alt="${$this.attr('alt') || ''}" class="${$this.attr('class') || ''}"></mip-anim>`; // eslint-disable-line
 
             $this.replaceWith(mipAnim);
         });
@@ -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);
         });
@@ -50,7 +50,7 @@ module.exports = {
         // mip-video
         $('video').each(function() {
             let $this = $(this);
-            let mipVideo = `<mip-video layout="responsive" width="350" height="263" poster="${$this.attr('poster') || ''}" src="${$this.attr('src')}" alt="${$this.attr('alt') || ''}" class="${$this.attr('class') || ''}"></mip-video>`; // eslint-disable-line
+            let mipVideo = `<mip-video layout="container" poster="${$this.attr('poster') || ''}" src="${$this.attr('src')}" alt="${$this.attr('alt') || ''}" class="${$this.attr('class') || ''}"></mip-video>`; // eslint-disable-line
 
             $this.replaceWith(mipVideo);
         });
@@ -66,18 +66,29 @@ module.exports = {
         // mip-iframe
         $('iframe').each(function() {
             let $this = $(this);
-            let mipIframe = `<mip-iframe layout="responsive" width="350" height="263" src="${$this.attr('src')}" class="${$this.attr('class') || ''}"></mip-iframe>`; // eslint-disable-line
+            let mipIframe = `<mip-iframe layout="container" src="${$this.attr('src')}" class="${$this.attr('class') || ''}"></mip-iframe>`; // eslint-disable-line
 
             $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 (option.mipLink) {
+            $('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() {
@@ -96,17 +107,17 @@ module.exports = {
     /**
      * 处理 HTML 为 MIP 所需要的格式
      * @param {*} html HTML
-     * @param {*} prefix  CSS 前缀
+     * @param {*} option.prefix  CSS 前缀
      */
 
-    process(html = '', prefix = 0) {
+    process(html = '', option = {}) {
         html = _.isString(html) ? html : '';
 
         let $ = cheerio.load(html, {
             decodeEntities: false
         });
-        let inlineStyle = this.processStyle($, prefix); // 必须先处理内联样式
-        let tagHtml = this.processTag($);
+        let inlineStyle = this.processStyle($, option); // 必须先处理内联样式
+        let tagHtml = this.processTag($, option);
 
         return {
             mipHtml: tagHtml.mipHtml,

+'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}`; // eslint-disable-line
+            }
+
+            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 = {
+                    mipLink: 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);
 
@@ -22,4 +23,6 @@ router.get(/^\/guang\/(.*?)\.html/, rewrite.resolve, guang.detailIndex);
 router.get('/chanpin/:id.html', chanpin.index);
 router.get('/list/:id.html', chanpin.redirect);
 
+router.get('/product/:skn.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

@@ -82,7 +82,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}}

@@ -253,7 +253,7 @@ const processArticleDetail = (articleContent, isApp, gender, isWeixin, isqq, isW
             let newText = '';
 
             if (isMip) {
-                let mipHtml = mipUtils.process(value.text.data.text, index);
+                let mipHtml = mipUtils.process(value.text.data.text, {prefix: index});
 
                 newText = mipHtml.mipHtml;
                 localStyle.push(mipHtml.css);