订单

ant-design-vue-jeecg/src/views/shopping/pages/gerenzhongxin.vue

@@ -74,7 +74,8 @@
                 <span class="f_20 c_1B">总计：¥ {{item.total}}</span>
                 <span class="f_16 c_333 ">
                   <a class="btn ljzf" v-if="!item.pay">立即支付</a>
-                  <router-link to="/shopping/order" class="btn ckxq">查看详情</router-link>
+                  <a class="btn ljzf" v-if="!item.receipt && item.pay">确认收货</a>
+                  <a  class="btn ckxq" @click="openDetail(item)">查看详情</a>
                 </span>
               </p>
             </div>
@@ -93,17 +94,18 @@
     components: { Header,Footer },
     data() {
       return {
-        current: ['mail'],
+        current: ['allorders'],//目前打开的菜单
         allOrders1:[
           {
             id:1,
             orderNum:'CN172839729',
-            pay:false,
+            pay:false,//是否支付
+            receipt:false,//是否收货
             url:require("../assets/cloth001.png"),
             name:'商品名商品名商品名商品名商品',
             type:'衬衫',
             size:'XXL',
-            num:2,
+            num:1,
             price:2456,
             material:'主料1，辅料2，辅料3，辅料4，辅料5，辅料6',
             total:5912
@@ -112,6 +114,21 @@
             id:2,
             orderNum:'CN172839730',
             pay:true,
+            receipt:true,//是否收货
+            url:require("../assets/cloth002.png"),
+            name:'商品名商品名商品名商品名商品',
+            type:'衬衫',
+            size:'XXL',
+            num:2,
+            price:2456,
+            material:'主料1，辅料2，辅料3，辅料4，辅料5，辅料6',
+            total:5912
+          },
+          {
+            id:3,
+            orderNum:'CN172839731',
+            pay:true,
+            receipt:false,//是否收货
             url:require("../assets/cloth002.png"),
             name:'商品名商品名商品名商品名商品',
             type:'衬衫',
@@ -121,24 +138,47 @@
             material:'主料1，辅料2，辅料3，辅料4，辅料5，辅料6',
             total:5912
           }
-        ],
-        allOrders:[],
-
+        ],//所有订单，包括未支付、未收获等
+        allOrders:[],//目前展示的订单
       };
     },
+    mounted() {
+      if(this.current[0] == 'allorders'){
+        this.allOrders = this.allOrders1
+      }
+    },
     methods: {
       callback(key) {
         console.log(key);
       },
+      openDetail(item) {
+        console.log('item')
+        console.log(item)
+        this.$router.push({
+          path: "/shopping/order",
+          query: {
+            id: item.id,
+            pay: item.pay,
+            receipt: item.receipt,
+            },
+        });
+      },
       menuChange(key){
         this.current.shift()
         this.current.push(key.key)
-        console.log(this.allOrders)
-
         if(key.key == 'allorders'){
-          console.log('----')
           this.allOrders = this.allOrders1
-          console.log(this.allOrders)
+        }
+        else if(key.key == 'daizhifu'){
+          this.allOrders = this.allOrders1.filter(item=>item.pay == false)
+        }
+        else if(key.key == 'daishouhuo'){
+          this.allOrders = this.allOrders1.filter(item=>item.receipt == false && item.pay == true)
+        }
+        else if(key.key == 'yiwancheng'){
+          this.allOrders = this.allOrders1.filter(item=>item.receipt == true)
+        }else{
+          this.allOrders=[]
         }
       }
     },

ant-design-vue-jeecg/src/views/shopping/pages/orderDetails.vue

@@ -6,16 +6,16 @@
     <div class="orderMain">
       <div class="jz">
         <el-breadcrumb class="breadcrumb" separator="/">
-          <el-breadcrumb-item :to="{ path: '/shopping/views/clothType' }">上级页面</el-breadcrumb-item>
-          <el-breadcrumb-item :to="{ path: '/shopping/views/clothType' }">上级页面</el-breadcrumb-item>
-          <el-breadcrumb-item :to="{ path: '/shopping/views/clothType' }">上级页面</el-breadcrumb-item>
-<!--        <el-breadcrumb-item>{{this.$route.query.title }}</el-breadcrumb-item>-->
+          <el-breadcrumb-item :to="{ path: '/shopping/person' }">个人中心</el-breadcrumb-item>
+          <el-breadcrumb-item :to="{ path: '/shopping/person' }">上级页面</el-breadcrumb-item>
         </el-breadcrumb>
         <div class="d-flex">
           <div class="l">
             <div class="card">
-              <p class="f_24">已发货</p>
-              <a class="c_333 f_12">查看发票详情</a>
+              <p class="f_24" v-if="!this.model.pay">待支付</p>
+              <p class="f_24" v-if="!this.model.receipt && this.model.pay">待收货</p>
+              <p class="f_24" v-if="this.model.receipt">已完成</p>
+              <a class="c_333 f_12" v-if="this.model.receipt">查看发票详情</a>
             </div>
             <div class="steps">
               <a-steps direction="vertical" size="small" :current="1">
@@ -130,8 +130,20 @@
     components: { Header,Footer },
     data() {
       return {
+        model:{
+          id:'',
+          pay:false,
+          receipt:false
+        }
       };
     },
+    created() {
+      this.model.id = this.$route.query.id
+      this.model.pay = JSON.parse(this.$route.query.pay)
+      this.model.receipt = JSON.parse(this.$route.query.receipt)
+      console.log('this.model')
+      console.log(this.model)
+    },
     methods: {
 
     },