From 1411fe365fe8403a112fdd7bd86d99b8c3e57af0 Mon Sep 17 00:00:00 2001
From: zhangxiaoxu123 <819527061@qq.com>
Date: 星期五, 30 十二月 2022 17:21:09 +0800
Subject: [PATCH] 发票页面样式
---
src/components/page/invoice/invoiceForm.vue | 86 +++++++++++++++++++++++++++++++++++++++++-
1 files changed, 83 insertions(+), 3 deletions(-)
diff --git a/src/components/page/invoice/invoiceForm.vue b/src/components/page/invoice/invoiceForm.vue
index a110051..c93b5a0 100644
--- a/src/components/page/invoice/invoiceForm.vue
+++ b/src/components/page/invoice/invoiceForm.vue
@@ -3,6 +3,14 @@
<div class="title">璁㈠崟鍙戠エ</div>
<div class="invoiceForm-main">
<div class="invoiceForm-main-inside">
+ <div class="invoice-date-box">
+ <el-date-picker
+ class="invoice-date-box"
+ v-model="date"
+ type="date"
+ placeholder="閫夋嫨鏃ユ湡">
+ </el-date-picker>
+ </div>
<van-list
v-model="loading"
:finished="finished"
@@ -15,7 +23,6 @@
<div v-for="(item,index) in invoiceData" :key="index">
<el-checkbox
v-model="item.isShow"
- :label="item.isShow"
class="invoiceForm-block"
@change="handleCheckedCitiesChange(invoiceData)">
<div>
@@ -24,6 +31,7 @@
<svg class="iconSvg" style="font-size: 12px" aria-hidden="true">
<use xlink:href="#icon-shijian3"></use>
</svg>
+ {{item.isShow}}
{{item.enterTime}}
</div>
<div class="invoiceForm-content">
@@ -48,7 +56,10 @@
</van-list>
<div class="fapiao-btn">
<el-checkbox v-model="checkAll" @change="handleCheckAllChange">鍏ㄩ��</el-checkbox>
- <el-button size="mini" @click="seeInvoice">涓嬭浇鍙戠エ</el-button>
+ <div class="fapiao-right">
+ <span class="money">閲戦锛�<font class="big">235</font>鍏�</span>
+ <el-button size="mini" @click="seeInvoice">涓嬭浇鍙戠エ</el-button>
+ </div>
</div>
</div>
</div>
@@ -65,6 +76,7 @@
},
data() {
return {
+ date:'',
checkedInvoices: [1,2],
invoiceData:[],
checkAll:false,
@@ -72,7 +84,8 @@
finished: false,
current:1,
size:8,
- total:''
+ total:'',
+ filedId: []
}
},
mounted() {
@@ -95,6 +108,9 @@
}
this.$byutil.postData(this,url,params,res => {
let row = res.data.records
+ row.forEach(e=>{
+ this.$set(e,'isShow',false)
+ })
this.total = res.data.total
if(row == null) {
this.finished = true
@@ -108,25 +124,68 @@
})
},
handleCheckAllChange(val) {
+ this.filedId = []
let ids = []
this.invoiceData.forEach(item => {
ids.push(item.id)
item.isShow = val
+ this.filedId.push(item.id)
})
},
handleCheckedCitiesChange(value) {
+ console.log(value,'value')
+ this.filedId = []
let checkedCount = value.length;
let ids = value.filter(item => {
return item.isShow == true
})
+
+ console.log(ids,'ids=========')
+ if(ids.length > 0) {
+ ids.forEach(item => {
+ this.filedId.push(item.id)
+ })
+ }
this.checkAll = checkedCount === ids.length;
},
seeInvoice() { //鏌ョ湅鍙戠エ
+ console.log(this.filedId,'this.filedId==========')
}
}
}
</script>
+<style lang="scss">
+ .fapiao-btn{
+ .el-checkbox{
+ width: 100px!important;
+
+ }
+ }
+ .invoice-date-box{
+ .el-input__prefix{
+ right: 3vw /* 10/7.5 */!important;
+ top: 0.93vw /* 7/7.5 */;
+ }
+ .el-input__inner{
+ border: none!important;
+ }
+ .el-icon-date:before{
+ content: url("../../../assets/images/down.png");
+ width: 2.67vw /* 20/7.5 */;
+ height: 0.267rem /* 20/75 */;
+ }
+ input::-webkit-input-placeholder{ /*WebKit browsers*/
+ color: #303030;
+ font-size: 3.73vw /* 28/7.5 */;
+ font-weight: 500;
+ }
+ .el-input--prefix .el-input__inner{
+ padding-left: 2.67vw /* 20/7.5 */;
+ }
+ }
+
+</style>
<style lang="scss" scoped>
*{
font-family: '骞虫柟';
@@ -184,6 +243,11 @@
height: calc(100% - 11.73vw);
.invoiceForm-main-inside{
padding-bottom: 8vw /* 60/7.5 */;
+ .invoice-date-box{
+ background-color: #fff;
+ padding:1.33vw /* 10/7.5 */ 2.67vw /* 20/7.5 */;
+ display: flex;
+ }
}
}
@@ -206,6 +270,22 @@
background: #fafafa;
border-top: 1px solid #e5e5e5;
z-index: 9;
+ justify-content: space-between;
+ .fapiao-right{
+ display: flex;
+ }
+ .money{
+ display: flex;
+ align-self: center;
+ justify-content: center;
+ font-size: 3.73vw /* 28/7.5 */;
+ align-items: baseline;
+ margin-right: 4vw /* 30/7.5 */;
+ .big{
+ font-size: 4.8vw /* 36/7.5 */;
+ color: #dd894b;
+ }
+ }
}
.money-main{
align-self: flex-start;
--
Gitblit v1.9.1