ucard-person-app-front/pages/wallet/global-order.vue

<template>
  <cwg-page-wrapper>
    <view class="page">
      <DynamicForm ref="globalFormRef" :global-form="globalForm" :fields="globalCurrenciesField" :step2="step2"
        type="1">
        <template #top>
          <cwg-input :label="t('global.t2')" v-model:value="globalForm.deductionAccount" fkey="deductionAccount"
            type="select" :columns="loginOptionsSelect" @change="changeLogin" :placeholder="t('placeholder.choose')" />
        </template>
        <template #bottom>
          <view class="form-section">
            <view class="form-item">
              <cwg-input :label="t('global.t6')" v-model:value="globalForm.receiver" fkey="receiver" type="select"
                :columns="receiverUserListSelect" @change="selectReceiver" :placeholder="t('global.t7')" />
            </view>
            <view class="form-item">
              <cwg-input :label="t('global.p1')" v-model:value="globalForm.payoutCurrency" fkey="payoutCurrency"
                v-model:selectedValueDoc="globalForm['payoutCurrencyValue']" type="select" :columns="currencyListSelect"
                @change="handlePayoutCurrencyChange" :disabled="!currencyList.length" :placeholder="t('global.p1')" />
            </view>
            <view class="form-item">
              <cwg-input :label="t('global.p2')" v-model:value="globalForm.payType" fkey="payType" type="select"
                v-model:selectedValueDoc="globalForm['transferTypeValue']" :columns="transferTypeListSelect"
                @change="handlePayTypeChange" :disabled="!globalForm.payoutCurrency || !transferTypeList.length"
                :placeholder="t('global.p2')" />
            </view>

            <view class="form-item" v-if="payoutMethodListSelect.length">
              <cwg-input :label="t('global.p3')" v-model:value="globalForm.payMethod" fkey="payMethod" type="select"
                v-model:selectedValueDoc="globalForm['payoutMethodValue']" :columns="payoutMethodListSelect"
                @change="handlePayMethodChange" :disabled="!globalForm.payType || !payoutMethodList.length"
                :placeholder="t('global.p3')" />
            </view>
          </view>
        </template>
        <template #transferAmount v-if="globalCurrenciesField.length">
          <view class="form-section">
            <view class="form-item">
              <text class="form-label">
                {{ t("card.Form.f55") }}
                <text class="quota-tip" v-if="exchangeRateData && exchangeRateData.maxQuota">
                  ({{ t("global.GlobalOrder.quoteTip") }} {{ exchangeRateData.minQuota }} - {{ exchangeRateData.maxQuota
                  }} USD)
                </text>
              </text>

              <cwg-input v-model:value="globalForm.amount" :required="true" fkey="amount" type="number"
                :placeholder="t('global.placeholder.p4')" @change="handleAmountChange" />

              <text class="form-error" v-if="form__error">{{ form__error }}</text>

              <text class="fee-text" v-if="feeNum">
                {{ `${t("global.GlobalOrder.fee")}：${feeNum}` }} USD
              </text>
            </view>

            <view class="form-item">
              <cwg-input
                :label="t('global.fieldName.' + 'transferAmount' + '.fieldTitle') + ' (' + globalForm.payoutCurrency + ')'"
                :required="true" v-model:value="globalForm.transferAmount" fkey="transferAmount" :disabled="true"
                :placeholder="t('global.fieldName.' + 'transferAmount' + '.fieldDescription')" />
            </view>
          </view>
        </template>
        <template #tips>
          <view class="tips-section">
            <view class="tips">
              <text class="title">{{ t('global.Tips') }}</text>
              <text>{{ t('global.Tips1') }}</text>
              <text>{{ t('global.Tips2') }}</text>
              <text>{{ t('global.Tips3') }}</text>
              <text>{{ t('global.Tips4') }}</text>
            </view>
          </view>
        </template>

        <template #submit>
          <view class="submit-section cwg-button">
            <u-button type="primary" @click="saveDlobal" class="submit-btn  prev-btn">
              <text>{{ t('Btn.Submit') }}</text>
            </u-button>
          </view>
        </template>
      </DynamicForm>
    </view>

    <cwg-SuccessPrompt v-model:show="showSuccessPrompt" :title="t('global.title1')" :desc="t('Custom.Withdraw.Des1')"
      :btn-click="btnClick" />
  </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed, nextTick } from "vue";
