修改前端页面

kongdeqiang

2022-12-31 de4c8dc172fe0721d08b51e66d824b19d9c1e8fd

 src/components/page/invoice/invoiceForm.vue

@@ -2,45 +2,67 @@
    <div class="invoiceForm-wrap">
        <div class="title">订单发票</div>
        <div class="invoiceForm-main">
            <div>
                <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">
            <div class="invoiceForm-main-inside">
                <div class="invoice-date-box">
                    <el-date-picker
                            :editable="false"
                            format="yyyy-MM"
                            value-format="yyyy-MM"
                            v-model="date"
                            type="month"
                            @change="changeDate"
                            placeholder="选择日期">
                    </el-date-picker>
                </div>
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    :offset="50"
                    :immediate-check="false"
                    @load="onLoad"
                >

                            <svg class="iconSvg" style="font-size: 12px" aria-hidden="true">
                                <use xlink:href="#icon-shijian3"></use>
                            </svg>
                            {{item.enterTime}}
                        </div>
                        <div class="invoiceForm-content">
                    <div v-for="(item,index) in invoiceData" :key="index">
                        <el-checkbox
                                v-model="item.isShow"
                                class="invoiceForm-block"
                                @change="handleCheckedCitiesChange(invoiceData)">
                            <div>
                                <div class="invoiceForm-content">

                            <svg class="iconSvg" style="font-size: 12px" aria-hidden="true">
                                <use xlink:href="#icon-shijian3"></use>
                            </svg>
                            {{item.outTime}}
                        </div>
                        <div class="invoiceForm-content">
                            <svg class="iconSvg" style="font-size: 12px" aria-hidden="true">
                                <use xlink:href="#icon-dizhi1"></use>
                            </svg>
                            {{item.address}}
                        </div>
                                    <svg class="iconSvg" style="font-size: 12px" aria-hidden="true">
                                        <use xlink:href="#icon-shijian3"></use>
                                    </svg>
                                    {{item.enterTime}}
                                </div>
                                <div class="invoiceForm-content">

                                    <svg class="iconSvg" style="font-size: 12px" aria-hidden="true">
                                        <use xlink:href="#icon-shijian3"></use>
                                    </svg>
                                    {{item.outTime}}
                                </div>
                                <div class="invoiceForm-content">
                                    <svg class="iconSvg" style="font-size: 12px" aria-hidden="true">
                                        <use xlink:href="#icon-dizhi1"></use>
                                    </svg>
                                    {{item.address}}
                                </div>
                            </div>
                            <div class="money-main">
                                <h1 class="money-box">{{item.money}}<font class="money-small">元</font></h1>
                            </div>
                        </el-checkbox>
                    </div>
                    <div>
                        <h1 class="money-box">{{item.money}}</h1>
                    </div>
                </el-checkbox>
                </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">{{countMoney}}</font>元</span>
                        <el-button size="mini" @click="seeInvoice">下载发票</el-button>
                    </div>
                </div>

            </div>
        </div>

@@ -48,58 +70,173 @@
</template>

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

                loading: false,
                finished: false,
                current:1,
                size:8,
                total:'',
                filedId: [],
                countMoney:0
            }
        },
        created() {
          this.date = this.$byutil.dateFormat(new Date(), "yyyy-MM");
        },
        mounted() {
            console.log(this.$route,'$route======$route')
            this.getByCarNo()
        },
        methods: {
            onLoad() {
               this.loading = true
               this.current += 1
               this.getByCarNo()

            },
            getByCarNo() {
              this.invoiceData = []
                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,
                    phone: this.$route.query.phone,
                    current: this.current,
                    size: this.size,
                    month: this.date
                }
                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
                        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========')
                this.filedId = []
                let ids = []
                this.countMoney = 0
                this.invoiceData.forEach(item => {
                    ids.push(item.id)
                    ids.push(item.fileId)
                    item.isShow = val
                    this.countMoney += item.money
                    this.filedId.push(item.fileId)
                })
                console.log(this.invoiceData,'this.invoiceData======')
            },
            handleCheckedCitiesChange(value) {
                console.log(value,'value===')
                this.filedId = []
                this.countMoney = 0
                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.countMoney += item.money
                        this.filedId.push(item.fileId)
                    })
                }
                this.checkAll = checkedCount === ids.length;
            },
            seeInvoice() {  //查看发票
            }
              if(this.filedId.length == 0){
                alert("请至少选择一项")
              }else {
                let result =  this.filedId.join(",")
                let url = this.$systemconfig.basePath + '/fileInfo/download/downloadZips';
                let param = {
                  fileIds : result
                }
                this.$byutil.postData(this,url,param,res => {

                })
              }
            },
          changeDate(){
              this.getByCarNo();
          }
        }
    }
