- 订单流程

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,
+    },
+  });
+}
+

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,7 +24,7 @@ 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,

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',
   });
 }

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,

mobile-web/src/components/page/product.vue

@@ -1,22 +1,32 @@
 <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':'')" >
+    <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 '):'')">
+      <li v-for="(item,index) in productlist" :key="index"
-            <router-link :class="'cap-goods-list__item cap-goods-list__item--'+data.classname+' '+data.ParameterDictionary.showtype+' '+data.aclass" :to="'/product/'+item.id">
+          :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')" />
+            <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':'')">
+          <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">
+          <div v-if="data.ParameterDictionary.showtype == 'card'"
-                    <button class="cap-goods-list__buy-btn-4 van-button van-button--default van-button--small">{{data.ParameterDictionary.buttonvalue}}</button>
+               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>

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("服务路由，未找到可用服务!");

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'),

mobile-web/src/page/product/detail.vue

@@ -169,8 +169,7 @@
   import {getProductSpuInfo} from '../../api/product';
 
   export default {
-  components: {
+    components: {},
-  },
     data() {
       // this.skuData = skuData;
       return {
@@ -257,7 +256,16 @@ export default {
         this.showTag = true;
       },
       onBuyClicked(data) {
-      this.$toast(JSON.stringify(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));
@@ -336,6 +344,7 @@ export default {
 <style lang="less">
   .goods {
     padding-bottom: 50px;
+
     &-swipe {
       img {
         width: 7.5rem;
@@ -343,22 +352,27 @@ export default {
         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;
       }
     }
+
     &-title {
       line-height: 18px;
       padding-top: 10px;
@@ -368,29 +382,43 @@ export default {
       font-weight: 700;
       border-top: 1px solid #f0f0f0;
     }
+
     &-subtit {
       font-size: 13px;
       color: #333;
       line-height: 21px;
     }
+
     &-price {
-    color: #f44;font-size: 20px;
+      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;
+      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;
@@ -398,6 +426,7 @@ export default {
       margin-block-start: 0;
       display: grid;
     }
+
     &-info img {
       width: 100%;
     }

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>

mobile-web/src/page/shipping/order.vue

@@ -55,6 +55,9 @@
 </template>
 
 <script>
+
+  import {createOrder} from '../../api/order';
+
   export default {
     data() {
       return {
@@ -100,8 +103,24 @@ export default {
     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) {
@@ -116,6 +135,7 @@ export default {
   .order {
     font-size: 14px;
     background: #f7f7f7;
+
     .contact-card::before {
       content: "";
       left: 0;
@@ -147,6 +167,7 @@ export default {
       );
       background-size: 80px;
     }
+
     .total {
       .van-cell__value {
         color: red;
@@ -156,17 +177,20 @@ export default {
     .van-submit-bar__bar {
       border-top: 1px solid #f7f7f7;
     }
+
     .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;
@@ -175,6 +199,7 @@ export default {
       .price {
         color: #e93b3d;
         font-size: 10px;
+
         span {
           font-size: 16px;
         }

mobile-web/src/page/user/order/list.vue

@@ -1,21 +1,27 @@
 <template>
   <div>
     <headerNav title="我的订单"/>
-    <van-tabs v-model="active">
+    <van-tabs v-model="active" @change="onTabChange">
-        <van-tab title="全部">
+      <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 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"/>
+            <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 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"/>
@@ -25,27 +31,22 @@
             </router-link>
           </div>
           <div slot="footer">
-                            <span class="total">总价：￥8154898.89</span>
+            <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>
-
-        </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>
-    </van-tabs>
   </div>
 </template>
 
 <script>
+
+  import {getOrderPage} from '../../../api/order';
+
   export default {
-    components:{
+    components: {},
-    },
     data() {
       return {
         active: 0,
@@ -129,7 +130,66 @@ export default {
           },
         ]
       }
-    }
+    },
+    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>
 
@@ -138,12 +198,14 @@ export default {
   .order-item {
     margin-bottom: 10px;
     font-size: 12px;
+
     .title {
       border-bottom: 1px solid #e5e5e5;
 
       .van-cell__title {
         flex: 2;
       }
+
       .van-cell__value {
         color: red;
       }
@@ -154,19 +216,30 @@ export default {
       text-align: right;
       border-bottom: 1px solid #e5e5e5;
     }
+
     .van-button {
       margin-left: 5px;
     }
+
     .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;
+      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;
+        width: 90px;
+        height: 90px;
+        margin-right: 10px;
+        display: inline-block;
+
         img {
           width: 100%;
         }