185 lines
4.1 KiB
Vue
185 lines
4.1 KiB
Vue
<template>
|
||
<view class="whole" v-if="!isLoading">
|
||
<view class="contBox">
|
||
<view class="oneBox">
|
||
<template v-if="info.status === 0">
|
||
<view class="title">
|
||
<up-icon name="clock" size="20" color="#888" />
|
||
<text>申请中</text>
|
||
</view>
|
||
<view class="desc">商家正在处理，如有问题请咨询管家</view>
|
||
</template>
|
||
|
||
<view class="title" v-if="info.status == 1">
|
||
<up-icon name="checkmark-circle-fill" size="24" color="#04BE02" />
|
||
<text>申请成功</text>
|
||
</view>
|
||
</view>
|
||
<view class="box">
|
||
<view class="row">
|
||
<view class="tit">开票金额</view>
|
||
<view class="text">￥{{info.invoice_amount}}</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="tit">发票类型</view>
|
||
<view class="text">增值税电子发票</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="tit">抬头类型</view>
|
||
<view class="text">{{ info.body_type == 2 ? '企业' : '个人或事业单位'}}</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="tit">发票内容</view>
|
||
<view class="text">明细</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="tit">发票抬头</view>
|
||
<view class="text">{{info.body}}</view>
|
||
</view>
|
||
<view class="row" v-if="info.body_type == 2">
|
||
<view class="tit">税号</view>
|
||
<view class="text">{{info.tax_number}}</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="tit">申请时间</view>
|
||
<view class="text">{{info.created_at}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="btnBox">
|
||
<view class="btn" @click="showService = true">联系管家</view>
|
||
<view class="btn" @click="handleDownload()" v-if="info.status == 1">下载发票</view>
|
||
</view>
|
||
|
||
<!-- 客服 -->
|
||
<call-center :show="showService" @close="showService = false" :type="1" />
|
||
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { ref, reactive, toRefs } from 'vue'
|
||
import { get, post } from '@/api/request.js'
|
||
import { showToast } from '@/components/common.js'
|
||
import callCenter from '@/components/callCenter/index.vue'
|
||
|
||
export default {
|
||
components: { callCenter },
|
||
setup() {
|
||
const data = reactive({
|
||
id: 0,
|
||
info: {},
|
||
isLoading: true,
|
||
showService: false
|
||
})
|
||
|
||
async function getInfo() {
|
||
await get(`/api/v1/orderInvoice/${data.id}`).then((res) => {
|
||
data.info = res.data
|
||
data.isLoading = false
|
||
}).catch(() => {
|
||
data.isLoading = false
|
||
})
|
||
}
|
||
|
||
function handleDownload() {
|
||
uni.downloadFile({
|
||
url: data.info.invoice_url,
|
||
fileName: data.info.body,
|
||
success: res => {
|
||
console.log(res)
|
||
uni.openDocument({
|
||
filePath: res.tempFilePath,
|
||
showMenu: true,
|
||
success: function (ress) {}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
return {
|
||
...toRefs(data),
|
||
getInfo,
|
||
handleDownload
|
||
}
|
||
},
|
||
async onLoad(options) {
|
||
this.id = options.id
|
||
// await this.$onLaunched
|
||
await this.getInfo()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.whole{
|
||
width: 100%;
|
||
height: 100vh;
|
||
.contBox{
|
||
padding: 24rpx;
|
||
box-sizing: border-box;
|
||
height: 100%;
|
||
background-color: #f5f5f5;
|
||
font-size: 28rpx;
|
||
.oneBox{
|
||
border-radius: 10rpx;
|
||
background-color: #fff;
|
||
padding: 30rpx 24rpx;
|
||
color: #333;
|
||
.title{
|
||
color: #000;
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
text{
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
.desc{
|
||
margin-top: 16rpx;
|
||
}
|
||
}
|
||
.box{
|
||
border-radius: 10rpx;
|
||
background-color: #fff;
|
||
margin-top: 24rpx;
|
||
padding: 16rpx 0;
|
||
}
|
||
.row{
|
||
padding: 16rpx 24rpx;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.tit{
|
||
color: #000;
|
||
}
|
||
}
|
||
}
|
||
.btnBox{
|
||
width: 100%;
|
||
padding: 24rpx;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
background-color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
.btn{
|
||
padding: 6rpx 20rpx;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
border-radius: 8rpx;
|
||
border: 1px solid #999;
|
||
margin-left: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|