银行卡页面

src/pages.json

@@ -26,7 +26,22 @@
 		{
 			"path": "pages/more/index",
 			"style": {
-				"navigationBarTitleText": "我的"
+				"navigationBarTitleText": ""
+			}
+		},{
+			"path": "pages/more/bank",
+			"style": {
+				"navigationBarTitleText": ""
+			}
+		},{
+			"path": "pages/more/addbankCard",
+			"style": {
+				"navigationBarTitleText": ""
+			}
+		},{
+			"path": "pages/more/bankCardDetail",
+			"style": {
+				"navigationBarTitleText": ""
 			}
 		}
 	],

src/pages/more/addbankCard.vue

@@ -0,0 +1,519 @@
+<template>
+  <view class="bank-card-bind">
+    <!-- 导航栏 -->
+    <view class="nav-bar">
+      <view class="back-btn" @click="navigateBack">
+        <image  src="/src/static/pic/mark/more-left.png" mode="aspectFit"></image>
+      </view>
+      <text class="title">{{$t('bank.bindCard')}}</text>
+      <view class="right-placeholder"></view>
+    </view>
+    
+    <!-- 表单区域 -->
+    <view class="form-container">
+      <!-- 银行卡号 -->
+      <view class="form-item">
+        <text class="form-label">{{$t('bank.bankcardnum')}}</text>
+        <view class="input-container">
+          <input 
+            v-model="formData.cardNumber"
+            type="number"
+            placeholder="请输入银行卡号"
+            maxlength="19"
+            @input="formatCardNumber"
+            class="card-input"
+          />
+          <image 
+            v-if="bankInfo.logo"
+            :src="bankInfo.logo"
+            class="bank-logo"
+            mode="aspectFit"
+          />
+        </view>
+      </view>
+      
+      <!-- 银行选择 -->
+      <view class="form-item">
+        <text class="form-label">{{$t('bank.bankname')}}</text>
+        <picker 
+          @change="handleBankChange"
+          :value="bankIndex"
+          :range="bankList"
+          range-key="name"
+        >
+          <view class="picker">
+            {{ bankList[bankIndex]?.name || '请选择银行' }}
+            <uni-icons type="arrowdown" size="16" color="#999"></uni-icons>
+          </view>
+        </picker>
+      </view>
+      
+      <!-- 持卡人姓名 -->
+      <view class="form-item">
+        <text class="form-label">{{$t('bank.cardpersonname')}}</text>
+        <input 
+          v-model="formData.cardHolder"
+          type="text"
+          placeholder="请输入持卡人姓名"
+          maxlength="20"
+          class="common-input"
+        />
+      </view>
+      
+      <!-- 身份证号 -->
+      <view class="form-item">
+        <text class="form-label">{{$t(bank.idCard)}}</text>
+        <input 
+          v-model="formData.idCard"
+          type="idcard"
+          placeholder="请输入身份证号"
+          maxlength="18"
+          class="common-input"
+        />
+      </view>
+      
+      <!-- 手机号 -->
+      <view class="form-item">
+        <text class="form-label">{{$t('bank.cardphone')}}</text>
+        <input 
+          v-model="formData.phone"
+          type="number"
+          placeholder="请输入银行预留手机号"
+          maxlength="11"
+          class="common-input"
+        />
+      </view>
+      
+      <!-- 验证码 -->
+      <view class="form-item">
+        <text class="form-label">{{$t('bank.bankvericode')}}</text>
+        <view class="sms-container">
+          <input 
+            v-model="formData.smsCode"
+            type="number"
+            placeholder="请输入验证码"
+            maxlength="6"
+            class="sms-input"
+          />
+          <button 
+            class="sms-btn"
+            :disabled="isCounting || !canSendSms"
+            @click="handleSendSms"
+          >
+            {{ smsBtnText }}
+          </button>
+        </view>
+      </view>
+      
+      <!-- 协议 -->
+      <view class="agreement">
+        <label class="agreement-item">
+          <checkbox 
+            :checked="formData.agreed"
+            @click="formData.agreed = !formData.agreed"
+            color="#2979FF"
+          />
+          <text class="agreement-text">
+            {{$t('bank.readagreement')}}
+            <text class="agreement-link" @click="viewAgreement(1)">{{ $t('bank.useragresment') }}</text>{{$t('bank.and')}}
+            <text class="agreement-link" @click="viewAgreement(2)">{{ $t('bank.bindcardagreement') }}</text>
+          </text>
+        </label>
+      </view>
+      
+      <!-- 提交按钮 -->
+      <button 
+        class="submit-btn"
+        :disabled="!canSubmit"
+        @click="handleSubmit"
+      >
+    {{ $t('bank.submit') }}
+      </button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      formData: {
+        cardNumber: '',
+        bankCode: '',
+        cardHolder: '',
+        idCard: '',
+        phone: '',
+        smsCode: '',
+        agreed: false
+      },
+      bankList: [
+        { name: '中国工商银行', code: 'ICBC', logo: '/static/bank/icbc.png' },
+        { name: '中国建设银行', code: 'CCB', logo: '/static/bank/ccb.png' },
+        { name: '中国银行', code: 'BOC', logo: '/static/bank/boc.png' },
+        { name: '中国农业银行', code: 'ABC', logo: '/static/bank/abc.png' },
+        { name: '招商银行', code: 'CMB', logo: '/static/bank/cmb.png' },
+        { name: '交通银行', code: 'BOCOM', logo: '/static/bank/bocom.png' }
+      ],
+      bankIndex: 0,
+      bankInfo: {},
+      isCounting: false,
+      countdown: 60,
+      timer: null
+    }
+  },
+  computed: {
+    smsBtnText() {
+      return this.isCounting ? `${this.countdown}s后重新获取` : '获取验证码'
+    },
+    canSendSms() {
+      return /^1[3-9]\d{9}$/.test(this.formData.phone)
+    },
+    canSubmit() {
+      return (
+        this.formData.cardNumber.replace(/\s/g, '').length >= 16 &&
+        this.formData.bankCode &&
+        this.formData.cardHolder &&
+        /^\d{17}[\dXx]$/.test(this.formData.idCard) &&
+        /^1[3-9]\d{9}$/.test(this.formData.phone) &&
+        /^\d{6}$/.test(this.formData.smsCode) &&
+        this.formData.agreed
+      )
+    }
+  },
+  methods: {
+    // 返回上一页
+   navigateBack() {
+      uni.navigateBack({
+        delta: 1
+      })
+    },
+    
+    // 格式化银行卡号
+    formatCardNumber(e) {
+      let value = e.detail.value.replace(/\s/g, '')
+      if (value.length > 0) {
+        value = value.match(/.{1,4}/g).join(' ')
+      }
+      this.formData.cardNumber = value
+      
+      // 检测银行
+      if (value.replace(/\s/g, '').length >= 6) {
+        this.detectBank(value.replace(/\s/g, ''))
+      } else {
+        this.bankInfo = {}
+      }
+    },
+    
+    // 检测银行
+    detectBank(cardNumber) {
+      // 实际项目调用银行卡BIN接口
+      const binMap = {
+        '622202': 'ICBC',
+        '622588': 'CMB',
+        '622700': 'CCB',
+        '621661': 'BOC',
+        '622848': 'ABC',
+        '622260': 'BOCOM'
+      }
+      
+      const bin = cardNumber.substring(0, 6)
+      const bankCode = binMap[bin]
+      
+      if (bankCode) {
+        const bank = this.bankList.find(item => item.code === bankCode)
+        if (bank) {
+          this.bankInfo = bank
+          this.formData.bankCode = bankCode
+          this.bankIndex = this.bankList.findIndex(item => item.code === bankCode)
+        }
+      }
+    },
+    
+    // 选择银行
+    handleBankChange(e) {
+      this.bankIndex = e.detail.value
+      this.formData.bankCode = this.bankList[this.bankIndex].code
+      this.bankInfo = this.bankList[this.bankIndex]
+    },
+    
+    // 发送验证码
+    handleSendSms() {
+      if (!this.canSendSms) {
+        uni.showToast({
+          title: '请输入正确的手机号',
+          icon: 'none'
+        })
+        return
+      }
+      
+      uni.showLoading({ title: '发送中...' })
+      
+      // 模拟发送验证码
+      setTimeout(() => {
+        uni.hideLoading()
+        uni.showToast({
+          title: '验证码已发送',
+          icon: 'success'
+        })
+        this.startCountdown()
+      }, 1500)
+    },
+    
+    // 开始倒计时
+    startCountdown() {
+      this.isCounting = true
+      this.countdown = 60
+      
+      this.timer = setInterval(() => {
+        this.countdown--
+        
+        if (this.countdown <= 0) {
+          clearInterval(this.timer)
+          this.isCounting = false
+        }
+      }, 1000)
+    },
+    
+    // 查看协议
+    viewAgreement(type) {
+      const url = type === 1 ? '/pages/agreement/user' : '/pages/agreement/bank'
+      uni.navigateTo({ url })
+    },
+    
+    // 提交表单
+    handleSubmit() {
+      if (!this.validateForm()) return
+      
+      uni.showLoading({ title: '绑定中...' })
+      
+      // 模拟API请求
+      setTimeout(() => {
+        uni.hideLoading()
+        uni.showToast({
+          title: '绑定成功',
+          icon: 'success'
+        })
+        
+        setTimeout(() => {
+          uni.navigateBack()
+        }, 1500)
+      }, 2000)
+    },
+    
+    // 表单验证
+    validateForm() {
+      if (!this.formData.cardNumber || this.formData.cardNumber.replace(/\s/g, '').length < 16) {
+        uni.showToast({ title: '请输入正确的银行卡号', icon: 'none' })
+        return false
+      }
+      
+      if (!this.formData.bankCode) {
+        uni.showToast({ title: '请选择银行', icon: 'none' })
+        return false
+      }
+      
+      if (!this.formData.cardHolder) {
+        uni.showToast({ title: '请输入持卡人姓名', icon: 'none' })
+        return false
+      }
+      
+      if (!/^\d{17}[\dXx]$/.test(this.formData.idCard)) {
+        uni.showToast({ title: '请输入正确的身份证号', icon: 'none' })
+        return false
+      }
+      
+      if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) {
+        uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
+        return false
+      }
+      
+      if (!/^\d{6}$/.test(this.formData.smsCode)) {
+        uni.showToast({ title: '请输入正确的验证码', icon: 'none' })
+        return false
+      }
+      
+      if (!this.formData.agreed) {
+        uni.showToast({ title: '请先阅读并同意协议', icon: 'none' })
+        return false
+      }
+      
+      return true
+    }
+  },
+  beforeDestroy() {
+    if (this.timer) {
+      clearInterval(this.timer)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bank-card-bind {
+  background-color: #f7f7f7;
+  min-height: 100vh;
+  padding-bottom: 40rpx;
+}
+
+.nav-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20rpx;
+  padding-top: var(--status-bar-height);
+  
+  .back-btn {
+    width: 100rpx;
+    height: 100rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    image {
+      width: 40rpx;
+      height: 40rpx;
+      filter: invert(1);
+    }
+  }
+  
+  .title {
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #333;
+    flex: 1;
+    text-align: center;
+  }
+  
+  .right-placeholder {
+    width: 60rpx;
+  }
+}
+
+.form-container {
+  padding: 30rpx;
+}
+
+.form-item {
+  margin-bottom: 30rpx;
+  
+  .form-label {
+    display: block;
+    font-size: 28rpx;
+    color: #666;
+    margin-bottom: 20rpx;
+    font-weight: 500;
+  }
+  
+  .input-container {
+    position: relative;
+    
+    .card-input {
+      height: 90rpx;
+      background-color: #fff;
+      border-radius: 12rpx;
+      padding: 0 30rpx;
+      font-size: 32rpx;
+      border: 1rpx solid #eee;
+      width: 100%;
+      box-sizing: border-box;
+    }
+    
+    .bank-logo {
+      position: absolute;
+      right: 20rpx;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 50rpx;
+      height: 50rpx;
+    }
+  }
+  
+  .picker {
+    height: 90rpx;
+    line-height: 90rpx;
+    background-color: #fff;
+    border-radius: 12rpx;
+    padding: 0 30rpx;
+    font-size: 32rpx;
+    border: 1rpx solid #eee;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .common-input {
+    height: 90rpx;
+    background-color: #fff;
+    border-radius: 12rpx;
+    padding: 0 30rpx;
+    font-size: 32rpx;
+    border: 1rpx solid #eee;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  
+  .sms-container {
+    display: flex;
+    
+    .sms-input {
+      flex: 1;
+      height: 90rpx;
+      background-color: #fff;
+      border-radius: 12rpx;
+      padding: 0 30rpx;
+      font-size: 32rpx;
+      border: 1rpx solid #eee;
+      margin-right: 20rpx;
+    }
+    
+    .sms-btn {
+      width: 220rpx;
+      height: 90rpx;
+      line-height: 90rpx;
+      font-size: 28rpx;
+      background-color: #f0f7ff;
+      color: #2979FF;
+      border-radius: 12rpx;
+      margin: 0;
+      padding: 0;
+      
+      &[disabled] {
+        background-color: #f5f5f5;
+        color: #999;
+      }
+    }
+  }
+}
+
+.agreement {
+  margin: 40rpx 0;
+  
+  .agreement-item {
+    display: flex;
+    align-items: center;
+    font-size: 26rpx;
+  }
+  
+  .agreement-text {
+    color: #666;
+    margin-left: 10rpx;
+  }
+  
+  .agreement-link {
+    color: #2979FF;
+  }
+}
+
+.submit-btn {
+  height: 90rpx;
+  line-height: 90rpx;
+  background-color: #2979FF;
+  color: #fff;
+  font-size: 34rpx;
+  border-radius: 45rpx;
+  margin-top: 20rpx;
+  
+  &[disabled] {
+    background-color: #a0c0ff;
+  }
+}
+</style>

src/pages/more/bank.vue

@@ -0,0 +1,284 @@
+<template>
+  <view class="container">
+    <!-- 头部导航 -->
+    <view class="nav-bar">
+      <view class="back-btn" @click="navigateBack">
+        <image  src="/src/static/pic/mark/more-left.png" mode="aspectFit"></image>
+      </view>
+      <text class="title">{{ $t('bank.myBank') }}</text>
+      <view class="right-placeholder"></view>
+    </view>
+    
+    <view class="header">
+      <text class="subtitle">{{$t('bank.bind')}} {{cards.length}} {{ $t('bank.bankcard') }}</text>
+    </view>
+    
+    <!-- 银行卡列表 -->
+    <scroll-view class="card-list" scroll-y>
+      <!-- 添加新卡 -->
+      <view class="card-item add-card" @click="navigateToBind">
+        <view class="add-icon">+</view>
+        <text class="add-text">{{ $t('bank.addcard') }}</text>
+      </view>
+      
+      <!-- 已绑定银行卡 -->
+      <view 
+        class="card-item" 
+        v-for="(card, index) in cards" 
+        :key="index"
+        :style="{background: getCardBg(card.bankCode)}"
+        @click="viewCardDetail(card)"
+        @longpress="onLongPress(card)"
+      >
+        <view class="card-top">
+          <text class="bank-name">{{card.bankName}}</text>
+        </view>
+        <view class="card-middle">
+          <text class="card-type">{{card.cardType}}</text>
+        </view>
+        <view class="card-bottom">
+          <text class="card-number">**** **** **** {{card.cardNumber.slice(-4)}}</text>
+        </view>
+      </view>
+    </scroll-view>
+    
+    <!-- 操作提示 -->
+    <view class="tips">
+      <text>{{$t('bank.longpressTip')}}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      cards: [
+        {
+          id: '1',
+          bankName: '中国工商银行',
+          bankCode: 'ICBC',
+          cardNumber: '6222021234567890123',
+          cardType: '储蓄卡',
+          cardHolder: '张三',
+          phone: '138****1234',
+          bindTime: '2023-01-01'
+        },
+        {
+          id: '2',
+          bankName: '招商银行',
+          bankCode: 'CMB',
+          cardNumber: '6225881234567890',
+          cardType: '信用卡',
+          cardHolder: '张三',
+          phone: '138****1234',
+          bindTime: '2023-02-15'
+        }
+      ]
+    }
+  },
+  methods: {
+    // 返回上一页
+    navigateBack() {
+      uni.navigateBack({
+        delta: 1
+      })
+    },
+    
+    // 获取银行卡背景色
+    getCardBg(bankCode) {
+      const colorMap = {
+        'ICBC': 'linear-gradient(135deg, #c33a3a, #e05a5a)',
+        'CCB': 'linear-gradient(135deg, #1a6fc9, #3a8de0)',
+        'BOC': 'linear-gradient(135deg, #c32136, #e04154)',
+        'ABC': 'linear-gradient(135deg, #019858, #03a65a)',
+        'CMB': 'linear-gradient(135deg, #c60a1e, #e62a3d)',
+        'BOCOM': 'linear-gradient(135deg, #003366, #004080)',
+        'default': 'linear-gradient(135deg, #666666, #888888)'
+      }
+      return colorMap[bankCode] || colorMap['default']
+    },
+    
+    // 跳转到绑定页面
+    navigateToBind() {
+      uni.navigateTo({
+        url: '/pages/more/addbankCard'
+      })
+    },
+    
+    // 查看银行卡详情
+    viewCardDetail(card) {
+      uni.navigateTo({
+        url: `/pages/more/detail?id=${card.id}`
+      })
+    },
+    
+    // 长按解绑
+    onLongPress(card) {
+      uni.showModal({
+        title: '解绑银行卡',
+        content: `确定要解绑${card.bankName}尾号${card.cardNumber.slice(-4)}的银行卡吗？`,
+        success: (res) => {
+          if (res.confirm) {
+            this.unbindCard(card.id)
+          }
+        }
+      })
+    },
+    
+    // 解绑银行卡
+    unbindCard(cardId) {
+      uni.showLoading({ title: '处理中...' })
+      
+      // 模拟API请求
+      setTimeout(() => {
+        this.cards = this.cards.filter(card => card.id !== cardId)
+        uni.hideLoading()
+        uni.showToast({
+          title: '解绑成功',
+          icon: 'success'
+        })
+      }, 1000)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  padding: 20rpx 30rpx;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+/* 导航栏样式 */
+.nav-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20rpx;
+  padding-top: var(--status-bar-height);
+  
+  .back-btn {
+    width: 100rpx;
+    height: 100rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    image {
+      width: 40rpx;
+      height: 40rpx;
+      filter: invert(1);
+    }
+  }
+  
+  .title {
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #333;
+    flex: 1;
+    text-align: center;
+  }
+  
+  .right-placeholder {
+    width: 60rpx;
+  }
+}
+
+.header {
+  margin-bottom: 40rpx;
+  
+  .subtitle {
+    font-size: 28rpx;
+    color: #999;
+  }
+}
+
+.card-list {
+  height: calc(100vh - 260rpx);
+  
+  .card-item {
+    height: 240rpx;
+    border-radius: 20rpx;
+    padding: 30rpx;
+    margin-bottom: 30rpx;
+    color: #fff;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
+    
+    &.add-card {
+      background-color: #fff;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      border: 2rpx dashed #ccc;
+      
+      .add-icon {
+        font-size: 60rpx;
+        color: #2979FF;
+        margin-bottom: 20rpx;
+      }
+      
+      .add-text {
+        font-size: 32rpx;
+        color: #2979FF;
+      }
+    }
+    
+    .bank-logo {
+      width: 60rpx;
+      height: 60rpx;
+      margin-right: 20rpx;
+    }
+    
+    .card-top {
+      display: flex;
+      align-items: center;
+      margin-bottom: 30rpx;
+      
+      .bank-name {
+        font-size: 36rpx;
+        font-weight: bold;
+      }
+    }
+    
+    .card-middle {
+      margin-bottom: 40rpx;
+      
+      .card-type {
+        font-size: 28rpx;
+        background: rgba(255, 255, 255, 0.2);
+        padding: 6rpx 16rpx;
+        border-radius: 20rpx;
+      }
+    }
+    
+    .card-bottom {
+      .card-number {
+        font-size: 36rpx;
+        letter-spacing: 2rpx;
+      }
+    }
+    
+    &::after {
+      content: '';
+      position: absolute;
+      top: -50rpx;
+      right: -50rpx;
+      width: 200rpx;
+      height: 200rpx;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 50%;
+    }
+  }
+}
+
+.tips {
+  text-align: center;
+  font-size: 24rpx;
+  color: #999;
+  margin-top: 30rpx;
+}
+</style>

src/pages/more/bankCardDetail.vue

@@ -0,0 +1,292 @@
+<template>
+  <view class="container">
+    <!-- 头部导航 -->
+    <view class="nav-bar">
+      <view class="back-btn" @click="navigateBack">
+        <image src="/src/static/pic/mark/more-left.png" mode="aspectFit"></image>
+      </view>
+      <text class="title">{{$t('bank.cardDetail')}}</text>
+      <view class="right-placeholder"></view>
+    </view>
+    
+    <!-- 银行卡展示 -->
+    <view 
+      class="card-display"
+      :style="{background: getCardBg(card.bankCode)}"
+    >
+      <view class="card-top">
+        <image class="bank-logo" :src="card.bankLogo" mode="aspectFit"></image>
+        <text class="bank-name">{{card.bankName}}</text>
+      </view>
+      <view class="card-middle">
+        <text class="card-type">{{card.cardType}}</text>
+      </view>
+      <view class="card-bottom">
+        <text class="card-number">{{formatCardNumber(card.cardNumber)}}</text>
+      </view>
+    </view>
+    
+    <!-- 银行卡信息 -->
+    <view class="card-info">
+      <view class="info-item">
+        <text class="info-label">{{$t('bank.cardperson')}}</text>
+        <text class="info-value">{{card.cardHolder}}</text>
+      </view>
+      <view class="info-item">
+        <text class="info-label">{{$t('bank.cardphone')}}</text>
+        <text class="info-value">{{card.phone}}</text>
+      </view>
+      <view class="info-item">
+        <text class="info-label">{{ $t('bank.bindtime') }}</text>
+        <text class="info-value">{{card.bindTime}}</text>
+      </view>
+    </view>
+    
+    <!-- 解绑按钮 -->
+    <view class="action-btn" @click="showUnbindDialog">
+      <text>{{$t(bank.unbindcard)}}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      card: {
+        id: '',
+        bankName: '加载中...',
+        bankCode: '',
+        bankLogo: '',
+        cardNumber: '',
+        cardType: '',
+        cardHolder: '',
+        phone: '',
+        bindTime: '2023-01-01 12:00:00'
+      }
+    }
+  },
+  onLoad(options) {
+    if (options.id) {
+      // 模拟数据 - 实际项目中应该从服务器获取
+      this.card = {
+        id: options.id,
+        bankName: options.id === '1' ? 'this.$t("bank.ICBC")' : 'this.$t("bank.CMB")',
+        bankCode: options.id === '1' ? 'ICBC' : 'CMB',
+        bankLogo: options.id === '1' ? '/static/bank/icbc.png' : '/static/bank/cmb.png',
+        cardNumber: options.id === '1' ? '6222021234567890123' : '6225881234567890',
+        cardType: options.id === '1' ? '储蓄卡' : '信用卡',
+        cardHolder: '张三',
+        phone: '138****1234',
+        bindTime: options.id === '1' ? '2023-01-01 12:00:00' : '2023-02-15 14:30:00'
+      }
+    }
+  },
+  methods: {
+    // 返回上一页
+    navigateBack() {
+      uni.navigateBack({
+        delta: 1
+      })
+    },
+    
+    // 获取银行卡背景色
+    getCardBg(bankCode) {
+      const colorMap = {
+        'ICBC': 'linear-gradient(135deg, #c33a3a, #e05a5a)',
+        'CCB': 'linear-gradient(135deg, #1a6fc9, #3a8de0)',
+        'BOC': 'linear-gradient(135deg, #c32136, #e04154)',
+        'ABC': 'linear-gradient(135deg, #019858, #03a65a)',
+        'CMB': 'linear-gradient(135deg, #c60a1e, #e62a3d)',
+        'BOCOM': 'linear-gradient(135deg, #003366, #004080)',
+        'default': 'linear-gradient(135deg, #666666, #888888)'
+      }
+      return colorMap[bankCode] || colorMap['default']
+    },
+    
+    // 格式化银行卡号
+    formatCardNumber(number) {
+      if (!number) return ''
+      return number.replace(/(\d{4})(?=\d)/g, '$1 ')
+    },
+    
+    // 显示解绑对话框
+    showUnbindDialog() {
+      uni.showModal({
+        title: '解绑银行卡',
+        content: `确定要解绑${this.card.bankName}尾号${this.card.cardNumber.slice(-4)}的银行卡吗？`,
+        success: (res) => {
+          if (res.confirm) {
+            this.unbindCard()
+          }
+        }
+      })
+    },
+    
+    // 解绑银行卡
+    unbindCard() {
+      uni.showLoading({ title: '解绑中...' })
+      
+      // 模拟API请求
+      setTimeout(() => {
+        uni.hideLoading()
+        uni.showToast({
+          title: '解绑成功',
+          icon: 'success'
+        })
+        
+        // 返回上一页并刷新
+        const pages = getCurrentPages()
+        if (pages.length > 1) {
+          const prevPage = pages[pages.length - 2]
+          prevPage.$vm.getBankCards && prevPage.$vm.getBankCards()
+        }
+        
+        setTimeout(() => {
+          uni.navigateBack()
+        }, 1500)
+      }, 1000)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  padding: 20rpx 30rpx;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+/* 导航栏样式 */
+.nav-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 40rpx;
+  padding-top: var(--status-bar-height);
+  
+  .back-btn {
+    width: 60rpx;
+    height: 60rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    image {
+      width: 40rpx;
+      height: 40rpx;
+      filter: invert(1);
+    }
+  }
+  
+  .title {
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #333;
+    flex: 1;
+    text-align: center;
+  }
+  
+  .right-placeholder {
+    width: 60rpx;
+  }
+}
+
+.card-display {
+  height: 300rpx;
+  border-radius: 20rpx;
+  padding: 40rpx;
+  margin-bottom: 40rpx;
+  color: #fff;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
+  
+  .bank-logo {
+    width: 80rpx;
+    height: 80rpx;
+    margin-right: 20rpx;
+  }
+
+  .card-top {
+    display: flex;
+    align-items: center;
+    margin-bottom: 40rpx;
+    
+    .bank-name {
+      font-size: 40rpx;
+      font-weight: bold;
+    }
+  }
+  
+  .card-middle {
+    margin-bottom: 50rpx;
+    
+    .card-type {
+      font-size: 32rpx;
+      background: rgba(255, 255, 255, 0.2);
+      padding: 8rpx 20rpx;
+      border-radius: 24rpx;
+    }
+  }
+  
+  .card-bottom {
+    .card-number {
+      font-size: 44rpx;
+      letter-spacing: 4rpx;
+    }
+  }
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: -60rpx;
+    right: -60rpx;
+    width: 240rpx;
+    height: 240rpx;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+  }
+}
+
+.card-info {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 0 30rpx;
+  margin-bottom: 40rpx;
+  
+  .info-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100rpx;
+    border-bottom: 1rpx solid #f0f0f0;
+    
+    &:last-child {
+      border-bottom: none;
+    }
+    
+    .info-label {
+      font-size: 30rpx;
+      color: #666;
+    }
+    
+    .info-value {
+      font-size: 30rpx;
+      color: #333;
+    }
+  }
+}
+
+.action-btn {
+  height: 90rpx;
+  line-height: 90rpx;
+  text-align: center;
+  background-color: #fff;
+  border-radius: 45rpx;
+  color: #ff3b30;
+  font-size: 32rpx;
+  margin-top: 40rpx;
+}
+</style>

