fundHoldApp/pages/account/receiptPayment.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.qrCode}}</text>
					<!-- <uni-icons type="help" size="20" color="#BA8D51" /> -->
				</view>
				<view class="divider"></view>
				<view class="qr-wrapper" v-if="qrcodeShow">
					<QRCodePay ref="qrcode"></QRCodePay>
				</view>
				<view class="footer">
					<view class="">
						<text class="btn-text" @click="getQrcode">{{languageData.settings.refresh}}</text>
					</view>
					<text class="validity">{{languageData.settings.tips}}</text>
				</view>
			</view>
			<view class="action-card" @click="toolBtn('personalPaymentCode')">
				<view class="action-item">
					<uni-icons type="wallet" size="24" color="white" />
					<text class="action-text">{{languageData.account.qrCodePayment}}</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,
				originalBrightness: null //当前亮度
			}
		},
		created() {
			this.languageData = this.$languageData;
			uni.setNavigationBarTitle({
				title: this.$languageData.navBar.payByQRCode
			});
			this.qrcodeShow = true;
			this.getQrcode();
			this.getAndSetBrightness();
		},
		onBackPress() {
			this.BackPage();
			return true;
		},
		onUnload() {
			this.restoreBrightness();
		},
		methods: {
			toolBtn(page) {
				uni.navigateTo({
					url: "/pages/account/" + page
				})
			},
			getQrcode() {
				this.$store.commit('SET_AMOUNT', 0);
				this.$nextTick(() => {
					this.$refs.qrcode.getUserInfo();
				})
			},
			BackPage() {
				uni.switchTab({
					url: "/pages/home/index"
				})
			},
			saveQrCode() {
				this.$nextTick(() => {
					this.$refs.qrcode.saveQrCode();
				})
			},
			// 设置屏幕亮度
			getAndSetBrightness() {
				uni.setScreenBrightness({
					value: 1, // 设置屏幕亮度为最亮
					success: () => {
						console.log("屏幕亮度已设置为最亮");
					}
				});
			},
			// 恢复屏幕亮度
			restoreBrightness() {
				this.originalBrightness = uni.getStorageSync("originalBrightness")
				if (this.originalBrightness !== null) {
					uni.setScreenBrightness({
						value: this.originalBrightness,
						success: () => {
							console.log("恢复屏幕亮度");
						}
					});
				}
			},
		},

	}
</script>

<style>
	page {
		height: 100%;
		background-color: #FFD69C;
	}
</style>

<style scoped>
	.page {
		min-height: 100%;
		background-color: #2345B2;
		padding: 20rpx;
	}

	.container {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		padding: 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: 80rpx;
		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>