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

## 功能概述

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

## 扩展功能

### 可能的改进
- [ ] 添加图片预览功能
- [ ] 支持多图片上传
- [ ] 添加图片压缩功能
- [ ] 支持拖拽上传
- [ ] 添加上传进度条

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