</script>

<style lang="scss">
    .fapiao-btn{
        .el-checkbox{
          width: 100px!important;

        }
    }
    .invoice-date-box{
        .el-input__prefix{
            left: 21vw  /* 10/7.5 */!important;
            top: 2.4vw;
        }
        .el-input__inner{
            border: none!important;
            color: #303030;
            font-size: 3.73vw  /* 28/7.5 */;
            font-weight: 500;
        }
        .el-icon-date:before{
            background: url("../../../assets/images/down1.png") no-repeat center;
            background-size: 100% 100%;
            width: 2.67vw  /* 20/7.5 */;
            height: 2.67vw  /* 20/7.5 */;
            content: '';
            display: block;
        }
        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 */;
        }
        .el-icon-circle-close:before{
            content: '';
        }
    }

</style>
<style lang="scss" scoped>
    *{
        font-family: '苹方';
        color: #626262;
    }
    ::v-deep{
        .el-checkbox__input.is-checked+.el-checkbox__label{
            color: #606266;
        }
        .el-checkbox__inner{
            width: 4vw  /* 30/7.5 */;
            height: 4vw  /* 30/7.5 */;
            border-radius: 50%;

        }
        .el-checkbox__inner:hover{
            border: 1px solid #DCDFE6;
        }
        .el-checkbox{
            width: 100%;
            display: flex;
@@ -110,6 +247,10 @@
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .el-checkbox__inner::after{
            left: 5px;
            top: 2px;
        }
    }
    .iconSvg{
@@ -131,33 +272,67 @@
  }
    .invoiceForm-main{
        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 */;
            .invoice-date-box{
                background-color: #fff;
                padding:1.33vw  /* 10/7.5 */ 2.67vw  /* 20/7.5 */;
                display: flex;
                border-bottom: 1px solid #f5f5f5;
            }
        }

    }
    .invoiceForm-content{
        font-size: 3.73vw  /* 28/7.5 */;
        line-height: 1.5;
        line-height: 1.8;
    }
    .invoiceForm-block{
        border-bottom: 1px solid #e5e5e5;
        padding:4vw  /* 30/7.5 */ 2.67vw  /* 20/7.5 */;
        padding:4vw  /* 30/7.5 */;
        background-color: #fff;
        margin-top:2.13vw  /* 16/7.5 */;
    }
    .fapiao-btn{
        position: fixed;
        bottom: 0;
        left: 0;
        padding:1.33vw  /* 10/7.5 */ 2.67vw  /* 20/7.5 */;
        padding:1.87vw  /* 14/7.5 */ 2.67vw  /* 20/7.5 */;
        width: 100%;
        display: flex;
        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;
        line-height: 1.2;
    }
    .money-box{
        font-size: 4.8vw  /* 36/7.5 */;

        font-size: 6.4vw  /* 48/7.5 */;
        font-weight: normal;
        font-family: '苹方';
        color: #343434;
    }
    .money-small{
        font-size: 3.2vw  /* 24/7.5 */;
    }
}
</style>