服务与反馈首页，搜索页

+/**
+ * 服务与反馈
+ * <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 chat = require(`${cRoot}/chat`);
 
 
+const chatQa = require(`${cRoot}/chatQa`); // 问题搜索列表页
+
 // Your controller here
 // Your controller here
 router.get('/im/', chat.page);
 router.get('/im/', chat.page);
 
 
+router.get('/chatQaList', chatQa.qaList); // 问题搜索列表页
+router.get('/qaSearch', chatQa.qaSearch); // 问题搜索页
+
 module.exports = router;
 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>

+<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>

+
+'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/message";
 @import "chat/rating";
 @import "chat/rating";
 @import "chat/menu";
 @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;
+		}
+	}
+}