drp-ui/src/views/business/as/after-sales/user/login.vue

<!-- 登录 -->
<script>
export default {
  name: "asLogin",
  data() {
    return {
      title: "登 录",
      size: "small",
      fit: "contain",
      imgUrl: require("../images/logo.jpg"),
      formData: {
        name: "测试项目",
        phone: "",
      },
      rules: {
        name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号格式错误",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    useBack() {},
    useSubmit(prop) {
      this.$refs[prop].validate(async (valid) => {
        if (valid) {
          try {
            console.log(this.formData, "formData");
            this.$router.push({ name: "BindingInfo" });
          } catch (error) {}
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  created() {},
};
</script>

<template>
  <el-card
    shadow="never"
    :body-style="{
      height: '100%',
      padding: 0,
      display: 'flex',
      'flex-direction': 'column',
      'align-items': 'center',
    }"
  >
    <van-nav-bar :title="title" @click-left="useBack" style="width: 100%" />
    <el-image
      style="width: 100%; height: 28vh"
      :src="imgUrl"
      :fit="fit"
    ></el-image>

    <el-form
      :model="formData"
      :size="size"
      :rules="rules"
      ref="form"
      label-width="80px"
      label-position="top"
    >
      <h3 style="font-weight: 600">欢迎登录</h3>
      <el-form-item label="项目名称" prop="name">
        <el-input
          v-model="formData.name"
          placeholder="请输入项目名称"
          readonly
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input
          v-model="formData.phone"
          placeholder="请输入手机号"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="success"
          style="width: 100%; margin-top: 20px"
          @click="useSubmit('form')"
          >登 录</el-button
        >
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style scoped lang="scss">
.el-card {
  width: 100%;
  height: 100vh;
  padding: 0 20px 20px;
}
.el-form {
  width: 80%;
}
::v-deep .el-input__inner {
  border: none;
  border-bottom: 1px solid #dcdfe6;
}
::v-deep .el-form-item__label {
  // line-height: 22px !important;
  padding: 0 !important;
}
</style>