发票

zhangxiaoxu123

2022-12-29 a7c9f5b6fba42e5e4d567c46498f633aab4d4fdc

发票

 .babelrc

New file
@@ -0,0 +1,9 @@
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

 src/components/page/invoice/invoiceForm.vue

@@ -2,13 +2,21 @@
    <div class="invoiceForm-wrap">
        <div class="title">订单发票</div>
        <div class="invoiceForm-main">
            <div>
            <div class="invoiceForm-main-inside">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    :offset="50"
                    :immediate-check="false"
                    @load="onLoad"
                >

                    <div v-for="(item,index) in invoiceData" :key="index">
                <el-checkbox
                    v-model="item.isShow"
                    :label="item.isShow"
                    class="invoiceForm-block"
                    v-for="(item,index) in invoiceData"
                    :key="index"
                    @change="handleCheckedCitiesChange(invoiceData)">
                    <div>
                        <div class="invoiceForm-content">
@@ -36,11 +44,12 @@
                        <h1 class="money-box">{{item.money}}</h1>
                    </div>
                </el-checkbox>
                    </div>
                </van-list>
                <div class="fapiao-btn">
                    <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    <el-button size="mini" @click="seeInvoice">下载发票</el-button>
                </div>

            </div>
        </div>

@@ -48,48 +57,67 @@
</template>

<script>
    import { List } from 'vant';
    export default {
        name: "invoiceForm",
        components: {
            vanList: List
        },
        data() {
            return {
                checkedInvoices: [1,2],
                invoiceData:[],
                checkAll:false,

                loading: false,
                finished: false,
                current:1,
                size:8,
                total:''
            }
        },
        mounted() {
            console.log(this.$route,'$route======$route')
            this.getByCarNo()
        },
        methods: {
            onLoad() {
               this.loading = true
               this.current += 1
               this.getByCarNo()

            },
            getByCarNo() {
                let url = this.$systemconfig.basePath + '/orderrecord/getByCarNo';
                // let params = {
                //     carNo: this.$route.query.carNo
                // }
                this.$byutil.postData(this,url,{carNo: this.$route.query.carNo},
                    res => {
                    this.invoiceData = res.data
                    console.log(this.invoiceData,'invoiceData====')
                let params = {
                    carNo: this.$route.query.carNo,
                    current: this.current,
                    size: this.size
                }
                this.$byutil.postData(this,url,params,res => {
                    let row = res.data.records
                    this.total = res.data.total
                    if(row == null) {
                        this.finished = true
                        return
                    }else {
                        this.loading = false
                        this.invoiceData = [...this.invoiceData,...row]
                        this.invoiceData.length >= this.total ? (this.finished = true) : (this.finished = false)
                    }

                })
            },
            handleCheckAllChange(val) {
                console.log(val,'val========')
                let ids = []
                this.invoiceData.forEach(item => {
                    ids.push(item.id)
                    item.isShow = val
                })
                console.log(this.invoiceData,'this.invoiceData======')
            },
            handleCheckedCitiesChange(value) {
                console.log(value,'value===')
                let checkedCount = value.length;
                let ids = value.filter(item => {
                    return item.isShow == true
                })
                console.log(ids,'ids========')
                this.checkAll = checkedCount === ids.length;
            },
            seeInvoice() {  //查看发票
@@ -145,7 +173,11 @@
        width: 100%;
        padding: 0 1.33vw  /* 10/7.5 */ 1.33vw  /* 10/7.5 */ 1.33vw  /* 10/7.5 */;
        box-sizing: border-box;
        //background: #fff;
        height: calc(100% - 11.73vw);
        .invoiceForm-main-inside{
            padding-bottom: 8vw  /* 60/7.5 */;
        }

    }
    .invoiceForm-content{
        font-size: 3.73vw  /* 28/7.5 */;
@@ -166,6 +198,7 @@
        display: flex;
        background: #fafafa;
        border-top: 1px solid #e5e5e5;
        z-index: 9;
    }
    .money-box{
        font-size: 4.8vw  /* 36/7.5 */;