From 64c05063a787166e7e01da0170f1bd27e27b88a5 Mon Sep 17 00:00:00 2001
From: zhangxiaoxu123 <819527061@qq.com>
Date: 星期二, 03 一月 2023 21:11:16 +0800
Subject: [PATCH] 图片
---
src/components/page/invoice/invoiceForm.vue | 360 +++++++++++++++++++++++++++++++++---------------------------
1 files changed, 198 insertions(+), 162 deletions(-)
diff --git a/src/components/page/invoice/invoiceForm.vue b/src/components/page/invoice/invoiceForm.vue
index 7f26dac..c8cbb7d 100644
--- a/src/components/page/invoice/invoiceForm.vue
+++ b/src/components/page/invoice/invoiceForm.vue
@@ -1,71 +1,77 @@
<template>
<div class="invoiceForm-wrap">
- <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 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>
- <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>
+ <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>
@@ -78,6 +84,7 @@
},
data() {
return {
+ isWeiXin: false,
date:'',
checkedInvoices: [1,2],
invoiceData:[],
@@ -92,20 +99,30 @@
}
},
created() {
- this.date = this.$byutil.dateFormat(new Date(), "yyyy-MM");
+ 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
+ }
+ },
onLoad() {
- this.loading = true
- this.current += 1
- this.getByCarNo()
+ this.loading = true
+ this.current += 1
+ this.getByCarNo()
},
getByCarNo() {
- this.invoiceData = []
+ this.invoiceData = []
let url = this.$systemconfig.basePath + '/orderrecord/getByCarNo';
let params = {
carNo: this.$route.query.carNo,
@@ -152,47 +169,54 @@
if(ids.length > 0) {
ids.forEach(item => {
- this.countMoney += item.money
+ 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
+ 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); //閲婃斁鎺塨lob瀵硅薄
+ })
+ })
}
- this.$byutil.exportData(this,url,param,res => {
- console.log(res,'res=========')
- let blob = new Blob([res], {type: 'application/zip'});
- let downloadElement = document.createElement("a");
- downloadElement.style.display = "none";
- let href = window.URL.createObjectURL(blob); //鍒涘缓涓嬭浇鐨勯摼鎺�
- downloadElement.href = href;
- downloadElement.download = '鍙戠エ涓嬭浇.zip'
- document.body.appendChild(downloadElement);
- downloadElement.click(); //鐐瑰嚮涓嬭浇
- document.body.removeChild(downloadElement); //涓嬭浇瀹屾垚绉婚櫎鍏冪礌
- window.URL.revokeObjectURL(href); //閲婃斁鎺塨lob瀵硅薄
- })
- }
},
- changeDate(){
- this.getByCarNo();
- }
+ changeDate(){
+ this.getByCarNo();
+ }
}
}
</script>
<style lang="scss">
+ .el-message-box{
+ width: 80% !important;
+ }
.fapiao-btn{
.el-checkbox{
- width: 100px!important;
+ width: 100px!important;
}
}
@@ -263,86 +287,98 @@
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{
+ .invoiceForm-wrap{
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;
- }
+ 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;
+ .invoiceForm-content{
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;
+ 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 */;
+ }
}
- .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>
--
Gitblit v1.9.1