import _ from "lodash";
import DynamicForm from "./components/DynamicForm.vue";
import { showToast } from "@/utils/toast";
import { onLoad, onUnload } from '@dcloudio/uni-app'
import useRouter from "@/hooks/useRouter";
import { useI18n } from "vue-i18n";
import { ucardApi } from "@/api/ucard";
import useCardStore from "@/stores/use-card-store";
import { useKeyboardScroll } from '@/hooks/useKeyboardScroll'

const cardStore = useCardStore();
import useUserStore from "@/stores/use-user-store";
const userStore = useUserStore();
const showSuccessPrompt = ref(false);
const { t } = useI18n();
const router = useRouter();
const currency = ref()
useKeyboardScroll()
onLoad((options) => {
  currency.value = options.currency
})
// Reactive variables
const globalForm = ref({
  transferAmount: null,
  payoutCurrency: undefined,
  payType: undefined,
  payMethod: undefined,
  deductionAccount: '',
  amount: undefined,
  receiver: undefined,
  // Other fields go here
});

const businessForm = ref({});
const feeNum = ref(0);
const exchangeRateData = ref({});
const form__error = ref('');
const loginOptions = ref([]);
const globalCurrenciesDropdown = ref([]);
const receiverUserList = ref([]);
const step2 = ref(false);
const currencyList = ref([]);
const globalCurrenciesField = ref([]);
const globalFormRef = ref();

// Computed properties for select lists
const loginOptionsSelect = computed(() => {
  return loginOptions.value
});



const currencyListSelect = computed(() => {
  return currencyList.value.map((item: any) => ({
    text: item.payoutCurrency,
    value: item.payoutCurrency
  }));
});

const transferTypeListSelect = computed(() => {
  return transferTypeList.value.map((item: any) => ({
    text: item.transferType,
    value: item.transferTypeId
  }));
});

const payoutMethodListSelect = computed(() => {
  return payoutMethodList.value.map((item: any) => ({
    text: item.payoutMethodValue,
    value: item.payoutMethodId
  }));
});

const transferTypeList = computed(() => {
  return currencyList.value.find((item) => item.payoutCurrency === globalForm.value.payoutCurrency)?.types || [];
});

const payoutMethodList = computed(() => {
  return transferTypeList.value.find((item) => item.transferTypeId === globalForm.value.payType)?.methods || [];
});

const currentBalance = computed(() => {
  if (!globalForm.value.deductionAccount || !loginOptions.value.length) return 0;
  const target = loginOptions.value.find((item) => item.value === globalForm.value.deductionAccount);
  return target ? Number(target.balance) || 0 : 0;
});

const amountDisabled = computed(() => {
  const { payoutCurrency, payType, payMethod } = globalForm.value;
  return !payoutCurrency || !payType || !payMethod;
});

const receiverUserListSelect = computed(() => {
  const map = new Map();
  receiverUserList.value.forEach(item => {
    const cardNumber = item.receiverBankAccountNumber;
    if (!cardNumber) return;
    if (!map.has(cardNumber)) {
      map.set(cardNumber, {
        cardNumber,
        firstName: '',
        lastName: '',
        nativeFirstName: '',
        nativeLastName: ''
      });
    }
    const target = map.get(cardNumber);
    if (!target.firstName && (item.receiverFirstName || item.receiverLastName)) {
      target.firstName = item.receiverFirstName || '';
      target.lastName = item.receiverLastName || '';
    }
    if (
      !target.nativeFirstName &&
      (item.receiverNativeFirstName || item.receiverNativeLastName)
    ) {
      target.nativeFirstName = item.receiverNativeFirstName || '';
      target.nativeLastName = item.receiverNativeLastName || '';
    }
  });
  const result = Array.from(map.values()).map(item => {
    const enName = `${item.firstName} ${item.lastName}`.trim();
    const nativeName = `${item.nativeFirstName} ${item.nativeLastName}`.trim();
    let label = '';
    if (enName && nativeName) {
      label = `${enName}（${nativeName}） / ${item.cardNumber}`;
    } else if (enName) {
      label = `${enName} / ${item.cardNumber}`;
    } else if (nativeName) {
      label = `${nativeName} / ${item.cardNumber}`;
    } else {
      label = item.cardNumber;
    }
    return {
      value: item.cardNumber,
      text: label
    };
  });
  return result
});

