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

新增银行卡正面照片上传组件，包含上传、预览和删除功能
- 添加样式文件定义上传组件外观和交互效果
- 实现图片选择、上传至服务器功能
- 添加预览和删除图片功能
- 更新表单数据结构和API调用以支持银行卡图片

@@ -275,3 +275,84 @@
     font-weight: 500;
     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
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @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
  * @FilePath: /jgdl/src/pages/collectionSettings/index.vue
  * @Description: 收款设置
  * @Description: 收款设置
 -->
 -->
@@ -74,6 +74,29 @@
               :cursor-spacing="50"
               :cursor-spacing="50"
             />
             />
           </view>
           </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>
 
 
         <view class="modal-footer">
         <view class="modal-footer">
@@ -187,6 +210,7 @@ import "./index.less";
 // 导入接口
 // 导入接口
 import { updateProfileAPI, getProfileAPI } from '@/api/index'
 import { updateProfileAPI, getProfileAPI } from '@/api/index'
 import { getBanksAPI } from '@/api/other'
 import { getBanksAPI } from '@/api/other'
+import BASE_URL from '@/utils/config'
 
 
 // 导入用户状态管理
 // 导入用户状态管理
 import { useUserStore } from '@/stores/user'
 import { useUserStore } from '@/stores/user'
@@ -211,7 +235,8 @@ const showBackButton = computed(() => {
  */
  */
 const accountInfo = ref({
 const accountInfo = ref({
   bankName: '',
   bankName: '',
-  bankAccount: ''
+  bankAccount: '',
+  bankImg: ''
 });
 });
 
 
 /**
 /**
@@ -227,7 +252,8 @@ const identityInfo = ref({
  */
  */
 const tempAccountInfo = ref({
 const tempAccountInfo = ref({
   bankName: '',
   bankName: '',
-  bankAccount: ''
+  bankAccount: '',
+  bankImg: ''
 });
 });
 
 
 /**
 /**
@@ -289,7 +315,8 @@ const getUserInfo = async () => {
       if (userInfo.bank_id && userInfo.bank_no) {
       if (userInfo.bank_id && userInfo.bank_no) {
         accountInfo.value = {
         accountInfo.value = {
           bankName: userInfo.bank_id, // 存储银行ID
           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 = () => {
 const closeAccountModal = () => {
   showAccountModal.value = false;
   showAccountModal.value = false;
-  tempAccountInfo.value = { bankName: '', bankAccount: '' };
+  tempAccountInfo.value = { bankName: '', bankAccount: '', bankImg: '' };
 };
 };
 
 
 /**
 /**
@@ -429,7 +456,8 @@ const saveAccountInfo = async () => {
     // 调用API保存收款账号信息
     // 调用API保存收款账号信息
     const result = await updateProfileAPI({
     const result = await updateProfileAPI({
       bank_id: tempAccountInfo.value.bankName, // 发送银行ID
       bank_id: tempAccountInfo.value.bankName, // 发送银行ID
-      bank_no: tempAccountInfo.value.bankAccount
+      bank_no: tempAccountInfo.value.bankAccount,
+      bank_img: tempAccountInfo.value.bankImg // 发送银行卡图片
     });
     });
 
 
     if (result.code) {
     if (result.code) {
@@ -438,7 +466,8 @@ const saveAccountInfo = async () => {
       // 更新全局用户状态
       // 更新全局用户状态
       userStore.updateUserInfo({
       userStore.updateUserInfo({
         bank_id: tempAccountInfo.value.bankName, // 存储银行ID
         bank_id: tempAccountInfo.value.bankName, // 存储银行ID
-        bank_no: tempAccountInfo.value.bankAccount
+        bank_no: tempAccountInfo.value.bankAccount,
+        bank_img: tempAccountInfo.value.bankImg // 存储银行卡图片
       });
       });
 
 
       closeAccountModal();
       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 () => {
 const saveIdentityInfo = async () => {