gypsy-crm-frontend-vu/pages/customer/components/PaymentMethodsList.vue

<template>
  <view class="row">
    <view class="col-lg-3 col-sm-12 cursor-pointer mb-2" v-for="item in list" :key="item.id" :class="{ disabled: item.disabled }" @click="handleClick(item)">
      <view class="card hover">
        <view class="card-header d-flex justify-content-between align-items-center">
          <h4 class="card-title mb-0">{{ item.name }}</h4>
        </view>
        <view class="card-body">
          <image v-if="item.icon" class="img-fluid mb-3 square-box" :src="imgUrl + item.icon" mode="aspectFit" />
          <!-- <image src="/static/images/vu/pay-3.jpg" class="img-fluid mb-3" mode="widthFix" /> -->
          <view v-if="item.payTypeTags && item.payTypeTags.length > 0" class="pay-box img-bg">
            <view class="carousel-box ">
              <!-- 超过3个：轮播 -->
              <view v-if="item.payTypeTags.length > 3" class="carousel-track carousel-animate">
                <view v-for="(icon, index) in item.payTypeTags" :key="index" class="pay-icon-container">
                  <image class="pay-icon" :src="imgUrl + icon" mode="widthFix" />
                </view>
                <view v-for="(icon, index) in item.payTypeTags" :key="`copy-${index}`" class="pay-icon-container">
                  <image class="pay-icon" :src="imgUrl + icon" mode="widthFix" />
                </view>
              </view>

              <!-- 小于等于3个：不轮播 -->
              <view v-else class="carousel-track">
                <view v-for="(icon, index) in item.payTypeTags" :key="index" class="pay-icon-container">
                  <image class="pay-icon" :src="imgUrl + icon" mode="widthFix" />
                </view>
              </view>
            </view>
          </view>
          <view class="mb-3"> <span class="mb-1" v-t="'Label.ProcessingTime'" />
            <p class="text-dark fw-semibold mt-1 mb-0">{{ item.fundingTime || '--' }}</p>
          </view>
          <view class="mb-3"> <span class="mb-2" v-t="'Label.Fee'" />
            <p class="text-dark fw-semibold mt-1 mb-0">
              <text v-if="item.feeType == 1">{{ item.free != null ? item.free + '%' : '-' }}</text>
              <text v-else-if="item.feeType == 2">${{ item.feeAmount != null ? item.feeAmount : '0'
                }}</text>
              <text v-else>{{ item.free != null ? item.free + '%' : '-' }}</text>
            </p>
          </view>
          <view class="mb-3"> <span class="mb-1" v-t="'vu.item8'" />
            <p class="text-dark fw-semibold mt-1 mb-0">{{ item.minAmount }}-{{ item.maxAmount }} {{ item.currency }}</p>
          </view>
