ssti-CollegeManage/src/components/register.vue

<template>
  <div class="pb_content" v-loading="isloading">
    <div class="pb_content_body" style="position: relative">
      <div style="width: 100%; margin: 0px auto">
        <div class="formTop">
          <div class="tx">
            <img :src="ruleForm.headportrait ? ruleForm.headportrait : tx" alt />
          </div>
        </div>
        <div class="reBox">
          <div class="first">
            <div>
              <div style="color: red">*</div>
              请输入地区
            </div>
            <div>
              <!-- <el-input
                v-model="ruleForm.region"
                style="width: 300px"
                placeholder="请输入市区"
              ></el-input> -->
              <el-cascader size="large" style="width: 300px" clearable :options="region" v-model="selectedOptions"
                @change="handleChange" placeholder="请选择市区">
              </el-cascader>
            </div>
          </div>
          <div class="first">
            <div>详细地址</div>
            <div>
              <el-input v-model="ruleForm.address" style="width: 300px" placeholder="请输入详细地址"></el-input>
            </div>
          </div>
          <div class="first">
            <div>
              <div style="color: red">*</div>
              学校
            </div>
            <div>
              <el-select v-model="ruleForm.school" filterable clearable @clear="clearSchoolList" :allow-create="false"
                @focus="remoteMethodclick" remote placeholder="请输入学校" :remote-method="remoteMethod" :loading="loading"
                no-data-text="暂未查询到此学校">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="first">
            <div>
              <div style="color: red">*</div>
              姓名
            </div>
            <div>
              <el-input v-model="ruleForm.name" style="width: 300px" placeholder="请输入姓名"></el-input>
            </div>
          </div>
          <div class="first">
            <div>
              <div style="color: red">*</div>
              联系方式
            </div>
            <div>
              <el-input v-model="ruleForm.phone" style="width: 300px" placeholder="请输入手机号或邮箱"></el-input>
            </div>
          </div>
          <div class="isButton">
            <el-button @click="addRaceUser">确定提交</el-button>
            <el-button @click="goTo('/login')">返回登录</el-button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :show-close="false" title="提交成功" :visible.sync="dialogVisibleSuccess" :append-to-body="true"
      width="600px" :close-on-click-modal="false" :before-close="handleClose" class="dialog_diy">
      <div class="s_box">
        <div class="s_top">
          <span>恭喜您</span>
          <span>成功申请广东省案例征集活动管理账号!</span>
        </div>
        <div class="s_content">
          <div class="title">以下为您的登录账号密码</div>
          <div class="content">
            <div>
              <span class="user">{{ num }}</span>
            </div>
            <div><span>密码：</span><span class="password">123456</span></div>
          </div>
          <div class="tips1">请截图保存好自己的账号密码</div>
          <div class="tips2">复制账号和密码，登录后进行操作</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" class="tag-read" style="
            background: rgb(112, 183, 79);
            border-color: rgb(112, 183, 79);
            margin-right: 50px;
          " @click="copy" :data-clipboard-text="copyText">复制账号</el-button>
        <el-button type="primary" @click="goTo('/login')">返回登陆</el-button>
      </span>
    </el-dialog>
    <!-- <div class="copyright">
      版权所有：广州师培社教育科技有限公司 粤ICP备09132871号
    </div> -->
  </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";
