<template>
	<view class="work-container">
		<!-- 标题 -->
		<view class="title">出示二维码支付</view>

		<!-- 副标题 -->
		<view class="subtitle">冯武鹏</view>

		<!-- 二维码 -->
		<image class="qr-code" src="/static/images/code.png" mode="aspectFill"></image>

		<!-- 有效期 -->
		<view class="valid-time">有效时间15分钟</view>

		<!-- 刷新按钮 -->
		<!-- <u-button class="refresh-button" type="primary" @click="refreshQrCode">刷新二维码</u-button> -->
		<view class="action-btn">
		  <button @click="refreshQrCode" class="login-btn cu-btn block bg-blue lg round">刷新二维码</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qrCodeUrl: '/static/images/code.png' // 替换为实际的二维码URL
			};
		},
		methods: {
			refreshQrCode() {
				// 模拟刷新二维码
				this.qrCodeUrl = `/static/images/code.png`;
			}
		}
	};
</script>

<style scoped>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #F9FBFF;
		min-height: 100%;
		height: auto;
	}

	.work-container {
		background-color: #FFFFFF;
		text-align: center;
	}

	.title {
		font-size: 22px;
		color: #333;
		margin-bottom: 10px;
		font-weight: 600;
	}

	.subtitle {
		font-size: 18px;
		color: #333;
		margin-bottom: 20px;
		font-weight: 600;
	}

	.qr-code {
		width: 200px;
		/* 二维码宽度 */
		height: 200px;
		/* 二维码高度 */
		margin-bottom: 20px;
	}

	.valid-time {
		font-size: 16px;
		color: #666;
		margin-bottom: 100px;
	}

	.refresh-button {
		width: 100%;
		max-width: 300px;
		height: 35px;
		border-radius: 25px;
		background-color: #e97c3d;
		/* 按钮背景颜色 */
		color: #fff;
		/* 按钮文字颜色 */
	}
	
	.login-btn {
	  height: 35px;
	  margin-left: 30rpx;
	  margin-right: 30rpx;
	  background-color: #e97c3d;
	}
</style>