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

@@ -8,8 +8,6 @@ const homeModel = require('../models/index');
 const _ = require('lodash');
 const helpers = global.yoho.helpers;
 
-// const model_order = require('../models/order')
-
 /**
  * 个人中心主页
  */
@@ -113,34 +111,6 @@ const component = {
             module: 'home',
             page: 'index'
         });
-    },
-    order: (req, res) => {
-        let type = req.query.type;
-
-        res.render('order', {
-            module: 'home',
-            page: 'order',
-            type: type
-        });
-    },
-    orderDetail: (req, res) => {
-        let orderCode = req.query.ordercode;
-
-        res.render('order-detail', {
-            module: 'home',
-            page: 'order',
-            orderCode: orderCode
-        });
-    },
-    getOrderData: (req, res) => {
-        // let param = Object.assign({uid: req.user.uid}, req.query);
-        res.json({});
-    },
-    coin: (req, res) => {
-        res.render('coin', {
-            module: 'home',
-            page: 'order'
-        });
     }
 };
 

+/**
+ * 订单相关操作.
+ * @author hgwang
+ * @date 2016-07-22
+ */
+'use strict';
+const orderModel = require('../models/order');
+const notLoginCode = 400;
+const notLoginTip = '抱歉，您暂未登录！';
+const testUid = 8050378;// 测试uid
+const isBLK = 1;
+
+const order = {
+    orders: (req, res) => {
+        let type = req.query.type;
+
+        res.render('order', {
+            module: 'home',
+            page: 'order',
+            type: type
+        });
+    },
+    orderDetail: (req, res) => {
+        let orderCode = req.query.orderCode;
+        let uid = req.user.uid;
+
+        uid = testUid; // 测试uid
+
+        if (!uid && req.xhr) {
+            return res.json({
+                code: notLoginCode,
+                message: notLoginTip
+            });
+        }
+
+        res.render('order-detail', {
+            module: 'home',
+            page: 'order-detail',
+            orderCode: orderCode
+        });
+    },
+    getOrderData: (req, res) => {
+        let uid = req.query.id;
+        let page = req.query.page;
+        let type = req.query.type;
+        let limit = req.query.limit;
+        let isend = true;
+
+        uid = testUid;
+        if (!uid && req.xhr) {
+            return res.json({
+                code: notLoginCode,
+                message: notLoginTip
+            });
+        }
+        let param = {
+            uid: uid,
+            page: page,
+            type: type,
+            limit: limit,
+            app_type: isBLK
+        };
+
+        orderModel.getOrders(param).then(result => {
+            if (result && page < result.page_total) {
+                isend = false;
+            }
+            return res.json(Object.assign({isend: isend}, result));
+        });
+    },
+    getOrderDetailData: (req, res) => {
+        let orderCode = req.query.orderCode;
+        let uid = req.user.uid;
+
+        uid = testUid; // 测试uid
+
+        if (!uid && req.xhr) {
+            return res.json({
+                code: notLoginCode,
+                message: notLoginTip
+            });
+        }
+
+        orderModel.getOrderDetail(uid, orderCode).then(result => {
+            return res.json(result);
+        });
+    },
+    cancelOrder: (req, res) => {
+        let orderCode = req.query.orderCode;
+        let reasonId = req.query.reasonId;
+        let reason = req.query.reason;
+
+        orderModel.cancelOrder(orderCode, reasonId, reason).then(result => {
+            return res.json(result);
+        });
+
+    },
+    confirmOrder: (req, res) => {
+        let orderode = req.query.orderCode;
+
+        orderModel.confirmOrder(orderode).then(result => {
+            return res.json(result);
+        });
+    },
+    deleteOrder: (req, res) => {
+        let orderCode = req.query.orderCode;
+        let uid = req.user.uid;
+
+        uid = testUid; // 测试uid
+
+        if (!uid && req.xhr) {
+            return res.json({
+                code: notLoginCode,
+                message: notLoginTip
+            });
+        }
+
+        orderModel.deleteOrder(orderCode, uid).then(result => {
+            return res.json(result);
+        });
+    },
+    coin: (req, res) => {
+        res.render('coin', {
+            module: 'home',
+            page: 'order'
+        });
+    }
+};
+
+module.exports = order;
\ No newline at end of file

