diff --git a/apps/service/controllers/chat.js b/apps/service/controllers/chat.js
index 63526c3..8b25650 100644
--- a/apps/service/controllers/chat.js
+++ b/apps/service/controllers/chat.js
@@ -1,7 +1,8 @@
'use strict';
-exports.page = (req, res, next) => {
+const orderModel = require('../../home/models/order');
+exports.page = (req, res, next) => {
res.locals.module = 'service';
res.locals.page = 'chat';
res.locals.pageStyle = 'service-chat';
@@ -9,3 +10,18 @@ exports.page = (req, res, next) => {
res.render('chat/index');
};
+
+exports.getOrders = (req, res, next) => {
+ orderModel.getOrders({
+ type: req.query.type || 1,
+ page: req.query.page || 1,
+ gender: req.query.gender || '1,3',
+ yh_channel: req.query.channel || 1,
+ uid: req.user.uid
+ }).then(result => {
+ res.render('chat/chat-order', {
+ layout: false,
+ orders: result
+ });
+ }).catch(next);
+};
diff --git a/apps/service/router.js b/apps/service/router.js
index bc9b5a2..54a04ed 100644
--- a/apps/service/router.js
+++ b/apps/service/router.js
@@ -15,6 +15,7 @@ const chatQa = require(`${cRoot}/chatQa`); // 问题搜索列表页
// Your controller here
router.get('/im/', chat.page);
+router.get('/getOrders', chat.getOrders);
router.get('/chatQaList', chatQa.qaList); // 问题搜索列表页
router.get('/qaSearch', chatQa.qaSearch); // 问题搜索页
diff --git a/apps/service/views/action/chat/chat-order.hbs b/apps/service/views/action/chat/chat-order.hbs
new file mode 100644
index 0000000..700ce97
--- /dev/null
+++ b/apps/service/views/action/chat/chat-order.hbs
@@ -0,0 +1,22 @@
+{{#each orders}}
+<div class="order-page">
+ <div class="order" data-id="{{orderNum}}" data-href="{{detailUrl}}">
+ <header class="header">
+ 订单编号：{{orderNum}}
+ <span class="order-status">{{orderStatus}}</span>
+ </header>
+ <section class="order-goods">
+ {{# goods}}
+ {{> order/good}}
+ {{/ goods}}
+ </section>
+ <footer class="footer">
+ 共{{count}}件商品 实付<span class="sum-cost">¥{{sumCost}}</span>
+ {{#shippingCost}}(含运费¥{{.}}){{/shippingCost}}
+ </footer>
+ <div class="send-order clearfix">
+ <button class="send-order-btn">发送订单</button>
+ </div>
+ </div>
+</div>
+{{/each}}
\ No newline at end of file
diff --git a/apps/service/views/action/chat/index.hbs b/apps/service/views/action/chat/index.hbs
index f801d23..b84bf99 100644
--- a/apps/service/views/action/chat/index.hbs
+++ b/apps/service/views/action/chat/index.hbs
@@ -33,20 +33,22 @@
<div class="menu">
<div class="icon-wrap camera">
+ <input type="file" style="position: absolute;right: -3px;top: -3px;z-index: 999;" accept="image/*">
<div class="icon"></div>
- <p class="name">拍照</p>
+ <p class="menu-name">拍照</p>
</div>
<div class="icon-wrap photo">
+ <input type="file" style="position: absolute;right: -3px;top: -3px;z-index: 999;" accept="image/*">
<div class="icon"></div>
- <p class="name">相册</p>
+ <p class="menu-name">相册</p>
</div>
<div class="icon-wrap order">
<div class="icon"></div>
- <p class="name">订单</p>
+ <p class="menu-name">订单</p>
</div>
<div class="icon-wrap broad-order">
<div class="icon"></div>
- <p class="name">境外订单</p>
+ <p class="menu-name">境外订单</p>
</div>
</div>
</footer>
diff --git a/apps/service/views/partial/order-list.hbs b/apps/service/views/partial/order-list.hbs
index 7d2d802..cccf9cf 100644
--- a/apps/service/views/partial/order-list.hbs
+++ b/apps/service/views/partial/order-list.hbs
@@ -1,10 +1,14 @@
<div id="order-list-wrap">
-<!--im 头部-->
-<header id="chat-header" class="yoho-header">
- <a href="{{#if backUrl}}{{backUrl}}{{^}}javascript:history.go(-1);{{/if}}" class="iconfont nav-back"></a>
- <div class="header-status">
- <span class="service-name">订单列表</span>
+ <!--im 头部-->
+ <header id="chat-header" class="yoho-header">
+ <a href="#" class="iconfont nav-back order-back"></a>
+ <div class="header-status">
+ <span class="service-name">订单列表</span>
+ </div>
+ </header>
+
+ <div id="order-container" class="order-container">
+ <div class="orders"></div>
</div>
-</header>
</div>
\ No newline at end of file
diff --git a/apps/service/views/partial/order.hbs b/apps/service/views/partial/order.hbs
deleted file mode 100644
index e69de29..0000000
--- a/apps/service/views/partial/order.hbs
+++ /dev/null
diff --git a/public/js/service/chat/index.js b/public/js/service/chat/index.js
index 8febcf6..1d8818d 100644
--- a/public/js/service/chat/index.js
+++ b/public/js/service/chat/index.js
@@ -8,7 +8,7 @@
import {time} from './time';
import {tip} from './tip';
import {ChatRole, Customer, Employee, Robot} from './role';
-import {RatingView, LeaveMSGView} from './view';
+import {RatingView, LeaveMSGView, OrderListView} from './view';
const chatBox = $('#chat-window');
@@ -73,6 +73,8 @@ let leaveMsg = new LeaveMSGView();
leaveMsg.init();
+// 订单
+let orderList = new OrderListView();
// 图片放大
$('#chat-window').on('click', '.chat-image', function() {
@@ -88,13 +90,6 @@ $('#chat-window').on('click', '.chat-image', function() {
});
-// 订单
-$('body').on('touchstart', '.menu .order', function() {
- $('#chat-main-wrap').hide();
- $('#order-list-wrap').show();
-});
-
-
diff --git a/public/js/service/chat/view.js b/public/js/service/chat/view.js
index 0810c58..9063abd 100644
--- a/public/js/service/chat/view.js
+++ b/public/js/service/chat/view.js
@@ -1,3 +1,8 @@
+const loading = require('../../plugin/loading'),
+ lazyLoad = require('yoho-jquery-lazyload');
+
+require('../../common');
+
/*
留言view
*/
@@ -79,7 +84,85 @@ class RatingView {
/*
订单列表view
*/
-class OrderListView {}
+class OrderListView {
+ constructor() {
+ this.bindEvent();
+ this.order = {
+ page: 0,
+ end: false
+ };
+ this.$curContainer = $('#order-container').children('.orders:not(.hide)');
+ this.getOrder(this);
+ }
+
+ bindEvent() {
+ // 订单
+ $('body').on('touchstart', '.menu .order', function() {
+ $('#chat-main-wrap').hide();
+ $('#order-list-wrap').show();
+
+ $('.order-back').on('click', function() {
+ $('#order-list-wrap').hide();
+ $('#chat-main-wrap').show();
+ });
+ });
+ }
+
+ getOrder(self, cb, option) {
+ var opt = {
+ type: 1,
+ page: self.order.page + 1
+ };
+
+ var show = option && !option.noLoadingMask;
+
+ if (this.inAjax) {
+ return;
+ }
+
+ this.inAjax = true;
+ show && loading.showLoadingMask();
+
+ $.ajax({
+ type: 'GET',
+ url: '/service/getOrders',
+ data: opt,
+ success: function(data) {
+ var num;
+
+ if (data) {
+ self.order.page = opt.page;
+
+ if (opt.page === 1) {
+ self.$curContainer.html(data);
+ lazyLoad(self.$curContainer.find('.lazy'), {
+ try_again_css: 'order-failure'
+ });
+ } else {
+ num = self.$curContainer.children('.order').length;
+ self.$curContainer.append(data);
+
+ // lazyload
+ lazyLoad(self.$curContainer.children('.order:gt(' + (num - 1) + ')').find('.lazy'), {
+ try_again_css: 'order-failure'
+ });
+ }
+
+ window.rePosFooter(); // 重新计算底部位置
+ } else {
+ if (opt.page > 1) {
+ return;
+ }
+ self.$curContainer.html('<div class="no-order"><div class="icon"></div><span>你还没有订单!</span><a class="walk-way" href="//m.yohobuy.com/product/new">随便逛逛</a></div>');
+ self.order.end = true;
+ }
+
+ this.inAjax = false;
+ show && loading.hideLoadingMask();
+ }
+ });
+ }
+}
@@ -87,4 +170,4 @@ class ChatView {
}
-export {RatingView, LeaveMSGView};
+export {RatingView, LeaveMSGView, OrderListView};
diff --git a/public/scss/service/chat/_menu.css b/public/scss/service/chat/_menu.css
index 7798a78..8deaa84 100644
--- a/public/scss/service/chat/_menu.css
+++ b/public/scss/service/chat/_menu.css
@@ -5,6 +5,7 @@
}
.icon-wrap {
+ position: relative;
display: inline-block;
margin-left: 50px;
@@ -25,7 +26,7 @@
background-repeat: no-repeat;
}
- .name {
+ .menu-name {
width: 120px;
text-align: center;
color: #b0b0b0;
@@ -48,4 +49,12 @@
.broad-order .icon {
background-image: resolve("service/chat/broad-order.png");
}
+
+ .camera input,
+ .photo input {
+ display: block;
+ height: 120px;
+ width: 120px;
+ opacity: 0;
+ }
}
diff --git a/public/scss/service/chat/_order-list.css b/public/scss/service/chat/_order-list.css
index 181101e..3bb47f2 100644
--- a/public/scss/service/chat/_order-list.css
+++ b/public/scss/service/chat/_order-list.css
@@ -1,3 +1,24 @@
#order-list-wrap {
display: none;
+ background: #f0f0f0;
+}
+
+.order-page {
+ .send-order {
+ border-top: 1px solid #e0e0e0;
+ padding: 30px;
+ }
+
+ .send-order-btn {
+ display: inline-block;
+ float: right;
+ height: 60px;
+ width: 145px;
+ line-height: 60px;
+ text-align: center;
+ font-size: 28px;
+ color: #fff;
+ background: #d0021b;
+ border-radius: 5PX;
+ }
}