xdd-uniapp-new/pkg_user/views/addBankCard.vue

<template>
  <view class="user-addBankCard">
    <view class="acea-row row-column">

      <view class="input-box acea-row row-column">
        <view class="input-item acea-row row-middle">
          <view class="input-title">持卡人：</view>
          <view class="input">
            <input
                placeholder="请输入持卡人姓名"
                placeholder-style="color:#DADCE0"
                v-model="name"
            />
          </view>
        </view>
        <view class="input-item acea-row row-middle">
          <view class="input-title">卡号：</view>
          <view class="input">
            <input
                placeholder="请输入卡号"
                placeholder-style="color:#DADCE0"
                type="number"
                v-model="cardNo"
                @input='inputCardChange'
            />
          </view>
        </view>
        <view class="input-item acea-row row-middle">
          <view class="input-title">银行：</view>
          <view class="input acea-row row-middle" style="position: relative;">

            <picker style="width: 100%;z-index: 1;" @change="bindPickerChange" :value="index" :range="banks">
              <view class="" style="font-size: 28rpx;">{{ banks[index] }}</view>
            </picker>
            <uni-icons class="bankArrow" type="arrowright" size="13"></uni-icons>

          </view>
        </view>
      </view>
      <view class="acea-row row-center row-middle">
        <button class="confirm-btn" @click="confirmAdd">确认添加</button>
      </view>
    </view>

  </view>
</template>

<script>
import {bankList, addBankCard} from "@/api/user";

export default {
  components: {},
  data: function () {
    return {
      name: "",
      cardNo: "",
      bankName: "",
      bankSub: "",
      bankList: [],
      banks: [],
      index: 0,
      showPicker: false
    };
  },
  watch: {},
  mounted: function () {
    this.getBankList();
  },
  methods: {
    inputCardChange: function (event) {
      var value = event.target.value;
      console.log('value:' + value);
      this.cardNo = value.replace(/[^\d]/g, ""); // 不允许输入非数字字符
    },
    bindPickerChange: function (e) {
      console.log('picker发送选择改变，携带值为', e.target.value);
      this.index = e.target.value;
      this.bankName = this.bankList[this.index].name;
    },
    bankSelectClick: function () {
      this.showPicker = true;
    },
    onConfirmBank: function (value, index) {
      this.bankName = value;
      this.showPicker = false;
    },
    onBackClick: function () {
      this.$router.back();
    },
    getBankList: function () {
      let that = this;
      bankList({
        page: 1,
        limit: 999
      })
          .then(res => {
            that.bankList = res.data;

            that.banks = [];
            that.bankList.forEach(function (bank, idx) {
              that.banks.push(bank.name);
              if (idx == 0) {
                that.bankName = bank.name;
              }
            });

          })
          .catch(err => {
            that.$dialog.error(err.msg || "获取银行列表失败");
          });
    },
    //提交
    confirmAdd: function () {
      let that = this;
      //参数检查
      if (that.name.length == 0) {
        that.$dialog.error("请输入持卡人姓名");
        return;
      }

      if (that.cardNo.length == 0) {
        that.$dialog.error("请输入银行卡号");
        return;
      }


      if (that.bankName.length == 0) {
        that.$dialog.error("请选择银行");
        return;
      }

      that.$dialog.loading.open();
      addBankCard({
        bankName: that.bankName,
        // bankSub: that.bankSub,
        cardNo: that.cardNo,
        name: that.name
      })
          .then(res => {
            that.$dialog.loading.close();
            that.$dialog.toast({mes: "添加成功"});
            setTimeout(function () {
              that.$yrouter.back();
            }, 1000);
          })
          .catch(err => {
            that.$dialog.loading.close();
            that.$dialog.error(err.msg || "添加失败");
          });
    }
  }
};
</script>

<style scoped lang="less">
.user-addBankCard {
  min-height: 100vh;
  padding: 60rpx 32rpx;
  background: #F9F9F9;
  color: #333333;
  font-size: 24rpx;
  line-height: 34rpx;

  .input-box {
    .input-item {
      margin-bottom: 24rpx;

      .input-title {
        width: 96rpx;
        margin-right: 10rpx;
        font-weight: bold;
        flex-shrink: 0;
      }

      .input {
        position: relative;
        height: 80rpx;
        box-sizing: border-box;
        padding: 8rpx 24rpx;
        border-radius: 12rpx;
        background: #FFFFFF;
        flex-grow: 1;

        input {
          width: 100%;
          height: 100%;
        }
      }

      .bankArrow {
        position: absolute;
        right: 24rpx;
        top: 0;
        line-height: 80rpx;
      }
    }
  }

  .confirm-btn {
    width: 686rpx;
    height: 80rpx;
    margin-top: 56rpx;
    border-radius: 8rpx;
    background: #FD574B;
    color: #FFFFFF;
    font-size: 28rpx;
  }
}
</style>