fundHoldApp/pages/account/personalPaymentCode.vue

<template>
	<view class="page">
		<view class="container container-with-elep full-height-with-titile">
			<view class="qr-card">
				<view class="header">
					<text class="title">{{languageData.account.PersonalPaymentCode}}</text>
					<!-- <uni-icons type="help" size="20" color="#BA8D51" /> -->
				</view>
				<view class="divider"></view>
				<view class="">
					<view class="text-center padding-top-xl">{{nickName}}</view>
					<view class="inline-block text-center padding-top-sm text-xxl" v-if="amount>0">
						<text class="padding-right-xs">₭</text>
						<text>{{amount}}</text>
					</view>
				</view>
				<view class="qr-wrapper" v-if="qrcodeShow">
					<QRCodePay ref="qrcode" type="R" :amount="amount"></QRCodePay>
				</view>
				<view class="footer">
					<view class="center">
						<text class="btn-text" v-if="amount ==0" @click="toolBtn">{{languageData.settings.setAmount}}</text>
						<text class="btn-text" v-if="amount >0" @click="clearAmount">{{languageData.settings.clearAmount}}</text>
						<text class="btn-text padding-left-xs" @click="saveQrCode">{{languageData.settings.saveQRCode}}</text>
					</view>
				</view>
			</view>
			<view class="action-card">
				<view class="action-item" @click="toLedger">
					<uni-icons type="wallet" size="24" color="white" />
					<text class="action-text">{{languageData.account.accountBook}}</text>
					<uni-icons type="right" size="16" color="white" />
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import QRCodePay from '@/components/QRCode/QRCodePay.vue'
	export default {
		components: {
			QRCodePay
		},
		data() {
			return {
				qrcodeShow: false,
				nickName: null,
				user: {},
				amount: 0
			}
		},
		created(e) {
			this.languageData = this.$languageData;
			uni.setNavigationBarTitle({
				title: this.$languageData.navBar.receiptByQRCode
			});
			this.nickName = this.$store.state.user.nickName;
			this.amount = this.$store.state.user.amount;
			this.qrcodeShow = false;
			this.getQrcode();
		},
		watch:{
			languageData(){
				uni.setNavigationBarTitle({
					title: this.$languageData.navBar.receiptByQRCode
				});
			}
		},
		onBackPress() {
			this.BackPage();
			return true;
		},
		methods: {
			toolBtn() {
				uni.navigateTo({
					url: "/pages/account/setAmount?type=S"
				})
			},
			getQrcode() {
				this.qrcodeShow = true;
				this.$nextTick(() => {
					this.$refs.qrcode.getUserInfo();
				})
			},
			//清除金额
			clearAmount() {
				this.qrcodeShow = false;
				//重新生成带金额的收款码
				this.$store.commit('SET_AMOUNT', 0);
				this.amount = 0;
				this.getQrcode();
			},
			BackPage() {
				//离开收款码页面将金额清除
				this.$store.commit('SET_AMOUNT', 0)
				uni.navigateTo({
					url: "/pages/account/receiptPayment"
				})
			},
			saveQrCode() {
				this.$nextTick(() => {
					this.$refs.qrcode.saveQrCode();
				})
			},
			// 设置屏幕亮度
			getAndSetBrightness() {
				uni.setScreenBrightness({
					value: 1, // 设置屏幕亮度为最亮
					success: () => {
						console.log("屏幕亮度已设置为最亮");
					}
				});
			},
			toLedger(){
				uni.navigateTo({
					url:'/pages/account/ledger'
				})
			}
		},
	}
</script>
<style>
	page {
		height: 100%;
		background-color: #FFD69C;
	}
</style>
<style scoped>
	.page {
		height: 100%;
		background-color: #2345B2;
		padding: 20rpx;
	}

	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.divider {
		border: 0;
		border-top: 1px solid #dedede;
		width: 100%;
	}

	.qr-card {
		background-color: #FFFFFF;
		border-radius: 24rpx;
		padding: 40rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
		color: #F9CA87;
	}

	.title {
		font-size: 35rpx;
		color: #000;
		font-weight: 500;
	}

	.qr-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10rpx;
		padding: 20rpx;
	}

	.footer {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 40rpx;
	}

	.refresh-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #F5F5F5;
		border-radius: 8px;
		padding: 0 32rpx;
		height: 72rpx;
		border: none;
		outline: none;
		box-shadow: none;
	}

	.btn-text {
		font-size: 14px;
		color: #333333;
		margin-left: 8rpx;
	}

	.validity {
		font-size: 12px;
		color: #999999;
		margin-top: 16rpx;
	}

	.action-card {
		margin-top: 7px;
		background-color: rgba(255, 255, 255, 0.4);
		border-radius: 24rpx;
		padding: 0 40rpx;
		color: white;
	}

	.action-item {
		display: flex;
		align-items: center;
		height: 100rpx;
	}

	.action-text {
		flex: 1;
		font-size: 30rpx;
		color: #ffffff;
		margin-left: 16rpx;
		font-weight: bold;
	}
</style>