fe / yohoblk-wap · Commits

Go to a project

Authored by 王洪广
Commit fb75ae0a313f97ef2f4cd7c1f7d806e73d89de5e 1 parent 140e6f64

增加订单、yoho币、订单详情页面

Inline Side-by-side
Showing 14 changed files with 757 additions and 168 deletions
@@ -8,8 +8,6 @@ const homeModel = require('../models/index'); @@ -8,8 +8,6 @@ const homeModel = require('../models/index');
8 const _ = require('lodash'); 8 const _ = require('lodash');
9 const helpers = global.yoho.helpers; 9 const helpers = global.yoho.helpers;
10 10
11 -// const model_order = require('../models/order')  
12 -  
13 /** 11 /**
14 * 个人中心主页 12 * 个人中心主页
15 */ 13 */
@@ -113,34 +111,6 @@ const component = { @@ -113,34 +111,6 @@ const component = {
113 module: 'home', 111 module: 'home',
114 page: 'index' 112 page: 'index'
115 }); 113 });
116 - },  
117 - order: (req, res) => {  
118 - let type = req.query.type;  
119 -  
120 - res.render('order', {  
121 - module: 'home',  
122 - page: 'order',  
123 - type: type  
124 - });  
125 - },  
126 - orderDetail: (req, res) => {  
127 - let orderCode = req.query.ordercode;  
128 -  
129 - res.render('order-detail', {  
130 - module: 'home',  
131 - page: 'order',  
132 - orderCode: orderCode  
133 - });  
134 - },  
135 - getOrderData: (req, res) => {  
136 - // let param = Object.assign({uid: req.user.uid}, req.query);  
137 - res.json({});  
138 - },  
139 - coin: (req, res) => {  
140 - res.render('coin', {  
141 - module: 'home',  
142 - page: 'order'  
143 - });  
144 } 114 }
145 }; 115 };
146 116
  1 +/**
  2 + * 订单相关操作.
  3 + * @author hgwang
  4 + * @date 2016-07-22
  5 + */
  6 +'use strict';
  7 +const orderModel = require('../models/order');
  8 +const notLoginCode = 400;
  9 +const notLoginTip = '抱歉，您暂未登录！';
  10 +const testUid = 8050378;// 测试uid
  11 +const isBLK = 1;
  12 +
  13 +const order = {
  14 + orders: (req, res) => {
  15 + let type = req.query.type;
  16 +
  17 + res.render('order', {
  18 + module: 'home',
  19 + page: 'order',
  20 + type: type
  21 + });
  22 + },
  23 + orderDetail: (req, res) => {
  24 + let orderCode = req.query.orderCode;
  25 + let uid = req.user.uid;
  26 +
  27 + uid = testUid; // 测试uid
  28 +
  29 + if (!uid && req.xhr) {
  30 + return res.json({
  31 + code: notLoginCode,
  32 + message: notLoginTip
  33 + });
  34 + }
  35 +
  36 + res.render('order-detail', {
  37 + module: 'home',
  38 + page: 'order-detail',
  39 + orderCode: orderCode
  40 + });
  41 + },
  42 + getOrderData: (req, res) => {
  43 + let uid = req.query.id;
  44 + let page = req.query.page;
  45 + let type = req.query.type;
  46 + let limit = req.query.limit;
  47 + let isend = true;
  48 +
  49 + uid = testUid;
  50 + if (!uid && req.xhr) {
  51 + return res.json({
  52 + code: notLoginCode,
  53 + message: notLoginTip
  54 + });
  55 + }
  56 + let param = {
  57 + uid: uid,
  58 + page: page,
  59 + type: type,
  60 + limit: limit,
  61 + app_type: isBLK
  62 + };
  63 +
  64 + orderModel.getOrders(param).then(result => {
  65 + if (result && page < result.page_total) {
  66 + isend = false;
  67 + }
  68 + return res.json(Object.assign({isend: isend}, result));
  69 + });
  70 + },
  71 + getOrderDetailData: (req, res) => {
  72 + let orderCode = req.query.orderCode;
  73 + let uid = req.user.uid;
  74 +
  75 + uid = testUid; // 测试uid
  76 +
  77 + if (!uid && req.xhr) {
  78 + return res.json({
  79 + code: notLoginCode,
  80 + message: notLoginTip
  81 + });
  82 + }
  83 +
  84 + orderModel.getOrderDetail(uid, orderCode).then(result => {
  85 + return res.json(result);
  86 + });
  87 + },
  88 + cancelOrder: (req, res) => {
  89 + let orderCode = req.query.orderCode;
  90 + let reasonId = req.query.reasonId;
  91 + let reason = req.query.reason;
  92 +
  93 + orderModel.cancelOrder(orderCode, reasonId, reason).then(result => {
  94 + return res.json(result);
  95 + });
  96 +
  97 + },
  98 + confirmOrder: (req, res) => {
  99 + let orderode = req.query.orderCode;
  100 +
  101 + orderModel.confirmOrder(orderode).then(result => {
  102 + return res.json(result);
  103 + });
  104 + },
  105 + deleteOrder: (req, res) => {
  106 + let orderCode = req.query.orderCode;
  107 + let uid = req.user.uid;
  108 +
  109 + uid = testUid; // 测试uid
  110 +
  111 + if (!uid && req.xhr) {
  112 + return res.json({
  113 + code: notLoginCode,
  114 + message: notLoginTip
  115 + });
  116 + }
  117 +
  118 + orderModel.deleteOrder(orderCode, uid).then(result => {
  119 + return res.json(result);
  120 + });
  121 + },
  122 + coin: (req, res) => {
  123 + res.render('coin', {
  124 + module: 'home',
  125 + page: 'order'
  126 + });
  127 + }
  128 +};
  129 +
  130 +module.exports = order;
