Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
4e873aca 1 parent 5e5bfdf8

feat(collectionSettings): 添加银行卡图片上传功能 

新增银行卡正面照片上传组件，包含上传、预览和删除功能
- 添加样式文件定义上传组件外观和交互效果
- 实现图片选择、上传至服务器功能
- 添加预览和删除图片功能
- 更新表单数据结构和API调用以支持银行卡图片
Inline Side-by-side
Showing 2 changed files with 222 additions and 7 deletions
......@@ -275,3 +275,84 @@
font-weight: 500;
}
}
// 银行卡图片上传样式
.bank-img-container {
margin-top: 16rpx;
.bank-img-upload {
width: 100%;
height: 200rpx;
border: 2rpx dashed #ddd;
border-radius: 12rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #fafafa;
transition: all 0.3s ease;
&:active {
background-color: #f0f0f0;
border-color: #ccc;
}
.upload-icon {
font-size: 48rpx;
color: #999;
margin-bottom: 8rpx;
}
.upload-text {
font-size: 28rpx;
color: #666;
}
}
.bank-img-preview {
width: 100%;
position: relative;
.bank-img-image {
width: 100%;
height: 200rpx;
border-radius: 12rpx;
object-fit: cover;
}
.bank-img-actions {
display: flex;
justify-content: space-between;
margin-top: 16rpx;
gap: 16rpx;
.change-img-btn,
.delete-img-btn {
flex: 1;
text-align: center;
padding: 16rpx;
border-radius: 8rpx;
font-size: 28rpx;
transition: all 0.3s ease;
}
.change-img-btn {
background-color: #f97316;
color: #fff;
&:active {
background-color: #ea580c;
}
}
.delete-img-btn {
background-color: #ef4444;
color: #fff;
&:active {
background-color: #dc2626;
}
}
}
}
}
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-06 17:43:18
* @LastEditTime: 2025-08-07 14:52:58
* @FilePath: /jgdl/src/pages/collectionSettings/index.vue
* @Description: 收款设置
-->
......@@ -74,6 +74,29 @@
:cursor-spacing="50"
/>
</view>
<!-- 银行卡正面照片上传 -->
<view class="form-item">
<text class="form-label">银行卡正面照</text>
<view class="bank-img-container">
<view v-if="tempAccountInfo.bankImg" class="bank-img-preview">
<image
:src="tempAccountInfo.bankImg"
class="bank-img-image"
mode="aspectFill"
@tap="previewBankImg"
/>
<view class="bank-img-actions">
<text class="change-img-btn" @tap="changeBankImg">重新上传</text>
<text class="delete-img-btn" @tap="deleteBankImg">删除</text>
</view>
</view>
<view v-else class="bank-img-upload" @tap="changeBankImg">
<text class="upload-icon">+</text>
<text class="upload-text">上传银行卡正面照</text>
</view>
</view>
</view>
</view>
<view class="modal-footer">
......@@ -187,6 +210,7 @@ import "./index.less";
// 导入接口
import { updateProfileAPI, getProfileAPI } from '@/api/index'
import { getBanksAPI } from '@/api/other'
import BASE_URL from '@/utils/config'
// 导入用户状态管理
import { useUserStore } from '@/stores/user'
......@@ -211,7 +235,8 @@ const showBackButton = computed(() => {
*/
const accountInfo = ref({
bankName: '',
bankAccount: ''
bankAccount: '',
bankImg: ''
});
/**
......@@ -227,7 +252,8 @@ const identityInfo = ref({
*/
const tempAccountInfo = ref({
bankName: '',
bankAccount: ''
bankAccount: '',
bankImg: ''
});
/**
......@@ -289,7 +315,8 @@ const getUserInfo = async () => {
if (userInfo.bank_id && userInfo.bank_no) {
accountInfo.value = {
bankName: userInfo.bank_id, // 存储银行ID
bankAccount: userInfo.bank_no
bankAccount: userInfo.bank_no,
bankImg: userInfo.bank_img || '' // 存储银行卡图片
};
}
......@@ -410,7 +437,7 @@ const openAccountModal = () => {
*/
const closeAccountModal = () => {
showAccountModal.value = false;
tempAccountInfo.value = { bankName: '', bankAccount: '' };
tempAccountInfo.value = { bankName: '', bankAccount: '', bankImg: '' };
};
/**
......@@ -429,7 +456,8 @@ const saveAccountInfo = async () => {
// 调用API保存收款账号信息
const result = await updateProfileAPI({
bank_id: tempAccountInfo.value.bankName, // 发送银行ID
bank_no: tempAccountInfo.value.bankAccount
bank_no: tempAccountInfo.value.bankAccount,
bank_img: tempAccountInfo.value.bankImg // 发送银行卡图片
});
if (result.code) {
......@@ -438,7 +466,8 @@ const saveAccountInfo = async () => {
// 更新全局用户状态
userStore.updateUserInfo({
bank_id: tempAccountInfo.value.bankName, // 存储银行ID
bank_no: tempAccountInfo.value.bankAccount
bank_no: tempAccountInfo.value.bankAccount,
bank_img: tempAccountInfo.value.bankImg // 存储银行卡图片
});
closeAccountModal();
......@@ -476,6 +505,111 @@ const closeIdentityModal = () => {
};
/**
* 上传银行卡正面照
*/
const changeBankImg = () => {
Taro.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
const tempFilePath = res.tempFilePaths[0]
uploadBankImage(tempFilePath)
},
fail: function () {
Taro.showToast({
title: '选择图片失败',
icon: 'none'
})
}
})
}
/**
* 上传银行卡图片到服务器
* @param {String} filePath - 图片文件路径
*/
const uploadBankImage = (filePath) => {
// 显示上传中提示
Taro.showLoading({
title: '上传中',
mask: true
})
// 上传图片
wx.uploadFile({
url: BASE_URL + '/admin/?m=srv&a=upload',
filePath,
name: 'file',
header: {
'content-type': 'multipart/form-data',
},
success: function (res) {
let upload_data = JSON.parse(res.data);
Taro.hideLoading({
success: () => {
if (res.statusCode === 200) {
tempAccountInfo.value.bankImg = upload_data.data.src;
Taro.showToast({
title: '上传成功',
icon: 'success'
})
} else {
Taro.showToast({
icon: 'error',
title: '服务器错误,稍后重试！',
mask: true
})
}
},
});
},
fail: function (res) {
Taro.hideLoading({
success: () => {
Taro.showToast({
icon: 'error',
title: '上传失败,稍后重试！',
mask: true
})
},
});
}
})
}
/**
* 预览银行卡图片
*/
const previewBankImg = () => {
if (tempAccountInfo.value.bankImg) {
Taro.previewImage({
urls: [tempAccountInfo.value.bankImg],
current: tempAccountInfo.value.bankImg
})
}
}
/**
* 删除银行卡图片
*/
const deleteBankImg = () => {
Taro.showModal({
title: '确认删除',
content: '确定要删除银行卡照片吗？',
success: function (res) {
if (res.confirm) {
tempAccountInfo.value.bankImg = ''
Taro.showToast({
title: '删除成功',
icon: 'success'
})
}
}
})
}
/**
* 保存身份信息
*/
const saveIdentityInfo = async () => {
......