@@ -5,7 +5,87 @@
  */
 'use strict';
 
-const api = global.yoho.ServiceAPI;
-const Promise = require('bluebird');
-const co = Promise.coroutine;
+const api = global.yoho.API;
 
+//const serviceAPI = global.yoho.ServiceAPI;
+const camelCase = global.yoho.camelCase;
+
+/**
+ * 获取订单列表数据
+ * @param param
+ *          uid  uid,
+ *          page  页数
+ *          type  订单类型 1:全部订单,2:待付款,3:待发货,4:待收货,5:待评论/成功订单,7:失败/取消
+ *          limit  每页大小
+ *          app_type 0:yohobuy,1:blk
+ * @returns {Promise.<T>|*}
+ */
+exports.getOrders = (param) => {
+    param = Object.assign({method: 'app.SpaceOrders.get'}, param);
+
+    return api.get('', param).then(camelCase);
+};
+
+/**
+ * 获取订单详情
+ * @param uid
+ * @param orderCode
+ * @returns {Promise.<T>|*}
+ */
+exports.getOrderDetail = (uid, orderCode) => {
+    return api.get('', {
+        method: 'app.SpaceOrders.detail',
+        order_code: orderCode,
+        uid: uid
+    }).then(camelCase);
+};
+
+/**
+ * 取消订单
+ * @param orderCode
+ * @param reasonId
+ * @param reason
+ * @returns {Promise.<T>|*}
+ */
+exports.cancelOrder = (orderCode, reasonId, reason) => {
+
+    return api.get('', {
+        method: 'app.SpaceOrders.close',
+        order_code: orderCode,
+        reason_id: reasonId,
+        reason: reason
+    }).then(result => {
+        return result;
+    });
+};
+
+/**
+ * 确认订单
+ * @param orderCode 订单号
+ * @returns {Promise.<T>|*}
+ */
+exports.confirmOrder = (orderCode) => {
+
+    return api.get('', {
+        method: 'app.SpaceOrders.confirm',
+        order_code: orderCode
+    }).then(result => {
+        return result;
+    });
+};
+
+/**
+ * 删除订单
+ * @param orderCode 订单号
+ * @param uid uid
+ * @returns {Promise.<T>|*}
+ */
+exports.deleteOrder = (orderCode, uid) => {
+    return api.get('', {
+        method: 'app.SpaceOrders.delOrderByCode',
+        order_code: orderCode,
+        uid: uid
+    }).then(result => {
+        return result;
+    });
+};

@@ -11,14 +11,22 @@ const cRoot = './controllers';
 const home = require(cRoot);
 const favorite = require(cRoot + '/favorite');
 const refund = require(cRoot + '/refund');
+const order = require(cRoot + '/order');
 
 const router = expressRouter();
 
 // Your controller here
 router.get('/', home.index); // 个人中心主页
-router.get('/orders', home.order); // 订单
-router.get('/mycurrency', home.coin); // yoho币
-router.get('/orderDetail', home.orderDetail); // yoho币
+router.get('/orders', order.orders); // 订单
+router.get('/mycurrency', order.coin); // yoho币
+router.get('/order-detail', order.orderDetail); // 订单详情
+router.get('/get-orders', order.getOrderData); // 获取订单数据
+router.get('/get-order', order.getOrderDetailData); // 获取订单详情数据
+router.get('/order-detail', order.orderDetail); // 订单详情
+router.post('/cancel-order', order.cancelOrder); // 取消订单
+router.post('/delete-order', order.deleteOrder); // 删除订单
+router.post('/confirm-order', order.confirmOrder); // 确认订单
+
 
 router.get('/help', home.help); // 帮助中心列表页
 router.get('/help-detail', home.helpDetail); // 帮助中心详情页

