chuangte_bike_newxcx/page_shanghu/guanli/invoice_detail.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>