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

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

    <!-- 二维码 -->
    <image class="qr-code" src="https://example.com/qr-code.png" mode="aspectFill"></image>

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

    <!-- 刷新按钮 -->
    <u-button class="refresh-button" type="primary" @click="refreshQrCode">刷新二维码</u-button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      qrCodeUrl: 'https://example.com/qr-code.png' // 替换为实际的二维码URL
    };
  },
  methods: {
    refreshQrCode() {
      // 模拟刷新二维码
      this.qrCodeUrl = `https://example.com/qr-code-${Math.random()}.png`;
    }
  }
};
</script>

<style scoped>
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #f0f8ff; /* 背景颜色 */
}

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

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

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

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

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