From 77c6edefb3fe2dba3b7363b3e15eea868e6efe48 Mon Sep 17 00:00:00 2001
From: sin <2943460818@qq.com>
Date: Mon, 8 Apr 2019 23:17:14 +0800
Subject: [PATCH] =?UTF-8?q?-=20=E8=AE=A2=E5=8D=95=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mobile-web/src/api/order.js                   |  36 +
 mobile-web/src/api/product.js                 |   8 +-
 mobile-web/src/api/promotion.js               |   6 +-
 mobile-web/src/api/user.js                    |   8 +-
 mobile-web/src/components/page/product.vue    | 146 ++--
 mobile-web/src/config/request.js              |  20 +-
 mobile-web/src/config/router.js               |   7 +
 mobile-web/src/page/product/detail.vue        | 689 +++++++++---------
 .../src/page/shipping/order-success.vue       |  35 +
 mobile-web/src/page/shipping/order.vue        | 273 +++----
 mobile-web/src/page/user/order/list.vue       | 379 ++++++----
 11 files changed, 920 insertions(+), 687 deletions(-)
 create mode 100644 mobile-web/src/api/order.js
 create mode 100644 mobile-web/src/page/shipping/order-success.vue

diff --git a/mobile-web/src/api/order.js b/mobile-web/src/api/order.js
new file mode 100644
index 000000000..c83150619
--- /dev/null
+++ b/mobile-web/src/api/order.js
@@ -0,0 +1,36 @@
+import request from "../config/request";
+
+
+export function getOrderPage(params) {
+  return request({
+    url: '/order-api/users/order/order_page',
+    method: 'get',
+    params: {
+      ...params,
+    }
+  });
+}
+
+export function cancelOrder(id) {
+  return request({
+    url: '/product-api/users/spu/info',
+    method: 'get',
+    params: {
+      id,
+    }
+  });
+}
+
+export function createOrder(params) {
+  return request({
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    url: '/order-api/users/order/create_order',
+    method: 'post',
+    data: {
+      ...params,
+    },
+  });
+}
+
diff --git a/mobile-web/src/api/product.js b/mobile-web/src/api/product.js
index cc9146a60..d6f4946ef 100644
--- a/mobile-web/src/api/product.js
+++ b/mobile-web/src/api/product.js
@@ -2,7 +2,7 @@ import request from "../config/request";
 
 export function getProductCategoryList(pid) {
   return request({
-    url: 'product-api/users/category/list',
+    url: '/product-api/users/category/list',
     method: 'get',
     params: {
       pid
@@ -12,7 +12,7 @@ export function getProductCategoryList(pid) {
 
 export function getProductSpuPage(cid, pageNo, pageSize) {
   return request({
-    url: 'product-api/users/spu/page',
+    url: '/product-api/users/spu/page',
     method: 'get',
     params: {
       cid,
@@ -24,10 +24,10 @@ export function getProductSpuPage(cid, pageNo, pageSize) {
 
 export function getProductSpuInfo(id) {
   return request({
-    url: 'product-api/users/spu/info',
+    url: '/product-api/users/spu/info',
     method: 'get',
     params: {
       id,
     }
   });
-}
\ No newline at end of file
+}
diff --git a/mobile-web/src/api/promotion.js b/mobile-web/src/api/promotion.js
index c44ea1106..f5e1c9a5a 100644
--- a/mobile-web/src/api/promotion.js
+++ b/mobile-web/src/api/promotion.js
@@ -4,7 +4,7 @@ import request from "../config/request";
 
 export function getBannerList() {
   return request({
-    url: 'promotion-api/users/banner/list',
+    url: '/promotion-api/users/banner/list',
     method: 'get',
   });
 }
@@ -13,7 +13,7 @@ export function getBannerList() {
 
 export function getProductRecommendList() {
   return request({
-    url: 'promotion-api/users/product_recommend/list',
+    url: '/promotion-api/users/product_recommend/list',
     method: 'get',
   });
-}
\ No newline at end of file
+}
diff --git a/mobile-web/src/api/user.js b/mobile-web/src/api/user.js
index d0f768ddf..d4c18b37b 100644
--- a/mobile-web/src/api/user.js
+++ b/mobile-web/src/api/user.js
@@ -74,14 +74,14 @@ export function ExchangeCoupon(code){
 
 export function getUserInfo() {
   return request({
-    url: 'user-api/users/user/info',
+    url: '/user-api/users/user/info',
     method: 'get',
   });
 }
 
 export function doUserUpdateNickname(nickname) {
   return request({
-    url: 'user-api/users/user/update_nickname',
+    url: '/user-api/users/user/update_nickname',
     method: 'post',
     params: {
       nickname,
@@ -91,7 +91,7 @@ export function doUserUpdateNickname(nickname) {
 
 export function doPassportMobileRegister(mobile, code) {
   return request({
-    url: 'user-api/users/passport/mobile/register',
+    url: '/user-api/users/passport/mobile/register',
     method: 'post',
     params: {
       mobile,
@@ -102,7 +102,7 @@ export function doPassportMobileRegister(mobile, code) {
 
 export function doPassportMobileSendRegisterCode(mobile) {
   return request({
-    url: 'user-api/users/passport/mobile/send_register_code',
+    url: '/user-api/users/passport/mobile/send_register_code',
     method: 'post',
     params: {
       mobile,
diff --git a/mobile-web/src/components/page/product.vue b/mobile-web/src/components/page/product.vue
index 025f14441..1fca9acff 100644
--- a/mobile-web/src/components/page/product.vue
+++ b/mobile-web/src/components/page/product.vue
@@ -1,79 +1,89 @@
 <template>
-<div>
-    <ul :class="'cap-goods-list__container cap-goods-list__container--'+data.classname+' cap-goods-list__container--'+data.ParameterDictionary.showtype+'   '+(data.ParameterDictionary.type=='6'?'nowrap':'')" >
-        <li v-if="productlist.length==0" style="width:100%;height:150px;border:0px;">
-            <div style="width:100%;height:150px;"></div>
-        </li>
-        <li v-for="(item,index) in productlist" :key="index" :class="'cap-goods-list__wrapper  '+(data.ParameterDictionary.type=='3'?(index%3==0?'cap-goods-list__wrapper--hybrid-big ':'cap-goods-list__wrapper--hybrid-small '):'')">
-            <router-link :class="'cap-goods-list__item cap-goods-list__item--'+data.classname+' '+data.ParameterDictionary.showtype+' '+data.aclass" :to="'/product/'+item.id">
-                <div class="cap-goods-list__photo">
-                    <img class="cap-goods-list__img lazy lazyload" v-lazy="item.imageURL+'?w='+((data.ParameterDictionary.type=='1'||data.ParameterDictionary.type=='3')?'750':'375')" />
-                </div>
-                <div :class="'cap-goods-list__info has-title has-price '+(data.ParameterDictionary.showtype == 'card'?'has-btn':'')">
-                    <h3 class="title">{{item.title}}</h3>
-                    <p class="sale-info">
-                        <span class="sale-price">¥ {{item.price}}</span>
-                    </p>
-                </div>
-                <div v-if="data.ParameterDictionary.showtype == 'card'" class="cap-goods-list__buy-btn-wrapper cap-goods-list__buy-btn-wrapper--4">
-                    <button class="cap-goods-list__buy-btn-4 van-button van-button--default van-button--small">{{data.ParameterDictionary.buttonvalue}}</button>
-                </div>
-            </router-link>
-        </li>
+  <div>
+    <ul
+      :class="'cap-goods-list__container cap-goods-list__container--'+data.classname+' cap-goods-list__container--'+data.ParameterDictionary.showtype+'   '+(data.ParameterDictionary.type=='6'?'nowrap':'')">
+      <li v-if="productlist.length==0" style="width:100%;height:150px;border:0px;">
+        <div style="width:100%;height:150px;"></div>
+      </li>
+      <li v-for="(item,index) in productlist" :key="index"
+          :class="'cap-goods-list__wrapper  '+(data.ParameterDictionary.type=='3'?(index%3==0?'cap-goods-list__wrapper--hybrid-big ':'cap-goods-list__wrapper--hybrid-small '):'')">
+        <router-link
+          :class="'cap-goods-list__item cap-goods-list__item--'+data.classname+' '+data.ParameterDictionary.showtype+' '+data.aclass"
+          :to="'/product/'+item.id">
+          <div class="cap-goods-list__photo">
+            <img class="cap-goods-list__img lazy lazyload"
+                 v-lazy="item.imageURL+'?w='+((data.ParameterDictionary.type=='1'||data.ParameterDictionary.type=='3')?'750':'375')"/>
+          </div>
+          <div
+            :class="'cap-goods-list__info has-title has-price '+(data.ParameterDictionary.showtype == 'card'?'has-btn':'')">
+            <h3 class="title">{{item.title}}</h3>
+            <p class="sale-info">
+              <span class="sale-price">¥ {{item.price}}</span>
+            </p>
+          </div>
+          <div v-if="data.ParameterDictionary.showtype == 'card'"
+               class="cap-goods-list__buy-btn-wrapper cap-goods-list__buy-btn-wrapper--4">
+            <button
+              class="cap-goods-list__buy-btn-4 van-button van-button--default van-button--small">
+              {{data.ParameterDictionary.buttonvalue}}
+            </button>
+          </div>
+        </router-link>
+      </li>
     </ul>
     <div style="clear:both;"></div>
-    </div>
+  </div>
 </template>
 
 <script>
-import {getProduct} from "../../api/page.js";
+  import {getProduct} from "../../api/page.js";
 
-export default {
-    name:'product',
-    data () {
-       return {
-           productlist: []
-       }
-     },
-    props:{
-        data:Object
-    }, 
-    created:function(){
-        var id=this.data.PageSectionId;
-        var data=this.data;
-        var classname = "big";
-        var aclass = "";
-        switch (data.ParameterDictionary.type) {
-            case "1":
-                aclass = "cap-goods-list__item--btn1 cap-goods-list__item--ratio-3-2 cap-goods-list__item--whitespace";
-                break;
-            case "2":
-                classname = "small";
-                aclass = "cap-goods-list__item--btn1 cap-goods-list__item--padding";
-                break;
-            case "3":
-                classname = "hybrid";
-                aclass = "cap-goods-list__item--big cap-goods-list__item--hybrid-big cap-goods-list__item--btn1 cap-goods-list__item--padding";
-                break;
-            case "4":
-                classname = "list";
-                aclass = "cap-goods-list__item--btn4 cap-goods-list__item--padding";
-                break;
-            case "5":
-                classname = "three";
-                aclass = "cap-goods-list__item--btn4 cap-goods-list__item--padding";
-                break;
-            case "6":
-                classname = "three";
-                break;
-        }
-        data.classname=classname;
-        data.aclass=aclass;
-        getProduct(id).then(response => {
-            this.productlist=response;
-        })
+  export default {
+    name: 'product',
+    data() {
+      return {
+        productlist: []
+      }
+    },
+    props: {
+      data: Object
+    },
+    created: function () {
+      var id = this.data.PageSectionId;
+      var data = this.data;
+      var classname = "big";
+      var aclass = "";
+      switch (data.ParameterDictionary.type) {
+        case "1":
+          aclass = "cap-goods-list__item--btn1 cap-goods-list__item--ratio-3-2 cap-goods-list__item--whitespace";
+          break;
+        case "2":
+          classname = "small";
+          aclass = "cap-goods-list__item--btn1 cap-goods-list__item--padding";
+          break;
+        case "3":
+          classname = "hybrid";
+          aclass = "cap-goods-list__item--big cap-goods-list__item--hybrid-big cap-goods-list__item--btn1 cap-goods-list__item--padding";
+          break;
+        case "4":
+          classname = "list";
+          aclass = "cap-goods-list__item--btn4 cap-goods-list__item--padding";
+          break;
+        case "5":
+          classname = "three";
+          aclass = "cap-goods-list__item--btn4 cap-goods-list__item--padding";
+          break;
+        case "6":
+          classname = "three";
+          break;
+      }
+      data.classname = classname;
+      data.aclass = aclass;
+      getProduct(id).then(response => {
+        this.productlist = response;
+      })
     }
-}
+  }
 </script>
 
 <style>
diff --git a/mobile-web/src/config/request.js b/mobile-web/src/config/request.js
index 55b4cdc30..b4508258f 100644
--- a/mobile-web/src/config/request.js
+++ b/mobile-web/src/config/request.js
@@ -15,6 +15,14 @@ const serviceRouter = function(requestUrl) {
         prefix: '/user-api',
         target: 'http://127.0.0.1:18082/user-api',
       },
+      '/product-api': {
+        prefix: '/product-api',
+        target: 'http://127.0.0.1:18081/product-api',
+      },
+      '/promotion-api': {
+        prefix: '/promotion-api',
+        target: 'http://127.0.0.1:18085//promotion-api',
+      },
     };
 
     const configProd = {
@@ -26,6 +34,14 @@ const serviceRouter = function(requestUrl) {
         prefix: '/user-api',
         target: 'http://127.0.0.1:18082/user-api',
       },
+      '/product-api': {
+        prefix: '/product-api',
+        target: 'http://127.0.0.1:18081/product-api',
+      },
+      '/promotion-api': {
+        prefix: '/promotion-api',
+        target: 'http://127.0.0.1:18085//promotion-api',
+      },
     };
 
     if (process.env.NODE_ENV == 'development') {
@@ -57,7 +73,9 @@ const serviceRouter = function(requestUrl) {
   const indexOf = requestUrl.indexOf("/", 1);
   const _urlPrefix = requestUrl.substring(0,  indexOf);
   if (!config[_urlPrefix]) {
-    throw new Error(`服务路由，未找到可用服务! ${requestUrl}`);
+    // throw new Error(`服务路由，未找到可用服务! ${requestUrl}`);
+    console.error(`服务路由，未找到可用服务! ${requestUrl}`)
+    return ''
   }
   // if (!createServer[_urlPrefix]) {
   //   throw new Error("服务路由，未找到可用服务!");
diff --git a/mobile-web/src/config/router.js b/mobile-web/src/config/router.js
index df0b54a61..8cb145899 100644
--- a/mobile-web/src/config/router.js
+++ b/mobile-web/src/config/router.js
@@ -178,6 +178,13 @@ const routes = [
       title: '确认订单'
     }
   },
+  {
+    path: '/order/success',
+    component: () => import('../page/shipping/order-success'),
+    meta: {
+      title: '确认订单'
+    }
+  },
   {
     name: 'category',
     component: () => import('../page/category/index'),
diff --git a/mobile-web/src/page/product/detail.vue b/mobile-web/src/page/product/detail.vue
index c6664fe88..fd858bab5 100644
--- a/mobile-web/src/page/product/detail.vue
+++ b/mobile-web/src/page/product/detail.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="goods">
-     <headerNav title="商品详情"/>
+    <headerNav title="商品详情"/>
     <van-swipe class="goods-swipe" :autoplay="3000">
       <van-swipe-item v-for="thumb in spu.picUrls" :key="thumb">
-        <img :src="thumb" >
+        <img :src="thumb">
       </van-swipe-item>
     </van-swipe>
 
@@ -14,63 +14,63 @@
         <div class="goods-title">{{ spu.name }}</div>
         <div class="goods-subtit">{{spu.sellPoint}}</div>
       </van-cell>
-      
+
       <!--<van-cell   @click="onClickShowTag" class="goods-tag" >-->
-        <!--<template slot="title" style="font-size:10px;">-->
-            <!--<img src="https://haitao.nos.netease.com/ba8a4c2fdaa54f82a45261293c116af61419663676663i46n3jlh10028.png"/>-->
-            <!--<span >挪威品牌</span>-->
-            <!--<img src="https://haitao.nosdn2.127.net/13bd59e6e29a4f06b278c586629e690d.png" />-->
-            <!--<span >跨境商品</span>-->
-            <!--<van-icon name="passed" color="red" />-->
-            <!--<span >次日达</span>-->
-            <!--<van-icon name="passed" color="red" />-->
-            <!--<span >自提</span>-->
-            <!--<van-icon name="passed" color="red" />-->
-            <!--<span >闪电退款</span>-->
-            <!--<van-icon name="passed" color="red" />-->
-            <!--<span >前海保税仓</span>-->
-            <!--<van-icon name="passed" color="red" />-->
-            <!--<span >七天无理由退货（拆封后不支持）</span>-->
-        <!--</template>-->
+      <!--<template slot="title" style="font-size:10px;">-->
+      <!--<img src="https://haitao.nos.netease.com/ba8a4c2fdaa54f82a45261293c116af61419663676663i46n3jlh10028.png"/>-->
+      <!--<span >挪威品牌</span>-->
+      <!--<img src="https://haitao.nosdn2.127.net/13bd59e6e29a4f06b278c586629e690d.png" />-->
+      <!--<span >跨境商品</span>-->
+      <!--<van-icon name="passed" color="red" />-->
+      <!--<span >次日达</span>-->
+      <!--<van-icon name="passed" color="red" />-->
+      <!--<span >自提</span>-->
+      <!--<van-icon name="passed" color="red" />-->
+      <!--<span >闪电退款</span>-->
+      <!--<van-icon name="passed" color="red" />-->
+      <!--<span >前海保税仓</span>-->
+      <!--<van-icon name="passed" color="red" />-->
+      <!--<span >七天无理由退货（拆封后不支持）</span>-->
+      <!--</template>-->
       <!--</van-cell>   -->
     </van-cell-group>
 
 
     <!--<van-cell-group class="goods-cell-group">-->
-      <!--<van-cell is-link  @click="showPromotion" >-->
-        <!--<template slot="title">-->
-            <!--<span style="margin-right: 10px;">领券</span>-->
-            <!--<van-tag type="danger" mark  style="margin-right: 5px;">满180减30</van-tag>-->
-            <!--<van-tag type="danger" mark  style="margin-right: 5px;">满300减100</van-tag>-->
-        <!--</template>-->
-      <!--</van-cell>-->
-      <!---->
-      <!--<van-cell  is-link @click="showPromotion" >-->
-        <!--<template slot="title">-->
-            <!--<span style="margin-right: 10px;">促销</span>-->
-            <!--<van-tag type="danger" style="margin-right: 5px;">多买优惠</van-tag>-->
-            <!--<van-tag type="danger" style="margin-right: 5px;">满减</van-tag>-->
-            <!--<van-tag type="danger" style="margin-right: 5px;">限购</van-tag>-->
-        <!--</template>-->
-      <!--</van-cell>-->
+    <!--<van-cell is-link  @click="showPromotion" >-->
+    <!--<template slot="title">-->
+    <!--<span style="margin-right: 10px;">领券</span>-->
+    <!--<van-tag type="danger" mark  style="margin-right: 5px;">满180减30</van-tag>-->
+    <!--<van-tag type="danger" mark  style="margin-right: 5px;">满300减100</van-tag>-->
+    <!--</template>-->
+    <!--</van-cell>-->
+    <!---->
+    <!--<van-cell  is-link @click="showPromotion" >-->
+    <!--<template slot="title">-->
+    <!--<span style="margin-right: 10px;">促销</span>-->
+    <!--<van-tag type="danger" style="margin-right: 5px;">多买优惠</van-tag>-->
+    <!--<van-tag type="danger" style="margin-right: 5px;">满减</van-tag>-->
+    <!--<van-tag type="danger" style="margin-right: 5px;">限购</van-tag>-->
+    <!--</template>-->
+    <!--</van-cell>-->
     <!--</van-cell-group>-->
-    
+
     <van-cell-group class="goods-cell-group">
-      <van-cell  is-link @click="showSku" >
+      <van-cell is-link @click="showSku">
         <template slot="title">
-            <span style="margin-right: 10px;">已选</span>
-            <span>{{ formatSkuText(initialSku) }}</span>
+          <span style="margin-right: 10px;">已选</span>
+          <span>{{ formatSkuText(initialSku) }}</span>
         </template>
       </van-cell>
-      
+
     </van-cell-group>
-    
+
     <div class="goods-info">
-        <p class="goods-info-title" >图文详情</p>
-        <div v-html="spu.description"></div>
+      <p class="goods-info-title">图文详情</p>
+      <div v-html="spu.description"></div>
     </div>
     <van-goods-action>
-        
+
       <van-goods-action-mini-btn icon="like-o" @click="sorry">
         收藏
       </van-goods-action-mini-btn>
@@ -86,320 +86,349 @@
     </van-goods-action>
 
     <!--<van-actionsheet v-model="show" title="促销" style="font-size:14px;">-->
-        <!---->
-            <!--<van-cell  is-link @click="sorry" >-->
-                <!--<template slot="title">-->
-                    <!--<van-tag type="danger">多买优惠</van-tag>-->
-                    <!--<span> 满2件，总价打9折</span>-->
-                <!--</template>-->
-            <!--</van-cell>-->
-            <!--<van-cell  is-link @click="sorry" >-->
-                <!--<template slot="title">-->
-                    <!--<van-tag type="danger">满减</van-tag>-->
-                    <!--<span> 满100元减50元</span>-->
-                <!--</template>-->
-            <!--</van-cell>-->
-            <!--<van-cell  is-link @click="sorry" >-->
-                <!--<template slot="title">-->
-                    <!--<van-tag type="danger">限购</van-tag>-->
-                    <!--<span> 购买不超过5件时享受单件价￥8.00，超出数量以结算价为准</span>-->
-                <!--</template>-->
-            <!--</van-cell>-->
+    <!---->
+    <!--<van-cell  is-link @click="sorry" >-->
+    <!--<template slot="title">-->
+    <!--<van-tag type="danger">多买优惠</van-tag>-->
+    <!--<span> 满2件，总价打9折</span>-->
+    <!--</template>-->
+    <!--</van-cell>-->
+    <!--<van-cell  is-link @click="sorry" >-->
+    <!--<template slot="title">-->
+    <!--<van-tag type="danger">满减</van-tag>-->
+    <!--<span> 满100元减50元</span>-->
+    <!--</template>-->
+    <!--</van-cell>-->
+    <!--<van-cell  is-link @click="sorry" >-->
+    <!--<template slot="title">-->
+    <!--<van-tag type="danger">限购</van-tag>-->
+    <!--<span> 购买不超过5件时享受单件价￥8.00，超出数量以结算价为准</span>-->
+    <!--</template>-->
+    <!--</van-cell>-->
     <!--</van-actionsheet>-->
-    
+
     <!--<van-actionsheet v-model="showTag" title="服务说明" style="font-size:14px;">-->
-        <!---->
-            <!--<van-cell>-->
-                <!--<template slot="title">-->
-                    <!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
-                    <!--<span >次日达</span>-->
-                    <!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">指定时间前下单，次日送达</div>-->
-                <!--</template>-->
-            <!--</van-cell>-->
-            <!--<van-cell>-->
-                <!--<template slot="title">-->
-                    <!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
-                    <!--<span >自提</span>-->
-                    <!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">我们提供多种自提服务，包括自提点、自助提货柜、移动自提车等服务</div>-->
-                <!--</template>-->
-            <!--</van-cell>-->
-            <!--<van-cell>-->
-                <!--<template slot="title">-->
-                    <!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
-                    <!--<span >闪电退款</span>-->
-                    <!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">签收7天内退货的，提供先退款后退货服务。</div>-->
-                <!--</template>-->
-            <!--</van-cell>-->
-            <!--<van-cell>-->
-                <!--<template slot="title">-->
-                    <!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
-                    <!--<span >七天无理由退货（拆封后不支持）</span>-->
-                    <!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">七天无理由退货（拆封后不支持）</div>-->
-                <!--</template>-->
-            <!--</van-cell>-->
-            <!--<van-cell>-->
-                <!--<template slot="title">-->
-                    <!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
-                    <!--<span >前海保税仓</span>-->
-                    <!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">本商品由前海保税仓发货</div>-->
-                <!--</template>-->
-            <!--</van-cell>-->
+    <!---->
+    <!--<van-cell>-->
+    <!--<template slot="title">-->
+    <!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
+    <!--<span >次日达</span>-->
+    <!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">指定时间前下单，次日送达</div>-->
+    <!--</template>-->
+    <!--</van-cell>-->
+    <!--<van-cell>-->
+    <!--<template slot="title">-->
+    <!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
+    <!--<span >自提</span>-->
+    <!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">我们提供多种自提服务，包括自提点、自助提货柜、移动自提车等服务</div>-->
+    <!--</template>-->
+    <!--</van-cell>-->
+    <!--<van-cell>-->
+    <!--<template slot="title">-->
+    <!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
+    <!--<span >闪电退款</span>-->
+    <!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">签收7天内退货的，提供先退款后退货服务。</div>-->
+    <!--</template>-->
+    <!--</van-cell>-->
+    <!--<van-cell>-->
+    <!--<template slot="title">-->
+    <!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
+    <!--<span >七天无理由退货（拆封后不支持）</span>-->
+    <!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">七天无理由退货（拆封后不支持）</div>-->
+    <!--</template>-->
+    <!--</van-cell>-->
+    <!--<van-cell>-->
+    <!--<template slot="title">-->
+    <!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
+    <!--<span >前海保税仓</span>-->
+    <!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">本商品由前海保税仓发货</div>-->
+    <!--</template>-->
+    <!--</van-cell>-->
     <!--</van-actionsheet>-->
 
     <van-sku
-          v-model="showBase"
-          :sku="vanSku"
-          :initial-sku="initialSku"
-          :goods="vanSpu"
-          :goods-id="spu.id"
-          :hide-stock="hideStock"
-          :close-on-click-overlay="closeOnClickOverlay"
-          @stepper-change="stepperChange"
-          @sku-selected="skuSelected"
-          @buy-clicked="onBuyClicked"
-          @add-cart="onAddCartClicked"
-        />
-      <!--:quota="skuData.quota"-->
+      v-model="showBase"
+      :sku="vanSku"
+      :initial-sku="initialSku"
+      :goods="vanSpu"
+      :goods-id="spu.id"
+      :hide-stock="hideStock"
+      :close-on-click-overlay="closeOnClickOverlay"
+      @stepper-change="stepperChange"
+      @sku-selected="skuSelected"
+      @buy-clicked="onBuyClicked"
+      @add-cart="onAddCartClicked"
+    />
+    <!--:quota="skuData.quota"-->
 
   </div>
 </template>
 
 <script>
-// import skuData from '../../data/sku';
-import { getProductSpuInfo } from '../../api/product';
+  // import skuData from '../../data/sku';
+  import {getProductSpuInfo} from '../../api/product';
 
-export default {
-  components: {
-  },
-  data() {
-    // this.skuData = skuData;
-    return {
-      spu: {}, // 商品信息
-      vanSku: {
-        tree: [], // 规格数组
-        list: [], // sku 数组
-      },
-      // TODO 后面，要加 sku 的 title 和 picture
-      vanSpu: {
-        title: '',
-        picture: '',
-      },
-      initialSku: { // 选中的 sku
-        // 具体规格
-        // price 价格
-        // quantity 选中的数量
-      },
-      attrValueMap: new Map(), // 规格值的映射
+  export default {
+    components: {},
+    data() {
+      // this.skuData = skuData;
+      return {
+        spu: {}, // 商品信息
+        vanSku: {
+          tree: [], // 规格数组
+          list: [], // sku 数组
+        },
+        // TODO 后面，要加 sku 的 title 和 picture
+        vanSpu: {
+          title: '',
+          picture: '',
+        },
+        initialSku: { // 选中的 sku
+          // 具体规格
+          // price 价格
+          // quantity 选中的数量
+        },
+        attrValueMap: new Map(), // 规格值的映射
 
-      // show:false,
-      // showTag:false,
-      // goods: {
-      //   title: '【每日一粒益智又长高】 Lifeline Care 儿童果冻鱼油DHA维生素D3聪明长高 软糖 30粒 2件装',
-      //   subtitle:'【品牌直采】Q弹美味，无腥味果冻鱼油，每粒含足量鱼油DHA，帮助视网膜和大脑健康发育，让你的宝宝明眼又聪明，同时补充400国际单位维生素D3，强壮骨骼和牙齿。特含DPA，让宝宝免疫力更强，没病来扰。',
-      //   price: 2680,
-      //   market_price:9999,
-      //   express: '免运费',
-      //   remain: 19,
-      //   thumb: [
-      //     'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
-      //     'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
-      //   ],
-      //   info:'<p style="text-align:center;"><img src="https://haitao.nosdn2.127.net/ac19460151ee4d95a6657202bcfc653c1531470912089jjjq8ml410763.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/2a91cfad22404e5498d347672b1440301531470912182jjjq8mnq10764.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/caddd5a213de4c1cb1347c267e8275731531470912412jjjq8mu410765.jpg" ></p>',
-      // },
+        // show:false,
+        // showTag:false,
+        // goods: {
+        //   title: '【每日一粒益智又长高】 Lifeline Care 儿童果冻鱼油DHA维生素D3聪明长高 软糖 30粒 2件装',
+        //   subtitle:'【品牌直采】Q弹美味，无腥味果冻鱼油，每粒含足量鱼油DHA，帮助视网膜和大脑健康发育，让你的宝宝明眼又聪明，同时补充400国际单位维生素D3，强壮骨骼和牙齿。特含DPA，让宝宝免疫力更强，没病来扰。',
+        //   price: 2680,
+        //   market_price:9999,
+        //   express: '免运费',
+        //   remain: 19,
+        //   thumb: [
+        //     'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
+        //     'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
+        //   ],
+        //   info:'<p style="text-align:center;"><img src="https://haitao.nosdn2.127.net/ac19460151ee4d95a6657202bcfc653c1531470912089jjjq8ml410763.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/2a91cfad22404e5498d347672b1440301531470912182jjjq8mnq10764.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/caddd5a213de4c1cb1347c267e8275731531470912412jjjq8mu410765.jpg" ></p>',
+        // },
 
-      showBase: false, // 是否显示 sku 坦诚
-      closeOnClickOverlay: true, // 是否在点击蒙层后关闭
-      hideStock: true, // 是否显示商品剩余库存
+        showBase: false, // 是否显示 sku 坦诚
+        closeOnClickOverlay: true, // 是否在点击蒙层后关闭
+        hideStock: true, // 是否显示商品剩余库存
 
-    };
-  },
-  methods: {
-    formatPrice(data) {
-      return '¥' + (data / 100).toFixed(2);
+      };
     },
-    formatSkuText(data) { // 渲染已选择的 sku 的文本
-      let text = '';
-      for (let prop in data) {
-        if (prop.indexOf('attr_') === 0) {
-          text = text + this.attrValueMap.get(data[prop]) + ' ';
+    methods: {
+      formatPrice(data) {
+        return '¥' + (data / 100).toFixed(2);
+      },
+      formatSkuText(data) { // 渲染已选择的 sku 的文本
+        let text = '';
+        for (let prop in data) {
+          if (prop.indexOf('attr_') === 0) {
+            text = text + this.attrValueMap.get(data[prop]) + ' ';
+          }
         }
-      }
-      text = text + 'x ' + data.quantity + ' 件';
-      return text;
-    },
+        text = text + 'x ' + data.quantity + ' 件';
+        return text;
+      },
 
-    stepperChange(value) { // 选择 sku 数量时
-      this.initialSku.quantity = value;
-    },
-    skuSelected({skuValue, selectedSku, selectedSkuComb}) { // 选择 sku
-      console.log(skuValue);
-      console.log(selectedSku);
-      console.log(selectedSkuComb);
-      this.initialSku = {
-        ...selectedSkuComb,
-        quantity: 1,
-      };
-    },
-
-    onClickCart() {
-      this.$router.push('/cart');
-    },
-    sorry() {
-      Toast('暂无后续逻辑~');
-    },
-    showPromotion() {
-        this.show=true;
-    },
-    showSku() { // 展示 sku 选择
-        this.showBase=true;
-    },
-    onClickShowTag(){
-        this.showTag=true;
-    },
-    onBuyClicked(data) {
-      this.$toast(JSON.stringify(data));
-    },
-    onAddCartClicked(data) {
-      this.$toast(JSON.stringify(data));
-    },
-  },
-  mounted() {
-    let id = this.$route.params.id; // 商品编号
-    let response = getProductSpuInfo(id);
-    response.then(data => {
-      // 设置 spu
-      this.spu = data;
-      // 初始化 vanSku
-      let vanSku = {
-        tree: [],
-        list: [],
-      };
-      for (let i = 0; i < data.skus.length; i++) {
-        let sku = data.skus[i];
-        // list 商品 sku 信息
-        let skuVO = {
-          id: sku.id, // skuId，下单时后端需要
-          price: sku.price, // 价格（单位分）
-          stock_num: sku.quantity // 当前 sku 组合对应的库存
+      stepperChange(value) { // 选择 sku 数量时
+        this.initialSku.quantity = value;
+      },
+      skuSelected({skuValue, selectedSku, selectedSkuComb}) { // 选择 sku
+        console.log(skuValue);
+        console.log(selectedSku);
+        console.log(selectedSkuComb);
+        this.initialSku = {
+          ...selectedSkuComb,
+          quantity: 1,
         };
-        for (let j = 0; j < sku.attrs.length; j++) {
-          let attr = sku.attrs[j];
-          skuVO['attr_' + attr.attrId] =attr.attrValueId;
-        }
-        vanSku.list.push(skuVO);
-        // tree 规格
-        for (let j = 0; j < sku.attrs.length; j++) {
-          let attr = sku.attrs[j];
-          let attrVO;
-          for (let k = 0; k < vanSku.tree.length; k++) {
-            if (attr.attrName === vanSku.tree[k].k) {
-              attrVO = vanSku.tree[k];
-              break;
+      },
+
+      onClickCart() {
+        this.$router.push('/cart');
+      },
+      sorry() {
+        Toast('暂无后续逻辑~');
+      },
+      showPromotion() {
+        this.show = true;
+      },
+      showSku() { // 展示 sku 选择
+        this.showBase = true;
+      },
+      onClickShowTag() {
+        this.showTag = true;
+      },
+      onBuyClicked(data) {
+        const { selectedNum, goodsId } = data;
+        console.log(data);
+        // this.$toast(JSON.stringify(data));
+        this.$router.push({
+          path:'/order',
+          query:{
+            skuId: goodsId,
+            quantity: selectedNum,
+          }
+        });
+      },
+      onAddCartClicked(data) {
+        this.$toast(JSON.stringify(data));
+      },
+    },
+    mounted() {
+      let id = this.$route.params.id; // 商品编号
+      let response = getProductSpuInfo(id);
+      response.then(data => {
+        // 设置 spu
+        this.spu = data;
+        // 初始化 vanSku
+        let vanSku = {
+          tree: [],
+          list: [],
+        };
+        for (let i = 0; i < data.skus.length; i++) {
+          let sku = data.skus[i];
+          // list 商品 sku 信息
+          let skuVO = {
+            id: sku.id, // skuId，下单时后端需要
+            price: sku.price, // 价格（单位分）
+            stock_num: sku.quantity // 当前 sku 组合对应的库存
+          };
+          for (let j = 0; j < sku.attrs.length; j++) {
+            let attr = sku.attrs[j];
+            skuVO['attr_' + attr.attrId] = attr.attrValueId;
+          }
+          vanSku.list.push(skuVO);
+          // tree 规格
+          for (let j = 0; j < sku.attrs.length; j++) {
+            let attr = sku.attrs[j];
+            let attrVO;
+            for (let k = 0; k < vanSku.tree.length; k++) {
+              if (attr.attrName === vanSku.tree[k].k) {
+                attrVO = vanSku.tree[k];
+                break;
+              }
             }
-          }
-          if (!attrVO) { // 未找到，则初始化该规格
-            attrVO = {
-              k: attr.attrName, // skuKeyName：规格类目名称
-              v: [],
-              k_s: 'attr_' + attr.attrId,
-            };
-            vanSku.tree.push(attrVO);
-          }
-          let attrValueFound = false; // 如果规格值已经存在，则不再添加
-          for (let k = 0; k < attrVO.v.length; k++) {
-            if (attr.attrValueId === attrVO.v[k].id) {
-              attrValueFound = true;
-              break;
+            if (!attrVO) { // 未找到，则初始化该规格
+              attrVO = {
+                k: attr.attrName, // skuKeyName：规格类目名称
+                v: [],
+                k_s: 'attr_' + attr.attrId,
+              };
+              vanSku.tree.push(attrVO);
             }
+            let attrValueFound = false; // 如果规格值已经存在，则不再添加
+            for (let k = 0; k < attrVO.v.length; k++) {
+              if (attr.attrValueId === attrVO.v[k].id) {
+                attrValueFound = true;
+                break;
+              }
+            }
+            if (!attrValueFound) {
+              attrVO.v.push({
+                id: attr.attrValueId, // skuValueId：规格值 id
+                name: attr.attrValueName, // skuValueName：规格值名称
+              });
+            }
+            // 初始化 attrValueMap
+            this.attrValueMap.set(attr.attrValueId, attr.attrValueName);
           }
-          if (!attrValueFound) {
-            attrVO.v.push({
-              id: attr.attrValueId, // skuValueId：规格值 id
-              name: attr.attrValueName, // skuValueName：规格值名称
-            });
-          }
-          // 初始化 attrValueMap
-          this.attrValueMap.set(attr.attrValueId, attr.attrValueName);
         }
-      }
-      // debugger;
-      this.vanSku = vanSku;
-      // 初始化
-      // TODO 芋艿，需要处理下第一个有效的 sku
-      this.initialSku = vanSku.list[0];
-      this.initialSku.quantity = 1;
-    });
-  }
-};
+        // debugger;
+        this.vanSku = vanSku;
+        // 初始化
+        // TODO 芋艿，需要处理下第一个有效的 sku
+        this.initialSku = vanSku.list[0];
+        this.initialSku.quantity = 1;
+      });
+    }
+  };
 </script>
 
 <style lang="less">
-.goods {
-  padding-bottom: 50px;
-  &-swipe {
-    img {
-      width: 7.5rem;
-      height: 7.5rem;
-      display: block;
-    }
-  }
-  &-tag{
-      font-size: 12px;
-        border-top: 1px solid #e5e5e5;
-        span{
-      margin-right: 10px;
-        }
-        i{
-            color: red;
-            margin-right: 3px;
-        }
-        img{
-          width: 12px;
-          margin-right: 3px;
-          margin-top: 6px;
+  .goods {
+    padding-bottom: 50px;
+
+    &-swipe {
+      img {
+        width: 7.5rem;
+        height: 7.5rem;
+        display: block;
       }
-  }
-  &-title {
-        line-height: 18px;
-    padding-top: 10px;
-    margin-bottom: 6px;
-    font-size: 14px;
-    color: #333;
-    font-weight: 700;
-    border-top: 1px solid #f0f0f0;
-  }
-  &-subtit{
+    }
+
+    &-tag {
+      font-size: 12px;
+      border-top: 1px solid #e5e5e5;
+
+      span {
+        margin-right: 10px;
+      }
+
+      i {
+        color: red;
+        margin-right: 3px;
+      }
+
+      img {
+        width: 12px;
+        margin-right: 3px;
+        margin-top: 6px;
+      }
+    }
+
+    &-title {
+      line-height: 18px;
+      padding-top: 10px;
+      margin-bottom: 6px;
+      font-size: 14px;
+      color: #333;
+      font-weight: 700;
+      border-top: 1px solid #f0f0f0;
+    }
+
+    &-subtit {
+      font-size: 13px;
+      color: #333;
+      line-height: 21px;
+    }
+
+    &-price {
+      color: #f44;
+      font-size: 20px;
+    }
+
+    &-market-price {
+      text-decoration: line-through;
+      margin-left: 8px;
       font-size: 13px;
-    color: #333;
-    line-height: 21px;
-  }
-  &-price {
-    color: #f44;font-size: 20px;
-  }
-  &-market-price {    
-    text-decoration: line-through;
-    margin-left: 8px;
-    font-size: 13px;
-    color: #999;
-  }
-  &-cell-group {
-    margin: 15px 0;
-    .van-cell__value {
       color: #999;
     }
-  }
-  &-info-title{
-      height: 44px;line-height: 44px;text-align: center;font-size: 14px;font-weight: 700;margin: 10px;border-top: 1px solid #e5e5e5;
-  }
-  &-info p{
-          margin: 0;
-    padding: 0;
-    margin-block-end: 0;
-    margin-block-start: 0;
-    display: grid;
-  }
-  &-info img{
+
+    &-cell-group {
+      margin: 15px 0;
+
+      .van-cell__value {
+        color: #999;
+      }
+    }
+
+    &-info-title {
+      height: 44px;
+      line-height: 44px;
+      text-align: center;
+      font-size: 14px;
+      font-weight: 700;
+      margin: 10px;
+      border-top: 1px solid #e5e5e5;
+    }
+
+    &-info p {
+      margin: 0;
+      padding: 0;
+      margin-block-end: 0;
+      margin-block-start: 0;
+      display: grid;
+    }
+
+    &-info img {
       width: 100%;
+    }
   }
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/mobile-web/src/page/shipping/order-success.vue b/mobile-web/src/page/shipping/order-success.vue
new file mode 100644
index 000000000..244ea54f0
--- /dev/null
+++ b/mobile-web/src/page/shipping/order-success.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="order-success">
+    <headerNav title="提交成功"/>
+
+    <sapn>TODO 支付成功</sapn>
+
+    <router-link :to="'/user/order'">
+      <van-button size="small" type="danger">订单列表</van-button>
+    </router-link>
+  </div>
+</template>
+
+<script>
+
+  import {createOrder} from '../../api/order';
+  export default {
+    data() {
+      return {
+
+      }
+    },
+    methods: {
+
+    },
+    activated() {
+
+    },
+  };
+</script>
+
+<style lang="less">
+  .order-success {
+    text-align: center;
+  }
+</style>
diff --git a/mobile-web/src/page/shipping/order.vue b/mobile-web/src/page/shipping/order.vue
index 052b35dce..766ef3f8d 100644
--- a/mobile-web/src/page/shipping/order.vue
+++ b/mobile-web/src/page/shipping/order.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="order">
-     <headerNav title="确认订单"/>
-     <van-cell
+    <headerNav title="确认订单"/>
+    <van-cell
       center
       :border="false"
       class="contact-card"
@@ -13,12 +13,12 @@
       </template>
       <template v-else>
         <strong>张三 138****6520</strong>
-        <div>广东省深圳市南山区科技园 </div>
+        <div>广东省深圳市南山区科技园</div>
       </template>
     </van-cell>
     <div style="height:15px;"></div>
     <div class="card" v-for="(product,i) in products" :key="i">
-      <product-card :product='product' />
+      <product-card :product='product'/>
     </div>
     <div style="height:15px;"></div>
     <van-cell-group>
@@ -32,15 +32,15 @@
     </van-cell-group>
     <div style="height:15px;"></div>
     <van-cell-group class="total">
-        <van-cell title="优惠券" is-link value="抵扣¥5.00" />
+      <van-cell title="优惠券" is-link value="抵扣¥5.00"/>
     </van-cell-group>
-    
+
     <div style="height:15px;"></div>
     <van-cell-group class="total">
-        <van-cell title="商品总额" value="9.99" />
-        <van-cell title="运费" value="+ 0.00" />
-        <van-cell title="折扣" value="- 5.00" />
-        <van-cell title="实付金额" value="4.99" style="font-weight: 700;" />
+      <van-cell title="商品总额" value="9.99"/>
+      <van-cell title="运费" value="+ 0.00"/>
+      <van-cell title="折扣" value="- 5.00"/>
+      <van-cell title="实付金额" value="4.99" style="font-weight: 700;"/>
     </van-cell-group>
 
     <div style="height:50px;"></div>
@@ -55,130 +55,155 @@
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-      type: "add1",
-      products: [
-        {
-          imageURL:
-            "https://img10.360buyimg.com/mobilecms/s88x88_jfs/t17572/12/840082281/351445/e1828c58/5aab8dbbNedb77d88.jpg",
-          title: "良品铺子 肉肉聚汇猪肉脯 猪蹄卤 辣味小吃520g",
-          desc: "0.670kg/件，肉肉聚汇520g",
-          price: "59.80",
-          quantity: 2
-        },
-        {
-          imageURL:
-            "https://img10.360buyimg.com/mobilecms/s88x88_jfs/t22720/128/1410375403/319576/8dbd859f/5b5e69b3Nf4f0e9e7.jpg",
-          title: "元朗 鸡蛋卷 饼干糕点 中秋礼盒 广东特产680g",
-          desc: "1.320kg/件",
-          price: "65.80",
-          quantity: 1,
-          gift: [
-            {
-              title: "星巴克（Starbucks）星冰乐小熊吊饰星巴克（Starbucks）星冰乐小熊吊饰",
-              quantity: 2
-            },
-            {
-              title: "星巴克（Starbucks）星冰乐小熊吊饰星巴克（Starbucks）星冰乐小熊吊饰",
-              quantity: 1
-            }
-          ]
-        },
-        {
-          imageURL:
-            "https://img10.360buyimg.com/mobilecms/s88x88_jfs/t17572/12/840082281/351445/e1828c58/5aab8dbbNedb77d88.jpg",
-          title: "良品铺子 肉肉聚汇猪肉脯 猪蹄卤 辣味小吃520g",
-          desc: "0.670kg/件，肉肉聚汇520g",
-          price: "59.80",
-          quantity: 2
-        },
-      ]
-    };
-  },
-  methods: {
-    onSubmit() {
-      this.$toast("点击按钮");
+
+  import {createOrder} from '../../api/order';
+
+  export default {
+    data() {
+      return {
+        type: "add1",
+        products: [
+          {
+            imageURL:
+              "https://img10.360buyimg.com/mobilecms/s88x88_jfs/t17572/12/840082281/351445/e1828c58/5aab8dbbNedb77d88.jpg",
+            title: "良品铺子 肉肉聚汇猪肉脯 猪蹄卤 辣味小吃520g",
+            desc: "0.670kg/件，肉肉聚汇520g",
+            price: "59.80",
+            quantity: 2
+          },
+          {
+            imageURL:
+              "https://img10.360buyimg.com/mobilecms/s88x88_jfs/t22720/128/1410375403/319576/8dbd859f/5b5e69b3Nf4f0e9e7.jpg",
+            title: "元朗 鸡蛋卷 饼干糕点 中秋礼盒 广东特产680g",
+            desc: "1.320kg/件",
+            price: "65.80",
+            quantity: 1,
+            gift: [
+              {
+                title: "星巴克（Starbucks）星冰乐小熊吊饰星巴克（Starbucks）星冰乐小熊吊饰",
+                quantity: 2
+              },
+              {
+                title: "星巴克（Starbucks）星冰乐小熊吊饰星巴克（Starbucks）星冰乐小熊吊饰",
+                quantity: 1
+              }
+            ]
+          },
+          {
+            imageURL:
+              "https://img10.360buyimg.com/mobilecms/s88x88_jfs/t17572/12/840082281/351445/e1828c58/5aab8dbbNedb77d88.jpg",
+            title: "良品铺子 肉肉聚汇猪肉脯 猪蹄卤 辣味小吃520g",
+            desc: "0.670kg/件，肉肉聚汇520g",
+            price: "59.80",
+            quantity: 2
+          },
+        ]
+      };
     },
-  },
-  activated(){
-    //根据key名获取传递回来的参数，data就是map
-    this.$on('selectAddress', function(data){
+    methods: {
+      onSubmit() {
+        this.$toast("点击按钮");
+        const { skuId, quantity } = this.$route.query;
+        const userAddressId = 1;
+        const remark = '';
+
+        const orderItems = [{
+          skuId,
+          quantity,
+        }];
+
+        createOrder({
+          orderItems,
+          userAddressId,
+          remark,
+        })
+      },
+    },
+
+
+    activated() {
+      //根据key名获取传递回来的参数，data就是map
+      this.$on('selectAddress', function (data) {
         //赋值给首页的附近医院数据模型
         console.log(1);
-    }.bind(this));
-},
-};
+      }.bind(this));
+    },
+  };
 </script>
 
 <style lang="less">
-.order {
-  font-size: 14px;
-  background: #f7f7f7;
-  .contact-card::before {
-    content: "";
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 2px;
-    position: absolute;
-    background: -webkit-repeating-linear-gradient(
-      135deg,
-      #ff6c6c 0,
-      #ff6c6c 20%,
-      transparent 0,
-      transparent 25%,
-      #3283fa 0,
-      #3283fa 45%,
-      transparent 0,
-      transparent 50%
-    );
-    background: repeating-linear-gradient(
-      -45deg,
-      #ff6c6c 0,
-      #ff6c6c 20%,
-      transparent 0,
-      transparent 25%,
-      #3283fa 0,
-      #3283fa 45%,
-      transparent 0,
-      transparent 50%
-    );
-    background-size: 80px;
-  }
-  .total {
-    .van-cell__value {
-      color: red;
+  .order {
+    font-size: 14px;
+    background: #f7f7f7;
+
+    .contact-card::before {
+      content: "";
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 2px;
+      position: absolute;
+      background: -webkit-repeating-linear-gradient(
+        135deg,
+        #ff6c6c 0,
+        #ff6c6c 20%,
+        transparent 0,
+        transparent 25%,
+        #3283fa 0,
+        #3283fa 45%,
+        transparent 0,
+        transparent 50%
+      );
+      background: repeating-linear-gradient(
+        -45deg,
+        #ff6c6c 0,
+        #ff6c6c 20%,
+        transparent 0,
+        transparent 25%,
+        #3283fa 0,
+        #3283fa 45%,
+        transparent 0,
+        transparent 50%
+      );
+      background-size: 80px;
     }
-  }
-  
-  .van-submit-bar__bar {
-    border-top: 1px solid #f7f7f7;
-  }
-  .additional {
-    .van-cell {
-      padding: 0 15px;
-      font-size: 12px;
+
+    .total {
+      .van-cell__value {
+        color: red;
+      }
     }
-    .van-cell__title {
-      flex: 11;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+
+    .van-submit-bar__bar {
+      border-top: 1px solid #f7f7f7;
     }
-    .van-tag {
-      line-height: 12px;
-      margin-right: 5px;
-    }
-    
-    .price {
-      color: #e93b3d;
-      font-size: 10px;
-      span {
-        font-size: 16px;
+
+    .additional {
+      .van-cell {
+        padding: 0 15px;
+        font-size: 12px;
+      }
+
+      .van-cell__title {
+        flex: 11;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .van-tag {
+        line-height: 12px;
+        margin-right: 5px;
+      }
+
+      .price {
+        color: #e93b3d;
+        font-size: 10px;
+
+        span {
+          font-size: 16px;
+        }
       }
     }
   }
-}
 </style>
diff --git a/mobile-web/src/page/user/order/list.vue b/mobile-web/src/page/user/order/list.vue
index 94c9f390c..1dfbfbc51 100644
--- a/mobile-web/src/page/user/order/list.vue
+++ b/mobile-web/src/page/user/order/list.vue
@@ -1,176 +1,249 @@
 <template>
-<div>
-     <headerNav title="我的订单"/>
-    <van-tabs v-model="active">
-        <van-tab title="全部">
-            
-            <div v-for="(item,index) in list" :key="index">
-                <van-cell-group class="order-item" >
-                    <van-panel :title="'订单：'+item.ordercode" :status="item.state"  >
-                    <div slot="header">
-                        <van-cell class="title" :title="'订单：'+item.ordercode" :value="item.state" :to="'/user/order/info/'+item.orderid"/>
-                    </div>
-                        <div>
-                            <router-link :to="'/user/order/info/'+item.orderid">
-                            <div v-if="item.products.length==1" v-for="(product,i) in item.products" :key="i">
-                                <product-card :product='product' />
-                            </div>
-                            <div  v-if="item.products.length>1" class="more" >
-                                <div class="item" v-for="(product,i) in item.products" :key="i">
-                                    <div >
-                                        <img :src="product.imageURL"/>
-                                    </div>
-                                </div>
-                            </div>
-                            </router-link>
-                        </div>
-                        <div slot="footer">
-                            <span class="total">总价：￥8154898.89</span>
-                            <van-button size="small">确认收货</van-button>
-                            <van-button size="small" type="danger">支付</van-button>
-                        </div>
-                    </van-panel>
-                </van-cell-group>
-            </div>
-
-        </van-tab>
-        <van-tab title="待付款">内容 2</van-tab>
-        <van-tab title="待收货">内容 3</van-tab>
-        <van-tab title="已完成">内容 4</van-tab>
-        <van-tab title="已取消">内容 5</van-tab>
+  <div>
+    <headerNav title="我的订单"/>
+    <van-tabs v-model="active" @change="onTabChange">
+      <van-tab title="全部"></van-tab>
+      <van-tab title="待付款"></van-tab>
+      <van-tab title="待收货"></van-tab>
+      <van-tab title="已完成"></van-tab>
+      <van-tab title="已取消"></van-tab>
     </van-tabs>
-</div>
+
+    <div v-for="(item,index) in list" :key="index">
+      <van-cell-group class="order-item">
+        <van-panel :title="'订单：'+item.ordercode" :status="item.state">
+          <div slot="header">
+            <van-cell class="title" :title="'订单：'+item.ordercode" :value="item.state"
+                      :to="'/user/order/info/'+item.orderid"/>
+          </div>
+          <div>
+            <router-link :to="'/user/order/info/'+item.orderid">
+              <div v-if="item.products.length==1" v-for="(product,i) in item.products" :key="i">
+                <product-card :product='product'/>
+              </div>
+              <div v-if="item.products.length > 0" class="more">
+                <div class="item" v-for="(product,i) in item.products" :key="i">
+                  <div>
+                    <img :src="product.imageURL"/>
+                  </div>
+                </div>
+              </div>
+            </router-link>
+          </div>
+          <div slot="footer">
+            <span class="total">总价：{{item.payAmount / 100}} 元</span>
+            <van-button size="small">确认收货</van-button>
+            <van-button size="small" type="danger">支付</van-button>
+          </div>
+        </van-panel>
+      </van-cell-group>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {
-    components:{
-    },
-    data(){
-        return{
-            active:0,
-            
-            list:[
-                {
-                    orderid:1,
-                    ordercode:'4511248234235',
-                    state:'待付款',
-                    products:[
-                        {
-                            imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
-                            title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
-                            price:'499',
-                            quantity:2
-                        },
-                        {
-                            imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
-                            title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
-                            price:'499',
-                            quantity:1
-                        },
-                        {
-                            imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
-                            title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
-                            price:'499',
-                            quantity:2
-                        },
-                        {
-                            imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
-                            title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
-                            price:'499',
-                            quantity:2
-                        },
-                        {
-                            imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
-                            title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
-                            price:'499',
-                            quantity:2
-                        },
-                    ]
-                },
-                {
-                    orderid:2,
-                    ordercode:'4511248234235',
-                    state:'待收货',
-                    products:[
-                        {
-                            imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
-                            title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
-                            price:'499',
-                            quantity:2
-                        }
-                    ]
-                },
-                {
-                    orderid:3,
-                    ordercode:'4511248234235',
-                    state:'已完成',
-                    products:[
-                        {
-                            imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
-                            title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
-                            price:'499',
-                            quantity:2
-                        }
-                    ]
-                },
-                {
-                    orderid:4,
-                    ordercode:'4511248234235',
-                    state:'已取消',
-                    products:[
-                        {
-                            imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
-                            title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
-                            price:'499',
-                            quantity:2
-                        }
-                    ]
-                },
+
+  import {getOrderPage} from '../../../api/order';
+
+  export default {
+    components: {},
+    data() {
+      return {
+        active: 0,
+
+        list: [
+          {
+            orderid: 1,
+            ordercode: '4511248234235',
+            state: '待付款',
+            products: [
+              {
+                imageURL: 'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
+                title: 'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
+                price: '499',
+                quantity: 2
+              },
+              {
+                imageURL: 'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
+                title: 'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
+                price: '499',
+                quantity: 1
+              },
+              {
+                imageURL: 'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
+                title: 'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
+                price: '499',
+                quantity: 2
+              },
+              {
+                imageURL: 'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
+                title: 'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
+                price: '499',
+                quantity: 2
+              },
+              {
+                imageURL: 'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
+                title: 'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
+                price: '499',
+                quantity: 2
+              },
             ]
-        }
-    }
-}
+          },
+          {
+            orderid: 2,
+            ordercode: '4511248234235',
+            state: '待收货',
+            products: [
+              {
+                imageURL: 'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
+                title: 'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
+                price: '499',
+                quantity: 2
+              }
+            ]
+          },
+          {
+            orderid: 3,
+            ordercode: '4511248234235',
+            state: '已完成',
+            products: [
+              {
+                imageURL: 'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
+                title: 'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
+                price: '499',
+                quantity: 2
+              }
+            ]
+          },
+          {
+            orderid: 4,
+            ordercode: '4511248234235',
+            state: '已取消',
+            products: [
+              {
+                imageURL: 'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
+                title: 'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
+                price: '499',
+                quantity: 2
+              }
+            ]
+          },
+        ]
+      }
+    },
+    methods: {
+      onTabChange(index) {
+        console.log('onTabChange', index)
+
+        // status 和 tab index 对应的关系
+        const statusArray = [null, 1, 3, 4, 5];
+        // if (index === 0) {
+        //   // 全部
+        // } else if (index === 1) {
+        //   // 待付款 1
+        // } else if (index === 2) {
+        //   // 待收货 3
+        // } else if (index === 3) {
+        //   // 已完成 4
+        // } else if (index === 4) {
+        //   // 取消 5
+        // }
+
+
+        this.queryOrderPage({
+          status: statusArray[index],
+        })
+      },
+
+      queryOrderPage(params) {
+        getOrderPage({
+          pageNo: 0,
+          pageSize: 10,
+          ...params,
+        }).then(data => {
+          const {orders} = data;
+          const list = orders.map(order => {
+            const {orderItems} = order;
+            const products = orderItems.map(order => {
+              return {
+                imageURL: order.skuImage,
+                title: order.skuName,
+                price: order.price,
+                quantity: order.quantity,
+              };
+            });
+
+            return {
+              orderid: order.id,
+              ordercode: order.orderNo,
+              state: `${order.status}`,
+              products,
+              payAmount: order.payAmount,
+            };
+          });
+
+          this.list = list;
+          // console.log('list', list)
+        });
+      },
+    },
+    mounted() {
+      this.queryOrderPage()
+    },
+  }
 </script>
 
 <style lang="less">
 
-.order-item{
+  .order-item {
     margin-bottom: 10px;
     font-size: 12px;
-    .title{
-        border-bottom: 1px solid #e5e5e5;
 
-        .van-cell__title{
-            flex: 2;
-        }
-        .van-cell__value{
-            color: red;
-        }
+    .title {
+      border-bottom: 1px solid #e5e5e5;
+
+      .van-cell__title {
+        flex: 2;
+      }
+
+      .van-cell__value {
+        color: red;
+      }
     }
 
-    
+
     .van-panel__footer {
-        text-align: right;
-        border-bottom: 1px solid #e5e5e5;
+      text-align: right;
+      border-bottom: 1px solid #e5e5e5;
     }
+
     .van-button {
-        margin-left: 5px;
+      margin-left: 5px;
     }
-    .total{
-    position: absolute;
-    top: 17px;
-    left: 15px;
-    font-size: 13px;
+
+    .total {
+      position: absolute;
+      top: 17px;
+      left: 15px;
+      font-size: 13px;
     }
-    .more{
-        overflow-x: scroll;white-space: nowrap;    -webkit-overflow-scrolling: touch;    margin: 5px 0 5px 15px;
-        .item{
-            width: 90px; height:90px; margin-right: 10px;display: inline-block;
-            img{
-                width: 100%;
-            }
+
+    .more {
+      overflow-x: scroll;
+      white-space: nowrap;
+      -webkit-overflow-scrolling: touch;
+      margin: 5px 0 5px 15px;
+
+      .item {
+        width: 90px;
+        height: 90px;
+        margin-right: 10px;
+        display: inline-block;
+
+        img {
+          width: 100%;
         }
+      }
     }
-}
+  }
 </style>