EvenManage/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"
                remote
                placeholder="请输入学校"
                :remote-method="remoteMethod"
                :loading="loading"
              >
                <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/avatar.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;
    },
    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 = [];
      }
    },
    clearSchoolList() {
      this.options = [];
    },
    getSchool() {
      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 };
          });
        })
        .catch((err) => {
          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,
        },
      ];
      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);
        });
    },
    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>