@@ -5,7 +5,87 @@ @@ -5,7 +5,87 @@
5 */ 5 */
6 'use strict'; 6 'use strict';
7 7
8 -const api = global.yoho.ServiceAPI;  
9 -const Promise = require('bluebird');  
10 -const co = Promise.coroutine; 8 +const api = global.yoho.API;
11 9
  10 +//const serviceAPI = global.yoho.ServiceAPI;
  11 +const camelCase = global.yoho.camelCase;
  12 +
  13 +/**
  14 + * 获取订单列表数据
  15 + * @param param
  16 + * uid uid,
  17 + * page 页数
  18 + * type 订单类型 1:全部订单,2:待付款,3:待发货,4:待收货,5:待评论/成功订单,7:失败/取消
  19 + * limit 每页大小
  20 + * app_type 0:yohobuy,1:blk
  21 + * @returns {Promise.<T>|*}
  22 + */
  23 +exports.getOrders = (param) => {
  24 + param = Object.assign({method: 'app.SpaceOrders.get'}, param);
  25 +
  26 + return api.get('', param).then(camelCase);
  27 +};
  28 +
  29 +/**
  30 + * 获取订单详情
  31 + * @param uid
  32 + * @param orderCode
  33 + * @returns {Promise.<T>|*}
  34 + */
  35 +exports.getOrderDetail = (uid, orderCode) => {
  36 + return api.get('', {
  37 + method: 'app.SpaceOrders.detail',
  38 + order_code: orderCode,
  39 + uid: uid
  40 + }).then(camelCase);
  41 +};
  42 +
  43 +/**
  44 + * 取消订单
  45 + * @param orderCode
  46 + * @param reasonId
  47 + * @param reason
  48 + * @returns {Promise.<T>|*}
  49 + */
  50 +exports.cancelOrder = (orderCode, reasonId, reason) => {
  51 +
  52 + return api.get('', {
  53 + method: 'app.SpaceOrders.close',
  54 + order_code: orderCode,
  55 + reason_id: reasonId,
  56 + reason: reason
  57 + }).then(result => {
  58 + return result;
  59 + });
  60 +};
  61 +
  62 +/**
  63 + * 确认订单
  64 + * @param orderCode 订单号
  65 + * @returns {Promise.<T>|*}
  66 + */
  67 +exports.confirmOrder = (orderCode) => {
  68 +
  69 + return api.get('', {
  70 + method: 'app.SpaceOrders.confirm',
  71 + order_code: orderCode
  72 + }).then(result => {
  73 + return result;
  74 + });
  75 +};
  76 +
  77 +/**
  78 + * 删除订单
  79 + * @param orderCode 订单号
  80 + * @param uid uid
  81 + * @returns {Promise.<T>|*}
  82 + */
  83 +exports.deleteOrder = (orderCode, uid) => {
  84 + return api.get('', {
  85 + method: 'app.SpaceOrders.delOrderByCode',
  86 + order_code: orderCode,
  87 + uid: uid
  88 + }).then(result => {
  89 + return result;
  90 + });
  91 +};
@@ -11,14 +11,22 @@ const cRoot = './controllers'; @@ -11,14 +11,22 @@ const cRoot = './controllers';
11 const home = require(cRoot); 11 const home = require(cRoot);
12 const favorite = require(cRoot + '/favorite'); 12 const favorite = require(cRoot + '/favorite');
13 const refund = require(cRoot + '/refund'); 13 const refund = require(cRoot + '/refund');
  14 +const order = require(cRoot + '/order');
