<template>
|
<div class="invoiceForm-wrap">
|
<div class="title">订单发票</div>
|
<div class="invoiceForm-main">
|
<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"
|
@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.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>
|
<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>
|
|
</div>
|
</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() {
|
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,
|
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) {
|
let ids = []
|
this.invoiceData.forEach(item => {
|
ids.push(item.id)
|
item.isShow = val
|
})
|
},
|
handleCheckedCitiesChange(value) {
|
let checkedCount = value.length;
|
let ids = value.filter(item => {
|
return item.isShow == true
|
})
|
this.checkAll = checkedCount === ids.length;
|
},
|
seeInvoice() { //查看发票
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::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;
|
align-items: center;
|
}
|
.el-checkbox__label{
|
width: calc(100% - 20px);
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
}
|
.iconSvg{
|
width: 3.2vw /* 24/7.5 */;
|
height: 3.2vw /* 24/7.5 */;
|
}
|
.invoiceForm-wrap{
|
width: 100%;
|
height: 100%;
|
background-color: #f5f5f5;
|
.title{
|
font-size: 4vw /* 30/7.5 */;
|
font-weight: bolder;
|
text-align: center;
|
height:11.73vw /* 88/7.5 */;
|
line-height: 11.73vw /* 88/7.5 */;
|
background: #fff;
|
border-bottom: 1px solid #f5f5f5;
|
}
|
.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;
|
height: calc(100% - 11.73vw);
|
.invoiceForm-main-inside{
|
padding-bottom: 8vw /* 60/7.5 */;
|
}
|
|
}
|
.invoiceForm-content{
|
font-size: 3.73vw /* 28/7.5 */;
|
line-height: 1.5;
|
}
|
.invoiceForm-block{
|
border-bottom: 1px solid #e5e5e5;
|
padding:4vw /* 30/7.5 */ 2.67vw /* 20/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 */;
|
width: 100%;
|
display: flex;
|
background: #fafafa;
|
border-top: 1px solid #e5e5e5;
|
z-index: 9;
|
}
|
.money-box{
|
font-size: 4.8vw /* 36/7.5 */;
|
|
}
|
}
|
</style>
|
