294 lines
8.2 KiB
Vue
294 lines
8.2 KiB
Vue
<template>
|
||
<view class="pages">
|
||
<u-navbar title="发票详情" :border-bottom="false" :background="bgc" title-color="#fff" back-icon-color="#fff" height="44"></u-navbar>
|
||
|
||
<view class="detail-card">
|
||
<view class="row">
|
||
<view class="label">发票编号</view>
|
||
<view class="value">{{info.no || '--'}}</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="label">发票抬头</view>
|
||
<view class="value" style="display: flex; justify-content: flex-end; align-items: center;" @click="copy(info.taxpayerName || '福鼎创特物联科技有限公司')">
|
||
<text>{{info.taxpayerName || '福鼎创特物联科技有限公司'}}</text>
|
||
<u-icon name="file-text" label=" " label-color="#2979ff" color="#2979ff" size="28" style="margin-left: 10rpx;"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="label">纳税人识别号</view>
|
||
<view class="value" style="display: flex; justify-content: flex-end; align-items: center;" @click="copy(info.taxpayerId || 'xxxxxx')">
|
||
<text>{{info.taxpayerId || 'xxxxxx'}}</text>
|
||
<u-icon name="file-text" label=" " label-color="#2979ff" color="#2979ff" size="28" style="margin-left: 10rpx;"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="label">金额</view>
|
||
<view class="value" style="color: red;font-weight: 600;">¥{{info.requiredAmount || '0.00'}}</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="label">创建时间</view>
|
||
<view class="value">{{info.createTime || '--'}}</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="label">状态</view>
|
||
<view class="value status">
|
||
<view class="status-tag" :class="{
|
||
// WAIT_AUDIT：待审核 => 橙色
|
||
'status-pending': info.status === 'WAIT_AUDIT',
|
||
// WAIT_UPLOAD：待上传 => 蓝色
|
||
'status-submitted': info.status === 'WAIT_UPLOAD',
|
||
// REJECT：已驳回 => 红色
|
||
'status-rejected': info.status === 'REJECT',
|
||
// SUCCESS：已成功 => 绿色
|
||
'status-approved': info.status === 'SUCCESS',
|
||
'status-default': ['WAIT_AUDIT','WAIT_UPLOAD','REJECT','SUCCESS'].indexOf(info.status) === -1
|
||
}">
|
||
<text v-if="info.status == 'WAIT_AUDIT'">待审核</text>
|
||
<text v-if="info.status == 'WAIT_UPLOAD'">待上传</text>
|
||
<text v-if="info.status == 'REJECT'">已驳回</text>
|
||
<text v-if="info.status == 'SUCCESS'">已审核</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="row" v-if="info.rejectReason">
|
||
<view class="label">驳回原因</view>
|
||
<view class="value reject-reason">{{info.rejectReason}}</view>
|
||
</view>
|
||
<view class="row" v-if="info.requiredRemark">
|
||
<view class="label">备注</view>
|
||
<view class="value">{{info.requiredRemark}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="" v-if="imglist" style="width: 710rpx;height: 500rpx;margin: auto;margin-top: 30rpx;border-radius: 20rpx;overflow: hidden;">
|
||
<image style="width: 710rpx;height: 400rpx;" :src="imglist" mode="aspectFill"></image>
|
||
</view>
|
||
|
||
<view style="text-align: center; margin-top: 20rpx; color: #4C97E7; font-size: 28rpx; text-decoration: underline;" @click="showTutorial = true">
|
||
查看开票教程
|
||
</view>
|
||
|
||
<view class="action-row" v-if="info.status === 'REJECT' || info.status === 'WAIT_UPLOAD'">
|
||
<view class="btn upload" @click="chooseImage">上传发票</view>
|
||
<view class="btn submit" @click="handleSubmit">{{ info.status === 'REJECT' ? '重新提交' : '提交审核' }}</view>
|
||
</view>
|
||
<view class="" v-if="info.status === 'REJECT' || info.status === 'WAIT_UPLOAD'" style="width: 100%;text-align: center;padding-left: 30rpx;color: #ccc;">
|
||
再次点击上传发票可覆盖原来上传的图片
|
||
</view>
|
||
|
||
<u-popup v-model="showTutorial" mode="center" width="600" border-radius="20">
|
||
<view style="padding: 40rpx; text-align: center;">
|
||
<view style="font-size: 32rpx; font-weight: bold; margin-bottom: 30rpx;">开票教程</view>
|
||
<view style="font-size: 28rpx; color: #666; line-height: 1.8; text-align: left;">
|
||
1. 登录电子税务局<br>
|
||
2. 选择【我要办税】-【开具发票】<br>
|
||
3. 填写购买方信息：<br>
|
||
名称：福鼎创特物联科技有限公司<br>
|
||
纳税人识别号：xxxxxx<br>
|
||
4. 确认无误后开具并下载PDF/图片<br>
|
||
5. 在本页面上传发票文件
|
||
</view>
|
||
<view style="margin-top: 40rpx;">
|
||
<u-button type="primary" size="medium" @click="showTutorial = false">我知道了</u-button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#4C97E7",
|
||
},
|
||
info: {},
|
||
id:'',
|
||
token:'',
|
||
imglist:'',
|
||
flag:true,
|
||
showTutorial: false
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.id = option.id
|
||
this.getxq()
|
||
this.getqiniuyun()
|
||
},
|
||
methods: {
|
||
// 复制
|
||
copy(text) {
|
||
uni.setClipboardData({
|
||
data: text,
|
||
success: function() {
|
||
uni.showToast({
|
||
title: '复制成功',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
getxq(){
|
||
this.$u.get(`/bst/userInvoice/${this.id}`).then(res =>{
|
||
if(res.code == 200){
|
||
this.info = res.data
|
||
this.imglist = res.data.fileUrl
|
||
}
|
||
})
|
||
},
|
||
// 获取七牛云上传token
|
||
getqiniuyun() {
|
||
this.$u.get("/common/qiniuToken").then((res) => {
|
||
if (res.code == 200) {
|
||
this.token = res.data
|
||
}
|
||
})
|
||
},
|
||
// 选择图片
|
||
chooseImage() {
|
||
let _this = this
|
||
let math = 'static/' + _this.$u.guid(20)
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
success(res) {
|
||
const tempFilePaths = res.tempFilePaths[0]
|
||
wx.uploadFile({
|
||
url: 'https://up-z2.qiniup.com',
|
||
name: 'file',
|
||
filePath: tempFilePaths,
|
||
formData: {
|
||
token: _this.token, //后端返回的token
|
||
key: 'smartmeter/img/' + math
|
||
},
|
||
success: function(res) {
|
||
console.log(res, 'resres');
|
||
let str = JSON.parse(res.data)
|
||
let tempFilePaths = 'https://api.ccttiot.com/' + str.key
|
||
_this.imglist = tempFilePaths
|
||
console.log(_this.imglist);
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
handleUpload() {
|
||
uni.showToast({
|
||
title: '模拟上传成功',
|
||
icon: 'none'
|
||
})
|
||
},
|
||
handleSubmit() {
|
||
if(this.imglist == ''){
|
||
uni.showToast({
|
||
title: '请上传电子发票',
|
||
icon: 'none',
|
||
duration:3000
|
||
})
|
||
return
|
||
}
|
||
if(this.flag == false){
|
||
uni.showToast({
|
||
title: '请勿频繁点击',
|
||
icon: 'none',
|
||
duration:3000
|
||
})
|
||
return
|
||
}
|
||
this.flag = false
|
||
let data = {
|
||
id:this.id,
|
||
fileUrl:this.imglist
|
||
}
|
||
this.$u.post("/bst/userInvoice/upload",data).then((res) => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '提交审核成功',
|
||
icon: 'success',
|
||
duration:3000
|
||
})
|
||
setTimeout(()=>{
|
||
this.flag = true
|
||
uni.navigateBack()
|
||
},1000)
|
||
}else{
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration:3000
|
||
})
|
||
this.flag = true
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #f7f7f7;
|
||
}
|
||
.pages {
|
||
min-height: 100vh;
|
||
background-color: #f7f7f7;
|
||
}
|
||
.detail-card {
|
||
width: 710rpx;
|
||
margin: 20rpx auto;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||
.row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16rpx 0;
|
||
.label {
|
||
width: 180rpx;
|
||
color: #888;
|
||
font-size: 28rpx;
|
||
}
|
||
.value {
|
||
flex: 1;
|
||
text-align: right;
|
||
color: #222;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
&.reject-reason { color: #ff4d4f; font-weight: 600; }
|
||
}
|
||
}
|
||
}
|
||
.status-tag {
|
||
padding: 8rpx 20rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 26rpx;
|
||
font-weight: 700;
|
||
display: inline-block;
|
||
&.status-pending { background: #fff7e6; color: #fa8c16; }
|
||
&.status-submitted { background: #e6f7ff; color: #1890ff; }
|
||
&.status-rejected { background: #fff1f0; color: #ff4d4f; }
|
||
&.status-approved { background: #f6ffed; color: #52c41a; }
|
||
&.status-default { background: #f5f5f5; color: #666; }
|
||
}
|
||
.action-row {
|
||
width: 710rpx;
|
||
margin: 20rpx auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 20rpx;
|
||
.btn {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 22rpx 0;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
&.upload { background: #1890ff; }
|
||
&.submit { background: #52c41a; }
|
||
}
|
||
}
|
||
</style> |