hs_hzl_uniapp_ml/pages/user/payCode.vue

<template>
	<view style="height: 100%;
		background: linear-gradient(to bottom right, #d7fdfc, #f2f9fe);">
		<view class="view2">
			<text class="payMode1" :size="26" bold block>支付方式：</text>
			<text class="payMode2" :size="18" bold>等值积分</text>
		</view>
		<view style="height: 110%">
			<view id="view1" style="height: 100%">
				<view class="payCodeView">
					<!-- 					<view style="padding: 0 5rpx;font-size: 32rpx; font-weight: bold;background-color: #41c8bf;color: #ffffff;
							position:absolute;top: 200px;">
						HS
					</view> -->
					<uqrcode style="z-index: 0;" ref="uqrcode"></uqrcode>
					<!-- <u--image :showLoading="true" radius="7" :src="payCode" width="200px" height="200px"></u--image> -->
				</view>
			</view>
			<view style="height: 100%;padding-bottom: 520rpx;">
				<u-button class="sxButton" icon="reload" size="normal" loadingMode="circle" color="rgb(55,186,189)"
					@click="refreshQRCode">刷新
				</u-button>
				<view style="height: 100"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payCode: '../../static/uview/user/payCodeDemo.png',
				imgSrc: "../../static/uview/willalpImg/750x560-.png",
				payMode1: '',
				height:0,
				payMode2: '',
				codeText: {
					u: uni.getStorageSync('setUserName'),
					un: uni.getStorageSync('userInfo').nickName,
					o: uni.getStorageSync('orgInfo').organizationCode,
					d: this.$dateResult(new Date(), 'datetime')
				},
				// viewHeight: document.getElementById('view1')
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: res => {
					that.height = res.windowHeight - uni.getStorageSync('mydomHeight')
				}
			})
		},
		onReady() {
			this.getQRCode()
			// console.log(this.viewHeight)
		},
		methods: {
			refreshQRCode() {
				uni.redirectTo({
					url: 'payCode'
				})
				// this.getQRCode()
			},
			getQRCode() {
				this.$refs.uqrcode.make({
						mode: 'canvas', // 默认为view
						size: 250,
						text: JSON.stringify(this.codeText)
					})
					.then(res => {
						// 返回的res与uni.canvasToTempFilePath返回一致
						console.log(res)
					})
			}
		}
	}
</script>

<style>
	page {
		background: linear-gradient(to bottom right, #d7fdfc, #f2f9fe);
	}

	.view1 {
		height: 100%;
		padding: 5%;
	}

	.view2 {
		padding: 50rpx 5px;
		border-radius: 10px;
		box-shadow: 0px 2px 2px #9e9e9e;
	}

	.payCodeView {
		padding: 100rpx 20rpx;
		height: 78%;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.sxButton {
		width: 100px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.payMode1 {
		color: #5a8e7d;
		font-size: 55rpx;
		font-weight: bold;
		padding: 10px 0 5px 10px;
	}

	.payMode2 {
		font-weight: bold;
		color: #767676;
		font-size: 45rpx;
		padding: 5px 0 15px 10px;
	}
</style>