requestAgent1.0实现基本静态页面

pages/agents/requestAgent.vue

@@ -9,13 +9,19 @@
     <!-- 主要内容区域 -->
     <view class="main-content">
       <view class="qrcode-container">
-        <uv-qrcode
+        <uv-qrcode :options="qrcodeOptions" :value="qrcodeValue" size="300rpx"></uv-qrcode>
-          ref="qrcode"
+      </view>
-          :options="options"
+
-          :value="value"
+      <!-- 按钮区域 -->
-          canvas-id="qrcode"
+      <view class="button-container">
-          size="300rpx"
+        <button class="action-button" @click="saveAndSharePoster">
-        ></uv-qrcode>
+          <text class="button-text">保存分享海报</text>
+        </button>
+
+        <button class="action-button" @click="sendToFriends">
+          <text class="button-text">保存分享海报</text>
+          <text class="button-sub-text">发给好友扫码</text>
+        </button>
       </view>
     </view>
   </view>
@@ -31,8 +37,8 @@ export default {
   data() {
     return {
       inviteCode: '1114514',
-      value: '123456',
+      qrcodeValue: '123456',
-      options: {
+      qrcodeOptions: {
         errorCorrectLevel: 'Q',
         margin: 10,
         areaColor: '#fff',
@@ -48,7 +54,25 @@ export default {
     // 页面加载时的逻辑
   },
   methods: {
-    // 页面方法
+    // 保存分享海报
+    saveAndSharePoster() {
+      uni.showToast({
+        title: '保存分享海报功能',
+        icon: 'none',
+      })
+      // TODO: 实现保存分享海报功能
+      console.log('保存分享海报')
+    },
+
+    // 发送给好友扫码
+    sendToFriends() {
+      uni.showToast({
+        title: '发送给好友扫码功能',
+        icon: 'none',
+      })
+      // TODO: 实现发送给好友扫码功能
+      console.log('发送给好友扫码')
+    },
   },
 }
 </script>
@@ -84,7 +108,6 @@ export default {
   margin: 0 30rpx;
   padding: 40rpx;
   height: 1050rpx;
-  border: red solid 1rpx;
 
   .qrcode-container {
     padding: 40rpx;
@@ -93,5 +116,41 @@ export default {
     box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
     margin-bottom: 60rpx;
   }
+
+  .button-container {
+    display: flex;
+    gap: 30rpx;
+    width: 100%;
+    justify-content: center;
+  }
+
+  .action-button {
+    flex: 1;
+    max-width: 280rpx;
+    height: 100rpx;
+    background: white;
+    border: 2rpx solid #ff6b35;
+    border-radius: 50rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 20rpx;
+    box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.2);
+
+    .button-text {
+      color: #ff6b35;
+      font-size: 28rpx;
+      font-weight: 500;
+      line-height: 1.2;
+    }
+
+    .button-sub-text {
+      color: #ff6b35;
+      font-size: 20rpx;
+      opacity: 0.8;
+      margin-top: 4rpx;
+    }
+  }
 }
 </style>