Init project

pkg_user/views/addBankCard.vue

@@ -0,0 +1,209 @@
+<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>