|
|
@@ -0,0 +1,318 @@
|
|
|
+<template>
|
|
|
+ <div class="register" :style="`background-image:url(${require('@/assets/image/register_background.png')})`">
|
|
|
+ <div class="logo">
|
|
|
+ <el-image :src="require('@/assets/image/logo3.png')" class="img" fit="contain"></el-image>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="content_title">用户注册</div>
|
|
|
+ <div class="content_form">
|
|
|
+ <el-form ref="ruleForm" :model="form" :rules="rules" label-position="right" label-width="15px">
|
|
|
+ <el-form-item prop="phoneNum" label=" ">
|
|
|
+ <el-input v-model="form.phoneNum" placeholder="请输入手机号(必填)">
|
|
|
+ <i slot="prefix" class="el-icon-phone icon"></i>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="phoneCode" label=" ">
|
|
|
+ <el-input v-model="form.phoneCode" placeholder="请输入验证码(必填)">
|
|
|
+ <i slot="prefix" class="iconfont icon-yanzhengma icon"></i>
|
|
|
+ <el-button slot="append" class="phoneCode" :disabled="phoneCodeText.indexOf('秒')!=-1" @click="getPhoneCode">{{phoneCodeText}}</el-button>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="password" >
|
|
|
+ <el-input v-model="form.password" placeholder="请输入密码(非必填)">
|
|
|
+ <i slot="prefix" class="iconfont icon-mima icon"></i>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="username" >
|
|
|
+ <el-input v-model="form.username" placeholder="请输入账号(非必填)">
|
|
|
+ <i slot="prefix" class="iconfont icon-tianjiazhanghao icon"></i>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="email" >
|
|
|
+ <el-input v-model="form.email" placeholder="请输入邮箱(非必填)">
|
|
|
+ <i slot="prefix" class="iconfont icon-youxiang icon"></i>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="name" >
|
|
|
+ <el-input v-model="form.name" placeholder="请输入姓名(非必填)">
|
|
|
+ <i slot="prefix" class="el-icon-user-solid icon"></i>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="vipType" label=" ">
|
|
|
+ <el-select v-model="form.vipType" filterable style="width:100%" placeholder="请选择版本(必选)">
|
|
|
+ <el-option
|
|
|
+ v-for="item in qiaoBiVipType"
|
|
|
+ :key="item.vipTypeId"
|
|
|
+ :label="item.vipTypeName"
|
|
|
+ :value="item.vipTypeId">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="content_btn">
|
|
|
+ <el-button type="primary" size="small" @click="submit">注册</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="copyright">
|
|
|
+ copyright©灵智信息服务（深圳）有限公司
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ props: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ qiaoBiVipType:[],
|
|
|
+ form:{},
|
|
|
+ phoneCodeText:'获取验证码',
|
|
|
+ rules:{
|
|
|
+ phoneNum: [
|
|
|
+ { required: true, message: "请输入手机号码", trigger: "blur" },
|
|
|
+ {
|
|
|
+ pattern:
|
|
|
+ /(^((\+86)|(86))?(1[3-9])\d{9}$)|(^(0\d{2,3})-?(\d{7,8})$)/,
|
|
|
+ message: "请输入正确的手机号码",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ phoneCode:[
|
|
|
+ {required: true, message: "请输入验证码", trigger: "blur"}
|
|
|
+ ],
|
|
|
+ email: [
|
|
|
+ { required: false, message: "请输入邮箱", trigger: "blur" },
|
|
|
+ {
|
|
|
+ pattern:
|
|
|
+ /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9_\.\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
|
|
|
+ message: "请输入正确的邮箱格式",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ vipType:[
|
|
|
+ {required: true, message: "请选择版本", trigger: "change"}
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ computed: {
|
|
|
+ invitationCode(){
|
|
|
+ return this.$route.query.invitationCode
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //初始化
|
|
|
+ init(){
|
|
|
+ //获取会员版本信息
|
|
|
+ this.getQiaoBiVipType()
|
|
|
+ },
|
|
|
+ //获取会员版本信息
|
|
|
+ getQiaoBiVipType(name=''){
|
|
|
+ var params = {
|
|
|
+ vipTypeName:name
|
|
|
+ }
|
|
|
+ this.$api.queryQiaoBiVipType(params).then(response=>{
|
|
|
+ if(response.code == 200){
|
|
|
+ if(response.data && response.data.length>0){
|
|
|
+ this.qiaoBiVipType = response.data
|
|
|
+ this.$set(this.form,'vipType',this.qiaoBiVipType[0].vipTypeId)
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取验证码
|
|
|
+ getPhoneCode(){
|
|
|
+ if(!this.form.phoneNum){
|
|
|
+ this.$message.warning('请输入手机号')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const regex = /(^((\+86)|(86))?(1[3-9])\d{9}$)|(^(0\d{2,3})-?(\d{7,8})$)/
|
|
|
+ if(!regex.test(this.form.phoneNum)){
|
|
|
+ this.$message.warning('请输入正确的手机号码')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if(this.phoneCodeText.indexOf('秒')!=-1){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var params = {
|
|
|
+ phoneNum:this.form.phoneNum
|
|
|
+ }
|
|
|
+ this.$api.getPhoneCode(params).then(response=>{
|
|
|
+ if(response.code == 200){
|
|
|
+ var num = 60
|
|
|
+ this.phoneCodeText = num + '秒'
|
|
|
+ var timer = setInterval(()=>{
|
|
|
+ num -= 1
|
|
|
+ this.phoneCodeText = num + '秒'
|
|
|
+ if(num == 0){
|
|
|
+ this.phoneCodeText = '再次获取验证码'
|
|
|
+ clearInterval(timer)
|
|
|
+ }
|
|
|
+ },1000)
|
|
|
+ }else{
|
|
|
+ this.$message.error(response.message)
|
|
|
+ }
|
|
|
+ }).catch(error=>{
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //提交信息
|
|
|
+ submit(){
|
|
|
+ this.$refs.ruleForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if(this.invitationCode){
|
|
|
+ this.form.inviteCode = this.invitationCode
|
|
|
+ }
|
|
|
+ this.$api.personnelSignUp(this.form).then(response=>{
|
|
|
+ if(response.code == 200){
|
|
|
+ this.$message.success('注册成功')
|
|
|
+ this.$router.replace(
|
|
|
+ {
|
|
|
+ path:'/home',
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }else{
|
|
|
+ this.$message.error(response.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ }else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.register{
|
|
|
+ .content{
|
|
|
+ .el-form-item{
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__inner{
|
|
|
+ // border-radius: 8px;
|
|
|
+ height: 35px;
|
|
|
+ border: 1px solid var(--color) ;
|
|
|
+ box-shadow: 2px 2px 2px 0 rgba($color: #494a9c, $alpha: 0.5);
|
|
|
+ }
|
|
|
+ .el-input-group__append{
|
|
|
+ border: 1px solid var(--color) ;
|
|
|
+ border-left: 0;
|
|
|
+ box-shadow: 2px 2px 2px 0 rgba($color: #494a9c, $alpha: 0.5);
|
|
|
+ background-color: var(--color);
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ .is-error{
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .el-input__inner{
|
|
|
+ border: #F56C6C ;
|
|
|
+ box-shadow: 2px 2px 2px 0 rgba($color: #F56C6C, $alpha: 0.5);
|
|
|
+ }
|
|
|
+ .el-input-group__append{
|
|
|
+ border: #F56C6C ;
|
|
|
+ box-shadow: 2px 2px 2px 0 rgba($color: #F56C6C, $alpha: 0.5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content_btn{
|
|
|
+ .el-button{
|
|
|
+ width: 100%;
|
|
|
+ background-color: var(--color);
|
|
|
+ border-color: var(--color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.register{
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+// .register::after{
|
|
|
+// content:'';
|
|
|
+// width: 100%;
|
|
|
+// height: 100%;
|
|
|
+// position: absolute;
|
|
|
+// inset: 0;
|
|
|
+// background: var(--color);
|
|
|
+// opacity: 0.5;
|
|
|
+// }
|
|
|
+.logo{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 80px;
|
|
|
+ width: fit-content;
|
|
|
+ // z-index: 9999;
|
|
|
+ .img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.content{
|
|
|
+ // height: 400px;
|
|
|
+ width: 250px;
|
|
|
+ min-height: 300px;
|
|
|
+ height:fit-content;
|
|
|
+ border-radius: 10px;
|
|
|
+ // z-index: 9999;
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ margin: auto;
|
|
|
+ padding: 0 10px;
|
|
|
+ background-color: rgba(255, 255, 255, 0.5);
|
|
|
+ padding: 20px 100px 60px 100px;
|
|
|
+ .content_title{
|
|
|
+ text-align: center;
|
|
|
+ color: var(--color);
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 22px;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ .content_form{
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-left:-15px;
|
|
|
+ .icon{
|
|
|
+ color: black !important;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 35px;
|
|
|
+ }
|
|
|
+ .phoneCode{
|
|
|
+ padding: 5px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .is-disabled:hover{
|
|
|
+ color: inherit;
|
|
|
+ cursor: not-allowed;
|
|
|
+ background-color: inherit;
|
|
|
+ border-color: var(--color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.copyright{
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 35px;
|
|
|
+ margin: auto;
|
|
|
+ text-align: center;
|
|
|
+ color: black;
|
|
|
+ // z-index: 9999;
|
|
|
+}
|
|
|
+</style>
|
