wxapp_shuibei/pages/users/card_page/index.vue

<template>
  <view class="bank-manage-container">
    <!-- 银行卡列表 -->
    <view class="card-list">
      <view
        v-for="(card, index) in bankCards"
        :key="index"
        :class="['bank-card', selectedCard?.id === card.id ? 'active' : '']"
        @click="selectCard(card)"
      >
        <view class="card-content">
          <view class="bank-info">
            <view class="bank-icon">
              <!-- <uni-icons
                size="30"
                customPrefix="iconfont"
                class="icon-yinhangqia"
              ></uni-icons> -->

              <uni-icons
                size="35"
                :color="card.accountType === 1 ? '#F2CC51' : '#019FE8'"
                customPrefix="iconfont"
                :class="[
                  card.accountType === 1 ? 'icon-qianbao' : 'icon-zhifubao',
                ]"
              ></uni-icons>
            </view>
            <view class="bank-details">
              <view class="bank-name">{{ card.accountType === 1 ? card.bankName : card.accountName }}</view>
              <view class="card-number">{{
                formatCardNumber(card.accountNumber)
              }}</view>
            </view>
          </view>
          <view class="right-box">
            <view class="icon-box" @click.stop="editCard(card)">
              <uni-icons size="25" color="#fff" type="compose"></uni-icons>
            </view>
            <view class="icon-box delete" @click.stop="deleteCard(card)">
              <uni-icons size="25" color="#fff" type="trash-filled"></uni-icons>
            </view>
          </view>
        </view>
        <!-- <view class="card-selected" v-if="selectedCard?.id === card.id">
          <text class="check-icon">✓</text>
        </view> -->
      </view>
    </view>

    <!-- 新增卡片按钮 -->
    <view class="add-card-section">
      <button class="add-card-btn" @click="addNewCard">
        <text class="add-icon">+</text>
        <text class="add-text">新增卡片</text>
      </button>
    </view>

    <up-modal
      :show="showDeleteModal"
      title="确认删除"
      content="确定要删除该银行卡吗？"
      :showCancelButton="true"
      @confirm="confirmDeleteCard"
      @cancel="showDeleteModal = false"
      @close="showDeleteModal = false"
    />
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { getAccountList, deleteAccount, saveAccount } from "@/api/user";

const bankCards = ref([]);

const selectedCard = ref();
const isEditing = ref(false);
const currentEditIndex = ref(-1);

const cardForm = reactive({
  bankName: "",
  cardNumber: "",
  holderName: "",
});

const showDeleteModal = ref(false);
const cardToDelete = ref(null);

onShow(() => {
  fetchAccountList();
});


async function fetchAccountList() {
  try {
    const { data } = await getAccountList();
    bankCards.value = data;
    selectedCard.value = data.find(v => v.isDefault)
    console.log('selectedCard', selectedCard.value)
  } catch (error) {
    console.error("getAccountList", error);
  }
}

const formatCardNumber = (cardNumber) => {
  // 显示卡号，只显示后4位，其他用*代替
  if (cardNumber.length <= 4) return cardNumber;
  const lastFour = cardNumber.slice(-4);
  return `****${lastFour}`;
};

const selectCard = async (card) => {
  const params = {
    id: card.id,
    isDefault: 1
  }
  await saveAccount(params)
  selectedCard.value = card;
  // 可以在这里添加选中卡片的逻辑
  uni.showToast({
    title: "已设为默认",
    icon: "success",
  });
};

const editCard = (card) => {
  const queryStr = `id=${card.id}&bankName=${card.bankName}&accountNumber=${card.accountNumber}&accountType=${card.accountType}&name=${card.accountName}&isDefault=${card.isDefault}`;
  uni.navigateTo({
    url: `/pages/users/card_page/create?${queryStr}`,
  });
  isEditing.value = true;
  currentEditIndex.value = bankCards.value.findIndex((c) => c.id === card.id);
  cardForm.bankName = card.bankName;
  cardForm.cardNumber = card.cardNumber;
  cardForm.holderName = card.holderName;
};

// 修改 deleteCard 方法为弹窗确认
function deleteCard(card) {
  cardToDelete.value = card;
  showDeleteModal.value = true;
}

// 确认删除
async function confirmDeleteCard() {
  if (!cardToDelete.value) return;
  try {
    await deleteAccount(cardToDelete.value.id);
    // 删除成功后刷新列表
    fetchAccountList();
    uni.showToast({ title: "删除成功", icon: "success" });
  } catch (e) {
    uni.showToast({ title: "删除失败", icon: "none" });
  } finally {
    showDeleteModal.value = false;
    cardToDelete.value = null;
  }
}

const addNewCard = () => {
	console.log('create')
  uni.navigateTo({ url: "/pages/users/card_page/create" });
  isEditing.value = false;
  cardForm.bankName = "";
  cardForm.cardNumber = "";
  cardForm.holderName = "";
};
</script>

