在添加账户的添加二维码输入框右侧上传图片，上传完毕成功返回二维码路径

2025-08-21 14:14:12 +08:00 · 2025-08-21 14:14:12 +08:00 · 37efccf38e
commit 37efccf38e
parent 678febf443
3 changed files with 270 additions and 17 deletions
--- a/README_ADD_CARD_UPLOAD.md
+++ b/README_ADD_CARD_UPLOAD.md
@ -0,0 +1,206 @@
+# 添加账号收款二维码上传功能
+
+## 功能概述
+
+在添加账号页面中，当用户选择"收款二维码"类型时，会在收款码图片输入框旁边显示一个"上传"按钮，用户可以点击该按钮跳转到图片上传页面，上传收款二维码图片并自动获取图片URL。
+
+## 功能特点
+
+### ✅ 已实现功能
+- [x] 根据账户类型动态显示上传按钮
+- [x] 跳转到专门的图片上传页面
+- [x] 上传成功后自动填充图片URL
+- [x] 完整的错误处理和提示
+- [x] 美观的UI设计
+
+### 🎯 使用流程
+
+1. **选择账户类型**：用户选择"收款二维码"
+2. **点击上传按钮**：收款码图片输入框旁边出现"上传"按钮
+3. **跳转上传页面**：点击按钮跳转到图片上传页面
+4. **上传图片**：选择并上传收款二维码图片
+5. **自动填充**：上传成功后自动返回并填充图片URL
+
+## 代码实现
+
+### 1. 模板部分
+
+```vue
+<view class="form-item">
+  <text class="form-label">{{ typeOptions[typeIndex].noLabel }}</text>
+  <view class="input-group">
+    <input
+      v-model="bankForm.no"
+      :placeholder="typeOptions[typeIndex].noPlaceholder"
+      class="form-input"
+      maxlength="30"
+    />
+    <!-- 收款二维码类型时显示上传按钮 -->
+    <view v-if="typeOptions[typeIndex].value === 'QR'" class="upload-btn" @click="goToImageUpload">
+      <text class="upload-text">上传</text>
+    </view>
+  </view>
+</view>
+```
+
+### 2. 方法实现
+
+```javascript
+// 跳转到图片上传页面
+goToImageUpload() {
+  uni.navigateTo({
+    url: '/pages/image-upload/image-upload'
+  })
+},
+
+// 处理图片上传成功
+onImageUploadSuccess(imageUrl) {
+  this.bankForm.no = imageUrl
+  uni.showToast({
+    title: '图片上传成功',
+    icon: 'success'
+  })
+}
+```
+
+### 3. 生命周期钩子
+
+```javascript
+onLoad() {
+  // 监听图片上传成功事件
+  uni.$on('image-upload-success', this.onImageUploadSuccess)
+},
+
+onUnload() {
+  // 移除事件监听
+  uni.$off('image-upload-success', this.onImageUploadSuccess)
+}
+```
+
+### 4. 样式设计
+
+```scss
+.input-group {
+  display: flex;
+  align-items: center;
+  gap: 15rpx;
+
+  .form-input {
+    flex: 1;
+  }
+
+  .upload-btn {
+    width: 120rpx;
+    height: 80rpx;
+    background: #ff803a;
+    border-radius: 10rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:active {
+      background: #e67333;
+      transform: scale(0.95);
+    }
+
+    .upload-text {
+      color: #fff;
+      font-size: 26rpx;
+      font-weight: 500;
+    }
+  }
+}
+```
+
+## 页面访问
+
+### 主要页面
+- **添加账号页面**：`/pages/requestWithdrawal/addCard.vue`
+- **图片上传页面**：`/pages/image-upload/image-upload`
+
+### 测试页面
+- **功能测试页面**：`/pages/test-add-card/test-add-card`
+
+## 使用示例
+
+### 1. 在父组件中使用
+
+```vue
+<template>
+  <view>
+    <!-- 其他内容 -->
+    
+    <!-- 添加账号弹窗 -->
+    <AddCard 
+      :visible="showModal" 
+      @close="showModal = false"
+      @success="onAddSuccess"
+    />
+  </view>
+</template>
+
+<script>
+import AddCard from '@/pages/requestWithdrawal/addCard.vue'
+
+export default {
+  components: {
+    AddCard
+  },
+  
+  methods: {
+    onAddSuccess() {
+      // 处理添加成功逻辑
+      console.log('账号添加成功')
+    }
+  }
+}
+</script>
+```
+
+### 2. 测试功能
+
+访问测试页面 `/pages/test-add-card/test-add-card` 可以：
+
+1. 点击"打开添加账号弹窗"按钮
+2. 选择"收款二维码"类型
+3. 点击"上传"按钮跳转到图片上传页面
+4. 上传图片后自动返回并填充URL
+
+## 技术细节
+
+### 事件通信
+- 使用 `uni.$emit` 和 `uni.$on` 进行页面间通信
+- 图片上传成功后触发 `image-upload-success` 事件
+- 传递图片URL作为参数
+
+### 条件渲染
+- 只有当账户类型为 `QR` 时才显示上传按钮
+- 使用 `v-if="typeOptions[typeIndex].value === 'QR'"` 控制显示
+
+### 样式适配
+- 使用 flexbox 布局确保输入框和按钮对齐
+- 响应式设计适配不同屏幕尺寸
+- 添加点击反馈效果
+
+## 注意事项
+
+1. **页面路由**：确保图片上传页面已在 `pages.json` 中注册
+2. **事件监听**：在组件销毁时记得移除事件监听
+3. **错误处理**：上传失败时会有相应的错误提示
+4. **URL格式**：上传成功后返回的是完整的图片访问URL
+
+## 扩展功能
+
+### 可能的改进
+- [ ] 添加图片预览功能
+- [ ] 支持多图片上传
+- [ ] 添加图片压缩功能
+- [ ] 支持拖拽上传
+- [ ] 添加上传进度条
+
+### 自定义配置
+- 可以修改上传按钮的样式和颜色
+- 可以调整输入框和按钮的间距
+- 可以自定义上传成功后的提示信息 
--- a/pages/image-upload/image-upload.vue
+++ b/pages/image-upload/image-upload.vue
@ -112,21 +112,22 @@ export default {
        // 构建完整的图片URL
        this.uploadResult = `https://api.ccttiot.com/${result.key}`

+        // 先触发事件，再返回上一页
+        console.log('触发图片上传成功事件:', this.uploadResult)
+        uni.$emit('image-upload-success', this.uploadResult)
+        
+        // 显示成功提示
        uni.showToast({
          title: '上传成功',
          icon: 'success',
        })

-        // 先触发事件，再返回上一页
-        console.log('触发图片上传成功事件:', this.uploadResult)
-        uni.$emit('image-upload-success', this.uploadResult)
-
        // 延迟返回，确保事件被处理
        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
          })