// Methods
const changeLogin = (value: any) => {
  if (globalForm.value.amount) {
    globalExchangeRate()
  }
  globalForm.value.deductionAccount = value.value;
  if (value.value) {
    step2.value = true;
  }
};

const handlePayoutCurrencyChange = (value: any) => {
  globalForm.value.payoutCurrency = value.value;
  selectOption1(1);
};

const handlePayTypeChange = (value: any) => {
  globalForm.value.payType = value.value;
  selectOption1(2);
};

const handlePayMethodChange = (value: any) => {
  globalForm.value.payMethod = value.value;
  selectOption1(3);
};

const handleAmountChange = (value: any) => {
  globalForm.value.amount = value.value;
  if (!value.value) return globalForm.value.transferAmount = 0
  globalExchangeRate();
};
async function globalExchangeRate() {
  feeNum.value = 0
  const amount = Number(globalForm.value.amount)
  // 校验金额是否填写
  if (!amount) {
    const msg = t("global.validator.v15")
    // pigeon.MessageError(msg)
    form__error.value = msg
    return
  }

  const { usedQuota, yearTransferAmountQuota, maxQuota, minQuota } = exchangeRateData.value

  // 金额格式校验
  if (!/^(0|([1-9][0-9]*))(\.[\d]{1,2})?$/.test(amount)) {
    const msg = t("global.validator.v15")
    // pigeon.MessageError(msg)
    form__error.value = msg
    return
  }

  // 最小 / 最大额度校验
  if (amount < minQuota || amount > maxQuota) {
    const msg = t("global.validator.v14", { minQuota, maxQuota })
    // pigeon.MessageError(msg)
    form__error.value = msg
    return
  }

  // 余额校验
  if (currentBalance.value && amount > currentBalance.value) {
    const msg = t("global.validator.balanceTip", {
      balance: currentBalance.value,
    })
    // pigeon.MessageError(msg)
    form__error.value = msg
    return
  }

  // 年度额度校验
  if (yearTransferAmountQuota) {
    const add = _.add(usedQuota, amount)
    if (add > yearTransferAmountQuota) {
      const msg = t("global.GlobalOrder.rateTip")
      // pigeon.MessageError(msg)
      form__error.value = msg
      return
    }
  }

  form__error.value = ''

  // 调接口
  const res = await ucardApi.globalExchangeRate({
    amount,
    uniqueId: businessForm.value.uniqueId,
    country: businessForm.value.fieldData.country,
    payoutCurrency: businessForm.value.fieldData.payoutCurrency,
    transferTypeId: businessForm.value.fieldData.transferTypeId,
    payoutMethodId: businessForm.value.fieldData.payoutMethodId,
  })
  if (res.code === 200) {
    businessForm.value.exchangeRate = res.data
    form__error.value = ''

    // 手续费 (deductionFee ÷ exchangeRate)
    feeNum.value = divideNum(
      res.data.deductionFee,
      businessForm.value.fieldData.exchangeRate
    )
    // 回显转账金额
    globalForm.value.transferAmount = res.data.transferAmount

  } else {
    // pigeon.MessageError(res.msg)
  }
}
const divideNum = (quote, fee) => {
  return _.floor(_.divide(quote, fee), 2);
};


const backActivity = () => {
  // router.push({ path: "/card/index" });
};

const selectOption1 = async (type: number, e?: boolean) => {
  if (type === 1 || type === 2) {
    const list1 = transferTypeList.value;
    if (list1.length === 1) {
      globalForm.value.payType = list1[0].transferTypeId;
    } else {
      globalForm.value.payType = undefined;
    }
    const list2 = list1[0]?.methods || [];
    if (list2.length === 1) {
      globalForm.value.payMethod = list2[0].payoutMethodId;
    } else {
      globalForm.value.payMethod = undefined;
    }
  }

  globalForm.value.amount = undefined;
  feeNum.value = undefined;

  fetchExchangeRateDebounced(type, e);
};

