diff --git a/package.json b/package.json
index c1189ce..299e8f3 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "opn": "^4.0.2",
     "optimize-css-assets-webpack-plugin": "^1.3.2",
     "ora": "^1.3.0",
+    "qs": "^6.5.2",
     "rimraf": "^2.6.2",
     "sass-loader": "^6.0.6",
     "semver": "^5.4.1",
diff --git a/src/api/order.js b/src/api/order.js
new file mode 100644
index 0000000..d52925f
--- /dev/null
+++ b/src/api/order.js
@@ -0,0 +1,26 @@
+export default {
+    getList: {
+        url: "/mall/web/order/list",
+        method: "get"
+    },
+    getDetail: {
+        url: "/mall/web/order/detail",
+        method: "get"
+    },
+    checkOrder: {
+        url: "/mall/web/order/prepare",
+        method: "post"
+    },
+    cancel: {
+        url: "/mall/web/order/cancel",
+        method: "put"
+    },
+    addOrder: {
+        url: "/mall/web/order/new",
+        method: "post"
+    },
+    payMoney: {
+        url: "/mall/web/order/pay",
+        method: "put"
+    }
+};
diff --git a/src/assets/images/order-list/address.png b/src/assets/images/order-list/address.png
new file mode 100644
index 0000000..91cc934
Binary files /dev/null and b/src/assets/images/order-list/address.png differ
diff --git a/src/assets/images/order-list/coupon.png b/src/assets/images/order-list/coupon.png
new file mode 100644
index 0000000..680e050
Binary files /dev/null and b/src/assets/images/order-list/coupon.png differ
diff --git a/src/assets/images/order-list/edit.png b/src/assets/images/order-list/edit.png
new file mode 100644
index 0000000..df1aeff
Binary files /dev/null and b/src/assets/images/order-list/edit.png differ
diff --git a/src/assets/images/order-list/true.png b/src/assets/images/order-list/true.png
new file mode 100644
index 0000000..f9791f6
Binary files /dev/null and b/src/assets/images/order-list/true.png differ
diff --git a/src/assets/images/order-list/wechat.png b/src/assets/images/order-list/wechat.png
new file mode 100644
index 0000000..c2b93f8
Binary files /dev/null and b/src/assets/images/order-list/wechat.png differ
diff --git a/src/assets/styles/style.css b/src/assets/styles/style.css
index b9d2624..cf4a992 100644
--- a/src/assets/styles/style.css
+++ b/src/assets/styles/style.css
@@ -2,21 +2,24 @@
     margin: 0;
     padding: 0;
 }
