diff --git a/examples/single-image-upload-usage.vue b/examples/single-image-upload-usage.vue
deleted file mode 100644
index 05bfb37..0000000
--- a/examples/single-image-upload-usage.vue
+++ /dev/null
@@ -1,318 +0,0 @@
-
-
-
-
-
-
- 方法一:跳转到上传页面
- 跳转到专门的上传页面,上传完成后返回
-
-
-
-
- 上传结果:
-
- {{ method1Result }}
-
-
-
-
-
- 方法二:内嵌上传组件
- 在当前页面直接使用上传组件
-
-
-
-
- 点击选择图片
-
-
-
-
-
-
-
-
- 上传结果:
-
- {{ method2Result }}
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/pages.json b/pages.json
index e193c88..0a723a7 100644
--- a/pages.json
+++ b/pages.json
@@ -98,13 +98,6 @@
"style": {
"navigationBarTitleText": "图片上传"
}
- },
- {
- "path": "pages/image-upload-demo/image-upload-demo",
- "style": {
- "navigationBarTitleText": "图片上传演示",
- "navigationStyle": "custom"
- }
}
],
"tabBar": {
diff --git a/pages/image-upload-demo/image-upload-demo.vue b/pages/image-upload-demo/image-upload-demo.vue
deleted file mode 100644
index 48f73a8..0000000
--- a/pages/image-upload-demo/image-upload-demo.vue
+++ /dev/null
@@ -1,174 +0,0 @@
-
-
-
-
-
-
- 图片上传功能演示
- 点击下方按钮跳转到图片上传页面
-
-
-
-
-
-
-
- 上传结果
-
- {{ uploadedImageUrl }}
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/pages/image-upload/image-upload.vue b/pages/image-upload/image-upload.vue
index a084a7f..4c9ad80 100644
--- a/pages/image-upload/image-upload.vue
+++ b/pages/image-upload/image-upload.vue
@@ -117,36 +117,16 @@ export default {
icon: 'success',
})
- // 返回上一页并传递图片URL
- const pages = getCurrentPages()
- const prevPage = pages[pages.length - 2]
+ // 先触发事件,再返回上一页
+ console.log('触发图片上传成功事件:', this.uploadResult)
+ uni.$emit('image-upload-success', this.uploadResult)
- if (prevPage) {
- // 如果上一页存在,可以通过事件总线或其他方式传递数据
- // 这里我们通过URL参数的方式返回
- uni.navigateBack({
- success: () => {
- // 延迟执行,确保页面已经返回
- setTimeout(() => {
- uni.$emit('image-upload-success', this.uploadResult)
- }, 100)
- },
- })
- } else {
- // 如果没有上一页,直接返回URL参数
+ // 延迟返回,确保事件被处理
+ setTimeout(() => {
uni.navigateBack({
delta: 1,
- success: () => {
- // 通过URL参数传递结果
- const currentPage = getCurrentPages()[getCurrentPages().length - 1]
- if (currentPage && currentPage.onLoad) {
- currentPage.onLoad({
- imageUrl: encodeURIComponent(this.uploadResult),
- })
- }
- },
})
- }
+ }, 2000)
} catch (error) {
console.error('上传失败:', error)
this.errorMessage = error.message || '上传失败'
diff --git a/pages/requestWithdrawal/addCard.vue b/pages/requestWithdrawal/addCard.vue
index 9369a62..4f182ff 100644
--- a/pages/requestWithdrawal/addCard.vue
+++ b/pages/requestWithdrawal/addCard.vue
@@ -16,12 +16,18 @@
{{ typeOptions[typeIndex].noLabel }}
-
+
+
+
+
+ 上传
+
+
@@ -115,6 +121,22 @@ export default {
}
},
},
+ onLoad() {
+ // 监听图片上传成功事件
+ uni.$on('image-upload-success', this.onImageUploadSuccess)
+ },
+ onShow() {
+ // 页面显示时也监听事件,确保弹窗重新打开时能接收到事件
+ uni.$on('image-upload-success', this.onImageUploadSuccess)
+ },
+ onUnload() {
+ // 移除事件监听
+ uni.$off('image-upload-success', this.onImageUploadSuccess)
+ },
+ onHide() {
+ // 页面隐藏时移除事件监听
+ uni.$off('image-upload-success', this.onImageUploadSuccess)
+ },
methods: {
// 重置表单
resetForm() {
@@ -196,6 +218,23 @@ export default {
return true
},
+ // 跳转到图片上传页面
+ goToImageUpload() {
+ uni.navigateTo({
+ url: '/pages/image-upload/image-upload'
+ })
+ },
+
+ // 处理图片上传成功
+ onImageUploadSuccess(imageUrl) {
+ console.log('接收到图片上传成功事件:', imageUrl)
+ this.bankForm.no = imageUrl
+ uni.showToast({
+ title: '图片上传成功',
+ icon: 'success'
+ })
+ },
+
// 提交表单
async handleSubmit() {
if (!this.validateForm()) {
@@ -321,6 +360,39 @@ export default {
display: flex;
align-items: center;
}
+
+ .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;
+ }
+ }
+ }
}
}