Client-Teapay/src/pagesB/invoice/Billingresult.vue

<template>
  <div class='Billing-result'>
    <div class="head-box">
        <div class="state">{{typeStatus(obj.status)}}</div>
        <div class="state-time">{{obj.kprq}}</div>
    </div>
    <div class="content-i">
        <div class="info-box">
            <div class="tit">增值税电子普通发票</div>
            <img src="@/static/img/invoice.png" class="invoice_ico" alt="">
            <div class="info-item flex_r flex_jb">
                <div class="label">发票抬头</div>
                <div class="input">{{obj.gmf_mc}}</div>
            </div>
            <div class="info-item flex_r flex_jb">
                <div class="label">税号</div>
                <div class="input">{{obj.gmf_nsrsbh}}</div>
            </div>
            <div class="info-item flex_r flex_jb">
                <div class="label">价税合计</div>
                <div class="input">{{obj.money}}</div>
            </div>
            <div class="info-item flex_r flex_jb">
                <div class="label">电子邮箱</div>
                <div class="input">{{obj.email}}</div>
            </div>
            <div class="info-item flex_r flex_jb">
                <div class="label">手机号码</div>
                <div class="input">{{obj.mobile}}</div>
            </div>
        </div>
        <div class="check-btn" v-if="obj.status == 1" @click="downloadFun">预览发票</div>
    </div>
  </div>
</template>
<script>
import { get, post } from '@/request/api.js';
let app=getApp();
var appEv = app.$vm.$options;
export default {
  name: 'Billing-result',
  data () {
    return {
        id:undefined,
        obj:undefined
    }
  },
  onLoad (option) {
    this.id = option.id;
    this.getDetail()
  },
  onLaunch () {},
  onShow () {},
  onHide () {},
  methods: {
    getDetail(){
        let data = {
            fpqqlsh:this.id
        }
        post('invoice/getInfo',data).then(res => {
            this.obj = res.data
        })
    },
    downloadFun(){
        uni.downloadFile({
        url:this.obj.pdf_url,
        success: res => {
          console.log(res)
          if (res.statusCode === 200) {
            // 预览pdf文件
            uni.openDocument({
              filePath: res.tempFilePath,
              showMenu: true, // 右上角菜单，可以进行分享保存pdf
              success: function(file) {
                console.log("file-success", file)
              }
            })
          }
        }
      })
    }
  },
  computed: {
    typeStatus(){
      return (da) => {
        let str;
        if (da === 1) str = "已开票";
        if (da === 2) str = "开票失败";
        if (da === 4) str = "红冲发票";
        if (da === 5) str = "开票中";
        if (da === 6) str = "发票作废";
        return str;
      };
    }
  },
  watch: {}
}
</script>
<style scoped lang='scss'>
page {
	background-color: #F6F6F6;
}
.Billing-result{

    .head-box{
        height: 230rpx;
        background: linear-gradient(90deg, #0ee6a2 0%, #18bb88 100%);
        padding-top: 70rpx;
        position: relative;
        .state{
            text-align: center;
            // color: rgba($color: #000000, $alpha: 0.5);
            color: #fff;
            font-weight: bold;
        }
        .state-time{
            text-align: center;
            // color: rgba($color: #000000, $alpha: 0.5);
            color: #fff;
            margin-top: 10rpx;
            // font-weight: bold;
        }
        // &::before{
        //     content: '';
        //     width: calc(100% - 72rpx);
        //     height: 40rpx;
        //     background: #fff;
        //     position: absolute;
        //     left: 36rpx;
        //     bottom: 0;
        //     border-radius: 12rpx 12rpx 0 0;
        // }
    }
    .content-i{
        padding: 0 36rpx;
        position: relative;
    }
    .info-box{
        padding: 60rpx 36rpx 40rpx;
        background: #fff;
        border-radius: 12rpx;
        box-shadow: 0 6rpx 16rpx 0 rgba(0,0,0,0.2);
        width: calc(100% - 72rpx);
        position: absolute;
        top: -40rpx;
        left: 36rpx;
        .tit{
            color: #f00;
            font-size: 30rpx;
            text-align: center;
            margin-bottom: 60rpx;
        }
        .invoice_ico{
            width: 186rpx;
            height: 110rpx;
            position: absolute;
            top: 14px;
            left: calc(50% - 93rpx);
        }
        .info-item{
            margin-bottom: 26rpx;
            font-size: 30rpx;
            &:last-child{
                margin-bottom: 0;
            }
            .label{
                width: 140rpx;
                color: #333;
                text-align: justify;
                text-align-last: justify;
            }
            .input{
                width: calc(100% - 140rpx);
                text-align: right;
                color: #666;
            }
        }
    }
    .check-btn{
        position: absolute;
        top: 700rpx;
        left: 36rpx;
        width: calc(100% - 72rpx);
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 40rpx;
        text-align: center;
        background: #18bb88;
        color: #fff;
    }
}
</style>