shengqingqixie-wechat/pages/packageA/user/my_invoice.vue

<template>
	<view style="background: #F1F2F8;min-height: 100vh;" v-cloak>
		<tn-nav-bar :isBack="false" backTitle="" :bottomShadow="true" backgroundColor="#FFFFFF">
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
				<view style="padding-left: 15rpx;" @click="goBack()">
					<text class="tn-icon-left" style="font-size: 40rpx;"></text>
				</view>
				<view style="width: 83%;font-weight: bold;">
					<text>发票开取</text>
				</view>
			</view>
		</tn-nav-bar>
		<view class="tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<view v-if="allList.length==0" style="text-align: center;padding-top: 200rpx;">
				<image class="no-img" src="/static/_6@2x.png" style="width: 250rpx;" mode="widthFix"></image>
				<view style="font-size: 34rpx;font-weight: bold;margin-top: 40rpx;">暂无发票数据</view>
				<view style="font-size: 28rpx;color: #BABDC7;margin-top: 20rpx;">未查找到您的发票信息，赶快去申请～</view>
				<view style="margin-top: 80rpx;">
					<tn-button @click="addMod = true" width="450rpx" height="85rpx" backgroundColor="#3056D3"
						shape="round" fontColor="#ffffff">去申请发票</tn-button>
				</view>
			</view>
			<view style="padding: 30rpx;">
				<view v-for="item in allList"
					style="margin-bottom: 30rpx;background-color: #FFF;border-radius: 20rpx;padding: 30rpx;">
					<view class="tn-flex tn-flex-center tn-flex-col-center tn-flex-row-between">
						<view style="font-size: 32rpx;font-weight: bold;">{{item.unit}}</view>
						<view v-if="item.if_ssue==3" style="color: #FF9847;">
							<text>待审核</text>
							<text class="tn-icon-right"></text>
						</view>
						<view v-if="item.if_ssue==2" style="color: #E83A30;">
							<text>被拒绝</text>
							<text class="tn-icon-right"></text>
						</view>
						<view v-if="item.if_ssue==1" style="color: #28B93D;">
							<text>已开具</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
					<view class="view_text" style="color: #666666;">
						<view>
							<text>{{item.name}} / {{item.createtime}}</text>
						</view>
						<view>
							<text>发票金额：</text>
							<text>¥{{item.money}}</text>
						</view>
					</view>
					<view style="height: 1rpx;border-top: #BABDC7 1rpx dashed;margin: 30rpx 0rpx;"></view>
					<view style="text-align: right;">
						<tn-button @click="openInfoMod(item)" height="70rpx" width="200rpx" fontColor="#999999"
							shape="round" backgroundColor="#999999" :plain="true">查看</tn-button>
					</view>
				</view>
				<view @click="addMod = true"
					style="position: fixed;bottom: 10%;right: 0;box-shadow: 0rpx 4rpx 25rpx 0rpx rgba(48,86,211,0.25);text-align: center;color: #FFF;;background-color: #3056D3;border-radius: 80rpx 0 0rpx 80rpx;width: 180rpx;;height: 70rpx;line-height: 70rpx;">
					申请发票
				</view>
			</view>
			<!-- <view style="padding:40rpx;">
				<view class="tn-flex tn-flex-center tn-flex-row-between ">
					<view>
						已有发票 {{count}} 张
					</view>
					<view>
						<tn-button @click="addMod = true" backgroundColor="#3D7EFF" size="sm"
							fontColor="#ffffff">发票申请</tn-button>
					</view>
				</view>
			</view>
			<view style="padding:0rpx 40rpx;" v-for="item in allList">
				<view @click="openInfo(item)"
					class="tn-flex tn-flex-center tn-flex-row-between tn-flex-col-center bg-flex-shadow tn-shadow-blur">
					<view>
						<view style="font-size: 34rpx;font-weight: 600;">
							<text>发票金额：</text>
							<text class="tn-icon-money-fill" style="color: #28B93D;"></text>
							<text style="color: #28B93D;">{{item.money}}</text>
						</view>
						<view style="margin-top: 10rpx;font-size: 28rpx;color: #999999;">
							<text>{{item.createtime}}</text>
						</view>
					</view>
					<view>
						<tn-tag v-if="item.if_ssue==1" backgroundColor="#31E749" fontColor="#ffffff"
							shape="radius">已通过</tn-tag>
						<tn-tag v-if="item.if_ssue==2" backgroundColor="#E83A30" fontColor="#ffffff"
							shape="radius">被拒绝</tn-tag>
						<tn-tag v-if="item.if_ssue==3" backgroundColor="#FF7043" fontColor="#ffffff"
							shape="radius">审核中</tn-tag>
						<text class="tn-icon-right-triangle" style="margin-left: 10rpx;"></text>
					</view>
				</view>
				<view style="width: 100%;height: 1px;background-color: #F8F7F8;margin: 40rpx 0rpx;"></view>
			</view> -->
		</view>
		<tn-popup v-model="addMod" mode="right" :safeAreaInsetBottom="true" width="100%">
			<tn-nav-bar :isBack="false" backTitle="" :bottomShadow="true" backgroundColor="#FFFFFF">
				<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
					<view style="padding-left: 15rpx;" @click="addMod = false">
						<text class="tn-icon-left" style="font-size: 40rpx;"></text>
					</view>
					<view style="width: 83%;font-weight: bold;">
						<text>申请发票</text>
					</view>
				</view>
			</tn-nav-bar>
			<view :style="{paddingTop: vuex_custom_bar_height+'px'}"
				style="background-color: #F1F2F8;min-height: 100vh;">
				<view class="text" style="padding:30rpx;">
					<view style="background-color: #FFF;border-radius: 20rpx;padding:10rpx 30rpx;">
						<tn-form ref="form" :labelWidth="150">
							<tn-form-item label="申请人" prop="name">
								<tn-input placeholder="申请人" inputAlign="right" :clearable="false"
									:customStyle="{width: '470rpx'}" v-model="addForm.name" />
							</tn-form-item>
							<tn-form-item label="公司名称" prop="unit">
								<tn-input placeholder="公司名称" inputAlign="right" :clearable="false"
									:customStyle="{width: '470rpx'}" v-model="addForm.unit" />
							</tn-form-item>
							<tn-form-item label="纳税人识别号" :labelWidth="200" prop="taxpayer_identification_number">
								<tn-input placeholder="纳税人识别号" inputAlign="right" :clearable="false"
									:customStyle="{width: '420rpx'}" v-model="addForm.taxpayer_identification_number" />
							</tn-form-item>
							<tn-form-item label="单位地址" prop="unit_address">
								<tn-input placeholder="单位地址" inputAlign="right" :clearable="false"
									:customStyle="{width: '470rpx'}" v-model="addForm.unit_address" />
							</tn-form-item>
							<tn-form-item label="单位电话" prop="telephone">
								<tn-input placeholder="单位电话" inputAlign="right" :clearable="false"
									:customStyle="{width: '470rpx'}" v-model="addForm.telephone" />
							</tn-form-item>
							<tn-form-item label="银行基本户账号" :labelWidth="220" prop="bank_basic_account_number">
								<tn-input placeholder="银行基本户账号" :clearable="false" inputAlign="right"
									:customStyle="{width: '410rpx'}" v-model="addForm.bank_basic_account_number" />
							</tn-form-item>
							<tn-form-item label="开户行" prop="bank">
								<tn-input placeholder="开户行" :clearable="false" inputAlign="right"
									:customStyle="{width: '470rpx'}" v-model="addForm.bank" />
							</tn-form-item>
							<tn-form-item label="发票金额" prop="bank" :borderBottom="true">
								<tn-input placeholder="发票金额" inputAlign="right" :clearable="false"
									:customStyle="{width: '470rpx'}" v-model="addForm.money" />
							</tn-form-item>
							<tn-form-item label="支付凭证" prop="bank" :borderBottom="false">
								<view class="tn-flex tn-flex-center tn-flex-col-center tn-flex-row-right">
									<view style="text-align: center;">
										<image v-if="addForm.voucher!=''" :src="apiImgUrl+addForm.voucher"
											style="width: 200rpx;height: 200rpx"></image>
									</view>
									<view style="margin-left: 20rpx;">
										<tn-button @click="upload_img" backgroundColor="#3056D3" fontColor="#ffffff"
											size="sm">上传凭证</tn-button>
									</view>
								</view>
							</tn-form-item>
						</tn-form>
					</view>
				</view>
				<view
					style="position: fixed;bottom:0px;width: 100%;background-color: #FFFFFF;box-shadow: 0rpx -2rpx 4rpx 0rpx rgba(186,189,199,0.2);padding:30rpx 30rpx 40rpx 30rpx;">
					<view @click="kp_add_do"
						style="margin: 0 auto;line-height: 80rpx;height: 80rpx;font-size: 32rpx;font-weight: bold;text-align: center;width: 80%;color: #ffffff;;background: #3056D3;border: 1rpx solid #3056D3;border-radius:90rpx;">
						<text>申请发票</text>
					</view>
				</view>
			</view>
		</tn-popup>
		<tn-popup v-model="infoMod" mode="right" :safeAreaInsetBottom="true" width="100%">
			<tn-nav-bar :isBack="false" backTitle="" :bottomShadow="true" backgroundColor="#FFFFFF">
				<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
					<view style="padding-left: 15rpx;" @click="infoMod = false">
						<text class="tn-icon-left" style="font-size: 40rpx;"></text>
					</view>
					<view style="width: 83%;font-weight: bold;">
						<text>开票信息</text>
					</view>
				</view>
			</tn-nav-bar>
			<view :style="{paddingTop: vuex_custom_bar_height+'px'}"
				style="background-color: #F1F2F8;min-height: 100vh;">
				<view style="padding: 30rpx;">
					<view style="background-color: #FFF;border-radius: 20rpx;padding: 30rpx;">
						<view class="tn-flex tn-flex-center tn-flex-col-center tn-flex-row-between">
							<view style="font-size: 32rpx;font-weight: bold;">{{info.unit}}</view>
							<view v-if="info.if_ssue==3" style="color: #FF9847;">
								<text>待审核</text>
							</view>
							<view v-if="info.if_ssue==2" style="color: #E83A30;">
								<text>被拒绝</text>
							</view>
							<view v-if="info.if_ssue==1" style="color: #28B93D;">
								<text>已开具</text>
							</view>
						</view>
						<view class="view_text" style="font-size: 28rpx;color: #666666;margin-top: 30rpx;">
							<view>
								<text>申请人：</text>
								<text>{{info.name}}</text>
							</view>
							<view>
								<text>申请时间：</text>
								<text>{{info.createtime}}</text>
							</view>
							<view>
								<text>单位电话：</text>
								<text>{{info.telephone}}</text>
							</view>
							<view>
								<text>单位地址：</text>
								<text>{{info.unit_address}}</text>
							</view>
							<view>
								<text>银行基本户账号：</text>
								<text>{{info.bank_basic_account_number}}</text>
							</view>
							<view>
								<text>纳税人识别号：</text>
								<text>{{info.taxpayer_identification_number}}</text>
							</view>
							<view>
								<text>开户行：</text>
								<text>{{info.bank}}</text>
							</view>
							<view>
								<text>发票金额：</text>
								<text>¥{{info.money}}</text>
							</view>
							<view>
								<text>支付凭证：</text>
								<image @click="openImgT" :src="apiImgUrl+info.voucher"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="info.if_ssue==1"
				style="position: fixed;bottom:0px;width: 100%;background-color: #FFFFFF;box-shadow: 0rpx -2rpx 4rpx 0rpx rgba(186,189,199,0.2);padding:30rpx 30rpx 40rpx 30rpx;">
				<view @click="openImg"
					style="margin: 0 auto;line-height: 80rpx;height: 80rpx;font-size: 32rpx;font-weight: bold;text-align: center;width: 80%;color: #ffffff;;background: #3056D3;border: 1rpx solid #3056D3;border-radius:90rpx;">
					<text>下载发票</text>
				</view>
			</view>
		</tn-popup>

	</view>
