fe / yoho-blk · Commits

Go to a project

Authored by xuqi
Commit 79185408f1604434ccad4483b0e2682f44c15649 2 parents 550a4b4e 069033c8

Merge branch 'develop' into feature/shopping 

Conflicts:
	public/font/iconfont.svg
Inline Side-by-side
Showing 58 changed files with 2247 additions and 576 deletions
/**
* 品牌
* @author: zxr<xiaoru.zhang@yoho.cn>
* @date: 2016/7/8
*/
'use strict';
const index = (req, res) => {
res.display('index', {
module: 'brand',
page: 'index',
title: '品牌',
brand: {
nav: [
{
link: '//guang.yohobuy.com/index/index?type=0',
pathTitle: '首页',
name: 'MEN首页'
},
{
link: '/',
pathTitle: '品牌',
name: 'Brand品牌'
}
],
tabs: [
{
url: '#',
name: '',
src: '#'
},
{
url: '#',
name: '',
src: '#'
},
{
url: '#',
name: '',
src: '#'
}
],
navigation: [
{
name: 'A'
},
{
name: 'B'
},
{
name: 'B'
},
{
name: 'A'
},
{
name: 'B'
},
{
name: 'B'
},
{
name: 'B'
}
],
category: [
{
key: 'A',
brandList: [
{
key: 'A',
href: '#',
name: 'edhwke'
},
{
key: 'A',
href: '#',
name: 'edhwke'
},
{
key: 'A',
href: '#',
name: 'edhwke'
},
{
key: 'A',
href: '#',
name: 'edhwke'
},
{
key: 'A',
href: '#',
name: 'edhwke'
},
{
key: 'A',
href: '#',
name: 'edhwke'
}
]
},
{
key: 'A',
brandList: [
{
key: 'A',
href: '#',
name: 'edhwke'
},
{
key: 'A',
href: '#',
name: 'edhwke'
},
{
key: 'A',
href: '#',
name: 'edhwke'
},
{
key: 'A',
href: '#',
name: 'edhwke'
},
{
key: 'A',
href: '#',
name: 'edhwke'
},
{
key: 'A',
href: '#',
name: 'edhwke'
}
]
}
]
},
helpers: {
// import component, path depends on your project
pagination: require('../../../doraemon/components/pagination/pagination').createPagination
}
});
};
module.exports = {
index // 组件demo页
};
... ...
/**
* sub app partial
* @author: zhangxiaoru<xiaoru.zhang@yoho.cn>
* @date: 2016/07/8
*/
'use strict';
var express = require('express'),
path = require('path'),
hbs = require('express-handlebars');
var app = express();
// set view engin
var doraemon = path.join(__dirname, '../../doraemon/views'); // parent view root
// var partials = path.join(__dirname, './views'); // parent view root
app.on('mount', function(parent) {
delete parent.locals.settings; // 不继承父 App 的设置
Object.assign(app.locals, parent.locals);
});
app.set('views', path.join(__dirname, 'views/action'));
app.engine('.hbs', hbs({
extname: '.hbs',
defaultLayout: 'layout',
layoutsDir: doraemon,
partialsDir: [path.join(__dirname, 'views/partial'), `${doraemon}/partial`],
helpers: global.yoho.helpers
}));
// router
app.use(require('./router'));
module.exports = app;
... ...
'use strict';
... ...
/**
* router of sub app channel
* @author: zhangxiaoru<xiaoru.zhang@yoho.cn>
* @date: 2016/07/04
*/
'use strict';
const router = require('express').Router(); // eslint-disable-line
const cRoot = './controllers';
const brand = require(cRoot + '/brand');
router.get('/', brand.index); // 品牌首页
module.exports = router;
... ...
<div class="brand-page blk-page center-content">
{{# brand}}
{{> path-nav}}
<div class="brands-tabs height-initial">
<ul class="clearfix">
{{#each tabs}}
<li>
<a href="{{url}}" target="_blank">
<div class="g-mask"></div>
<p class="tips">{{name}}</p>
<img class="lazy" data-original="{{src}}"/>
</a>
</li>
{{/each}}
</ul>
</div>
<div class="brands-category">
<div class="category-nav">
{{#each navigation}}
<a href="#{{name}}">{{name}}</a>
{{/each}}
</div>
</div>
<div class="brands-list" >
{{> list}}
</div>
{{/ brand}}
</div>
\ No newline at end of file
... ...
{{#each category}}
<dl class="clearfix" name="{{key}}">
<dt>{{key}}</dt>
<dd>
<ul class="clearfix">
{{#each brandList}}
<li>
<a data-key="{{key}}" href="{{href}}" target="_blank">
<img class="lazy" data-original="{{href}}">
<span>{{name}}</span>
</a>
</li>
{{/each}}
</ul>
</dd>
</dl>
{{/each}}
\ No newline at end of file
... ...
... ... @@ -8,10 +8,11 @@
const editorialModel = require('../models/editorial');
const index = (req, res) => {
var pageNum = req.query.page || 1;
const index = (req, res, next) => {
let pageNum = req.query.page || 1;
let type = req.query.type || 0;
editorialModel.getIndexData().then((result) => {
editorialModel.getIndexData(type).then((result) => {
res.display('index', {
module: 'editorial',
page: 'index',
... ... @@ -26,41 +27,21 @@ const index = (req, res) => {
{
link: '/editorial?type=1',
pathTitle: '资讯',
name: '咨询'
name: '资讯'
},
{
link: '/',
pathTitle: '资讯',
name: '咨询'
}
],
msgTypes: result,
msg: [
{
id: '1',
msgLeft: '潮品',
msgTitle: '很到位和范围的恢复文件和的减肥了晚餐费',
img: '',
msgContent: '鞋款定价回复即可老地方了服务',
time: '2016/05/25 19:36',
liked: true,
like: '8'
},
{
id: '2',
msgLeft: '潮品',
msgTitle: '很到位和范围的恢复文件和的减肥了晚餐费',
img: '',
msgContent: '鞋款定价回复即可老地方了服务',
time: '2016/05/25 19:36',
liked: true,
like: '8'
name: '资讯'
}
],
msgTypes: result.msgTypes,
msg: result.msg,
paginationOpts: {
page: pageNum, // current page: http://host/?page=2
limit: 10, // per_page records' number
totalRows: 100 // total page number
page: pageNum, // current page: http://host/?page=2
limit: 20, // per_page records' number
total: 300, // total page number
queryParams: req.query
}
},
helpers: {
... ... @@ -68,7 +49,7 @@ const index = (req, res) => {
pagination: require('../../../doraemon/components/pagination/pagination').createPagination
}
});
});
}).catch(next);
// res.display('index', {
// module: 'editorial',
... ... @@ -189,29 +170,30 @@ const list = (req, res) => {
msg: [
{
id: '1',
msgLeft: '潮品',
msgTitle: '很到位和范围的恢复文件和的减肥了晚餐费',
categoryName: '潮品',
title: '很到位和范围的恢复文件和的减肥了晚餐费',
img: '',
msgContent: '鞋款定价回复即可老地方了服务',
time: '2016/05/25 19:36',
liked: true,
like: '8'
intro: '鞋款定价回复即可老地方了服务',
publishTime: '2016/05/25 19:36',
isPraise: true,
praiseNum: '8'
},
{
id: '2',
msgLeft: '潮品',
msgTitle: '很到位和范围的恢复文件和的减肥了晚餐费',
id: '1',
categoryName: '潮品',
title: '很到位和范围的恢复文件和的减肥了晚餐费',
img: '',
msgContent: '鞋款定价回复即可老地方了服务',
time: '2016/05/25 19:36',
liked: true,
like: '8'
intro: '鞋款定价回复即可老地方了服务',
publishTime: '2016/05/25 19:36',
isPraise: true,
praiseNum: '8'
}
],
paginationOpts: {
page: pageNum, // current page: http://host/?page=2
limit: 10, // per_page records' number
totalRows: 100 // total page number
page: pageNum, // current page: http://host/?page=2
limit: 10, // per_page records' number
total: 100, // total page number
queryParams: req.query
}
},
... ...
'use strict';
const serviceAPI = global.yoho.ServiceAPI;
// const api = global.yoho.API;
const camelCase = global.yoho.camelCase;
const _ = require('lodash');
const _processIndexData = (list) => {
// const moment = require('moment');
const logger = global.yoho.logger;
// const helpers = global.yoho.helpers;
const _processNavData = (list, type) => {
let formatData = [];
list = list || [];
list = camelCase(list);
_.forEach(list, (data, index) => {
// data.url = `//guang.yohobuy.com/index/index?type=${data.id}`;
data.url = `//127.0.0.1:6003/editorial?type=${data.id}`;
if (index === 0) {
data.isActive = true;
} else {
data.isActive = false;
}
data.isActive = index === parseInt(type, 10) ? true : false;
formatData.push(data);
});
... ... @@ -24,17 +26,61 @@ const _processIndexData = (list) => {
return formatData;
};
const getIndexData = () => {
const _processListData = (list) => {
list = list || [];
list = camelCase(list);
// let data = moment('2016年06月02日 15:56', 'YYYY年MM月DD日 HH:mm').format('YYYY/MM/DD HH:mm');
let artList = list.list.artList.map(data =>{
data.publishTime = data.publishTime.replace(/年|月/g, '/');
data.publishTime = data.publishTime.replace(/日/g, '');
return data;
});
return artList;
};
const _getResources = (type) => {
return serviceAPI.get('guang/api/v1/category/get', {}).then((result) => {
if (result && result.code === 200) {
return _processIndexData(result.data);
return _processNavData(result.data, type);
} else {
logger.error('资讯首页数据返回 code 不是 200');
logger.error('资讯首页导航数据返回 code 不是 200');
return {};
}
});
};
const _getBreakingSort = () => {
return serviceAPI.get('guang/api/*/article/getList', {}).then((result) => {
if (result && result.code === 200) {
return _processListData(result.data);
} else {
logger.error('资讯列表数据返回 code 不是 200');
return {};
}
});
};
const getIndexData = (type) => {
return Promise.all([_getResources(type), _getBreakingSort()])
.then((result) => {
return {
msgTypes: result[0],
msg: result[1]
};
});
};
module.exports = {
getIndexData
};
... ...
... ... @@ -11,6 +11,6 @@ const cRoot = './controllers';
const editorial = require(cRoot + '/editorial');
router.get('/', editorial.index); // 咨询首页
// router.get('/list', editorial.list); // 咨询列表页
router.get('/list', editorial.list); // 咨询列表页
module.exports = router;
... ...
<div class="content-msg clearfix" data-id="{{id}}">
<div class="msg-left">{{msgLeft}}</div>
<div class="msg-left">{{categoryName}}</div>
<div class="msg-right">
<a class="msg-title" href="{{url}}" target="_blank">{{msgTitle}}</a>
<a class="msg-title" href="{{url}}" target="_blank">{{title}}</a>
<a href="{{url}}" target="_blank">
<img class="lazy" data-original="{{img}}">
<img class="lazy" data-original="{{src}}">
</a>
<div class="content">{{msgContent}}</div>
<div class="content">{{intro}}</div>
<div class="msg-app">
<span class="time">
<i class="iconfont">&#xe606;</i>
<b class="time-word">{{time}}</b>
<b class="time-word">{{publishTime}}</b>
</span>
<span class="like-comment">
<i class="iconfont like-icon{{#if liked}} liked{{/if}}">&#xe60e;</i>
<b class="like-num">{{like}}</b>
<i class="iconfont like-icon{{#if isPraise}} liked{{/if}}">&#xe60e;</i>
<b class="like-num">{{praiseNum}}</b>
</span>
</div>
</div>
... ...
/**
* [个人中心]收货地址
* @author: jiangmin
* @date: 2016/07/05
*/
'use strict';
const mcHandler = require('../models/menu-crumb-handler');
const addressModel = require('../models/address');
/**
* 收货地址页面加载
*/
const index = (req, res) => {
addressModel.getAddressDataAsync('123456', 20).then(result => {
for (let i = 0; i < result.data.length; i++) {
result.data[i].default = result.data[i].is_default === 'Y';
}
result.data.leftLength = 20 - result.data.length;
res.render('index', {
module: 'me',
page: 'address',
isMe: true,
content: {
nav: mcHandler.getMeCrumb(),
navigation: mcHandler.getSideMenu('收货地址'),
banner: 'http://placehold.it/150x120',
address: true,
title: '收货地址',
data: result.data
}
});
});
};
/**
* 添加地址
*/
const addAddressData = (req, res) => {
let uid = req.body.uid;
let address = req.body.address;
let areaCode = req.body.area_code;
let consignee = req.body.consignee;
let mobile = req.body.mobile;
let phone = req.body.phone;
addressModel.addAddressData(uid, address, areaCode, consignee, mobile, phone).then(result => {
res.send(result);
});
};
/**
* 修改地址
*/
const updateAddressData = (req, res) => {
let id = req.body.id;
let uid = req.body.uid;
let address = req.body.address;
let areaCode = req.body.area_code;
let consignee = req.body.consignee;
let mobile = req.body.mobile;
let phone = req.body.phone;
addressModel.updateAddressData(id, uid, address, areaCode, consignee, mobile, phone).then(result => {
res.send(result);
});
};
/**
* 删除地址
*/
const delAddressData = (req, res) => {
let id = req.body.id;
let uid = req.body.uid;
addressModel.delAddressData(id, uid).then(result => {
res.send(result);
});
};
/**
* 设置默认地址
*/
const setDefaultAddress = (req, res) => {
let id = req.body.id;
let uid = req.body.uid;
addressModel.setDefaultAddress(id, uid).then(result => {
res.send(result);
});
};
module.exports = {
index,
addAddressData,
updateAddressData,
delAddressData,
setDefaultAddress
};
... ...
... ... @@ -38,7 +38,8 @@ const getOrderList = (req, res) => {
layout: false,
page: 'order',
isMe: true,
orderList: result.order.orderList
orderList: result.order.orderList,
paginationOpts: result.order.paginationOpts
});
});
};
... ...
/**
* [个人中心]收货地址
* @author: jiangmin
* @date: 2016/07/05
*/
'use strict';
const api = global.yoho.API;
/**
* 地址列表数据
*
* @param uid 用户ID
* @param limit 分页大小参数(默认10条)
* @return array 地址接口返回的数据
*/
const getAddressDataAsync = (uid, limit) => {
return api.get('', {
method: 'app.address.gethidden',
uid: uid,
limit: limit
}).then(result => {
// console.log('列表结果result', result);
if (result.code === '200') {
return result.data;
}
return result;
});
};
/**
* 保存地址数据
*
* @param uid 用户ID
* @param address 地址信息
* @param areaCode 城市码
* @param consignee 收货人
* @param mobile 手机号码
* @param phone 电话号码
* @return array 地址接口返回的数据
*/
const addAddressData = (uid, address, areaCode, consignee, mobile, phone) => {
return api.get('', {
method: 'app.address.add',
uid: uid,
address: address,
area_code: areaCode,
consignee: consignee,
mobile: mobile,
phone: phone
}).then(result => {
// console.log("添加result",result);
return result;
});
};
/**
* 修改地址数据
*
* @param id 地址id
* @param uid 用户ID
* @param address 地址信息
* @param areaCode 城市码
* @param consignee 收货人
* @param mobile 手机号码
* @param phone 电话号码
* @return array 地址接口返回的数据
*/
const updateAddressData = (id, uid, address, areaCode, consignee, mobile, phone) => {
return api.get('', {
method: 'app.address.update',
id: id,
uid: uid,
address: address,
area_code: areaCode,
consignee: consignee,
mobile: mobile,
phone: phone
}).then(result => {
// console.log("修改result", result);
return result;
});
};
/**
* 删除地址数据
*
* @param id 地址id
* @param uid 用户ID
* @return array 地址接口返回的数据
*/
const delAddressData = (id, uid) => {
return api.get('', {
method: 'app.address.del',
id: id,
uid: uid
}).then(result => {
// console.log("删除result",result);
return result;
});
};
/**
* 设置默认地址
*
* @param id 地址id
* @param uid 用户ID
* @return array 地址接口返回的数据
*/
const setDefaultAddress = (id, uid) => {
return api.get('', {
method: 'app.address.setdefault',
id: id,
uid: uid
}).then(result => {
// console.log('设置默认result', result);
return result;
});
};
module.exports = {
getAddressDataAsync: getAddressDataAsync,
addAddressData: addAddressData,
updateAddressData: updateAddressData,
delAddressData: delAddressData,
setDefaultAddress: setDefaultAddress
};
... ...
'use strict';
const api = global.yoho.API;
const camelCase = global.yoho.camelCase;
... ... @@ -9,9 +11,21 @@ const _getUserOrder = (type, page) => {
page: page || 1,
limit: 10
}).then(result => {
const orderList = result && result.data && result.data.order_list || [];
let orderList = [];
let total = false;
let curPage = 1;
if (result && result.data) {
orderList = result.data.order_list;
total = result.data.total;
curPage = result.data.page;
}
return camelCase(orderList);
return {
orderList: camelCase(orderList),
total: total,
curPage: curPage
};
});
};
... ... @@ -41,11 +55,19 @@ const getOrderData = (type, page) => {
};
const order = Object.assign(fakeData, {
orderList: result.length && result || false
orderList: result.orderList.length && result.orderList || false
}, navBar);
const paginationOpts = {
paginationOpts: {
total: result.total,
page: result.curPage,
limit: 10
}
};
return {
order: order
order: Object.assign(order, paginationOpts)
};
});
};
... ...
... ... @@ -11,9 +11,17 @@ const cRoot = './controllers';
// 订单
const order = require(`${cRoot}/order`);
const address = require(`${cRoot}/address`);
// 个人中心首页/订单
router.get(['/', '/order'], order.index);
router.get('/getOrderList', order.getOrderList);
// 个人中心首页/收货地址
router.get('/address', address.index);
router.post('/address/add', address.addAddressData);
router.post('/address/update', address.updateAddressData);
router.post('/address/del', address.delAddressData);
router.post('/address/default', address.setDefaultAddress);
module.exports = router;
... ...
<div class="user-order">
{{> common/subtitle}}
{{> address/content}}
{{> address/table}}
</div>
... ...
<form id="address-form" name="address-form">
<div class="address-page">
<span class="blue tip">新增地址 电话为选填项，其他均为必填项</span>
<div class="add-address-detail">
<div class="form-group">
<label class="label-name">&nbsp;&nbsp;收货人:</label>
<input id="address_id" type="hidden" value="">
<input id="consignee" class="input width-190" type="text" placeholder="请输入您的姓名" maxlength="10">
<span class="blue error-tips">{{> icon/error-round}}收件人不能为空</span>
</div>
<div class="form-group">
<label class="label-name">所在区域:</label>
<div id="address"></div>
<span class="blue error-tips">{{> icon/error-round}}所在区域不能为空</span>
</div>
<div class="form-group">
<label class="label-name">详细地址:</label>
<input id="addressDetail" class="input width-275" type="text" placeholder="街道名称或小区名称" maxlength="60">
<span class="blue error-tips">{{> icon/error-round}}详细地址不能为空</span>
</div>
<div class="form-group">
<label class="label-name">手机号码:</label>
<input id="mobile" class="input width-190" type="text" placeholder="请输入手机号码（重要必填）" maxlength="11">
<span class="blue error-tips">{{> icon/error-round}}手机号码不能为空</span>
</div>
<div class="form-group">
<label class="label-name">电话号码:</label>
<input id="phone" class="input width-190" type="text" placeholder="请输入电话号码（选填）">
</div>
<div class="form-group ">
<label class="label-name"></label>
<span class="iconfont radio default-address opreation">&#xe604;</span>
<label class="radio-lable">设置为默认收货地址</label>
</div>
<div class="form-group">
<span class="btn opreation" id="save-address">保存</span>
</div>
</div>
</div>
</form>
... ...
<div class="address-table">
<span class="blue table-title">已保存了{{data.length}}条地址，还能保存{{data.leftLength}}条地址</span>
<table class="a-table">
<tr class="table-head">
<th class="width-80">收货人</th>
<th class="width-195">所在区域</th>
<th class="width-280">详细地址</th>
<th class="width-120">手机/电话</th>
<th class="width-260">操作</th>
</tr>
{{#each data}}
<tr class="table-body">
<input type="hidden" id="tr_{{address_id}}" value="{{address_id}}">
<td class="width-80">{{consignee}}</td>
<td class="width-195">{{area}}</td>
<td class="width-255">{{address}}</td>
<td class="width-120"><p>{{mobile}}</p><p>{{phone}}</p></td>
<td class="width-260">
<div>
<span class="blue opreation update-address" data-id="{{address_id}}">修改</span>
|
<span class="blue opreation del-address" data-id="{{address_id}}">删除</span>
{{#if default}}
<span class="btn set-default opreation current-default ">默认地址</span>
{{else}}
<span class="btn set-default opreation " data-id="{{address_id}}">设为默认</span>
{{/if}}
</div>
</td>
</tr>
{{/each}}
</table>
</div>
... ...
<div class="table table-body">
<div class="table table-body{{#unless orderList}} empty{{/unless}}">
{{#if orderList}}
{{#orderList}}
<div class="order">
... ... @@ -54,7 +54,13 @@
</div>
</div>
{{/orderList}}
{{{ pagination paginationOpts }}}
{{^}}
数据为空
<div class="bg"></div>
<div class="msg">
<p class="msg-zh bold">您暂时还没有订单</p>
<p class="msg-en">You do not have an order for the time being</p>
<span class="btn">去购物</span>
</div>
{{/if}}
</div>
... ...
... ... @@ -100,16 +100,6 @@
<p class="title">9. 分页组件</p>
<div style="border: 1px solid #000; height: 200px; padding: 5px;">
<pre>
全局安装json-server
npm i -g json-server
启动
json-server --watch mock/address.json
</pre>
{{{ pagination paginationOpts }}}
</div>
... ... @@ -161,6 +151,7 @@
<p style="margin-top: 20px;">14. 区域/选择地址组件</p>
<div style="padding: 5px; height: 300px;">
<p>使用手册详见yohoblk/public/js/plugins/README.md</p>
<div id="address"></div>
</div>
... ...
'use strict';
const _ = require('lodash');
const Search = require('../models/list');
const BrandData = require('../models/brand-service');
const Search = require('../models/search');
const camelCase = global.yoho.camelCase;
const DateHelper = require('../models/helpers');
function newFilter(key, value, name) {
return {
key: key,
value: value,
name: name
};
}
function filterHandle(filter, q) {
let priceRange = filter.priceRange;
let sizeInfo = filter.size;
let genders = DateHelper.genders();
let brands = filter.brand;
let colors = DateHelper.colorConver(filter.color);
let sorts = filter.groupSort;
let filters = [];
genders.forEach(g => {
if (g.value === q.gender) {
g.checked = true;
filters.push(newFilter('gender', q.gender, g.name));
}
});
priceRange = Object.keys(priceRange).map((k) => {
let prices = k.split(',');
if (k === q.price) {
filters.push(newFilter('price', q.price, `¥${prices[0]}－¥${prices[1]}`));
}
return {
lower: prices[0],
higher: prices[1]
};
}).sort((a, b) => {
return a.lower - b.lower;
});
if (!_.isArray(sizeInfo)) {
sizeInfo.checked = true;
sizeInfo = [sizeInfo];
}
if (q.size) {
sizeInfo.forEach(s => {
if (s.sizeId === parseInt(q.size, 10)) {
filters.push(newFilter('size', q.size, s.sizeName));
}
});
}
if (q.brand) {
let brandNames = brands.filter(b => {
return (',' + q.brand + ',').indexOf(',' + b.id + ',') >= 0;
}).map(b => {
return b.brandName;
}).join('、');
filters.push(newFilter('brand', q.brand, brandNames));
}
if (q.color) {
colors.forEach(c => {
if (c.id === parseInt(q.color, 10)) {
c.cur = true;
let fi = newFilter('color', q.color, c.title);
fi.color = c;
filters.push(fi);
}
});
}
return {
people: genders,
sortData: sorts,
brandData: brands,
colors: colors,
size: sizeInfo,
priceRange: priceRange,
filters: filters,
showFilters: filters.length > 0,
letters: DateHelper.brandLetters(),
navPath: {
nav: DateHelper.getNav('', q.sort, sorts)
}
};
}
const list = {
index: (req, res, next) => {
let page = req.query.page || 1;
... ... @@ -114,12 +22,6 @@ const list = {
title: '列表'
};
if (brand) {
BrandData.getBannerInfoAsync(brand).then(brandInfo => {
console.log(brandInfo);
});
}
Search.queryProduct({
page: page,
brand: brand,
... ... @@ -135,7 +37,7 @@ const list = {
let data = camelCase(result.data);
if (data.filter) {
retDate.filter = filterHandle(data.filter, req.query);
retDate.filter = DateHelper.filterHandle(data.filter, req.query);
}
retDate.paginationData = {
... ...
/**
* 店铺相关页面
*
* 首页、列表页
*
* @author: jiangfeng<jeff.jiang@yoho.cn>
*/
'use strict';
const _ = require('lodash');
const camelCase = global.yoho.camelCase;
const BrandData = require('../models/brand-service');
const Search = require('../models/search');
const DateHelper = require('../models/helpers');
function bannerFormat(banner) {
return {
bgImg: banner.brandBanner,
brandIntro: {
text: '品牌介绍'
},
height: 150
};
}
function shopMenu() {
let menus = [
{name: '店铺首页', href: '/'},
{name: '全部商品', href: '/shop', icon: '&#xe60a;'},
{name: '人气单品', href: '/list?order=xxx'},
{name: '新品上架', href: '/list?order=s_t_desc'}
];
return menus;
}
const shop = {
list(req, res, next) {
let data = {
module: 'product',
page: 'shop-list',
title: '店铺列表'
};
let domain = req.query.domain;
let q = req.query;
q.page = q.page || 1;
data.shopMenu = shopMenu();
BrandData.getBrandByDomainAsync(domain).then(result => {
data.brandBanner = bannerFormat(result);
q.brand = result.id;
q.shop_id = q.shopId || '';
}).then(() => {
return Search.queryProductOfBrand(q).then(result => {
if (result && result.code === 200 && result.data) {
let ret = camelCase(result.data);
if (ret.filter) {
data.filter = DateHelper.filterHandle(ret.filter, req.query);
}
data.paginationData = {
page: q.page,
limit: ret.limit || 45,
total: ret.total,
pageTotal: ret.pageTotal,
queryParams: req.query
};
res.display('shop-list', _.assign(data, {
products: ret.productList,
order: q.order
}));
} else {
return Promise.reject('query product error');
}
});
}).catch(next);
}
};
module.exports = shop;
... ...
'use strict';
const _ = require('lodash');
const helpers = {
brandLetters() {
brandLetters(numberIndex) {
let letters = [];
letters.push({
letter: '0-9',
selected: false
});
numberIndex = numberIndex || 0;
for (let i = 'A'.charCodeAt(0); i <= 'Z'.charCodeAt(0); i++) {
letters.push({
... ... @@ -16,6 +15,18 @@ const helpers = {
});
}
if (numberIndex === -1) {
letters.push({
letter: '0-9',
selected: false
});
} else if (numberIndex === 0) {
letters.unshift({
letter: '0-9',
selected: false
});
}
return letters;
},
... ... @@ -30,12 +41,12 @@ const helpers = {
}];
},
colorConver(colors) {
return colors.map(c => {
colorConvert(colors) {
return colors.map((c) => {
return {
id: c.colorId,
title: c.colorName,
rgb: c.colorValue || '#' + c.colorCode
rgb: c.colorValue ? `url(${c.colorValue})` : '#' + c.colorCode
};
});
},
... ... @@ -74,6 +85,96 @@ const helpers = {
});
}
return nav;
},
newFilter(key, value, name) {
return {
key: key,
value: value,
name: name
};
},
filterHandle(filter, q) {
let priceRange = filter.priceRange;
let sizeInfo = filter.size;
let genders = this.genders();
let brands = filter.brand;
let colors = this.colorConvert(filter.color);
let sorts = filter.groupSort;
let filters = [];
genders.forEach(g => {
if (g.value === q.gender) {
g.checked = true;
filters.push(this.newFilter('gender', q.gender, g.name));
}
});
priceRange = Object.keys(priceRange).map((k) => {
let prices = k.split(',');
if (k === q.price) {
filters.push(this.newFilter('price', q.price, `¥${prices[0]}－¥${prices[1]}`));
}
return {
lower: prices[0],
higher: prices[1]
};
}).sort((a, b) => {
return a.lower - b.lower;
});
if (!_.isArray(sizeInfo)) {
sizeInfo.checked = true;
sizeInfo = [sizeInfo];
}
if (q.size) {
sizeInfo.forEach(s => {
if (s.sizeId === parseInt(q.size, 10)) {
filters.push(this.newFilter('size', q.size, s.sizeName));
}
});
}
if (q.brand) {
let brandNames = brands.filter(b => {
return (',' + q.brand + ',').indexOf(',' + b.id + ',') >= 0;
}).map(b => {
return b.brandName;
}).join('、');
filters.push(this.newFilter('brand', q.brand, brandNames));
}
if (q.color) {
colors.forEach(c => {
if (c.id === parseInt(q.color, 10)) {
c.cur = true;
let fi = this.newFilter('color', q.color, c.title);
fi.color = c;
filters.push(fi);
}
});
}
return {
people: genders,
sortData: sorts,
brandData: brands,
colors: colors,
size: sizeInfo,
priceRange: priceRange,
filters: filters,
showFilters: filters.length > 0,
letters: this.brandLetters(),
navPath: {
nav: this.getNav('', q.sort, sorts)
}
};
}
};
... ...
'use strict';
const SearchAPI = global.yoho.SearchAPI;
const api = global.yoho.API;
const logger = global.yoho.logger;
const camelCase = global.yoho.camelCase;
const _ = require('lodash');
function clearEmptyVal(obj) {
... ... @@ -17,26 +13,22 @@ function clearEmptyVal(obj) {
}
const Search = {
querySort(query) {
return SearchAPI.get('sortgroup.json', _.assign({
sales: 'Y',
status: 1,
stocknumber: 1
}, query)).then(data => {
if (data && data.code === 200 && data.data) {
return camelCase(data.data.sort);
} else {
return [];
}
}).catch(e => {
logger.error(e);
return Promise.resolve([]);
});
},
queryProduct(params) {
let finalParams = {
method: 'app.search.sales',
method: 'app.search.li',
limit: 45,
productSize: '384x511',
yh_channel: 1
};
Object.assign(finalParams, clearEmptyVal(params));
return api.get('', finalParams);
},
queryProductOfBrand(params) {
let finalParams = {
method: 'app.search.li',
limit: 45,
productSize: '384x511',
yh_channel: 1
... ...
... ... @@ -10,10 +10,13 @@ const router = require('express').Router(); // eslint-disable-line
const cRoot = './controllers';
const list = require(cRoot + '/list');
const item = require(cRoot + '/item');
const shop = require(cRoot + '/shop');
// Your controller here
router.get('/list', list.index); // 组件demo页
router.get('/list', list.index); // 列表页面
router.get(/\/item\/([\d]+)_([\d]+).html/, item.index); // 商品详情页
router.get('/shop/list', shop.list);
module.exports = router;
... ...
<div class="blk-page yoho-product-list">
<div class="center-content">
{{# filter.navPath}}
{{> path-nav}}
{{/ filter.navPath}}
</div>
<div class="center-content clearfix">
{{> brand-banner-list }}
{{> list/shop-menu }}
</div>
<div class="center-content clearfix">
<div class="left">
{{!-- 筛选区域 --}}
{{#filter}}
{{> list/filter}}
{{/filter}}
</div>
<div class="right">
{{!-- 已选中条件 --}}
{{#filter}}
{{> list/filter-area}}
{{/filter}}
{{!-- 排序 --}}
{{> list/order-area}}
{{!-- 商品列表 --}}
{{> list/goods-box}}
{{!-- 分页 --}}
{{{ pagination paginationData }}}
</div>
</div>
</div>
... ...
{{# brandBanner}}
<div class="brand-banner" style="background-image: url('{{image bgImg 1150 150}}')">
<p class="opts">
{{# brandIntro}}
<a href="{{link}}">
<i class="iconfont">&#xe631;</i>
{{text}}
</a>
{{/ brandIntro}}
<span id="brand-fav" class="brand-fav{{#if coled}} coled{{/if}}">
{{> icon/collection}}
</span>
</p>
</div>
{{/brandBanner}}
... ...
... ... @@ -30,4 +30,4 @@
</div>
</div>
</div>
{{/ brandBanner}}
\ No newline at end of file
{{/ brandBanner}}
... ...
... ... @@ -50,7 +50,11 @@
{{#each brandData}}
<div class="input-radio" data-value="{{id}}">
{{> icon/radio}}
<label>{{brandNameEn}}</label>
{{#if brandNameEn}}
<label>{{brandNameEn}}</label>
{{^}}
<label>{{brandName}}</label>
{{/if}}
</div>
{{/each}}
</div>
... ... @@ -111,4 +115,4 @@
{{/each}}
</div>
</div>
</div>
\ No newline at end of file
</div>
... ...
<ul class="shop-menu">
{{#each shopMenu}}
<li>
<a href="{{href}}">
{{name}}
{{#icon}}
<i class="iconfont">&#xe60a;</i>
{{/icon}}
</a>
</li>
{{/each}}
</ul>
... ...
... ... @@ -17,4 +17,5 @@ module.exports = app => {
app.use('/me', require('./apps/me')); // 个人中心
app.use('/editorial', require('./apps/editorial')); // 资讯
app.use('/product', require('./apps/product'));
app.use('/brand', require('./apps/brand')); // 资讯
};
... ...
No preview for this file type
... ... @@ -2,7 +2,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
Created by FontForge 20120731 at Fri Jul 8 16:11:08 2016
Created by FontForge 20120731 at Mon Jul 11 10:08:25 2016
By admin
</metadata>
<defs>
... ... @@ -173,9 +173,6 @@ d="M831 612q-2 12 -11 20t-21 8h-160v32q0 66 -47 113t-113 47t-112.5 -47t-46.5 -11
t-9 -22.5t-22.5 -9.5zM575 640h-192v32q0 40 28.5 68t68 28t67.5 -28t28 -68v-32zM607.5 448q-13.5 0 -23 9.5t-9.5 22.5t9.5 22.5t23 9.5t22.5 -9.5t9 -22.5t-9 -22.5t-22.5 -9.5z" />
<glyph glyph-name="uniE632" unicode="&#xe632;"
d="M684 670q-23 96 -68.5 153t-103.5 57t-103.5 -57t-68.5 -153h-178l-69 -798h838l-69 798h-178zM406 670q18 67 47 107t59 40t59 -40t47 -107h-212z" />
<glyph glyph-name="uniE633" unicode="&#xe633;"
d="M512 764q-94 0 -180 -36.5t-148.5 -99t-99 -148.5t-36.5 -180t36.5 -180t99 -148.5t148.5 -99t180 -36.5t180 36.5t148.5 99t99 148.5t36.5 180t-36.5 180t-99 148.5t-148.5 99t-180 36.5zM724 244h-424q-23 0 -39.5 16.5t-16.5 39.5t16.5 39.5t39.5 16.5h424
q23 0 39 -16.5t16 -39.5t-16 -39.5t-39 -16.5z" />
<glyph glyph-name="uniE634" unicode="&#xe634;"
d="M500 775l-348 -298q-16 -14 -16 -35v-386q0 -25 17.5 -42.5t42.5 -17.5h197v257h238v-257h197q25 0 42.5 17.5t17.5 42.5v386q0 21 -16 35l-348 298q-12 10 -24 0z" />
<glyph glyph-name="uniE635" unicode="&#xe635;"
... ...
No preview for this file type
No preview for this file type
/**
* 品牌页
* @author: zxr<xiaoru.zhang@yoho.cn>
* @date: 2016/07/09
*/
var $ = require('yoho-jquery'),
lazyLoad = require('yoho-jquery-lazyload');
require('../common/header');
require('../common/return-top');
lazyLoad($('#msg-list img.lazy'));
... ...
... ... @@ -7,26 +7,22 @@
var $ = require('yoho-jquery'),
lazyLoad = require('yoho-jquery-lazyload');
// var prising;
require('../common/header');
require('../common/return-top');
lazyLoad($('#msg-list img.lazy'));
$('.msg-nav li').on('click', function() {
// var activeTab = $(this).attr('data-type'),
// href = $(this).find('a').attr('href');
$('.msg-nav li').removeClass('active');
$(this).addClass('active');
});
$('.editorial-index-page').on('click', '.like-icon', function() {
var $this = $(this);
// msgId = $this.closest('.content-msg').data().id;
$this.toggleClass('liked');
var $this = $(this),
num = parseInt($this.next().html(), 10);
if ($this.hasClass('liked')) {
$this.removeClass('liked');
num = num - 1;
} else {
$this.addClass('liked');
num = num + 1;
console.log(num);
}
$this.next().html(num);
});
require('../common/header');
require('../common/return-top');
... ...
/**
* [个人中心]收货地址
* @author: jiangmin
* @date: 2016/07/05
*/
var cascadingAddress = require('../plugins/cascading-address');
var dialog = require('../plugins/dialog');
var _confirm = dialog.Confirm;
var $addressId = $('#address_id');
var $consignee = $('#consignee');
var $address = $('#addressDetail');
var $mobile = $('#mobile');
var $phone = $('#phone');
var currentLength = $('.a-table').find('tr').length - 1;// 当前地址条数
var leftLength = 20 - currentLength;// 还剩地址条数
var Bll = {
// 获取输入框输入的值
getInfo() {
// todo uid
var uid = '123456';
return {
id: $addressId.val(),
uid: uid,
consignee: $consignee.val(),
// todo 地址码
address: $address.val(),
mobile: $mobile.val(),
phone: $phone.val()
// todo 设置默认值
};
},
// 清空输入框
clearInput() {
$consignee.val('');
// todo 省市区清空
$address.val('');
$mobile.val('');
$phone.val('');
},
// 校验
check(info) {
let flag = true;
let reg = new RegExp(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/);
if (info.consignee === '' || info.address === '' || info.mobile === '') {
flag = '有必填项为空';
} else if (!reg.test(info.mobile)) {
flag = '手机号码格式不对';
}
return flag;
},
// 拼接一条数据的html
getHtml(info) {
var html = '<tr class="table-body">';
html += '<input type="hidden" id="tr_' + info.address_id + '" value="' + info.address_id + '">' +
'<td class=\'width-80\'>' + info.consignee + '</td>' +
'<td class=\'width-195\'>' + info.area + '</td>' +
'<td class=\'width-280\'>' + info.address + '</td>' +
'<td class=\'width-120\'><p>' + info.mobile + '</p><p>' + info.phone + '</p></td>' +
'<td class=\'width-260\'><div><span class=\'blue opreation update-address\'>修改</span>\n|\n' +
'<span class=\'blue opreation del-address\' data-id=\'' + info.address_id + '\'>删除</span>\n' +
'<span class=\'btn set-default opreation \' data-id=\'' + info.address_id + '\'>设为默认</span></div></td>';
html += '</tr>';
return html;
},
// 获取一条数据
setInfo(id, td) {
$addressId.val(id);
$consignee.val(td.eq(0).text());
// todo 省市区逆向展示
// $areaCode.val(td.eq(1).text());
$address.val(td.eq(2).text());
$mobile.val(td.eq(3).children().eq(0).text());
$phone.val(td.eq(3).children().eq(1).text());
},
// 设置表格头部
setTableTile() {
$('.table-title').text('已保存了' + currentLength +
'条地址，还能保存' + leftLength + '条地址');
}
};
require('./me');
// 设置收货地址
$('.default-address').click(function() {
if ($(this).hasClass('checked')) {
$(this).removeClass('checked');
$(this).html('&#xe604;');
} else {
$(this).addClass('checked');
$(this).html('&#xe603;');
}
});
// 校验
$consignee.keydown(function() {
$(this).next().hide();
});
$consignee.blur(function() {
if ($(this).val().trim() === '') {
$(this).next().show();
}
});
$address.keydown(function() {
$(this).next().hide();
});
$address.blur(function() {
if ($(this).val().trim() === '') {
$(this).next().show();
}
});
$mobile.keydown(function() {
$(this).next().hide();
});
$mobile.blur(function() {
if ($(this).val().trim() === '') {
$(this).next().show();
} else {
let reg = new RegExp(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/);
if (!reg.test(($(this).val().trim()))) {
$(this).next().show();
$(this).next().html('手机号码格式不正确');
}
}
});
// 保存收货地址
$(document).on('click', '#save-address', function() {
var info = Bll.getInfo();
var area = $('#address-form').serialize();
info.area_code = area.substring(area.length - 6);
if (Bll.check(info) === true) {
// 新增
if (info.id === '') {
$.ajax({
type: 'POST',
url: '/me/address/add',
dataType: 'json',
data: info,
success: function(data) {
let html = Bll.getHtml(data.data);
currentLength++;
leftLength--;
$('tbody').append(html);
Bll.setTableTile();
Bll.clearInput();
}
});
} else { // 修改
console.log('上传info', info);
$.ajax({
type: 'POST',
url: '/me/address/update',
dataType: 'json',
data: info,
success: function(data) {
if (data.code === 200) {
$('#tr_' + info.id).parent().before(Bll.getHtml(info)).remove();
Bll.clearInput();
} else {
// alert('修改出错！');
}
}
});
}
} else {
alert(Bll.check(info));
}
});
// 修改收货地址
$('.update-address').click(function() {
let id = $(this).data('id');
let tr = $(this).parents('.table-body');
let td = tr.find('td');
Bll.setInfo(id, td);
});
// 删除收货地址
$('.del-address').click(function() {
let id = $(this).data('id');
var tr = $(this).parents('.table-body');
var a = new _confirm({
content: '您确定要删除收货地址吗？',
cb: function() {
$.ajax({
type: 'POST',
url: '/me/address/del',
dataType: 'json',
data: {
// todo uid
uid: '123456',
id: id
},
success: function() {
currentLength--;
leftLength++;
tr.remove();
Bll.setTableTile();
a.close();
}
});
}
}).show();
});
// 设置默认收货地址
$(document).on('click', '.set-default', function() {
var tr = $(this).parents('.table-body');
var tbody = tr.parent();
let id = $(this).data('id');
var self = this;
$.ajax({
type: 'POST',
url: '/me/address/default',
dataType: 'json',
data: {
// todo uid
uid: '123456',
id: id
},
success: function() {
$('.current-default').removeClass('current-default').text('设为默认');
$(self).addClass('current-default').text('默认地址');
tbody.find('.table-body').eq(0).before('<tr class=\'table-body\'>' + tr.html() + '</tr>');
tr.remove();
}
});
});
$(function() {
// 运行此demo
// 1. 安装 npm i -g json-server
// 2. json-server --watch mock/address.json
cascadingAddress({
el: '#address',
url: 'http://localhost:3000/areas/0',
resource: 'areas'
});
});
... ...
... ... @@ -29,12 +29,12 @@ function getOrderList(type, page) {
}
}).done(function(res) {
tableOperation.appendBody(res);
bindPaginationClick(); // eslint-disable-line
}).fail(function(err) {
console.log(err);
});
}
function getQueryString() {
var queryArr = location.search.substr(1).split('&');
var query = {};
... ... @@ -49,6 +49,24 @@ function getQueryString() {
return query;
}
function bindPaginationClick() {
$('.blk-pagination li').off('click').on('click', function(e) {
var $this = $(this);
var page = $this.find('a').attr('href').split('=')[1];
var type = getQueryString().type;
e.preventDefault();
if (!$this.hasClass('active')) {
$('.blk-pagination li.active').removeClass('active');
$this.addClass('active');
getOrderList(type, page);
}
});
}
$('.tabs li').on('click', function() {
var $this = $(this);
var typeMap = {
... ... @@ -62,7 +80,11 @@ $('.tabs li').on('click', function() {
if (!$this.hasClass('active')) {
$('.tabs li.active').removeClass('active');
$this.addClass('active');
getOrderList(type, page);
}
getOrderList(type, page);
});
bindPaginationClick();
... ...
... ... @@ -71,6 +71,7 @@ change.click(function() {
// check
$('.input-radio').check({
type: 'radio',
group: 'gender',
onChange: function(ele, checked, value) {
$('.check-msg').html((checked ? '选中' : '取消选中') + ': ' + value);
}
... ... @@ -78,8 +79,11 @@ $('.input-radio').check({
$('.input-checkbox').check({
type: 'checkbox',
onChange: function(ele, checked, value) {
$('.check-msg').html((checked ? '选中' : '取消选中') + ': ' + value);
group: 'gender2',
onChange: function() {
var checked = $('.input-checkbox').check('getChecked');
$('.check-msg').html('选中: ' + JSON.stringify(checked.values));
}
});
... ...
### 组件使用手册
1. 地址选择组件
全局安装json-server模拟服务端返回数据
npm i -g json-server
启动
json-server --watch mock/address.json
API使用:
var address = cascadingAddress({
el: '#address',
url: 'http://localhost:3000/areas/0',
resource: 'areas'
});
获取选择地址文本:
address.getAreaLabels()
获取选择地址areaId:
address.getAreaIds()
设置地址:
address.setAddress({
province: '32', // 省
city: '3201', // 市
dist: '320102' // 区县
});
开发者: 董金虎
... ...
... ... @@ -78,6 +78,14 @@ function toggleDistItem() {
}
}
// 设置请求URL
function setRequestUrl(config, areaId) {
var urlArr = config.url.split(config.resources + '/');
urlArr[1] = areaId;
return urlArr.join(config.resources + '/');
}
// 重置下一级文本显示和值
function resetNextLevel(level, config) {
$('#level_' + level + '_panel').empty()
... ... @@ -88,23 +96,57 @@ function resetNextLevel(level, config) {
.next().val('');
}
// 选择特定省份，城市，或区县
function selectDistItem(options) {
var level = options.level, // 当前级别
distElement = options.target, // 选择特定项
currAreaId = distElement.attr('id').split('_')[1], // 当前选择areaId
distItem = $('#level_' + level + '_panel').prev(), // 请选择...
currPanel = options.panel, // 当前区域列表项
distItemAreaId = options.distItemAreaId, // 当前选中areaId
config = options.config;
if (distElement.hasClass('checked')) {
// TODO
// distElement.removeClass('checked');
} else {
currPanel.find('span.checked').removeClass('checked').prev().hide();
distElement.addClass('checked').prev().show();
distItem.find('.indicator-name')
.html(distElement.text())
.next()
.val(currAreaId);
// 填充下一级
if (level < 0) {
level = distElement.parents('.items-panel').attr('id').split('_')[1];
}
config.url = setRequestUrl(config, currAreaId);
// 选择之后关闭当前panel
// distItem.trigger('click');
// 当前点击的和已选择的不同，再渲染下一级目录
if (level && distItemAreaId !== currAreaId) {
resetNextLevel(level - 1, config);
$(config.el).trigger('ca.afterInit', [config, level - 1]);
}
}
}
// 获取初始化数据
function fetchInitialData(evt, config, level) {
var distItem, // 请选择...
distItemAreaId = $('.items-indicator .open input').val(),
var distItemAreaId = $('.items-indicator .open input').val(),
ajaxSettings = $.extend({}, config.ajaxSettings, {
url: config.url
});
var ulElement = $('<ul/>'),
liElement,
distElement;
liElement;
var urlArr;
// 当前选中区域id
var currAreaId,
currPanel;
// 当前选中区域列表
var currPanel;
$.ajax(ajaxSettings).done(function(res) {
// 渲染后台区域信息列表
... ... @@ -130,40 +172,85 @@ function fetchInitialData(evt, config, level) {
// 选择区域
currPanel.off('click', '.dist-name').on('click', '.dist-name', function() {
distElement = $(this);
currAreaId = distElement.attr('id').split('_')[1];
distItem = $('#level_' + level + '_panel').prev();
selectDistItem({
level: level,
target: $(this),
panel: currPanel,
distItemAreaId: distItemAreaId,
config: config
});
});
}).fail(function() {
// 如果出错，将下级所有都重置
var from = level;
while (from >= 0) {
resetNextLevel(from, config);
from--;
}
});
}
// 设置地址
function setAddress(evt, config, level, areaId) {
var ajaxSettings = $.extend({}, config.ajaxSettings, {
url: config.url
}),
liElement,
ulElement = $('<ul/>'),
currPanel,
label,
distVal,
distItemAreaId = $('.items-indicator .open input').val();
$.ajax(ajaxSettings).done(function(res) {
$(res.data).each(function(index, item) {
liElement = $('<li/>');
if (distElement.hasClass('checked')) {
// TODO
// distElement.removeClass('checked');
// 设置目标区域check状态
if (item.value === areaId) {
label = item.text;
distVal = item.value;
$('<span class="check-icon iconfont" style="display: inline;">&#xe60b;</span>').appendTo(liElement);
$('<span/>', {
class: 'dist-name checked',
title: label,
text: label,
id: 'area_' + item.value
}).appendTo(liElement);
} else {
currPanel.find('span.checked').removeClass('checked').prev().hide();
distElement.addClass('checked').prev().show();
distItem.find('.indicator-name')
.html(distElement.text())
.next()
.val(currAreaId);
// 填充下一级
if (level < 0) {
level = distElement.parents('.items-panel').attr('id').split('_')[1];
}
urlArr = config.url.split(config.resources + '/');
urlArr[1] = currAreaId;
config.url = urlArr.join(config.resources + '/');
// 选择之后关闭当前panel
// distItem.trigger('click');
// 当前点击的和已选择的不同，再渲染下一级目录
if (level && distItemAreaId !== currAreaId) {
resetNextLevel(level - 1, config);
$(config.el).trigger('ca.afterInit', [config, level - 1]);
}
$('<span class="check-icon iconfont">&#xe60b;</span>').appendTo(liElement);
$('<span/>', {
class: 'dist-name',
title: item.text,
text: item.text,
id: 'area_' + item.value
}).appendTo(liElement);
}
liElement.appendTo(ulElement);
ulElement.appendTo($(config.el).find('#level_' + level + '_panel').empty().removeClass('empty'));
});
// 设置label文本 和 设置areaId
currPanel = $('#level_' + level + '_panel');
currPanel.prev().find('.indicator-name').text(label)
.next().val(distVal);
// 侦听选择
currPanel.off('click', '.dist-name').on('click', '.dist-name', function() {
selectDistItem({
level: level,
target: $(this),
panel: currPanel,
distItemAreaId: distItemAreaId,
config: config
});
});
}).fail(function() {
// 如果出错，将下级所有都重置
var from = level;
... ... @@ -185,6 +272,7 @@ function CascadingAddress(options) {
element.on('ca.afterInit', fetchInitialData);
element.on('click', '.dist-item', toggleDistItem);
element.on('ca.setAddr', setAddress);
// 绑定自定义事件处理
$.each(widget.config, function(key, value) {
... ... @@ -274,6 +362,83 @@ CascadingAddress.prototype.init = function() {
el.trigger('ca.onCreated');
};
// 获取地址文本
CascadingAddress.prototype.getAreaLabels = function() {
var el = $(this.config.el),
result = [];
el.find('.indicator-name').each(function() {
if ($(this).next().val() !== '') {
result.push($(this).text());
}
});
return result.join(',');
};
// 获取地址ID
CascadingAddress.prototype.getAreaIds = function() {
var el = $(this.config.el),
result = [],
target;
el.find('input').each(function() {
target = $(this);
if (target.val() !== '') {
result.push($(this).val());
}
});
if (result.length) {
return result.join(',');
} else {
return '';
}
};
// 设置区域
// {
// "province": "32",
// "city": "3201",
// "dist": "320102"
// }
CascadingAddress.prototype.setAddress = function(targetAddr) {
var key,
distIds = ['0'], // 省份请求areaId=0
distLen,
cursor, // 游标
currentLevels = $('.items-indicator>li').length, // 目前存在几级
areaId, // 请求areaId
defaultId, // 设置areaId
config = this.config,
$el = $(config.el);
if (typeof targetAddr === 'object') {
for (key in targetAddr) {
if (targetAddr.hasOwnProperty(key)) {
distIds.push(targetAddr[key]);
}
}
// 标识需要渲染几级
distLen = distIds.sort().length;
cursor = distLen;
// 最后一个level是0
while (distLen > 1) {
// 请求从array[0], 判断值从array[1]
areaId = distIds[cursor - distLen];
defaultId = distIds[cursor - distLen + 1];
config.url = setRequestUrl(config, areaId);
$el.trigger('ca.setAddr', [config, currentLevels - 1, defaultId]);
distLen--;
currentLevels--;
}
} else {
console.error('target address must be a json object');
}
};
module.exports = function(options) {
return new CascadingAddress(options);
};
... ...
... ... @@ -5,11 +5,13 @@ var jQuery = require('yoho-jquery');
var defaultsHtml = {
radio: {
uncheckedHtml: '&#xe604;',
checkedHtml: '&#xe603;'
checkedHtml: '&#xe603;',
single: true
},
checkbox: {
uncheckedHtml: '&#xe601;',
checkedHtml: '&#xe602;'
checkedHtml: '&#xe602;',
single: false
}
};
... ... @@ -25,24 +27,50 @@ var jQuery = require('yoho-jquery');
options = $.extend({}, defaults, defaultsHtml[type], options);
if (options.group) {
$(this).addClass('check-group-' + options.group);
}
$(this).data('options', options);
$(this).off().on('click', function() {
var icon = $(this).find('.' + options.type);
var icon = $(ele).find('.' + options.type);
var checked = $(icon).hasClass('checked');
if (checked) {
$(icon).removeClass('checked');
$(icon).html(options.uncheckedHtml);
if (options.group) {
if (options.single) {
if (!checked) {
check.unCheckGroup(ele, options);
check.doChange(checked, ele, options);
}
} else {
check.doChange(checked, ele, options);
}
} else {
$(icon).addClass('checked');
$(icon).html(options.checkedHtml);
check.doChange(checked, ele, options);
}
if (typeof options.onChange === 'function') {
options.onChange(ele, !checked, $(ele).data('value'));
}
});
},
doChange: function(checked, ele, options) {
var icon = $(ele).find('.' + options.type);
if (checked) {
$(icon).removeClass('checked');
$(icon).html(options.uncheckedHtml);
} else {
$(icon).addClass('checked');
$(icon).html(options.checkedHtml);
}
if (typeof options.onChange === 'function') {
options.onChange(ele, !checked, $(ele).data('value'));
}
},
unCheckGroup: function(ele, options) {
var groupClass = 'check-group-' + options.group;
check.unCheckAll.call($('.' + groupClass));
},
checkAll: function() {
$(this).each(function() {
var options = $(this).data('options');
... ... @@ -54,8 +82,25 @@ var jQuery = require('yoho-jquery');
$(this).each(function() {
var options = $(this).data('options');
check._uncheck(this, options);
check._unCheck(this, options);
});
},
getChecked: function() {
var checkedEle = [];
var checkedValues = [];
$(this).each(function() {
var options = $(this).data('options');
if ($('.' + options.type, this).hasClass('checked')) {
checkedEle.push(this);
checkedValues.push($(this).data('value'));
}
});
return {
documents: checkedEle,
values: checkedValues
};
},
_check: function(ele, options) {
var icon = $(ele).find('.' + options.type);
... ... @@ -70,7 +115,7 @@ var jQuery = require('yoho-jquery');
}
}
},
_uncheck: function(ele, options) {
_unCheck: function(ele, options) {
var icon = $(ele).find('.' + options.type);
var checked = $(icon).hasClass('checked');
... ...
var $ = require('yoho-jquery');
var common = require('../common');
var query = common.queryString();
var YohoListPage = {
rootDoc: $('.yoho-product-list'),
brandsDoc: $('.yoho-product-list .brand-list'),
mulitBrand: false,
goodsWrapper: $('.goods-area .goods-wrapper'),
goodsWrapperState: false,
page: query.page || 1,
init: function() {
require('yoho-jquery-accordion');
require('../plugins/check');
$('.yoho-ui-accordion', this.rootDoc).each(function() {
var opts = {
collapsible: true,
heightStyle: 'content'
};
if ($(this).hasClass('no-active')) {
opts.active = false;
}
$(this).accordion(opts);
});
$('.yoho-product-list .sex-body .input-radio').check({
type: 'radio',
onChange: function(ele, checked, value) {
YohoListPage.go({
gender: checked ? value : ''
});
}
});
$('.yoho-product-list .list-body .input-radio').check({
type: 'radio',
onChange: function(ele, checked, value) {
YohoListPage.go({
sort: checked ? value : ''
});
}
});
$('.yoho-product-list .price-body .input-radio').check({
type: 'radio',
onChange: function(ele, checked, value) {
YohoListPage.go({
price: checked ? value : ''
});
}
});
$('.yoho-product-list .size-body .input-radio').check({
type: 'radio',
onChange: function(ele, checked, value) {
YohoListPage.go({
size: checked ? value : ''
});
}
});
$('.yoho-product-list .brand-list .input-radio').check({
type: 'radio',
onChange: function(ele, checked, value) {
if (!YohoListPage.mulitBrand) {
YohoListPage.go({brand: value});
} else {
YohoListPage.showBrandMulitBtn();
}
}
});
$('.yoho-product-list .color-body .input-radio').check({
type: 'radio',
onChange: function(ele, checked, value) {
YohoListPage.go({
color: checked ? value : ''
});
}
});
YohoListPage.eventBind();
},
eventBind: function() {
$('.yoho-product-list .mulit-choose').click(function() {
YohoListPage.openBrandMulitChoose();
});
$('.yoho-product-list .brand-btns .cancel').click(function() {
YohoListPage.closeBrandMulitChoose();
});
$('.yoho-product-list .brand-btns .confirm').click(function() {
if (!$(this).hasClass('disable')) {
YohoListPage.go({
brand: YohoListPage.getSelectBrands().join(',')
});
}
});
$('.yoho-product-list .brand-body input').on('keyup', function() {
YohoListPage.filterBrand($(this).val().toLowerCase());
});
$('.yoho-product-list .brand-letter-items .item').hover(function() {
$('.yoho-product-list .brand-letter-items .item').removeClass('select');
$(this).addClass('select');
YohoListPage.filterBrand($(this).data('value').toLowerCase());
});
$('.goods-area > .goods').mouseenter(function(e) {
YohoListPage.showGoodsWrapper(e);
});
$('.goods-wrapper').mouseleave(function(e) {
YohoListPage.hideGoodsWrapper(e);
});
$('.filter-area .filter-item').click(function() {
var key = $(this).data('key');
var data = {};
data[key] = '';
YohoListPage.go(data);
});
$('.filter-area .cancel').click(function() {
var data = {};
$('.filter-area .filter-item').each(function() {
var key = $(this).data('key');
data[key] = '';
});
YohoListPage.go(data);
});
$('.order-area .page').click(function() {
if (!$(this).hasClass('disable')) {
if ($(this).hasClass('page-pre')) {
YohoListPage.go({
page: YohoListPage.page - 1
});
} else {
YohoListPage.go({
page: YohoListPage.page + 1
});
}
}
});
$('.order-area .order').click(function() {
var order = $(this).data('order');
var target = $(this).data('target');
var orders = order.split(',');
var newOrder = '';
if (query.order === orders[0]) {
newOrder = orders[1] || '';
} else {
newOrder = orders[0];
}
$('.order-area .order').removeClass('selected');
$(this).addClass('selected');
$('.' + target).find('.iconfont').each(function() {
if ($(this).hasClass(newOrder)) {
$(this).addClass('selected');
} else {
$(this).removeClass('selected');
}
});
YohoListPage.go({
order: newOrder
});
});
},
openBrandMulitChoose: function() {
$('.yoho-product-list .mulit-choose').hide();
YohoListPage.mulitBrand = true;
YohoListPage.showBrandMulitBtn();
},
closeBrandMulitChoose: function() {
$('.yoho-product-list .mulit-choose').show();
$('.yoho-product-list .brand-btns').addClass('hide');
$('.yoho-product-list .brand-list .input-radio').check('unCheckAll');
YohoListPage.mulitBrand = false;
},
showBrandMulitBtn: function() {
$('.brand-btns', this.rootDoc).removeClass('hide');
if (YohoListPage.getSelectBrands().length > 0) {
$('.brand-btns .confirm', this.rootDoc).removeClass('disable');
} else {
$('.brand-btns .confirm', this.rootDoc).addClass('disable');
}
},
filterBrand: function(letter) {
$('.yoho-product-list .brand-list .input-radio').each(function() {
if ($('label', this).text().toLowerCase().indexOf(letter) === 0) {
$(this).show();
} else {
$(this).hide();
}
});
},
getSelectBrands: function() {
let brands = [];
$('.input-radio .radio', this.brandsDoc).each(function() {
if ($(this).hasClass('checked')) {
brands.push($(this).parent().data('value'));
}
});
return brands;
},
showGoodsWrapper: function(e) {
var position = $(e.currentTarget).position();
var productId = $(e.currentTarget).data('id');
if (YohoListPage.goodsWrapperState && YohoListPage.productId !== productId) {
YohoListPage.goodsWrapperState = false;
}
if (!YohoListPage.goodsWrapperState) {
YohoListPage.productId = productId;
position.top += 10;
$(this.goodsWrapper).css(position);
$('.goods', this.goodsWrapper).html($(e.currentTarget).html());
$('.goods-img-list', this.goodsWrapper).empty();
$(e.currentTarget).find('.goods-list i').each(function() {
$('.goods-img-list', this.goodsWrapper).append(
'<img src="' + $(this).text() + '" width="60" height="80" alt="">');
});
$(this.goodsWrapper).show();
YohoListPage.goodsWrapperState = true;
$('.goods-img-list img', this.goodsWrapper).hover(function() {
$('.goods .goods-img img', YohoListPage.goodsWrapper).attr('src', $(this).attr('src'));
});
}
},
hideGoodsWrapper: function() {
YohoListPage.goodsWrapperState = false;
$('.goods-area .goods-wrapper').hide();
},
go: function(q) {
var qs = $.extend(common.queryString(), q);
location.search = $.param(qs);
}
};
YohoListPage.init();
require('./list/list-search');
... ...
var $ = require('yoho-jquery');
var common = require('../../common');
var query = common.queryString();
var YohoListPage = {
rootDoc: $('.yoho-product-list'),
brandsDoc: $('.yoho-product-list .brand-list'),
mulitBrand: false,
goodsWrapper: $('.goods-area .goods-wrapper'),
goodsWrapperState: false,
page: query.page || 1,
init: function() {
require('yoho-jquery-accordion');
require('../../plugins/check');
$('.yoho-ui-accordion', this.rootDoc).each(function() {
var opts = {
collapsible: true,
heightStyle: 'content'
};
if ($(this).hasClass('no-active')) {
opts.active = false;
}
$(this).accordion(opts);
});
$('.sex-body .input-radio', this.rootDoc).check({
type: 'radio',
onChange: function(ele, checked, value) {
YohoListPage.go({
gender: checked ? value : ''
});
}
});
$('.list-body .input-radio', this.rootDoc).check({
type: 'radio',
onChange: function(ele, checked, value) {
YohoListPage.go({
sort: checked ? value : ''
});
}
});
$('.price-body .input-radio', this.rootDoc).check({
type: 'radio',
onChange: function(ele, checked, value) {
YohoListPage.go({
price: checked ? value : ''
});
}
});
$('.size-body .input-radio', this.rootDoc).check({
type: 'radio',
onChange: function(ele, checked, value) {
YohoListPage.go({
size: checked ? value : ''
});
}
});
$('.brand-list .input-radio', this.rootDoc).check({
type: 'radio',
onChange: function(ele, checked, value) {
if (!YohoListPage.mulitBrand) {
YohoListPage.go({brand: value});
} else {
YohoListPage.showBrandMulitBtn();
}
}
});
$('.color-body .input-radio', this.rootDoc).check({
type: 'radio',
onChange: function(ele, checked, value) {
YohoListPage.go({
color: checked ? value : ''
});
}
});
YohoListPage.eventBind();
},
eventBind: function() {
$('.mulit-choose', this.rootDoc).click(function() {
YohoListPage.openBrandMulitChoose();
});
$('.brand-btns .cancel', this.rootDoc).click(function() {
YohoListPage.closeBrandMulitChoose();
});
$('.brand-btns .confirm', this.rootDoc).click(function() {
if (!$(this).hasClass('disable')) {
YohoListPage.go({
brand: YohoListPage.getSelectBrands().join(',')
});
}
});
$('.yoho-product-list .brand-body input').on('keyup', function() {
YohoListPage.filterBrand($(this).val().toLowerCase());
});
$('.yoho-product-list .brand-letter-items .item').hover(function() {
$('.yoho-product-list .brand-letter-items .item').removeClass('select');
$(this).addClass('select');
YohoListPage.filterBrand($(this).data('value').toLowerCase());
});
$('.goods-area > .goods').mouseenter(function(e) {
YohoListPage.showGoodsWrapper(e);
});
$('.goods-wrapper').mouseleave(function(e) {
YohoListPage.hideGoodsWrapper(e);
});
$('.filter-area .filter-item').click(function() {
var key = $(this).data('key');
var data = {};
data[key] = '';
YohoListPage.go(data);
});
$('.filter-area .cancel').click(function() {
var data = {};
$('.filter-area .filter-item').each(function() {
var key = $(this).data('key');
data[key] = '';
});
YohoListPage.go(data);
});
$('.order-area .page').click(function() {
if (!$(this).hasClass('disable')) {
if ($(this).hasClass('page-pre')) {
YohoListPage.go({
page: YohoListPage.page - 1
});
} else {
YohoListPage.go({
page: YohoListPage.page + 1
});
}
}
});
$('.order-area .order').click(function() {
var order = $(this).data('order');
var target = $(this).data('target');
var orders = order.split(',');
var newOrder = '';
if (query.order === orders[0]) {
newOrder = orders[1] || '';
} else {
newOrder = orders[0];
}
$('.order-area .order').removeClass('selected');
$(this).addClass('selected');
$('.' + target).find('.iconfont').each(function() {
if ($(this).hasClass(newOrder)) {
$(this).addClass('selected');
} else {
$(this).removeClass('selected');
}
});
YohoListPage.go({
order: newOrder
});
});
},
openBrandMulitChoose: function() {
$('.yoho-product-list .mulit-choose').hide();
YohoListPage.mulitBrand = true;
YohoListPage.showBrandMulitBtn();
},
closeBrandMulitChoose: function() {
$('.yoho-product-list .mulit-choose').show();
$('.yoho-product-list .brand-btns').addClass('hide');
$('.yoho-product-list .brand-list .input-radio').check('unCheckAll');
YohoListPage.mulitBrand = false;
},
showBrandMulitBtn: function() {
$('.brand-btns', this.rootDoc).removeClass('hide');
if (YohoListPage.getSelectBrands().length > 0) {
$('.brand-btns .confirm', this.rootDoc).removeClass('disable');
} else {
$('.brand-btns .confirm', this.rootDoc).addClass('disable');
}
},
filterBrand: function(letter) {
$('.yoho-product-list .brand-list .input-radio').each(function() {
if (letter === '0-9') {
var first = $('label', this).text().toLowerCase().charAt(0); // eslint-disable-line
if ((first >= 'a' && first <= 'z') || (first >= 'A' && first <= 'Z')) {
$(this).hide();
} else {
$(this).show();
}
} else {
if ($('label', this).text().toLowerCase().indexOf(letter) === 0) {
$(this).show();
} else {
$(this).hide();
}
}
});
},
getSelectBrands: function() {
let brands = [];
$('.input-radio .radio', this.brandsDoc).each(function() {
if ($(this).hasClass('checked')) {
brands.push($(this).parent().data('value'));
}
});
return brands;
},
showGoodsWrapper: function(e) {
var position = $(e.currentTarget).position();
var productId = $(e.currentTarget).data('id');
if (YohoListPage.goodsWrapperState && YohoListPage.productId !== productId) {
YohoListPage.goodsWrapperState = false;
}
if (!YohoListPage.goodsWrapperState) {
YohoListPage.productId = productId;
position.top += 10;
$(this.goodsWrapper).css(position);
$('.goods', this.goodsWrapper).html($(e.currentTarget).html());
$('.goods-img-list', this.goodsWrapper).empty();
$(e.currentTarget).find('.goods-list i').each(function() {
$('.goods-img-list', this.goodsWrapper).append(
'<img src="' + $(this).text() + '" width="60" height="80" alt="">');
});
$(this.goodsWrapper).show();
YohoListPage.goodsWrapperState = true;
$('.goods-img-list img', this.goodsWrapper).hover(function() {
$('.goods .goods-img img', YohoListPage.goodsWrapper).attr('src', $(this).attr('src'));
});
}
},
hideGoodsWrapper: function() {
YohoListPage.goodsWrapperState = false;
$('.goods-area .goods-wrapper').hide();
},
go: function(q) {
var qs = $.extend(common.queryString(), q);
location.search = $.param(qs);
}
};
YohoListPage.init();
module.exports = YohoListPage;
... ...
require('./list/list-search');
... ...
.brand-page {
padding-bottom: 80px;
.brands-tabs {
position: relative;
a {
display: block;
width: 370px;
height: 304px;
img {
width: 100%;
height: 100%;
display: block;
}
.g-mask {
width: 100%;
height: 100%;
display: block;
position: absolute;
z-index: 1;
background: #ffec07;
border: 1px solid #ffec07;
opacity: 0;
}
}
li {
float: left;
margin-left: 20px;
position: relative;
p {
display: block;
font-size: 30px;
text-align: center;
color: #ffec07;
position: absolute;
top: 50%;
width: 100%;
margin-top: -15px;
z-index: 3;
}
}
li:first-child {
margin-left: 0;
}
li:hover {
.g-mask {
opacity: 0.3;
}
}
}
.category-nav {
margin-top: 20px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
padding-left: 16px;
height: 44px;
line-height: 44px;
font-size: 12px;
font-weight: bold;
position: relative;
z-index: 100;
background-color: #fff;
a {
display: inline-block;
padding: 0 7px;
text-align: center;
color: #222;
cursor: pointer;
}
a:hover {
color: #379ed6;
}
}
.brands-list {
dt {
height: 70px;
line-height: 70px;
font-weight: bold;
font-size: 24px;
}
dd {
li {
float: left;
display: block;
width: 275px;
height: 250px;
margin-right: 15px;
border: 1px solid #eee;
margin-top: 20px;
}
li:nth-child(4n) {
margin-right: 0;
}
li:nth-child(-n+4) {
margin-top: 0;
}
a {
font-size: 16px;
display: block;
width: 100%;
height: 100%;
img {
width: 275px;
height: 190px;
}
span {
display: block;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 16px;
}
}
}
}
}
... ...
... ... @@ -12,4 +12,4 @@
@import "channel/index";
@import "passport/index";
@import "editorial/index";
@import "brand/brand";
... ...
.address-page {
.title {
font-size: 30px;
height: 100px;
line-height: 100px;
text-align: left;
}
.tip {
font-size: 14px;
}
.add-address-detail {
padding: 15px 0 0;
.form-group {
clear: both;
margin-bottom: 20px;
.default-address,
#address,
.btn {
margin-left: 83px;
}
.label-name {
font-size: 14px;
text-align: left;
float: left;
line-height: 26px;
}
.width-190 {
width: 190px;
margin-left: 20px;
}
.width-275 {
width: 275px;
margin-left: 20px;
}
.iconfont {
font-size: 14px;
}
.radio-lable {
font-size: 14px;
}
.error-tips {
font-size: 12px;
height: 26px;
line-height: 26px;
margin-left: 20px;
.iconfont {
font-size: 12px;
margin-right: 5px;
}
}
.opreation {
cursor: pointer;
}
}
}
}
.address-table {
.table-title {
font-size: 10px;
height: 40px;
line-height: 40px;
}
.a-table {
tr,
th,
td {
font-size: 15px;
border: 1px solid #eee;
padding: 0 5px;
text-align: left;
}
.opreation {
cursor: pointer;
}
.table-head {
background: #f5f5f5;
height: 30px;
}
.table-body td {
padding: 8px 5px;
}
.width-80 {
width: 80px;
}
.width-195 {
width: 195px;
}
.width-255 {
width: 255px;
word-break: break-all;
}
.width-120 {
width: 120px;
p:first-child {
margin-bottom: 5px;
}
}
.width-260 {
width: 260px;
}
.current-default,
.set-default {
display: inline-block;
margin-left: 20px;
}
}
}
... ...
... ... @@ -101,4 +101,5 @@
}
}
@import "address";
@import "order/index";
... ...
... ... @@ -39,8 +39,8 @@
}
.search-bar {
$height: 24px;
$buttonWidth: 65px;
$height: 30px;
$buttonWidth: 67px;
height: calc($liHeight);
float: right;
... ...
... ... @@ -10,6 +10,7 @@
$goodImgHeight: 90px;
$normalSize: 14px;
$bigSize: 16px;
$smallSpace: 8px;
$space: 20px;
... ... @@ -176,5 +177,40 @@
margin: 0;
}
}
&.empty {
width: 100%;
.bg {
height: 250px;
background-image: resolve('me/no-order.png');
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100px 125px;
}
.msg {
margin-top: 50px;
text-align: center;
.msg-zh {
font-size: $bigSize;
margin-bottom: $space;
}
.msg-en {
margin-bottom: 40px;
}
.btn {
display: inline-block;
}
}
}
.blk-pagination {
margin: $bigSpace auto -$bigSpace;
text-align: center;
}
}
... ...
... ... @@ -25,7 +25,7 @@
.title {
float: left;
margin: 0px;
margin: 0;
font-size: 22px;
line-height: 40px;
color: #000;
... ... @@ -122,7 +122,7 @@
}
.no-find {
margin: 10px 0 0 0;
margin: 10px 0 0;
line-height: 20px;
color: #a5a4a4;
text-align: center;
... ...
@import 'list';
@import 'item';
@import 'shop-list';
/* 组件 */
@import 'brand-banner';
... ...
... ... @@ -11,18 +11,19 @@
}
}
.input-radio {
padding: 10px 0;
padding: 10px 1px;
.round-color {
width: 16px;
height: 15px;
width: 22px;
height: 21px;
vertical-align: middle;
.iconfont {
font-size: 16px;
font-size: 22px;
}
.iconfont.icon-cover {
font-size: 16px;
font-size: 22px;
}
}
}
... ... @@ -192,13 +193,16 @@
.filter-item {
display: inline-block;
margin: 12px 10px;
padding: 10px 5px;
font-size: 14px;
border: 1px solid #adacad;
background-color: #fff;
padding: 8px;
span {
font-size: 14px;
display: inline-block;
height: 21px;
line-height: 21px;
}
span.label {
... ... @@ -210,15 +214,17 @@
}
.round-color {
width: 16px;
height: 15px;
width: 22px;
height: 20px;
vertical-align: middle;
margin-left: 5px;
.iconfont {
font-size: 16px;
font-size: 22px;
}
.iconfont.icon-cover {
font-size: 16px;
font-size: 22px;
}
}
}
... ... @@ -389,14 +395,6 @@
}
}
.c-blue {
color: blue;
}
.c-red {
color: red;
}
.blk-pagination {
text-align: center;
margin: 20px 0 40px;
... ...
.yoho-product-list {
.brand-banner {
width: 100%;
height: 150px;
background-size: 100% 100%;
position: relative;
p.opts {
display: block;
position: absolute;
right: 20px;
bottom: 30px;
font-size: 14px;
a,
.brand-fav {
color: #fff;
border: 1px solid #fff;
padding: 10px;
margin-left: 10px;
.iconfont {
font-size: 14px;
}
}
}
}
.shop-menu {
border-bottom: 1px solid #eee;
margin-bottom: 30px;
li {
display: inline-block;
margin: 10px 30px;
a {
font-size: 12px;
}
.iconfont {
font-size: 14px;
}
}
}
}
... ...