<style lang="scss" scoped>
.bank-manage-container {
  min-height: 100vh;
  background: #F9F7F0;

  .card-list {
    padding: 30rpx 30rpx 0;

    .bank-card {
      background: linear-gradient(135deg, #f6b742 0%, #e74c3c 100%);
      border-radius: 24rpx;
      padding: 40rpx 30rpx;
      margin-bottom: 30rpx;
      position: relative;
      overflow: hidden;
      transition: transform 0.2s ease;
      border: 3rpx solid #fff;
      &.active {
        border: 3rpx solid #00c896;
      }

      &::before {
        content: "";
        position: absolute;
        top: -50%;
        right: -30%;
        width: 200rpx;
        height: 200rpx;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
      }

      .card-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        z-index: 2;

        .bank-info {
          display: flex;
          align-items: center;

          .bank-icon {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50rpx;
            background: rgba(255, 255, 255, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 24rpx;

            .icon {
              font-size: 28rpx;
              color: #fff;
            }
          }

          .bank-details {
            .bank-name {
              color: #fff;
              font-size: 32rpx;
              font-weight: 600;
              margin-bottom: 8rpx;
            }

            .card-number {
              color: rgba(255, 255, 255, 0.8);
              font-size: 28rpx;
              font-weight: 400;
              letter-spacing: 2rpx;
            }
          }
        }
        .right-box {
          display: flex;
          align-items: center;
        }

        .icon-box {
          width: 60rpx;
          height: 60rpx;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 12rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background 0.3s ease;
          &.icon-box {
            margin-left: 20rpx;
          }

          &:active {
            background: rgba(255, 255, 255, 0.3);
          }

          .edit-icon {
            color: #fff;
            font-size: 28rpx;
          }
        }
      }

      .card-selected {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        width: 40rpx;
        height: 40rpx;
        background: #4caf50;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3;

        .check-icon {
          color: #fff;
          font-size: 24rpx;
          font-weight: 600;
        }
      }
    }
  }

  .add-card-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFF;
    padding: 20rpx 30rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
    z-index: 5;
    .add-card-btn {
      width: 100%;
      //background: linear-gradient(135deg, #e9c279 0%, #d4a853 100%);
      background: #F8C008;
      color: #333;
      font-size: 32rpx;
      //font-weight: 600;
      //padding: 32rpx 0;
      height: 88rpx;
      line-height: 88rpx;
      border-radius: 16rpx;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      //box-shadow: 0 6rpx 20rpx rgba(233, 194, 121, 0.3);
      //transition: all 0.3s ease;

      &:active {
        transform: translateY(2rpx);
        box-shadow: 0 4rpx 12rpx rgba(233, 194, 121, 0.2);
      }

      .add-icon {
        font-size: 36rpx;
        margin-right: 16rpx;
      }

      .add-text {
        font-size: 30rpx;
      }
    }
  }

  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;

    .modal-content {
      background: #fff;
      border-radius: 24rpx;
      width: 600rpx;
      max-height: 80vh;
      overflow: hidden;

      .modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 40rpx 30rpx 20rpx;
        border-bottom: 1rpx solid #f0f0f0;

        .modal-title {
          color: #333;
          font-size: 32rpx;
          font-weight: 600;
        }

        .modal-close {
          color: #999;
          font-size: 48rpx;
          font-weight: 300;
          line-height: 1;
        }
      }

      .modal-body {
        padding: 30rpx;

        .form-item {
          margin-bottom: 30rpx;

          .form-label {
            display: block;
            color: #333;
            font-size: 28rpx;
            font-weight: 500;
            margin-bottom: 16rpx;
          }

          .form-input {
            width: 100%;
            padding: 24rpx;
            background: #f8f9fa;
            border: 2rpx solid #e9ecef;
            border-radius: 12rpx;
            font-size: 28rpx;
            color: #333;
            transition: border-color 0.3s ease;

            &:focus {
              border-color: #e9c279;
            }

            &::placeholder {
              color: #999;
            }
          }
        }
      }

      .modal-footer {
        display: flex;
        padding: 20rpx 30rpx 30rpx;
        gap: 20rpx;

        .cancel-btn {
          flex: 1;
          background: #f8f9fa;
          color: #666;
          font-size: 28rpx;
          padding: 24rpx 0;
          border-radius: 12rpx;
          border: none;
          transition: background 0.3s ease;

          &:active {
            background: #e9ecef;
          }
        }

        .confirm-btn {
          flex: 1;
          background: linear-gradient(135deg, #e9c279 0%, #d4a853 100%);
          color: #fff;
          font-size: 28rpx;
          padding: 24rpx 0;
          border-radius: 12rpx;
          border: none;
          transition: all 0.3s ease;

          &:active {
            transform: translateY(1rpx);
          }
        }
      }
    }
  }
}
</style>