首页

pages/code/index.vue

@@ -0,0 +1,77 @@
+<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>