|
@@ -1,53 +1,111 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
<u-navbar title="查看票据"></u-navbar>
|
|
|
- <view class="bill" v-for="item in 2">
|
|
|
- <view class="img">
|
|
|
- <img src="../../../assets/img/bill.png" alt="">
|
|
|
-
|
|
|
- </view>
|
|
|
+ <view class="bill">
|
|
|
+ <view class="img">
|
|
|
+ <img :src="billInfo.invoiceUrl" alt="">
|
|
|
+ </view>
|
|
|
<view class="options">
|
|
|
<view class="key">
|
|
|
- 票据1
|
|
|
+ {{billInfo.invoiceTitle}}
|
|
|
</view>
|
|
|
<view class="btn">
|
|
|
- <button class="download">下载票据</button>
|
|
|
- <button class="print">打印票据</button>
|
|
|
+ <button class="download" @click="downloadBill">下载票据</button>
|
|
|
+ <button class="print" @click="toPrintBill">打印票据</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import * as courseApi from '@/apis/parents/course.js'
|
|
|
+
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ buyId: '',
|
|
|
+ billInfo: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(op) {
|
|
|
+ if (op.id) {
|
|
|
+ this.buyId = op.id;
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
+ downloadBill() {
|
|
|
+ const downloadTask = uni.downloadFile({
|
|
|
+ url: this.billInfo.invoiceUrl, //仅为示例,并非真实的资源
|
|
|
+ success: (res) => {
|
|
|
+ if (res.statusCode === 200) {
|
|
|
+ console.log('下载成功');
|
|
|
+ }
|
|
|
+ let that = this;
|
|
|
+ uni.saveFile({
|
|
|
+ tempFilePath: res.tempFilePath,
|
|
|
+ success: function(red) {
|
|
|
+ uni.openDocument({
|
|
|
+ filePath: red.savedFilePath,
|
|
|
+ success: (sus) => {
|
|
|
+ console.log('成功打开')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(red)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ downloadTask.onProgressUpdate((res) => {
|
|
|
+ console.log('下载进度' + res.progress);
|
|
|
+ console.log('已经下载的数据长度' + res.totalBytesWritten);
|
|
|
+ console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getBillInfo() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ courseApi.getBuyInvoiceInfo({
|
|
|
+ buyId: this.buyId
|
|
|
+ }).then((res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.billInfo = res.data;
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toPrintBill() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/parents/course/printBill?id=' + this.billInfo.buyId
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .bill{
|
|
|
+ .bill {
|
|
|
margin: 24rpx 32rpx;
|
|
|
border-radius: 4px;
|
|
|
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15);
|
|
|
- .img{
|
|
|
+
|
|
|
+ .img {
|
|
|
width: 100%;
|
|
|
height: 398rpx;
|
|
|
-
|
|
|
- img{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
- .options{
|
|
|
+
|
|
|
+ .options {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
@@ -55,35 +113,39 @@
|
|
|
background-color: #000000;
|
|
|
opacity: 0.4;
|
|
|
padding: 24rpx;
|
|
|
- .key{
|
|
|
+
|
|
|
+ .key {
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
font-size: 16px;
|
|
|
-
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ uni-button {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .download {
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .print {
|
|
|
+ background-color: #0DBAC7;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
- .btn{
|
|
|
- display: flex;
|
|
|
- uni-button{
|
|
|
- width: 160rpx;
|
|
|
- height: 64rpx;
|
|
|
- line-height: 64rpx;
|
|
|
- text-align: center;
|
|
|
- border-radius: 4px;
|
|
|
- font-size: 28rpx;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
- .download{
|
|
|
- background-color: rgba(255, 255, 255, 1);
|
|
|
- color:#333333;
|
|
|
- }
|
|
|
- .print{
|
|
|
- background-color:#0DBAC7;
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- margin-left: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
}
|
|
|
-
|
|
|
- }
|
|
|
|
|
|
+ }
|
|
|
</style>
|