|
@@ -4,10 +4,7 @@
|
|
|
<div style="width: 100%; margin: 0px auto">
|
|
|
<div class="formTop">
|
|
|
<div class="tx">
|
|
|
- <img
|
|
|
- :src="ruleForm.headportrait ? ruleForm.headportrait : tx"
|
|
|
- alt
|
|
|
- />
|
|
|
+ <img :src="ruleForm.headportrait ? ruleForm.headportrait : tx" alt />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="reBox">
|
|
@@ -22,26 +19,15 @@
|
|
|
style="width: 300px"
|
|
|
placeholder="请输入市区"
|
|
|
></el-input> -->
|
|
|
- <el-cascader
|
|
|
- size="large"
|
|
|
- style="width: 300px"
|
|
|
- clearable
|
|
|
- :options="region"
|
|
|
- v-model="selectedOptions"
|
|
|
- @change="handleChange"
|
|
|
- placeholder="请选择市区"
|
|
|
- >
|
|
|
+ <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>
|
|
|
+ <el-input v-model="ruleForm.address" style="width: 300px" placeholder="请输入详细地址"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="first">
|
|
@@ -50,19 +36,10 @@
|
|
|
学校
|
|
|
</div>
|
|
|
<div>
|
|
|
- <el-select
|
|
|
- v-model="ruleForm.school"
|
|
|
- filterable
|
|
|
- clearable
|
|
|
- @clear="clearSchoolList"
|
|
|
- placeholder="请输入学校"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- >
|
|
|
+ <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>
|
|
@@ -73,11 +50,7 @@
|
|
|
姓名
|
|
|
</div>
|
|
|
<div>
|
|
|
- <el-input
|
|
|
- v-model="ruleForm.name"
|
|
|
- style="width: 300px"
|
|
|
- placeholder="请输入姓名"
|
|
|
- ></el-input>
|
|
|
+ <el-input v-model="ruleForm.name" style="width: 300px" placeholder="请输入姓名"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="first">
|
|
@@ -86,11 +59,7 @@
|
|
|
联系方式
|
|
|
</div>
|
|
|
<div>
|
|
|
- <el-input
|
|
|
- v-model="ruleForm.phone"
|
|
|
- style="width: 300px"
|
|
|
- placeholder="请输入手机号或邮箱"
|
|
|
- ></el-input>
|
|
|
+ <el-input v-model="ruleForm.phone" style="width: 300px" placeholder="请输入手机号或邮箱"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="isButton">
|
|
@@ -100,16 +69,8 @@
|
|
|
</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"
|
|
|
- >
|
|
|
+ <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>
|
|
@@ -128,18 +89,11 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- class="tag-read"
|
|
|
- style="
|
|
|
+ <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
|
|
|
- >
|
|
|
+ " @click="copy" :data-clipboard-text="copyText">复制账号</el-button>
|
|
|
<el-button type="primary" @click="goTo('/login')">返回登陆</el-button>
|
|
|
</span>
|
|
|
</el-dialog>
|
|
@@ -176,7 +130,7 @@ export default {
|
|
|
num: "",
|
|
|
dialogVisibleSuccess: false,
|
|
|
copyText: "",
|
|
|
- isloading:false,
|
|
|
+ isloading: false,
|
|
|
};
|
|
|
},
|
|
|
// mounted() {
|
|
@@ -201,6 +155,16 @@ export default {
|
|
|
}
|
|
|
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;
|
|
@@ -211,13 +175,21 @@ export default {
|
|
|
});
|
|
|
}, 200);
|
|
|
} else {
|
|
|
- this.options = [];
|
|
|
+ // 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() {
|
|
|
- this.options = [];
|
|
|
+ // var _option = []
|
|
|
+ this.ruleForm.school = ""
|
|
|
},
|
|
|
getSchool() {
|
|
|
+ this.isloading = true;
|
|
|
let params = {
|
|
|
n: "",
|
|
|
};
|
|
@@ -228,8 +200,16 @@ export default {
|
|
|
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);
|
|
|
});
|
|
|
},
|
|
@@ -274,6 +254,19 @@ export default {
|
|
|
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");
|
|
@@ -296,32 +289,33 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.dialog_diy >>> .el-dialog__header {
|
|
|
+.dialog_diy>>>.el-dialog__header {
|
|
|
background: #3c3c3c !important;
|
|
|
padding: 15px 20px;
|
|
|
}
|
|
|
|
|
|
-.dialog_diy >>> .el-dialog__title {
|
|
|
+.dialog_diy>>>.el-dialog__title {
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
-.dialog_diy >>> .el-dialog__headerbtn {
|
|
|
+.dialog_diy>>>.el-dialog__headerbtn {
|
|
|
top: 19px;
|
|
|
}
|
|
|
|
|
|
-.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
|
|
|
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
-.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
|
|
|
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
-.dialog_diy >>> .el-dialog__body,
|
|
|
-.dialog_diy >>> .el-dialog__footer {
|
|
|
+.dialog_diy>>>.el-dialog__body,
|
|
|
+.dialog_diy>>>.el-dialog__footer {
|
|
|
background: #fafafa;
|
|
|
}
|
|
|
-.dialog_diy >>> .el-dialog__footer {
|
|
|
+
|
|
|
+.dialog_diy>>>.el-dialog__footer {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
}
|
|
@@ -333,31 +327,37 @@ export default {
|
|
|
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 {
|
|
|
+
|
|
|
+.formTop>>>.el-form {
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
+
|
|
|
.tx {
|
|
|
width: 100px;
|
|
|
/* margin-right: 15px; */
|
|
|
min-width: 50px;
|
|
|
min-height: 50px;
|
|
|
}
|
|
|
-.tx > img {
|
|
|
+
|
|
|
+.tx>img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
+
|
|
|
.reBox {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
@@ -367,11 +367,13 @@ export default {
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
+
|
|
|
.first {
|
|
|
margin: 5px 0;
|
|
|
width: 300px;
|
|
|
}
|
|
|
-.first > div:nth-child(1) {
|
|
|
+
|
|
|
+.first>div:nth-child(1) {
|
|
|
margin-bottom: 5px;
|
|
|
font-weight: bold;
|
|
|
display: flex;
|
|
@@ -380,17 +382,21 @@ export default {
|
|
|
justify-content: flex-start;
|
|
|
align-items: center;
|
|
|
}
|
|
|
-.first > div:nth-child(2) > .el-select {
|
|
|
+
|
|
|
+.first>div:nth-child(2)>.el-select {
|
|
|
width: 300px;
|
|
|
}
|
|
|
+
|
|
|
.isButton {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
-.isButton >>> .el-button {
|
|
|
+
|
|
|
+.isButton>>>.el-button {
|
|
|
background: #5492ff !important;
|
|
|
color: #fff !important;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+
|
|
|
.copyright {
|
|
|
position: absolute;
|
|
|
left: 20px;
|
|
@@ -411,6 +417,7 @@ export default {
|
|
|
flex-direction: column;
|
|
|
font-size: 22px;
|
|
|
}
|
|
|
+
|
|
|
.s_top span:nth-child(1) {
|
|
|
font-size: 26px;
|
|
|
}
|
|
@@ -424,26 +431,32 @@ export default {
|
|
|
.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 {
|
|
|
+
|
|
|
+.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;
|
|
|
}
|