// 防抖函数，300ms 内多次触发只执行最后一次
const fetchExchangeRateDebounced = _.debounce(async (type, e) => {
  const { payoutCurrency, payType, payMethod } = globalForm.value;
  if (globalForm.value.receiver && !e && type === 1) {
    selectReceiver({ value: globalForm.value.receiver }, true)
  }
  if (!payoutCurrency || !payType || !payMethod) return;

  const row = globalCurrenciesDropdown.value.filter(
    (currency: any) =>
      currency.payoutCurrency === payoutCurrency &&
      currency.transferTypeId === payType &&
      currency.payoutMethodId === payMethod
  );

  if (!row[0]) return;

  businessForm.value = { ...businessForm.value, fieldData: row[0] };
  getGlobalCurrenciesField(row[0]);

  try {
    const res = await ucardApi.globalExchangeRate({
      uniqueId: businessForm.value.uniqueId,
      country: row[0].country,
      payoutCurrency: row[0].payoutCurrency,
      transferTypeId: row[0].transferTypeId,
      payoutMethodId: row[0].payoutMethodId,
    });

    if (res.code === 200) {
      exchangeRateData.value = res.data;
    }
  } catch (error) {
    console.error("Error fetching exchange rate:", error);
  }
}, 500); // 300ms 可根据需要调整

const getGlobalCurrenciesField = async (row: any) => {
  try {
    const res = await ucardApi.globalCurrenciesField(row);
    if (res.code === 200) {
      setData(res.data || []);
    }
  } catch (error) {
    console.error("Error fetching currencies field:", error);
  }
};

