tf-business/pages_module/bindingCard/index.vue

<template>
  <view class="bindingCard">
    <capsule :showBorder="true" bgColor="#FFFFFF">
      <template v-slot:top>
        <view class="detail-top">
          <view class="back-icon" @click="backClick">
            <tui-icon name="arrowleft" :size="32" color="#000"></tui-icon>
          </view>
          <view class="shop-name">{{ title }}</view>
        </view>
      </template>
    </capsule>
    <view class="seize"></view>
    <view class="binding-box">
      <view class="binding-title">绑定账户</view>
      <view class="binding-container">
        <view class="change-box">
          <view class="change-title">银行卡卡号</view>
          <view class="change-ipt">
            <tui-input
              placeholder="请输入"
              padding="0 16rpx 0 0 "
              :size="28"
              :inputBorder="false"
              :borderBottom="false"
              v-model="bankInfo.cardNumber"
            >
            </tui-input>
          </view>
        </view>
        <view class="change-box">
          <view class="change-title">持卡人姓名</view>
          <view class="change-ipt">
            <tui-input
              placeholder="请输入"
              padding="0 16rpx 0 0 "
              :size="28"
              :inputBorder="false"
              :borderBottom="false"
              v-model="bankInfo.cardName"
              @blur="changeCardName"
            >
            </tui-input>
          </view>
        </view>
        <view class="change-box">
          <view class="change-title">银行</view>
          <view class="change-ipt">
            <tui-input
              placeholder="请输入"
              padding="0 16rpx 0 0 "
              :size="28"
              :inputBorder="false"
              :borderBottom="false"
              :disabled="true"
              :value="dictName"
            >
              <template #right>
                <view class="right-text" @click="showChange">选择</view>
              </template>
            </tui-input>
          </view>
        </view>
        <view class="change-box">
          <view class="change-title">注册手机号</view>
          <view class="change-ipt">
            <tui-input
              placeholder="请输入手机号码"
              padding="0 16rpx 0 0 "
              :size="28"
              :inputBorder="false"
              :borderBottom="false"
              v-model="bankInfo.phone"
            >
              <template #left>
                <view class="ipt-left">+86</view>
              </template>
            </tui-input>
          </view>
        </view>
        <view class="change-box">
          <view class="change-title">短信验证码</view>
          <view class="change-ipt">
            <tui-input
              placeholder="请输入"
              padding="0 16rpx 0 0 "
              :size="28"
              :inputBorder="false"
              :borderBottom="false"
              v-model="code"
            >
              <template #right>
                <tui-countdown-verify
                  text="获取验证码"
                  sendText="发送中..."
                  borderColor="#E7E7E7"
                  color="rgba(0, 0, 0, 0.6)"
                  :size="28"
                  :seconds="60"
                  :successVal="successVal"
                  :resetVal="resetVal"
                  @send="getVerify"
                ></tui-countdown-verify>
                <!-- <view class="ipt-right">获取验证码</view> -->
              </template>
            </tui-input>
          </view>
        </view>
      </view>
    </view>
    <view class="btn-list">
      <view class="btn" @click="backClick">取消</view>
      <view class="btn" @click="btnClick">{{ btnTitle }}</view>
    </view>
    <tui-picker
      :show="showPicker"
      :layer="1"
      :pickerData="bankList"
      textField="dictName"
      valueField="dictId"
      cancelColor="rgba(0, 0, 0, 0.6)"
      confirmColor="#EA5C1E"
      :value="value"
      @change="nameChange"
      @hide="showChange"
    ></tui-picker>
  </view>
</template>

