<template>
|
<div class="invoiceForm-wrap">
|
<div v-if="isWeiXin ">
|
<div class="title">订单发票</div>
|
<div class="invoiceForm-main">
|
<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"
|
>
|
|
<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.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>
|
</van-list>
|
<div class="fapiao-btn">
|
<el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
|
<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>
|
</div>
|
<div class="middlePge-wrap" v-else>
|
<div class="middlePge-main">
|
<img src="../../../assets/images/middlePage.png" alt="">
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { List } from 'vant';
|
export default {
|
name: "invoiceForm",
|
components: {
|
vanList: List
|
},
|
data() {
|
return {
|
isWeiXin: false,
|
date:'',
|
checkedInvoices: [1,2],
|
invoiceData:[],
|
checkAll:false,
|
loading: false,
|
finished: false,
|
current:1,
|
size:8,
|
total:'',
|
filedId: [],
|
countMoney:0
|
}
|
},
|
created() {
|
this.checkWeiXin()
|
this.date = this.$byutil.dateFormat(new Date(), "yyyy-MM");
|
},
|
mounted() {
|
this.getByCarNo()
|
},
|
methods: {
|
checkWeiXin() {
|
// let userAgent = navigator.userAgent;
|
// console.log(userAgent)
|
// if (userAgent.includes("MicroMessenger")) {
|
// this.isWeiXin = true
|
// } else {
|
// this.isWeiXin = false
|
// }
|
let ua = window.navigator.userAgent.toLowerCase();
|
//通过正则表达式匹配ua中是否含有MicroMessenger字符串
|
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
|
this.isWeiXin = true
|
} else{
|
this.isWeiXin = false
|
}
|
},
|
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,
|
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) {
|
this.filedId = []
|
let ids = []
|
this.countMoney = 0
|
this.invoiceData.forEach(item => {
|
ids.push(item.fileId)
|
item.isShow = val
|
this.countMoney += item.money
|
this.filedId.push(item.fileId)
|
})
|
},
|
handleCheckedCitiesChange(value) {
|
this.filedId = []
|
this.countMoney = 0
|
let checkedCount = value.length;
|
let ids = value.filter(item => {
|
return item.isShow == true
|
})
|
|
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 url = this.$systemconfig.basePath + '/fileInfo/download/downloadPng';
|
this.filedId.forEach(item => {
|
console.log(item,'item=======')
|
let param = {
|
fileId : item
|
}
|
this.$byutil.exportData(this,url,param,res => {
|
console.log(res,'res====')
|
let date = new Date()
|
let time = this.$moment(date).format('YYYY-MM-DD HH:mm:ss')
|
let blob = new Blob([res], {type: 'image/png'});
|
let downloadElement = document.createElement("a");
|
downloadElement.style.display = "none";
|
let href = window.URL.createObjectURL(blob); //创建下载的链接
|
downloadElement.href = href;
|
downloadElement.download = time
|
document.body.appendChild(downloadElement);
|
downloadElement.click(); //点击下载
|
document.body.removeChild(downloadElement); //下载完成移除元素
|
window.URL.revokeObjectURL(href); //释放掉blob对象
|
})
|
})
|
}
|
},
|
changeDate(){
|
this.getByCarNo();
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.el-message-box{
|
width: 80% !important;
|
}
|
.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;
|
align-items: center;
|
}
|
.el-checkbox__label{
|
width: calc(100% - 20px);
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.el-checkbox__inner::after{
|
left: 5px;
|
top: 2px;
|
}
|
}
|
.middlePge-wrap{
|
width: 100%;
|
height: 100%;
|
background: rgba(0,0,0,0.7);
|
.middlePge-main{
|
width: 100%;
|
height: 100%;
|
img{
|
width: 100%;
|
}
|
}
|
}
|
.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%;
|
box-sizing: border-box;
|
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.8;
|
}
|
.invoiceForm-block{
|
border-bottom: 1px solid #e5e5e5;
|
padding:4vw /* 30/7.5 */;
|
background-color: #fff;
|
}
|
.fapiao-btn{
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
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: 6.4vw /* 48/7.5 */;
|
font-weight: normal;
|
font-family: '苹方';
|
color: #343434;
|
}
|
.money-small{
|
font-size: 3.2vw /* 24/7.5 */;
|
}
|
}
|
</style>
|
