adminInfo.vue

<template>
  <div class="admin-detail-content">
    <Header title="管理员详情" />
    <van-form @submit="onSubmit">
      <div class="input-box">
        <van-field
          required
          label="管理员姓名"
          :disabled="disabled"
          v-model="form.userName"
          placeholder="请输入管理员姓名"
          input-align="right"
          :rules="[
              { required: true, message: '请输入管理员姓名' },
              { pattern: /^\S{1,20}$/, message: '输入内容不能包括空格,且最大长度为20.'}
          ]"
        />
        <van-field
          required
          label="手机号码"
          :disabled="disabled"
          v-model="form.phone"
          placeholder="请输入手机号码"
          input-align="right"
          :rules="[
              { required: true, message: '请填写您的手机号码！' },
              { pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/, message: '手机号码格式错误！'}
            ]"
        />
        <van-field
          label="固定电话"
          :disabled="disabled"
          v-model="form.telephone"
          placeholder="请输入固定电话"
          input-align="right"
          :rules="[{ validator: validatorTel, message: '固定电话格式错误！' }]"
        />
        <van-field
          label="微信"
          :disabled="disabled"
          v-model="form.weChat"
          placeholder="请输入微信"
          input-align="right"
        />
        <van-field
          label="邮箱"
          :disabled="disabled"
          v-model="form.email"
          placeholder="请输入邮箱"
          input-align="right"
          :rules="[{ validator: validatorMail, message: '邮箱格式错误' }]"
        />
      </div>
      <div class="admin-detail-button" v-if="!disabled">
        <van-button type="default" plain native-type="button" @click="onCancel">取消</van-button>
        <van-button type="default" native-type="submit">提交</van-button>
      </div>
      <div class="admin-detail-button cancel" v-if="disabled">
        <van-button type="default" native-type="button" @click="onCancel">返回</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
// { pattern: /^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/, message: '微信号格式错误！'}
import Header from "@/components/Header/index.vue";
export default {
  components: { Header },
  data() {
    return {
      disabled: false,
      form: {},
    };
  },
  mounted() {
    this.adminId = this.$route.query.id;
    // 查询管理员信息
    if (this.$route.query.disabled === "true") {
      this.disabled = true
      // 新增
    } else {
      // 修改
      this.disabled = false
    }
    this.getUserInfo();
  },
  methods: {
    validatorTel(val){
      if(val !== 0 && val){
        return /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/.test(val);
      }
      return true
    },
    validatorMail(val) {
      if(val !== 0 && val){
        return /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(val);
      }
      return true
    },
    getUserInfo() {
      let vm = this
      let param = {
        id: this.adminId,
      };
      vm.$https(
        {
          url: "tUser/getById",
          method: "get",
          authType: this.backToken,
        },
        param
      )
        .then((res) => {
          if (res.data.resultCode === "200") {
            this.form = res.data.data
          } else {
            this.$toast(res.data.message)
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    onCancel() {
      this.$router.go(-1)
    },
    // 提交数据
    onSubmit() {
      let vm = this
      let param = {}
      for (let key in this.form) {
        if (this.form[key]) {
          param[key] = this.form[key];
        }
      }
      vm.$https(
        {
          url: "tUser/update",
          method: "put",
          authType: this.backToken,
        },
        param
      )
        .then((res) => {
          if (res.data.resultCode === "200") {
            this.$router.replace({
              path: "/success",
              query: { txt: "信息修改成功", url: "/admin" },
            });
          } else {
            this.$toast(res.data.message);
          }
        })
        .catch(function (err) {
          console.log(err);
        });
      
    },
  },
};
</script>

<style lang="scss" scoped>
.admin-detail-content {
  padding: 50px 24px 0;
  overflow-y: auto;
  .input-box {
    padding-bottom: 32px;
    .van-cell {
      line-height: 40px;
      padding-left: 0;
      padding-right: 0;
      border-bottom: 1px solid #eee;
    }
    .van-cell:after {
      display: none;
    }
  }
  .admin-detail-button {
    padding: 0 24px;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;

    .van-button--normal {
      background: #a4151d;
      border-radius: 4px;
      height: 40px;
      width: 45%;
      color: #fff;
      border: none;
      font-size: 16px;
      &:first-child {
        margin-right: 5%;
      }
    }
    .van-button--plain {
      background: rgba(164, 21, 29, 0.1);
      border: 1px solid #b40011;
      border-radius: 4px;
      color: #b40011;
    }
  }
  .cancel {
    .van-button--normal {
      width: 100%;
    }
  }
  ::v-deep .van-cell--required::before {
    left: -10px;
    color:#A4151D;
  }
  .van-field__control,
  .van-cell__value {
    color: #333;
  }
}
</style>