<script>
import {
  getSelect,
  getCode,
  updateReceiving,
  saveReceiving,
} from "@/config/index.js";
// {
//     "id": "",
//     "cardName": "徐枝浪",
//     "cardNumber": "1234567893333",
//     "bank": 2001,
//     "phone": "13539102414",
//     "code": "1",
//     "bankType": 2,
//     "province": "",
//     "city": "",
//     "bankName": "",
//     "unionBank": "",
//     "bankCode": ""
// }
export default {
  created() {
    //  获取所有银行列表
    this.getBankAll();
  },
  onLoad(option) {
    //  type == 1 表示已经有银行卡了
    if (option.type == 1) {
      this.title = "修改银行卡";
      this.btnTitle = "修改";
      //  本地获取数据
      this.bankInfo = uni.getStorageSync("bankInfo");
      this.dictName = this.bankInfo.dictName;
      //  给 value 赋值
      this.value = [this.bankInfo.dictName];
    }
  },
  data() {
    return {
      title: "绑定银行卡",
      btnTitle: "确认",
      //  银行卡名称
      dictName: "",
      bankInfo: {
        // cardNumber: "",
        // cardName: "",
        // bank: "",
        // phone: "",
        // code: "",

        id: "",
        cardName: "",
        cardNumber: "",
        bank: "",
        phone: "",
        bankType: "",
        province: "",
        city: "",
        bankName: "",
        unionBank: "",
        bankCode: "",
      },
      //  控制 选择银行显示
      showPicker: false,
      bankList: [],
      value: [],
      //  控制获取验证码成功
      successVal: 0,
      //  控制获取验证码失败
      resetVal: 0,
      //  二维码
      code: "",
    };
  },
  methods: {
    //  姓名特殊字符判断
    changeCardName() {
      let rule = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、' ']/g;
      if (rule.test(this.bankInfo.cardName)) {
        this.$showToast("姓名不能包含特殊字符！");
        this.bankInfo.cardName = this.bankInfo.cardName.replace(rule, "");
      }
    },
    //  获取所有银行
    async getBankAll() {
      let { data } = await getSelect({ dictName: "所属银行" });
      this.bankList = data;
    },
    //  获取验证码
    async getVerify() {
      const phoneCodeVerification = /^[1][3-9][0-9]{9}$/;
      if (!phoneCodeVerification.test(this.bankInfo.phone)) {
        this.$showToast("请输入正确的手机号！");
        this.resetVal++;
        return;
      }
      let res = await getCode({ phone: this.bankInfo.phone });
      if (res.message == "") {
        this.successVal++;
      } else {
        this.$showToast(res.message);
        this.resetVal++;
      }
    },
    //  保存 / 修改点击事件
    btnClick() {
      //  进去先对数据进行正则判断
      const phoneCodeVerification = /^[1][3-9][0-9]{9}$/;
      const cardRule = /^([1-9]{1})(\d{15}|\d{18})$/;
      if (!phoneCodeVerification.test(this.bankInfo.phone)) {
        this.$showToast("请输入正确的手机号！");
        return;
      }
      if (!cardRule.test(this.bankInfo.cardNumber)) {
        this.$showToast("卡号需为16~19位的数字");
        return;
      }
      if (this.code == "") {
        this.$showToast("验证码不能为空");
        return;
      }
      this.bankInfo.code = this.code;
      if (this.btnTitle == "修改") {
        this.updateAccount();
      } else {
        this.saveAccount();
      }
    },
    //  修改账户信息
    async updateAccount() {
      //  对数据进行处理
      let obj = { ...this.bankInfo };
      // 删除自己添加的数据
      delete obj.dictName;
      let res = await updateReceiving(obj);
      if (res.code == "") {
        this.$showToast("修改成功");
        //  跳转回我的账户页面
        setTimeout(() => {
          this.backClick();
        }, 1500);
      }
    },
    //  保存账户信息
    async saveAccount() {
      let res = await saveReceiving(this.bankInfo);
      if (res.code == "") {
        this.$showToast("保存成功");
        //  跳转回我的账户页面
        setTimeout(() => {
          this.backClick();
        }, 1500);
      }
    },
    //  控制选择显示
    showChange() {
      this.showPicker = !this.showPicker;
    },
    //  选择银行确认
    nameChange(key) {
      this.bankInfo.bank = key.dictId;
      this.dictName = key.dictName;
    },
    backClick() {
      uni.navigateBack({
        fail: () => {
          uni.redirectTo({
            url: "/pages_module/receiving/index",
          });
        },
      });
    },
  },
    //    页面卸载清除缓存
    onUnload() {
    uni.removeStorageSync("bankInfo");
  },
};
</script>

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