个人中心-我的发票

zhc4dev
暖暖 2 years ago
parent ad5580e307
commit b291587a44
  1. 4
      ant-design-vue-jeecg/src/views/shopping/assets/common.css
  2. 157
      ant-design-vue-jeecg/src/views/shopping/pages/gerenzhongxin.vue

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

@ -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: ['allorders'],//
current: ['invoice1'],//
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{
this.allOrders=[]
}else if(key.key == 'invoice1'){//
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;*/

Loading…
Cancel
Save