14 15
15 const router = expressRouter(); 16 const router = expressRouter();
16 17
17 // Your controller here 18 // Your controller here
18 router.get('/', home.index); // 个人中心主页 19 router.get('/', home.index); // 个人中心主页
19 -router.get('/orders', home.order); // 订单  
20 -router.get('/mycurrency', home.coin); // yoho币  
21 -router.get('/orderDetail', home.orderDetail); // yoho币 20 +router.get('/orders', order.orders); // 订单
  21 +router.get('/mycurrency', order.coin); // yoho币
  22 +router.get('/order-detail', order.orderDetail); // 订单详情
  23 +router.get('/get-orders', order.getOrderData); // 获取订单数据
  24 +router.get('/get-order', order.getOrderDetailData); // 获取订单详情数据
  25 +router.get('/order-detail', order.orderDetail); // 订单详情
  26 +router.post('/cancel-order', order.cancelOrder); // 取消订单
  27 +router.post('/delete-order', order.deleteOrder); // 删除订单
  28 +router.post('/confirm-order', order.confirmOrder); // 确认订单
  29 +
22 30
23 router.get('/help', home.help); // 帮助中心列表页 31 router.get('/help', home.help); // 帮助中心列表页
24 router.get('/help-detail', home.helpDetail); // 帮助中心详情页 32 router.get('/help-detail', home.helpDetail); // 帮助中心详情页
1 -<div class="order-detail">  
2 - <div class="order-status">  
3 - <p>待收货</p>  
4 - </div>  
5 - <!--<div class="order-status">-->  
6 - <!--<p>待收货</p>-->  
7 - <!--<p>订单将被取消</p>-->  
8 - <!--</div>-->  
9 - <div class="order-address">  
10 - <p><span>Daisuke Obana</span><span>13160071768</span></p>  
11 - <p>江苏省南京市建邺区 <br>嘉陵江东街18号国家广告产业园5栋18楼产品部</p>  
12 - </div>  
13 - <div class="order-code">  
14 - <p>订单号:523243435</p>  
15 - <p>下单时间:2016.1.23 12:31:00</p>  
16 - </div>  
17 - <div class="order-goods">  
18 - <ul>  
19 - <li class="goods-info">  
20 - <div class="img-box">  
21 - <img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">  
22 - <label>赠品</label>  
23 - </div>  
24 - <div class="goods-detail">  
25 - <p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>  
26 - <p class="size">  
27 - <span>颜色:黑色</span>  
28 - <span>尺码:XL</span>  
29 - </p>  
30 - </div>  
31 - <div class="goods-price">  
32 - <p>&yen;6289.00</p>  
33 - <p>×1</p>  
34 - </div>  
35 - </li>  
36 - <li class="goods-info">  
37 - <div class="img-box">  
38 - <img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">  
39 - </div>  
40 - <div class="goods-detail">  
41 - <p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>  
42 - <p class="size">  
43 - <span>颜色:黑色</span>  
44 - <span>尺码:XL</span>  
45 - </p>  
46 - </div>  
47 - <div class="goods-price">  
48 - <p>&yen;6289.00</p>  
49 - <p>×1</p>  
50 - </div>  
51 - </li>  
52 - <li class="goods-info">  
53 - <div class="img-box">  
54 - <img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">  
55 - </div>  
56 - <div class="goods-detail">  
57 - <p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>  
58 - <p class="size">  
59 - <span>颜色:黑色</span>  
60 - <span>尺码:XL</span>  
61 - </p>  
62 - </div>  
63 - <div class="goods-price">  
64 - <p>&yen;6289.00</p>  
65 - <p>×1</p>  
66 - </div>  
67 - </li>  
68 - </ul>  
69 - </div>  
70 - <div class="order-amount">  
71 - <ul>  
72 - <li><label>商品：</label><span>&yen;20676.00</span></li>  
73 - <li><label>YOHO币：</label><span>&yen;32.12</span></li>  
74 - <li><label>运费：</label><span>&yen;0</span></li>  
75 - <li><label>总计：</label><span>&yen;20808.12</span></li>  
76 - </ul>  
77 - </div>  
78 - <div class="order-button">  
79 - <button>查看物流</button>  
80 - <button class="black">确认收货</button>  
81 - <button class="normal">确认收货</button>  
82 - </div> 1 +<div class="order-detail" id="order-detail">
  2 + <order-detail></order-detail>
  3 + <input type="hidden" id="order-code" value="{{orderCode}}">
