fe / yoho-blk · Commits

Go to a project

Authored by 姜枫
Commit 9d33db3f60653b3ab39cd1fe7da987aae8de3b7d 2 parents c4bf5077 b3abf95f

handle merge

Inline Side-by-side
Showing 6 changed files with 511 additions and 246 deletions
... ... @@ -5,240 +5,244 @@
*/
'use strict';
const index = (req, res) => {
let data = {
brandBanner: {
bgColor: '#93897d',
brandLogo: {
link: '#',
img: 'http://placehold.it/{width}x{height}'
},
brandHome: {
link: '#'
}
},
nav: [
{
link: '#',
name: 'MEN首页'
},
{
link: '#',
name: '上衣'
},
{
link: '#',
name: '卫衣'
},
{
name: 'Spring 2016NEWT-Shirt 2016迷彩蝴蝶夹克'
}
],
goodInfo: {
name: 'Spring 2016NEWT-Shirt 2016迷彩蝴蝶夹克',
brandName: 'Supreme',
intro: '2016最新发布',
img: 'http://placehold.it/{width}x{height}',
sellPrice: 3199,
marketPrice: 4009,
colors: [
{
name: '黑色',
title: '黑色',
focus: true,
thumbs: [
'http://placehold.it/{width}x{height}',
'http://placehold.it/{width}x{height}',
'http://placehold.it/{width}x{height}',
'http://placehold.it/{width}x{height}',
'http://placehold.it/{width}x{height}'
],
sizes: [
{
name: 'S',
title: 'S',
sku: '12313',
num: 10
},
{
name: 'M',
title: 'M',
sku: '12314',
num: 14
},
{
name: 'L',
title: 'L',
sku: '12315',
num: 0
},
{
name: 'XL',
title: 'XL',
sku: '12316',
num: 0
}
],
rgb: '#000'
},
{
name: '黄色',
title: '黄色',
thumbs: [
'http://placehold.it/{width}x{height}',
'http://placehold.it/{width}x{height}'
],
rgb: '#efdc0e',
sizes: [
{
name: 'S',
title: 'S',
sku: '12313',
num: 0
},
{
name: 'M',
title: 'M',
sku: '12314',
num: 14
},
{
name: 'L',
title: 'L',
sku: '12315',
num: 0
},
{
name: 'XL',
title: 'XL',
sku: '12316',
num: 23
}
]
},
{
name: '蓝色',
title: '蓝色',
thumbs: [
'http://placehold.it/{width}x{height}',
'http://placehold.it/{width}x{height}',
'http://placehold.it/{width}x{height}',
'http://placehold.it/{width}x{height}'
],
rgb: '#2ea8e6'
},
{
name: '绿色',
title: '绿色',
thumbs: [
'http://placehold.it/{width}x{height}',
'http://placehold.it/{width}x{height}',
'http://placehold.it/{width}x{height}',
'http://placehold.it/{width}x{height}'
],
rgb: '#85b2ef'
}
]
},
description: {
titleEn: 'DESCRIPTION',
titleCn: '商品信息',
basic: [
{
key: '编号',
value: '51144694'
},
{
key: '颜色',
value: '灰色'
},
{
key: '性别',
value: '男款'
},
{
key: '经典款型',
value: '灰色'
}
]
},
material: {
titleEn: 'MATERIALS',
titleCn: '材料洗涤',
detail: [
{
img: 'http://placehold.it/{width}x{height}',
name: '皮革',
nameEn: 'Leather',
text: '不适宜沾水，避免硬物划花，使用专用清洁膏擦拭。长时间不着用，可用软毛巾抹掉表面尘土，上一层皮革保养油。建议几双鞋交替穿着，不穿时放置通风处保持鞋内干爽。'
}
],
wash: [
{
img: 'http://placehold.it/{width}x{height}',
name: '分色洗涤'
}
]
},
sizeInfo: {
titleEn: 'SIZEINFO',
titleCn: '尺码信息',
param: {
thead: [
{
width: 126,
name: '吊牌尺码'
},
{
width: 126,
name: '后衣长'
},
{
width: 126,
name: '前衣长'
}
],
tbody: [
['XS', 66, 66],
['S', 66, 66],
['L', 66, 66]
]
},
taste: {
thead: [
{
width: 170,
name: '模特'
},
{
width: 126,
name: '身高'
},
{
width: 126,
name: '体重'
}
],
tbody: [
[{
img: 'http://placehold.it/{width}x{height}',
name: 'Steven'
}, 187, 66],
[{
img: 'http://placehold.it/{width}x{height}',
name: 'Oliver'
}, 183, 66]
]
}
},
details: {
titleEn: 'DETAILS',
titleCn: '商品详情',
content: 'aaaa'
}
};
const Item = require('../models/item');
res.display('item', data);
const index = (req, res, next) => {
// let data = {
// brandBanner: {
// bgColor: '#93897d',
// brandLogo: {
// link: '#',
// img: 'http://placehold.it/{width}x{height}'
// },
// brandHome: {
// link: '#'
// }
// },
// nav: [
// {
// link: '#',
// name: 'MEN首页'
// },
// {
// link: '#',
// name: '上衣'
// },
// {
// link: '#',
// name: '卫衣'
// },
// {
// name: 'Spring 2016NEWT-Shirt 2016迷彩蝴蝶夹克'
// }
// ],
// goodInfo: {
// name: 'Spring 2016NEWT-Shirt 2016迷彩蝴蝶夹克',
// brandName: 'Supreme',
// intro: '2016最新发布',
// img: 'http://placehold.it/{width}x{height}',
// sellPrice: 3199,
// marketPrice: 4009,
// colors: [
// {
// name: '黑色',
// title: '黑色',
// focus: true,
// thumbs: [
// 'http://placehold.it/{width}x{height}',
// 'http://placehold.it/{width}x{height}',
// 'http://placehold.it/{width}x{height}',
// 'http://placehold.it/{width}x{height}',
// 'http://placehold.it/{width}x{height}'
// ],
// sizes: [
// {
// name: 'S',
// title: 'S',
// sku: '12313',
// num: 10
// },
// {
// name: 'M',
// title: 'M',
// sku: '12314',
// num: 14
// },
// {
// name: 'L',
// title: 'L',
// sku: '12315',
// num: 0
// },
// {
// name: 'XL',
// title: 'XL',
// sku: '12316',
// num: 0
// }
// ],
// rgb: '#000'
// },
// {
// name: '黄色',
// title: '黄色',
// thumbs: [
// 'http://placehold.it/{width}x{height}',
// 'http://placehold.it/{width}x{height}'
// ],
// rgb: '#efdc0e',
// sizes: [
// {
// name: 'S',
// title: 'S',
// sku: '12313',
// num: 0
// },
// {
// name: 'M',
// title: 'M',
// sku: '12314',
// num: 14
// },
// {
// name: 'L',
// title: 'L',
// sku: '12315',
// num: 0
// },
// {
// name: 'XL',
// title: 'XL',
// sku: '12316',
// num: 23
// }
// ]
// },
// {
// name: '蓝色',
// title: '蓝色',
// thumbs: [
// 'http://placehold.it/{width}x{height}',
// 'http://placehold.it/{width}x{height}',
// 'http://placehold.it/{width}x{height}',
// 'http://placehold.it/{width}x{height}'
// ],
// rgb: '#2ea8e6'
// },
// {
// name: '绿色',
// title: '绿色',
// thumbs: [
// 'http://placehold.it/{width}x{height}',
// 'http://placehold.it/{width}x{height}',
// 'http://placehold.it/{width}x{height}',
// 'http://placehold.it/{width}x{height}'
// ],
// rgb: '#85b2ef'
// }
// ]
// },
// description: {
// titleEn: 'DESCRIPTION',
// titleCn: '商品信息',
// basic: [
// {
// key: '编号',
// value: '51144694'
// },
// {
// key: '颜色',
// value: '灰色'
// },
// {
// key: '性别',
// value: '男款'
// },
// {
// key: '经典款型',
// value: '灰色'
// }
// ]
// },
// material: {
// titleEn: 'MATERIALS',
// titleCn: '材料洗涤',
// detail: [
// {
// img: 'http://placehold.it/{width}x{height}',
// name: '皮革',
// nameEn: 'Leather',
// text: '不适宜沾水，避免硬物划花，使用专用清洁膏擦拭。长时间不着用，可用软毛巾抹掉表面尘土，上一层皮革保养油。建议几双鞋交替穿着，不穿时放置通风处保持鞋内干爽。'
// }
// ],
// wash: [
// {
// img: 'http://placehold.it/{width}x{height}',
// name: '分色洗涤'
// }
// ]
// },
// sizeInfo: {
// titleEn: 'SIZEINFO',
// titleCn: '尺码信息',
// param: {
// thead: [
// {
// width: 126,
// name: '吊牌尺码'
// },
// {
// width: 126,
// name: '后衣长'
// },
// {
// width: 126,
// name: '前衣长'
// }
// ],
// tbody: [
// ['XS', 66, 66],
// ['S', 66, 66],
// ['L', 66, 66]
// ]
// },
// taste: {
// thead: [
// {
// width: 170,
// name: '模特'
// },
// {
// width: 126,
// name: '身高'
// },
// {
// width: 126,
// name: '体重'
// }
// ],
// tbody: [
// [{
// img: 'http://placehold.it/{width}x{height}',
// name: 'Steven'
// }, 187, 66],
// [{
// img: 'http://placehold.it/{width}x{height}',
// name: 'Oliver'
// }, 183, 66]
// ]
// }
// },
// details: {
// titleEn: 'DETAILS',
// titleCn: '商品详情',
// content: 'aaaa'
// }
// };
Item.getProductItemData(req.params).then(result => {
res.display('item', result);
}).catch(next);
};
module.exports = {
... ...
/**
* 商品基本信息
* @author: yyq<yanqing.yang@yoho.cn>
* @date: 2016/7/11
*/
'use strict';
const api = global.yoho.API;
const getProductBaseAsync = (pid, uid, skn) => {
let params = {
method: 'h5.product.data',
productId: pid
};
if (uid) {
params.uid = uid;
}
if (skn) {
params.product_skn = skn;
}
return api.get('', params, { cache: true });
};
module.exports = {
getProductBaseAsync
};
... ...
/**
* 商品详情页model
* @author: yyq<yanqing.yang@yoho.cn>
* @date: 2016/7/11
*/
'use strict';
const _ = require('lodash');
const itemAPI = require('./item-api');
const helpers = global.yoho.helpers;
// const getForceSourceUrl = (img) => {
// if (img) {
// img = img.split('\?imageView')[0];
// img = img.split('\?imageMogr2')[0];
// }
// return img;
// };
/**
* 设置品牌banner数据
* @param brand 品牌相关数据
* @return Object
*/
const _setBrandBanner = (brand) => {
let data = {
bgColor: '#93897d',
brandLogo: {
link: `#${brand.brandDomain}`, // 品牌跳转链接 -- 待处理
img: brand.brandIco
},
brandHome: {
link: `#${brand.brandDomain}` // 品牌跳转链接 -- 待处理
}
};
return {
brandBanner: data
};
};
/**
* 设置商品数据
* @param base 商品基础数据
* @return Object
*/
const _setProductData = (base) => {
let data = {
name: base.productName,
brandName: _.has(base, 'brand.brandName') ? base.brand.brandName : '',
intro: base.salesPhrase,
sellPrice: base.productPriceBo.salesPrice,
marketPrice: base.productPriceBo.marketPrice,
total: 0
};
let chooseSkuFlag;
if (_.toNumber(data.sellPrice) >= _.toNumber(data.marketPrice)) {
// 售价与吊牌价相同，只显示售价
_.unset(data, 'marketPrice');
}
// 遍历颜色尺寸
if (base.goodsList) {
let goods = [];
// 处理商品数据
_.forEach(base.goodsList, function(value) {
let group = {},
thumbs = [],
sizes = [];
// 如果status为0，即skc下架时就跳过该商品
if (!value.status) {
return;
}
if (value.goodsImagesList) {
group = {
name: value.colorName,
title: `${data.name} ${value.colorName}`,
total: 0
};
// 目前没有RGB值先以背景图方式实现
group.rgb = `url('${helpers.image(value.colorImage, 30, 30)}')`;
// 商品颜色列表
_.forEach(value.goodsImagesList, function(subValue) {
thumbs.push(subValue.imageUrl);
});
group.thumbs = thumbs;
// 缩略图空，不显示
if (!thumbs.length) {
return;
}
// 默认第一张图片
if (!_.has(data, 'img')) {
data.img = value.colorImage;
}
// 商品尺码列表
_.forEach(value.goodsSizeBoList, function(subValue) {
let size = {
name: subValue.sizeName,
title: subValue.sizeName,
sku: subValue.goodsSizeSkuId,
num: _.toInteger(subValue.goodsSizeStorageNum),
goodsId: subValue.goodsId
};
// 虚拟商品,增加为一件
if (subValue.attribute === 3) {
size.num = size.num > 1 ? 1 : 0;
}
// 如果status为0，即skc下架时,则库存设为0
if (subValue.status === 0) {
size.num = 0;
}
// 单个sku商品的总数累加
group.total += size.num;
// 默认选中该sku商品
if (group.total > 0 && !chooseSkuFlag) {
group.focus = true; // 选中sku商品
chooseSkuFlag = true;
}
// 商品的总数累加
data.total += size.num;
sizes.push(size);
});
group.sizes = sizes;
}
goods.push(group);
});
if (goods.length && !chooseSkuFlag) {
goods[0].focus = true;
}
data.colors = goods;
}
return data;
};
const _setBrandIntro = (brand) => {
let barndIntro = {};
if (brand) {
barndIntro = {
brand: {
titleEn: 'BRAND',
titleCn: '品牌介绍',
logo: brand.brandIco,
intro: brand.brandIntro
}
}
}
return barndIntro;
}
let getProductItemData = (params) => {
let pid = params[0];
// let gid = params[1];
return Promise.all([
itemAPI.getProductBaseAsync(pid)
]).then(result => {
let data = {};
if (!result[0].productName &&
!result[0].erpProductId &&
!result[0].productPriceBo) {
return data;
}
if (result[0].brand) {
Object.assign(data, _setBrandBanner(result[0].brand));
Object.assign(data, _setBrandIntro(result[0].brand));
}
Object.assign(data, {
goodInfo: _setProductData(result[0])
});
console.log(data);
return data;
});
};
module.exports = {
getProductItemData
};
... ...
... ... @@ -42,9 +42,11 @@
<label class="title">Color：</label>
<span class="color">蓝色</span>
</p>
<div class="color-list">
<div class="color-list clearfix">
{{# colors}}
{{> round-color}}
<div class="color-item" data-color="{{color}}" data-color="{{total}}" >
{{> round-color}}
</div>
{{/ colors}}
</div>
<p class="choose-size">
... ... @@ -94,15 +96,21 @@
{{/ goodInfo}}
<div class="other-info">
<div class="info-block">
<div class="block-title">
<label class="title-wrapper">
<span class="en">BRAND</span><br>
<span class="cn">品牌介绍</span>
</label>
{{# brand}}
<div class="info-block">
<div class="block-title">
<label class="title-wrapper">
<span class="en">{{titleEn}}</span><br>
<span class="cn">{{titleCn}}</span>
</label>
</div>
<div class="intro-block">
<img src="{{image logo 250 84}}">
<div class="intro-text">{{{intro}}}</div>
</div>
</div>
品牌介绍
</div>
{{/ brand}}
{{# description}}
<div class="info-block">
<div class="block-title">
... ...
<label class="round-color{{#if cur}} cur{{/if}}" title="{{title}}" data-color="{{color}}" data-color="{{total}}" style="background: {{rgb}}">
<label class="round-color{{#if cur}} cur{{/if}}" title="{{title}}" style="background: {{rgb}}">
<span class="iconfont icon-cover">&#xe61b;</span>
<span class="iconfont icon-round">&#xe620;</span>
</label>
\ No newline at end of file
... ...
... ... @@ -49,7 +49,7 @@
.option-content {
width: 226px;
margin: 0 auto;
padding: 40px 0;
padding: 40px 0 30px;
> p {
line-height: 50px;
... ... @@ -64,7 +64,8 @@
.color-list {
width: 246px;
.round-color {
.color-item {
float: left;
margin-right: 20px;
}
}
... ... @@ -78,6 +79,7 @@
float: left;
padding: 0 12px;
margin-right: 10px;
margin-bottom: 10px;
text-align: center;
border: 1px solid #f0f0f0;
font-weight: bold;
... ... @@ -110,8 +112,25 @@
font-size: 14px;
padding-bottom: 40px;
.intro-block {
padding-left: 270px;
position: relative;
> img {
position: absolute;
top: 50%;
left: 0;
margin-top: -42px;
}
.intro-text img {
display: none;
}
}
.des-basic {
width: 1140px;
li {
float: left;
width: 380px;
... ...