-<div class="order-detail">
-    <div class="order-status">
-        <p>待收货</p>
-    </div>
-    <!--<div class="order-status">-->
-        <!--<p>待收货</p>-->
-        <!--<p>订单将被取消</p>-->
-    <!--</div>-->
-    <div class="order-address">
-        <p><span>Daisuke Obana</span><span>13160071768</span></p>
-        <p>江苏省南京市建邺区 <br>嘉陵江东街18号国家广告产业园5栋18楼产品部</p>
-    </div>
-    <div class="order-code">
-        <p>订单号:523243435</p>
-        <p>下单时间:2016.1.23 12:31:00</p>
-    </div>
-    <div class="order-goods">
-        <ul>
-            <li class="goods-info">
-                <div class="img-box">
-                    <img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
-                    <label>赠品</label>
-                </div>
-                <div class="goods-detail">
-                    <p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
-                    <p class="size">
-                        <span>颜色:黑色</span>
-                        <span>尺码:XL</span>
-                    </p>
-                </div>
-                <div class="goods-price">
-                    <p>&yen;6289.00</p>
-                    <p>×1</p>
-                </div>
-            </li>
-            <li class="goods-info">
-                <div class="img-box">
-                    <img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
-                </div>
-                <div class="goods-detail">
-                    <p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
-                    <p class="size">
-                        <span>颜色:黑色</span>
-                        <span>尺码:XL</span>
-                    </p>
-                </div>
-                <div class="goods-price">
-                    <p>&yen;6289.00</p>
-                    <p>×1</p>
-                </div>
-            </li>
-            <li class="goods-info">
-                <div class="img-box">
-                    <img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
-                </div>
-                <div class="goods-detail">
-                    <p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
-                    <p class="size">
-                        <span>颜色:黑色</span>
-                        <span>尺码:XL</span>
-                    </p>
-                </div>
-                <div class="goods-price">
-                    <p>&yen;6289.00</p>
-                    <p>×1</p>
-                </div>
-            </li>
-        </ul>
-    </div>
-    <div class="order-amount">
-        <ul>
-            <li><label>商品：</label><span>&yen;20676.00</span></li>
-            <li><label>YOHO币：</label><span>&yen;32.12</span></li>
-            <li><label>运费：</label><span>&yen;0</span></li>
-            <li><label>总计：</label><span>&yen;20808.12</span></li>
-        </ul>
-    </div>
-    <div class="order-button">
-        <button>查看物流</button>
-        <button class="black">确认收货</button>
-        <button class="normal">确认收货</button>
-    </div>
+<div class="order-detail" id="order-detail">
+    <order-detail></order-detail>
+    <input type="hidden" id="order-code" value="{{orderCode}}">
 </div>
\ No newline at end of file

 <div class="order-wrapper" id="home-order-list">
     <Order></Order>
-    <input type="hidden" value="{{type}}">
+    <input type="hidden" value="{{type}}" id="order-type">
 </div>

