diff --git a/apps/service/controllers/chatQa.js b/apps/service/controllers/chatQa.js
index 91434b1..56b5168 100644
--- a/apps/service/controllers/chatQa.js
+++ b/apps/service/controllers/chatQa.js
@@ -43,4 +43,21 @@ exports.qaSearch = (req, res, next) => {
res.render('chat/qa-search', responseData);
};
+exports.qaDetail = (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-detail', responseData);
+};
+
diff --git a/apps/service/router.js b/apps/service/router.js
index 716b68f..bc9b5a2 100644
--- a/apps/service/router.js
+++ b/apps/service/router.js
@@ -18,5 +18,6 @@ router.get('/im/', chat.page);
router.get('/chatQaList', chatQa.qaList); // 问题搜索列表页
router.get('/qaSearch', chatQa.qaSearch); // 问题搜索页
+router.get('/qaDetail', chatQa.qaDetail); // 问题详情页
module.exports = router;
diff --git a/apps/service/views/action/chat/chat-qa.hbs b/apps/service/views/action/chat/chat-qa.hbs
index 020d4a2..c3121fc 100644
--- a/apps/service/views/action/chat/chat-qa.hbs
+++ b/apps/service/views/action/chat/chat-qa.hbs
@@ -132,31 +132,5 @@
</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"></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"></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"></i>
- </div>
- </div>
+ {{> chat/chat-gm}}
</div>
\ No newline at end of file
diff --git a/apps/service/views/action/chat/qa-detail.hbs b/apps/service/views/action/chat/qa-detail.hbs
new file mode 100644
index 0000000..2a0d293
--- /dev/null
+++ b/apps/service/views/action/chat/qa-detail.hbs
@@ -0,0 +1,15 @@
+<div class="qa-detail-c">
+ <div class="qa-c clearfix">
+ <div class="q-c clearfix">
+ <div class="pic q"></div>
+ <div class="text">购买商品时应该如何选取尺码？</div>
+ </div>
+ <div class="a-c clearfix">
+ <div class="pic a"></div>
+ <div class="text">商品来自不同国家不同品牌，尺码具有一定的差异，在商品详情页有相关的尺码信息，请在购买的时候仔细查看尺码信息，选择合适的尺码购买。注：因尺码信息来自海外官网，我们无法有实物测量，可能会有少量误差，购买时请注意
+ <img src="http://img10.static.yhbimg.com/yhb-img01/2016/11/29/10/0153a52b666c7d85a0e240ab533e86914b.jpg" />
+ </div>
+ </div>
+ </div>
+ {{> chat/chat-gm}}
+</div>
\ No newline at end of file
diff --git a/apps/service/views/action/chat/qa-search.hbs b/apps/service/views/action/chat/qa-search.hbs
index c983352..860de80 100644
--- a/apps/service/views/action/chat/qa-search.hbs
+++ b/apps/service/views/action/chat/qa-search.hbs
@@ -28,5 +28,10 @@
<i class="arr-ico iconfont"></i>
</div>
</div>
+ <div class="no-result">
+ <div class="pic"></div>
+ <p>抱歉，没有找到与“哈哈”相关的问题，</p>
+ <p>您可以换个词再试试</p>
+ </div>
<div class="fix-tip">没有相关问题，请联系<a>在线客服</a></div>
</div>
\ No newline at end of file
diff --git a/apps/service/views/partial/chat/chat-gm.hbs b/apps/service/views/partial/chat/chat-gm.hbs
new file mode 100644
index 0000000..ff7d86b
--- /dev/null
+++ b/apps/service/views/partial/chat/chat-gm.hbs
@@ -0,0 +1,29 @@
+<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"></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"></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>
+ <a href="tel:400-886-9646">400-886-9646</a>
+ </span>
+ <i class="arr-ico iconfont"></i>
+ </div>
+</div>
\ No newline at end of file
diff --git a/public/img/service/chat/a.png b/public/img/service/chat/a.png
new file mode 100644
index 0000000..df511ff
Binary files /dev/null and b/public/img/service/chat/a.png differ
diff --git a/public/img/service/chat/no-result.png b/public/img/service/chat/no-result.png
new file mode 100644
index 0000000..11a4b79
Binary files /dev/null and b/public/img/service/chat/no-result.png differ
diff --git a/public/img/service/chat/q.png b/public/img/service/chat/q.png
new file mode 100644
index 0000000..97fe12d
Binary files /dev/null and b/public/img/service/chat/q.png differ
diff --git a/public/js/service/chat-qa.page.js b/public/js/service/chat-qa.page.js
index 9469934..19871bc 100644
--- a/public/js/service/chat-qa.page.js
+++ b/public/js/service/chat-qa.page.js
@@ -27,7 +27,10 @@ $('.cancel-btn').click(
$('.get-qa').keyup(
function() {
var searchText = $(this).val();
- $('.list-group').html('<div class="common-item">' +
+ if (searchText === '') {
+ $('.list-group').empty();
+ } else {
+ $('.list-group').html('<div class="common-item">' +
'<p>111<span>' + searchText + '</span></p>' +
'<i class="arr-ico iconfont"></i>' +
'</div>' +
@@ -47,5 +50,6 @@ $('.get-qa').keyup(
'<p>555<span>' + searchText + '</span></p>' +
'<i class="arr-ico iconfont"></i>' +
'</div>');
+ }
}
);
diff --git a/public/scss/service/chat/_chatQaList.css b/public/scss/service/chat/_chatQaList.css
index 9f67bcc..38f4d33 100644
--- a/public/scss/service/chat/_chatQaList.css
+++ b/public/scss/service/chat/_chatQaList.css
@@ -1,310 +1,456 @@
.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 {
+ 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: 0;
+ 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 {
+ }
+
+ .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 {
+ 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: 0;
+ 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 {
+
+ .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;
+ }
+ }
+ }
+
+ .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-result {
+
+ .pic {
+ width: 204px;
+ height: 204px;
+ display: block;
+ margin: 90px auto 30px;
+ background-image: resolve("service/chat/no-result.png");
+ background-size: 100%;
+ }
+
+ p {
+ line-height: 45px;
+ color: #b0b0b0;
+ font-size: 24px;
+ text-align: center;
+ }
+ }
+}
+
+.qa-detail-c {
+ background-color: #f0f0f0;
+
+ .qa-c {
+ background-color: #fff;
+ width: 100%;
+ margin-bottom: 30px;
+ border-bottom: solid 1px #e0e0e0;
+ font-size: 28px;
+
+ .pic {
+ width: 70px;
+ height: 70px;
+ margin-left: 5px;
+ float: left;
+ background-position: center center;
+ background-size: 50% auto;
+ background-repeat: no-repeat;
+ }
+
+ .q-c {
+
+ .q {
+ background-image: resolve("service/chat/q.png");
+ }
+
+ .text {
+ float: left;
+ width: 675px;
+ border-bottom: solid 1px #e0e0e0;
+ padding: 20px 30px 20px 0;
+ line-height: 30px;
+ }
+ }
+
+ .a-c {
+
+ .a {
+ background-image: resolve("service/chat/a.png");
+ }
+
+ .text {
+ float: left;
+ width: 675px;
+ padding: 20px 30px 20px 0;
+ color: #b0b0b0;
+
+ img {
+ margin-top: 20px;
+ }
+ }
+ }
+ }
+
+ .list-group {
+ background-color: #fff;
+ 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;
+ }
+
+ .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;
}
- }
- }
-
- .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
+ }
+ }
+}