Authored by 陈峰

套餐分享90%

... ... @@ -29,12 +29,17 @@ const detail = (params) => {
if (!params.skn) {
return Promise.resolve({});
}
let bundleIndex = (params.index || 1);
--bundleIndex;
return getBundleBySkn(params.skn).then(result => {
return {
bundleInfo: _.get(result, 'data.bundleInfo', {}),
productList: productProcess.processProductList(_.get(result, 'data.productList', []))
};
if (_.has(result, `data[${bundleIndex}]`)) {
return {
bundleInfo: _.get(result, `data[${bundleIndex}].bundleInfo`, {}),
productList: productProcess.processProductList(_.get(result, `data[${bundleIndex}].productList`, []))
};
}
return {};
});
};
... ...
... ... @@ -223,12 +223,12 @@ const tool = {
* @param skn
* @returns {{}}
*/
processBundle(bundleData, skn, gid) {
processBundle(bundleData, skn, gid, index) {
let subPrice = _.get(bundleData, 'bundleInfo.subPrice', 0);
return {
title: '优惠套装',
href: helpers.urlFormat('/product/bundle/detail', {skn: skn, gid: gid}),
href: helpers.urlFormat('/product/bundle/detail', {skn: skn, gid: gid, index: index}),
description: subPrice ? '立省¥' + subPrice : 0,
productList: productProcess.processProductList(bundleData && bundleData.productList)
};
... ... @@ -330,16 +330,15 @@ const newDetail = {
userConsult: info[3]
}, productId);
let bundleData = _.get(info[5], 'data', null);
/* 套装 */
if (bundleData && _.get(bundleData, 'bundleInfo.discountType', null) === 1) {
finalResult.bundleData = tool.processBundle(bundleData, skn, gid);
}
let bundleDatas = _.get(info[5], 'data', []);
/* 量贩 */
if (bundleData && _.get(bundleData, 'bundleInfo.discountType', null) === 2) {
tool.processDiscount(finalResult, bundleData);
if (_.some(bundleDatas, data => data.discountType === 2)) {
tool.processDiscount(finalResult, _.find(bundleDatas, data => data.discountType === 2));
} else { /* 套装 */
finalResult.bundleDatas = _.map(bundleDatas, (data, index) => {
return tool.processBundle(data, skn, gid, ++index);
});
}
return finalResult;
... ...
... ... @@ -10,7 +10,7 @@ const isProduction = process.env.NODE_ENV === 'production';
const isTest = process.env.NODE_ENV === 'test';
const domains = {
api: 'http://api-test3.yohops.com:9999/',
api: 'http://dev-api.yohops.com:9999/',
service: 'http://service-test3.yohops.com:9999/',
liveApi: 'http://testapi.live.yohops.com:9999/',
singleApi: 'http://api-test3.yohops.com:9999/',
... ... @@ -27,7 +27,7 @@ const domains = {
module.exports = {
app: 'h5',
appVersion: '5.4.1', // 调用api的版本
appVersion: '5.5.0', // 调用api的版本
port: 6001,
siteUrl: '//m.yohobuy.com',
assetUrl: '//127.0.0.1:5001',
... ...
{{# bundleData}}
<div class="bundle-nav">
<div class="bundle-title">{{title}}</div>
<div class="bundle-right">
<a href="{{href}}">
{{#if description}}
<span class="bundle-desc">{{description}}</span>
{{/if}}
<span class="iconfont">&#xe604;</span>
</a>
</div>
</div>
<div class="bundle-product">
<div class="swiper-wrapper">
{{# productList}}
<div class="swiper-slide plus plus-{{@index}}"><span class="iconfont">&#xe624;</span></div>
<div class="swiper-slide product-box">
<a href="{{@root.bundleData.href}}"><img src="{{image default_images 155 206}}" alt="{{product_name}}"></a>
<div class="bundle-price">{{format_sales_price}}</div>
</div>
{{/ productList}}
</div>
</div>
{{/ bundleData}}
\ No newline at end of file
... ...
{{# bundleData}}
{{#if bundleDatas.length}}
<div class="bundle">
<div class="bundle-nav">
<div class="bundle-title">{{title}}</div>
<div class="bundle-right">
<a href="{{href}}">
{{#if description}}
<span class="bundle-desc">{{description}}</span>
{{/if}}
<span class="iconfont">&#xe604;</span>
</a>
</div>
</div>
<div class="bundle-product">
<div class="bundle-tabs any">
<div class="swiper-wrapper">
{{# productList}}
<div class="swiper-slide plus plus-{{@index}}"><span class="iconfont">&#xe624;</span></div>
<div class="swiper-slide product-box">
<a href="{{@root.bundleData.href}}"><img src="{{image default_images 155 206}}" alt="{{product_name}}"></a>
<div class="bundle-price">{{format_sales_price}}</div>
</div>
{{/ productList}}
{{# bundleDatas}}
<div class="swiper-slide{{#if @first}} selected{{/if}}" data-index="{{@index}}">
<span>{{title}}</span>
<div class="line"></div>
</div>
{{/ bundleDatas}}
</div>
</div>
<div class="bundle-content">
{{> ./bundle-content}}
</div>
</div>
{{/ bundleData}}
\ No newline at end of file
{{/if}}
\ No newline at end of file
... ...
... ... @@ -60,6 +60,9 @@ var limitProductCode,
// 限购商品的skn。只有限购商品时才会设置。
skn;
// 套餐模式
var budnleMode;
// 量贩商品
var discountNum = $('#mnum').val() - 0,
discountLimit = false;
... ... @@ -140,6 +143,21 @@ function setLimitGoodModeWithSknId(code, sknId) {
skn = sknId;
}
/*
* 设置当前面板为套餐商品选择模式
*
* @param {String} sknId. 当前限购商品的sknId
*
* @return {undefined}
*/
function setBundleModeWithSknId(sknId) {
disableNumEdit();
isEdit = 1;
skn = sknId;
$('#chose-btn-sure').html('确认');
budnleMode = true;
}
// 删除面板
function removePannel() {
var $pannel = $('.chose-panel'),
... ... @@ -709,6 +727,23 @@ $yohoPage.on('touchstart', '.btn-minus', function() {
return;
}
if (budnleMode && cbFn) {
let sizeChose = $('.size-list').find('.chosed'),
sku = sizeChose.data('skuid'),
color = $('.color-list').find('.chosed').html().substring(0, 4) + '...',
size = sizeChose.html();
cbFn({
skn,
sku,
color,
size
});
confirming = false;
hide();
return;
}
// 针对是否处于编辑模式设置不同的url和需要post的数据
if (isEdit) {
cartGoodData = {
... ... @@ -851,3 +886,4 @@ exports.remove = removePannel;
exports.setEditModeWithSknId = setEditModeWithSknId;
exports.disableNumEdit = disableNumEdit;
exports.setLimitGoodModeWithSknId = setLimitGoodModeWithSknId;
exports.setBundleModeWithSknId = setBundleModeWithSknId;
... ...
/**
* Created by targaryen on 2016/11/28.
*/
var $ = require('yoho-jquery'),
tip = require('../plugin/tip');
let $ = require('yoho-jquery'),
tip = require('plugin/tip');
require('../common');
require('common');
let share = require('common/share');
var chosePanelRender = require('../common/chose-panel'),
chosePanel = require('./bundle/chose-pannel');
let chosePanelRender = require('common/chose-panel'),
chosePanel = require('cart/chose-panel');
var $selectBtn = $('.select-btn'),
let $selectBtn = $('.select-btn'),
$buyNowBtn = $('#bundle-buy-now');
// cookie 参数
var actCkOpthn = {
let actCkOpthn = {
path: '/cart/index'
};
$(function() {
window.setCookie('activity-info', '', actCkOpthn);
share({
imgUrl: 'https://feature.yoho.cn/300x300.png',
title: '会搭是成为潮流ICON的第一步,搭配购买还有优惠折扣!',
link: window.location.href,
desc: '超高性价比,开启省钱大作战!'
});
});
/**
* 选择商品颜色等
*/
$selectBtn.on('touchend', function() {
var self = $(this);
let self = $(this);
$.post('/product/detail/info', {
id: self.data('id'),
productSkn: self.data('skn')
}, function(data) {
chosePanelRender(data);
chosePanel.init(self.data('skn'));
chosePanel.show();
chosePanel.init();
chosePanel.setBundleModeWithSknId(self.data('skn'));
chosePanel.show('', (productData) => {
var product = $('#gskn-' + productData.skn);
product.data('sku', productData.sku);
product.html('颜色:' + productData.color + ' 尺码:' + productData.size);
});
});
});
$('.goods-img').on('touchend', function() {
var packGood = $(this).parent().find('.select-btn');
let packGood = $(this).parent().find('.select-btn');
if (window._yas && window._yas.sendCustomInfo) {
window._yas.sendCustomInfo({
... ... @@ -58,7 +71,7 @@ $('.goods-img').on('touchend', function() {
* 立即购买
*/
$buyNowBtn.on('click', function() {
var bundleGoods = [],
let bundleGoods = [],
bundleId = $('#activityId').val(),
gskn = $('span[id^="gskn"]'),
gsknSelected = false,
... ...
... ... @@ -36,7 +36,8 @@ var $chosePanel = $('.chose-panel'),
$cartBar,
$soonSoldOut = $('.soonSoldOut-tag'),
$yohoPage = $('.yoho-page'),
single = $('#single').val() || 0;
single = $('#single').val() || 0,
$thumbImg;
var productSkn;
... ... @@ -73,6 +74,7 @@ function init(sknId) {
curSizeIndex = 0;
productSkn = sknId;
disableShowNum();
$thumbImg = $('.thumb-img');
}
// 删除面板
... ... @@ -424,7 +426,18 @@ $yohoPage.on('touchstart', '.btn-minus', function () {
);
}
});
$yohoPage.on('click', '.close', function() {
hide();
});
$yohoPage.on('touchstart', '.thumb-img', function() {
if ($thumbImg.hasClass('hover')) {
$thumbImg.removeClass('hover');
} else {
$thumbImg.addClass('hover');
}
});
exports.init = init;
exports.show = show;
exports.remove = removePannel;
... ...
... ... @@ -2,13 +2,85 @@
* Created by targaryen on 2016/11/25.
*/
var $ = require('yoho-jquery'),
let $ = require('yoho-jquery'),
Swiper = require('yoho-swiper');
let $bundle = $('#placeholder-bundle');
let bundleT = require('product/detail/bundle.hbs');
let bundleContentT = require('product/detail/bundle-content.hbs');
$(function() {
new Swiper('.bundle-product', {
freeMode: true,
slidesPerView: 5,
lazyLoading: true
});
});
let bundleObj = {
bundles: [],
bundleIndex: 0,
init(bundles) {
let self = this;
self.bundles = bundles;
try {
self.render();
self.regTabsSwiper();
self.regProductSwiper();
self.regEvent();
} catch (e) {
console.error(e);
}
},
render() {
let self = this;
var bundleHtml = bundleT({
bundleDatas: self.bundles,
bundleData: self.bundles[self.bundleIndex],
bundleIndex: self.bundleIndex
});
return $bundle.replaceWith(bundleHtml);
},
renderProduct() {
let self = this;
var bundleHtml = bundleContentT({
bundleData: self.bundles[self.bundleIndex],
});
$('.bundle-content').html(bundleHtml);
self.regProductSwiper();
},
regEvent() {
let self = this;
$('.bundle-tabs').on('click', '.swiper-slide', (e) => {
let index = $(e.currentTarget).data('index');
if (self.bundleIndex !== index) {
$(e.currentTarget).addClass('selected').siblings().removeClass('selected');
self.bundleIndex = index;
self.renderProduct();
}
});
},
regProductSwiper() {
let self = this;
if (self.bundles[self.bundleIndex].productList.length > 3) {
new Swiper('.bundle-product', {
freeMode: true,
slidesPerView: 'auto',
lazyLoading: true
});
}
},
regTabsSwiper() {
let self = this;
if (self.bundles.length > 3) {
$('.bundle-tabs').removeClass('any');
new Swiper('.bundle-tabs', {
freeMode: true,
slidesPerView: 'auto',
lazyLoading: true
});
}
}
};
module.exports = bundleObj;
... ...
... ... @@ -205,12 +205,10 @@ setTimeout(() => {
var promotionT = require('product/detail/promotion.hbs');
var feedbackT = require('product/detail/feedbacks.hbs');
var enterStoreT = require('product/detail/enterStore.hbs');
var bundleT = require('product/detail/bundle.hbs');
// placeholder
var $feedbackStore = $('#placeholder-feedback-store');
var $promotion = $('#placeholder-promotion');
var $bundle = $('#placeholder-bundle');
/**
* 渲染 feedback, 店铺, 替换placeholder
... ... @@ -249,19 +247,6 @@ setTimeout(() => {
return $placeholder.replaceWith(promotionHtml);
}
/**
* 渲染 套装,替换placeholder
* @param data
* @param $placeholder
* @returns {*}
*/
function renderBundle(data, $placeholder) {
var bundleHtml = bundleT({
bundleData: data.bundleData
});
return $placeholder.replaceWith(bundleHtml);
}
function promotionInit() {
var $goodsDiscount = $('#goodsDiscount');
... ... @@ -304,8 +289,8 @@ setTimeout(() => {
renderFeedbackStore(info, $feedbackStore);
renderPromotion(info, $promotion);
if (info.bundleData) {
renderBundle(info, $bundle);
if (info.bundleDatas && info.bundleDatas.length) {
require('./detail/bundle').init(info.bundleDatas);
$('.bundle').on('touchstart', function() {
if (window._yas && window._yas.sendCustomInfo) {
window._yas.sendCustomInfo({
... ... @@ -322,7 +307,6 @@ setTimeout(() => {
// step2: init js
require('./detail/comments-consults');
require('./detail/consultform'); // TODO
require('./detail/bundle');
promotionInit();
window.rePosFooter && window.rePosFooter();
});
... ...
.bundle {
height: 344px;
height: 420px;
overflow: hidden;
background-color: #fff;
margin-bottom: 30px;
border-bottom: 1px solid #e0e0e0;
border-top: 1px solid #e0e0e0;
.bundle-tabs {
padding-left: 23px;
padding-right: 23px;
height: 76px;
border-bottom: solid 1PX #ddd;
&.any {
padding: 0;
.swiper-slide {
width: auto;
flex: 1;
}
}
.swiper-slide {
width: 168px;
text-align: center;
position: relative;
&:first-child {
.line {
display: none;
}
}
&.selected {
span {
color: #454545;
border-bottom: solid 2PX #454545;
}
}
.line {
width: 1px;
height: 28px;
margin-top: 24px;
float: left;
border-left: solid 1PX #ddd;
}
span {
display: inline-block;
min-width: 103px;
line-height: 76px;
height: 76px;
color: #b2b2b2;
font-size: 28px;
}
}
}
.bundle-nav {
overflow: hidden;
padding: 0 30px;
line-height: 88px;
border-bottom: 1px solid #e0e0e0;
line-height: 70px;
.bundle-title {
float: left;
... ... @@ -22,10 +73,11 @@
float: right;
.bundle-desc {
padding: 3px 5px;
padding: 0 10px;
border: 1px #d0021b solid;
border-radius: 5px;
color: #d0021b;
font-size: 12PX;
}
.iconfont {
... ... @@ -35,8 +87,8 @@
}
.bundle-product {
margin-top: 30px;
width: 100%;
margin-top: 10px;
.swiper-wrapper {
.plus {
... ... @@ -50,6 +102,7 @@
.plus-0 {
visibility: hidden;
margin: 0;
}
.product-box {
... ...