src/pages/more/index.vue

@@ -21,8 +21,8 @@
     
     <!-- 功能菜单列表 -->
     <view class="menu-list">
-      <!-- 银行卡 -->
+      <!-- 银行卡   路径已修改 -->
-      <view class="menu-item" @click="navigateTo('/pages/user/bankCard')">
+      <view class="menu-item" @click="navigateTo('/pages/more/bank')">
         <view class="item-left">
           <uni-icons type="wallet" size="20" color="#4a7dff"></uni-icons>
           <text class="text">{{ $t('more.bankcard') }}</text>
@@ -41,7 +41,7 @@
         </view>
         <view class="item-right">
           <text class="tips" :style="{color: userInfo.authStatus === 1 ? '#4a7dff' : '#ff5a5f'}">
-            {{authStatusText[userInfo.authStatus] || $t('more.not_authenticated')}}
+            {{ $t(`auth.status_${userInfo.authStatus}`) || $t('auth.not_authenticated')  }} 
           </text>
           <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
         </view>
@@ -128,16 +128,10 @@ export default {
         nickname: '张三',
         phone: '13800138000',
         bankCardCount: 2,
-        authStatus: 1, // 0-未认证 1-已认证 2-认证中 3-认证失败
+        authStatus: 1,
         language: 'zh',
         isLogin: true
       },
