chore[litemall-vue]: 接入后端订单API，以及订单页面重命名

litemall-vue/src/api/api.js

@@ -327,7 +327,7 @@ export function orderCancel(data) {
 const OrderRefund='wx/order/refund'; //退款取消订单
 export function orderRefund(data) {
   return request({
-    url: OrderSubmit,
+    url: OrderRefund,
     method: 'post',
     data
   })

litemall-vue/src/router/order.js

@@ -13,14 +13,14 @@ export default [
     }
   },
   {
-    path: '/order/placeOrderEntity',
-    name: 'placeOrderEntity',
-    component: () => import('@/views/order/place-order-entity')
+    path: '/order/checkout',
+    name: 'orderCheckout',
+    component: () => import('@/views/order/checkout')
   },
   {
-    path: '/order/orderDetail',
+    path: '/order/order-detail',
     name: 'orderDetail',
-    component: () => import('@/views/order/orderDetail')
+    component: () => import('@/views/order/order-detail')
   },
   {
     path: '/order/payment',

litemall-vue/src/router/user.js

@@ -11,7 +11,7 @@ const UserInfo_SetMobile = () => import('@/views/user/user-information-set/set-m
 const UserInfo_SetNickname = () => import('@/views/user/user-information-set/set-nickname');
 const UserInfo_SetPassword = () => import('@/views/user/user-information-set/set-password');
 
-const UserOrderEntityList = () => import('@/views/user/order-entity-list');
+const UserOrderList = () => import('@/views/user/order-list');
 const UserCouponList = () => import('@/views/user/coupon-list');
 const UserRefundList = () => import('@/views/user/refund-list');
 
@@ -93,7 +93,7 @@ export default [
     path: '/user/order/list/:active',
     name: 'user-order-list',
     props: true,
-    component: UserOrderEntityList
+    component: UserOrderList
   },
   {
     path: '/user/coupon/list/:active',

litemall-vue/src/views/items/detail/index.vue

@@ -252,7 +252,7 @@ export default {
         let cartId = res.data.data;
         setLocalStorage({ CartId: cartId });
         that.showSku = false;
-        this.$router.push({ name: 'placeOrderEntity' });
+        this.$router.push('/order/checkout');
       });
     },
     skuAdapter() {

litemall-vue/src/views/order/orderDetail/index.vue → litemall-vue/src/views/order/order-detail/index.vue

 <template>
-  <div class="place_order_entity">
+  <div class="order_detail">
     <div class="order-goods">
-      <van-card
-        v-for="item in orderGoods"
-        :key="item.id"
-        :title="item.goodsName"
-        desc="暂无描述"
-        :num="item.number"
-        :price="item.price +'.00'"
-        :thumb="item.picUrl"
-      ></van-card>
+      <van-card v-for="item in orderGoods"
+                :key="item.id"
+                :title="item.goodsName"
+                desc="暂无描述"
+                :num="item.number"
+                :price="item.price +'.00'"
+                :thumb="item.picUrl"></van-card>
 
       <van-cell-group>
         <van-cell title="商品金额">
           <span class="red">{{orderInfo.goodsPrice * 100 | yuan}}</span>
         </van-cell>
-        <van-cell title="邮费" :value="orderInfo.freightPrice "></van-cell>
+        <van-cell title="快递费用">
+          <span class="red">{{orderInfo.freightPrice * 100 | yuan}}</span>
+        </van-cell>
       </van-cell-group>
     </div>
 
     <van-cell-group style="margin-top: 20px;">
-      <van-cell
-        icon="dingwei"
-        :title="`${orderInfo.consignee}  ${orderInfo.mobile}`"
-        :label="orderInfo.address"
-      />
+      <van-cell icon="dingwei"
+                :title="`${orderInfo.consignee}  ${orderInfo.mobile}`"
+                :label="orderInfo.address" />
     </van-cell-group>
 
     <van-cell-group style="margin-top: 20px;">
@@ -38,51 +36,43 @@
         <span>{{orderInfo.remark }}</span>
       </van-cell>
 
+      <van-cell title="实付款：">
+        <span class="red">{{orderInfo.actualPrice * 100 | yuan}}</span>
+      </van-cell>
+      <!-- 订单动作 -->
       <van-cell>
-        <template slot="title">
-          <span class="custom-text">实付款：</span>
-          <span class="red">{{orderInfo.actualPrice * 100 | yuan}}</span>
-        </template>
-        <!-- 订单动作 -->
-       <van-button
-          size="small"
-          v-if="handleOption.cancel"
-          @click="cancelOrder"
-          style=" float:right"
-          round type="danger"
-        >取消订单</van-button>
-        <van-button
-          size="small"
-          v-if="handleOption.pay"
-          @click="payOrder"
-          style=" float:right"
-          round type="danger"
-        >去支付</van-button>
-        <van-button
-          size="small"
-          v-if="handleOption.delete"
-          @click="deleteOrder"
-          style=" float:right"
-          type="danger"
-        >删除订单</van-button>     
-        <van-button
-          size="small"
-          v-if="handleOption.confirm"
-          @click="confirmlOrder"
-          style=" float:right"
-          type="danger"
-        >确认收货</van-button>    
-        <van-button
-          size="small"
-          v-if="handleOption.refund"
-          @click="refundOrder"
-          style=" float:right"
-          type="danger"
-        >退款</van-button>                    
+        <van-button size="small"
+                    v-if="handleOption.cancel"
+                    @click="cancelOrder(orderInfo.id)"
+                    style=" float:right"
+                    round
+                    type="danger">取消订单</van-button>
+        <van-button size="small"
+                    v-if="handleOption.pay"
+                    @click="payOrder(orderInfo.id)"
+                    style=" float:right"
+                    round
+                    type="danger">去支付</van-button>
+        <van-button size="small"
+                    v-if="handleOption.delete"
+                    @click="deleteOrder(orderInfo.id)"
+                    style=" float:right"
+                    type="danger">删除订单</van-button>
+        <van-button size="small"
+                    v-if="handleOption.confirm"
+                    @click="confirmOrder(orderInfo.id)"
+                    style=" float:right"
+                    type="danger">确认收货</van-button>
+        <van-button size="small"
+                    v-if="handleOption.refund"
+                    @click="refundOrder(orderInfo.id)"
+                    style=" float:right"
+                    type="danger">退款</van-button>
       </van-cell>
     </van-cell-group>
 
-    <van-cell-group v-if="showExp()" style="margin-top: 20px;">
+    <van-cell-group v-if="showExp()"
+                    style="margin-top: 20px;">
       <van-cell title="快递公司">
         <span>{{orderInfo.expCode }}</span>
       </van-cell>
@@ -96,7 +86,13 @@
 <script>
 import { Card, Field, SubmitBar, Button, Cell, CellGroup, Dialog } from 'vant';
 import _ from 'lodash';
-import { orderDetail } from '@/api/api';
+import {
+  orderDetail,
+  orderDelete,
+  orderConfirm,
+  orderCancel,
+  orderRefund
+} from '@/api/api';
 
 export default {
   data() {
@@ -117,31 +113,57 @@ export default {
     showExp() {
       return _.has(this.orderInfo, 'expNo');
     },
-    confirmOrder(){
-     Dialog.confirm({
-          message: '确定收货？'
-        }).then(() => {
-        });
+    deleteOrder(id) {
+      let that = this;
+      this.$dialog
+        .confirm({ message: '确定要删除该订单吗?' })
+        .then(() => {
+          orderDelete({ orderId: id }).then(() => {
+            this.$toast('已删除订单');
+            this.$router.go(-1);
+          });
+        })
+        .catch(() => {});
     },
-    refundOrder(){
-     Dialog.confirm({
-          message: '确定要取消此订单？'
-        }).then(() => {
-        });
+    cancelOrder(id) {
+      this.$dialog
+        .confirm({ message: '确定要取消该订单吗?' })
+        .then(() => {
+          orderDelete({ orderId: id }).then(() => {
+            this.init();
+            this.$toast('已取消该订单');
+          });
+        })
+        .catch(() => {});
+    },
+    confirmOrder(id) {
+      this.$dialog
+        .confirm({
+          message: '请确认收到货物, 确认收货后无法撤销!'
+        })
+        .then(() => {
+          orderConfirm({ orderId: id }).then(() => {
+            this.init();
+            this.$toast('已确认收货');
+          });
+        })
+        .catch(() => {});
+    },
+    refundOrder(id) {
+      this.$dialog
+        .confirm({ message: '确定要申请退款吗?' })
+        .then(() => {
+          orderRefund({ orderId: id }).then(() => {
+            this.init();
+            this.$toast('已申请订单退款');
+          });
+        })
+        .catch(() => {});
+    },
+    commentOrder(id) {},
+    toPay(id) {
+      this.$router.push({ name: 'payment', params: { orderId: id } });
     },
-    deleteOrder(){
-
-    },    
-    payOrder(){
-
-    },     
-    cancelOrder(){
-     Dialog.confirm({
-          message: '确定取消此订单？'
-        }).then(() => {
-          //  this.$router.go(-1);
-        });
-    },      
     init() {
       let orderId = this.$route.query.orderId;
       orderDetail({ orderId: orderId }).then(res => {
@@ -168,7 +190,7 @@ export default {
 
 
 <style lang="scss" scoped>
-.place_order_entity {
+.order_detail {
   padding-bottom: 70px;
 }
 </style>

litemall-vue/src/views/order/tabbar-cart.vue

@@ -145,7 +145,7 @@ export default {
       } else {
         this.isSubmit = true;
         setLocalStorage({AddressId: 0, CartId: 0, CouponId: 0});
-        this.$router.push({ name: 'placeOrderEntity'});
+        this.$router.push('/order/checkout');
       }
     },
     setCheckAll(val) {

litemall-vue/src/views/user/order-entity-list/index.vue → litemall-vue/src/views/user/order-list/index.vue

@@ -12,41 +12,41 @@
                   finished-text="没有更多了"
                   @load="getOrderList">
           <van-panel v-for="(el, i) in orderList"
-                     class="order_list--panel"
                      :key="i"
                      :title="'订单编号: ' + el.orderSn"
-                     :status="el.orderStatusText">
-            <div>
-              <van-card v-for="(goods, goodsI) in el.goodsList"
-                        class="order_list--van-card"
-                        :key="goodsI"
-                        :title="goods.goodsName"
-                        :num="goods.number"
-                        :thumb="goods.picUrl"
-                        @click.native="toOrderDetail(el.id)">
-                <div slot="desc">
-                  <div class="van-card__desc">
-                    <van-tag plain
-                             style="margin-right:6px;"
-                             v-for="(spec, index) in goods.specifications"
-                             :key="index">
-                      {{spec}}
-                    </van-tag>
-                  </div>
+                     :status="el.orderStatusText"
+                     @click.native="toOrderDetail(el.id)">
+            <van-card v-for="(goods, goodsI) in el.goodsList"
+                      :key="goodsI"
+                      :title="goods.goodsName"
+                      :num="goods.number"
+                      :thumb="goods.picUrl">
+              <div slot="desc">
+                <div class="desc">
+                  <van-tag plain
+                           style="margin-right:6px;"
+                           v-for="(spec, index) in goods.specifications"
+                           :key="index">
+                    {{spec}}
+                  </van-tag>
                 </div>
-              </van-card>
-              <div class="order_list--total">合计: {{el.actualPrice * 100 | yuan}}（含运费{{el.post_fee | yuan}}）</div>
-            </div>
+              </div>
+            </van-card>
+            <div class="total">合计: {{el.actualPrice * 100 | yuan}}（含运费{{el.post_fee | yuan}}）</div>
 
             <div slot="footer"
-                 class="order_list--footer_btn">
+                 class="footer_btn">
               <van-button size="small"
-                          v-if="el.handleOption.cencel"
+                          v-if="el.handleOption.cancel"
                           @click="cancelOrder(el.id)">取消订单</van-button>
               <van-button size="small"
                           v-if="el.handleOption.pay"
                           type="danger"
                           @click="toPay(el.id)">去支付</van-button>
+              <van-button size="small"
+                          v-if="el.handleOption.refund"
+                          type="danger"
+                          @click="refundOrder(el.id)">退款</van-button>
               <van-button size="small"
                           v-if="el.handleOption.confirm"
                           type="danger"
@@ -69,8 +69,8 @@
 </template>
 
 <script>
-import { orderList } from '@/api/api';
-
+import { orderList, orderDelete, orderConfirm, orderCancel, orderRefund } from '@/api/api';
+import _ from 'lodash';
 import { Tab, Tabs, Panel, Card, List, Tag } from 'vant';
 
 export default {
@@ -115,34 +115,65 @@ export default {
         this.finished = res.data.data.page >= res.data.data.pages;
       });
     },
-    delOrder(i) {
-      this.$dialog.confirm({ message: '确定要删除该订单吗?' });
-      this.items.splice(i, 1);
-      this.$toast('已删除该订单');
+    delOrder(id) {
+      let that = this;
+      this.$dialog
+        .confirm({ message: '确定要删除该订单吗?' })
+        .then(() => {
+          orderDelete({ orderId: id }).then(() => {
+            this.init();
+            this.$toast('已删除订单');
+          });
+        })
+        .catch(() => {});
     },
     cancelOrder(id) {
-      this.$dialog.confirm({ message: '确定要取消该订单吗?' });
-      this.$toast('已取消该订单');
+      this.$dialog
+        .confirm({ message: '确定要取消该订单吗?' })
+        .then(() => {
+          orderDelete({ orderId: id }).then(() => {
+            this.init();
+            this.$toast('已取消该订单');
+          });
+        })
+        .catch(() => {});
     },
+    refundOrder(id) {
+      this.$dialog
+        .confirm({ message: '确定要申请退款吗?' })
+        .then(() => {
+          orderRefund({ orderId: id }).then(() => {
+            this.init();
+            this.$toast('已申请订单退款');
+          });
+        })
+        .catch(() => {});
+    },    
     confirmOrder(id) {
-      this.$dialog.confirm({
-        message: '请确认收到货物, 确认收货后无法撤销!'
-      });
-      this.$toast('已确认收货');
+      this.$dialog
+        .confirm({
+          message: '请确认收到货物, 确认收货后无法撤销!'
+        })
+        .then(() => {
+          orderConfirm({ orderId: id }).then(() => {
+            this.init();
+            this.$toast('已确认收货');
+          });
+        })
+        .catch(() => {});
     },
     commentOrder(id) {},
     toPay(id) {
       this.$router.push({ name: 'payment', params: { orderId: id } });
     },
-    handleTabClick(index) {
-      this.activeIndex = index;
+    handleTabClick() {
       this.page = 0;
       this.orderList = [];
       this.getOrderList();
     },
     toOrderDetail(id) {
       this.$router.push({
-        name: 'orderDetail',
+        path: '/order/order-detail',
         query: { orderId: id }
       });
     }
@@ -160,21 +191,24 @@ export default {
 
 <style lang="scss" scoped>
 .order_list {
-  padding-bottom: 0;
-  &--footer_btn {
-    text-align: right;
-  }
-  &--panel {
-    margin-bottom: 20px;
+  .van-panel {
+    margin-top: 20px;
   }
 
-  &--van-card {
+  .van-card {
     background-color: #fff;
   }
 
-  &--total {
+  .total {
     text-align: right;
     padding: 10px;
   }
+
+  .footer_btn {
+    text-align: right;
+    .van-button {
+      margin-left: 10px;
+    }
+  }
 }
 </style>