发票页面样式

zhangxiaoxu123

2022-12-30 1411fe365fe8403a112fdd7bd86d99b8c3e57af0

 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;