bank.vue

<template>
  <div class="bank">
    <van-cell-group>
      <van-cell
        is-link
        :value="form.bankName"
        title="所属银行"
        placeholder="请选择"
        size="large"
        @click="sheetShow = true"
      />
      <van-field
        v-model="form.cardNumber"
        type="number"
        maxlength="19"
        label="银行卡卡号"
        placeholder="请输入"
        size="large"
      />
      <van-field
        v-model="form.name"
        label="姓名"
        placeholder="请输入"
        size="large"
        maxlength="8"
      />
      <van-field
        v-model="form.idCardNo"
        maxlength="18"
        label="身份证号"
        placeholder="请输入"
        size="large"
      />
    </van-cell-group>
    <van-button
      type="primary"
      block
      class="btn"
      size="large"
      @click="addAndEditBankInfo"
      >编辑</van-button
    >
    <van-popup v-model="sheetShow" round position="bottom">
      <van-picker
        show-toolbar
        title="请选择银行"
        :columns="actions"
        :default-index="2"
        @cancel="sheetShow = false"
        @confirm="onSelect"
      />
    </van-popup>
    <!-- <van-action-sheet v-model="sheetShow" :actions="actions" @select="onSelect" /> -->
  </div>
</template>

<script>
import {
  getUserBankInfo,
  addUserBankInfo,
  editUserBankInfo,
  getBankList
} from "@/api/bank";
export default {
  name: "Bank",
  data() {
    return {
      sheetShow: false,
      actions: [],
      form: {
        bankName: "",
        cardNumber: "",
        name: "",
        id: "",
        idCardNo: ""
      }
    };
  },
  mounted() {
    this.getBank();
    this.getBankInfo();
  },
  methods: {
    onSelect(item) {
      this.form.bankName = item;
      this.sheetShow = false;
    },
    getBank() {
      getBankList().then(res => {
        if (res.code === 0) {
          this.actions = res.data;
        }
      });
    },
    addAndEditBankInfo() {
      if (!this.form.bankName) {
        this.$toast.fail("请填写所属银行");
        return;
      } else if (!this.form.cardNumber) {
        this.$toast.fail("请填写银行卡号");
        return;
      } else if (!this.form.name) {
        this.$toast.fail("请填写姓名");
        return;
      } else if (!this.form.idCardNo) {
        this.$toast.fail("请输入身份证号");
        return;
      }
      if (
        !/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
          this.form.idCardNo
        )
      ) {
        this.$toast.fail("请输入正确的身份证号");
        return;
      }
      if (!/^[a-zA-Z\u4e00-\u9fa5]+$/.test(this.form.name)) {
        this.$toast.fail("姓名仅支持中文或英文");
        return;
      }
      const params = this.form;
      if (this.form.id) {
        editUserBankInfo(params)
          .then(res => {
            if (res.code === 0) {
              this.$toast.success("编辑成功");
              this.$router.go(-1);
            } else {
              this.$toast.fail("编辑失败");
            }
          })
          .catch(error => {
            this.$toast.fail(
              error.response.data.error + error.response.data.message
            );
          });
      } else {
        const addParams = params;
        addParams.userId = JSON.parse(localStorage.getItem("user")).userId;
        addUserBankInfo(params)
          .then(res => {
            if (res.code === 0) {
              this.$toast.success("添加成功");
              this.$router.go(-1);
            } else {
              this.$toast.fail("添加失败");
            }
          })
          .catch(error => {
            this.$toast.fail(
              error.response.data.error + error.response.data.message
            );
          });
      }
    },
    getBankInfo() {
      const params = {
        userId: JSON.parse(localStorage.getItem("user")).userId
      };
      getUserBankInfo(params).then(res => {
        if (res.code === 0 && res.data) {
          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>