feat: 银行端

src/pages/me/loan-application.vue

@@ -352,15 +352,25 @@ function validateForm() {
 }
 
 // 提交表单
-function handleSubmit() {
-  // 取消表单校验，直接提交
+async function handleSubmit() {
+  if (!validateForm()) return
   
   uni.showLoading({
     title: '提交中...'
   })
   
-  // 模拟提交
-  setTimeout(() => {
+  try {
+    // 收集选中的商家
+    const selectedMerchants = merchantList.value.filter(item => item.selected)
+    
+    // 构建提交数据
+    const submitData = {
+      ...formData.value,
+      relatedMerchants: selectedMerchants
+    }
+    
+    await submitLoanApplication(submitData)
+    
     uni.hideLoading()
     uni.showToast({
       title: '提交成功',
@@ -371,13 +381,48 @@ function handleSubmit() {
     setTimeout(() => {
       uni.navigateBack()
     }, 1500)
-  }, 2000)
+  } catch (error) {
+    uni.hideLoading()
+    uni.showToast({
+      title: '提交失败',
+      icon: 'none'
+    })
+  }
 }
 
 // 返回上一页
 function handleBack() {
   uni.navigateBack()
 }
+
+// 商家选择相关
+import { getUserMerchants, submitLoanApplication } from '@/api/loan'
+import type { RelatedMerchant } from '@/typings/loan'
+
+const merchantList = ref<RelatedMerchant[]>([])
+
+onMounted(async () => {
+  const res = await getUserMerchants()
+  merchantList.value = res.list
+})
+
+function toggleMerchant(item: RelatedMerchant) {
+  item.selected = !item.selected
+}
+
+// 展开/收起逻辑
+const isExpanded = ref(false)
+
+const displayedMerchants = computed(() => {
+  if (isExpanded.value) {
+    return merchantList.value
+  }
+  return merchantList.value.slice(0, 3)
+})
+
+function toggleExpand() {
+  isExpanded.value = !isExpanded.value
+}
 </script>
 
 <template>
@@ -558,6 +603,51 @@ function handleBack() {
       </view>
     </view>
     
+    <!-- 关联商家模块 -->
+    <view class="form-card">
+      <view class="card-title">
+        <view class="title-bar"></view>
+        <text class="title-text">关联商家 (辅助证明)</text>
+      </view>
+      
+      <view class="form-content">
+        <view class="merchant-tip">
+          选择交易过的商家，系统将通知商家为您提供交易辅助材料，有助于提高审批通过率。
+        </view>
+        
+        <view class="merchant-list">
+          <view 
+            v-for="item in displayedMerchants" 
+            :key="item.merchantId"
+            class="merchant-item"
+            :class="{ active: item.selected }"
+            @click="toggleMerchant(item)"
+          >
+            <view class="check-box">
+              <text v-if="item.selected" class="i-carbon-checkmark"></text>
+            </view>
+            <view class="merchant-info">
+              <text class="name">{{ item.merchantName }}</text>
+              <text class="time">最近交易: {{ item.lastTradeTime }}</text>
+            </view>
+          </view>
+          
+          <!-- 展开/收起按钮 -->
+          <view 
+            v-if="merchantList.length > 3" 
+            class="expand-btn"
+            @click="toggleExpand"
+          >
+            <text>{{ isExpanded ? '收起' : '展开更多 (' + (merchantList.length - 3) + ')' }}</text>
+            <text 
+              class="i-carbon-chevron-down arrow" 
+              :class="{ up: isExpanded }"
+            ></text>
+          </view>
+        </view>
+      </view>
+    </view>
+
     <!-- 证件信息模块 -->
     <view class="form-card">
       <view class="card-title">
@@ -911,6 +1001,8 @@ function handleBack() {
     color: #FF4D4F;
     margin-top: 8rpx;
   }
+  
+
 }
 
 .submit-bar {
@@ -939,4 +1031,101 @@ function handleBack() {
     }
   }
 }
+</style>
+
+<style lang="scss" scoped>
+/* 补充商家选择样式 */
+.merchant-tip {
+  font-size: 26rpx;
+  color: #666;
+  background: #fdf5e6;
+  padding: 20rpx;
+  border-radius: 8rpx;
+  margin-bottom: 24rpx;
+  line-height: 1.5;
+}
+
+.merchant-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+  
+  .merchant-item {
+    display: flex;
+    align-items: center;
+    padding: 20rpx;
+    background: #f8f8f8;
+    border-radius: 12rpx;
+    border: 2rpx solid transparent;
+    transition: all 0.2s;
+    
+    &.active {
+      background: #e6f7eb;
+      border-color: #28c445;
+      
+      .check-box {
+        background: #28c445;
+        border-color: #28c445;
+      }
+    }
+    
+    .check-box {
+      width: 40rpx;
+      height: 40rpx;
+      border: 2rpx solid #ddd;
+      border-radius: 8rpx;
+      margin-right: 20rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #fff;
+      flex-shrink: 0; /* 防止压缩 */
+      
+      text {
+        font-size: 28rpx;
+        color: #fff;
+      }
+    }
+    
+    .merchant-info {
+      display: flex;
+      flex-direction: column;
+      
+      .name {
+        font-size: 30rpx;
+        color: #333;
+        font-weight: 500;
+        margin-bottom: 6rpx;
+      }
+      
+      .time {
+        font-size: 24rpx;
+        color: #999;
+      }
+    }
+  }
+  
+  .expand-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20rpx 0;
+    gap: 8rpx;
+    font-size: 26rpx;
+    color: #666;
+    
+    .arrow {
+      transition: transform 0.3s;
+      font-size: 24rpx;
+      
+      &.up {
+        transform: rotate(180deg);
+      }
+    }
+    
+    &:active {
+      opacity: 0.7;
+    }
+  }
+}
 </style>