OfficeApp/subpkg/topUpDeposit/topUpDeposit.vue

<template>
	<view class="">
		<view class="info">
			<view class="bg"></view>
			<view class="card">
				<view class="title">充值信息</view>
				<view class="item">
					<text>充值账户</text>
					<text>{{$store.state.app.userInfo.company.company_name||''}}</text>
				</view>
				<u-line style="margin: 20rpx 0;"></u-line>
				<view class="item">
					<text>收款公司</text>
					<text>{{partyA.company_name}}</text>
				</view>
				<view class="item" @click="copyPhone(partyA.qualification.corporate_account, '对公账号')">
					<text>对公账号</text>
					<text>{{partyA.qualification.corporate_account||'暂无信息'}}</text>
				</view>
			</view>
		</view>
		<view class="deposit-list" style="padding-top: 20px;">
			<view class="card" v-for="(item, index) in list">
				<view class="item">
					<view>创建时间:</view>
					<view class="text" style="color: black;">{{item.create_time}}</view>
				</view>
				<view class="item">
					<view>充值金额:</view>
					<view class="text " style="color: red;">{{item.deposit}}</view>元
				</view>
				<view class="item" @click="previewVoucher(item.voucher)">
					<view>充值凭证:</view>
					<view class="text blue">查看凭证</view>
				</view>
			</view>
		</view>
		<u-empty v-if="list.length==0&&loadConfig.status=='nomore'" icon="/static/img/empty/data.png"
			text="没有数据"></u-empty>
		<u-loadmore v-else :status="loadConfig.status" :loading-text="loadConfig.loadingText"
			:loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" />
	</view>
</template>

<script>
	import {
		Toast
	} from '@/libs/uniApi.js'
	import {
		getPartyACompany,
		getDepositRechargeTransferVoucherList
	} from "@/api/company.js"
	export default {
		data() {
			return {
				partyA: {
					id: "",
					company_name: "",
					qualification: {
						corporate_account: ""
					}
				},
				list: [],
				loadConfig: {
					page: 1,
					limit: 15,
					lastpage: '',
					loadingText: '努力加载中',
					loadmoreText: '轻轻上拉',
					nomoreText: '我也是有底线的~~',
					status: 'loadmore'
				},
			}
		},
		// 点击充值记录
		onNavigationBarButtonTap(res) {
			if (res.index === 0) {
				uni.navigateTo({
					url: '/subpkg/topUpList/topUpList'
				})
			}
		},
		onLoad(options) {
			this.loadPartyACompany();
			this.initLoad();
		},
		onReachBottom() {
			this.loadList()
		},
		methods: {
			async loadPartyACompany() {
				let res = await getPartyACompany();
				if (res.data.qualification) {
					try {
						res.data.qualification = JSON.parse(res.data.qualification);
					} catch (e) {
						console.log(e);
					}
				}
				this.partyA = res.data;
				if (!this.partyA.qualification.corporate_account) this.partyA.qualification.corporate_account = "";
			},
			async initLoad() {
				this.loadConfig.page = 1;
				this.loadConfig.status = "loadmore";
				this.list = [];
				await this.loadList();
			},
			async loadList() {
				if (this.loadConfig.status == "nomore") return;
				this.loadConfig.status = "loading";
				let res = await getDepositRechargeTransferVoucherList({
					page: this.loadConfig.page,
					limit: this.loadConfig.limit
				})
				this.loadConfig.status = "loadmore"
				if (res.data.data.length < this.loadConfig.limit) {
					this.loadConfig.status = "nomore"
				} else {
					this.loadConfig.page++;
				}
				this.list = [...this.list, ...res.data?.data]
			},
			previewVoucher(str = "") {
				if (str.substring(str.length - 4, str.length) == '.pdf') { // 凭证为PDF时查看PDF
					uni.navigateTo({
						url: `/subpkg/pdfView/pdfView?url=${str}`
					})
				} else {
					uni.previewImage({
						urls: [str],
						longPressActions: {
							itemList: ['保存图片'],
							success: function(data) {
								if (data.tapIndex === 0) {
									uni.saveImageToPhotosAlbum({
										filePath: url,
										success: function() {
											uni.showToast({
												title: '保存成功',
												icon: 'success'
											})
										},
										fail: function() {
											uni.showToast({
												title: '保存失败',
												icon: 'none'
											})
										}
									})
								}
							}
						}
					})
				}
			},
			copyPhone(str = "", type = "号码") {
				if (str) uni.setClipboardData({
					data: str + "",
					success: (e) => {
						Toast(type + '已复制')
					},
					fail: (e) => {
						Toast('复制失败')
					}
				})
			}
		},
		onPullDownRefresh() {
			this.initLoad().then(() => {
				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 500)
			})
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.info {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		height: 350rpx;

		.bg {
			background-color: $theme-oa-color;
			height: 200rpx;
			width: 100vw;
			border-radius: 0rpx 0rpx 28rpx 28rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		.card {
			width: 694rpx;
			min-height: 180rpx;
			background: #FFFFFF;
			margin-top: 38.55rpx;
			box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(50, 116, 249, 0.1);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			opacity: 1;
			padding: 31.5rpx 28rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			position: absolute;
			top: 0;

			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
				padding-bottom: 10rpx;
			}

			.item {
				display: flex;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;

				text:nth-child(1) {
					flex-shrink: 0;
					margin-right: 18rpx;
				}
			}
		}
	}

	.deposit-list {
		display: flex;
		flex-direction: column;
		align-items: center;

		.card {
			width: 694rpx;
			min-height: 180rpx;
			background: #FFFFFF;
			margin-bottom: 28rpx;
			box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(50, 116, 249, 0.1);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			opacity: 1;
			padding: 31.5rpx 28rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.item {
				font-size: 28rpx;
				display: flex;
				justify-content: left;

				.text {
					margin-left: 12rpx;
					color: #999;
				}

				.green {
					color: #4cd964;
				}

				.blue {
					color: #0122c7;
				}
			}
		}
	}
</style>