<!--          <button @click="handleClick(item)" class="btn btn-dark w-100 waves-effect waves-light"><i class="fi fi-rs-check"></i> <text v-t="'Btn.item13'" /></button>-->
        </view>
      </view>
    </view>
  </view>
  <!-- <view class="payment-list">
    <view v-for="item in list" :key="item.id" class="payment-card" :class="{ disabled: item.disabled }"
      @click="handleClick(item)">
      <view class="icon-wrapper">
        <image class="icon" :src="imgUrl + item.icon" mode="widthFix" />
      </view>
      <view class="content">
        <view class="header">
          <text class="title">{{ item.name }}</text>
          <view v-if="item.payTypeTags && item.payTypeTags.length > 0" class="pay-box">
            <view class="carousel-box">
              超过3个：轮播
              <view v-if="item.payTypeTags.length > 3" class="carousel-track carousel-animate">
                <view v-for="(icon, index) in item.payTypeTags" :key="index" class="pay-icon-container">
                  <image class="pay-icon" :src="imgUrl + icon" mode="widthFix" />
                </view>
                <view v-for="(icon, index) in item.payTypeTags" :key="`copy-${index}`" class="pay-icon-container">
                  <image class="pay-icon" :src="imgUrl + icon" mode="widthFix" />
                </view>
              </view>

              小于等于3个：不轮播
              <view v-else class="carousel-track">
                <view v-for="(icon, index) in item.payTypeTags" :key="index" class="pay-icon-container">
                  <image class="pay-icon" :src="imgUrl + icon" mode="widthFix" />
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="info-list">
          <view class="info-item">
            <text class="info-label" v-t="'Label.ProcessingTime'" />
            <text class="info-value">{{ item.fundingTime || '--' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label" v-t="'Label.Fee'" />
            <text class="info-value" v-if="item.feeType == 1">{{ item.free != null ? item.free + '%' : '-' }}</text>
            <text class="info-value" v-else-if="item.feeType == 2">${{ item.feeAmount != null ? item.feeAmount : '0'
              }}</text>
            <text class="info-value" v-else>{{ item.free != null ? item.free + '%' : '-' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">限制</text>
            <text class="info-value">{{ item.minAmount }}-{{ item.maxAmount }} {{ item.currency }}</text>
          </view>
        </view>
      </view>
    </view>
  </view> -->
</template>

<script setup>
  import { defineProps, defineEmits } from 'vue'
  import Config from '@/config/index'
  const { Code, Host05, Host80 } = Config
  const imgUrl = Host05
  // 定义 props，接收支付方式列表
  const props = defineProps({
    list: {
      type: Array,
      default: () => []
    }
  })

  // 定义事件，点击卡片时触发
  const emit = defineEmits(['select'])

  const handleClick = (item) => {
    if (!item.disabled) {
      emit('select', item)
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/uni.scss";

  .hover:hover{
    border-color: var(--bs-secondary);
  }
  .img-bg{
    padding: 0 px2rpx(10);
    border-radius: px2rpx(10);
    box-sizing: border-box;
    background-color: rgba(243, 244, 246, 0.6);
  }
  .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .card {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .square-box {
    height: px2rpx(64) !important;
  }

  .square-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* 确保按钮始终在底部 */
  .card-body .btn {
    margin-top: auto;
  }

  /* 可选：让卡片内的所有内容区域高度一致 */
  .card-body>*:not(.btn) {
    flex-shrink: 0;
  }

  .payment-list {
    display: grid;
    grid-row-gap: px2rpx(16);
    grid-column-gap: px2rpx(24);
    grid-template-columns: repeat(auto-fill, minmax(px2rpx(480), 1fr));
  }

  .payment-card {
    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
    border-radius: px2rpx(12);
    padding: px2rpx(16);
    display: flex;
    align-items: flex-start;
    border: 1px solid rgba(14, 15, 12, 0.08);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-sizing: border-box;
    gap: px2rpx(16);

    &:hover {
      transform: translateY(px2rpx(-2));
      background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
      box-shadow: 0 px2rpx(8) px2rpx(20) rgba(0, 0, 0, 0.06);
      border-color: var(--color-primary, #007aff);
    }

    &.disabled {
      opacity: 0.5;
      cursor: not-allowed;
      filter: grayscale(100%);
    }

    .icon-wrapper {
      width: px2rpx(120);
      height: px2rpx(120);
      flex-shrink: 0;
      border-radius: px2rpx(8);
      background-color: var(--color-zinc-50, #f9f9f9);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      .icon {
        width: 80%;
      }
    }

    .content {
      flex: 1;
      min-width: 0; // 防止文本溢出

      .header {
        margin-bottom: px2rpx(12);
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
          font-size: px2rpx(16);
          font-weight: 700;
          color: var(--color-navy-900, #1e2a3a);
          word-break: break-all;
          flex: 1;
          margin-right: px2rpx(12);
        }



      }

      .info-list {
        .info-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: px2rpx(8);
          font-size: px2rpx(13);
          line-height: 1.4;

          .info-label {
            color: var(--color-zinc-500, #7f8c8d);
            margin-right: px2rpx(8);
            white-space: nowrap;
          }

          .info-value {
            color: var(--color-navy-900, #1e2a3a);
            font-weight: 600;
            text-align: right;
            word-break: break-all;
          }

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  .pay-box {
    width: px2rpx(60 * 3 + 8 * 2);
    flex-shrink: 0;
    overflow: hidden;
    margin: px2rpx(12) 0;

    .carousel-box {
      width: 100%;
      overflow: hidden;
    }

    .carousel-track {
      display: flex;
      gap: px2rpx(8);
      width: max-content;
    }

    // 只有超过3个才加动画
    .carousel-animate {
      animation: carousel 8s linear infinite;
    }

    @keyframes carousel {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    .pay-icon-container {
      width: px2rpx(60);
      height: px2rpx(60);
      display: flex;
      align-items: center;
      justify-content: center;
      // background-color: var(--color-zinc-50, #f9f9f9);
      // border-radius: px2rpx(6);
      // border: 1px solid var(--color-zinc-100, #f3f4f6);
      flex-shrink: 0;
      overflow: hidden;
    }

    .pay-icon {
      width: px2rpx(60);
      height: px2rpx(60);
      object-fit: contain;
    }
  }

  /* 移动端适配 */
  @media screen and (max-width: 768px) {
    .payment-list {
      grid-template-columns: 1fr;
      grid-row-gap: px2rpx(12);
    }

    .payment-card {
      padding: px2rpx(12);
      gap: px2rpx(12);

      .icon-wrapper {
        width: px2rpx(90);
        height: px2rpx(90);
      }

      .content {
        .header {
          margin-bottom: px2rpx(8);

          .title {
            font-size: px2rpx(15);
          }
        }

        .info-list {
          .info-item {
            margin-bottom: px2rpx(4);
            font-size: px2rpx(12);
          }
        }
      }
    }
  }
</style>