const getSenderData = () => {
  const { idType, idNumber } = businessForm.value;
  const senderIdType =
    idType === "PASSPORT"
      ? "1"
      : idType === "GOVERNMENT_ISSUED_ID_CARD"
        ? "2"
        : "";
  const senderIdNumber =
    idType === "PASSPORT"
      ? idNumber
      : idType === "GOVERNMENT_ISSUED_ID_CARD"
        ? idNumber
        : "";

  return {
    senderFirstName: businessForm.value.firstName,
    senderLastName: businessForm.value.lastName,
    senderGender: businessForm.value.gender,
    senderIdType,
    senderIdNumber,
    senderNationality: businessForm.value.nationality,
    senderIdIssueCountry: businessForm.value.senderIdIssueCountry,
    senderDateOfBirth: businessForm.value.birthday,
    senderCountry: businessForm.value.country == "CHN" || businessForm.value.country == "CN" ? '' : businessForm.value.country,
    senderState: businessForm.value.senderState,
    senderRegion: businessForm.value.senderRegion,
    senderCity: businessForm.value.townEnName,
    senderAddress: businessForm.value.address,
    senderZipCode: businessForm.value.postCode,
    senderMobileAreaCode: businessForm.value.areaCode,
    senderMobileNumber: businessForm.value.mobile,
    senderEmail: businessForm.value.email,
    senderBeneficiaryRelationship: '3', // 付款人关系
    senderOccupation: businessForm.value.occupation,
    transferType: businessForm.value.fieldData.transferTypeId,
    PayoutMethod: businessForm.value.fieldData.payoutMethodId,
  };
};
function btnClick() {
  showSuccessPrompt.value = false;
  router.push({ path: "/pages/wallet/index" })
}
// Function to merge dynamic fields and sender data
const setData = async (data: any) => {
  const senderData = getSenderData();
  //  console.log(senderData, 'senderData');

  const mergedFields = await Promise.all(
    data.map(async (field: any) => {
      const { fieldName } = field;
      const key = Object.keys(senderData).find(
        (k) => k.toLowerCase() === fieldName.toLowerCase()
      );
      let fixedValue = key ? senderData[key] : field.fixedValue;
      //  console.log(key, fixedValue, 1222222);

      if (fieldName === "receiverBankCity") {
        try {
          const res = await ucardApi.globalQueryBankCities({
            payoutCurrency: businessForm.value.fieldData.payoutCurrency,
            country: businessForm.value.fieldData.country,
          });

          if (res.code === 200 && Array.isArray(res.data)) {
            field.availableDtos = res.data.map((item: any) => ({
              value: item.bankCitiesValue,
              valueId: item.bankCitiesKey,
            }));
          }
        } catch (e) {
          console.error("Error loading receiverBankCity data:", e);
        }
      }
      // 如果币种为 CNY，且字段是 senderIdType，则从下拉数据中移除 valueId 为 "2" 的选项
      if (
        fieldName === "senderIdType" &&
        businessForm.value.fieldData &&
        businessForm.value.fieldData.payoutCurrency === "CNY" &&
        Array.isArray(field.availableDtos)
      ) {
        field.availableDtos = field.availableDtos.filter(
          (item) => String(item.valueId) !== "2"
        );
        // 如果当前固定值是被移除的 valueId，则清空以避免不可用的默认选中
        if (String(fixedValue) === "2") {
          fixedValue = null;
        }
        if (String(field.fixedValue) === "2") {
          field.fixedValue = null;
        }
      }
      if (
        fieldName === "senderIdNumber" &&
        businessForm.value.fieldData &&
        businessForm.value.fieldData.payoutCurrency === "CNY"
      ) {
        // 如果当前固定值是被移除的 valueId，则清空以避免不可用的默认选中
        fixedValue = ''
      }
      // Handle select fields
      if (field.fieldType === "select") {
        let rValue = globalForm.value[fieldName] || fixedValue;
        const label = field.availableDtos?.find(
          (item: any) => item.valueId === rValue
        ) ?? null;
        fixedValue = label?.valueId || fixedValue;
        globalForm.value[fieldName + "Value"] = label?.value ?? null;
        globalForm.value[fieldName] = fixedValue;
        //  console.log(field, fixedValue, 'select field');

      }
      return { ...field, fixedValue };
    })
  );
  globalCurrenciesField.value = mergedFields;
};
// 选择的收款人
const selectReceiver = (a, isCurrencyChange = false) => {
  const cardNumber = a.value;
  if (!cardNumber) return;
  const sameCardList = receiverUserList.value.filter(
    (item) => item.receiverBankAccountNumber === cardNumber
  );
  const receiverFields = cardStore.globalFieldParams.filter(item => item.fieldUserType === 'receiver' && !['transferType', 'payoutMethod', 'payoutCurrency'].includes(item.fieldName)).map(item => item.fieldName)
  if (!sameCardList.length) {
    receiverFields.forEach(field => {
      globalForm.value[field] = undefined;
      const valueKey = field + 'Value';
      globalForm.value[valueKey] = undefined;
    });
    return;
  }

  const { payoutCurrency, payType, payMethod } = globalForm.value;
  let matchingData = null;
  if (payoutCurrency && payType && payMethod) {
    matchingData = sameCardList.find(
      (item) =>
        item.payoutCurrency === payoutCurrency &&
        String(item.payoutMethod) === String(payMethod) &&
        String(item.transferType) === String(payType)
    );
  }
  if (!matchingData) {
    if (isCurrencyChange) {
      receiverFields.forEach(field => {
        globalForm.value[field] = undefined;
        const valueKey = field + 'Value';
        globalForm.value[valueKey] = undefined;
      });
      return;
    }
    matchingData = sameCardList[0];
    if (matchingData) {
      if (!isCurrencyChange) {
        globalForm.value.payoutCurrency = matchingData.payoutCurrency;
        globalForm.value.payType = String(matchingData.transferType);
        globalForm.value.payMethod = String(matchingData.payoutMethod);
        selectOption1(3, true);
      }
    }
  } else {
    if (!isCurrencyChange) {
      selectOption1(3, true);
    }
  }

  if (!matchingData) return;
  receiverFields.forEach(field => {
    globalForm.value[field] = matchingData[field];
  });
};
const getGlobalCurrenciesDropdown = () => {
  const res = cardStore.currencyList;
  globalCurrenciesDropdown.value = res || [];
  const data = _.cloneDeep(res);
  const payoutCurrencies = [...new Set(data.map((item: any) => item.payoutCurrency))];
  const array = payoutCurrencies.map((item) => {
    let list = data.filter((item2: any) => item === item2.payoutCurrency);
    let transferTypes = [...new Set(list.map((item: any) => item.transferTypeValue))];
    const types = transferTypes.map((type) => {
      const cur = list.find((item2: any) => item2.transferTypeValue === type);
      let list2 = list
        .filter((item2: any) => item2.transferTypeValue === type)
        .map((item2: any) => ({
          payoutMethodId: item2.payoutMethodId,
          payoutMethodValue: item2.payoutMethodValue,
        }));
      return { transferType: type, transferTypeId: cur.transferTypeId, methods: list2 };
    });
    return { payoutCurrency: item, types };
  });
  currencyList.value = array;
  globalForm.value.payoutCurrency = currency.value
};

