witcarbon-app/src/views/bill/fee.vue

<template>
  <van-row align="center" justify="center" class="popup_title">
    <van-col>{{ feeInfo.popupTitle }}</van-col>
  </van-row>
  <van-divider
    style="border-color: #d8d8d8; margin: 0"
  />
  <van-form
    ref="dataForm"
    input-align="left"
    error-message-align="left"
    @submit="onSubmit"
    style="background: #f6f6f6"
  >
    <van-cell-group :border="false">
      <van-field
        v-model="dataForm.amount"
        type="number"
        label="￥"
        clearable
        placeholder="请输入金额"
        class="input_field"
      />
    </van-cell-group>
    <div style="margin-top: 12px; padding: 8px 16px" class="save_btn">
      <van-button
        block
        type="primary"
        :disabled="!parseFloat(dataForm.amount)"
        native-type="submit"
      >
        立即缴费
      </van-button>
    </div>
  </van-form>
</template>
<script>
export default {
  props: {
    feeInfo: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      dataForm: {
        amount: "",
      },
    };
  },

  mounted() {
    this.$nextTick(() => {
      this.$refs.dataForm.resetValidation();
    });
  },

  methods: {
    onSubmit() {
      this.feeInfo.amount = this.dataForm.amount;
      this.$emit("close",this.feeInfo);
    },
  },
};
</script>
<style lang="scss" scoped>
.popup_title {
  padding: 12px 0;
  font-weight: 500;
  background-color: #ffffff;
  .van-col {
    font-size: 18px;
  }
}
.input_field {
  line-height: 68px;
  /deep/ {
    .van-field__label {
      width: unset;
      color: #0c1935;
      font-size: 24px;
      font-weight: 600;
    }
    .van-field__value {
      font-size: 20px;
    }
  }
}
</style>