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
|
|||
|
|
|
|||
|
|
## 扩展功能
|
|||
|
|
|
|||
|
|
### 可能的改进
|
|||
|
|
- [ ] 添加图片预览功能
|
|||
|
|
- [ ] 支持多图片上传
|
|||
|
|
- [ ] 添加图片压缩功能
|
|||
|
|
- [ ] 支持拖拽上传
|
|||
|
|
- [ ] 添加上传进度条
|
|||
|
|
|
|||
|
|
### 自定义配置
|
|||
|
|
- 可以修改上传按钮的样式和颜色
|
|||
|
|
- 可以调整输入框和按钮的间距
|
|||
|
|
- 可以自定义上传成功后的提示信息
|