206 lines
4.6 KiB
Markdown
206 lines
4.6 KiB
Markdown
# 添加账号收款二维码上传功能
|
||
|
||
## 功能概述
|
||
|
||
在添加账号页面中，当用户选择"收款二维码"类型时，会在收款码图片输入框旁边显示一个"上传"按钮，用户可以点击该按钮跳转到图片上传页面，上传收款二维码图片并自动获取图片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
|
||
|
||
## 扩展功能
|
||
|
||
### 可能的改进
|
||
- [ ] 添加图片预览功能
|
||
- [ ] 支持多图片上传
|
||
- [ ] 添加图片压缩功能
|
||
- [ ] 支持拖拽上传
|
||
- [ ] 添加上传进度条
|
||
|
||
### 自定义配置
|
||
- 可以修改上传按钮的样式和颜色
|
||
- 可以调整输入框和按钮的间距
|
||
- 可以自定义上传成功后的提示信息 |