index.vue

<template>
<!-- uooya对账单定制 -->
  <div class="statementAccount">
    <div v-if="list && list.length>0">
      <div class="stateList"   v-for="(item,index) in list" :key="index">
        <div class="dateHeader">
          <p>{{item.year}}</p>
        </div>
        <div class="monthList flex flex-cen flex-btw van-hairline--bottom" v-for="(monthItem,index1) in item.month" :key="index1">
          <div class="state">{{monthItem}}月账单</div>
          <van-button @click="downloadPdf(item.year + monthItem)">下载</van-button>
        </div>
      </div>
    </div>
    <div v-else style="margin:20px auto;font-size:14px;text-align:center">暂无数据</div>
  </div>
</template>

<script>
import dzd from "../../api/wy";
import live from "@/api/live"
import Hashids from 'hashids'
const hashids = new Hashids()
export default {
    data() {
        return {
          loading: false,
          finished: false,
          list:[],
          accountId:'',
          isLoading:false,
          userId:'',
          baseUrl: process.env.BASE_URL,
        };
    },
    onLoad(options){
      console.log(options,'xiazai')
      live.getUserInfo().then(res => {
        if (res.data.code == 200) {
          this.userId = res.data.data ? res.data.data.userId : ''
        }
      })
    },
    onShow() {
    },
    onReady(){
      this.list = []
      this.getList();
    },
    methods: {
      filterDateFun(arr){
        var yeras = []
        arr.forEach((item) =>{
          yeras.push(item.slice(0,4))
        })
        var currentArr = Array.from(new Set(yeras))
        currentArr.forEach((ele) =>{
          this.list.push({
            year:ele,
            month:[]
          })
        })
        for (let i = 0; i < arr.length; i++) {
          for (let j = 0; j < this.list.length; j++) {
            if(this.list[j].year == arr[i].slice(0,4)){
              this.list[j].month.push(arr[i].slice(4,6))
            }
          }
        }
        // 排序降序
        this.list.sort(function(a,b){
          return b.year < a.year ? -1 : 1
        })
        console.log(this.list,'mkmk')
      },
      getList(){
         dzd
            .getDzdMonthList().then(res=>{
              console.log(res.data,'对账单列表')
              if(res.data.code == 200&&res.data.data){
                this.filterDateFun(res.data.data)
              }
            })
      },
      download(id){
        console.log(window.location.protocol,'90',window.location.host,process.env.env_config,'kl')
        let url = window.location.protocol +"//" +window.location.host +`/customdev/wy`+`/${hashids.encode(id)+`?mixid=${this.$route.query.mixid}`}`
        window.location.href = url
      },
      downloadPdf(id){
        wx.showLoading({  // 显示加载中loading效果
          title: "下载中",
          mask: true  //开启蒙版遮罩
        });
        let Temurl = this.baseUrl + '/customdev'+`/${hashids.encode(id)}` + `/${hashids.encode(this.userId)}` +`?mixid=${this.$store.state.mixid}`
        console.log(Temurl,'mkurl')
        let pdfurl = this.baseUrl+`/innerApi/utilsService/genPdf?url=${Temurl}`
        console.log(pdfurl,'mkurl')
        let _this = this;
        let down = wx.downloadFile({
            url : pdfurl,
            success : (data) => {
              console.log('下载成功',data)
              console.log(data.tempFilePath)
              if(data.statusCode == 200){
                wx.saveFile({
                  tempFilePath: data.tempFilePath,
                  filePath: wx.env.USER_DATA_PATH + '/' + '报告详情.pdf',
                  success(res) {
                    wx.openDocument({
                        filePath: res.savedFilePath,
                        showMenu:true,
                        fileType : 'pdf',
                        success: function (res) {
                          wx.showToast({
                            title: '打开文档成功',
                          })
                          wx.hideLoading();
                          // _this.isLoading = false;
                          console.log('打开文档成功',res)
                        },
                        fail: (err) =>{
                          wx.showToast({
                            title: '打开文档失败',
                          })
                          wx.hideLoading();
                          console.log('打开文档失败',err)
                          // _this.isLoading = false;
                        }
                    })
                  },
                  fail : (err) => {
                    console.log('下载失败',err)
                    // _this.isLoading = false;
                    wx.hideLoading();
                    wx.showToast({
                      title: '打开文档失败',
                    })
                  }

                })
              }
            },
        })
        down.onProgressUpdate((res) => {
          console.log(res,'res')
          if(res.progress == 100){
              console.log('下载成功')
              wx.hideLoading();
          }
        })
      },
    }
};
</script>

<style scoped lang="scss">
.statementAccount{
  .stateList{
    width:100%;
    .dateHeader{
      width:100%;
      height: 40px;
      line-height: 40px;
      font-size: 13px;
      background: #F5F5F5;
      padding:0 15px;
    }
    .monthList{
      padding:12px;
      display: flex;
      justify-content: space-between;
      align-content: center;
      .state{
        color:#000;
        font-size: 16px;
        font-weight: 500;
      }
    }
  }
}
</style>