HomeLease/README_ADD_CARD_UPLOAD.md

添加账号收款二维码上传功能

功能概述

在添加账号页面中，当用户选择"收款二维码"类型时，会在收款码图片输入框旁边显示一个"上传"按钮，用户可以点击该按钮跳转到图片上传页面，上传收款二维码图片并自动获取图片URL。

功能特点

✅ 已实现功能

• 根据账户类型动态显示上传按钮
• 跳转到专门的图片上传页面
• 上传成功后自动填充图片URL
• 完整的错误处理和提示
• 美观的UI设计

🎯 使用流程

1. 选择账户类型：用户选择"收款二维码"
2. 点击上传按钮：收款码图片输入框旁边出现"上传"按钮
3. 跳转上传页面：点击按钮跳转到图片上传页面
4. 上传图片：选择并上传收款二维码图片
5. 自动填充：上传成功后自动返回并填充图片URL

代码实现

1. 模板部分

<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. 方法实现

// 跳转到图片上传页面
goToImageUpload() {
  uni.navigateTo({
    url: '/pages/image-upload/image-upload'
  })
},

// 处理图片上传成功
onImageUploadSuccess(imageUrl) {
  this.bankForm.no = imageUrl
  uni.showToast({
    title: '图片上传成功',
    icon: 'success'
  })
}

3. 生命周期钩子

onLoad() {
  // 监听图片上传成功事件
  uni.$on('image-upload-success', this.onImageUploadSuccess)
},

onUnload() {
  // 移除事件监听
  uni.$off('image-upload-success', this.onImageUploadSuccess)
}

4. 样式设计

.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. 在父组件中使用

<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

扩展功能

可能的改进

• 添加图片预览功能
• 支持多图片上传
• 添加图片压缩功能
• 支持拖拽上传
• 添加上传进度条

自定义配置

• 可以修改上传按钮的样式和颜色
• 可以调整输入框和按钮的间距
• 可以自定义上传成功后的提示信息