个人中心-我的发票

ant-design-vue-jeecg/src/views/shopping/assets/common.css

@@ -71,7 +71,9 @@ a {
 .fw_600 {
   font-weight: 600;
 }
-
+.fw_500 {
+  font-weight: 500;
+}
 .c_333 {
   color: #333;
 }

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

@@ -18,16 +18,16 @@
           <span slot="title" class="submenu-title-wrapper">发票管理<a-icon type="down" /></span>
 
             <a-menu-item key="invoice1">
-              Option 1
+              全部发票
             </a-menu-item>
             <a-menu-item key="invoice2">
-              Option 2
+              已开发票
             </a-menu-item>
             <a-menu-item key="invoice3">
-              Option 3
+              待开发票
             </a-menu-item>
             <a-menu-item key="invoice4">
-              Option 4
+              抬头管理
             </a-menu-item>
         </a-sub-menu>
         <a-sub-menu>
@@ -124,6 +124,35 @@
       </div>
       <Collection v-if="current[0] == 'collect'"></Collection>
       <AddrView v-if="current[0] == 'addr'"></AddrView>
+      <div class="invoiceList">
+<!--        发票管理-->
+        <div class="invoice" v-for="(item,index) in invoiceList" :key="index">
+          <div class="d-flex title">
+            <span class="c_333 f_16">{{item.date}}</span>
+            <span class="font_01" v-if="item.billing">已开票</span>
+            <span class="font_01" v-if="!item.billing">待开票</span>
+          </div>
+          <div class="d-flex">
+            <div class="img">
+              <img :src="item.imgUrl"/>
+            </div>
+            <div class="invoiceInfo">
+              <div class="font_01">订单编号：{{item.orderNum}}</div>
+              <div class="font_02">发票类型：{{item.type}}</div>
+              <div class="font_02">发票内容：{{item.content}}</div>
+              <div class="font_02">发票抬头：{{item.title}}</div>
+              <div class="font_02">开票金额：{{item.price}}</div>
+            </div>
+            <div class="btnDiv d-flex">
+              <div class="dialogButton primary">申请换开</div>
+              <div class="dialogButton default">查看详情</div>
+            </div>
+          </div>
+        </div>
+<!--        发票抬头管理-->
+        <div class="invoice"></div>
+
+      </div>
       <div class="orderList" >
         <div class="item" v-for="(item,index) in allOrders" :key="index">
           <div class="top d-flex">
@@ -180,8 +209,7 @@
       model:{
         username1: ""
       },
-
+        current: ['invoice1'],//目前打开的菜单
-        current: ['allorders'],//目前打开的菜单
         key:'',//当前选择的订单状态（待支付、待收货等）
         allOrders2:[],
         allOrders1:[
@@ -229,7 +257,42 @@
           }
         ],//所有订单，包括未支付、未收获等
         allOrders:[],//目前展示的订单
-
+        invoiceList:[],//目前展示的发票列表
+        invoiceList1:[
+          {
+            id:1,
+            date:'2022-08-19 14:09:13',
+            billing:true,//是否已开票
+            imgUrl:require("../assets/cloth001.png"),
+            orderNum:1237943879,//订单编号
+            type:"1",//为1为普通发票
+            content:"商品明细",//发票内容
+            title:"易创网络科技有限公司",//抬头
+            price:2456,//价格
+          },
+          {
+            id:2,
+            date:'2022-08-20 14:09:13',
+            billing:false,//是否已开票
+            imgUrl:require("../assets/cloth002.png"),
+            orderNum:1237943880,//订单编号
+            type:"1",//为1为普通发票
+            content:"商品明细",//发票内容
+            title:"易创网络科技有限公司",//抬头
+            price:2456,//价格
+          },
+          {
+            id:3,
+            date:'2022-08-30 14:09:13',
+            billing:true,//是否已开票
+            imgUrl:require("../assets/cloth003.png"),
+            orderNum:1237943881,//订单编号
+            type:"1",//为1为普通发票
+            content:"商品明细",//发票内容
+            title:"易创网络科技有限公司",//抬头
+            price:2456,//价格
+          },
+        ],//全部发票数据
 
         url: {
           list: "/starehouse/starehouse/list",
@@ -420,9 +483,18 @@
         else if(key.key == 'yiwancheng'){
           /*this.allOrders = this.allOrders1.filter(item=>item.receipt == true)*/
           this.allOrders = this.allOrders2.filter(item=>item.receipt == true)
-        }else{
+        }else if(key.key == 'invoice1'){//选择全部发票选项
-          this.allOrders=[]
+          this.invoiceList = this.invoiceList1
         }
+        else if(key.key == 'invoice2'){//选择已开发票选项
+          this.invoiceList = this.invoiceList1.filter(item=>item.billing == true)
+        }
+        else if(key.key == 'invoice3'){//选择未开发票选项
+          this.invoiceList = this.invoiceList1.filter(item=>item.billing == false)
+        }
+        // else{
+        //   this.allOrders=[]
+        // }
       }
     },
   };
@@ -438,6 +510,18 @@
       line-height: 40px;
       transition: all 0.2s;
     }
+    .default {
+      border: 2px solid #1b1b1b;
+      color: #1b1b1b;
+      margin-right: 20px;
+
+      &:hover {
+        border: 2px solid  #1b1b1b;
+        color: #fff;
+        opacity: 0.8;
+        background-color: #1b1b1b;
+      }
+    }
     .primary {
       background: #1b1b1b;
       border: 2px solid #1b1b1b;
@@ -447,6 +531,15 @@
       }
     }
   }
+.font_01{
+  color: #333;
+  font-size: 16px;
+  font-weight: 500;
+}
+  .font_02{
+    color: #333;
+    font-size: 16px;
+  }
   .bg{
     width: 100%;
     height: 250px;
@@ -474,6 +567,52 @@
   /deep/ .ant-menu{
     display: flex;
     justify-content: space-between;
+  }
+  .invoiceList{
+    padding-left: 20px;
+    padding-right: 20px;
+    width: 1114px;margin:0 auto;
+    .d-flex{
+      justify-content: space-between;
+    }
+    .invoice{
+      padding-top: 40px;
+      padding-bottom: 20px;
+      border-bottom: 1px solid #DADADA;
+      .title{
+        margin-bottom: 25px;
+      }
+      .img{
+        width: 232px;
+        height: 232px;
+        img{
+          width: 232px;
+          height: 232px;
+        }
+      }
+      .invoiceInfo{
+        width: 483px;
+        .font_01{
+          margin-bottom: 26px;
+        }
+        .font_02{
+          margin-bottom: 12px;
+        }
+      }
+      .btnDiv{
+        width: 145px;
+        flex-direction: column;
+        justify-content: flex-end;
+        padding-bottom: 26px;
+        .dialogButton{
+          width: 100%;
+          margin-bottom: 17px;
+        }
+      }
+    }
+
+
+
   }
   .orderList{
     /*margin-top: 60px;*/