</template>

<script>
	import {
		findMemberID,
		addInvoiceHeader,
		addInvoiceLog,
		someMethod,
		getInvoiceLogWithHeader
	} from "@/util/api";
	import store from "@/store";
	export default {
		data() {
			return {
				apiImgUrl: this.$store.state.imgUrl,
				apiUpUrl: this.$store.state.apiUrl,
				addMod: false,
				infoMod: false,
				tt_add_show_add: false,
				addForm: {
					name: '',
					taxpayer_identification_number: '',
					unit: '',
					unit_address: '',
					telephone: '',
					bank_basic_account_number: '',
					bank: '',
					association_id: 1,
					money: '',
					voucher: '',
				},
				invoice_type_show: false,
				actionSheetList: [{
						text: '普票',
						id: 1,
					},
					{
						text: '专票',
						id: 2
					}
				],
				header_id: -1,
				header_id_name: '',
				invoice_type_name: '普票',
				invoice_type: 1,
				tt_add_show: false,
				tt_show: false,
				tt_list: [],
				page: 1,
				allList: [],
				info: {},
				count: 0

			}
		},
		onLoad() {
			var gid = uni.getStorageSync('Gid');
			this.addForm.association_id = gid;
			this.findMemberList();
			this.getList();
		},
		onReachBottom() {
			this.page += 1;
			this.getList();
		},
		methods: {
			openInfoMod(item) {
				this.info = item;
				this.infoMod = true;
			},
			radioGroupChange(d) {
				const item = this.tt_list.find(item => item.id == d);
				console.log(item);
				this.header_id_name = item;
			},
			openImg() {
				uni.previewImage({
					current: 0,
					urls: [this.apiImgUrl + this.info.invoice_image],
				});
			},
			openImgT() {
				uni.previewImage({
					current: 0,
					urls: [this.apiImgUrl + this.info.voucher],
				});
			},
			openInfo(d) {
				getInvoiceLogWithHeader({
						id: d.id
					})
					.then(res => {
						console.log(res);
						this.info = res.data;
						this.infoMod = true;
					})
					.catch(error => {
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
					})
			},
			actionSheetCallback(index) {
				this.invoice_type_name = this.actionSheetList[index].text;
				this.invoice_type = this.actionSheetList[index].id;
			},
			tt_show_do() {
				this.tt_add_show = true;
				// if (this.tt_list.length == 0) {
				// 	uni.showToast({
				// 		title: '请先添加开票信息',
				// 		icon: 'none',
				// 		duration: 2000
				// 	});
				// 	this.tt_add_show = true;
				// } else {
				// 	this.tt_show = true;
				// }

			},
			kp_add_do() {
				if (this.money == '' || this.money <= 0) {
					uni.showToast({
						title: '请填写金额',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				addInvoiceLog(this.addForm)
					.then(res => {
						console.log(res);
						if (res.code == 1) {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
							this.addMod = false;
							this.allList = [];
							this.page = 1;
							this.getList();
						} else {
							uni.showModal({
								title: '提示',
								content: res.msg,
							})
						}
					})
					.catch(error => {
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
					})
			},
			tt_confirm(d) {
				console.log(d);
				this.header_id_name = d[0].label;
				this.header_id = d[0].value;
			},
			tt_add_do() {
				addInvoiceHeader(this.addForm)
					.then(res => {
						console.log(res);
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						this.tt_add_show = false;
						this.findMemberList();
					})
					.catch(error => {
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
					})
			},
			findMemberList() {
				findMemberID()
					.then(res => {
						console.log(res);
						if (res.data == null) {
							this.tt_list = [];
						} else {
							// var key = res.data;
							// const transformedSelectList = key.map(item => ({
							// 	value: item.id,
							// 	label: item.unit
							// }));
							this.tt_list = res.data;
						}
					})
					.catch(error => {
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
					})
			},
			getList() {
				someMethod({
						page: this.page,
						size: 10
					})
					.then(res => {
						console.log(res);
						this.allList.push(...res.data.data);
						this.count = res.data.count;
					})
					.catch(error => {
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
					})
			},
			upload_img() {
				var user_info = uni.getStorageSync('userInfo');
				var that = this;
				uni.chooseMedia({
					count: 1, //默认9
					mediaType: ['image'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(res);
						var url = res.tempFiles[0].tempFilePath;
						uni.uploadFile({
							url: that.apiUpUrl + '/common/upload', //仅为示例，非真实的接口地址
							filePath: url,
							name: 'file',
							formData: {
								association_id: 1,
							},
							success: (uploadFileRes) => {
								var data = JSON.parse(uploadFileRes.data);
								console.log(data);
								that.addForm.voucher = data.data.url;
							}
						});
					}
				});
			},
			goBack() {
				if (getCurrentPages().length > 1) {
					uni.navigateBack()
				} else {
					uni.redirectTo({
						url: '/pages/index/index'
					})

				}
			},
		}
	}
</script>

<style scoped>
	.info_text view {
		margin-bottom: 40rpx;
	}

	.view_text view {
		margin-top: 20rpx;
	}
</style>