|
@@ -0,0 +1,335 @@
|
|
|
|
+<!DOCTYPE html>
|
|
|
|
+<html>
|
|
|
|
+ <head>
|
|
|
|
+ <meta charset="utf-8" />
|
|
|
|
+ <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
|
|
|
|
+ <title></title>
|
|
|
|
+ <style>
|
|
|
|
+ table tr td {
|
|
|
|
+ border: 2px solid #333333;
|
|
|
|
+ padding: 5px 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ #app {
|
|
|
|
+ height: 88vh;
|
|
|
|
+ position: relative;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .simple {
|
|
|
|
+ height: 120vh !important;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .content {
|
|
|
|
+ width: 1000px;
|
|
|
|
+ margin: auto;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ table {
|
|
|
|
+ width: 100%;
|
|
|
|
+ text-align: center;
|
|
|
|
+ border-collapse: collapse;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .col-bgc {
|
|
|
|
+ background: #f6f7fb;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .bottom-row1 {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ margin: 20px 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .bottom-row2 {
|
|
|
|
+ display: flex;
|
|
|
|
+ margin: 10px 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ img {
|
|
|
|
+ width: 80px;
|
|
|
|
+ height: 80px;
|
|
|
|
+ /* margin-right: 118px; */
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .leftimg {
|
|
|
|
+ width: 80px;
|
|
|
|
+ height: 80px;
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 20px;
|
|
|
|
+ top: 3px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .config {
|
|
|
|
+ margin-right: 240px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .bottom-row3 {
|
|
|
|
+ margin: 10px 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .title {
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-size: 24px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .number {
|
|
|
|
+ text-align: right;
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .number1 {
|
|
|
|
+ text-align: right;
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ margin-top: 60px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .small-row {
|
|
|
|
+ display: flex;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .small-content {
|
|
|
|
+ width: 400px;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ border: 1px solid #ccc;
|
|
|
|
+ padding: 20px 20px 160px 20px;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 0;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ right: 0;
|
|
|
|
+ margin: auto;
|
|
|
|
+ height: 650px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .small-title {
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .small-row {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ margin: 10px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .small-img {
|
|
|
|
+ margin-right: 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .sign {
|
|
|
|
+ margin-right: 100px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .header {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ margin: 10px 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .header1 {
|
|
|
|
+ font-size: 24px;
|
|
|
|
+ /* margin: 30px 60px 10px 60px; */
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .line {
|
|
|
|
+ height: 2px;
|
|
|
|
+ width: 410px;
|
|
|
|
+ margin: 3px auto;
|
|
|
|
+ background: black;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .line:nth-of-type(3) {
|
|
|
|
+ margin-bottom: 30px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .header-top {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .sfcard {}
|
|
|
|
+
|
|
|
|
+ .sfcard-content {
|
|
|
|
+ /* display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-evenly; */
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .sfcard-content img {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 130vh;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .sfcard-title {
|
|
|
|
+ font-size: 28px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .center {
|
|
|
|
+ height: 140vh;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .part2 {
|
|
|
|
+ height: 140vh;
|
|
|
|
+ /* background: red; */
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .part5 {
|
|
|
|
+ width: 100%
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .paymentScreenshot {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 130vh
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /* .onlypz-center{
|
|
|
|
+ height: 130vh;
|
|
|
|
+ } */
|
|
|
|
+ </style>
|
|
|
|
+ </head>
|
|
|
|
+ <body>
|
|
|
|
+ <div id="app">
|
|
|
|
+ <div v-for="(item,index) in customerList1" :key="index">
|
|
|
|
+ <div class="content">
|
|
|
|
+ <div class="sfcard part3" v-if="isShowPrintType1">
|
|
|
|
+ <div class="sfcard-content">
|
|
|
|
+ <div class="sfcard-title">
|
|
|
|
+ {{ item.customerName}}{{
|
|
|
|
+ item.customerNumberCard}}
|
|
|
|
+ </div>
|
|
|
|
+ <img :src="item.imgURl.imageUrl1" class="avatar" />
|
|
|
|
+ </div>
|
|
|
|
+ <div class="sfcard-content">
|
|
|
|
+ <div class="sfcard-title">
|
|
|
|
+ {{ item.customerName}}{{
|
|
|
|
+ item.customerNumberCard}}
|
|
|
|
+ </div>
|
|
|
|
+ <img :src="item.imgURl.imageUrl2" class="avatar" />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="bankcard part4" v-if="isShowPrintType2">
|
|
|
|
+ <div class="sfcard-content">
|
|
|
|
+ <div class="sfcard-title">
|
|
|
|
+ {{item.customerName}}:{{item.bankDeposit}}{{item.bankCard}}
|
|
|
|
+ </div>
|
|
|
|
+ <img :src="item.imgURl.imageUrl3" class="avatar" />
|
|
|
|
+ </div>
|
|
|
|
+ <div class="sfcard-content">
|
|
|
|
+ <div class="sfcard-title">
|
|
|
|
+ {{item.customerName}}:{{item.bankDeposit}}{{item.bankCard}}
|
|
|
|
+ </div>
|
|
|
|
+ <img :src="item.imgURl.imageUrl4" class="avatar" />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </body>
|
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
|
|
|
|
+ <script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
|
|
+ <script type="text/javascript">
|
|
|
|
+ new Vue({
|
|
|
|
+ el: '#app',
|
|
|
|
+ data: {
|
|
|
|
+ isShowPrintType1: false,
|
|
|
|
+ isShowPrintType2: false,
|
|
|
|
+ isShowPrintType3: false,
|
|
|
|
+ isShowPrintType4: false,
|
|
|
|
+ isShowPrintType5: false,
|
|
|
|
+ showType: [],
|
|
|
|
+ printData: {},
|
|
|
|
+ printData1: [],
|
|
|
|
+ customerList: {},
|
|
|
|
+ customerList1: [],
|
|
|
|
+ name: '',
|
|
|
|
+ bigContent: false,
|
|
|
|
+ smallContent: false,
|
|
|
|
+ date: '',
|
|
|
|
+ imageUrl1: '',
|
|
|
|
+ imageUrl2: '',
|
|
|
|
+ imageUrl3: '',
|
|
|
|
+ imageUrl4: '',
|
|
|
|
+ identity: [],
|
|
|
|
+ bank: [],
|
|
|
|
+ selectPrint: false,
|
|
|
|
+ onlyShowPz: false,
|
|
|
|
+ tableData: []
|
|
|
|
+ },
|
|
|
|
+ computed: {},
|
|
|
|
+ methods: {
|
|
|
|
+ dealNo(str) {
|
|
|
|
+ return str.slice(4)
|
|
|
|
+ },
|
|
|
|
+ tableRowClassName({
|
|
|
|
+ row,
|
|
|
|
+ rowIndex
|
|
|
|
+ }) {
|
|
|
|
+ if (rowIndex === 1) {
|
|
|
|
+ return 'warning-row'
|
|
|
|
+ } else if (rowIndex === 3) {
|
|
|
|
+ return 'success-row'
|
|
|
|
+ }
|
|
|
|
+ return ''
|
|
|
|
+ },
|
|
|
|
+ getQueryVariable(variable) {
|
|
|
|
+ var query = window.location.search.substring(1)
|
|
|
|
+ var vars = query.split('&')
|
|
|
|
+ for (var i = 0; i < vars.length; i++) {
|
|
|
|
+ var pair = vars[i].split('=')
|
|
|
|
+ if (pair[0] == variable) {
|
|
|
|
+ return pair[1]
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return false
|
|
|
|
+ },
|
|
|
|
+ printSmall() {},
|
|
|
|
+ printBig() {}
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.date = new Date().toLocaleString()
|
|
|
|
+ this.showType = decodeURIComponent(this.getQueryVariable('printTypeList'))
|
|
|
|
+ this.customerList1 = JSON.parse(
|
|
|
|
+ localStorage.getItem('collectionContractCustomerList_printList')
|
|
|
|
+ )
|
|
|
|
+ for (let i = 0; i < this.customerList1.length; i++) {
|
|
|
|
+ let _url1 = this.customerList1[i].cardAddressUrl.split(',')
|
|
|
|
+ let _url2 = this.customerList1[i].payeeAddressUrl.split(',')
|
|
|
|
+ this.customerList1[i].imgURl = {
|
|
|
|
+ imageUrl1: _url1[0],
|
|
|
|
+ imageUrl2: _url1[1],
|
|
|
|
+ imageUrl3: _url2[0],
|
|
|
|
+ imageUrl4: _url2[0]
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ let _lsit = this.showType.split(',')
|
|
|
|
+ for (let i = 0; i < _lsit.length; i++) {
|
|
|
|
+ switch (_lsit[i]) {
|
|
|
|
+ case '打印身份证(正反面)':
|
|
|
|
+ this.isShowPrintType1 = !this.isShowPrintType1
|
|
|
|
+ break
|
|
|
|
+ case '打印银行卡(正反面)':
|
|
|
|
+ this.isShowPrintType2 = !this.isShowPrintType2
|
|
|
|
+ break
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ this.bigContent = true
|
|
|
|
+ this.smallContent = false
|
|
|
|
+ // if (this.printData.compName == undefined) this.printData.compName = ''
|
|
|
|
+ // document.title = this.printData.compName + '结算凭证'
|
|
|
|
+ window.print()
|
|
|
|
+ window.onafterprint = function(event) {
|
|
|
|
+ window.history.back(-1)
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ watch: {}
|
|
|
|
+ })
|
|
|
|
+ </script>
|
|
|
|
+</html>
|