-      authStatusText: {
-        0: this.$t('more.not_authenticated'),
-        1: this.$t('more.authenticated'),
-        2: this.$t('more.authenticating'),
-        3: this.$t('more.auth_failed')
-      },
       languageOptions: {
         'zh': 'Chinese',
         'en': 'English',

src/static/lang/enUS.json

@@ -1,4 +1,5 @@
 {
+  "nullData": "No data available",
   // Login
   "index.Loading": "Loading...",
   "index.errMsg": "Failed to load",
@@ -10,7 +11,7 @@
   "login.appTitle": "European Stock Software",
   "login.rememberPassword": "Remember password",
   "login.forgotPassword": "Forgot password",
-  "login.agreeTermsPrefix": "I have read and agree to the",
+  "login.agreeTermsPrefix": "I have read and agree to",
   "login.agreeTermsSuffix": "User Agreement",
   "login.userAgreement": "User Agreement",
   "login.and": "and",
@@ -19,10 +20,10 @@
   "login.noAccount": "No account?",
   "login.languagechangeclose": "Done",
   "login.chooseLanguage": "Select Language",
-  "login.changelanguage": "Change Language",
+  "login.changelanguage": "Switch Language",
-  "login.errors.agreeTermsFirst": "Please agree to the User Agreement and Privacy Policy first",
+  "login.errors.agreeTermsFirst": "Please agree to User Agreement and Privacy Policy first",
   "login.errors.emptyUsername": "Please enter username",
-  "login.errors.invalidIdCard": "Please enter the last 6 digits of your ID card correctly",
+  "login.errors.invalidIdCard": "Please enter correct last 6 digits of ID card",
   "login.errors.emptyPassword": "Please enter password",
 
   // Registration
@@ -31,13 +32,13 @@
   "register.appTitle": "European Stock Software",
   "register.registerDesc": "Create an account to continue",
   "register.idCardLabel": "Last 6 digits of ID card",
-  "register.idCardPlaceholder": "Please enter the last 6 digits of ID card",
+  "register.idCardPlaceholder": "Please enter last 6 digits of ID card",
   "register.errors.emptyIdCard": "Please enter ID card number",
   "register.passwordLabel": "Password",
   "register.passwordTip": "Password must be at least 6 characters",
   "register.passwordPlaceholder": "Please enter password",
   "register.confirmPasswordLabel": "Confirm Password",
-  "register.confirmPasswordPlaceholder": "Please enter password again",
+  "register.confirmPasswordPlaceholder": "Please confirm password again",
   "register.inviteCodeLabel": "Invitation Code",
   "register.inviteCodePlaceholder": "Please enter invitation code",
   "register.emailLabel": "Email",
@@ -47,12 +48,12 @@
   "register.errors.invalidPassword": "Password must be at least 8 characters with both letters and numbers",
   "register.errors.emptyPassword": "Password cannot be empty",
   "register.errors.confirmPasswordRequired": "Please enter password again",
-  "register.errors.invalidEmail": "Please enter a valid email",
+  "register.errors.invalidEmail": "Please enter valid email",
-  "register.errors.passwordMismatch": "Passwords do not match",
+  "register.errors.passwordMismatch": "Passwords don't match",
-  "register.errors.invalidIdCard": "Please enter correct ID card number",
+  "register.errors.invalidIdCard": "Please enter valid ID card number",
-  "register.errors.agreeTermsFirst": "Please read and agree to the User Agreement and Privacy Policy first",
+  "register.errors.agreeTermsFirst": "Please read and agree to User Agreement and Privacy Policy first",
   "register.registerProcessing": "Registering...",
-  "register.agreeTermsPrefix": "I have read and agree to the",
+  "register.agreeTermsPrefix": "I have read and agree to",
   "register.userAgreement": "User Agreement",
   "register.and": "and",
   "register.privacyPolicy": "Privacy Policy",
@@ -69,30 +70,54 @@
   "more.setting.title": "Settings",
   "more.nologin": "Not logged in",
   "more.clicklogin": "Click to login",
-  "more.bankcard": "Bank Cards",
+  "more.bankcard": "Bank Card",
   "more.authentication": "Real-name Authentication",
-  "more.not_authenticated": "Not authenticated",
+  "auth.status_0": "Not authenticated",
-  "more.authenticated": "Authenticated",
+  "auth.status_1": "Authenticated",
-  "more.authenticating": "Authenticating",
+  "auth.status_2": "Authenticating",
-  "more.auth_failed": "Authentication failed",
+  "auth.status_3": "Authentication failed",
   "more.changePassword": "Change Password",
-  "more.customerService": "Customer Service",
+  "more.customerService": "Online Support",
   "more.languagesettings": "Language Settings",
   "more.logout": "Logout",
   "more.selectlanguage": "Select Language",
   "more.languageChanged": "Language changed to",
   "more.close": "Close",
-  "more.confirmLogout": "Are you sure you want to logout?",
+  "more.confirmLogout": "Are you sure to logout?",
 
-  // Common
+  "common.tip": "Notice",
-  "common.tip": "Tip",
   "common.loggingOut": "Logging out...",
   "common.logoutSuccess": "Logout successful",
 
-  // TabBar
+  // Bottom tab bar
   "tabBar.index": "Home",
   "tabBar.market": "Funds",
   "tabBar.trade": "Stocks",
   "tabBar.assets": "Assets",
-  "tabBar.more": "More"
+  "tabBar.more": "More",
+
+  // Bank card
+  "bank.myBank": "My Bank Cards",
+  "bank.bind": "Bound",
+  "bank.bankcard": "Bank Card",
+  "bank.addcard": "Add Bank Card",
+  "bank.longpressTip": "Tap to view details, long press to unbind",
+  "bank.cardDetail": "Bank Card Details",
+  "bank.cardperson": "Cardholder",
+  "bank.cardphone": "Reserved Phone",
+  "bank.bindtime": "Binding Time",
+  "bank.unbindcard": "Unbind Bank Card",
+  "bank.bindCard": "Bind Bank Card",
+  "bank.bankcardnum": "Bank Card Number",
+  "bank.bankname": "Bank Name",
+  "bank.cardpersonname": "Cardholder Name",
+  "bank.idCard": "ID Card Number",
+  "bank.bankvericode": "Verification Code",
+  "bank.readagreement": "I have read and agree to",
+  "bank.useragresment": "User Agreement",
+  "bank.and": "and",
+  "bank.bindcardagreement": "Bank Card Binding Agreement",
+  "bank.submit": "Submit",
+  "bank.ICBC": "Industrial and Commercial Bank of China",
+  "bank.CMB": "China Merchants Bank"
 }

src/static/lang/zh_CN.json

@@ -78,10 +78,10 @@
   "more.clicklogin":"点击登录",
   "more.bankcard":"银行卡",
   "more.authentication":"实名认证",
-  "more.not_authenticated":"未认证",
+  "auth.status_0":"未认证",
-  "more.authenticated":"已认证",
+  "auth.status_1":"已认证",
-  "more.authenticating":"认证中",
+  "auth.status_2":"认证中",
-  "more.auth_failed":"认证失败",
+  "auth.status_3":"认证失败",
   "more.changePassword":"修改密码",
   "more.customerService":"在线客服",
   "more.languagesettings":"语言设置",
@@ -95,12 +95,37 @@
   "common.loggingOut":"正在退出登录...",
   "common.logoutSuccess":"退出登录成功",
 
+  //首页底部导航栏
   "tabBar.index":"首页",
   "tabBar.market":"基金",
   "tabBar.trade":"股票",
   "tabBar.assets":"资产" ,
-  "tabBar.more":"更多"
+  "tabBar.more":"更多",
 
+  //银行卡
+  "bank.myBank":"我的银行卡",
+  "bank.bind":"已绑定",
+  "bank.bankcard":"银行卡",
+  "bank.addcard":"添加银行卡",
+  "bank.longpressTip":"点击卡片查看详情，长按可解绑",
+  "bank.cardDetail":"银行卡详情",
+  "bank.cardperson":"持卡人",
+  "bank.cardphone":"预留手机号",
+  "bank.bindtime":"绑定时间",
+  "bank.unbindcard":"解绑银行卡",
+  "bank.bindCard":"绑定银行卡",
+  "bank.bankcardnum":"银行卡号",
+  "bank.bankname":"银行名称",
+  "bank.cardpersonname":"持卡人姓名",
+  "bank.idCard":"身份证号",
+  "bank.bankvericode":"验证码",
+  "bank.readagreement":"我已阅读并同意",
+  "bank.useragresment":"用户协议",
+  "bank.and":"和",
+  "bank.bindcardagreement":"《银行卡绑定协议》",
+  "bank.submit":"提交",
+  "bank.ICBC":"中国工商银行",
+  "bank.CMB":"招商银行"