chore[litemall-vue]: 调整订单页面

litemall-vue/src/views/order/orderDetail/bottom-goods-info.vue

@@ -1,66 +0,0 @@
-<template>
-  <div class="order-goods">
-    <van-card
-      v-for="item in goodsInfo.orderGoods"
-      :key="item.id"
-      :title="item.goodsName"
-      desc="暂无描述"
-      :num="item.number"
-      :price="item.price +'.00'"
-      :thumb="item.picUrl"
-    ></van-card>
-
-    <van-cell-group>
-      <!-- <van-field v-model="remark" placeholder="请输入备注" label="订单备注"> -->
-      <!-- <template slot="icon">{{remark.length}}/50</template> -->
-      <!-- </van-field> -->
-      <van-cell title="商品金额">
-        <span class="red">{{goodsInfo.orderInfo.goodsPrice * 100 | yuan}}</span>
-      </van-cell>
-      <van-cell title="邮费" :value="goodsInfo.orderInfo.freightPrice "></van-cell>
-      <!-- <van-cell title="税费" value="¥8.96"></van-cell> -->
-      <!-- <van-cell title="优惠券">
-        <span class="red">-{{ goodsInfo.orderInfo.xxx * 100 || 0 | yuan}}</span>
-      </van-cell>-->
-    </van-cell-group>
-  </div>
-</template>
-
-<script>
-import { Card, Field } from 'vant';
-
-export default {
-  name: 'bottom-goods-info',
-  props: {
-    goodsInfo: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    return {
-      remark: ''
-      // goodsInfo: {}
-    };
-  },
-  created() {},
-  methods: {
-    // async init() {
-    //   let { data } = await this.$reqGet(
-    //     '/wx/cart/checkout?cartId=0&addressId=0&couponId=0&grouponRulesId=0'
-    //   );
-    //   debugger;
-    //   this.goodsInfo = data.data;
-    // }
-  },
-  components: {
-    [Card.name]: Card,
-    [Field.name]: Field
-  }
-};
-</script>
-<style lang="scss" scoped>
-.order-goods {
-  background-color: #fff;
-}
-</style>

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

