CEES-H5-New/src/views/waiTeacherTwo.vue

<template>
  <div class="father">
    <div class="vant-title-card">
      <!--      <div class="title-tishi">-->
      <!--        <span>温馨提示</span>-->
      <!--        <p>请填写本人名下借记卡（储蓄卡）账号</p>-->
      <!--        <div class="wxts"> 建议使用中国银行或中国建设银行借记卡（储蓄卡）账户信息填报除 <em>借记卡</em> 以外其他类型账户(如:信用卡)会造成您的劳务费用无法成功发放。</div>-->
      <!--        <p class="xxxxx"></p>-->
      <!--      </div>-->
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field class="van-field__label1——circle" label-width="400px" label="劳务信息" type="hidden" />
          <div class="title-tishi">
            <!--            <span>温馨提示</span>-->

            <div class="wxts">
              请填写本人名下
              <em>借记卡（储蓄卡）</em>
              ，建议使用中国银行或中国建设银行借记卡（储蓄卡）。如填写除借记卡以外其他类型(如：信用卡)卡号会造成您的劳务费无法成功发放。</div
            >
            <p class="xxxxx"></p>
          </div>
          <van-field
            readonly
            v-model="tname"
            name="userName"
            label="姓名"
            type="text"
            placeholder="请输入姓名"
            :rules="[{ required: true, message: '请输入学号' }]"
          />
          <van-field
            readonly
            v-model="tid"
            name="userCardId"
            label="身份证号"
            type="text"
            placeholder="请输入身份证号"
            :rules="[{ required: true, message: '请输入身份证号' }]"
          />
          <van-field
            readonly
            v-model="tphone"
            name="phone"
            label="手机号"
            type="text"
            placeholder="请输入手机号"
            :rules="[{ required: true, message: '请输入手机号' }]"
          />
          <div class="field-container">
            <van-field
            v-model="notLocalTeacherTwo.pyCardMasked"
            name="pyCard"
            label="银行卡号"
            type="text"
            placeholder="请输入银行卡号"
            :rules="rules"
            :disabled="isInputDisabled" 
            @blur="onBlur"
            ref="cardInput"
          >
          
        </van-field>
          <!-- 修改按钮放在输入框右侧 -->
          <van-button 
            v-if="isInputDisabled" 
            @click="enableEdit" 
            class="edit-button"
          >
            修改
        </van-button>
          </div>
          <!-- 弹窗 -->
        <van-dialog
          v-model:show="showDialog"
          title="确认信息"
          show-cancel-button
          cancel-button-text="取消"
          confirm-button-text="确认"
          @confirm="confirmEncryption"
        >
          <div>
            确认提交银行卡号吗？
          </div>
        </van-dialog>
          <van-field
            v-model="notLocalTeacherTwo.bankAddress"
            name="bankAddress"
            label="开户所在地"
            type="text"
            placeholder="请输入开户所在地(北京，哈尔滨)"
            :rules="[{ validator: bankAddr }]"
          />
          <!--          :rules="[{ required: true, message: '请输入开户所在地' }]"-->
          <van-field
            v-model="notLocalTeacherTwo.bankName"
            name="bankName"
            label="开户行"
            type="text"
            placeholder="请输入开户行名称"
            :rules="[{ validator: bankName }]"
          />
          <!--          :rules="[{ required: true, message: '请输入开户行名称' }]"-->
        </van-cell-group>
        <div class="border-rad">
          <van-field class="van-field__label1——circle" label-width="400px" label="入校信息" type="hidden" />
          <van-field name="carStatus" label-width="150px" label="车辆是否入校">
            <template #input>
              <van-radio-group checked-color="#8D2328" v-model="notLocalTeacherTwo.carStatus" direction="horizontal">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-if="notLocalTeacherTwo.carStatus === '1'"
            v-model="notLocalTeacherTwo.carNumber"
            name="carNumber"
            label="车牌号"
            type="text"
            placeholder="例如：黑A39233"
            :rules="[{ required: true, message: '请输入车牌号' }]"
          />
          <van-field name="dormitoryStatus" label-width="150px" label="是否住宿">
            <template #input>
              <van-radio-group checked-color="#8D2328" v-model="notLocalTeacherTwo.dormitoryStatus" direction="horizontal">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </template>
          </van-field>
        </div>
        <div style="margin: 16px">
          <van-button
            round
            style="background-color: #8d2328; border: none; font-weight: 600"
            class="van-button--primary"
            type="primary"
            @click="Previous"
          >
            上一步
          </van-button>
          <van-button
            round
            style="background-color: #8d2328; border: none; font-weight: 600"
            class="van-button--primary"
            type="primary"
            native-type="submit"
          >
            提交
          </van-button>
        </div>
      </van-form>

      <van-dialog
        v-model:show="myShowDialog"
        confirmButtonColor="#8D2328"
        cancelButtonColor="#939393"
        title="确认信息"
        confirm-button-text="确认"
        show-confirm-button
        theme="round-button"
        :show-cancel-button="true"
        @confirm="confirm"
      >
        <div class="tishi">
          <van-form @submit="onSubmit">
            <van-cell-group inset>
              <van-field
                style="height: 35px; line-height: 100%"
                readonly
                v-model="notLocalTeacherTwo.userName"
                name="userName"
                label="姓名"
                type="text"
              />
              <van-field
                readonly
                style="height: 35px; line-height: 100%"
                v-model="notLocalTeacherTwo.identityId"
                name="userCardId"
                label="身份证号"
              />
              <van-field style="height: 35px; line-height: 100%" v-model="notLocalTeacherTwo.sex" readonly name="picker" label="性别" />
              <van-field
                style="height: 35px; line-height: 100%"
                readonly
                v-model="notLocalTeacherTwo.age"
                name="age"
                label="年龄"
                type="text"
              />
              <van-field
                style="height: 35px; line-height: 100%"
                readonly
                v-model="notLocalTeacherTwo.phone"
                name="phone"
                label="手机号"
                type="number"
              />
              <van-field
                style="height: 35px; line-height: 100%"
                v-model="notLocalTeacherTwo.jobTitle"
                readonly
                name="picker"
                label="职称"
              />
              <van-field
                style="height: 35px; line-height: 100%"
                readonly
                v-model="notLocalTeacherTwo.office"
                name="office"
                label="职务"
                type="text"
              />
              <van-field
                style="height: 35px; line-height: 100%"
                readonly
                v-model="notLocalTeacherTwo.workName"
                name="workName"
                label="单位名称"
                type="text"
              />
              <van-field
                style="height: 35px; line-height: 100%"
                readonly
                v-model="notLocalTeacherTwo.workPhone"
                name="workPhoen"
                label="单位电话"
                type="text"
              />
              <van-field
                style="height: 35px; line-height: 100%"
                readonly
                v-model="notLocalTeacherTwo.pyCard"
                name="pyCard"
                label="银行卡号"
                type="number"
              />

              <van-field
                style="height: 35px; line-height: 100%"
                readonly
                v-model="notLocalTeacherTwo.bankAddress"
                name="bankAddress"
                label="开户所在地"
                type="text"
              />
              <van-field
                style="height: 35px; line-height: 100%"
                readonly
                v-model="notLocalTeacherTwo.bankName"
                name="bankName"
                label="开户行"
                type="text"
              />
              <van-field
                style="height: 35px; line-height: 100%"
                readonly
                v-if="notLocalTeacherTwo.carStatus === '1'"
                v-model="notLocalTeacherTwo.carNumber"
                name="carNumber"
                label="车牌号"
                type="text"
                height="40px"
              />
              <van-field name="dormitoryStatus" :readonly="true" style="height: 35px; line-height: 50%" label="是否住宿">
                <template #input>
                  <van-radio-group
                    checked-color="#8D2328"
                    style="height: 35px; line-height: 50%"
                    v-model="notLocalTeacherTwo.dormitoryStatus"
                    direction="horizontal"
                  >
                    <!--                    <van-radio name="1">是</van-radio>-->
                    <!--                    <van-radio name="0">否</van-radio>-->
                    {{ notLocalTeacherTwo.dormitoryStatus === '1' ? '是' : '否' }}
                  </van-radio-group>
                </template>
              </van-field>
            </van-cell-group>
          </van-form>
        </div>
      </van-dialog>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, reactive, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { useUserStore } from '@/store';
  import { bankCardAttribution } from '@/api/card';
  import { waiTeacherSave } from '@/api';

  const store = useUserStore();
  let notLocalTeacherTwo = reactive({
    userName: '',
    phone: '',
    identityId: '',
    pyCard: '',
    pyCardMasked:'',
    carStatus: '0',
    dormitoryStatus: '0',
    bankAddress: '',
    bankName: '',
    carNumber: '',
  });

  const tname = ref('');
  const tid = ref('');
  const tphone = ref('');

  const myShowDialog = ref(false);
  const isValidationEnabled =ref(true);
  const isInputDisabled = ref(false); // 控制输入框是否禁用
  const cardInput = ref(null); // 用来引用输入框的 DOM 元素

   // 动态规则，根据 isValidationEnabled 来控制规则
   const rules = computed(() => {
      if (isValidationEnabled.value) {
        return [{ validator: bankCard }];
      }
      return []; // 不使用校验规则
      //return [{ validator: bankCard }];
    });

  const router = useRouter();

  // 选择器

  const showPicker = ref(false);
  const sub = ref(false);
  
  const showDialog = ref(false);

    // 弹窗确认前处理函数
    const onBlur = () => {
      notLocalTeacherTwo.pyCard = notLocalTeacherTwo.pyCardMasked;
      // 校验原始银行卡号
      const validationResult = bankCard(notLocalTeacherTwo.pyCard);

      if (validationResult !== true) {
          // 校验失败，显示错误信息
          console.log(validationResult)
        } else {
          // 校验通过，弹出确认框
          showDialog.value = true;
        }
    };

    // 确认后加密银行卡号
    const confirmEncryption = () => {
      if (notLocalTeacherTwo.pyCardMasked) {
        notLocalTeacherTwo.pyCard = notLocalTeacherTwo.pyCardMasked;
        notLocalTeacherTwo.pyCardMasked = encryptBankCard(notLocalTeacherTwo.pyCard); // 加密银行卡号
      }
      showDialog.value = false; // 关闭弹窗
       // 禁用输入框
       isInputDisabled.value = true;
      // 点击确认后禁用校验规则
      isValidationEnabled.value = false;
      console.log("pyCard",notLocalTeacherTwo.pyCard)
      console.log("pyCardMasked",notLocalTeacherTwo.pyCardMasked)
    };

    // 加密银行卡号的函数 (这里只是简单的加密处理，你可以根据需要替换)
    const encryptBankCard = (cardNumber) => {
      return cardNumber.substring(0, 4) + ' **** **** ' + cardNumber.substring(15, 19); // 简单的加密方式
    };

    // 重新启用输入框（点击修改按钮后）
    const enableEdit = () => {
      // 重新启用输入框
      isInputDisabled.value = false;
      isValidationEnabled.value = true;
      nextTick(() => {
        // 使输入框获得焦点
        if (cardInput.value) {
            cardInput.value.focus();
        }
      });
      // 将加密后的银行卡号赋值给原始字段，方便用户重新输入
      notLocalTeacherTwo.pyCardMasked = notLocalTeacherTwo.pyCard;
    };

  // 校验规则

  const bankAddr = (value: string) => {
    if (value == '---') {
      return true;
    }
    if (value.length < 1) {
      return '开户所在地不能为空';
    }
    return true;
  };

  const bankName = (value: string) => {
    if (value == '---') {
      return true;
    }
    if (value.length < 1) {
      return '开户行不能为空';
    }
    return true;
  };
  const bankCard = (value: string) => {
    // if (value.length < 16) {
    //   return '银行卡号长度至少为16位';
    // }
    if (value == '9999') {
      return true;
    }

    // 信用卡6222528888888888
    // 工商卡6259068888888888
    const card = bankCardAttribution(value);
    console.log(card);
    if (card === 'error') {
      return '银行卡号错误';
    }
    if (card.cardTypeName === '信用卡') {
      return '不能使用信用卡号';
    }

    return true;
  };
  const onConfirm = ({ selectedOptions }) => {
    notLocalTeacherTwo = selectedOptions[0]?.text;
    showPicker.value = false;
  };
  let storedData: object;
  onMounted(() => {
    console.log('组件挂在了');

    const notLocalTeacherStr = localStorage.getItem('notLocalTeacher');
    if (notLocalTeacherStr == null) {
      // 提示用户信息不全
      alert('信息不全请返回上一级补全');
      router.push('/waiTeacherTwo');
    } else {
      storedData = JSON.parse(notLocalTeacherStr);
      Object.assign(notLocalTeacherTwo, storedData);
      // 姓名最后一位替换*号phone
      tname.value = notLocalTeacherTwo.userName.substring(0, notLocalTeacherTwo.userName.length - 1) + '*';
      if (notLocalTeacherTwo.userName.length <= 2) {
        tname.value = notLocalTeacherTwo.userName.substring(0, notLocalTeacherTwo.userName.length - 1) + '*';
      }
      // if (notLocalTeacherTwo.userName.length==3){
      //   tname.value = notLocalTeacherTwo.userName.substring(0, 1) + '*'+notLocalTeacherTwo.userName.substring(2, 3);
      // }
      if (notLocalTeacherTwo.userName.length >= 3) {
        tname.value =
          notLocalTeacherTwo.userName.substring(0, 1) +
          '*' +
          notLocalTeacherTwo.userName.substring(notLocalTeacherTwo.userName.length - 1, notLocalTeacherTwo.userName.length);
      }

      //notLocalTeacherTwo.identityId这个18位身份证号 第七位到14位*
      tid.value = notLocalTeacherTwo.identityId.substring(0, 5) + '****' + notLocalTeacherTwo.identityId.substring(13, 18);
      tphone.value = notLocalTeacherTwo.phone.substring(0, 3) + '****' + notLocalTeacherTwo.phone.substring(7, 11);
    }
  });
  // 返回上一步
  const Previous = () => {
    router.push('/waiTeacher');
  };
  let myObj = {};
  // 信息提交到后台
  const onSubmit = (values: object) => {
    // console.log('submit', {...values,...storedData});
    // alert({...values,...storedData}.toString())
    myShowDialog.value = true;
    myObj = { ...values, ...storedData };
    return;
    // waiTApi.save({...values,...storedData}).then(res => {
    //   console.log(res)
    //   if (res.data.code == 500){
    //     alert(res.data.msg)
    //     return
    //   }
    //   if (res.data.code == 200) {
    //     alert("提交成功")
    //     console.log(res.data)
    //     store.login(res.data.user)
    //     localStorage.removeItem("notLocalTeacher")
    //     router.push(res.data.router)
    //   }
    // }, err => {
    //   console.log(err)
    // })
  };
  const confirm = () => {
    waiTeacherSave(myObj).then(
      (res) => {
        console.log(res);
        if (res.code == 500) {
          alert(res.message);
          return;
        }
        if (res.code == 200) {
          alert('提交成功');
          console.log(res.result);
          store.login(res.result.user);
          localStorage.removeItem('notLocalTeacher');
          router.push(res.result.router);
        }
      },
      (err) => {
        console.log(err);
      },
    );
  };
