login

src/components/login.vue

@@ -4,18 +4,18 @@
     <div class="login_box" v-show="islogin">
       <div style="padding: 0px 20px">
         <div class="login_title">
-          <span>劳动教育管理端平台</span>
+          <span>劳动教育校园端平台</span>
         </div>
         <el-form
           label-position="right"
           label-width="80px"
           style="margin-top: 30px"
         >
-          <el-form-item label="手机号码">
+          <el-form-item label="登录账号">
             <el-input
               v-model="phoneNum"
               auto-complete="off"
-              placeholder="请输入手机号码"
+              placeholder="请输入登录账号"
               style="width: 100%"
               @keyup.enter.native="findPhone"
             ></el-input>
@@ -31,17 +31,134 @@
             ></el-input>
           </el-form-item>
         </el-form>
+        <div style="display: flex; justify-content: flex-end">
+          <el-button type="text" @click="islogin = false">立即注册</el-button>
+        </div>
         <div class="login_button">
           <button @click="findPhone()">登录</button>
         </div>
       </div>
     </div>
+    <div class="login_box" v-show="!islogin">
+      <div style="padding: 0px 20px">
+        <div class="login_title">
+          <span>劳动教育校园端端平台</span>
+        </div>
+        <el-form
+          label-position="right"
+          label-width="80px"
+          style="margin-top: 30px"
+          :rules="rules2"
+          ref="ruleForm2"
+          :model="registerForm"
+        >
+          <el-form-item label="登录账号" prop="phone">
+            <el-input
+              v-model="registerForm.rphoneNum"
+              auto-complete="off"
+              placeholder="请输入登录账号"
+              style="width: 100%"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="密码" prop="pass">
+            <el-input
+              v-model="registerForm.rpassword"
+              auto-complete="off"
+              placeholder="请输入密码"
+              type="password"
+              style="width: 100%"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="确认密码" prop="checkPass">
+            <el-input
+              v-model="registerForm.repassword"
+              auto-complete="off"
+              placeholder="请再输入一遍密码"
+              type="password"
+              style="width: 100%"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="选择学校" prop="school">
+            <el-select
+              filterable
+              allow-create
+              default-first-option
+              v-model="registerForm.school"
+              style="width: 80%"
+              placeholder="请选择学校"
+            >
+              <el-option
+                v-for="item in schoolArray"
+                :key="item.id"
+                :label="item.name"
+                :value="item.name"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div style="display: flex; justify-content: flex-end">
+          <el-button type="text" @click="islogin = true">返回登录</el-button>
+        </div>
+        <div class="login_button">
+          <button @click="register()">注册</button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   data() {
+    // 验证手机
+    var checkPhone = (rule, value, callback) => {
+      var _this = this;
+      let reg = /^1\d{10}$/;
+      if (_this.registerForm.rphoneNum === "") {
+        callback(new Error("请输入登录账号"));
+      } else {
+        let params = { phone: _this.registerForm.rphoneNum };
+        this.ajax
+          .get(this.$store.state.api + "findPhone", params)
+          .then((res) => {
+            if (res.data[0].length > 0) {
+              callback(new Error("此登录账号已注册"));
+            } else {
+              callback();
+            }
+            console.log(res.data[0]);
+          })
+          .catch((err) => {
+            callback();
+            console.error(err);
+          });
+      }
+    };
+    var validatePass = (rule, value, callback) => {
+      var _this = this;
+      if (_this.registerForm.rpassword === "") {
+        callback(new Error("请输入密码"));
+      } else {
+        if (_this.registerForm.rpassword.length < 6) {
+          callback(new Error("输入的密码需不少于6位"));
+        } else if (_this.registerForm.repassword !== "") {
+          _this.$refs.ruleForm2.validateField("checkPass");
+        }
+        callback();
+      }
+    };
+    var validatePass2 = (rule, value, callback) => {
+      var _this = this;
+      if (_this.registerForm.repassword === "") {
+        callback(new Error("请再次输入密码"));
+      } else if (
+        _this.registerForm.repassword !== _this.registerForm.rpassword
+      ) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    };
     return {
       islogin: true,
       phoneNum: "",
@@ -50,9 +167,33 @@ export default {
       schoolArray: [],
       now: "",
       userInfo: [],
+      registerForm: {
+        rphoneNum: "",
+        rpassword: "",
+        repassword: "",
+        school: "",
+      },
+      rules2: {
+        phone: [
+          {
+            required: true,
+            validator: checkPhone,
+            trigger: ["blur", "change"],
+          },
+        ],
+        pass: [{ required: true, validator: validatePass, trigger: "blur" }],
+        checkPass: [
+          { required: true, validator: validatePass2, trigger: "blur" },
+        ],
+        school: [
+          { required: true, message: "请选择活动区域", trigger: "blur" },
+        ],
+      },
     };
   },
-
+  created() {
+    this.getOrg();
+  },
   methods: {
     time() {
       if (!this.now) {
@@ -68,6 +209,56 @@ export default {
         }
       }
     },
+    //查询学校
+    getOrg() {
+      this.ajax
+        .get(this.$store.state.api + "getAllOrg", "")
+        .then((res) => {
+          this.schoolArray = res.data[0];
+          console.log(res.data[0]);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    register() {
+      this.$refs.ruleForm2.validate((valid) => {
+        if (valid) {
+          if (this.time()) {
+            let params = [
+              {
+                unname: this.registerForm.rphoneNum,
+                upassword: this.registerForm.repassword,
+                sid: "",
+                type: 4,
+                oid: this.registerForm.school,
+              },
+            ];
+            this.ajax
+              .post(this.$store.state.api + "registerSchool", params)
+              .then((res) => {
+                this.$message({
+                  message: "注册成功",
+                  type: "success",
+                });
+                this.registerForm = {
+                  rphoneNum: "",
+                  rpassword: "",
+                  repassword: "",
+                  school: "",
+                };
+                this.islogin = true;
+              })
+              .catch((err) => {
+                this.$message.error("注册失败");
+                console.error(err);
+              });
+          }
+        } else {
+          return false;
+        }
+      });
+    },
     findPhone() {
       if (this.phoneNum === "") {
         this.$message.error("请输入账号");