-input:focus,button:focus,textarea:focus {
+input:focus,
+button:focus,
+textarea:focus {
     outline: none;
 }
-html,body {
+html,
+body {
     width: 100%;
     height: 100%;
     /*overflow-y: scroll;*/
     position: relative;
-    -webkit-overflow-scrolling : touch;
-    background:rgba(243,243,243,1);
+    -webkit-overflow-scrolling: touch;
+    background: rgba(243, 243, 243, 1);
 }
 
 #app {
     width: 100%;
-    height: 100%; 
+    height: 100%;
 }
 
 .m-page {
@@ -28,15 +31,15 @@ html,body {
 .m-month-card {
     width: 100%;
     height: 100%;
-    background-color: #FFF3E8;
+    background-color: #fff3e8;
 }
-.m-slider {    
+.m-slider {
     height: 175px;
 }
 .m-slider img {
     object-fit: cover;
 }
-.month-card-title {    
+.month-card-title {
     background-color: #fff;
     padding-bottom: 52px;
     padding-top: 10px;
@@ -57,14 +60,14 @@ html,body {
     color: #333;
 }
 .month-card-area {
-    position: relative;    
+    position: relative;
     height: 100%;
-    background-color: #FFF3E8;
-    padding-left:15px;
+    background-color: #fff3e8;
+    padding-left: 15px;
 }
 .month-card {
     position: relative;
-    top: -40px;        
+    top: -40px;
     padding: 5px 10px 10px 0;
     background: url(../images/coupon-bg-red@1x.png) no-repeat 0 0 /100% 100%;
 }
@@ -98,13 +101,13 @@ html,body {
 .limit-buy {
     font-size: 10px;
     line-height: 12px;
-    color: #FFBAA9;
+    color: #ffbaa9;
 }
 .end-date {
     margin-top: 10px;
     font-size: 9px;
     line-height: 14px;
-    color: #FFBAA9;
+    color: #ffbaa9;
 }
 
 .qrcode-img {
@@ -123,8 +126,8 @@ html,body {
         padding-left: 10px;
     }
 
-    .month-card .f-font-45 {         
-        font-size: 30px;        
+    .month-card .f-font-45 {
+        font-size: 30px;
     }
 
     .month-card .get-btn {
@@ -148,12 +151,11 @@ html,body {
     }
 }
 
-
 /*公共样式*/
 .container {
-  width: 100%;
-  min-height: 100%;
-  box-sizing: border-box;
+    width: 100%;
+    min-height: 100%;
+    box-sizing: border-box;
 }
 
 .btn-md {
@@ -178,15 +180,15 @@ html,body {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    border: 1px solid #FE9B36;
+    border: 1px solid #fe9b36;
     background: none;
     line-height: 23px;
 }
 .bg-orange {
-    background-color: #FE9B36;
+    background-color: #fe9b36;
 }
 .bg-gray {
-    background-color: #D4D4D4;
+    background-color: #d4d4d4;
 }
 .f-mt5 {
     margin-top: 5px;
@@ -256,7 +258,7 @@ html,body {
 .f-font-13 {
     font-size: 13px;
 }
-.f-font-15  {
+.f-font-15 {
     font-size: 15px;
     line-height: 17px;
 }
@@ -277,13 +279,13 @@ html,body {
     font-weight: bold;
 }
 .s-orange {
-    color: #FE9B36;
+    color: #fe9b36;
 }
 .s-orange-1 {
-    color: #E6A96C;
+    color: #e6a96c;
 }
 .s-orange-2 {
-    color: #FF9363;
+    color: #ff9363;
 }
 .s-white {
     color: #fff;
@@ -299,7 +301,7 @@ html,body {
 }
 .s-red {
     font-weight: bold;
-    color: #F45252 !important;
+    color: #f45252 !important;
 }
 .line-through {
     text-decoration: line-through;
@@ -314,24 +316,24 @@ html,body {
     position: absolute;
 }
 .f-ellipsis-1 {
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
 }
 
 .f-ellipsis-2 {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  /* autoprefixer: off*/
-  /* autoprefixer: on*/
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    /* autoprefixer: off*/
+    /* autoprefixer: on*/
 }
 .f-inb {
     display: inline-block;
 }
-.weui-toast {
+.weui-loading_toast .weui-toast {
     width: 100%;
     min-height: 100% !important;
     overflow: hidden;
@@ -341,42 +343,41 @@ html,body {
     margin-top: 75%;
 }
 @media (-webkit-min-device-pixel-ratio: 2) {
-  .f-bb-gray::after {
-      height: 1px;
-      content: '';
-      width: 100%;
-      border-bottom: 1px solid #EEEEEE;
-      position: absolute;
-      bottom: -1px;
-      right: 0;
-      transform: scaleY(0.5);
-      -webkit-transform: scaleY(0.5);
-  }
-  .f-all-1px::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    border: 1px solid #EEEEEE;
-    border-radius: 2px;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    width: 200%;
-    height: 200%;
-    -webkit-transform: scale(0.5);
-    transform: scale(0.5);
-    -webkit-transform-origin: left top;
-    transform-origin: left top;
-    z-index: -1;
-  }
-}  
-
+    .f-bb-gray::after {
+        height: 1px;
+        content: "";
+        width: 100%;
+        border-bottom: 1px solid #eeeeee;
+        position: absolute;
+        bottom: -1px;
+        right: 0;
+        transform: scaleY(0.5);
+        -webkit-transform: scaleY(0.5);
+    }
+    .f-all-1px::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: 1px solid #eeeeee;
+        border-radius: 2px;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        width: 200%;
+        height: 200%;
+        -webkit-transform: scale(0.5);
+        transform: scale(0.5);
+        -webkit-transform-origin: left top;
+        transform-origin: left top;
+        z-index: -1;
+    }
+}
 
 /******我的钱包******/
 .page-top {
     width: 100%;
     height: 0.9rem;
-    background:rgba(0,186,134,1);
+    background: rgba(0, 186, 134, 1);
     display: flex;
     align-items: center;
     position: relative;
@@ -387,7 +388,7 @@ html,body {
     height: 0.36rem;
     display: inline-block;
     position: absolute;
-    left: 0.3rem
+    left: 0.3rem;
 }
 .page-top a img {
     height: 0.36rem;
@@ -396,9 +397,9 @@ html,body {
 .page-top span {
     display: inline-block;
     margin: auto;
-    font-size:0.36rem;
-    font-family:PingFang-SC-Medium;
-    color:rgba(255,255,255,1);
+    font-size: 0.36rem;
+    font-family: PingFang-SC-Medium;
+    color: rgba(255, 255, 255, 1);
     letter-spacing: 1px;
 }
 
@@ -407,7 +408,7 @@ html,body {
 .popup-box {
     width: 100%;
     height: 100%;
-    background: rgba(0,0,0,.6);
+    background: rgba(0, 0, 0, 0.6);
     position: fixed;
     display: flex;
     align-items: center;
@@ -419,16 +420,16 @@ html,body {
 
 .popup-centent {
     position: relative;
-    background:rgba(255,255,255,1);
+    background: rgba(255, 255, 255, 1);
     margin-top: -2rem;
 }
 
-.popup-centent span.closeBtn { 
+.popup-centent span.closeBtn {
     position: absolute;
-    right: .1rem;
+    right: 0.1rem;
     top: 5px;
-    width: .35rem;
-    height: .35rem;
+    width: 0.35rem;
+    height: 0.35rem;
     display: block;
 }
 .popup-centent span.closeBtn img {
@@ -442,14 +443,14 @@ html,body {
     top: 0.9rem;
     bottom: 0;*/
     overflow-y: scroll;
-    -webkit-overflow-scrolling : touch;
+    -webkit-overflow-scrolling: touch;
 }
 
 .put-money .content-box {
     width: 7rem;
     margin: auto;
     margin-top: 0.3rem;
-    border: 1px solid #DCDCDC;
+    border: 1px solid #dcdcdc;
     border-radius: 5px;
     /* padding: 0.5rem 0.35rem 1rem; */
     box-sizing: border-box;
@@ -458,13 +459,13 @@ html,body {
 
 .put-money .content-box .account {
     padding: 0.5rem 0.35rem 0.3rem;
-    border-bottom: 1px solid #DCDCDC;
+    border-bottom: 1px solid #dcdcdc;
 }
 
 .put-money .content-box .account div {
-    font-size:0.3rem;
-    font-family:PingFang-SC-Medium;
-    color:rgba(51,51,51,1); 
+    font-size: 0.3rem;
+    font-family: PingFang-SC-Medium;
+    color: rgba(51, 51, 51, 1);
     align-items: center;
     display: flex;
 }
@@ -473,13 +474,13 @@ html,body {
     width: 0.4rem;
     height: 0.4rem;
     margin-left: 3px;
-    margin-right: 5px; 
+    margin-right: 5px;
 }
 
 .put-money .content-box .account p {
-    font-size:0.2rem;
-    font-family:PingFang-SC-Medium;
-    color:rgba(153,153,153,1);
+    font-size: 0.2rem;
+    font-family: PingFang-SC-Medium;
+    color: rgba(153, 153, 153, 1);
     text-align: center;
 }
 
@@ -488,28 +489,28 @@ html,body {
 }
 
 .put-money .content-box .cash .cash-cue {
-    font-size:0.3rem;
-    font-family:PingFang-SC-Medium;
-    color:rgba(51,51,51,1);
+    font-size: 0.3rem;
+    font-family: PingFang-SC-Medium;
+    color: rgba(51, 51, 51, 1);
 }
 
 .put-money .content-box .cash .cash-cue span {
-    font-size:0.24rem;
-    font-family:PingFang-SC-Regular;
-    color:rgba(153,153,153,1);
+    font-size: 0.24rem;
+    font-family: PingFang-SC-Regular;
+    color: rgba(153, 153, 153, 1);
 }
 .put-money .content-box .cash .cash-cue span.active {
-    color: #F45252;
+    color: #f45252;
 }
 .put-money .content-box .cash .money {
     width: 100%;
     display: block;
-    border-bottom: 1px solid #D2D2D2;
+    border-bottom: 1px solid #d2d2d2;
 }
 .put-money .content-box .cash .money span {
-    font-size:0.6rem;
-    font-family:PingFang-SC-Regular;
-    color:rgba(51,51,51,1);
+    font-size: 0.6rem;
+    font-family: PingFang-SC-Regular;
+    color: rgba(51, 51, 51, 1);
 }
 
 .put-money .content-box .cash .money input {
@@ -519,19 +520,19 @@ html,body {
 }
 
 .put-money .content-box .cash p {
-    font-size:0.3rem;
-    font-family:PingFang-SC-Medium;
-    color:rgba(153,153,153,1);
+    font-size: 0.3rem;
+    font-family: PingFang-SC-Medium;
+    color: rgba(153, 153, 153, 1);
     margin-top: 0.25rem;
 }
 
 .put-money .content-box .cash button {
-    width:4.68rem;
-    height:0.76rem;
-    background:rgba(0,186,134,.5);
+    width: 4.68rem;
+    height: 0.76rem;
+    background: rgba(0, 186, 134, 0.5);
     border-radius: 5px;
     color: #fff;
-    font-size:0.34rem;
+    font-size: 0.34rem;
     border: none;
     margin: auto;
     display: block;
@@ -539,15 +540,14 @@ html,body {
 }
 
 .put-money .content-box .cash button.ative {
-    background:#00BA86;
+    background: #00ba86;
 }
 
-
 .put-money #upper-limit {
     position: absolute;
     width: 3.2rem;
     height: 2.9rem;
-    background: rgba(0,0,0,.6);
+    background: rgba(0, 0, 0, 0.6);
     border-radius: 5px;
     top: 2.8rem;
     left: 2.15rem;
@@ -558,25 +558,23 @@ html,body {
     width: 1rem;
     height: 1rem;
     display: block;
-    margin: .5rem auto;
+    margin: 0.5rem auto;
 }
 
 .put-money #upper-limit p {
-    font-size:0.26rem;
-    font-family:PingFang-SC-Medium;
-    color:rgba(255,255,255,1);
+    font-size: 0.26rem;
+    font-family: PingFang-SC-Medium;
+    color: rgba(255, 255, 255, 1);
     text-align: center;
 }
 
-
-
 .put-money-success .content-box {
-    width:6.9rem;
-    height:5.4rem;
-    background:rgba(255,255,255,1);
+    width: 6.9rem;
+    height: 5.4rem;
+    background: rgba(255, 255, 255, 1);
     border-radius: 5px;
     margin: auto;
-    margin-top: .3rem;
+    margin-top: 0.3rem;
 }
 
 .put-money-success .content-box .box-top {
@@ -588,91 +586,90 @@ html,body {
 
 .put-money-success .content-box .box-top img {
     width: 1rem;
-    margin-top: .6rem;
-    margin-bottom: .3rem;
+    margin-top: 0.6rem;
+    margin-bottom: 0.3rem;
 }
 
 .put-money-success .content-box .box-top p {
-    font-size:0.3rem;
-    font-family:PingFang-SC-Medium;
-    color:rgba(0,186,134,1); 
+    font-size: 0.3rem;
+    font-family: PingFang-SC-Medium;
+    color: rgba(0, 186, 134, 1);
 }
 .put-money-success .content-box .box-top span {
-    font-size:0.24rem;
-    font-family:PingFang-SC-Medium;
-    color:rgba(153,153,153,1);
-    margin-top: .2rem;
+    font-size: 0.24rem;
+    font-family: PingFang-SC-Medium;
+    color: rgba(153, 153, 153, 1);
+    margin-top: 0.2rem;
 }
 .put-money-success .content-box .money-news {
     width: 90%;
-    font-size:0.3rem;
-    font-family:PingFang-SC-Medium;
-    color:rgba(51,51,51,1);
+    font-size: 0.3rem;
+    font-family: PingFang-SC-Medium;
+    color: rgba(51, 51, 51, 1);
     margin: auto;
-    margin-top: .7rem;
-    border-bottom: 1px solid #D2D2D2;
+    margin-top: 0.7rem;
+    border-bottom: 1px solid #d2d2d2;
 }
 .put-money-success .content-box .money-news span {
-    font-size:0.6rem;
-    font-family:PingFang-SC-Bold;
-    color:rgba(51,51,51,1);
+    font-size: 0.6rem;
+    font-family: PingFang-SC-Bold;
+    color: rgba(51, 51, 51, 1);
     margin-left: 5px;
 }
 .put-money-success .goHome {
-    width:5rem;
-    height:0.8rem;
-    background:rgba(0,186,134,1);
-    border-radius:5px;
+    width: 5rem;
+    height: 0.8rem;
+    background: rgba(0, 186, 134, 1);
+    border-radius: 5px;
     margin: auto;
     display: block;
     border: none;
-    font-size:0.36rem;
-    font-family:PingFang-SC-Medium;
-    color:rgba(255,255,255,1);
-    margin-top: .4rem;
+    font-size: 0.36rem;
+    font-family: PingFang-SC-Medium;
+    color: rgba(255, 255, 255, 1);
+    margin-top: 0.4rem;
 }
 
-
 .service-evaluation .page-content {
     background: #fff;
 }
 .service-evaluation .page-content .line {
     height: 5px;
-    background: #F4F4F4;
+    background: #f4f4f4;
 }
 .service-evaluation .page-content .cleaners-news {
     padding: 0.3rem 0 0.3rem 0.3rem;
     background-color: #fff;
 }
 .service-evaluation .page-content .cleaners-news p:nth-child(1) {
-    font-size:0.32rem;
-    font-family:PingFang-SC-Medium;
-    color:rgba(51,51,51,1);
+    font-size: 0.32rem;
+    font-family: PingFang-SC-Medium;
+    color: rgba(51, 51, 51, 1);
 }
 .service-evaluation .page-content .cleaners-news p:nth-child(2) {
-    font-size:0.26rem;
-    font-family:PingFang-SC-Medium;
-    color:rgba(102,102,102,1);
+    font-size: 0.26rem;
+    font-family: PingFang-SC-Medium;
+    color: rgba(102, 102, 102, 1);
 }
 .service-evaluation .evaluate {
     position: relative;
 }
 .service-evaluation .evaluate .evaluate-question-btn {
-    width: .5rem;
-    height: .5rem;
+    width: 0.5rem;
+    height: 0.5rem;
     display: block;
     background: url(../images/service-evaluation/u578.png) no-repeat;
-    background-size: 100%; 
+    background-size: 100%;
     position: absolute;
-    right: .15rem;
-    top: .1rem;
+    right: 0.15rem;
+    top: 0.1rem;
 }
 
 .service-evaluation .evaluate .evaluate-tab {
     display: flex;
     align-items: center;
-    padding: .3rem 0;
-    border-bottom: 1px solid #F4F4F4;
+    padding: 0.3rem 0;
+    border-bottom: 1px solid #f4f4f4;
 }
 .service-evaluation .evaluate .evaluate-tab ul {
     display: flex;
@@ -681,22 +678,22 @@ html,body {
 .service-evaluation .evaluate .evaluate-tab ul li {
     list-style: none;
     display: inline-block;
-    width: .6rem;
-    height: .6rem;
-    margin-right: .3rem;
+    width: 0.6rem;
+    height: 0.6rem;
+    margin-right: 0.3rem;
     background: url(../images/service-evaluation/stars-1.png) no-repeat;
     background-size: 100%;
 }
 .service-evaluation .evaluate .evaluate-tab label {
-    font-size:0.3rem;
-    font-family:PingFang-SC-Medium;
-    color:rgba(51,51,51,1);
-    margin-right: .4rem;
-    margin-left: .3rem;
+    font-size: 0.3rem;
+    font-family: PingFang-SC-Medium;
+    color: rgba(51, 51, 51, 1);
+    margin-right: 0.4rem;
+    margin-left: 0.3rem;
 }
 .service-evaluation .evaluate .evaluate-tab ul li.ative {
-    width: .6rem;
-    height: .6rem;
+    width: 0.6rem;
+    height: 0.6rem;
     background: url(../images/service-evaluation/stars-2.png) no-repeat;
     background-size: 100%;
 }
@@ -706,27 +703,27 @@ html,body {
     height: 2rem;
     display: block;
     margin: auto;
-    margin-top: .4rem;
+    margin-top: 0.4rem;
     resize: none;
-    background: #F4F4F4;
+    background: #f4f4f4;
     border: none;
-    padding: .2rem;
+    padding: 0.2rem;
     box-sizing: border-box;
-    font-size: .3rem;
-    color:rgba(153,153,153,1);
-}    
+    font-size: 0.3rem;
+    color: rgba(153, 153, 153, 1);
+}
 
 .service-evaluation .submitBtn {
-    width:5rem;
-    height:0.8rem;
-    background:rgba(0,186,134,1);
+    width: 5rem;
+    height: 0.8rem;
+    background: rgba(0, 186, 134, 1);
     border-radius: 5px;
     margin: auto;
     display: block;
     border: none;
-    font-size:0.36rem;
-    font-family:PingFang-SC-Medium;
-    color:rgba(255,255,255,1);
+    font-size: 0.36rem;
+    font-family: PingFang-SC-Medium;
+    color: rgba(255, 255, 255, 1);
     letter-spacing: 10px;
     margin-top: 1.5rem;
 }
@@ -736,22 +733,16 @@ html,body {
     width: 90%;
     left: 5%;
     top: 7rem;
-    font-size: .3rem;
-    border: 1px solid #DDD;
+    font-size: 0.3rem;
+    border: 1px solid #ddd;
     border-radius: 5px;
-    padding: .3rem;
+    padding: 0.3rem;
     box-sizing: border-box;
 }
 .service-evaluation #popup-question .popup-body p {
-    line-height: .5rem;
+    line-height: 0.5rem;
 }
 
-
-
-
-
-
-
 .service-evaluation-status .evaluation-status-icon {
     width: 2rem;
     display: block;
@@ -759,11 +750,11 @@ html,body {
     margin-top: 1.8rem;
 }
 .service-evaluation-status .evaluation-status-box span {
-    font-size:0.36rem;
-    font-family:PingFang-SC-Medium;
-    color:rgba(0,186,134,1);  
+    font-size: 0.36rem;
+    font-family: PingFang-SC-Medium;
+    color: rgba(0, 186, 134, 1);
     display: block;
     margin: auto;
     margin-top: 0.3rem;
     text-align: center;
-}
\ No newline at end of file
+}
diff --git a/src/components/back-header.vue b/src/components/back-header.vue
index ce7859b..8309c33 100644
--- a/src/components/back-header.vue
+++ b/src/components/back-header.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="header">
-		<img src="../assets/images/icon/arrow-left.png" />
+		<img src="../assets/images/icon/arrow-left.png" @click="back()" />
 		<div class="title">
 			<slot></slot>
 		</div>
@@ -13,6 +13,11 @@ export default {
             type: String,
             default: ""
         }
+    },
+    methods: {
+        back() {
+            location.href = this.path;
+        }
     }
 };
 </script>
diff --git a/src/components/order-item.vue b/src/components/order-item.vue
index 12d9bc4..5b62d4b 100644
--- a/src/components/order-item.vue
+++ b/src/components/order-item.vue
@@ -1,37 +1,103 @@
 <template>
-	<div class="item">
+	<router-link tag="div" class="item" :to="{name:'orderDetail',params:{id:id}}">
 		<div class="item-top">
-			<div class="item-top-address">广州站</div>
-			<div class="item-top-state">已取消</div>
+			<div class="item-top-box">
+				<img src="../assets/images/order-list/address.png">
+				<div class="item-top-address">{{address}}</div>
+			</div>
+			<div class="item-top-state" :class="'state'+status">{{state}}</div>
 		</div>
 		<div class="item-main">
-			<img src="">
+			<img :src="img">
 			<div class="item-main-text">
-				<div class="name">5A至臻家·体验卡</div>
-				<div class="tips">104次×4小时全屋高端保洁</div>
+				<div class="name">{{name}}</div>
+				<div class="tips">{{desc}}</div>
 				<div class="tag-box">
-					<i class="tag">新人优惠</i>
-					<i class="tag">新人优惠</i>
+					<i class="tag" v-for="item in labelList" v-if="item.labelText">{{item.labelText}}</i>
 				</div>
 				<div class="price-box">
-					<div class="box-left">¥18999</div>
+					<div class="box-left">¥{{totalPrice}}</div>
 					<div class="box-right">
 						<div class="box-right-text">
 							实付：
 						</div>
-						¥18999
+						¥{{pay}}
 					</div>
 				</div>
 			</div>
 		</div>
-	</div>
+	</router-link>
 </template>
 <script>
 export default {
     data() {
         return {};
     },
-    props: {}
+    props: {
+        address: {
+            type: String,
+            default: ""
+        },
+        status: {
+            type: Number,
+            default: ""
+        },
+        name: {
+            type: String,
+            default: ""
+        },
+        desc: {
+            type: String,
+            default: ""
+        },
+        label: {
+            type: String,
+            default: ""
+        },
+        totalPrice: {
+            type: Number,
+            default: ""
+        },
+        pay: {
+            type: Number,
+            default: ""
+        },
+        img: {
+            type: String,
+            default: ""
+        },
+        id: {
+            type: String,
+            default: ""
+        }
+    },
+    computed: {
+        state() {
+            let str = "";
+            switch (this.status) {
+                case 0:
+                    str = "待支付";
+                    break;
+                case 10:
+                case 11:
+                    str = "已支付";
+                    break;
+                case 20:
+                    str = "退款中";
+                    break;
+                case 21:
+                    str = "已退款";
+                    break;
+                case 30:
+                    str = "已取消";
+                    break;
+            }
+            return str;
+        },
+        labelList() {
+            return this.label ? JSON.parse(this.label) : "";
+        }
+    }
 };
 </script>
 <style lang="scss" scoped>
@@ -51,12 +117,32 @@ export default {
         padding: 0 0.36rem 0 0.3rem;
         line-height: 1;
         align-items: center;
+        .item-top-box {
+            display: flex;
+            img {
+                width: 0.34rem;
+                height: 0.28rem;
+				margin-right: 0.2rem;
+            }
+        }
         .item-top-address {
         }
         .item-top-state {
             color: #999;
             font-size: 0.28rem;
         }
+        .state0 {
+            color: #fcac21;
+        }
+        .state10 {
+            color: #00ba86;
+        }
+        .state11 {
+            color: #00ba86;
+        }
+        .state20 {
+            color: #fc4f21;
+        }
     }
     .item-main {
         display: flex;
diff --git a/src/main.js b/src/main.js
index d06b627..1c70021 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,38 +1,72 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 
-import Vue from 'vue'
-import { WechatPlugin, AjaxPlugin, LoadingPlugin, ToastPlugin, AlertPlugin } from 'vux'
-import App from './App'
-import router from './router'
-import '@/assets/iconfont.css'
-import '@/assets/styles/main.scss'
-import '@/assets/styles/style.css'
-import '@/common/rem.js'
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
-import $ from 'jquery'
-import VueAwesomeSwiper from 'vue-awesome-swiper'
-import '@/assets/styles/swiper.css'
+import Vue from "vue";
+import { WechatPlugin, LoadingPlugin, ToastPlugin, AlertPlugin } from "vux";
+import App from "./App";
+import router from "./router";
+import "@/assets/iconfont.css";
+import "@/assets/styles/main.scss";
+import "@/assets/styles/style.css";
+import "@/common/rem.js";
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
+import $ from "jquery";
+import VueAwesomeSwiper from "vue-awesome-swiper";
+import "@/assets/styles/swiper.css";
 //import wx from 'weixin-js-sdk'
 //import axios from 'axios'
-import '@/models/wxShare.js'
+import "@/models/wxShare.js";
 
-Vue.config.productionTip = false
-Vue.use(WechatPlugin)
-Vue.use(AjaxPlugin)
-Vue.use(LoadingPlugin)
-Vue.use(ToastPlugin)
-Vue.use(AlertPlugin)
+Vue.config.productionTip = false;
+Vue.use(WechatPlugin);
+Vue.use(LoadingPlugin);
+Vue.use(ToastPlugin);
+Vue.use(AlertPlugin);
 
-Vue.use(VueAwesomeSwiper)
+Vue.use(VueAwesomeSwiper);
+Vue.mixin({
+    data() {
+        return {
+            imghost: "http://medou.oss-cn-shenzhen.aliyuncs.com/"
+        };
+    },
+    methods: {
+        isWeixin() {
+            var ua = navigator.userAgent.toLowerCase();
+            return ua.indexOf("micromessenger") !== -1;
+        },
+        setToken() {
+            var strCookie = document.cookie;
+            var cookieName = "1hjz_mall_login_access_token=";
+            var token = strCookie.slice(cookieName.length);
+            sessionStorage.setItem("token", token);
+        },
+        getParam(name) {
+            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+            var reg_rewrite = new RegExp("(^|/)" + name + "/([^/]*)(/|$)", "i");
+            var r = window.location.search.substr(1).match(reg);
+            var q = window.location.pathname.substr(1).match(reg_rewrite);
+            if (r != null) {
+                return unescape(r[2]);
+            } else if (q != null) {
+                return unescape(q[2]);
+            } else {
+                return null;
+            }
+        }
+    },
+    mounted() {
+        this.setToken();
+    }
+});
 
 var vue = new Vue({
-	el: '#app',
-	router,
-	template: '<App/>',
-	components: {
-		App
-	}
-})
-//vue.wxShare();
\ No newline at end of file
+    el: "#app",
+    router,
+    template: "<App/>",
+    components: {
+        App
+    }
+});
+//vue.wxShare();
diff --git a/src/models/home-model.js b/src/models/home-model.js
index a1d549c..4fd1f2a 100644
--- a/src/models/home-model.js
+++ b/src/models/home-model.js
@@ -1,28 +1,21 @@
-
-import utilsModel from './utils-model'
-import homeApi from '../api/home'
+import utilsModel from "./utils-model";
+import homeApi from "../api/home";
 
 export default {
-	getGoods : (params) => 
-        utilsModel
-        .config(homeApi.getGoods)
-        .request({
-	        params : params,
+    getGoods: params =>
+        utilsModel.config(homeApi.getGoods).request({
+            params: params
         }),
-    getAddress : () => 
-        utilsModel
-        .config(homeApi.getAddress)
-        .request({
-           	headers: {
-            	'version': '2.50'
+    getAddress: () =>
+        utilsModel.config(homeApi.getAddress).request({
+            headers: {
+                version: "2.5.0"
             }
         }),
-    getdefaultAddress : () =>
-    	utilsModel
-        .config(homeApi.getdefaultAddress)
-        .request({
-           	headers: {
-            	'version': '2.50'
+    getdefaultAddress: () =>
+        utilsModel.config(homeApi.getdefaultAddress).request({
+            headers: {
+                version: "2.5.0"
             }
-        }),
-}
\ No newline at end of file
+        })
+};
diff --git a/src/models/order-model.js b/src/models/order-model.js
new file mode 100644
index 0000000..a8fe206
--- /dev/null
+++ b/src/models/order-model.js
@@ -0,0 +1,41 @@
+import utilsModel from "./utils-model";
+import order from "../api/order.js";
+
+export default {
+    getList: (params, version) =>
+        utilsModel.config(order.getList).request({
+            params: params,
+            headers: {
+                version: version
+            }
+        }),
+    getDetail: params =>
+        utilsModel.config(order.getDetail).request({
+            params: params
+        }),
+    checkOrder: data =>
+        utilsModel.config(order.checkOrder).request({
+            data: data,
+            headers: {
+                "Content-Type": "application/x-www-form-urlencoded"
+            }
+        }),
+    cancel: data =>
+        utilsModel.config(order.cancel).request({
+            data: data
+        }),
+    addOrder: data =>
+        utilsModel.config(order.addOrder).request({
+            data: data,
+            headers: {
+                "Content-Type": "application/x-www-form-urlencoded"
+            }
+        }),
+    payMoney: data =>
+        utilsModel.config(order.payMoney).request({
+            data: data,
+            headers: {
+                "Content-Type": "application/x-www-form-urlencoded"
+            }
+        })
+};
diff --git a/src/models/utils-model.js b/src/models/utils-model.js
index f3bec9e..cfc175a 100644
--- a/src/models/utils-model.js
+++ b/src/models/utils-model.js
@@ -1,37 +1,44 @@
-import configs from '../configs';
-import axios from 'axios'
-import {
-    bus
-} from '../bus.js'
+import configs from "../configs";
+import axios from "axios";
+import { bus } from "../bus.js";
 
 // axios.defaults.withCredentials = true;
 // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
 // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';//配置请求头
 
+let instance = axios.create();
 // 添加一个请求拦截器
-// axios.interceptors.request.use(function (config) {
-//     console.log(config);
-    
-//     return config;
-// }, function (error) {
-//     // Do something with request error
-//     return Promise.reject(error);
-// });
-
+instance.interceptors.request.use(
+    config => {
+        // let token = sessionStorage.getItem("token") || "";
+        // if (token) {
+        //     config.headers.encodeToken = token;
+        // }
+        config.headers.encodeToken =
+            "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1NzEyMjQ3Mjc1OTcsInBheWxvYWQiOiJcIjE4MDYwMTE0MDkyODM4NDEwMXwxNTM5Njg4NzI3NTc5XCIifQ.sJBefUfJwybtWTNauW3j-w8VA6BlV56ASKmgQvDJc_Y";
+        console.log(config);
+        return config;
+    },
+    err => {
+        return Promise.reject(err);
+    }
+);
 // 添加一个响应拦截器
-axios.interceptors.response.use(function (response) {
-    if (response.data && response.data.errcode) {
-        if (parseInt(response.data.errcode) === 40001) {
-            //未登录
-            bus.$emit('goto', '/login')
+instance.interceptors.response.use(
+    function(response) {
+        if (response.data && response.data.errcode) {
+            if (parseInt(response.data.errcode) === 40001) {
+                //未登录
+                bus.$emit("goto", "/login");
+            }
         }
+        return response;
+    },
+    function(error) {
+        // Do something with response error
+        return Promise.reject(error);
     }
-
-    return response;
-}, function (error) {
-    // Do something with response error
-    return Promise.reject(error);
-});
+);
 
 //基地址
 let basePath = configs.baseURL;
@@ -47,74 +54,80 @@ let basePath = configs.baseURL;
  *
  * Inspired by pathRexp in visionmedia/express/lib/utils.js.
  */
-const pathReplace = function (path, opts) {
+const pathReplace = function(path, opts) {
     const ret = {
         originalPath: path,
         patternPath: path
-    }
+    };
 
     path = path
-        .replace(/([().])/g, '\\$1')
-        .replace(/(\/)?:(\w+)(\*\?|[?*])?/g, function (_, slash, key, option) {
-            const optional = (option === '?' || option === '*?') ? '?' : null;
-            const star = (option === '*' || option === '*?') ? '*' : null;
-            slash = slash || '';
-            opts[key] = typeof opts[key] === 'number' ? opts[key].toString() : opts[key];
-            return '' +
-                (optional ? '' : slash) +
-                (opts[key] != '' ?
-                    opts[key] : '${' + key + '}') +
-                (optional || '');
-        })
+        .replace(/([().])/g, "\\$1")
+        .replace(/(\/)?:(\w+)(\*\?|[?*])?/g, function(_, slash, key, option) {
+            const optional = option === "?" || option === "*?" ? "?" : null;
+            const star = option === "*" || option === "*?" ? "*" : null;
+            slash = slash || "";
+            opts[key] =
+                typeof opts[key] === "number"
+                    ? opts[key].toString()
+                    : opts[key];
+            return (
+                "" +
+                (optional ? "" : slash) +
+                (opts[key] != "" ? opts[key] : "${" + key + "}") +
+                (optional || "")
+            );
+        });
 
     ret.patternPath = path;
     return ret;
-}
+};
 
 // 处理http请求
-const config = function (config, params) {
-
+const config = function(config, params) {
     //提取接口url路径
     const url = basePath + pathReplace(config.url, params || {}).patternPath;
 
     return {
         // 发送请求
-        request: function (obj) {
+        request: function(obj) {
             // 全部接口带token
-            obj = obj || {}
-            obj.params = obj.params || {}
+            obj = obj || {};
+            obj.params = obj.params || {};
             // obj.params.token = localStorage.getItem('user_key')
-            
+
             //整合请求配置
             let newConfig = Object.assign({}, obj || {}, config, {
-                url: url,
+                url: url
             });
-//          console.log(newConfig)
+            //          console.log(newConfig)
             // newConfig.headers.Authorization=params.token
             //执行http接口请求
-            return axios(newConfig).then(successCallback, errorCallback);
+            return instance(newConfig).then(successCallback, errorCallback);
         }
-    }
-}
+    };
+};
 
 // 请求成功回调
-const successCallback = (result) => {
+const successCallback = result => {
+    // if (result.data.code === 666) {
+    //     sessionStorage.removeItem("token");
+    // }
     // -402用户认证失败，请重新登录 -101没有操作权限
     if (result.data.error_code === -402) {
-        sessionStorage.clear()
-        localStorage.removeItem('user_key')
+        sessionStorage.clear();
+        localStorage.removeItem("user_key");
         //未登录
-        bus.$emit('goto', '/login')
+        bus.$emit("goto", "/login");
     }
 
-    return result.data
-}
+    return result.data;
+};
 
 // 请求失败回调
-const errorCallback = (result) => {
-    return result.data
-}
+const errorCallback = result => {
+    return result.data;
+};
 
 export default {
     config: config
-}
\ No newline at end of file
+};
diff --git a/src/models/wxShare.js b/src/models/wxShare.js
index e1e9a42..63fd0b0 100644
--- a/src/models/wxShare.js
+++ b/src/models/wxShare.js
@@ -1,96 +1,93 @@
-
-import Vue from 'vue'
-import wx from 'weixin-js-sdk'
-import axios from 'axios'
+import Vue from "vue";
+import wx from "weixin-js-sdk";
+import axios from "axios";
 import wxShareModel from "../models/wxShare-model.js";
 import homeApi from "../models/home-model.js";
 //微信分享功能
 
-
 Vue.prototype.wxShare = function(params) {
-	var params = params || {}
-	wxShareModel.getShare(params).then(response => {
-		console.log(response)
-		if ( response.code != 0 ){
-			return;
-		}
-		var jsApiSignConfig = response.data.jsApiSignConfig
-		var shareConfig = response.data.shareConfig
-		
-		wx.config({
-			debug: false, // 开启调试模式,开发时可以开启  
-			appId: jsApiSignConfig.appId, // 必填，公众号的唯一标识   由接口返回
-			timestamp: jsApiSignConfig.timestamp, // 必填，生成签名的时间戳 由接口返回
-			nonceStr: jsApiSignConfig.nonceStr, // 必填，生成签名的随机串 由接口返回
-			signature: jsApiSignConfig.signature, // 必填，签名 由接口返回
-			jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone']
-		})
+    var params = params || {};
+    wxShareModel.getShare(params).then(response => {
+        if (response.code != 0) {
+            return;
+        }
+        var jsApiSignConfig = response.data.jsApiSignConfig;
+        var shareConfig = response.data.shareConfig;
+
+        wx.config({
+            debug: false, // 开启调试模式,开发时可以开启
+            appId: jsApiSignConfig.appId, // 必填，公众号的唯一标识   由接口返回
+            timestamp: jsApiSignConfig.timestamp, // 必填，生成签名的时间戳 由接口返回
+            nonceStr: jsApiSignConfig.nonceStr, // 必填，生成签名的随机串 由接口返回
+            signature: jsApiSignConfig.signature, // 必填，签名 由接口返回
+            jsApiList: [
+                "onMenuShareAppMessage",
+                "onMenuShareTimeline",
+                "onMenuShareQQ",
+                "onMenuShareWeibo",
+                "onMenuShareQZone"
+            ]
+        });
 
-		wx.ready(() => {
-			//获取“分享给朋友”按钮点击状态及自定义分享内容接口
-			wx.onMenuShareAppMessage({ // 分享给朋友
-				title: shareConfig.title, // 分享标题
-				desc:  shareConfig.desc, // 分享描述
-				link: shareConfig.url, // 分享链接 默认以当前链接
-				imgUrl: shareConfig.img, // 分享图标
-				success: function(res){
-				}
-			})
-			//转发到朋友圈
+        wx.ready(() => {
+            //获取“分享给朋友”按钮点击状态及自定义分享内容接口
+            wx.onMenuShareAppMessage({
+                // 分享给朋友
+                title: shareConfig.title, // 分享标题
+                desc: shareConfig.desc, // 分享描述
+                link: shareConfig.url, // 分享链接 默认以当前链接
+                imgUrl: shareConfig.img, // 分享图标
+                success: function(res) {}
+            });
+            //转发到朋友圈
             wx.onMenuShareTimeline({
                 title: shareConfig.title, // 分享标题
-				desc:  shareConfig.desc, // 分享描述
-				link: shareConfig.url, // 分享链接 默认以当前链接
-				imgUrl: shareConfig.img, // 分享图标
-				success: function(res){
-				}
+                desc: shareConfig.desc, // 分享描述
+                link: shareConfig.url, // 分享链接 默认以当前链接
+                imgUrl: shareConfig.img, // 分享图标
+                success: function(res) {}
             });
             //微信分享qq
             wx.onMenuShareQQ({
-				title: shareConfig.title, // 分享标题
-				desc:  shareConfig.desc, // 分享描述
-				link: shareConfig.url, // 分享链接 默认以当前链接
-				imgUrl: shareConfig.img, // 分享图标
-				success: function(res){
-				}
-			});
-			
-			//获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
-			wx.onMenuShareWeibo({
-				title: shareConfig.title, // 分享标题
-				desc:  shareConfig.desc, // 分享描述
-				link: shareConfig.url, // 分享链接 默认以当前链接
-				imgUrl: shareConfig.img, // 分享图标
-				success: function(res){
-				}
-			});
-			
-			//获取“分享到QQ空间”按钮点击状态及自定义分享内容接口（即将废弃）
-			wx.onMenuShareQZone({
-				title: shareConfig.title, // 分享标题
-				desc:  shareConfig.desc, // 分享描述
-				link: shareConfig.url, // 分享链接 默认以当前链接
-				imgUrl: shareConfig.img, // 分享图标
-				success: function(res){
-				}
-			});
-		})
-	})
-	
-}
+                title: shareConfig.title, // 分享标题
+                desc: shareConfig.desc, // 分享描述
+                link: shareConfig.url, // 分享链接 默认以当前链接
+                imgUrl: shareConfig.img, // 分享图标
+                success: function(res) {}
+            });
 
+            //获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
+            wx.onMenuShareWeibo({
+                title: shareConfig.title, // 分享标题
+                desc: shareConfig.desc, // 分享描述
+                link: shareConfig.url, // 分享链接 默认以当前链接
+                imgUrl: shareConfig.img, // 分享图标
+                success: function(res) {}
+            });
+
+            //获取“分享到QQ空间”按钮点击状态及自定义分享内容接口（即将废弃）
+            wx.onMenuShareQZone({
+                title: shareConfig.title, // 分享标题
+                desc: shareConfig.desc, // 分享描述
+                link: shareConfig.url, // 分享链接 默认以当前链接
+                imgUrl: shareConfig.img, // 分享图标
+                success: function(res) {}
+            });
+        });
+    });
+};
 
 //Vue.prototype.wxShares = function(params) {
 //	var wxconfigApi = 'http://1hjz.3ncto.com.cn/mall/web/share/config';
 //	axios.get(wxconfigApi,{params:params}).then(function(response) {
-//		
+//
 //		var response = response
 //		console.log('1111',response)
 //		var jsApiSignConfig = response.data.data.jsApiSignConfig
 //		var shareConfig = response.data.data.shareConfig
-//		
+//
 //		wx.config({
-//			debug: false, // 开启调试模式,开发时可以开启  
+//			debug: false, // 开启调试模式,开发时可以开启
 //			appId: jsApiSignConfig.appId, // 必填，公众号的唯一标识   由接口返回
 //			timestamp: jsApiSignConfig.timestamp, // 必填，生成签名的时间戳 由接口返回
 //			nonceStr: jsApiSignConfig.nonceStr, // 必填，生成签名的随机串 由接口返回
@@ -126,7 +123,7 @@ Vue.prototype.wxShare = function(params) {
 //				success: function(res){
 //				}
 //			});
-//			
+//
 //			//获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
 //			wx.onMenuShareWeibo({
 //				title: shareConfig.title, // 分享标题
@@ -136,7 +133,7 @@ Vue.prototype.wxShare = function(params) {
 //				success: function(res){
 //				}
 //			});
-//			
+//
 //			//获取“分享到QQ空间”按钮点击状态及自定义分享内容接口（即将废弃）
 //			wx.onMenuShareQZone({
 //				title: shareConfig.title, // 分享标题
@@ -147,13 +144,13 @@ Vue.prototype.wxShare = function(params) {
 //				}
 //			});
 //		})
-//		
-//		
+//
+//
 //
 //
 //	})
 //	.catch(function(error) {
 //		console.log(error);
 //	});
-//	
-//}
\ No newline at end of file
+//
+//}
diff --git a/src/router/index.js b/src/router/index.js
index 4d8a218..d09ffc8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -76,7 +76,7 @@ let router = new Router({
             component: resolve => require(["@/view/order-check.vue"], resolve)
         },
         {
-            path: "/order-detail",
+            path: "/order-detail/:id",
             name: "orderDetail",
             component: resolve => require(["@/view/order-detail.vue"], resolve)
         },
diff --git a/src/view/home.vue b/src/view/home.vue
index c3fcca6..b582c09 100644
--- a/src/view/home.vue
+++ b/src/view/home.vue
@@ -308,7 +308,7 @@ export default {
         }
     },
     mounted() {
-        //异步加载
+		//异步加载
         this.getdefaultAddress();
         this.getAddress();
         this.ShareWenXin();
@@ -529,7 +529,7 @@ export default {
 }
 .home .page-content .new-card .card-list li .right .card-name i {
     font-style: normal;
-	line-height: 1.5;
+    line-height: 1.5;
     background: rgba(255, 242, 229, 1);
     padding: 0.05rem 0.1rem;
     // line-height: 0.28rem;
diff --git a/src/view/month-card.vue b/src/view/month-card.vue
index 05be869..04dce48 100644
--- a/src/view/month-card.vue
+++ b/src/view/month-card.vue
@@ -117,8 +117,8 @@ export default {
                         }
                         that.getData = result.response;
                     } else {
-                        //console.log(result.msg);
-                        alert(result.msg);
+                        console.log(result.msg);
+                        // alert(result.msg);
                     }
                 });
         },
@@ -146,7 +146,7 @@ export default {
                 if (result.code === 0 || result.code === 3) {
                     window.history.go(0);
                 } else if (result.code === 666) {
-                    that.$vux.toast.text("您还没登录，请先登录!", "middle");
+					that.$vux.toast.text("您还没登录，请先登录!", "middle");
                     setTimeout(function() {
                         window.location.href =
                             locationUrl +
@@ -161,7 +161,7 @@ export default {
                     ) {
                         result.msg = "操作失败，请刷新重试";
                     }
-                    alert(result.msg);
+                    // alert(result.msg);
                 }
             });
         },
@@ -182,7 +182,7 @@ export default {
         }
     },
     mounted() {
-        // 初始化
+		// 初始化
         this.handleInit();
         this.wxShare({
             couponNo: this.batchNo,
diff --git a/src/view/order-check.vue b/src/view/order-check.vue
index f737eb4..f74d1f9 100644
--- a/src/view/order-check.vue
+++ b/src/view/order-check.vue
@@ -1,24 +1,24 @@
 <template>
 	<div class="order-check-whole">
-		<back-header>
+		<back-header :path="'/mall/web/vgoods/detail/'+goodsNo">
 			订单确认
 		</back-header>
 		<div class="top">
 			<div class="goods-container">
-				<img src="">
+				<img :src="imghost+info.goodsImgUrl">
 				<div class="goods-main-container">
-					<div class="name">高端保洁铂金月卡</div>
+					<div class="name">{{info.goodsName}}</div>
 					<div class="box">
-						<div class="box-text">1次×4小时高端保洁 1次×4小时高端保洁 1次×4小时高端保洁 1次×4小时高端保洁 1次×4小时高端保洁 </div>
-						<div class="box-price">¥39911111</div>
+						<div class="box-text">{{info.shortDesc}}</div>
+						<div class="box-price">¥{{info.totalPrice/100}}</div>
 					</div>
 				</div>
 			</div>
-			<div class="gift-container">
-				<div class="gift-item">
+			<div class="gift-container" v-if="info.gifts&&info.gifts.length>0">
+				<div class="gift-item" v-for="item in info.gifts">
 					<div class="text">【赠品】</div>
-					<div class="name">高端保洁铂金月卡  高端保洁铂金月卡 高端保洁铂金月卡 高端保洁铂金月卡 高端保洁铂金月卡 高端保洁铂金月卡</div>
-					<div class="num">X1</div>
+					<div class="name">{{item.name}}</div>
+					<div class="num">x{{item.num}}</div>
 				</div>
 			</div>
 		</div>
@@ -28,50 +28,231 @@
 				服务区域：
 			</div>
 			<div class="area-text">
-				广州市（天河区、海珠区、番禺区、白云区、越秀区、荔湾区、黄埔区）；佛山市（xxx区、xxx区、xxx区）
+				{{info.serviceAreaStr}}
 			</div>
 		</div>
-		<div class="coupon-container">
+		<div class="coupon-container" @click="go()">
 			<div class="coupon-left">
 				<div class="left-box">
-					<img src="../assets/images/order-list/location.png">
+					<img src="../assets/images/order-list/coupon.png">
 					<div class="text">
 						优惠券：
 					</div>
-					<div class="name">新人专属券新人专属券新人专属券新人专属券</div>
+					<div class="name" v-if="info.primeCoupon">{{info.primeCoupon.couponName}}</div>
 				</div>
-				<div class="price">-￥400</div>
+				<div class="price" v-if="info.primeCoupon">-￥{{info.primeCoupon.amount}}</div>
 			</div>
 			<img class="icon" src="../assets/images/order-list/arrow.png">
 		</div>
 		<div class="message-container">
 			<div class="title">
-				<img src="../assets/images/order-list/location.png">
+				<img src="../assets/images/order-list/edit.png">
 				留言备注：
 			</div>
-			<textarea placeholder="为了更好地为您服务，请简单说明您家的格局面积与保洁史"></textarea>
+			<textarea v-model="info.text" placeholder="为了更好地为您服务，请简单说明您家的格局面积与保洁史"></textarea>
 		</div>
 		<div class="pay-container">
-			<div class="text">支付方式</div>
+			<div class="text">支付方式：</div>
 			<div class="pay">
-				<img src="">
+				<img src="../assets/images/order-list/wechat.png">
 				微信支付
 			</div>
 		</div>
-		<div class="clause"></div>
+		<div class="clause">
+			<div class="true-box" @click="agree=!agree">
+				<img v-show="agree" src="../assets/images/order-list/true.png">
+			</div>
+			<div @click="agree=!agree">
+				我已阅读并同意
+			</div>
+			<div class="tips" @click="agree=!agree">
+				《一号家政服务协议书》
+			</div>
+		</div>
+		<div class="fill"></div>
+		<div class="button" role="button">
+			<div class="button-text">
+				还需支付：
+				<div class="num">¥{{info.payPrice?info.payPrice/100:''}}</div>
+			</div>
+			<button :disabled="!agree" @click="pay()">立即付款</button>
+		</div>
 	</div>
 </template>
 <script>
 import backHeader from "../components/back-header.vue";
+import orderApi from "../models/order-model.js";
+var qs = require("qs");
 export default {
     data() {
-        return {};
+        return {
+            info: {
+                text: ""
+            },
+            agree: true,
+            goodsNo: ""
+        };
     },
     components: {
         "back-header": backHeader
     },
     methods: {
-        getData() {}
+        getData() {
+            let goodsNo = this.getParam("goodsNo");
+            let couponNo = this.getParam("couponNo");
+            // let orderData = localStorage.getItem("orderData") || "";
+            let goodsVersion = this.getParam("goodsVersion");
+            orderApi
+                .checkOrder(
+                    qs.stringify({
+                        goodsNo: goodsNo,
+                        couponNo: couponNo,
+                        goodsVersion: goodsVersion
+                    })
+                )
+                .then(res => {
+                    if (res.code == 0) {
+                        let data = res.response;
+                        this.info = data;
+                    } else if (res.code == 666) {
+                        this.$vux.toast.text("您还没登录，请先登录!", "middle");
+                        setTimeout(function() {
+                            window.location.href = "/mall/web/user/login";
+                        }, 2000);
+                    } else {
+                        if (
+                            res.msg == "" ||
+                            res.msg == undefined ||
+                            res.msg == null
+                        ) {
+                            res.msg = "操作失败，请刷新重试";
+                        }
+                        this.$vux.toast.text(res.msg, "middle");
+                    }
+                    this.$vux.loading.hide();
+                });
+        },
+        pay() {
+            this.addOrder().then(res => {
+                this.$vux.loading.show({
+                    text: "正在调起支付"
+                });
+                if (this.isWeixin() && res.data.payPrice > 0) {
+                    //微信内打开，直接调起微信公众号支付
+                    this.$vux.loading.hide();
+                    location.href = res.authUrl.replace(
+                        "state=2",
+                        "state=2" + "," + res.data.orderNo
+                    );
+                } else {
+                    var paymentType = res.data.payPrice > 0 ? 7 : 10;
+                    orderApi
+                        .payMoney(
+                            qs.stringify({
+                                orderNo: res.data.orderNo,
+                                paymentType: paymentType
+                            })
+                        )
+                        .then(data => {
+                            this.$vux.loading.hide();
+                            if (data && data.code === 0) {
+                                if (paymentType === 7) {
+                                    var transMessageOutput = data.response;
+                                    var transInfo =
+                                        transMessageOutput.weixinTransParameters;
+                                    if (
+                                        transInfo.prepayid !== "" &&
+                                        transInfo.prepayid !== undefined &&
+                                        transInfo.prepayid != null
+                                    ) {
+                                        window.location.href =
+                                            transInfo.mwebUrl;
+                                    }
+                                } else {
+                                    setTimeout(function() {
+                                        window.location.href =
+                                            "/mall/web/order_index";
+                                    }, 2000);
+                                }
+                            } else if (data.code === 666) {
+                                this.$vux.toast.text(
+                                    "您还没登录，请先登录!",
+                                    "middle"
+                                );
+                                setTimeout(function() {
+                                    window.location.href =
+                                        "/mall/web/user/login";
+                                }, 2000);
+                            } else {
+                                if (
+                                    data.msg === "" ||
+                                    data.msg === undefined ||
+                                    data.msg == null
+                                ) {
+                                    data.msg = "操作失败，请刷新重试";
+                                }
+                                this.$vux.toast.text(data.msg, "middle");
+                                setTimeout(function() {
+                                    window.location.href =
+                                        "/mall/web/order_index";
+                                }, 2000);
+                            }
+                        });
+                }
+            });
+        },
+        addOrder() {
+            let goodsNo = this.getParam("goodsNo");
+            let couponNo = this.getParam("couponNo");
+            let goodsVersion = this.getParam("goodsVersion");
+            let promise = new Promise((resolve, reject) => {
+                orderApi
+                    .addOrder(
+                        qs.stringify({
+                            goodsNo: goodsNo,
+                            goodsNo: goodsNo,
+                            couponNo: couponNo,
+                            goodsVersion: goodsVersion,
+                            remark: this.info.text
+                        })
+                    )
+                    .then(res => {
+                        if (res.code == 0) {
+                            resolve(res.response);
+                        } else if (res.code === 666) {
+                            this.$vux.toast.text(
+                                "您还没登录，请先登录!",
+                                "middle"
+                            );
+                            setTimeout(function() {
+                                window.location.href = "/mall/web/user/login";
+                            }, 2000);
+                        } else if (res.code === 200) {
+                            this.$vux.toast.text(res.msg, "middle");
+                            setTimeout(function() {
+                                window.location.href = "/mall/web/order_index";
+                            }, 2000);
+                        } else {
+                            if (
+                                res.msg === "" ||
+                                res.msg === undefined ||
+                                res.msg == null
+                            ) {
+                                res.msg = "操作失败，请刷新重试";
+                            }
+                            this.$vux.toast.text(res.msg, "middle");
+                        }
+                    });
+            });
+            return promise;
+        },
+        go() {
+            location.href = "/mall/web/coupon_index?" + this.goodsNo;
+        }
+    },
+    mounted() {
+        this.getData();
+        this.goodsNo = this.getParam("goodsNo");
     }
 };
 </script>
@@ -307,15 +488,80 @@ export default {
     background-color: white;
     font-size: 0.3rem;
     line-height: 1;
-	justify-content: space-between;
-	margin-bottom: 0.3rem;
+    justify-content: space-between;
+    margin-bottom: 0.3rem;
     display: flex;
-	align-items: center;
-	.pay{
-		display: flex;
-	}
+    align-items: center;
+    .pay {
+        display: flex;
+        align-items: center;
+        img {
+            width: 0.63rem;
+            margin-right: 0.2rem;
+            height: 0.52rem;
+        }
+    }
+}
+.clause {
+    // width: 100%;
+    padding-left: 0.36rem;
+    display: flex;
+    font-size: 0.28rem;
+    align-items: center;
+    margin-bottom: 0.66rem;
+    line-height: 1;
+    .true-box {
+        width: 0.23rem;
+        height: 0.23rem;
+        margin-right: 0.11rem;
+        border: 0.02rem solid #d0d0d0;
+        border-radius: 0.03rem;
+        position: relative;
+        z-index: 1;
+    }
+    img {
+        position: absolute;
+        left: 0;
+        // right: 0;
+        width: 0.31rem;
+        bottom: 0;
+        z-index: 2;
+        // width: 0.29rem;
+        // height: 0.23rem;
+    }
+    .tips {
+        color: #00ba86;
+    }
 }
-.clause{
-
+.button {
+    width: 100%;
+    height: 1rem;
+    display: flex;
+    position: fixed;
+    bottom: 0;
+    justify-content: space-between;
+    background-color: white;
+    .button-text {
+        flex-grow: 1;
+        display: flex;
+        font-size: 0.3rem;
+        align-items: center;
+        line-height: 1;
+        padding-left: 0.3rem;
+        colo: #333;
+        .num {
+            font-size: 0.36rem;
+            color: #f42525;
+        }
+    }
+    button {
+        width: 3.5rem;
+        height: 1rem;
+        background-color: #00ba86;
+        color: white;
+        font-size: 0.36rem;
+        border-radius: 0px;
+        border: none;
+    }
 }
 </style>
diff --git a/src/view/order-detail.vue b/src/view/order-detail.vue
index 4e35027..ea5345f 100644
--- a/src/view/order-detail.vue
+++ b/src/view/order-detail.vue
@@ -1,100 +1,333 @@
 <template>
 	<div class="order-detail-whole">
-		<back-header style="margin-bottom:0.15rem">
+		<back-header path="/v2/order-list" style="margin-bottom:0.15rem">
 			订单详情
 		</back-header>
 		<div class="goods-box">
 			<div class="item-top">
-				<div class="item-top-address">广州站</div>
-				<div class="item-top-state">已取消</div>
+				<div class="item-top-left">
+					<img src="../assets/images/order-list/address.png">
+					<div class="item-top-address">{{info.merchantName}}</div>
+				</div>
+				<div class="item-top-state">{{stateText}}</div>
 			</div>
 			<div class="item-main">
-				<img src="">
+				<img :src="imghost+info.goodsImgUrl">
 				<div class="item-main-text">
-					<div class="name">5A至臻家·体验卡</div>
+					<div class="name">{{info.goodsName}}</div>
 					<div class="tips-box">
 						<div class="tips">
-							104次×4小时全屋高端保洁
+							{{info.shortDesc}}
 						</div>
-						<div class="price">¥399</div>
+						<div class="price">¥{{info.totalPrice/100}}</div>
 					</div>
 					<div class="tag-box">
-						<i class="tag">新人优惠</i>
-						<i class="tag">新人优惠</i>
+						<i class="tag" v-for="item in labelList" v-if="item.labelText">{{item.labelText}}</i>
+						<!-- <i class="tag">新人优惠</i> -->
 					</div>
 				</div>
 			</div>
-			<div class="gift-box">
-				<div class="gift-item">
+			<div class="gift-box" v-if="info.gifts&&info.gifts.length>0">
+				<div class="gift-item" v-for="item in info.gifts">
 					<div class="text">【赠品】</div>
-					<div class="name">高端保洁铂金月卡</div>
-					<div class="num">x1</div>
+					<div class="name">{{item.goodsName}}</div>
+					<div class="num">x{{item.num}}</div>
 				</div>
 			</div>
 		</div>
 		<div class="message">
 			<div class="message-title">留言备注：</div>
 			<div class="box" role="text">
-				这里是留言内容，下面的的内容是展示超出换行样式的辅导费费大幅度发
+				{{info.remark}}
 			</div>
 		</div>
 		<div class="time-box">
 			<div class="time-item">下单时间：
-				<div class="time">2018-09-25 17:00:00</div>
+				<div class="time">{{info.create}}</div>
 			</div>
 			<div class="time-item">付款时间：
-				<div class="time">2018-09-25 17:00:00</div>
+				<div class="time">{{info.payTime}}</div>
 			</div>
 		</div>
 		<div class="money-box">
 			<div class="money-box-top">
 				<div class="order">
 					<div class="text">订单金额：</div>
-					<div class="num">¥399</div>
+					<div class="num">¥{{info.totalPrice/100}}</div>
 				</div>
 				<div class="discount">
 					<div class="text">
 						<div class="string">
 							优惠减免：
 						</div>
-						<span class="discount-name">(新人专享优惠券)</span>
+						<span class="discount-name" v-if="info.primeCoupon">{{info.primeCoupon.couponName}}</span>
 					</div>
-					<div class="num">¥20</div>
+					<div class="num">¥{{info.couponPrice/100}}</div>
 				</div>
 			</div>
-			<div class="money-box-bottom">
-				<div class="button-box" role="button">
+			<div class="money-box-bottom" :class="{right:state!==0||state!==10}">
+				<div class="button-box" role="button" v-if="state===0" @click="cancel()">
 					取消订单
 				</div>
-				<!-- <div class="button-box" role="button">
+				<div class="button-box" role="button" v-if="state===10" @click="go(3)">
 					申请退款
-				</div> -->
+				</div>
 				<div class="money">
 					实际支付：
-					<div class="money-count">¥379</div>
+					<div class="money-count">¥{{info.payPrice/100}}</div>
 				</div>
 			</div>
 		</div>
 		<div class="fill"></div>
-		<div class="button" role="button">
-			{{buttonText}}
+		<div class="button" role="button" v-if="state==30||state==21" @click="go(1)">
+			重新下单
+		</div>
+		<div class="button" role="button" v-if="state===0" @click="pay()">
+			立即付款
+		</div>
+		<div class="button" role="button" v-if="state==10||state==11" @click="go(2)">
+			预约服务
+		</div>
+		<div class="button" role="button" v-if="state==20">
+			<a href="tel:400-6080100">联系客服</a>
+			<!-- 联系客服 -->
 		</div>
 	</div>
 </template>
 <script>
 import backHeader from "../components/back-header.vue";
+import orderApi from "../models/order-model.js";
 export default {
     data() {
         return {
             state: "",
-            buttonText: "重新下单"
+            stateText: "",
+            orderNo: "",
+            info: {}
         };
     },
     watch: {
-        state(val) {}
+        state(val) {
+            switch (val) {
+                case 0:
+                    this.stateText = "待支付";
+                    break;
+                case 10:
+                case 11:
+                    this.stateText = "已支付";
+                    break;
+                case 20:
+                    this.stateText = "退款中";
+                    break;
+                case 21:
+                    this.stateText = "已退款";
+                    break;
+                case 30:
+                    this.stateText = "已取消";
+                    break;
+            }
+        }
     },
     components: {
         "back-header": backHeader
+    },
+    computed: {
+        labelList() {
+            let str = this.info.smallLabel;
+            return str ? JSON.parse(str) : "";
+        }
+    },
+    methods: {
+        getData() {
+            orderApi
+                .getDetail({
+                    orderNo: this.orderNo
+                })
+                .then(res => {
+                    if (res.code === 0 && res.response.data) {
+                        let info = res.response.data;
+                        info.create = info.createdAt
+                            ? this.getTime(info.createdAt)
+                            : "";
+                        info.payTime = info.payTime
+                            ? this.getTime(info.payTime)
+                            : "";
+                        this.info = JSON.parse(JSON.stringify(info));
+                        this.state = res.response.data.status;
+                    } else if (res.code == 666) {
+                        this.$vux.toast.text("您还没登录，请先登录!", "middle");
+                        setTimeout(function() {
+                            window.location.href = "/mall/web/user/login";
+                        }, 2000);
+                    } else {
+                        if (
+                            res.msg == "" ||
+                            res.msg == undefined ||
+                            res.msg == null
+                        ) {
+                            res.msg = "操作失败，请刷新重试";
+                        }
+                        this.$vux.toast.text(res.msg, "middle");
+                    }
+                    this.$vux.loading.hide();
+                });
+        },
+        getTime(time) {
+            let date = new Date(time);
+            let year = date.getFullYear();
+            let month = this.checkTime(date.getMonth() + 1);
+            let day = this.checkTime(date.getDate());
+            let h = this.checkTime(date.getHours());
+            let m = this.checkTime(date.getMinutes());
+            let s = this.checkTime(date.getSeconds());
+            let str =
+                year + "-" + month + "-" + day + " " + h + ":" + m + ":" + s;
+            return str;
+        },
+        checkTime(i) {
+            if (i < 10) {
+                i = "0" + i;
+            }
+            return i;
+        },
+        cancel() {
+            orderApi
+                .cancel({
+                    orderApi: this.orderNo
+                })
+                .then(res => {
+                    if (res.code == 0) {
+                        this.state = 30;
+                    }
+                });
+        },
+        go(num) {
+            if (num == 1) {
+                location.href = "/mall/web/vgoods/detail/" + this.info.goodsNo;
+            } else if (num == 2) {
+                location.href = "/mall/web/appoint_index";
+            } else if (num == 3) {
+                location.href =
+                    "/mall/web/order_refund?" +
+                    this.info.goodsNo +
+                    "&" +
+                    this.info.orderNo;
+            }
+        },
+        pay() {
+            this.addOrder().then(res => {
+                this.$vux.loading.show({
+                    text: "正在调起支付"
+                });
+                if (isWeixin() && res.data.payPrice > 0) {
+                    //微信内打开，直接调起微信公众号支付
+                    this.$vux.loading.hide();
+                    location.href = res.authUrl.replace(
+                        "state=2",
+                        "state=2" + "," + res.data.orderNo
+                    );
+                } else {
+                    var paymentType = res.data.payPrice > 0 ? 7 : 10;
+                    orderApi
+                        .pay({
+                            orderNo: res.data.orderNo,
+                            paymentType: paymentType
+                        })
+                        .then(data => {
+                            this.$vux.loading.hide();
+                            if (data.code === 0) {
+                                if (paymentType === 7) {
+                                    var transMessageOutput = data.response;
+                                    var transInfo =
+                                        transMessageOutput.weixinTransParameters;
+                                    if (
+                                        transInfo.prepayid !== "" &&
+                                        transInfo.prepayid !== undefined &&
+                                        transInfo.prepayid != null
+                                    ) {
+                                        window.location.href =
+                                            transInfo.mwebUrl;
+                                    }
+                                } else {
+                                    setTimeout(function() {
+                                        window.location.href =
+                                            "/mall/web/order_index";
+                                    }, 2000);
+                                }
+                            } else if (data.code === 666) {
+                                this.$vux.toast.text(
+                                    "您还没登录，请先登录!",
+                                    "middle"
+                                );
+                                setTimeout(function() {
+                                    window.location.href =
+                                        "/mall/web/user/login";
+                                }, 2000);
+                            } else {
+                                if (
+                                    data.msg === "" ||
+                                    data.msg === undefined ||
+                                    data.msg == null
+                                ) {
+                                    data.msg = "操作失败，请刷新重试";
+                                }
+                                this.$vux.toast.text(data.msg, "middle");
+                                setTimeout(function() {
+                                    window.location.href =
+                                        "/mall/web/order_index";
+                                }, 2000);
+                            }
+                        });
+                }
+            });
+        },
+        addOrder() {
+            let goodsNo = this.info.goodsNo;
+            let couponNo = this.info.primeCoupon.couponNo;
+            let orderData = localStorage.getItem("orderData") || "";
+            let data = orderData ? JSON.parse(orderData) : "";
+            let promise = new Promise((resolve, reject) => {
+                orderApi
+                    .addOrder({
+                        goodsNo: goodsNo,
+                        goodsNo: goodsNo,
+                        couponNo: couponNo,
+                        goodsVersion: data.goodsVersion
+                    })
+                    .then(res => {
+                        if (res.code == 0) {
+                            resolve(res.response);
+                        } else if (res.code === 666) {
+                            this.$vux.toast.text(
+                                "您还没登录，请先登录!",
+                                "middle"
+                            );
+                            setTimeout(function() {
+                                window.location.href = "/mall/web/user/login";
+                            }, 2000);
+                        } else if (res.code === 200) {
+                            this.$vux.toast.text(res.msg, "middle");
+                            setTimeout(function() {
+                                window.location.href = "/mall/web/order_index";
+                            }, 2000);
+                        } else {
+                            if (
+                                res.msg === "" ||
+                                res.msg === undefined ||
+                                res.msg == null
+                            ) {
+                                res.msg = "操作失败，请刷新重试";
+                            }
+                            this.$vux.toast.text(res.msg, "middle");
+                        }
+                    });
+            });
+            return promise;
+        }
+    },
+    mounted() {
+        this.orderNo = this.$route.params.id;
+        this.getData();
     }
 };
 </script>
@@ -120,6 +353,15 @@ export default {
         padding: 0 0.36rem 0 0.3rem;
         line-height: 1;
         align-items: center;
+        img {
+            width: 0.34rem;
+            height: 0.28rem;
+            margin-right: 0.2rem;
+        }
+        .item-top-left {
+            display: flex;
+            align-items: center;
+        }
         .item-top-address {
         }
         .item-top-state {
@@ -271,7 +513,7 @@ export default {
 }
 .time-box {
     width: 100%;
-    height: 1.5rem;
+    // height: 1.5rem;
     padding: 0.4rem 0.2rem;
     background-color: #fff;
     box-sizing: border-box;
@@ -365,7 +607,7 @@ export default {
             justify-content: center;
             align-items: center;
             border: 0.01rem solid rgba(220, 220, 220, 1);
-			border-radius:4px;
+            border-radius: 4px;
         }
         .button {
         }
@@ -380,6 +622,9 @@ export default {
             }
         }
     }
+    .right {
+        justify-content: flex-end;
+    }
 }
 .fill {
     width: 100%;
@@ -396,6 +641,9 @@ export default {
     line-height: 1rem;
     color: #00ba85;
     font-size: 0.36rem;
+    a {
+        color: #00ba85;
+    }
 }
 .green {
     background: #00ba86;
diff --git a/src/view/order-list.vue b/src/view/order-list.vue
index be60db2..a03815c 100644
--- a/src/view/order-list.vue
+++ b/src/view/order-list.vue
@@ -1,30 +1,76 @@
 <template>
 	<div class="order-list-whole">
-		<back-header>
+		<back-header path="/mall/web/owner">
 			我的订单
 		</back-header>
 		<div class="state-bar">
-			<div class="state-item" @click="active=''" :class="{active:!active}">全部</div>
-			<div class="state-item" @click="active=1" :class="{active:active==1}">待支付</div>
-			<div class="state-item" @click="active=2" :class="{active:active==2}">已支付</div>
-			<div class="state-item" @click="active=3" :class="{active:active==3}">退款中</div>
-			<div class="state-item" @click="active=4" :class="{active:active==4}">已退款</div>
+			<div class="state-item" @click="active=''" :class="{active:active===''}">全部</div>
+			<div class="state-item" @click="active=0" :class="{active:active===0}">待支付</div>
+			<div class="state-item" @click="active=10" :class="{active:active==10}">已支付</div>
+			<div class="state-item" @click="active=20" :class="{active:active==20}">退款中</div>
+			<div class="state-item" @click="active=21" :class="{active:active==21}">已退款</div>
 		</div>
-		<order-item></order-item>
+		<order-item v-for="item in list" :id="item.orderNo" :pay="item.payPrice/100" :totalPrice="item.totalPrice/100" :name="item.goodsName" :desc="item.shortDesc" :address="item.merchantName" :status="item.status" :img="imghost+item.goodsImgUrl" :label="item.smallLabel"></order-item>
 	</div>
 </template>
 <script>
 import orderItem from "../components/order-item.vue";
 import backHeader from "../components/back-header.vue";
+import orderApi from "../models/order-model.js";
 export default {
     data() {
         return {
-            active: ""
+            active: "",
+            list: []
         };
     },
     components: {
         "back-header": backHeader,
         "order-item": orderItem
+    },
+    watch: {
+        active(val) {
+            this.getData();
+        }
+    },
+    methods: {
+        getData() {
+            this.$vux.loading.show({
+                text: "Loading"
+            });
+            orderApi
+                .getList({
+                    status: this.active
+                })
+                .then(res => {
+                    if (res && res.code == 0) {
+                        this.list = res.response.slice();
+                    } else if (res.code == 666) {
+                        this.$vux.toast.text("您还没登录，请先登录!", "middle");
+                        setTimeout(function() {
+                            window.location.href = "/mall/web/user/login";
+                        }, 2000);
+                    } else {
+                        if (
+                            res.msg == "" ||
+                            res.msg == undefined ||
+                            res.msg == null
+                        ) {
+                            res.msg = "操作失败，请刷新重试";
+                        }
+                        this.$vux.toast.text(res.msg, "middle");
+                    }
+                    this.$vux.loading.hide();
+                });
+        }
+    },
+    mounted() {
+        // this.wxShare({
+        //     merchantNo: merchantNo,
+        //     source: 0,
+        //     url: encodeURIComponent(location.href)
+        // });
+        this.getData();
     }
 };
 </script>