// 提交订单
const saveDlobal = async () => {
  const isValid = await globalFormRef.value.validateForm();
  if (!isValid) {
    return;
  }
  try {
    if (!globalForm.value.amount) {
      showToast(t("global.validator.v15"));
      return;
    }
    if (form__error.value) {
      showToast(form__error.value);
      return
    }
    if (!globalForm.value.deductionAccount) {
      showToast(t('placeholder.choose'));
      return;
    }
    const [cardNumber, deductionAccountType] = globalForm.value.deductionAccount.split(",");
    const otherData = {};
    globalCurrenciesField.value
      .map((item) => ({
        fieldName: item.fieldName,
        fieldType: item.fieldType,
      }))
      .forEach((item) => {
        otherData[item.fieldName] = globalForm.value[item.fieldName];
        if (item.fieldType === "select") {
          const key = item.fieldName + 'Value';
          otherData[key] = globalForm.value[key];
        }
      });

    const params = {
      ...otherData,
      cardNumber,
      amount: globalForm.value.amount,
      deductionAccountType,
      uniqueId: businessForm.value.uniqueId,
      ...businessForm.value.exchangeRate,
    };
    const res = await ucardApi.globalOrdersCreate({ ...params });
    if (res.code === 200) {
      showSuccessPrompt.value = true;
    } else {
      showToast(res.msg);
    }
  } catch (error: any) {
    console.error("Error submitting order:", error);
    showToast(error.message || t('common.error'));
  }
};

// 收款人list
const globalReceiverUserList = async ({ uniqueId }: any) => {
  try {
    const res = await ucardApi.globalReceiverUserList({ uniqueId });
    if (res.code === 200) {
      receiverUserList.value = res.data;
    } else {
      showToast(res.msg);
    }
  } catch (error) {
    console.error("Error fetching receiver list:", error);
    showToast(t('common.error'));
  }
};

// 付款账户下拉
const getAccountDropdown = async () => {
  try {
    const res = await ucardApi.cardAccountDropdown();
    if (res.code === 200) {
      loginOptions.value = res.data.map((item: any) => {

        if (item.type === "1") {
          item.text = `${t("global.GlobalOrder.cardNumber")} - ${item.cardNumber} ${t("global.GlobalOrder.bal")}: ${item.balance}`;
        } else {
          item.text = `${t("global.GlobalOrder.bagBal")}: ${item.balance}`;
        }
        item.value = `${item.cardNumber},${item.type}`;
        item.disabled = item.balance === 0;
        return item;
      });
    } else {
      showToast(res.msg);
    }
  } catch (error) {
    console.error("Error fetching account dropdown:", error);
    showToast(t('common.error'));
  }
};
// 付款账户下拉
const globalUserDetails = async () => {
  try {
    const res = await ucardApi.globalUserDetails();
    if (res.code === 200) {
      businessForm.value = res.data;
    }
    //  console.log(res.data);

  } catch (error) {
    console.error("Error fetching account dropdown:", error);
    showToast(t('common.error'));
  }
};


onMounted(async () => {
  await globalUserDetails();
  await getAccountDropdown();
  getGlobalCurrenciesDropdown();
  globalReceiverUserList(businessForm.value);
});
</script>

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

.form-section {
  margin-bottom: px2rpx(20);
}

.section-title {
  font-size: px2rpx(16);
  font-weight: bold;
  margin-bottom: px2rpx(15);
  display: block;
}

.form-item {
  margin-bottom: px2rpx(15);
}

.form-label {
  font-size: var(--font-size-16);
  line-height: px2rpx(24);
  letter-spacing: px2rpx(1);
  color: #474747;
  margin-bottom: px2rpx(4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;

  .required-mark {
    color: red;
  }
}

.quota-tip {
  font-size: px2rpx(12);
  color: #999;
  margin-left: px2rpx(5);

}

.form-error {
  color: #ff0000;
  font-size: px2rpx(12);
  margin-top: px2rpx(5);
  display: block;
}

.fee-text {
  font-size: px2rpx(12);
  color: #666;
  margin-top: px2rpx(5);
  display: block;
}

.tips-section {
  margin: px2rpx(20) 0;
}

.tips {
  background-color: #f5f5f5;
  padding: px2rpx(15);
  border-radius: px2rpx(8);
}

.tips .title {
  font-weight: bold;
  margin-bottom: px2rpx(16);
  display: block;

}

.tips text {
  display: block;
  margin-bottom: px2rpx(10);
  font-size: px2rpx(13);
  color: #666;
  line-height: px2rpx(20);
}

.submit-section {
  margin: px2rpx(20) 0;
}

.submit-btn {
  width: 100%;
}
</style>