product_wx/pages/subPackages/enterPriseBill/detail.vue

<template>
   <div class="enterPriseBillDetail">
      <div class="detailBody">
         <ul class="detailUl">
           <li class="detailLi">
             <span class="liName">企业名称</span>
             <span class="liInfo">{{form.companyName}}</span>
           </li>
           <li class="detailLi">
             <span class="liName">账单名称</span>
             <span class="liInfo">{{form.billName}}</span>
           </li>
           <li class="detailLi">
             <span class="liName">对应载体</span>
             <span class="liInfo">{{form.buildName}}</span>
           </li>
           <li class="detailLi">
             <span class="liName">账单金额</span>
             <span class="liInfo">{{form.invoiceAmount}}</span>
           </li>
           <li class="detailLi">
             <span class="liName">欠款金额</span>
             <span class="liInfo">{{form.restMoney}}</span>
           </li>
           <li class="detailLi">
             <span class="liName">发票号</span>
             <span @click="downLoadPdf" class="liInfo" style="color: #0365F9">{{form.invoiceNo}}</span>
           </li>
           <li class="detailLi">
             <span class="liName">账单逾期</span>
             <span class="liInfo" style="color: #F21912">{{form.overdueDays}}天</span>
           </li>
         </ul>
        <button class="loginbtn" @click="backClick">
          返回
        </button>
      </div>
   </div>
</template>

<script>
export default {
  name: "detail",
  data(){
    return{
      form:{
        companyName: '',
        billName: '',
        buildName: '',
        invoiceAmount: '',
        restMoney: '',
        invoiceNo: '',
        eInvoiceUrl: '',
        overdueDays: ''
      }
    }
  },
  onLoad(options){
    console.log('options', options)
    const item = JSON.parse(options.item)
    this.form = item
  },
  methods:{
    backClick(){
      uni.redirectTo({
        url: "/pages/subPackages/enterPriseBill/index",
      });
    },
    //签订合同下载
    downLoadPdf() {
      const url = decodeURIComponent(this.form.eInvoiceUrl)
      uni.downloadFile({
        url: url,//下载地址接口返回
        success: (data) => {
          //文件保存到本地
          uni.saveFile({
            tempFilePath: data.tempFilePath, //临时路径
            success: function(res) {
              uni.showToast({
                icon: 'none',
                mask: true,
                title: '文件已保存：' + res.savedFilePath, //保存路径
                duration: 3000,
              });
              setTimeout(() => {
                //打开文档查看
                uni.openDocument({
                  filePath: res.savedFilePath,
                  success: function(res) {
                    // console.log('打开文档成功');
                  }
                });
              }, 3000)
            }
          });
        },
        fail: (err) => {
          console.log(err);
          uni.showToast({
            icon: 'none',
            mask: true,
            title: '失败请重新下载',
          });
        },
      });
    },

  }
}
</script>

<style lang="scss">
    .enterPriseBillDetail{
      .detailBody{
        background: white;
        margin-top: 26rpx;
        padding: 32rpx;
        height: 1424rpx;
        box-sizing: border-box;
        .detailUl{
          .detailLi{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 112rpx;
            .liName{
              font-size: 32rpx;
              color: rgba(51, 51, 51, 1);
              white-space: nowrap;
            }
            .liInfo{
              display: inline-block;
              text-align: right;
              max-width: 428rpx;
              color: rgba(102, 102, 102, 1);
              font-size: 32rpx;
              line-height: 38rpx;
            }
          }
        }
        .loginbtn {
          margin-top: 176rpx;
          border-radius: 8rpx !important;
          padding: 24rpx;
          background: rgba(3, 101, 249, 1);
          color: white;
          font-size: 36rpx;
        }
      }
    }
</style>