fe / yoho-blk · Commits

Go to a project

Authored by 姜敏
Commit e8e0d62f0de10d7396ad5fcba84850cad35b7701 1 parent 738d2b40

帮助中心初步结构

Inline Side-by-side
Showing 27 changed files with 747 additions and 0 deletions
/**
* 帮助中心
* @author: jiangmin
* @date: 2016/07/25
*/
'use strict';
const helpModel = require('../models/help');
/**
* 主界面
*/
const index = (req, res) => {
let id = req.query.id || "11";
let data = Object.assign(getData(id), helpModel.menuData());
let nav = [
{
link: global.yoho.config.sitUrl,
name: 'YOHO!BLK首页'
},
{
name: '帮助中心'
}
];
nav = nav.concat(getNav(id));
res.display('detail', {
module: 'help',
page: 'help',
content: Object.assign({nav}, data)
});
};
/**
* 根据id获取文章数据
* @param id
* @returns {*}
*/
const getData = (id)=> {
let contentData = helpModel.contentData().content;
for (var i = 0; i < contentData.length; i++) {
if (contentData[i].id === id) {
return contentData[i]
}
}
};
/**
* 根据id获取当前所在位置，拼接面包屑
* @param id
*/
const getNav = (id)=> {
let menuData = helpModel.menuData().menuData;
for (let i = 0; i < menuData.length; i++) {
if (menuData[i].subsets) {
for (let j = 0; j < menuData[i].subsets.length; j++) {
if (menuData[i].subsets[j].id === id) {
return [
{
name: menuData[i].text
}, {
name: menuData[i].subsets[j].text
}
]
}
}
}
}
};
module.exports = {
index
};
... ...
/**
* sub app me
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2016/07/04
*/
'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
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;
... ...
/**
* 帮助中心
* @author: jiangmin
* @date: 2016/07/27
*/
'use strict';
/**
* 分类数据
* @returns {{}}
*/
const menuData = ()=> {
return {
menuData: [
{
id: "1",
text: "购物指南",
subsets: [
{
id: "11",
parendId: "1",
text: "登录注册"
},
{
id: "12",
parendId: "1",
text: "选购下单"
},
{
id: "13",
parendId: "1",
text: "订单支付"
}
]
},
{
id: "2",
text: "支付方式",
subsets: [
{
id: "21",
parendId: "2",
text: "登录注册"
},
{
id: "22",
parendId: "2",
text: "选购下单"
},
{
id: "23",
parendId: "2",
text: "订单支付"
}
]
},
{
id: "3",
text: "配送方式",
subsets: [
{
id: "31",
parendId: "3",
text: "登录注册"
},
{
id: "32",
parendId: "3",
text: "选购下单"
},
{
id: "33",
parendId: "3",
text: "订单支付"
}
]
},
{
id: "4",
text: "售后服务",
subsets: [
{
id: "41",
parendId: "4",
text: "登录注册"
},
{
id: "42",
parendId: "4",
text: "选购下单"
},
{
id: "43",
parendId: "4",
text: "订单支付"
}
]
}
]
};
};
/**
* 文章数据
* @returns {{content: *[]}}
*/
const contentData = ()=> {
return {
content: [
{
id: "11",
content: "<h1>你好</h1><p>测试11</p>"
},
{
id: "12",
content: "<h1>你好</h1><p>测试12</p>"
},
{
id: "13",
content: "<h1>你好</h1><p>测试13</p>"
}
]
}
};
module.exports = {
menuData,
contentData
};
... ...
/**
* router of sub app me
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2016/07/04
*/
'use strict';
const router = require('express').Router(); // eslint-disable-line
const cRoot = './controllers';
// 帮助中心
const help = require(`${cRoot}/help`);
// 帮助中心
router.get('/', help.index);
// router.get('/search', help.search);
module.exports = router;
... ...
<div class="help-page blk-page">
<div class="center-content clearfix">
{{# content}}
{{!-- 头部面包屑 --}}
{{> path-nav}}
{{!-- 左侧菜单导航 --}}
<div class="help-navigation left">
<p class="title bold">帮助中心</p>
{{>help/menu}}
</div>
{{!-- 右侧页面内容 --}}
<div class="help-main left">
{{>help-detail}}
</div>
{{/ content}}
</div>
</div>
... ...
<div class="help-page blk-page">
<div class="center-content clearfix">
{{# content}}
{{!-- 头部面包屑 --}}
{{> path-nav}}
<div class="help-index">
{{>help}}
</div>
{{/ content}}
</div>
</div>
... ...
<div>
{{{content}}}
</div>
... ...
<div class="search-part">
<h1 class="title">YOHO!BLK 帮助中心</h1>
<!--<ul class="notice">
<li></li>
</ul>
<input class="search-keyword" type="text" placeholder="请输入您想知道的帮助信息">
<ul class="keywords">
<li></li>
</ul>-->
</div>
<div class="splider">
<span class="draw"></span>
<span class="part-head">新手指南</span>
<span class="draw"></span>
</div>
<div class="guide">
<ul>
<li>
<a href="">
<div class="login-icon"></div>
<span>登录注册</span>
</a>
</li>
<li>
<a href="">
<div class="search-icon"></div>
<span>搜索商品</span>
</a>
</li>
<li>
<a href="">
<div class="order-icon"></div>
<span>选购下单</span>
</a>
</li>
<li>
<a href="">
<div class="pay-icon"></div>
<span>订单支付</span>
</a>
</li>
<li>
<a href="">
<div class="return-icon"></div>
<span>收货退货</span>
</a>
</li>
</ul>
</div>
<div class="splider">
<span class="draw"></span>
<span class="part-head">自助服务</span>
<span class="draw"></span>
</div>
<div class="self-help">
<ul>
<li>
<a href="">
<div class="order-icon"></div>
<span>订单查询</span>
</a>
</li>
<li>
<a href="">
<div class="refund-icon"></div>
<span>退换货</span>
</a>
</li>
<li>
<a href="">
<div class="online-icon"></div>
<span>在线客服</span>
</a>
</li>
<li>
<a href="">
<div class="me-icon"></div>
<span>个人信息</span>
</a>
</li>
<li>
<a href="">
<div class="self-icon"></div>
<span>账号安全</span>
</a>
</li>
<li>
<a href="">
<div class="address-icon"></div>
<span>地址管理</span>
</a>
</li>
</ul>
</div>
<div class="splider">
<span class="draw"></span>
<span class="part-head">常见问题</span>
<span class="draw"></span>
</div>
<div class="common-problem">
<div>
<ul>
<li></li>
</ul>
</div>
<div class="table-info">
<ul>
<li>
<div class="part-info">
<p class="head">会员中心</p>
<div class="part-body">
<p>账户管理</p>
<p>密码管理</p>
</div>
</div>
</li>
<li>
<div class="part-info">
<p class="head">购物指南</p>
<div class="part-body">
<p>尺码选择</p>
<p>发票</p>
<p>商品咨询</p>
</div>
</div>
</li>
<li>
<div class="part-info">
<p class="head">支付方式</p>
<div class="part-body">
<p>在线支付</p>
<p>货到付款</p>
</div>
</div>
</li>
</ul>
<ul>
<li>
<div class="part-info">
<p class="head">配送方式</p>
<div class="part-body">
<p>配送时间</p>
<p>配送方式</p>
<p>顺丰速运</p>
<p>商品签收验收</p>
</div>
</div>
</li>
<li>
<div class="part-info">
<p class="head">售后服务</p>
<div class="part-body">
<p>退换货政策</p>
<p>退换货流程</p>
<p>退款方式时效</p>
<p>投诉与建议</p>
</div>
</div>
</li>
<li>
<div class="part-info">
<p class="head">APP常见问题</p>
<div class="part-body">
<p>iPhone版</p>
<p>Android版</p>
<p>Wap版</p>
</div>
</div>
</li>
</ul>
</div>
</div>
... ...
<ul class="nav">
{{#each menuData}}
<li class="big-category cateId-{{id}}"><span class="plus">+</span> {{text}}</li>
{{#if subsets}}
{{#each subsets}}
<li class="smll-category cateId-{{id}} parentId-{{parendId}}">
<a href="/help?id={{id}}">{{text}}</a>
</li>
{{/each}}
{{/if}}
{{/each}}
</ul>
... ...
... ... @@ -19,4 +19,5 @@ module.exports = app => {
app.use('/editorial', require('./apps/editorial')); // 资讯
app.use('/product', require('./apps/product'));
app.use('/brand', require('./apps/brand')); // 品牌
app.use('/help', require('./apps/help')); // 帮助中心
};
... ...
/**
* Created by yoho on 2016/7/25.
*/
/**
* 左侧目录切换
*/
$(document).on("click", ".big-category .plus", function () {
var $parent = $(this).parent();//当前一级分类
var className = $parent.attr("class").split(" ")[1];
var parentId = "parentId-" + className.split("-")[1];
var $child = $parent.parent().find("." + parentId);//当前子分类
if ($parent.hasClass("open")) {
$child.hide();
$(this).text("+");
$parent.removeClass("open");
} else {
$child.show();
$(this).text("-");
$parent.addClass("open");
}
});
... ...
/*详情页*/
.help-detail-info {
.total {
font-size: 20px;
margin: 30px 30px;
}
.detail-content {
margin: 30px 30px;
font-size: 16px;
.detail-problem {
padding-bottom: 10px;
}
.detail-answer {
color: #c6c6c6;
}
}
}
... ...
/*首页*/
.help-index {
padding-bottom: 30px;
background: #fff;
text-align: center;
.search-part {
padding: 88px 420px 75px;
.title {
font-size: 26px;
padding-bottom: 40px;
}
.search-keyword {
width: 300px;
height: 33px;
}
}
.splider {
margin: 20px 0;
.line {
width: 500px;
border: 1px solid ;
margin-top: 20px;
}
.part-head {
font-size: 12px;
letter-spacing: 2px;
width: 220px;
padding: 12px 80px;
border: 1px solid;
}
}
.guide {
padding: 88px 0 98px;
width: 100%;
ul {
width: 100%;
height: 50px;
li {
display: inline-block;
float: left;
width: 20%;
a div {
height: 70px;
width: 70px;
background-size: 70px 70px;
background-repeat: no-repeat;
margin-left: 80px;
margin-bottom: 10px;
}
.login-icon {
background-image: resolve('help/登录注册.png');
}
.search-icon {
background-image: resolve('help/搜索商品.png');
}
.order-icon {
background-image: resolve('help/选购下单.png');
}
.pay-icon {
background-image: resolve('help/订单支付.png');
}
.return-icon {
background-image: resolve('help/收货退货.png');
}
}
}
}
.self-help {
padding: 88px 0;
width: 100%;
ul {
width: 100%;
height: 50px;
li {
display: inline-block;
float: left;
width: 16.6%;
a div {
height: 70px;
width: 70px;
background-size: 70px 70px;
background-repeat: no-repeat;
margin-left: 66px;
margin-bottom: 10px;
}
.order-icon {
background-image: resolve('help/订单查询.png');
}
.refund-icon {
background-image: resolve('help/退换货.png');
}
.online-icon {
background-image: resolve('help/在线客服.png');
}
.me-icon {
background-image: resolve('help/个人信息.png');
}
.self-icon {
background-image: resolve('help/账号安全.png');
}
.address-icon {
background-image: resolve('help/地址管理.png');
}
}
}
}
.common-problem {
.table-info {
width: 100%;
ul {
width: 100%;
li {
width: 33.3%;
display: inline-block;
float: left;
.part-info {
margin: 20px 80px;
border: solid 1px #666666;
width: 280px;
height: 180px;
.head {
height: 40px;
line-height: 40px;
background: #666666;
color: #dedede;
}
.part-body {
padding: 30px;
p {
color: #949494;
padding-bottom: 10px;
}
}
}
}
}
}
}
}
... ...
.help-page {
padding-bottom: 30px;
background: #f5f5f5;
.help-navigation {
width: 150px;
margin-right: 10px;
background: #fff;
.title {
height: 60px;
line-height: 60px;
text-align: center;
background: #fff;
}
}
.help-main {
width: 990px;
padding: 35px 30px;
background-color: #fff;
}
}
@import "help";
@import "detail";
@import "menu";
... ...
.nav{
li{
padding: 10px 30px;
width: 200px;
font-size: 14px;
span{
border: solid #dfdfdf;
cursor: pointer;
}
}
.smll-category{
margin-left: 20px;
display: none;
}
}
... ...
... ... @@ -13,3 +13,4 @@
@import "passport/index";
@import "editorial/index";
@import "brand/brand";
@import "help/index";
... ...