添加中间页面

zhangxiaoxu123

2023-01-03 9f928812aca560e9973283c53d4cc5e1a1c00a3c

添加中间页面

 src/components/page/invoice/index.vue

@@ -106,10 +106,6 @@
            width: 88%;
            padding-right: 2.67vw  /* 20/7.5 */;
        }
        .el-form-item__content{
            display: flex;
            justify-content: center;
        }
    }
.invoice-wrap{
    width: 100%;

 src/components/page/invoice/invoiceForm.vue

@@ -162,23 +162,27 @@
              if(this.filedId.length == 0){
                alert("请至少选择一项")
              }else {
                let result =  this.filedId.join(",")
                let url = this.$systemconfig.basePath + '/fileInfo/download/downloadZips';
                    let url = this.$systemconfig.basePath + '/fileInfo/download/downloadPng';
                    this.filedId.forEach(item => {
                        console.log(item,'item=======')
                let param = {
                  fileIds : result
                                fileId : item
                }
                this.$byutil.exportData(this,url,param,res => {
                    console.log(res,'res=========')
                    let blob = new Blob([res], {type: 'application/zip'});
                            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 = '发票下载.zip'
                            downloadElement.download = time
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); //点击下载
                    document.body.removeChild(downloadElement); //下载完成移除元素
                    window.URL.revokeObjectURL(href); //释放掉blob对象
                        })
                })
              }
            },
@@ -190,6 +194,9 @@
</script>

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

 src/components/page/invoice/middlePge.vue

New file
@@ -0,0 +1,78 @@
<template>
   <div class="middlePge-wrap">
       <div class="middlePge-main">
           <div class="middlePge-block">
               <div class="num">1</div>
               <div class="wenzi-box">
                   <h1>点击右上角的</h1>
                   <div>...</div>
                   <h1>按钮</h1>
               </div>
           </div>
           <div class="middlePge-block">
               <div class="num">2</div>
               <div class="wenzi-box">
                   <h1>选择</h1>
                   <div>在浏览器中打开</div>
               </div>
           </div>
       </div>
   </div>
</template>

<script>
    export default {
        name: "middlePge.vue"
    }
</script>

<style lang="scss" scoped>
    *{
        font-family: '苹方';
        color: #626262;
    }
  .middlePge-wrap{
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.7);
      .middlePge-main{
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          padding: 18.67vw  /* 140/7.5 */ 5.33vw  /* 40/7.5 */;
          box-sizing: border-box;
          .middlePge-block{
              display: flex;
              margin-top: 6.67vw  /* 50/7.5 */;
              .num{
                  width: 5.33vw  /* 40/7.5 */;
                  height: 5.33vw  /* 40/7.5 */;
                  background: #f84e01;
                  border-radius: 50%;
                  line-height: 5.33vw;
                  text-align: center;
                  color: #fff;
              }
              .wenzi-box{
                  display: flex;
                  h1{
                      font-size: 3.73vw  /* 28/7.5 */;
                      color: #fff;
                      font-weight: normal;
                      letter-spacing: 2px;
                  }
                  div{
                      display: block;
                      border-radius: 1.33vw  /* 10/7.5 */;
                      box-shadow: 0 0 10px rgba(0,0,0,1);
                      padding: 0 2.67vw  /* 20/7.5 */;
                      color: #fff;
                      background-image: linear-gradient(to bottom,#49545a,#202227);
                      margin: 0 2px;
                  }
              }
          }
      }
  }
</style>

 src/router/index.js

@@ -98,6 +98,11 @@
            path: '/invoiceDetail',
            component: resolve => require(['../components/page/invoice/invoiceDetail'], resolve),
            meta: {title: '订单详情'}
        },
        {
            path: '/middlePge',
                component: resolve => require(['../components/page/invoice/middlePge'], resolve),
            meta: {title: ''}
        }

    ]