consumer模块完成95%，在和商家端对接聊天购物闭环

pages/mall/consumer/bank-cards/add.uvue

@@ -0,0 +1,152 @@
+<template>
+  <view class="add-card-page">
+    <view class="form-container">
+      <view class="form-item">
+        <text class="label">持卡人</text>
+        <input class="input" type="text" v-model="form.holder_name" placeholder="请输入持卡人姓名" />
+      </view>
+      <view class="form-item">
+        <text class="label">卡号</text>
+        <input class="input" type="number" v-model="form.card_no" placeholder="请输入银行卡号" @input="detectBank" maxlength="19" />
+      </view>
+      <view class="form-item">
+        <text class="label">银行</text>
+        <input class="input" type="text" v-model="form.bank_name" placeholder="自动识别或手动输入" />
+      </view>
+      <view class="form-item">
+        <text class="label">手机号</text>
+        <input class="input" type="number" v-model="form.phone" placeholder="银行预留手机号" maxlength="11" />
+      </view>
+      
+      <view class="form-item switch-item">
+        <text class="label">设为默认卡</text>
+        <switch :checked="form.is_default" @change="onSwitchChange" color="#ff5000" />
+      </view>
+    </view>
+    
+    <view class="action-section">
+      <button class="submit-btn" :disabled="loading" @click="submit">确认添加</button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+import { ref, reactive } from 'vue'
+import { supabaseService } from '@/utils/supabaseService.uts'
+
+const loading = ref(false)
+const form = reactive({
+  holder_name: '',
+  card_no: '',
+  bank_name: '',
+  phone: '',
+  is_default: false
+})
+
+const onSwitchChange = (e: UniSwitchChangeEvent) => {
+  form.is_default = e.detail.value
+}
+
+// 模拟卡号识别
+const detectBank = (e: any) => {
+  const val = form.card_no
+  if (val.length >= 6) {
+    if (val.startsWith('6222')) form.bank_name = '中国工商银行'
+    else if (val.startsWith('6227')) form.bank_name = '中国建设银行'
+    else if (val.startsWith('6225')) form.bank_name = '招商银行'
+    else if (val.startsWith('6228')) form.bank_name = '中国农业银行'
+    // else form.bank_name = '' 
+  }
+}
+
+const submit = async () => {
+    if (!form.holder_name || !form.card_no || !form.bank_name) {
+        uni.showToast({ title: '请完善卡片信息', icon: 'none' })
+        return
+    }
+    
+    loading.value = true
+    
+    try {
+        const cardData = new UTSJSONObject()
+        cardData.set('holder_name', form.holder_name)
+        cardData.set('bank_name', form.bank_name)
+        // 截取后4位
+        const last4 = form.card_no.length > 4 ? form.card_no.slice(-4) : form.card_no
+        cardData.set('card_no_last4', last4)
+        cardData.set('phone', form.phone)
+        cardData.set('is_default', form.is_default)
+        // 简单推定为储蓄卡
+        cardData.set('card_type', 'debit') 
+        
+        const success = await supabaseService.addBankCard(cardData)
+        if (success) {
+            uni.showToast({ title: '添加成功' })
+            setTimeout(() => {
+                uni.navigateBack()
+            }, 1000)
+        } else {
+            uni.showToast({ title: '添加失败', icon: 'none' })
+        }
+    } catch (e) {
+        console.error(e)
+        uni.showToast({ title: '系统错误', icon: 'none' })
+    } finally {
+        loading.value = false
+    }
+}
+</script>
+
+<style>
+.add-card-page {
+  background-color: #f5f5f5;
+  min-height: 100vh;
+  padding-top: 20px;
+}
+
+.form-container {
+  background-color: #fff;
+  padding: 0 15px;
+}
+
+.form-item {
+  display: flex;
+  align-items: center;
+  padding: 15px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.form-item:last-child {
+  border-bottom: none;
+}
+
+.label {
+  width: 80px;
+  font-size: 15px;
+  color: #333;
+}
+
+.input {
+  flex: 1;
+  font-size: 15px;
+}
+
+.switch-item {
+  justify-content: space-between;
+}
+
+.action-section {
+  padding: 30px 15px;
+}
+
+.submit-btn {
+  background-color: #ff5000;
+  color: #fff;
+  border-radius: 25px;
+  font-size: 16px;
+}
+
+.submit-btn[disabled] {
+    opacity: 0.6;
+}
+</style>