fe / yoho-blk · Commits

Go to a project

Authored by zhangxiaoru
Commit f1169daf31c90f0b1709253ce50efa667836797b 2 parents 3a200297 ced9fb24

brand node

Inline Side-by-side
Showing 26 changed files with 682 additions and 298 deletions
... ... @@ -44,7 +44,20 @@ const getOrderList = (req, res) => {
});
};
const getOrderTotal = (req, res) => {
const type = req.query.type;
orderModel.getOrderData(type).then(result => {
res.json({
total: result.order.total,
type: result.order.type
});
});
};
module.exports = {
index: index,
getOrderList: getOrderList
getOrderList: getOrderList,
getOrderTotal: getOrderTotal
};
... ...
... ... @@ -2,69 +2,107 @@
const api = global.yoho.API;
const camelCase = global.yoho.camelCase;
const moment = require('moment');
const pageSize = 10;
const typeActiveIndexMap = {
1: 0,
2: 1,
3: 2
};
const _getUserOrder = (type, page) => {
const convertUnitTime = (src) => {
return moment.unix(src).format('YYYY-MM-DD hh:mm:ss');
};
return api.get('', {
method: 'app.SpaceOrders.get',
uid: '10931021',
type: type || 1,
page: page || 1,
limit: 10
type: type,
page: page,
limit: pageSize
}).then(result => {
let orderList = [];
let total = false;
let curPage = 1;
if (result && result.data) {
orderList = result.data.order_list;
orderList = camelCase(result.data.order_list);
total = result.data.total;
curPage = result.data.page;
}
orderList.forEach(function(item) {
const ot = parseInt(item.orderType, 10);
// 转换订单创建时间
item.createTime = convertUnitTime(item.createTime);
// 隐藏为了的剩余时间
if (parseInt(item.payLefttime, 10) === 0) {
item.payLefttime = false;
}
// 判断是否是手机订单，3, 4, 6对应 iOS, Android, H5
// 具体订单类型见 http://git.yoho.cn/yoho-documents/api-interfaces/blob/master/%E8%AE%A2%E5%8D%95/order.md
item.showMobile = ot === 3 || ot === 4 || ot === 6;
});
return {
orderList: camelCase(orderList),
orderList: orderList,
total: total,
curPage: curPage
};
});
};
const navBar = {
tabs: [
{
text: '全部订单',
isActive: true,
type: 'all'
},
{
text: '待付款',
type: 'paying'
},
{
text: '待发货',
type: 'delivering'
}
]
};
const getOrderData = (type, page) => {
const navBar = {
tabs: [
{
text: '全部订单',
typeStr: 'all'
},
{
text: '待付款',
typeStr: 'paying'
},
{
text: '待发货',
typeStr: 'delivering'
}
]
};
type = parseInt(type, 10);
type = type < 4 ? type : 1;
page = page || 1;
return _getUserOrder(type, page).then(result => {
const fakeData = {
const basicData = {
title: '我的订单',
showSearch: true
showSearch: type === 1,
total: result.total,
type: type
};
const order = Object.assign(fakeData, {
navBar.tabs[typeActiveIndexMap[type]].isActive = true;
const order = Object.assign(basicData, {
orderList: result.orderList.length && result.orderList || false
}, navBar);
const paginationOpts = {
const paginationOpts = result.total > pageSize ? {
paginationOpts: {
total: result.total,
page: result.curPage,
limit: 10
limit: pageSize
}
};
} : false;
return {
order: Object.assign(order, paginationOpts)
... ...
... ... @@ -16,6 +16,7 @@ const address = require(`${cRoot}/address`);
// 个人中心首页/订单
router.get(['/', '/order'], order.index);
router.get('/getOrderList', order.getOrderList);
router.get('/getOrderTotal', order.getOrderTotal);
// 个人中心首页/收货地址
router.get('/address', address.index);
... ...
<div class="order-nav">
<ul class="tabs clearfix">
{{#tabs}}
<li class="{{#if isActive}}active{{/if}}" data-type="{{type}}">{{text}}</li>
<li class="{{#if isActive}}active{{/if}}" data-type="{{typeStr}}"><span class="badge"></span>{{text}}</li>
{{/tabs}}
</ul>
<div class="search-bar">
<div class="search-bar {{#unless showSearch}}vhide{{/unless}}">
<input class="search-ctrl" type="text" placeholder="商品名称和订单号">
<button class="search-ctrl">搜索订单</button>
</div>
... ...
... ... @@ -38,8 +38,8 @@
<p class="subtext">查看详情</p>
</div>
<div class="common-column special-border">
{{#if payLeftTime}}
<p class="left-time">剩余{{payLeftTime}}</p>
{{#if payLefttime}}
<p class="left-time" data-left="{{payLefttime}}"></p>
{{/if}}
{{#if showPayButton}}
<button>立即付款</button>
... ... @@ -54,7 +54,9 @@
</div>
</div>
{{/orderList}}
{{#if paginationOpts}}
{{{ pagination paginationOpts }}}
{{/if}}
{{^}}
<div class="bg"></div>
<div class="msg">
... ...
<style>
.demo-page {
padding: 10px;
}
.demo-page .title {
padding: 10px 0;
}
.demo-page .btn {
margin-bottom: 10px;
}
.demo-page .icon_lists span{
float: left;
width: 50px;
height: 30px;
text-align: center;
margin-top: 10px;
}
.demo-page .modality {
color: #219dd6;
}
.demo-page .modality span{
font-size: 20px;
}
.demo-page .sort {
color: #999;
}
.demo-page .sort span {
font-size: 20px;
}
</style>
<div class="demo-page blk-page">
{{# content}}
<p class="title">1.复选按钮</p>
{{#each checkbox}}
{{> icon/checkbox}}
<br><br>
{{/each}}
<p class="title">2.单选按钮</p>
{{#each radio}}
{{> icon/radio}}
<br><br>
{{/each}}
<p class="title">2.1 选中状态切换</p>
{{#each genders}}
<div class="input-radio" data-value="{{value}}">
{{> icon/radio}}
<label>{{name}}</label>
</div>
{{/each}}
{{#each genders}}
<div class="input-checkbox" data-value="{{value}}">
{{> icon/checkbox}}
<label>{{name}}</label>
</div>
{{/each}}
<div class="check-msg"></div>
<p class="title">3. 按钮</p>
<span class="btn">普通按钮</span>
<span class="btn disable">不可点按钮</span>
<span class="btn red">红色按钮</span>
<span class="btn white">白色按钮</span>
<p class="title">4. 提示文字或者某些链接文字颜色</p>
<span class="blue">提示文字</span>
<a class="blue">Link text</a>
<p class="title">5. input</p>
<input class="input" type="text">
<p class="bold title">6.文字加粗</p>
<p class="title">7. 浮动和clearfix</p>
<div class="clearfix" style="width: 300px;border: 1px solid #000;">
<p class="left">左浮动</p>
<p class="right">右浮动</p>
</div>
<p class="title">8. 显示和隐藏</p>
<div style="border: 1px solid #000;">
<p><span class="hide">我是存在的</span>(左边有个家伙消失啦)</p>
<p><span class="block">我是block</span></p>
<p><span class="inline-block" style="height: 30px;border:1px solid #f00;">我是inline-block，我原本是inline元素，现在可以设置高度了</span></p>
<p><span class="vhide">我是存在的</span>(左边有个家伙隐身了)</p>
</div>
<p class="title">9. 分页组件</p>
<div style="border: 1px solid #000; height: 200px; padding: 5px;">
{{{ pagination paginationOpts }}}
</div>
<p class="title">10. 商品信息</p>
{{# goods}}
{{> goods}}
{{/ goods}}
<p class="title">11. 面包屑</p>
{{# navPath}}
{{> path-nav}}
{{/ navPath}}
<p class="title">12. 楼层</p>
{{# floor}}
{{> floor}}
{{/ floor}}
<p class="title">13. 各类图标</p>
<div style="border: 1px solid #000;overflow: hidden;">
<ul class="icon_lists clear">
<div class="modality">
{{> icon/truck}}
{{# hook}}
{{> icon/round-hook}}
{{/ hook}}
{{> icon/error-round}}
{{> icon/doubt}}
{{# warn}}
{{> icon/warn}}
{{/ warn}}
</div>
<div class="sort">
{{> icon/clock}}
{{> icon/praise}}
{{> icon/delete}}
{{> icon/up}}
{{> icon/down}}
{{> icon/solid-round}}
{{> icon/collection}}
{{> icon/bookmarks}}
{{> icon/refresh}}
{{> icon/headset}}
</div>
</ul>
</div>
<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>
<p class="title">14. tips</p>
<div>
<button id="change" >show or hide tip</button>
</div>
<div id="tips" style="width: 200px;">
<input style="width: 100%;" type="text" name="" id="">
</div>
<p class="title">15. 头像</p>
<div>
<img class="avatar" src="http://devlup.com/wp-content/uploads/2013/07/images.jpg" alt="Braden Hamm">
</div>
<p class="title">16. 对话框（弹窗）</p>
<span class="btn alert-btn">alert</span>
<span class="btn red confirm-btn">confirm</span>
<span class="btn white dialog-btn">dialog</span>
<p class="title">17. 分享</p>
{{> share}}
{{/ content}}
</div>
</div>
\ No newline at end of file
<style>
.demo-page {
padding: 10px;
}
.demo-page .title {
padding: 10px 0;
}
.demo-page .btn {
margin-bottom: 10px;
}
.demo-page .icon_lists span{
float: left;
width: 50px;
height: 30px;
text-align: center;
margin-top: 10px;
}
.demo-page .modality {
color: #219dd6;
}
.demo-page .modality span{
font-size: 20px;
}
.demo-page .sort {
color: #999;
}
.demo-page .sort span {
font-size: 20px;
}
.your-div {
width: 500px;
height: 200px;
}
</style>
<div class="demo-page blk-page">
{{# content}}
<p class="title">1.复选按钮</p>
{{#each checkbox}}
{{> icon/checkbox}}
<br><br>
{{/each}}
<p class="title">2.单选按钮</p>
{{#each radio}}
{{> icon/radio}}
<br><br>
{{/each}}
<p class="title">2.1 选中状态切换</p>
{{#each genders}}
<div class="input-radio" data-value="{{value}}">
{{> icon/radio}}
<label>{{name}}</label>
</div>
{{/each}}
{{#each genders}}
<div class="input-checkbox" data-value="{{value}}">
{{> icon/checkbox}}
<label>{{name}}</label>
</div>
{{/each}}
<div class="check-msg"></div>
<p class="title">3. 按钮</p>
<span class="btn">普通按钮</span>
<span class="btn disable">不可点按钮</span>
<span class="btn red">红色按钮</span>
<span class="btn white">白色按钮</span>
<p class="title">4. 提示文字或者某些链接文字颜色</p>
<span class="blue">提示文字</span>
<a class="blue">Link text</a>
<p class="title">5. input</p>
<input class="input" type="text">
<p class="bold title">6.文字加粗</p>
<p class="title">7. 浮动和clearfix</p>
<div class="clearfix" style="width: 300px;border: 1px solid #000;">
<p class="left">左浮动</p>
<p class="right">右浮动</p>
</div>
<p class="title">8. 显示和隐藏</p>
<div style="border: 1px solid #000;">
<p><span class="hide">我是存在的</span>(左边有个家伙消失啦)</p>
<p><span class="block">我是block</span></p>
<p><span class="inline-block" style="height: 30px;border:1px solid #f00;">我是inline-block，我原本是inline元素，现在可以设置高度了</span></p>
<p><span class="vhide">我是存在的</span>(左边有个家伙隐身了)</p>
</div>
<p class="title">9. 分页组件</p>
<div style="border: 1px solid #000; height: 200px; padding: 5px;">
{{{ pagination paginationOpts }}}
</div>
<p class="title">10. 商品信息</p>
{{# goods}}
{{> goods}}
{{/ goods}}
<p class="title">11. 面包屑</p>
{{# navPath}}
{{> path-nav}}
{{/ navPath}}
<p class="title">12. 楼层</p>
{{# floor}}
{{> floor}}
{{/ floor}}
<p class="title">13. 各类图标</p>
<div style="border: 1px solid #000;overflow: hidden;">
<ul class="icon_lists clear">
<div class="modality">
{{> icon/truck}}
{{# hook}}
{{> icon/round-hook}}
{{/ hook}}
{{> icon/error-round}}
{{> icon/doubt}}
{{# warn}}
{{> icon/warn}}
{{/ warn}}
</div>
<div class="sort">
{{> icon/clock}}
{{> icon/praise}}
{{> icon/delete}}
{{> icon/up}}
{{> icon/down}}
{{> icon/solid-round}}
{{> icon/collection}}
{{> icon/bookmarks}}
{{> icon/refresh}}
{{> icon/headset}}
</div>
</ul>
</div>
<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>
<p class="title">14. tips</p>
<div>
<button id="change" >show or hide tip</button>
</div>
<div id="tips" style="width: 200px;">
<input style="width: 100%;" type="text" name="" id="">
</div>
<p class="title">15. 头像</p>
<div>
<img class="avatar" src="http://devlup.com/wp-content/uploads/2013/07/images.jpg" alt="Braden Hamm">
</div>
<p class="title">16. 对话框（弹窗）</p>
<span class="btn alert-btn">alert</span>
<span class="btn red confirm-btn">confirm</span>
<span class="btn white dialog-btn">dialog</span>
<p class="title">17. 分享</p>
{{> share}}
<p class="title">18. 个性化滚动条</p>
<div class="your-div nano">
<div class="nano-content">
<pre>
// html 添加样式 .nano .nano-content
&lt;div class="your-div nano">
&lt;div class="nano-content">
your content...
&lt;/div>
&lt;/div>
// js
require('yoho-jquery-nanoscroller');
$('.nano').nanoScroller();
</pre>
</div>
</div>
{{/ content}}
</div>
</div>
... ...
... ... @@ -7,14 +7,9 @@ const DateHelper = require('../models/helpers');
const list = {
index: (req, res, next) => {
let page = req.query.page || 1;
let brand = req.query.brand || 0;
let sort = req.query.sort || '';
let gender = req.query.gender || '';
let price = req.query.price || '';
let size = req.query.size || '';
let color = req.query.color || '';
let order = req.query.order || '';
let q = req.query;
q.page = q.page || 1;
let retDate = {
module: 'product',
... ... @@ -22,40 +17,68 @@ const list = {
title: '列表'
};
Search.queryProduct({
page: page,
brand: brand,
sort: sort,
gender: gender,
size: size,
price: price,
color: color,
order: order
}).then(result => {
Search.queryProduct(q).then(result => {
if (result && result.code === 200 && result.data) {
let data = camelCase(result.data);
if (data.filter) {
retDate.filter = DateHelper.filterHandle(data.filter, req.query);
retDate.filter = DateHelper.filterHandle(data.filter, q);
}
retDate.paginationData = {
page: page,
page: q.page,
limit: data.limit || 45,
total: data.total,
pageTotal: data.pageTotal,
queryParams: req.query
queryParams: q
};
res.display('list', _.assign(retDate, {
products: data.productList,
order: order
order: q.order
}));
} else {
return Promise.reject('query product error');
}
}).catch(next);
},
newPage: (req, res, next) => {
let q = req.query;
q.page = q.page || 1;
let retDate = {
module: 'product',
page: 'list',
title: '列表'
};
Search.queryProduct(q).then(result => {
if (result && result.code === 200 && result.data) {
let data = camelCase(result.data);
if (data.filter) {
retDate.filter = DateHelper.filterHandle(data.filter, q);
}
retDate.paginationData = {
page: q.page,
limit: data.limit || 45,
total: data.total,
pageTotal: data.pageTotal,
queryParams: q
};
res.display('newList', _.assign(retDate, {
products: data.productList,
order: q.order
}));
} else {
return Promise.reject('query product error');
}
}).catch(next);
}
};
... ...
... ... @@ -44,7 +44,7 @@ const shop = {
title: '店铺列表'
};
let domain = req.query.domain;
let domain = req.params.domain;
let q = req.query;
q.page = q.page || 1;
... ... @@ -61,6 +61,7 @@ const shop = {
let ret = camelCase(result.data);
if (ret.filter) {
delete q.brand;
data.filter = DateHelper.filterHandle(ret.filter, req.query);
}
... ...
... ... @@ -58,7 +58,7 @@ const helpers = {
name: 'MEN首页'
}];
if (sort) {
if (sort && sorts) {
sorts.forEach(s => {
if (s.relationParameter.sort === sort) {
nav.push({
... ... @@ -103,6 +103,8 @@ const helpers = {
let colors = this.colorConvert(filter.color);
let sorts = filter.groupSort;
let filters = [];
let customPriceLow = '';
let customPriceHigh = '';
genders.forEach(g => {
if (g.value === q.gender) {
... ... @@ -111,20 +113,34 @@ const helpers = {
}
});
let matchPrice = false;
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 {
let p = {
lower: prices[0],
higher: prices[1]
};
if (k === q.price) {
p.checked = true;
matchPrice = true;
}
return p;
}).sort((a, b) => {
return a.lower - b.lower;
});
if (!matchPrice && q.price) {
let prices = q.price.split(',');
filters.push(this.newFilter('price', q.price, `¥${prices[0]}－¥${prices[1]}`));
customPriceLow = prices[0];
customPriceHigh = prices[1];
}
if (!_.isArray(sizeInfo)) {
sizeInfo.checked = true;
sizeInfo = [sizeInfo];
... ... @@ -133,6 +149,7 @@ const helpers = {
if (q.size) {
sizeInfo.forEach(s => {
if (s.sizeId === parseInt(q.size, 10)) {
s.checked = true;
filters.push(this.newFilter('size', q.size, s.sizeName));
}
});
... ... @@ -142,6 +159,7 @@ const helpers = {
let brandNames = brands.filter(b => {
return (',' + q.brand + ',').indexOf(',' + b.id + ',') >= 0;
}).map(b => {
b.checked = true;
return b.brandName;
}).join('、');
... ... @@ -173,7 +191,9 @@ const helpers = {
letters: this.brandLetters(),
navPath: {
nav: this.getNav('', q.sort, sorts)
}
},
customPriceLow: customPriceLow,
customPriceHigh: customPriceHigh
};
}
};
... ...
... ... @@ -14,9 +14,10 @@ const shop = require(cRoot + '/shop');
// Your controller here
router.get('/list', list.index); // 列表页面
router.get('/list/new', list.newPage); // 新品列表页
router.get(/\/item\/([\d]+)_([\d]+).html/, item.index); // 商品详情页
router.get('/shop/list', shop.list);
router.get('/shop/:domain', 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">
<div class="left">
{{!-- 筛选区域 --}}
{{#filter}}
{{> list/filter}}
{{/filter}}
</div>
<div class="right">
{{!-- 新品banner --}}
<div class="banner-img" style="height: 200px;margin-bottom:30px; background:url(//img12.static.yhbimg.com/couponImg/2016/07/06/10/025f07ba2e91648de11e5c054471323920.jpg) no-repeat top center;"></div>
{{!-- 已选中条件 --}}
{{#filter}}
{{> list/filter-area}}
{{/filter}}
{{!-- 排序 --}}
{{> list/order-area}}
{{!-- 商品列表 --}}
{{> list/goods-box}}
{{!-- 分页 --}}
{{{ pagination paginationData }}}
</div>
</div>
</div>
... ...
... ... @@ -17,13 +17,15 @@
{{#each sortData}}
<h3>{{categoryName}}</h3>
<div class="body" data-value="{{relationParameter.sort}}">
<div class="list-body">
{{#each sub}}
<div class="input-radio" data-value="{{relationParameter.sort}}">
{{> icon/radio }}
<label>{{categoryName}}</label>
</div>
{{/each}}
<div class="list-body nano">
<div class="nano-content">
{{#each sub}}
<div class="input-radio" data-value="{{relationParameter.sort}}">
{{> icon/radio }}
<label>{{categoryName}}</label>
</div>
{{/each}}
</div>
</div>
</div>
{{/each}}
... ... @@ -46,17 +48,19 @@
多选 ＋
</span>
</div>
<div class="brand-list">
{{#each brandData}}
<div class="input-radio" data-value="{{id}}">
{{> icon/radio}}
{{#if brandNameEn}}
<label>{{brandNameEn}}</label>
{{^}}
<label>{{brandName}}</label>
{{/if}}
</div>
{{/each}}
<div class="brand-list nano">
<div class="nano-content">
{{#each brandData}}
<div class="input-radio" data-value="{{id}}">
{{> icon/radio}}
{{#if brandNameEn}}
<label>{{brandNameEn}}</label>
{{^}}
<label>{{brandName}}</label>
{{/if}}
</div>
{{/each}}
</div>
</div>
<div class="brand-btns hide">
<span class="btn disable large confirm">确定</span>
... ... @@ -69,22 +73,22 @@
<h3>价格</h3>
<div class="body price-body">
{{#each priceRange}}
<div class="input-radio" data-value="{{lower}},{{higher}}">
{{> icon/radio }}
<label>¥{{lower}}-¥{{higher}}</label>
</div>
<div class="input-radio" data-value="{{lower}},{{higher}}">
{{> icon/radio }}
<label>¥{{lower}}-¥{{higher}}</label>
</div>
{{/each}}
<div class="price-btns">
<div class="price-input inline-block">
<span>¥</span>
<input type="text">
<input type="text" class="price-low" value="{{customPriceLow}}">
</div>
<span>－</span>
<div class="price-input inline-block">
<span>¥</span>
<input type="text">
<input type="text" class="price-high" value="{{customPriceHigh}}">
</div>
<span class="btn large">确定</span>
<span class="btn large confirm">确定</span>
</div>
</div>
</div>
... ... @@ -92,13 +96,15 @@
<div class="yoho-ui-accordion">
<h3>尺码</h3>
<div class="body">
<div class="size-body">
{{#each size}}
<div class="input-radio" data-value="{{sizeId}}">
{{> icon/radio }}
<label>{{sizeName}}</label>
<div class="size-body nano">
<div class="nano-content">
{{#each size}}
<div class="input-radio" data-value="{{sizeId}}">
{{> icon/radio }}
<label>{{sizeName}}</label>
</div>
{{/each}}
</div>
{{/each}}
</div>
</div>
</div>
... ... @@ -106,13 +112,15 @@
<div class="yoho-ui-accordion">
<h3>颜色</h3>
<div class="body">
<div class="color-body">
{{#each colors}}
<div class="input-radio" data-value="{{id}}">
{{> round-color}}
<label>{{title}}</label>
<div class="color-body nano">
<div class="nano-content">
{{#each colors}}
<div class="input-radio" data-value="{{id}}">
{{> round-color}}
<label>{{title}}</label>
</div>
{{/each}}
</div>
{{/each}}
</div>
</div>
</div>
... ...
... ... @@ -19,7 +19,7 @@ module.exports = {
},
cookieDomain: 'yohoblk.com',
domains: {
api: 'http://devapi.yoho.cn:58078/', // devapi.yoho.cn:58078 testapi.yoho.cn:28078 devapi.yoho.cn:58078
api: 'http://testapi.yoho.cn:28078/', // devapi.yoho.cn:58078 testapi.yoho.cn:28078 devapi.yoho.cn:58078
service: 'http://devservice.yoho.cn:28077/', // testservice.yoho.cn:28077 devservice.yoho.cn:58077
search: 'http://192.168.102.216:8080/yohosearch/'
},
... ...
... ... @@ -101,6 +101,7 @@
"yoho-jquery": "^1.12.4",
"yoho-jquery-accordion": "0.0.2",
"yoho-jquery-lazyload": "^1.9.7",
"yoho-jquery-nanoscroller": "0.0.1",
"yoho-jquery-placeholder": "^2.3.1",
"yoho-jquery-qrcode": "0.0.3",
"yoho-slider": "0.0.2"
... ...
... ... @@ -9,13 +9,72 @@ var tableOperation = {
$body: $('.table.table-body'),
removeBody: function() {
this.$body = $('.table.table-body');
this.$body.remove();
},
appendBody: function(htmlStr) {
this.$body.remove();
$(htmlStr).appendTo(this.$header);
}
};
var countDown = {
count: null,
intervalTimer: null,
intervalValue: 60000,
$element: null,
selector: '.left-time',
setTime: function() {
var that = this;
this.$element.each(function(index, item) {
var $item = $(item);
var leftTime = $item.data('left');
$item.text(that.convertLeftTime(leftTime - that.count * 60));
});
this.count += 1;
},
convertLeftTime: function(src) {
var min = parseInt(src / 60, 10) % 60;
var hour = parseInt(src / 3600, 10);
var timeStr = min + '分';
if (src <= 0) {
timeStr = '已失效';
return timeStr;
}
if (hour > 0) {
timeStr = hour + '时' + timeStr;
}
timeStr = '剩余' + timeStr;
return timeStr;
},
getLeftTime: function() {
var that = this;
if (this.$element.length) {
this.setTime();
this.intervalTimer = setInterval(this.setTime.bind(that), that.intervalValue);
}
},
start: function() {
this.count = 0;
this.$element = $(this.selector);
if (this.intervalTimer) {
clearInterval(this.intervalTimer);
}
this.getLeftTime();
}
};
var typeMap = {
all: 1,
paying: 2,
delivering: 3
};
require('./me');
function getOrderList(type, page) {
... ... @@ -30,6 +89,7 @@ function getOrderList(type, page) {
}).done(function(res) {
tableOperation.appendBody(res);
bindPaginationClick(); // eslint-disable-line
countDown.start();
}).fail(function(err) {
console.log(err);
});
... ... @@ -49,6 +109,7 @@ function getQueryString() {
return query;
}
function bindPaginationClick() {
$('.blk-pagination li').off('click').on('click', function(e) {
var $this = $(this);
... ... @@ -60,6 +121,7 @@ function bindPaginationClick() {
if (!$this.hasClass('active')) {
$('.blk-pagination li.active').removeClass('active');
$this.addClass('active');
$(window).scrollTop(0);
getOrderList(type, page);
}
... ... @@ -67,19 +129,50 @@ function bindPaginationClick() {
});
}
function getOrderTotal(type, key) {
$.ajax({
url: 'getOrderTotal',
data: {
type: type
}
}).done(function(result) {
var $navItme = $('*[data-type="' + key + '"]');
if (!$navItme.hasClass('active') && result.total !== 0) {
$navItme.find('.badge').text(result.total);
}
});
}
function setOrderTotal() {
var key;
for (key in typeMap) {
if (key !== 'all') {
getOrderTotal(typeMap[key], key);
}
}
}
$('.tabs li').on('click', function() {
var $this = $(this);
var typeMap = {
all: 1,
paying: 2,
delivering: 3
};
var $searchBar = $('.search-bar');
var type = typeMap[$this.data('type')];
var page = getQueryString().page;
if (!$this.hasClass('active')) {
$('.tabs li.active').removeClass('active');
$this.addClass('active');
$this.find('.badge').text('');
if (type !== 1) {
$searchBar.addClass('vhide');
} else {
$searchBar.removeClass('vhide');
}
getOrderList(type, page);
}
... ... @@ -88,3 +181,6 @@ $('.tabs li').on('click', function() {
bindPaginationClick();
countDown.start();
setOrderTotal();
... ...
... ... @@ -13,9 +13,12 @@ var change = $('#change');
var show = false;
require('yoho-jquery-qrcode');
require('yoho-jquery-nanoscroller');
require('../plugins/tips');
require('../plugins/check');
$('.nano').nanoScroller();
$('.alert-btn').click(function() {
new _alert('购买成功<br>进入 个人中心>我的订单<br>查看门票信息').show();
});
... ... @@ -92,7 +95,7 @@ $(function() {
// 运行此demo
// 1. 安装 npm i -g json-server
// 2. json-server --watch mock/address.json
cascadingAddress({
window.add = cascadingAddress({
el: '#address',
url: 'http://localhost:3000/areas/0',
resource: 'areas'
... ...
... ... @@ -34,4 +34,8 @@
dist: '320102' // 区县
});
重置地址:
address.reset();
开发者: 董金虎
... ...
... ... @@ -439,6 +439,19 @@ CascadingAddress.prototype.setAddress = function(targetAddr) {
}
};
// 重置地址
CascadingAddress.prototype.reset = function() {
var items = $(this.config.el).find('.items-indicator'),
labels = this.config.indicators;
items.each(function(index, item) {
$(item).find('span.indicator-name').text(labels[index])
.next().val('')
.parent().next()
.find('span.checked').removeClass('checked').prev().hide();
});
};
module.exports = function(options) {
return new CascadingAddress(options);
};
... ...
... ... @@ -24,8 +24,12 @@ var jQuery = require('yoho-jquery');
init: function(options) {
var type = options.type || defaults.type;
var ele = this;
var _checked = $('.iconfont', this).hasClass('checked');
options = $.extend({}, defaults, defaultsHtml[type], options);
options = $.extend({}, defaults, $(this).data('options'), defaultsHtml[type], options);
$('.iconfont', this).removeClass('radio').removeClass('checkbox').addClass(options.type);
$('.iconfont', this).html(_checked ? options.checkedHtml : options.uncheckedHtml);
if (options.group) {
$(this).addClass('check-group-' + options.group);
... ...
... ... @@ -12,7 +12,9 @@ var YohoListPage = {
page: query.page || 1,
init: function() {
require('yoho-jquery-accordion');
require('yoho-jquery-nanoscroller');
require('../../plugins/check');
$('.nano').nanoScroller();
$('.yoho-ui-accordion', this.rootDoc).each(function() {
var opts = {
collapsible: true,
... ... @@ -27,6 +29,7 @@ var YohoListPage = {
$('.sex-body .input-radio', this.rootDoc).check({
type: 'radio',
group: 'gender',
onChange: function(ele, checked, value) {
YohoListPage.go({
gender: checked ? value : ''
... ... @@ -36,6 +39,7 @@ var YohoListPage = {
$('.list-body .input-radio', this.rootDoc).check({
type: 'radio',
group: 'sort',
onChange: function(ele, checked, value) {
YohoListPage.go({
sort: checked ? value : ''
... ... @@ -45,6 +49,7 @@ var YohoListPage = {
$('.price-body .input-radio', this.rootDoc).check({
type: 'radio',
group: 'price',
onChange: function(ele, checked, value) {
YohoListPage.go({
price: checked ? value : ''
... ... @@ -54,6 +59,7 @@ var YohoListPage = {
$('.size-body .input-radio', this.rootDoc).check({
type: 'radio',
group: 'size',
onChange: function(ele, checked, value) {
YohoListPage.go({
size: checked ? value : ''
... ... @@ -63,6 +69,7 @@ var YohoListPage = {
$('.brand-list .input-radio', this.rootDoc).check({
type: 'radio',
group: 'brand',
onChange: function(ele, checked, value) {
if (!YohoListPage.mulitBrand) {
YohoListPage.go({brand: value});
... ... @@ -100,6 +107,17 @@ var YohoListPage = {
}
});
$('.price-btns .confirm', this.rootDoc).click(function() {
var priceLow = $('.price-low', $(this).parent()).val() || 0;
var priceHigh = $('.price-high', $(this).parent()).val() || 0;
if (priceLow > 0 || priceHigh > 0) {
YohoListPage.go({
price: priceLow + ',' + priceHigh
});
}
});
$('.yoho-product-list .brand-body input').on('keyup', function() {
YohoListPage.filterBrand($(this).val().toLowerCase());
});
... ... @@ -181,6 +199,9 @@ var YohoListPage = {
},
openBrandMulitChoose: function() {
$('.yoho-product-list .mulit-choose').hide();
$('.input-radio', this.brandsDoc).check({
type: 'checkbox'
});
YohoListPage.mulitBrand = true;
YohoListPage.showBrandMulitBtn();
},
... ... @@ -190,6 +211,9 @@ var YohoListPage = {
$('.yoho-product-list .brand-list .input-radio').check('unCheckAll');
YohoListPage.mulitBrand = false;
$('.input-radio', this.brandsDoc).check({
type: 'radio'
});
},
showBrandMulitBtn: function() {
$('.brand-btns', this.rootDoc).removeClass('hide');
... ... @@ -221,7 +245,7 @@ var YohoListPage = {
getSelectBrands: function() {
let brands = [];
$('.input-radio .radio', this.brandsDoc).each(function() {
$('.input-radio .checkbox', this.brandsDoc).each(function() {
if ($(this).hasClass('checked')) {
brands.push($(this).parent().data('value'));
}
... ...
... ... @@ -9,6 +9,20 @@
border-bottom: 1px solid $liBorderColor;
z-index: 0;
.badge {
min-width: 16px;
line-height: 16px;
display: inline-block;
padding: 0px 5px;
position: absolute;
top: 0;
right: 14px;
background-color: #379ed6;
color: #fff;
border-radius: 9px;
font-size: 12px;
}
.tabs {
display: inline-block;
height: $liHeight;
... ... @@ -23,12 +37,12 @@
background-color: #fff;
color: $fontColor;
cursor: pointer;
position: relative;
&.active {
border: 1px solid $liBorderColor;
height: calc($liHeight + 1px);
line-height: calc($liHeight - 2px);
position: relative;
top: 1px;
border-bottom: none;
color: #515151;
... ...
... ... @@ -151,6 +151,7 @@
padding-top: $bigSpace;
.left-time {
min-height: $normalSize;
margin-bottom: 14px !important;
}
... ...
@import "slider";
@import "tips";
@import "avatar";
@import "nanoscroller";
... ...
/** initial setup **/
.nano {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.nano > .nano-content {
position: absolute;
overflow: scroll;
overflow-x: hidden;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.nano > .nano-content:focus {
outline: thin dotted;
}
.nano > .nano-content::-webkit-scrollbar {
display: none;
}
.has-scrollbar > .nano-content::-webkit-scrollbar {
display: block;
}
.nano > .nano-pane {
background: #eee;
position: absolute;
width: 5px;
right: 0;
top: 0;
bottom: 0;
}
.nano > .nano-pane > .nano-slider {
background: #111;
position: relative;
margin: 0;
}
... ...
... ... @@ -2,6 +2,10 @@
font-size: 14px;
.btn {
cursor: pointer;
}
.center-content {
.left {
width: 250px;
... ... @@ -12,6 +16,7 @@
}
.input-radio {
padding: 10px 1px;
cursor: pointer;
.round-color {
width: 22px;
... ... @@ -79,6 +84,7 @@
padding: 5px 0;
margin: 5px 11px 5px 0;
display: inline-block;
cursor: pointer;
}
.select {
... ... @@ -88,6 +94,7 @@
.mulit-choose {
border: 1px solid #1b1b1b;
padding: 5px 10px;
cursor: pointer;
}
}
.brand-btns {
... ... @@ -188,6 +195,7 @@
float: right;
color: #878787;
margin: 22px 20px 0 0;
cursor: pointer;
}
.filter-item {
... ... @@ -197,6 +205,7 @@
border: 1px solid #adacad;
background-color: #fff;
padding: 8px;
cursor: pointer;
span {
font-size: 14px;
... ... @@ -241,6 +250,7 @@
margin: 14px 15px;
height: 24px;
line-height: 24px;
cursor: pointer;
}
.dest {
... ... @@ -252,6 +262,7 @@
margin: 14px 15px;
margin-left: -10px;
margin-bottom: -10px;
cursor: pointer;
.iconfont {
display: block;
... ... @@ -304,6 +315,7 @@
font-size: 14px;
text-align: center;
margin-right: 8px;
cursor: pointer;
}
.page.disable {
... ... @@ -324,6 +336,7 @@
display: inline-block;
text-align: center;
border: 2px solid #fff;
cursor: pointer;
.goods-brand {
font-weight: 700;
... ... @@ -390,6 +403,7 @@
img {
margin: 8px 0;
cursor: pointer;
}
}
}
... ...
... ... @@ -24,7 +24,8 @@ shelljs.ls(path.join(__dirname, '/js/**/*.page.js')).forEach((f) => {
'yoho-jquery',
'yoho-jquery-lazyload',
'yoho-slider',
'yoho-jquery-accordion'
'yoho-jquery-accordion',
'yoho-jquery-nanoscroller'
];
});
... ...