alhj-admin/src/views/register/index.vue

<template>
  <div class="login-container">
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="flex1">
        <div v-if="checked == 0" class="overcicle">
          <el-form
            ref="loginForm"
            :model="loginForm"
            :rules="loginRules"
            class="login-form"
            auto-complete="on"
            label-position="left"
          >
            <div class="title-container">
              <p class="title">业务管理员注册</p>
            </div>
            <el-form-item prop="name">
              <span class="svg-container"> 姓名 </span>
              <el-input
                ref="name"
                v-model="loginForm.realName"
                placeholder="输入业务员真实姓名"
                name="name"
                type="text"
                tabindex="1"
              />
            </el-form-item>
            <el-form-item prop="username">
              <span class="svg-container"> 登录账号 </span>
              <el-input
                ref="username"
                v-model="loginForm.account"
                placeholder="输入账户名称"
                name="username"
                type="text"
                tabindex="2"
              />
            </el-form-item>
            <el-form-item prop="password">
              <span class="svg-container"> 登录密码 </span>
              <el-input
                ref="password"
                v-model="loginForm.password"
                placeholder="至少6位数的字母数字组合"
                name="password"
                :type="passwordType"
                tabindex="2"
                show-password
              />
            </el-form-item>
            <el-form-item prop="surepsd">
              <span class="svg-container"> 确认密码 </span>
              <el-input
                :key="passwordType"
                ref="password"
                v-model="loginForm.surepsd"
                :type="passwordType"
                placeholder="至少6位数的字母数字组合"
                name="password"
                auto-complete="on"
                show-password
                tabindex="3"
              />
            </el-form-item>
            <el-form-item prop="mobile">
              <span class="svg-container"> 联系电话 </span>
              <el-input
                ref="mobile"
                v-model="loginForm.mobile"
                type="text"
                placeholder="请输入业务员联系电话"
                name="mobile"
                tabindex="5"
                onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
              />
            </el-form-item>

            <el-button
              :loading="loading"
              type="primary"
              class="loginbtn"
              @click.native.prevent="handleLogin(loginForm)"
              >注册账号
            </el-button>
            <div class="registerbtn flex3">
              <div class="forgect">
                <p class="asp">已有账号？</p>
              </div>
              <div class="forgect" @click="backLogin()">
                <p class="nes">马上登录</p>
              </div>
            </div>
          </el-form>
        </div>

        <!-- 供货商注册 -->
        <div
          v-if="checked == 1 && !showNext"
          style="margin-top: 670px"
          class="overcicle"
        >
          <el-form
            ref="providerForm"
            :model="providerForm"
            :rules="loginRules"
            class="login-form"
            auto-complete="on"
            label-position="left"
          >
            <div class="title-container">
              <p class="title">供货商注册</p>
            </div>
            <el-form-item prop="name">
              <span class="svg-container"> 供货商 </span>
              <el-input
                ref="name"
                v-model="providerForm.name"
                placeholder="输入供货商名称"
                name="name"
                type="text"
                tabindex="1"
              />
            </el-form-item>
            <el-form-item prop="username">
              <span class="svg-container"> 统一社会信用代码 </span>
              <el-input
                ref="username"
                v-model="providerForm.socialCode"
                placeholder="输入统一社会信用代码"
                name="username"
                type="text"
                tabindex="2"
              />
            </el-form-item>
            <el-form-item prop="username">
              <span class="svg-container"> 法人姓名 </span>
              <el-input
                ref="password"
                v-model="providerForm.legalPerson"
                placeholder="输入法人的真实姓名"
                name="password"
                type="passwordType"
                tabindex="3"
              />
            </el-form-item>
            <el-form-item prop="username">
              <span class="svg-container"> 联系人 </span>
              <el-input
                ref="password"
                v-model="providerForm.contacts"
                placeholder="输入联系人的真实姓名"
                name="password"
                type="passwordType"
                tabindex="3"
              />
            </el-form-item>
            <el-form-item prop="mobile">
              <span class="svg-container"> 联系电话 </span>
              <el-input
                ref="mobile"
                v-model="providerForm.contactsMobile"
                type="text"
                placeholder="请输入业务员联系电话"
                name="mobile"
                tabindex="5"
                onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
              />
            </el-form-item>
            <el-form-item prop="username">
              <span class="svg-container"> 登录账号 </span>
              <el-input
                ref="username"
                v-model="providerForm.account"
                placeholder="输入账号名称"
                name="username"
                type="text"
                tabindex="2"
              />
            </el-form-item>
            <el-form-item prop="password">
              <span class="svg-container"> 登录密码 </span>
              <el-input
                :key="passwordType"
                ref="password"
                v-model="providerForm.password"
                :type="passwordType"
                placeholder="至少6位数的字母数字组合"
                name="password"
                tabindex="4"
                auto-complete="on"
                show-password
              />
            </el-form-item>
            <el-form-item prop="surepsd">
              <span class="svg-container"> 确认密码 </span>
              <el-input
                :key="passwordType"
                ref="password"
                v-model="providerForm.surepsd"
                :type="passwordType"
                placeholder="至少6位数的字母数字组合"
                name="password"
                auto-complete="on"
                show-password
                tabindex="3"
              />
            </el-form-item>
            <!-- 供应商上传身份证图片 -->
            <div class="choosepic">
              <el-form-item
                style="background-color: transparent; margin: 0; padding: 0"
              >
                <span
                  class="svg-container"
                  style="
                    background-color: transparent;
                    margin: 0;
                    padding: 0;
                    margin-top: 5px;
                  "
                >
                  认证照片
                </span>
                <div class="boximg">
                  <el-upload
                    action="https://api.xrongm.com/api/File"
                    list-type="picture-card"
                    :on-success="handleAvatarSuccess"
                  >
                    <i class="el-icon-plus" />
                  </el-upload>

                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="providerForm.identifyPics" alt="" />
                  </el-dialog>
				  <!-- <FileUpload
				  v-model="providerForm.identifyPics"
				  accept=".jpg, .jpeg, .png, .pdf"
				  /> -->
                </div>
                <p class="usa">*注意上传法人手持身份证半身照</p>
              </el-form-item>
            </div>

            <!-- 供应商上传委托书图片 -->
            <div class="choosepic">
              <el-form-item
                style="background-color: transparent; margin: 0; padding: 0"
              >
                <span
                  class="svg-container"
                  style="background-color: transparent; margin: 0; padding: 0"
                >
                  授权委托书
                </span>
                <span
                  class="svg-container"
                  style="float: right"
                  @click="download"
                >
                  点击获取授权委托书
                </span>
                <div class="boximg">
                 <el-upload
                    action="https://api.xrongm.com/api/File"
                    list-type="picture-card"
                    :on-success="handleSuccess"
                  >
                    <i class="el-icon-plus" />
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="providerForm.proxyFile" alt="" />
                  </el-dialog>
				 <!-- <FileUpload
				  v-model="providerForm.proxyFile"
				  accept=".jpg, .jpeg, .png, .pdf"
				  /> -->
                </div>
                <p class="usa">*注意上传法人签署的授权委托书</p>
              </el-form-item>
            </div>
            <el-button
              :loading="loading"
              type="primary"
              class="loginbtn"
              @click.native.prevent="handleLogin(providerForm)"
              >注册账号
            </el-button>
            <div class="registerbtn flex3">
              <div class="forgect">
                <p class="asp">已有账号？</p>
              </div>
              <div class="forgect" @click="backLogin()">
                <p class="nes">马上登录</p>
              </div>
            </div>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