-        }, 2000)
+        }, 500)
      } catch (error) {
        console.error('上传失败:', error)
        this.errorMessage = error.message || '上传失败'
--- a/pages/requestWithdrawal/addCard.vue
+++ b/pages/requestWithdrawal/addCard.vue
@ -17,7 +17,16 @@
        <view class="form-item">
          <text class="form-label">{{ typeOptions[typeIndex].noLabel }}</text>
          <view class="input-group">
+            <textarea
+              v-if="typeOptions[typeIndex].value === 'QR'"
+              v-model="bankForm.no"
+              :placeholder="typeOptions[typeIndex].noPlaceholder"
+              class="form-input qr-input"
+              :maxlength="500"
+              auto-height
+            />
            <input
+              v-else
              v-model="bankForm.no"
              :placeholder="typeOptions[typeIndex].noPlaceholder"
              class="form-input"
@ -121,20 +130,23 @@ export default {
      }
    },
  },
+  created() {
+    // 在组件创建时就开始监听事件
+    console.log('AddCard组件创建，开始监听图片上传事件')
+    uni.$on('image-upload-success', this.onImageUploadSuccess)
+  },
  onLoad() {
    // 监听图片上传成功事件
    uni.$on('image-upload-success', this.onImageUploadSuccess)
  },
-  onShow() {
-    // 页面显示时也监听事件，确保弹窗重新打开时能接收到事件
-    uni.$on('image-upload-success', this.onImageUploadSuccess)
-  },
  onUnload() {
    // 移除事件监听
+    console.log('AddCard组件卸载，移除图片上传事件监听')
    uni.$off('image-upload-success', this.onImageUploadSuccess)
  },
-  onHide() {
-    // 页面隐藏时移除事件监听
+  beforeDestroy() {
+    // 组件销毁前也移除事件监听
+    console.log('AddCard组件销毁，移除图片上传事件监听')
    uni.$off('image-upload-success', this.onImageUploadSuccess)
  },
  methods: {
@ -220,19 +232,38 @@ export default {

    // 跳转到图片上传页面
    goToImageUpload() {
+      console.log('准备跳转到图片上传页面')
      uni.navigateTo({
-        url: '/pages/image-upload/image-upload'
+        url: '/pages/image-upload/image-upload',
+        success: () => {
+          console.log('成功跳转到图片上传页面')
+        },
+        fail: (err) => {
+          console.error('跳转到图片上传页面失败:', err)
+        }
      })
    },

    // 处理图片上传成功
    onImageUploadSuccess(imageUrl) {
      console.log('接收到图片上传成功事件:', imageUrl)
-      this.bankForm.no = imageUrl
-      uni.showToast({
-        title: '图片上传成功',
-        icon: 'success'
-      })
+      console.log('当前表单状态:', this.bankForm)
+      
+      if (imageUrl && typeof imageUrl === 'string') {
+        this.bankForm.no = imageUrl
+        console.log('URL已设置到表单:', this.bankForm.no)
+        
+        uni.showToast({
+          title: '图片上传成功',
+          icon: 'success'
+        })
+      } else {
+        console.error('接收到的imageUrl无效:', imageUrl)
+        uni.showToast({
+          title: '图片URL无效',
+          icon: 'none'
+        })
+      }
    },

    // 提交表单
@ -342,11 +373,26 @@ export default {
      font-size: 28rpx;
      color: #333;
      background: #fafafa;
+      word-break: break-all;
+      overflow: hidden;
+      text-overflow: ellipsis;

      &:focus {
        border-color: #ff803a;
        background: #fff;
      }
+      
+      &.qr-input {
+        font-size: 24rpx;
+        line-height: 1.4;
+        padding: 15rpx 20rpx;
+        min-height: 80rpx;
+        height: auto;
+        max-height: 200rpx;
+        resize: none;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+      }
    }

    .picker-value {