import Clipboard from "clipboard";
const Data = regionData.filter((ele) => {
  return ele.value == "440000";
});
export default {
  data() {
    return {
      region: Data[0].children,
      selectedOptions: [], //"440000","440100"
      ruleForm: {
        headportrait: "",
        region: "",
        address: "",
        school: "",
        name: "",
        phone: "",
      },
      tx: require("../assets/avatar2.png"),
      options: [],
      list: [],
      loading: false,
      schoolList: [],
      num: "",
      dialogVisibleSuccess: false,
      copyText: "",
      isloading: false,
    };
  },
  //   mounted() {
  //     this.list = this.schoolList.map((item) => {
  //       return { value: `value:${item}`, label: `学校:${item}` };
  //     });
  //   },
  methods: {
    handleClose(done) {
      done();
    },
    goTo(path) {
      this.$router.push(path);
    },
    handleChange() {
      if (!this.selectedOptions) {
        return;
      }
      var loc = "";
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]];
      }
      this.ruleForm.region = "广东省" + loc;
    },
    remoteMethodclick() {
      if (!this.options.length) {
        var _option = []
        for (var i = 0; i < 10; i++) {
          var _a = this.randomNum(0, 10);
          _option.push(this.list[_a])
        }
        this.options = _option
      }
    },
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter((item) => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        // this.options = [];
        var _option = []
        for (var i = 0; i < 10; i++) {
          var _a = this.randomNum(0, 10);
          _option.push(this.list[_a])
        }
        this.options = _option
      }
    },
    clearSchoolList() {
      // var _option = []
      this.ruleForm.school = ""
    },
    getSchool() {
      this.isloading = true;
      let params = {
        n: "",
      };
      this.ajax
        .get(this.$store.state.api + "getSchool", params)
        .then((res) => {
          this.schoolList = res.data[0];
          this.list = this.schoolList.map((item) => {
            return { value: item.id, label: item.name };
          });
          var _option = []
          for (var i = 0; i < 10; i++) {
            var _a = this.randomNum(0, this.list.length);
            _option.push(this.list[_a])
          }
          this.options = _option
          this.isloading = false;
        })
        .catch((err) => {
          this.isloading = false;
          console.error(err);
        });
    },
    addRaceUser() {
      if (this.ruleForm.region == "") {
        this.$message.error("请填写地区");
        return;
      } else if (this.ruleForm.school == "") {
        this.$message.error("请填写学校");
        return;
      } else if (this.ruleForm.name == "") {
        this.$message.error("请填写姓名");
        return;
      } else if (this.ruleForm.phone == "") {
        this.$message.error("请填写手机号");
        return;
      }
      this.isloading = true
      let params = [
        {
          reg: this.ruleForm.region,
          res: this.ruleForm.address,
          sch: this.ruleForm.school,
          n: this.ruleForm.name,
          p: this.ruleForm.phone,
          t:"1",
          parent:"",
        },
      ];
      this.ajax
        .post(this.$store.state.api + "addRaceUser", params)
        .then((res) => {
          this.$message({
            message: "创建成功",
            type: "success",
          });
          this.isloading = false
          this.dialogVisibleSuccess = true;
          this.num = res.data.num;
        })
        .catch((err) => {
          this.isloading = false
          this.$message.error("创建失败");
          console.error(err);
        });
    },
    randomNum(minNum, maxNum) {
      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10);
          break;
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
          break;
        default:
          return 0;
          break;
      }
    },
    copy() {
      this.copyText = this.num;
      var clipboard = new Clipboard(".tag-read");
      clipboard.on("success", (e) => {
        this.$message.success("复制成功");
        console.log("复制成功");
        clipboard.destroy(); // 释放内存
      });
      clipboard.on("error", (e) => {
        console.log("不支持复制,该浏览器不支持自动复制");
        this.$message.error("不支持复制,该浏览器不支持自动复制");
        clipboard.destroy(); // 释放内存
      });
    },
  },
  created() {
    this.getSchool();
  },
};
</script>

<style scoped>
.dialog_diy>>>.el-dialog__header {
  background: #3c3c3c !important;
  padding: 15px 20px;
}

.dialog_diy>>>.el-dialog__title {
  color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn {
  top: 19px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.dialog_diy>>>.el-dialog__body,
.dialog_diy>>>.el-dialog__footer {
  background: #fafafa;
}

.dialog_diy>>>.el-dialog__footer {
  display: flex;
  justify-content: center;
}

.pb_content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.pb_content_body {
  background: #fff;
  padding: 20px 0;
  width: 500px;
  border-radius: 5px;
}

.formTop {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}

.formTop>>>.el-form {
  margin: 0 auto;
}

.tx {
  width: 100px;
  /* margin-right: 15px; */
  min-width: 50px;
  min-height: 50px;
}

.tx>img {
  width: 100%;
  height: 100%;
}

.reBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.first {
  margin: 5px 0;
  width: 300px;
}

.first>div:nth-child(1) {
  margin-bottom: 5px;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.first>div:nth-child(2)>.el-select {
  width: 300px;
}

.isButton {
  margin-top: 20px;
}

.isButton>>>.el-button {
  background: #5492ff !important;
  color: #fff !important;
  cursor: pointer;
}

.copyright {
  position: absolute;
  left: 20px;
  bottom: 15px;
}

.s_box {
  background: #fff;
  border-radius: 5px;
}

.s_top {
  width: 90%;
  margin: 0 auto;
  border-bottom: 1px solid #eee;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  font-size: 22px;
}

.s_top span:nth-child(1) {
  font-size: 26px;
}

.s_content {
  width: 90%;
  margin: 0 auto;
  padding: 20px 0 50px;
}

.s_content .title {
  font-size: 18px;
}

.s_content .content {
  padding: 50px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s_content .content div+div {
  margin-top: 20px;
}

.s_content .content .user {
  font-size: 20px;
  color: rgb(64, 145, 234);
}

.s_content .content .password {
  font-size: 24px;
  color: rgb(64, 145, 234);
}

.s_content .tips1 {
  color: rgb(162, 162, 162);
}

.s_content .tips2 {
  font-size: 18px;
}
</style>