bank.vue

<template>
  <div class="bank">
    <van-cell-group>
      <van-field
        v-model="form.bankName"
        label="所属银行"
        right-icon="arrow"
        placeholder="请选择"
        size="large"
        readonly
      />
      <van-field
        v-model="form.cardNumber"
        type="number"
        label="银行卡卡号"
        placeholder="请输入"
        size="large"
      />
      <van-field
        v-model="form.name"
        label="姓名"
        placeholder="请输入"
        size="large"
      />
    </van-cell-group>
    <van-button
      type="primary"
      block
      class="btn"
      size="large"
      @click="addAndEditBankInfo"
      >编辑</van-button
    >
  </div>
</template>

<script>
import { getUserBankInfo, addUserBankInfo, editUserBankInfo } from "@/api/bank";
export default {
  name: "Bank",
  data() {
    return {
      form: {
        bankName: "",
        cardNumber: "",
        name: "",
        id: ""
      }
    };
  },
  mounted() {
    this.getBankInfo();
  },
  methods: {
    addAndEditBankInfo() {
      const params = this.form;
      if (this.form.id) {
        editUserBankInfo(params)
          .then(res => {
            if (res.code === 0) {
              this.$toast.success("编辑成功");
            } else {
              this.$toast.fail("编辑失败");
            }
          })
          .catch(error => {
            this.$toast.fail(
              error.response.data.error + error.response.data.message
            );
          });
      } else {
        addUserBankInfo()
          .then(res => {
            if (res.code === 0) {
              this.$toast.success("添加成功");
            } else {
              this.$toast.fail("添加失败");
            }
          })
          .catch(error => {
            this.$toast.fail(
              error.response.data.error + error.response.data.message
            );
          });
      }
    },
    getBankInfo() {
      const params = {
        userId: "13100911369"
      };
      getUserBankInfo(params).then(res => {
        if (res.code === 0) {
          this.form = res.data;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.bank {
  padding: 10px 16px;
}
.van-cell-group {
  border-radius: 4px;
}
.btn {
  margin-top: 20px;
}
::v-deep .van-field__control {
  text-align: right;
}
</style>