fe / yohobuywap-node · Commits

Go to a project

Authored by lijing
Commit ddacbe7ffe6553aeccea6d6f4042879255f90125 1 parent a55b70a3

服务与反馈首页，搜索页

Inline Side-by-side
Showing 16 changed files with 607 additions and 0 deletions
/**
* 服务与反馈
* <jing.li@yoho.cn>
* 2016/11/29
*/
'use strict';
const headerModel = require('../../../doraemon/models/header'); // 头部model
exports.qaList = (req, res, next) => {
let headerData = headerModel.setNav({
navTitle: '服务与反馈'
});
let responseData = {
pageHeader: headerData,
module: 'service',
page: 'chat-qa',
title: 'Yoho!Buy有货 | 潮流购物逛不停',
width750: true,
pageFooter: true
};
res.render('chat/chat-qa', responseData);
};
exports.qaSearch = (req, res, next) => {
let headerData = headerModel.setNav({
navTitle: '服务与反馈'
});
let responseData = {
pageHeader: headerData,
module: 'service',
page: 'chat-qa',
title: 'Yoho!Buy有货 | 潮流购物逛不停',
width750: true
};
res.render('chat/qa-search', responseData);
};
... ...
... ... @@ -11,7 +11,12 @@ const cRoot = './controllers';
const chat = require(`${cRoot}/chat`);
const chatQa = require(`${cRoot}/chatQa`); // 问题搜索列表页
// Your controller here
router.get('/im/', chat.page);
router.get('/chatQaList', chatQa.qaList); // 问题搜索列表页
router.get('/qaSearch', chatQa.qaSearch); // 问题搜索页
module.exports = router;
... ...
<div class="chat-qa-c">
<div class="search-c">
<a href="./qaSearch">
<i class="search-icon iconfont">&#xe60f;</i>
<input type="text" placeholder="有问题？点我搜搜看吧" readonly="readonly" / >
</a>
</div>
<div class="list-title">帮助中心</div>
<div class="list-group">
<div class="list clearfix open-down">
<i class="order-ico icon"></i>
<div>
<p class="title">订单查询</p>
<p class="tip">订单修改、取消订单、地址修改</p>
</div>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div class="down-item">
<div>
<p>发货要多长时间？</p>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div>
<p>我的订单为何不能货到付款？</p>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div>
<p>学生认证怎么操作？</p>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div>
<p>分期付款怎么操作？</p>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div>
<p>你们的商品是正品吗？</p>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
</div>
<div class="list clearfix open-down">
<i class="car-ico icon"></i>
<div>
<p class="title">物流问题</p>
<p class="tip">物流费用、时效、跟踪</p>
</div>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div class="down-item">
<div>
<p>发货要多长时间？</p>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
</div>
<div class="list clearfix open-down">
<i class="pay-ico icon"></i>
<div>
<p class="title">支付问题</p>
<p class="tip">分期付款、学生价</p>
</div>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div class="down-item">
<div>
<p>发货要多长时间？</p>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
</div>
<div class="list clearfix open-down">
<i class="reback-ico icon"></i>
<div>
<p class="title">售后问题</p>
<p class="tip">退货、换货</p>
</div>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div class="down-item">
<div>
<p>发货要多长时间？</p>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
</div>
<div class="list clearfix open-down">
<i class="acc-ico icon"></i>
<div>
<p class="title">账户问题</p>
<p class="tip">修改信息、地址管理、账户绑定</p>
</div>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div class="down-item">
<div>
<p>发货要多长时间？</p>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
</div>
<div class="list clearfix open-down">
<i class="good-ico icon"></i>
<div>
<p class="title">商品问题</p>
<p class="tip">正品、尺码、库存</p>
</div>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div class="down-item">
<div>
<p>发货要多长时间？</p>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
</div>
</div>
<div class="list-title">常见问题</div>
<div class="list-group">
<div class="common-item">
<p>发货要多长时间？</p>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div class="common-item">
<p>我的订单为何不能货到付款？</p>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div class="common-item">
<p>学生认证怎么操作？</p>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div class="common-item">
<p>分期付款怎么操作？</p>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div class="common-item">
<p>你们的商品是正品吗？</p>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
</div>
<div class="list-title">没有解决问题</div>
<div class="list-group">
<div class="list clearfix">
<i class="gm-ico icon"></i>
<div>
<p class="title">在线客服</p>
<p class="tip">服务时间9:00－22:30</p>
</div>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div class="list clearfix">
<i class="advice-ico icon"></i>
<div>
<p class="title">意见反馈</p>
<p class="tip">界面问题、功能问题</p>
</div>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div class="list clearfix">
<i class="tel-ico icon"></i>
<div>
<p class="title">热线客服</p>
<p class="tip">服务时间9:00－22:30</p>
</div>
<span>400-886-9646</span>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
</div>
</div>
\ No newline at end of file
... ...
<div class="qa-search-c">
<div class="search-c">
<div>
<i class="search-icon iconfont">&#xe60f;</i>
<input class="get-qa" type="text" placeholder="有问题？点我搜搜看吧" / >
</div>
<a class="cancel-btn">取消</a>
</div>
<div class="list-group">
<div class="common-item">
<p>发货要多长时间？</p>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div class="common-item">
<p>我的订单为何不能货到付款？</p>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div class="common-item">
<p>学生认证怎么操作？</p>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div class="common-item">
<p>分期付款怎么操作？</p>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
<div class="common-item">
<p>你们的商品是正品吗？</p>
<i class="arr-ico iconfont">&#xe604;</i>
</div>
</div>
<div class="fix-tip">没有相关问题，请联系<a>在线客服</a></div>
</div>
\ No newline at end of file
... ...
'use strict';
require('../common');
$('.list-group div').on('touchstart',
function() {
$(this).addClass('highlight');
}).on('touchend touchcancel',
function() {
$(this).removeClass('highlight');
}
);
$('.open-down').click(
function() {
$(this).next('.down-item').toggle().siblings('.down-item').hide();
}
);
$('.cancel-btn').click(
function() {
window.history.go(-1);
}
);
$('.get-qa').keyup(
function() {
var searchText = $(this).val();
$('.list-group').html('<div class="common-item">' +
'<p>111<span>' + searchText + '</span></p>' +
'<i class="arr-ico iconfont">&#xe604;</i>' +
'</div>' +
'<div class="common-item">' +
'<p>222<span>' + searchText + '</span></p>' +
'<i class="arr-ico iconfont">&#xe604;</i>' +
'</div>' +
'<div class="common-item">' +
'<p>333<span>' + searchText + '</span></p>' +
'<i class="arr-ico iconfont">&#xe604;</i>' +
'</div>' +
'<div class="common-item">' +
'<p>444<span>' + searchText + '</span></p>' +
'<i class="arr-ico iconfont">&#xe604;</i>' +
'</div>' +
'<div class="common-item">' +
'<p>555<span>' + searchText + '</span></p>' +
'<i class="arr-ico iconfont">&#xe604;</i>' +
'</div>');
}
);
... ...
... ... @@ -6,3 +6,4 @@
@import "chat/message";
@import "chat/rating";
@import "chat/menu";
@import "chat/chatQaList";
... ...
.chat-qa-c {
width: 100%;
position: relative;
.search-c {
height: 92px;
padding-top: 17px;
border-bottom: solid 1px #e0e0e0;
a {
display: block;
width: 718px;
height: 57px;
background-color: #eaebed;
margin: 0 auto;
border-radius: 10px;
padding: 10px 30px;
.search-icon {
color: #8e8e93;
font-size: 30px;
}
input {
height: 37px;
line-height: 37px;
border: 0px;
color: #8e8e93;
font-size: 28px;
background: none;
width: 600px;
padding-left: 20px;
}
}
}
.list-title {
font-size: 28px;
color: #b0b0b0;
width: 100%;
height: 70px;
line-height: 70px;
padding: 0 30px;
background-color: #f0f0f0;
}
.list-group {
border-top: solid 1px #e0e0e0;
border-bottom: solid 1px #e0e0e0;
.highlight {
background-color: #eee;
}
.list {
min-height: 120px;
position: relative;
.icon {
width: 100px;
height: 120px;
float: left;
background-repeat: no-repeat;
background-size: auto 50%;
background-position: center center;
}
.order-ico {
background-image: resolve("service/chat/order-ico.png");
}
.car-ico {
background-image: resolve("service/chat/car-ico.png");
}
.pay-ico {
background-image: resolve("service/chat/pay-ico.png");
}
.reback-ico {
background-image: resolve("service/chat/reback-ico.png");
}
.acc-ico {
background-image: resolve("service/chat/acc-ico.png");
}
.good-ico {
background-image: resolve("service/chat/good-ico.png");
}
.gm-ico {
background-image: resolve("service/chat/gm-ico.png");
}
.advice-ico {
background-image: resolve("service/chat/advice-ico.png");
}
.tel-ico {
background-image: resolve("service/chat/tel-ico.png");
}
.arr-ico {
line-height: 120px;
color: #e1e1e1;
font-size: 25px;
position: absolute;
top: 0;
right: 30px;
}
div {
min-height: 120px;
padding: 25px 80px 20px 0;
width: 650px;
float: left;
border-bottom: solid 1px #e0e0e0;
.title {
line-height: 40px;
font-size: 32px;
}
.tip {
line-height: 35px;
font-size: 24px;
color: #b0b0b0;
}
}
span {
color: #444;
font-size: 28px;
position: absolute;
top: 0;
right: 70px;
line-height: 120px;
}
&:last-child div {
border-bottom: 0;
}
}
.active div{
border-bottom: 0;
}
.down-item {
display: none;
margin-top: -1px;
border-bottom: solid 1px #e0e0e0;
div {
padding: 0 30px;
position: relative;
line-height: 90px;
border-top: solid 1px #e0e0e0;
background-color: #f0f0f0;
p {
font-size: 32px;
color: #444;
}
.arr-ico {
line-height: 90px;
color: #e1e1e1;
font-size: 25px;
position: absolute;
top: 0;
right: 30px;
}
}
}
.common-item {
position: relative;
line-height: 90px;
padding: 0 30px;
border-bottom: solid 1px #e6e6e6;
p {
font-size: 32px;
width: 650px;
}
.arr-ico {
line-height: 90px;
color: #e1e1e1;
font-size: 25px;
position: absolute;
top: 0;
right: 30px;
}
&:last-child {
border-bottom: 0;
}
}
}
}
.qa-search-c {
width: 100%;
position: relative;
.search-c {
height: 92px;
padding-top: 17px;
border-bottom: solid 1px #e0e0e0;
div {
display: block;
width: 600px;
height: 57px;
background-color: #eaebed;
border-radius: 10px;
padding: 10px 30px;
margin-left: 30px;
float: left;
.search-icon {
color: #8e8e93;
font-size: 30px;
}
input {
height: 37px;
line-height: 37px;
border: 0px;
color: #8e8e93;
font-size: 28px;
background: none;
width: 480px;
padding-left: 20px;
}
}
.cancel-btn {
float: left;
line-height: 57px;
color: #b0b0b0;
margin-left: 20px;
font-size: 32px;
}
}
.list-group {
border-bottom: solid 1px #e0e0e0;
.highlight {
background-color: #eee;
}
.common-item {
position: relative;
line-height: 90px;
padding: 0 30px;
border-bottom: solid 1px #e6e6e6;
p {
font-size: 32px;
width: 650px;
span {
color: #d0021b;
}
}
.arr-ico {
line-height: 90px;
color: #e1e1e1;
font-size: 25px;
position: absolute;
top: 0;
right: 30px;
}
&:last-child {
border-bottom: 0;
}
}
}
.fix-tip {
width: 100%;
height: 70px;
line-height: 70px;
background-color: #000;
color: #fff;
position: fixed;
bottom: 0;
left: 0;
right: 0;
text-align: center;
font-size: 24px;
z-index: 9;
opacity: 0.8;
a {
background-color: #f00;
color: #fff;
padding: 3px 8px;
border-radius: 5px;
margin-left: 20px;
}
}
}
\ No newline at end of file
... ...