</script>
<style scoped lang="scss">
  .father {
    padding-top: 20px;
    height: 100vh;
    background-color: #efefef;
  }

  .mar-auto15 {
    margin: 15px 15px;
  }

  .van-field__label_rectangle {
    position: relative;
    font-size: 1rem; /* 调整为您所需的字体大小 */
  }

  .van-field__label1——circle {
    position: relative;
    font-size: 1rem; /* 调整为您所需的字体大小 */
  }

  .van-field__label_rectangle:before {
    content: '';
    position: absolute;
    top: 30%;
    left: 5px;
    display: inline-block;
    height: 20px;
    width: 5px;
    background-color: #8d2328;
    border-radius: 8px;
  }

  .van-field__label1——circle:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 5px;
    display: inline-block;
    height: 5px;
    width: 5px;
    background-color: #8d2328;
    border-radius: 50%;
  }

  .vant-title-card {
    width: 90%;
    height: 100vh;
    margin: 0 auto;
    border-radius: 8px;
    //background-color: #42b983;
    padding: 0;
  }

  .van-cell-group--inset {
    margin: 0;
    margin-bottom: 15px;
    //border-top-right-radius: 0;
    //border-top-left-radius: 0;
  }

  .van-cell-group--inset-bottom {
  }

  .title-tishi {
    width: 100%;
    //border-bottom-right-radius: 0;
    //border-bottom-left-radius: 0;
    background-color: #ffffff;
    margin-bottom: 15px;
    border-radius: 8px;

    p {
      text-align: left;
      margin: 5px 15px;
      text-indent: 2rem;
    }

    span {
      position: relative;
      font-weight: 600;
      display: block;
      text-align: left;
    }

    span:before {
      content: '';
      display: inline-block;
      height: 8px;
      width: 8px;
      margin: 0 10px;
      background-color: #8d2328;
      border-radius: 50%;
    }
  }

  .van-button--primary {
    width: 35%;
    margin-left: 7%;
  }
  .border-rad {
    border-radius: 10px;
    overflow: hidden;
  }

  .wxts {
    margin-left: 10px;
    margin-right: 10px;
    text-indent: 2rem;
    text-align: left;
    p {
      color: red;
      padding: 0;
      margin: 0;
    }
    em {
      font-style: normal;
      font-weight: 600;
      color: red;
    }
  }
  .xxxxx {
    margin-bottom: 15px;
  }
  .my-dialog {
    color: red;
  }
  .field-container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

.edit-button {
  margin-left: 8px; /* 按钮与输入框之间的间距 */
  border: none; /* 去掉按钮的边框 */
  background-color: transparent; /* 去掉按钮的背景颜色，使其透明 */
  color: red; /* 设置按钮字体颜色为红色 */
  font-size: 20px; /* 根据需要设置字体大小 */
  width: 150px;
  cursor: pointer; /* 鼠标悬停时显示为手型，表示可点击 */
}
</style>