let that;
import { validUsername } from "@/utils/validate";
import logo from "/src/assets/img/logo.png";
import upself from "/src/assets/img/upuer.png";
import upweituo from "/src/assets/img/upattor.png";
import request from "@/utils/request";
export default {
  name: "Login",
  data() {
    const validatename = (rule, value, callback) => {
      if (value.length == 0) {
        callback(new Error("请输入业务员真实姓名"));
      } else {
        callback();
      }
    };
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error("请输入账户名称"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("请输入大于6位数密码"));
      } else {
        callback();
      }
    };
    const validatemobile = (rule, value, callback) => {
      if (value.length == 0) {
        callback(new Error("请输入电话号码"));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      disabled: false,
      upself: upself,
      upweituo: upweituo,
      fit: "cover",
      imageUrl: "",
      // 业务管理员数据
      loginForm: {
        realName: "",
        account: "",
        password: "",
        surepsd: "",
        mobile: "",
      },
      /* 供应商数据 */
      providerForm: {
        account: "",
        password: "",
        surepsd: "",
        name: "",
        socialCode: "",
        legalPerson: "",
        contacts: "",
        contactsMobile: "",
        identifyPics: [],
        proxyFile: [],
      },

      /* 供应商上传身份证图片用数组保存 */
      identifyPicsArray: [],
      /* 供应商上传委托书图片用数组保存 */
      proxyFileArray: [],

      loginRules: {
        realName: [
          {
            required: true,
            trigger: "blur",
            validator: validatename,
          },
        ],
        account: [
          {
            required: true,
            trigger: "blur",
            validator: validateUsername,
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            validator: validatePassword,
          },
        ],
        mobile: [
          {
            required: true,
            trigger: "blur",
            validator: validatemobile,
          },
        ],
      },
      loading: false,
      passwordType: "password",
      redirect: undefined,
      src: logo,
      checked: 0,
      showNext: false,
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  mounted() {
    that = this;
    this.checked = this.$route.query.checked;
  },
  methods: {
    nextStep() {
      this.showNext = true;
    },
    /* 供应商上传身份证图片上传成功 */
    handleAvatarSuccess(res) {
      //解构
      let { file } = res.data;
      this.identifyPicsArray.push(file);
      this.providerForm.identifyPics = this.identifyPicsArray;
    },

    /* 供应商上传委托书图片上传成功  */
    handleSuccess(res) {
      //解构
      let { file } = res.data;
      this.proxyFileArray.push(file);
      this.providerForm.proxyFile = this.proxyFileArray;
    },
    handlePictureCardPreview(file) {
      console.log(file, 88);
      this.imageUrl = file.url;
    },
    backLogin() {
      this.$router.replace({
        path: "/login",
        query: {},
      });
    },

    /* 供应商注册发送请求 */
    handleLogin(form) {
		if(form==this.loginForm){
			if(this.loginForm.account.length<5||this.loginForm.account.length>20){
					this.$message({
						type:'error',
						message:'账号必须5~20位'
					})
			}else if(this.loginForm.password.length<6){
				this.$message({
				       type: "error",
				       message: "密码至少六位!",
				});
			}else if(this.loginForm.password !== this.loginForm.surepsd){
				this.$message({
				       type: "error",
				       message: "密码和确认密码不一致",
				});
			}else if(this.loginForm.mobile.length!==11){
					this.$message({
						type:'error',
						message:'电话号码必须11位'
					})
			}else{
				this.$request({
				         url: "/api/Account/register",
				         method: "post",
				         data: form,
				       }).then((res) => {
				         if (res.code === 200) {
				           this.$message({
				             type: "success",
				             message: "业务员注册成功",
				           });
				           this.$router.push({
				             path: "/login",
				           });
				         }
				       });
			}
		}else{
			if(this.providerForm.account.length<5||this.providerForm.account.length>20){
				this.$message({
					type:'error',
					message:'账号必须5~20位'
				})
			}else if(this.providerForm.password !== this.providerForm.surepsd){
				this.$message({
				       type: "error",
				       message: "密码和确认密码不一致",
				});
			}else if(this.providerForm.password.length<6){
				this.$message({
				       type: "error",
				       message: "密码至少六位!",
				});
			}else if(this.providerForm.contactsMobile.length!==11){
				this.$message({
					type:'error',
					message:'电话号码必须11位'
				})
			}else{
				this.$request({
				         url: "/api/Supplier/register",
				         method: "post",
				         data: form,
				       }).then((res) => {
				         if (res.code === 200) {
				           this.$message({
				             type: "success",
				             message: "供应商注册成功",
				           });
				           this.$router.push({
				             path: "/login",
				           });
				         }
				       });
			}
		}
    },
    // 下载委托书模板
    download() {
      this.$request({
        url: "/api/Setting/attorney",
        method: "get",
      }).then((res) => {
        console.log(res);
        if (res.code === 200) {
          let url = res.data;
          window.open(url);
        }
      });
    },
  },
};
</script>

<style lang="scss" >
$bg: #f6f6f6;
$light_gray: #bebdbb;
$cursor: #bebdbb;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
  overflow: auto;
  background: url("../../assets/img/registerbg.png") no-repeat;
  background-size: 100%;

  .el-input {
    display: inline-block;
    height: 47px;
    width: 70%;
    background-color: #f6f6f6;

    input {
      background: #f6f6f6;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;
      caret-color: $cursor;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-input .el-input__inner {
    color: #030303;
  }

  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #f6f6f6;
    border-radius: 5px;
    color: #454545;
  }
}
</style>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #f6f6f6;
$light_gray: #eee;

.login-container {
  height: 100%;
  width: 100%;
  // background-color: $bg;
  // overflow: hidden;

  .login-form {
    position: relative;
    width: 470px;
    max-width: 100%;
    padding: 0 35px 0;
    margin: 0 auto;
    // overflow: hidden;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: #1f242a;
    vertical-align: middle;
    // width: 30px;
    display: inline-block;
  }

  .title-container {
    position: relative;

    .title {
      font-size: 48px;
      color: #1f242a;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}

.el-row {
  height: 100%;
}

.el-col {
  height: 100%;
}

.business {
  width: 305px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  // background-color: #D8AB5A;
  border-raotherdius: 20rpx;
  color: #ffffff;
  margin-top: 57rpx;
}

.business {
  width: 305rpx;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  // background-color: #D8AB5A;
  border-raotherdius: 20rpx;
  color: #ffffff;
  margin-top: 57rpx;
  // line-height: 110rpx;
}

.bnesper {
  background-size: 100%;
  background-image: url("../../assets/img/loginbtn4.png");
  background-repeat: no-repeat;
  padding-top: 10rpx;
  color: #fff1d8;

  .asp {
    padding-bottom: 5px;
  }
}

.applyper {
  background-image: url("../../assets/img/loginbt1.png");
  background-repeat: no-repeat;
  background-size: 100%;
  padding-top: 10rpx;
  color: #fff1d8;

  .asp {
    padding-bottom: 5px;
  }
}

.actapp {
  background-image: url("../../assets/img/loginbtn3.png");
  background-repeat: no-repeat;
  background-size: 100%;
  color: #d05c39;
  margin-bottom: 80rpx;

  .as {
    padding-bottom: 20px;
  }

  // line-height: 180rpx;
}

.actbnes {
  background-image: url("../../assets/img/loginbt2.png");
  background-repeat: no-repeat;
  background-size: 100%;
  color: #d05c39;

  .asp {
    padding-bottom: 20px;
  }
}

.loginbtn {
  width: 100%;
  margin-top: 30px;
  background: linear-gradient(to right, #ffe1ad, #d07539);
  border: none;
  height: 56px;
  border-radius: 10px;
  font-size: 18px;
}

.registerbtn {
  margin-top: 0px;
  margin-bottom: 30px;
  font-size: 16px;

  .forgect {
    cursor: pointer;
  }

  .nes {
    color: #d05c39;
  }
}

.boximg {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: #f6f6f6;
  display: flex;
  align-items: center;
  justify-content: center;

  image {
    width: 290px;
    height: 150px;
  }
}

.choosepic {
  .el-form-item__content {
  }
}

.usa {
  color: #d05c39;
  text-align: center;
  padding: 0 !important;
  margin: 0;
}

.overcicle {
  border: 1px solid #ffe2ae;
  padding-top: 50px;
  box-sizing: border-box;
}
</style>