- 订单流程

mobile-web/src/api/order.js

+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

 <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':'')" >
+  <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">
+      <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')" />
+            <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">
-                    <button class="cap-goods-list__buy-btn-4 van-button van-button--default van-button--small">{{data.ParameterDictionary.buttonvalue}}</button>
+          <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>
@@ -26,21 +36,21 @@
 </template>
 
 <script>
-import {getProduct} from "../../api/page.js";
+  import {getProduct} from "../../api/page.js";
 
-export default {
-    name:'product',
-    data () {
+  export default {
+    name: 'product',
+    data() {
       return {
         productlist: []
       }
     },
-    props:{
-        data:Object
+    props: {
+      data: Object
     },
-    created:function(){
-        var id=this.data.PageSectionId;
-        var data=this.data;
+    created: function () {
+      var id = this.data.PageSectionId;
+      var data = this.data;
       var classname = "big";
       var aclass = "";
       switch (data.ParameterDictionary.type) {
@@ -67,13 +77,13 @@ export default {
           classname = "three";
           break;
       }
-        data.classname=classname;
-        data.aclass=aclass;
+      data.classname = classname;
+      data.aclass = aclass;
       getProduct(id).then(response => {
-            this.productlist=response;
+        this.productlist = response;
       })
     }
-}
+  }
 </script>
 
 <style>

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

@@ -3,7 +3,7 @@
     <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>
 
@@ -56,7 +56,7 @@
     <!--</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>
@@ -66,7 +66,7 @@
     </van-cell-group>
 
     <div class="goods-info">
-        <p class="goods-info-title" >图文详情</p>
+      <p class="goods-info-title">图文详情</p>
       <div v-html="spu.description"></div>
     </div>
     <van-goods-action>
@@ -165,12 +165,11 @@
 </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: {
-  },
+  export default {
+    components: {},
     data() {
       // this.skuData = skuData;
       return {
@@ -248,16 +247,25 @@ export default {
         Toast('暂无后续逻辑~');
       },
       showPromotion() {
-        this.show=true;
+        this.show = true;
       },
       showSku() { // 展示 sku 选择
-        this.showBase=true;
+        this.showBase = true;
       },
-    onClickShowTag(){
-        this.showTag=true;
+      onClickShowTag() {
+        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));
@@ -284,7 +292,7 @@ export default {
           };
           for (let j = 0; j < sku.attrs.length; j++) {
             let attr = sku.attrs[j];
-          skuVO['attr_' + attr.attrId] =attr.attrValueId;
+            skuVO['attr_' + attr.attrId] = attr.attrValueId;
           }
           vanSku.list.push(skuVO);
           // tree 规格
@@ -330,12 +338,13 @@ export default {
         this.initialSku.quantity = 1;
       });
     }
-};
+  };
 </script>
 
 <style lang="less">
-.goods {
+  .goods {
     padding-bottom: 50px;
+
     &-swipe {
       img {
         width: 7.5rem;
@@ -343,22 +352,27 @@ export default {
         display: block;
       }
     }
-  &-tag{
+
+    &-tag {
       font-size: 12px;
       border-top: 1px solid #e5e5e5;
-        span{
+
+      span {
         margin-right: 10px;
       }
-        i{
+
+      i {
         color: red;
         margin-right: 3px;
       }
-        img{
+
+      img {
         width: 12px;
         margin-right: 3px;
         margin-top: 6px;
       }
     }
+
     &-title {
       line-height: 18px;
       padding-top: 10px;
@@ -368,38 +382,53 @@ export default {
       font-weight: 700;
       border-top: 1px solid #f0f0f0;
     }
-  &-subtit{
+
+    &-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;
+
+    &-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{
+
+    &-info p {
       margin: 0;
       padding: 0;
       margin-block-end: 0;
       margin-block-start: 0;
       display: grid;
     }
-  &-info img{
+
+    &-info img {
       width: 100%;
     }
-}
+  }
 </style>

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

+<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

@@ -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,7 +55,10 @@
 </template>
 
 <script>
-export default {
+
+  import {createOrder} from '../../api/order';
+
+  export default {
     data() {
       return {
         type: "add1",
@@ -100,22 +103,39 @@ 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(){
+
+
+    activated() {
       //根据key名获取传递回来的参数，data就是map
-    this.$on('selectAddress', function(data){
+      this.$on('selectAddress', function (data) {
         //赋值给首页的附近医院数据模型
         console.log(1);
       }.bind(this));
-},
-};
+    },
+  };
 </script>
 
 <style lang="less">
-.order {
+  .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,10 +199,11 @@ export default {
       .price {
         color: #e93b3d;
         font-size: 10px;
+
         span {
           font-size: 16px;
         }
       }
     }
-}
+  }
 </style>