@@ -1,257 +1,174 @@
-<template>
-  <div class="place_order_entity">
-    <top-user-info :goodsInfo="goodsInfo" style="margin-bottom: 20px;"/>
-
-    <bottom-goods-info :goodsInfo="goodsInfo"/>
-
-    <van-cell-group style="margin-top: 20px;">
-      <van-cell title="下单时间">
-        <span>{{goodsInfo.orderInfo.addTime }}</span>
-      </van-cell>
-      <van-cell title="订单编号">
-        <span>{{goodsInfo.orderInfo.orderSn }}</span>
-      </van-cell>
-
-      <van-cell>
-        <template slot="title">
-          <span class="custom-text">实付款：</span>
-          <span class="red">{{goodsInfo.orderInfo.actualPrice * 100 | yuan}}</span>
-        </template>
-        <!-- 订单动作 -->
-        <van-button
-          v-if="getStatus() !== ''"
-          size="small"
-          @click="orderAction"
-          style=" float:right"
-          type="danger"
-        >{{getCurrentButtonText()}}</van-button>
-        <!-- 未付款的时候价格取消的动作 -->
-        <van-button
-          size="small"
-          v-if="getStatus() === 'pay'"
-          @click="cancelOrder"
-          style=" float:right"
-          type="danger"
-        >取消订单</van-button>
-      </van-cell>
-    </van-cell-group>
-
-    <van-cell-group v-if="showExp" style="margin-top: 20px;">
-      <van-cell title="快递公司">
-        <span>{{goodsInfo.orderInfo.expCode }}</span>
-      </van-cell>
-      <van-cell title="快递编号">
-        <span>{{goodsInfo.orderInfo.expNo }}</span>
-      </van-cell>
-    </van-cell-group>
-    <!-- <van-button @click="cancelOrder" style=" position: absolute;bottom: 4px;z-index: 1000;" type="danger">取消订单</van-button> -->
-    <!-- <van-submit-bar
-      v-if="showSubmit()"
-      :price="goodsInfo.orderInfo.actualPrice*100"
-      label="总计："
-      buttonText="支付"
-      :loading="isSubmit"
-      :disabled="isDisabled"
-      @submit="onSubmit"
-    ></van-submit-bar>-->
-  </div>
-</template>
-
-<script>
-import topUserInfo from './top-user-info';
-import bottomGoodsInfo from './bottom-goods-info';
-import { SubmitBar, Button, Cell, CellGroup, Dialog } from 'vant';
-import _ from 'lodash';
-
-export default {
-  data() {
-    return {
-      isSubmit: false,
-      isDisabled: false,
-      goodsInfo: {}
-    };
-  },
-  created() {
-    this.init();
-  },
-
-  methods: {
-    getStatus() {
-      let options = this.goodsInfo.orderInfo.handleOption;
-      let current_allow_option = '';
-      _.each(options, (v, k) => {
-        if (v) current_allow_option = k;
-      });
-      return current_allow_option;
-    },
-    /**\
-     * cancel: false
-      comment: false
-      confirm: false
-      delete: true
-      pay: false
-      rebuy: false
-      refund: false
-     */
-    showExp() {
-      return _.has(goodsInfo.orderInfo, 'expNo');
-    },
-    getCurrentButtonText() {
-      let option = this.getStatus();
-      if (option === 'cancel') return '取消订单';
-      if (option === 'delete') return '删除订单';
-      if (option === 'confirm') return '确认收货';
-      if (option === 'pay') return '支付订单';
-      if (option === 'rebuy') return '删除订单';
-      if (option === 'refund') return '申请退款';
-      if (option === 'comment') return '评价';
-    },
-    showSubmit() {
-      if (this.getStatus() === 'refund') {
-        return false;
-      }
-    },
-    async orderAction() {
-      let option = this.getStatus();
-      if (option === 'cancel') {
-        this.cancelOrder();
-      }
-      if (option === 'confirm') {
-        await Dialog.confirm({
-          message: '确定收货？'
-        }).then(() => {
-          this.doAction(option);
-        });
-      }
-      if (option === 'refund') {
-        await Dialog.confirm({
-          message: '确定要取消此订单？'
-        }).then(() => {
-          this.doAction(option);
-        });
-      }
-      if (option === 'rebuy') {
-        await Dialog.confirm({
-          message: '确定要删除此订单？'
-        }).then(() => {
-          this.doAction('delete');
-        });
-      }
-      if (option === 'pay') {
-        this.doAction('prepay', false);
-      }
-      // if (option === 'pay')
-      // if (option === 'rebuy')
-      // if (option === 'refund')
-      // if (option === 'comment')
-    },
-    async doAction(status, skip) {
-      let { data } = await this.$reqPost(`/wx/order/${status}`, {
-        orderId: this.$route.query.orderId
-      });
-      if (skip != false) {
-        if (data.errno == 0) this.$router.go(-1);
-      }
-      if (status == 'prepay') {
-        function onBridgeReady() {
-          console.log(JSON.stringify(data));
-          // var timeStamp = Date.parse(new Date());
-          // var packageV = 'prepay_id=' + data.data.prepay_id;
-          var params = {
-            appId: data.data.appId, //公众号名称，由商户传入
-            timeStamp: data.data.timeStamp, //时间戳，自1970年以来的秒数
-            nonceStr: data.data.nonceStr, //随机串
-            package: data.data.packageValue,
-            signType: data.data.signType, //微信签名方式：
-            paySign: data.data.paySign //微信签名
-          };
-
-          console.log(params);
-          WeixinJSBridge.invoke('getBrandWCPayRequest', params, function(res) {
-            console.log(JSON.stringify(res));
-            if (res.err_msg == 'get_brand_wcpay_request:ok') {
-              // 使用以上方式判断前端返回,微信团队郑重提示：
-              //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
-              that.$router.push({
-                name: 'paymentStatus',
-                params: {
-                  status: 'success'
-                }
-              });
-            }
-          });
-        }
-        if (typeof WeixinJSBridge == 'undefined') {
-          if (document.addEventListener) {
-            document.addEventListener(
-              'WeixinJSBridgeReady',
-              onBridgeReady,
-              false
-            );
-          } else if (document.attachEvent) {
-            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
-            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
-          }
-        } else {
-          onBridgeReady();
-        }
-      }
-    },
-    async cancelOrder() {
-      await Dialog.confirm({
-        message: '确定取消订单？'
-      }).then(() => {
-        let { data } = this.$reqPost('/wx/order/cancel', {
-          orderId: this.$route.query.orderId
-        });
-        // if (data.errno == 0)
-        this.$router.go(-1);
-      });
-    },
-    async delOrder() {
-      let { data } = await this.$reqPost('/wx/order/delete', {
-        orderId: this.$route.query.orderId
-      });
-      if (data.errno == 0) this.$router.go(-1);
-    },
-    async onSubmit() {
-      this.isSubmit = true;
-      let cartId = this.$route.params.cartId;
-      let { data } = await this.$reqPost('/wx/order/submit', {
-        addressId: this.goodsInfo.addressId,
-        cartId: cartId || 0,
-        couponId: 0,
-        grouponLinkId: 0,
-        grouponRulesId: 0,
-        message: ''
-      });
-      this.$router.replace({ name: 'payment' });
-    },
-    async init() {
-      // let cartId = this.$route.params.cartId;
-      let orderId = this.$route.query.orderId;
-      let { data } = await this.$reqGet(
-        `/wx/order/detail?orderId=${orderId}`
-      );
-      this.goodsInfo = data.data;
-    }
-  },
-
-  components: {
-    [Dialog.name]: Dialog,
-    [CellGroup.name]: CellGroup,
-    [Cell.name]: Cell,
-    [Button.name]: Button,
-    [SubmitBar.name]: SubmitBar,
-    [topUserInfo.name]: topUserInfo,
-    [bottomGoodsInfo.name]: bottomGoodsInfo
-  }
-};
-</script>
-
-
-<style lang="scss" scoped>
-.place_order_entity {
-  padding-bottom: 70px;
-}
-</style>
+<template>
+  <div class="place_order_entity">
+    <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-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-group>
+    </div>
+
+    <van-cell-group style="margin-top: 20px;">
+      <van-cell
+        icon="dingwei"
+        :title="`${orderInfo.consignee}  ${orderInfo.mobile}`"
+        :label="orderInfo.address"
+      />
+    </van-cell-group>
+
+    <van-cell-group style="margin-top: 20px;">
+      <van-cell title="下单时间">
+        <span>{{orderInfo.addTime }}</span>
+      </van-cell>
+      <van-cell title="订单编号">
+        <span>{{orderInfo.orderSn }}</span>
+      </van-cell>
+      <van-cell title="订单备注">
+        <span>{{orderInfo.remark }}</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-cell>
+    </van-cell-group>
+
+    <van-cell-group v-if="showExp()" style="margin-top: 20px;">
+      <van-cell title="快递公司">
+        <span>{{orderInfo.expCode }}</span>
+      </van-cell>
+      <van-cell title="快递编号">
+        <span>{{orderInfo.expNo }}</span>
+      </van-cell>
+    </van-cell-group>
+  </div>
+</template>
+
+<script>
+import { Card, Field, SubmitBar, Button, Cell, CellGroup, Dialog } from 'vant';
+import _ from 'lodash';
+import { orderDetail } from '@/api/api';
+
+export default {
+  data() {
+    return {
+      isSubmit: false,
+      isDisabled: false,
+      orderInfo: {},
+      orderGoods: [],
+      handleOption: {},
+      expressInfo: {}
+    };
+  },
+  created() {
+    this.init();
+  },
+
+  methods: {
+    showExp() {
+      return _.has(this.orderInfo, 'expNo');
+    },
+    confirmOrder(){
+     Dialog.confirm({
+          message: '确定收货？'
+        }).then(() => {
+        });
+    },
+    refundOrder(){
+     Dialog.confirm({
+          message: '确定要取消此订单？'
+        }).then(() => {
+        });
+    },
+    deleteOrder(){
+
+    },    
+    payOrder(){
+
+    },     
+    cancelOrder(){
+     Dialog.confirm({
+          message: '确定取消此订单？'
+        }).then(() => {
+          //  this.$router.go(-1);
+        });
+    },      
+    init() {
+      let orderId = this.$route.query.orderId;
+      orderDetail({ orderId: orderId }).then(res => {
+        var data = res.data.data;
+        this.orderInfo = data.orderInfo;
+        this.orderGoods = data.orderGoods;
+        this.handleOption = data.orderInfo.handleOption;
+        this.expressInfo = data.expressInfo;
+      });
+    }
+  },
+
+  components: {
+    [Dialog.name]: Dialog,
+    [CellGroup.name]: CellGroup,
+    [Cell.name]: Cell,
+    [Button.name]: Button,
+    [SubmitBar.name]: SubmitBar,
+    [Card.name]: Card,
+    [Field.name]: Field
+  }
+};
+</script>
+
+
+<style lang="scss" scoped>
+.place_order_entity {
+  padding-bottom: 70px;
+}
+</style>