@@ -53,3 +53,60 @@ Vue.filter('clothingGenderIdentity', (value)=> {
 Vue.filter('brandUrl', (value)=> {
     return `/brand?domain=${value}`;
 });
+
+/**
+ * 订单状态
+ * @example
+ *  {value | order}
+ *  状态 0:待付款,1-3:待发货,4-5:待收货(0:未付款,1:已付款,2:备货中,3:配货中,4:已发货,5:运输中,6:已完成)
+ */
+Vue.filter('convertOrderState', (value) => {
+    let stateTxt = '';
+
+    if (value !== undefined) {
+        value = parseInt(value);
+    }
+    switch (value) {
+        case 0:
+            stateTxt = '待付款';
+            break;
+        case 1:
+            stateTxt = '待发货';
+            break;
+        case 2:
+            stateTxt = '待发货';
+            break;
+        case 3:
+            stateTxt = '待发货';
+            break;
+        case 4:
+            stateTxt = '待收货';
+            break;
+        case 5:
+            stateTxt = '待发货';
+            break;
+        case 6:
+            stateTxt = '已完成';
+            break;
+    }
+    return stateTxt;
+});
+
+/**
+ * 转换时间
+ *      yyyy-MM-dd hh:mm:ss
+ */
+Vue.filter('convertTime', (value) => {
+    if (value === undefined) {
+        return;
+    }
+    let date = new Date(parseFloat(value) * 1000);
+    let Y = date.getFullYear() + '-';
+    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+    let D = date.getDate() + ' ';
+    let h = date.getHours() + ':';
+    let m = date.getMinutes() + ':';
+    let s = date.getSeconds();
+
+    return Y + M + D + h + m + s;
+});
\ No newline at end of file

+/**
+ * order-detail.page.js.
+ * @author hgwang
+ * @date 2016-07-23
+ */
+'use strict';
+
+const Vue = require('yoho-vue');
+const OrderDetail = require('home/order-detail.vue');
+
+require('common/vue-filter');
+
+new Vue({
+    el: '#order-detail',
+    data: {
+        orderCode: document.getElementById('order-code').value
+    },
+    components: {
+        OrderDetail
+    }
+});
\ No newline at end of file

@@ -7,9 +7,17 @@
 
 const Vue = require('yoho-vue');
 const Order = require('home/order.vue');
+const infiniteScroll = require('yoho-vue-infinite-scroll');
+
+Vue.use(infiniteScroll);
+
+require('common/vue-filter');
 
 new Vue({
     el: '#home-order-list',
+    data: {
+        type: document.getElementById('order-type').value
+    },
     components: {
         Order
     }

@@ -3,8 +3,167 @@
 @import "feedback";
 @import "fav";
 @import "about-us";
-@import "order";
 @import "coin";
 @import "logistics";
 
-/* @import "order-detail"; */
+.my-page {
+    color: #444;
+    background: #f0f0f0;
+
+    a {
+        color: #000;
+    }
+
+    .user-info {
+        display: block;
+        position: relative;
+        padding: 0 30px;
+        color: #000;
+        font-size: 34px;
+        line-height: 138px;
+        height: 469px;
+        background-size: cover;
+        background: resolve("home/header-bg.png");
+        text-align: center;
+
+        .user-avatar {
+            display: inline-block;
+            position: relative;
+            top: 90px;
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            border: 6px solid #a7a8a9;
+            background: resolve("home/user-icon.png");
+            background-size: 100%;
+        }
+
+        .username {
+            display: inline-block;
+            padding: 0 16px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            font-size: 32px;
+            max-width: 260px;
+        }
+    }
+
+    .login-btn {
+        display: inline-block;
+        top: 40px;
+        left: 194px;
+        width: 244px;
+        height: 82px;
+        line-height: 82px;
+        color: #fff;
+        border: 4px solid #fff;
+        margin: 150px auto;
+    }
+
+    .my-order {
+        margin-bottom: 30px;
+        border-top: 1px solid #e0e0e0;
+        border-bottom: 1px solid #e0e0e0;
+        background: #fff;
+
+        .order-title {
+            display: block;
+            padding: 0 29px;
+            font-size: 34px;
+            line-height: 88px;
+
+            span {
+                color: #e0e0e0;
+                float: right;
+            }
+
+            &.highlight {
+                background: #eee;
+            }
+
+            .read-order {
+                font-size: 30px;
+            }
+        }
+
+        .order-type {
+            padding: 20px 30px;
+            text-align: center;
+            border-top: 1px solid #e0e0e0;
+
+            .type-item {
+                position: relative;
+                float: left;
+                color: #444;
+                font-size: 24px;
+                line-height: 1.5;
+                width: 170px;
+
+                &.highlight {
+                    background: #eee;
+                }
+
+                .num {
+                    position: absolute;
+                    top: -24px;
+                    right: 36px;
+                    width: 72px;
+                    height: 72px;
+                    font-size: 34px;
+                    line-height: 72px;
+                    color: #fff;
+                    background: #f03d35;
+                    text-align: center;
+                    border-radius: 50%;
+                    transform: scale(0.5);
+                }
+            }
+        }
+    }
+
+    .group-list {
+        margin-bottom: 30px;
+        border-top: 1px solid #e0e0e0;
+        border-bottom: 1px solid #e0e0e0;
+        background: #fff;
+
+        .list-item {
+            display: block;
+            position: relative;
+            padding: 0 30px;
+            font-size: 34px;
+            line-height: 90px;
+            overflow: hidden;
+
+            &.highlight {
+                background: #eee;
+            }
+
+            &:after {
+                content: "";
+                position: absolute;
+                right: 0;
+                bottom: 0;
+                width: 100%;
+                height: 0;
+                border-top: 1px solid #f0f0f0;
+            }
+
+            &:last-child:after {
+                content: none;
+            }
+        }
+
+        .icon {
+            margin-right: 5px;
+            font-size: 34px;
+            vertical-align: top;
+        }
+
+        .num {
+            color: #b0b0b0;
+            float: right;
+        }
+    }
+}

 $black: #000;
 $white: #fff;
-.order-detail{
+.main-wrap{
     background: #f6f6f6;
+}
+.order-detail{
     >div{
          background: $white;
          padding: 0 30px;
@@ -160,6 +162,11 @@ $white: #fff;
         }
     }
     .order-button{
+        position: fixed;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 10;
         padding: 30px 20px;
         border-top: 1px solid #eee;
         text-align: right;

@@ -37,12 +37,23 @@ $white: #fff;
     }
     .order-goods{
         .goods-info{
+            position: relative;
             padding: 20px 0;
             border-bottom: 1px solid #eee;
 
             &:last-child{
                  border-bottom: 0 none;
             }
+
+            >a{
+                position: absolute;
+                left:0;
+                right:0;
+                bottom:0;
+                top:0;
+                width: 100%;
+                opacity:0;
+            }
         }
         .img-box{
             width: 98px;
@@ -66,7 +77,7 @@ $white: #fff;
                 -webkit-line-clamp: 2;
                 -webkit-box-orient: vertical;
                 text-overflow: ellipsis;
-                height: 2.4em;
+                /*height: 2.4em;*/
                 line-height: 1.25;
                 overflow: hidden;
                 font-size: 28px;

+<template>
+    <div class="order-status">
+        <p>{{order.status | convertOrderState}}</p>
+        <p v-if="order.status == 0">剩余: 订单将被取消</p>
+    </div>
+    <div class="order-address">
+        <p><span>{{order.userName}}</span><span>{{order.phone}}</span></p>
+        <p>{{order.area}} <br>{{order.address}}</p>
+    </div>
+    <div class="order-code">
+        <p>订单号:{{order.orderCode}}</p>
+        <p>下单时间:{{order.createTime | convertTime}}</p>
+    </div>
+    <div class="order-goods">
+        <ul>
+            <li class="goods-info" v-for="product in order.orderGoods">
+                <div class="img-box">
+                    <img v-bind:src="product.goodsImage | resize 49 65" alt="">
+                    <!--<label>赠品</label>-->
+                </div>
+                <div class="goods-detail">
+                    <p class="name">{{product.productName}}</p>
+                    <p class="size">
+                        <span>颜色:{{product.colorName}}</span>
+                        <span>尺码:{{product.sizeName}}</span>
+                    </p>
+                </div>
+                <div class="goods-price">
+                    <p>&yen;{{product.goodsPrice}}</p>
+                    <p>×{{product.buyNumber}}</p>
+                </div>
+            </li>
+        </ul>
+    </div>
+    <div class="order-amount">
+        <ul>
+            <li><label>商品：</label><span>{{order.goodsTotalAmount}}</span></li>
+            <li><label>YOHO币：</label><span>{{order.yohoCoinNum}}</span></li>
+            <li><label>运费：</label><span>{{order.shippingCost}}</span></li>
+            <li><label>总计：</label><span>&yen;{{order.paymentAmount}}</span></li>
+        </ul>
+    </div>
+    <div class="order-button">
+        <button v-if="order.status == 0" @click="cancelOrder(order.orderCode)">取消订单</button>
+        <button v-if="order.status == 0 " class="countdown" @click="goBuy()">去支付 11:58:12</button>
+        <button v-if="order.status == 4 || order.status == 5 ">查看物流</button>
+        <button v-if="order.status == 4 || order.status == 5 " class="black" @click="confirmGoods(order.orderCode)">确认收货</button>
+        <button v-if="order.status == 6" @click="deleteOrder(order,index)">删除订单</button>
+        <button v-if="order.status == 6" class="normal">再次购买</button>
+    </div>
+</template>
+<script>
+    'use strict';
+
+    const $ = require('yoho-jquery');
+    const tip = require('common/tip');
+    const modal = require('common/modal');
+    const overlay = require('common/overlay');
+
+    module.exports = {
+        data() {
+            return {
+                order:{}
+            };
+        },
+        ready(){
+            this.getOrderData();
+        },
+        methods:{
+            getOrderData(){
+                // let _that = this;
+                $.ajax({
+                    url: '/home/get-order',
+                    data: {
+                        orderCode: this.$parent.$data.orderCode
+                    }
+                }).then(result => {
+                    if(result){
+                        this.$set('order', result.data);
+                        //_that.orderList = result.data.orderList;
+                    } else {
+
+                    }
+                }).fail(() => {
+                    tip('网络错误');
+                });
+            },
+            cancelOrder(code){
+                $.modal.confirm('', '订单取消后不能恢复,确认取消订单吗？', function() {
+                    $.ajax({
+                        url: '/home/cancel-order',
+                        type: 'post',
+                        data: {
+                            orderCode: code
+                        }
+                    }).then(result => {
+                        if(result.code === 200 ){
+                            location.href = '/home/orders';
+                        } else {
+                            tip(result.message);
+                        }
+                    }).fail(() => {
+                            tip('操作失敗');
+                    });
+                });
+            },
+            deleteOrder(code){
+                $.modal.confirm('', '确认删除订单？', function() {
+                    $.ajax({
+                        url: '/home/delete-order',
+                        type: 'post',
+                        data: {
+                            orderCode: code
+                        }
+                    }).then(result => {
+                        if(result.code === 200 ){
+                            location.href = '/home/orders';
+                        } else {
+                            tip(result.message);
+                        }
+                    }).fail(() => {
+                            tip('操作失敗');
+                    });
+                });
+            },
+            confirmGoods(code){
+                $.ajax({
+                    url: '/home/confirm-order',
+                    type: 'post',
+                    data: {
+                        orderCode: code
+                    }
+                }).then(result => {
+                    if(result.code === 200 ){
+                        location.reload();
+                    } else {
+                        tip(result.message);
+                    }
+                }).fail(() => {
+                        tip('操作失敗');
+                });
+            },
+            goBuy(){
+
+            },
+            see(){
+
+            }
+        }
+    };
+</script>
+<style>
+    @import "../../scss/home/_order-detail.css";
+</style>
\ No newline at end of file

 <template>
-    <ul>
-        <li class="order-item">
+    <ul v-infinite-scroll="getOrderData()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
+        <li class="order-item" v-for="(index, order) in orderList">
             <div class="order-detail">
                 <div class="order-code">
-                    <p>订单号:523243435</p>
-                    <p>待付款</p>
+                    <p>订单号:{{order.orderCode}}</p>
+                    <p>{{order.status | convertOrderState}}</p>
                 </div>
-                <div class="order-goods">
-                    <div class="goods-info">
+                <div class="order-goods" >
+                    <div class="goods-info" v-for="goods in order.orderGoods">
                         <div class="img-box">
-                            <img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
+                            <img v-bind:src="goods.goodsImage | resize 49 65" alt="{{goods.productName}}">
                         </div>
                         <div class="goods-detail">
-                            <p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
+                            <p class="name">{{goods.productName}}</p>
                             <p class="size">
-                                <span>颜色:黑色</span>
-                                <span>尺码:XL</span>
+                                <span>颜色:{{goods.colorName}}</span>
+                                <span>尺码:{{goods.sizeName}}</span>
                             </p>
                         </div>
                         <div class="goods-price">
-                            <p>&yen;6289.00</p>
-                            <p>×1</p>
-                        </div>
-                    </div>
-                    <div class="goods-info">
-                        <div class="img-box">
-                            <img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
-                        </div>
-                        <div class="goods-detail">
-                            <p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
-                            <p class="size">
-                                <span>颜色:黑色</span>
-                                <span>尺码:XL</span>
-                            </p>
-                        </div>
-                        <div class="goods-price">
-                            <p>&yen;6289.00</p>
-                            <p>×1</p>
+                            <p>&yen; {{goods.goodsPrice}}</p>
+                            <p>×{{goods.buyNumber}}</p>
                         </div>
+                        <a href="/home/order-detail?orderCode={{order.orderCode}}"></a>
                     </div>
                 </div>
                 <div class="order-option">
-                    <div class="goods-total">合计: <b>&yen;15677.00</b></div>
+                    <div class="goods-total">合计: <b>&yen;{{order.amount}}</b></div>
                     <div class="options">
-                        <button>取消订单</button>
-                        <button class="countdown">去支付 11:58:12</button>
+                        <button v-if="order.status === 0" @click="cancelOrder(order.orderCode)">取消订单</button>
+                        <button v-if="order.status === 0 " class="countdown" @click="goBuy()">去支付 11:58:12</button>
+                        <button v-if="order.status === 4 || order.status === 5 ">查看物流</button>
+                        <button v-if="order.status === 4 || order.status === 5 " class="black" @click="confirmGoods(order.orderCode)">确认收货</button>
+                        <button v-if="order.status === 6" @click="deleteOrder(order,index)">删除订单</button>
+                        <button v-if="order.status === 6" class="normal">再次购买</button>
                     </div>
                 </div>
             </div>
@@ -53,14 +42,21 @@
 </template>
 
 <script>
+    'use strict';
+
     const $ = require('yoho-jquery');
+    const tip = require('common/tip');
+    const modal = require('common/modal');
+    const overlay = require('common/overlay');
 
     module.exports = {
         data() {
             return {
                 page: 0,
                 limit: 10,
-                type: document.getElementById('')
+                type: this.$parent.$data.type,
+                orderList: [],
+                busy: false,
             };
         },
         ready(){
@@ -68,37 +64,94 @@
         },
         methods:{
             getOrderData(){
-
+                let _that = this;
+                this.busy = true;
                 $.ajax({
-                    url: '/home/favorite/favpaging',
+                    url: '/home/get-orders',
                     data: {
                         page : ++ this.page,
-                        limit : this.page,
+                        limit : this.limit,
                         type: this.type
                     }
                 }).then(result => {
-                    if(result){
-
-                    } else {
+                    if(result.code === 200){
+                        if (result.isend) {
+                            _that.busy = true;
+                        } else {
+                            _that.busy = false;
+                        }
+                        if(result.data.orderList.length > 0){
+                            this.$set('orderList', result.data.orderList);
+                            //_that.orderList = result.data.orderList;
+                        } else {
 
+                        }
                     }
                 }).fail(() => {
-                        tip('网络错误');
+                    tip('网络错误');
                 });
             },
-            cancelOrder(id){
-
+            cancelOrder(code){
+                $.modal.confirm('', '订单取消后不能恢复,确认取消订单吗？', function() {
+                    $.ajax({
+                        url: '/home/cancel-order',
+                        type: 'post',
+                        data: {
+                            orderCode: code
+                        }
+                    }).then(result => {
+                        if(result.code === 200 ){
+                            location.reload();
+                        } else {
+                            tip(result.message);
+                        }
+                    }).fail(() => {
+                        tip('操作失敗');
+                    });
+                });
             },
-            deleteOrder(id){
-
+            deleteOrder(order, index){
+                var that = this;
+                $.modal.confirm('', '确认删除订单？', function() {
+                    $.ajax({
+                        url: '/home/delete-order',
+                        type: 'post',
+                        data: {
+                            orderCode: order.orderCode
+                        }
+                    }).then(result => {
+                        if(result.code === 200 ){
+                            //location.reload();
+                            that.$el.querySelectorAll('.order-item')[index].remove()
+                        } else {
+                            tip(result.message);
+                        }
+                    }).fail(() => {
+                        tip('操作失敗');
+                    });
+                });
             },
-            rebuy(id){
-
+            confirmGoods(code){
+                $.ajax({
+                    url: '/home/confirm-order',
+                    type: 'post',
+                    data: {
+                        orderCode: code
+                    }
+                }).then(result => {
+                    if(result.code === 200 ){
+                        location.reload();
+                    } else {
+                        tip(result.message);
+                    }
+                }).fail(() => {
+                        tip('操作失敗');
+                });
             },
-            confirmGoods(){
+            goBuy(){
 
             },
-            goBuy(){
+            see(){
 
             }
         }
@@ -108,4 +161,14 @@
 
 <style>
 html,body{height:100%;}
+
+.order-wrapper {
+    height: 100%;
+    ul {
+        height: 100%;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+}
+@import "../../scss/home/_order.css";
 </style>
\ No newline at end of file