83 </div> 4 </div>
1 <div class="order-wrapper" id="home-order-list"> 1 <div class="order-wrapper" id="home-order-list">
2 <Order></Order> 2 <Order></Order>
3 - <input type="hidden" value="{{type}}"> 3 + <input type="hidden" value="{{type}}" id="order-type">
4 </div> 4 </div>
@@ -53,3 +53,60 @@ Vue.filter('clothingGenderIdentity', (value)=> { @@ -53,3 +53,60 @@ Vue.filter('clothingGenderIdentity', (value)=> {
53 Vue.filter('brandUrl', (value)=> { 53 Vue.filter('brandUrl', (value)=> {
54 return `/brand?domain=${value}`; 54 return `/brand?domain=${value}`;
55 }); 55 });
  56 +
  57 +/**
  58 + * 订单状态
  59 + * @example
  60 + * {value | order}
  61 + * 状态 0:待付款,1-3:待发货,4-5:待收货(0:未付款,1:已付款,2:备货中,3:配货中,4:已发货,5:运输中,6:已完成)
  62 + */
  63 +Vue.filter('convertOrderState', (value) => {
  64 + let stateTxt = '';
  65 +
  66 + if (value !== undefined) {
  67 + value = parseInt(value);
  68 + }
  69 + switch (value) {
  70 + case 0:
  71 + stateTxt = '待付款';
  72 + break;
  73 + case 1:
  74 + stateTxt = '待发货';
  75 + break;
  76 + case 2:
  77 + stateTxt = '待发货';
  78 + break;
  79 + case 3:
  80 + stateTxt = '待发货';
  81 + break;
  82 + case 4:
  83 + stateTxt = '待收货';
  84 + break;
  85 + case 5:
  86 + stateTxt = '待发货';
  87 + break;
  88 + case 6:
  89 + stateTxt = '已完成';
  90 + break;
  91 + }
  92 + return stateTxt;
  93 +});
  94 +
  95 +/**
  96 + * 转换时间
  97 + * yyyy-MM-dd hh:mm:ss
  98 + */
  99 +Vue.filter('convertTime', (value) => {
  100 + if (value === undefined) {
  101 + return;
  102 + }
  103 + let date = new Date(parseFloat(value) * 1000);
  104 + let Y = date.getFullYear() + '-';
  105 + let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  106 + let D = date.getDate() + ' ';
  107 + let h = date.getHours() + ':';
  108 + let m = date.getMinutes() + ':';
  109 + let s = date.getSeconds();
  110 +
  111 + return Y + M + D + h + m + s;
  112 +});
  1 +/**
  2 + * order-detail.page.js.
  3 + * @author hgwang
  4 + * @date 2016-07-23
  5 + */
  6 +'use strict';
  7 +
  8 +const Vue = require('yoho-vue');
  9 +const OrderDetail = require('home/order-detail.vue');
  10 +
  11 +require('common/vue-filter');
  12 +
  13 +new Vue({
  14 + el: '#order-detail',
  15 + data: {
  16 + orderCode: document.getElementById('order-code').value
  17 + },
  18 + components: {
  19 + OrderDetail
  20 + }
  21 +});
@@ -7,9 +7,17 @@ @@ -7,9 +7,17 @@
7 7
8 const Vue = require('yoho-vue'); 8 const Vue = require('yoho-vue');
9 const Order = require('home/order.vue'); 9 const Order = require('home/order.vue');
  10 +const infiniteScroll = require('yoho-vue-infinite-scroll');
  11 +
  12 +Vue.use(infiniteScroll);
  13 +
  14 +require('common/vue-filter');
10 15
11 new Vue({ 16 new Vue({
12 el: '#home-order-list', 17 el: '#home-order-list',
  18 + data: {
  19 + type: document.getElementById('order-type').value
  20 + },
13 components: { 21 components: {
14 Order 22 Order
15 } 23 }
@@ -3,8 +3,167 @@ @@ -3,8 +3,167 @@
3 @import "feedback"; 3 @import "feedback";
4 @import "fav"; 4 @import "fav";
5 @import "about-us"; 5 @import "about-us";
6 -@import "order";  
7 @import "coin"; 6 @import "coin";
8 @import "logistics"; 7 @import "logistics";
9 8
10 -/* @import "order-detail"; */ 9 +.my-page {
  10 + color: #444;
  11 + background: #f0f0f0;
  12 +
  13 + a {
  14 + color: #000;
  15 + }
  16 +
  17 + .user-info {
  18 + display: block;
  19 + position: relative;
  20 + padding: 0 30px;
  21 + color: #000;
  22 + font-size: 34px;
  23 + line-height: 138px;
  24 + height: 469px;
  25 + background-size: cover;
  26 + background: resolve("home/header-bg.png");
  27 + text-align: center;
  28 +
  29 + .user-avatar {
  30 + display: inline-block;
  31 + position: relative;
  32 + top: 90px;
  33 + width: 200px;
  34 + height: 200px;
  35 + border-radius: 50%;
  36 + border: 6px solid #a7a8a9;
  37 + background: resolve("home/user-icon.png");
  38 + background-size: 100%;
  39 + }
  40 +
  41 + .username {
  42 + display: inline-block;
  43 + padding: 0 16px;
  44 + text-overflow: ellipsis;
  45 + overflow: hidden;
  46 + white-space: nowrap;
  47 + font-size: 32px;
  48 + max-width: 260px;
  49 + }
  50 + }
  51 +
  52 + .login-btn {
  53 + display: inline-block;
  54 + top: 40px;
  55 + left: 194px;
  56 + width: 244px;
  57 + height: 82px;
  58 + line-height: 82px;
  59 + color: #fff;
  60 + border: 4px solid #fff;
  61 + margin: 150px auto;
  62 + }
  63 +
  64 + .my-order {
  65 + margin-bottom: 30px;
  66 + border-top: 1px solid #e0e0e0;
  67 + border-bottom: 1px solid #e0e0e0;
  68 + background: #fff;
  69 +
  70 + .order-title {
  71 + display: block;
  72 + padding: 0 29px;
  73 + font-size: 34px;
  74 + line-height: 88px;
  75 +
  76 + span {
  77 + color: #e0e0e0;
  78 + float: right;
  79 + }
  80 +
  81 + &.highlight {
  82 + background: #eee;
  83 + }
  84 +
  85 + .read-order {
  86 + font-size: 30px;
  87 + }
  88 + }
  89 +
  90 + .order-type {
  91 + padding: 20px 30px;
  92 + text-align: center;
  93 + border-top: 1px solid #e0e0e0;
  94 +
  95 + .type-item {
  96 + position: relative;
  97 + float: left;
  98 + color: #444;
  99 + font-size: 24px;
  100 + line-height: 1.5;
  101 + width: 170px;
  102 +
  103 + &.highlight {
  104 + background: #eee;
  105 + }
  106 +
  107 + .num {
  108 + position: absolute;
  109 + top: -24px;
  110 + right: 36px;
  111 + width: 72px;
  112 + height: 72px;
  113 + font-size: 34px;
  114 + line-height: 72px;
  115 + color: #fff;
  116 + background: #f03d35;
  117 + text-align: center;
  118 + border-radius: 50%;
  119 + transform: scale(0.5);
  120 + }
  121 + }
  122 + }
  123 + }
  124 +
  125 + .group-list {
  126 + margin-bottom: 30px;
  127 + border-top: 1px solid #e0e0e0;
  128 + border-bottom: 1px solid #e0e0e0;
  129 + background: #fff;
  130 +
  131 + .list-item {
  132 + display: block;
  133 + position: relative;
  134 + padding: 0 30px;
  135 + font-size: 34px;
  136 + line-height: 90px;
  137 + overflow: hidden;
  138 +
  139 + &.highlight {
  140 + background: #eee;
  141 + }
  142 +
  143 + &:after {
  144 + content: "";
  145 + position: absolute;
  146 + right: 0;
  147 + bottom: 0;
  148 + width: 100%;
  149 + height: 0;
  150 + border-top: 1px solid #f0f0f0;
  151 + }
  152 +
  153 + &:last-child:after {
  154 + content: none;
  155 + }
  156 + }
  157 +
  158 + .icon {
  159 + margin-right: 5px;
  160 + font-size: 34px;
  161 + vertical-align: top;
  162 + }
  163 +
  164 + .num {
  165 + color: #b0b0b0;
  166 + float: right;
  167 + }
  168 + }
  169 +}
1 $black: #000; 1 $black: #000;
2 $white: #fff; 2 $white: #fff;
3 -.order-detail{ 3 +.main-wrap{
4 background: #f6f6f6; 4 background: #f6f6f6;
  5 +}
  6 +.order-detail{
5 >div{ 7 >div{
6 background: $white; 8 background: $white;
7 padding: 0 30px; 9 padding: 0 30px;
@@ -160,6 +162,11 @@ $white: #fff; @@ -160,6 +162,11 @@ $white: #fff;
160 } 162 }
161 } 163 }
162 .order-button{ 164 .order-button{
  165 + position: fixed;
  166 + left: 0;
  167 + right: 0;
  168 + bottom: 0;
  169 + z-index: 10;
163 padding: 30px 20px; 170 padding: 30px 20px;
164 border-top: 1px solid #eee; 171 border-top: 1px solid #eee;
165 text-align: right; 172 text-align: right;
@@ -37,12 +37,23 @@ $white: #fff; @@ -37,12 +37,23 @@ $white: #fff;
37 } 37 }
38 .order-goods{ 38 .order-goods{
39 .goods-info{ 39 .goods-info{
  40 + position: relative;
40 padding: 20px 0; 41 padding: 20px 0;
41 border-bottom: 1px solid #eee; 42 border-bottom: 1px solid #eee;
42 43
43 &:last-child{ 44 &:last-child{
44 border-bottom: 0 none; 45 border-bottom: 0 none;
45 } 46 }
  47 +
  48 + >a{
  49 + position: absolute;
  50 + left:0;
  51 + right:0;
  52 + bottom:0;
  53 + top:0;
  54 + width: 100%;
  55 + opacity:0;
  56 + }
46 } 57 }
47 .img-box{ 58 .img-box{
48 width: 98px; 59 width: 98px;
@@ -66,7 +77,7 @@ $white: #fff; @@ -66,7 +77,7 @@ $white: #fff;
66 -webkit-line-clamp: 2; 77 -webkit-line-clamp: 2;
67 -webkit-box-orient: vertical; 78 -webkit-box-orient: vertical;
68 text-overflow: ellipsis; 79 text-overflow: ellipsis;
69 - height: 2.4em; 80 + /*height: 2.4em;*/
70 line-height: 1.25; 81 line-height: 1.25;
71 overflow: hidden; 82 overflow: hidden;
72 font-size: 28px; 83 font-size: 28px;
  1 +<template>
  2 + <div class="order-status">
  3 + <p>{{order.status | convertOrderState}}</p>
  4 + <p v-if="order.status == 0">剩余: 订单将被取消</p>
  5 + </div>
  6 + <div class="order-address">
  7 + <p><span>{{order.userName}}</span><span>{{order.phone}}</span></p>
  8 + <p>{{order.area}} <br>{{order.address}}</p>
  9 + </div>
  10 + <div class="order-code">
  11 + <p>订单号:{{order.orderCode}}</p>
  12 + <p>下单时间:{{order.createTime | convertTime}}</p>
  13 + </div>
  14 + <div class="order-goods">
  15 + <ul>
  16 + <li class="goods-info" v-for="product in order.orderGoods">
  17 + <div class="img-box">
  18 + <img v-bind:src="product.goodsImage | resize 49 65" alt="">
  19 + <!--<label>赠品</label>-->
  20 + </div>
  21 + <div class="goods-detail">
  22 + <p class="name">{{product.productName}}</p>
  23 + <p class="size">
  24 + <span>颜色:{{product.colorName}}</span>
  25 + <span>尺码:{{product.sizeName}}</span>
  26 + </p>
  27 + </div>
  28 + <div class="goods-price">
  29 + <p>&yen;{{product.goodsPrice}}</p>
  30 + <p>×{{product.buyNumber}}</p>
  31 + </div>
  32 + </li>
  33 + </ul>
  34 + </div>
  35 + <div class="order-amount">
  36 + <ul>
  37 + <li><label>商品：</label><span>{{order.goodsTotalAmount}}</span></li>
  38 + <li><label>YOHO币：</label><span>{{order.yohoCoinNum}}</span></li>
  39 + <li><label>运费：</label><span>{{order.shippingCost}}</span></li>
  40 + <li><label>总计：</label><span>&yen;{{order.paymentAmount}}</span></li>
  41 + </ul>
  42 + </div>
  43 + <div class="order-button">
  44 + <button v-if="order.status == 0" @click="cancelOrder(order.orderCode)">取消订单</button>
  45 + <button v-if="order.status == 0 " class="countdown" @click="goBuy()">去支付 11:58:12</button>
  46 + <button v-if="order.status == 4 || order.status == 5 ">查看物流</button>
  47 + <button v-if="order.status == 4 || order.status == 5 " class="black" @click="confirmGoods(order.orderCode)">确认收货</button>
  48 + <button v-if="order.status == 6" @click="deleteOrder(order,index)">删除订单</button>
  49 + <button v-if="order.status == 6" class="normal">再次购买</button>
  50 + </div>
  51 +</template>
  52 +<script>
  53 + 'use strict';
  54 +
  55 + const $ = require('yoho-jquery');
  56 + const tip = require('common/tip');
  57 + const modal = require('common/modal');
  58 + const overlay = require('common/overlay');
  59 +
  60 + module.exports = {
  61 + data() {
  62 + return {
  63 + order:{}
  64 + };
  65 + },
  66 + ready(){
  67 + this.getOrderData();
  68 + },
  69 + methods:{
  70 + getOrderData(){
  71 + // let _that = this;
  72 + $.ajax({
  73 + url: '/home/get-order',
  74 + data: {
  75 + orderCode: this.$parent.$data.orderCode
  76 + }
  77 + }).then(result => {
  78 + if(result){
  79 + this.$set('order', result.data);
  80 + //_that.orderList = result.data.orderList;
  81 + } else {
  82 +
  83 + }
  84 + }).fail(() => {
  85 + tip('网络错误');
  86 + });
  87 + },
  88 + cancelOrder(code){
  89 + $.modal.confirm('', '订单取消后不能恢复,确认取消订单吗？', function() {
  90 + $.ajax({
  91 + url: '/home/cancel-order',
  92 + type: 'post',
  93 + data: {
  94 + orderCode: code
  95 + }
  96 + }).then(result => {
  97 + if(result.code === 200 ){
  98 + location.href = '/home/orders';
  99 + } else {
  100 + tip(result.message);
  101 + }
  102 + }).fail(() => {
  103 + tip('操作失敗');
  104 + });
  105 + });
  106 + },
  107 + deleteOrder(code){
  108 + $.modal.confirm('', '确认删除订单？', function() {
  109 + $.ajax({
  110 + url: '/home/delete-order',
  111 + type: 'post',
  112 + data: {
  113 + orderCode: code
  114 + }
  115 + }).then(result => {
  116 + if(result.code === 200 ){
  117 + location.href = '/home/orders';
  118 + } else {
  119 + tip(result.message);
  120 + }
  121 + }).fail(() => {
  122 + tip('操作失敗');
  123 + });
  124 + });
  125 + },
  126 + confirmGoods(code){
  127 + $.ajax({
  128 + url: '/home/confirm-order',
  129 + type: 'post',
  130 + data: {
  131 + orderCode: code
  132 + }
  133 + }).then(result => {
  134 + if(result.code === 200 ){
  135 + location.reload();
  136 + } else {
  137 + tip(result.message);
  138 + }
  139 + }).fail(() => {
  140 + tip('操作失敗');
  141 + });
  142 + },
  143 + goBuy(){
  144 +
  145 + },
  146 + see(){
  147 +
  148 + }
  149 + }
  150 + };
  151 +</script>
  152 +<style>
  153 + @import "../../scss/home/_order-detail.css";
  154 +</style>
1 <template> 1 <template>
2 - <ul>  
3 - <li class="order-item"> 2 + <ul v-infinite-scroll="getOrderData()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  3 + <li class="order-item" v-for="(index, order) in orderList">
4 <div class="order-detail"> 4 <div class="order-detail">
5 <div class="order-code"> 5 <div class="order-code">
6 - <p>订单号:523243435</p>  
7 - <p>待付款</p> 6 + <p>订单号:{{order.orderCode}}</p>
  7 + <p>{{order.status | convertOrderState}}</p>
8 </div> 8 </div>
9 - <div class="order-goods">  
10 - <div class="goods-info"> 9 + <div class="order-goods" >
  10 + <div class="goods-info" v-for="goods in order.orderGoods">
11 <div class="img-box"> 11 <div class="img-box">
12 - <img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt=""> 12 + <img v-bind:src="goods.goodsImage | resize 49 65" alt="{{goods.productName}}">
13 </div> 13 </div>
14 <div class="goods-detail"> 14 <div class="goods-detail">
15 - <p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p> 15 + <p class="name">{{goods.productName}}</p>
16 <p class="size"> 16 <p class="size">
17 - <span>颜色:黑色</span>  
18 - <span>尺码:XL</span> 17 + <span>颜色:{{goods.colorName}}</span>
  18 + <span>尺码:{{goods.sizeName}}</span>
19 </p> 19 </p>
20 </div> 20 </div>
21 <div class="goods-price"> 21 <div class="goods-price">
22 - <p>&yen;6289.00</p>  
23 - <p>×1</p>  
24 - </div>  
25 - </div>  
26 - <div class="goods-info">  
27 - <div class="img-box">  
28 - <img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">  
29 - </div>  
30 - <div class="goods-detail">  
31 - <p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>  
32 - <p class="size">  
33 - <span>颜色:黑色</span>  
34 - <span>尺码:XL</span>  
35 - </p>  
36 - </div>  
37 - <div class="goods-price">  
38 - <p>&yen;6289.00</p>  
39 - <p>×1</p> 22 + <p>&yen; {{goods.goodsPrice}}</p>
  23 + <p>×{{goods.buyNumber}}</p>
40 </div> 24 </div>
  25 + <a href="/home/order-detail?orderCode={{order.orderCode}}"></a>
41 </div> 26 </div>
42 </div> 27 </div>
43 <div class="order-option"> 28 <div class="order-option">
44 - <div class="goods-total">合计: <b>&yen;15677.00</b></div> 29 + <div class="goods-total">合计: <b>&yen;{{order.amount}}</b></div>
45 <div class="options"> 30 <div class="options">
46 - <button>取消订单</button>  
47 - <button class="countdown">去支付 11:58:12</button> 31 + <button v-if="order.status === 0" @click="cancelOrder(order.orderCode)">取消订单</button>
  32 + <button v-if="order.status === 0 " class="countdown" @click="goBuy()">去支付 11:58:12</button>
  33 + <button v-if="order.status === 4 || order.status === 5 ">查看物流</button>
  34 + <button v-if="order.status === 4 || order.status === 5 " class="black" @click="confirmGoods(order.orderCode)">确认收货</button>
  35 + <button v-if="order.status === 6" @click="deleteOrder(order,index)">删除订单</button>
  36 + <button v-if="order.status === 6" class="normal">再次购买</button>
48 </div> 37 </div>
49 </div> 38 </div>
50 </div> 39 </div>
@@ -53,14 +42,21 @@ @@ -53,14 +42,21 @@
53 </template> 42 </template>
54 43
55 <script> 44 <script>
  45 + 'use strict';
  46 +
56 const $ = require('yoho-jquery'); 47 const $ = require('yoho-jquery');
  48 + const tip = require('common/tip');
  49 + const modal = require('common/modal');
  50 + const overlay = require('common/overlay');
57 51
58 module.exports = { 52 module.exports = {
59 data() { 53 data() {
60 return { 54 return {
61 page: 0, 55 page: 0,
62 limit: 10, 56 limit: 10,
63 - type: document.getElementById('') 57 + type: this.$parent.$data.type,
  58 + orderList: [],
  59 + busy: false,
64 }; 60 };
65 }, 61 },
66 ready(){ 62 ready(){
@@ -68,37 +64,94 @@ @@ -68,37 +64,94 @@
68 }, 64 },
69 methods:{ 65 methods:{
70 getOrderData(){ 66 getOrderData(){
71 - 67 + let _that = this;
  68 + this.busy = true;
72 $.ajax({ 69 $.ajax({
73 - url: '/home/favorite/favpaging', 70 + url: '/home/get-orders',
74 data: { 71 data: {
75 page : ++ this.page, 72 page : ++ this.page,
76 - limit : this.page, 73 + limit : this.limit,
77 type: this.type 74 type: this.type
78 } 75 }
79 }).then(result => { 76 }).then(result => {
80 - if(result){  
81 - 77 + if(result.code === 200){
  78 + if (result.isend) {
  79 + _that.busy = true;
  80 + } else {
  81 + _that.busy = false;
  82 + }
  83 + if(result.data.orderList.length > 0){
  84 + this.$set('orderList', result.data.orderList);
  85 + //_that.orderList = result.data.orderList;
82 } else { 86 } else {
83 87
84 } 88 }
  89 + }
85 }).fail(() => { 90 }).fail(() => {
86 tip('网络错误'); 91 tip('网络错误');
87 }); 92 });
88 }, 93 },
89 - cancelOrder(id){  
90 - 94 + cancelOrder(code){
  95 + $.modal.confirm('', '订单取消后不能恢复,确认取消订单吗？', function() {
  96 + $.ajax({
  97 + url: '/home/cancel-order',
  98 + type: 'post',
  99 + data: {
  100 + orderCode: code
  101 + }
  102 + }).then(result => {
  103 + if(result.code === 200 ){
  104 + location.reload();
  105 + } else {
  106 + tip(result.message);
  107 + }
  108 + }).fail(() => {
  109 + tip('操作失敗');
  110 + });
  111 + });
91 }, 112 },
92 - deleteOrder(id){  
93 - 113 + deleteOrder(order, index){
  114 + var that = this;
  115 + $.modal.confirm('', '确认删除订单？', function() {
  116 + $.ajax({
  117 + url: '/home/delete-order',
  118 + type: 'post',
  119 + data: {
  120 + orderCode: order.orderCode
  121 + }
  122 + }).then(result => {
  123 + if(result.code === 200 ){
  124 + //location.reload();
  125 + that.$el.querySelectorAll('.order-item')[index].remove()
  126 + } else {
  127 + tip(result.message);
  128 + }
  129 + }).fail(() => {
  130 + tip('操作失敗');
  131 + });
  132 + });
94 }, 133 },
95 - rebuy(id){  
96 - 134 + confirmGoods(code){
  135 + $.ajax({
  136 + url: '/home/confirm-order',
  137 + type: 'post',
  138 + data: {
  139 + orderCode: code
  140 + }
  141 + }).then(result => {
  142 + if(result.code === 200 ){
  143 + location.reload();
  144 + } else {
  145 + tip(result.message);
  146 + }
  147 + }).fail(() => {
  148 + tip('操作失敗');
  149 + });
97 }, 150 },
98 - confirmGoods(){ 151 + goBuy(){
99 152
100 }, 153 },
101 - goBuy(){ 154 + see(){
102 155
103 } 156 }
104 } 157 }
@@ -108,4 +161,14 @@ @@ -108,4 +161,14 @@
108 161
109 <style> 162 <style>
110 html,body{height:100%;} 163 html,body{height:100%;}
  164 +
  165 +.order-wrapper {
  166 + height: 100%;
  167 + ul {
  168 + height: 100%;
  169 + overflow-y: auto;
  170 + -webkit-overflow-scrolling: touch;
  171 + }
  172 +}
  173 +@import "../../scss/home/_order.css";
111 </style> 174 </style>