litemall-vue/src/views/order/orderDetail/top-user-info.vue

@@ -1,62 +0,0 @@
-<template>
-  <van-cell-group>
-    <van-cell
-      icon="dingwei"
-      isLink
-      :title="`${goodsInfo.orderInfo.consignee}  ${goodsInfo.orderInfo.mobile}`"
-      :label="goodsInfo.orderInfo.address"
-    />
-
-    <!-- <van-cell class="daodian" title="到店自提" label="浙江省 杭州市 西湖区 创新创业园">
-      <van-checkbox v-model="isDaoDian" slot="icon"></van-checkbox>
-    </van-cell>-->
-    <!-- <van-cell icon="id-card" title="张三" label="330327********1574" isLink/> -->
-  </van-cell-group>
-</template>
-
-<script>
-import { Checkbox } from 'vant';
-
-export default {
-  name: 'top-user-info',
-  props: {
-    goodsInfo: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    return {
-      isDaoDian: false
-    };
-  },
-
-  components: {
-    [Checkbox.name]: Checkbox
-  }
-};
-</script>
-
-
-<style lang="scss">
-.daodian {
-  .van-checkbox .van-icon-success {
-    height: 16px;
-    width: 16px;
-    font-size: $font-size-small;
-    &::before {
-      line-height: 16px;
-    }
-  }
-  .van-checkbox__input {
-    height: 16px;
-  }
-  .van-checkbox__label {
-    margin-left: 0;
-  }
-  .shop_address {
-    padding-left: 25px;
-    box-sizing: border-box;
-  }
-}
-</style>

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

@@ -120,8 +120,8 @@ export default {
     },
     toOrderDetail(id) {
       this.$router.push({
-        name: `orderDetail`,
-        query: { cartId: 0, orderId: id }
+        name: 'orderDetail',
+        query: { orderId: id }
       });
     }
   },