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

<template>
  <cwg-popup v-model:visible="visible" type="center" :mask-click="false" :showFooters="true" :showClose="false"
    :title="t('Home.page_customer.item3')">
    <view class="popup-content">
      <view class="info-section">
        <cwg-label-line-value :label="t('Custom.Deposit.Title11')" :value="login" v-if="login" />
        <cwg-label-line-value :label="t('Custom.Deposit.Title22')"
          :value="locale == 'cn' ? channelData.name : channelData.enName" v-if="channelData.code" />
        <cwg-label-line-value :label="t('news_add_field.Label.Title4')" :value="selectCodes" v-if="code" />
        <cwg-label-line-value :label="t('Custom.Withdraw.Title3')" :value="params.amount + ' ' + channelData.currency"
          v-if="params.amount" />
        <cwg-label-line-value :label="t('Custom.Withdraw.item7')" :value="''">
          <template #operation1>
            <view v-if="FreeNumber > 0 && dialogCheckConfirm_form.feeAmount > 0">
              <text style="text-decoration:line-through">
                ${{
                  dialogCheckConfirm_form.feeAmount
                }}
              </text>
              &nbsp;&nbsp;
              <text>
                $0.00
              </text>
            </view>
            <view v-else>${{ dialogCheckConfirm_form.feeAmount }}</view>
          </template>
        </cwg-label-line-value>
      </view>
    </view>
    <template #footer>
      <button @click="cancel">{{ t('Btn.Cancel') }}</button>
      <button type="primary" @click="submit">{{ t('Btn.Confirm') }}</button>
    </template>
  </cwg-popup>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';

const props = defineProps({
  visible: { type: Boolean, default: false },
  login: String,
  channelData: Object,
  code: String,
  selectCodes: String,
  params: Object,
  userName: String,
  FreeNumber: Number,
  dialogCheckConfirm_form: Object,
  // 其他可能需要的 props
});
const emit = defineEmits(['update:visible', 'confirm', 'cancel']);
const { t, locale } = useI18n();
const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
});

const cancel = () => {
  visible.value = false;
  emit('cancel');
};

const submit = async () => {
  visible.value = false;
  emit('confirm');
};
</script>

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

.popup-content {
  .info-section {
    margin-bottom: px2rpx(24);
    padding: px2rpx(20);
    background-color: #f8f9fa;
    border-radius: px2rpx(8);
    border: 1px solid #e9ecef;

    :deep(.cwg-label-line-value) {
      margin-bottom: px2rpx(12);

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

  .form-section {
    margin-bottom: px2rpx(24);
    padding: px2rpx(20);
    background-color: #ffffff;
    border-radius: px2rpx(8);
    border: 1px solid #e9ecef;

    :deep(.uni-forms) {
      width: 100%;

      :deep(.uni-forms-item) {
        margin-bottom: px2rpx(16);

        :deep(.uni-forms-item__label) {
          font-size: px2rpx(14);
          color: #606266;
          margin-bottom: px2rpx(8);
        }

        :deep(.uni-forms-item__error) {
          font-size: px2rpx(12);
          color: #f56c6c;
          margin-top: px2rpx(4);
        }
      }
    }

    .phone-input-group {
      display: flex;
      align-items: center;
      gap: px2rpx(12);

      .area-code-input {
        flex: 0 0 px2rpx(100);

        input {
          width: 100%;
          height: px2rpx(40);
          padding: 0 px2rpx(12);
          border: 1px solid #dcdfe6;
          border-radius: px2rpx(4);
          font-size: px2rpx(14);
          transition: border-color 0.3s;

          &:focus {
            outline: none;
            border-color: #409eff;
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
          }
        }
      }

      .phone-separator {
        font-size: px2rpx(16);
        color: #909399;
        user-select: none;
      }

      .phone-input {
        flex: 1;

        input {
          width: 100%;
          height: px2rpx(40);
          padding: 0 px2rpx(12);
          border: 1px solid #dcdfe6;
          border-radius: px2rpx(4);
          font-size: px2rpx(14);
          transition: border-color 0.3s;

          &:focus {
            outline: none;
            border-color: #409eff;
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
          }
        }
      }
    }

    input {
      width: 100%;
      height: px2rpx(40);
      padding: 0 px2rpx(12);
      border: 1px solid #dcdfe6;
      border-radius: px2rpx(4);
      font-size: px2rpx(14);
      transition: border-color 0.3s;

      &:focus {
        outline: none;
        border-color: #409eff;
        box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
      }
    }
  }

  .merchant-info {
    padding: px2rpx(16);
    background-color: #f5f7fa;
    border-radius: px2rpx(8);
    font-size: px2rpx(13);
    line-height: 1.6;
    text-align: left;
    color: #606266;

    view {
      margin-bottom: px2rpx(8);

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

@media (max-width: 768px) {
  .popup-content {

    .info-section,
    .form-section {
      padding: px2rpx(16);
    }

    .form-section {
      .phone-input-group {
        gap: px2rpx(8);

        .area-code-input {
          flex: 0 0 px2rpx(80);
        }

        input {
          height: px2rpx(36);
          font-size: px2rpx(13);
        }
      }
    }

    .merchant-info {
      padding: px2rpx(12);
      font-size: px2rpx(12);
    }
  }
}
</style>