7.26

src/components/Register/index.vue

@@ -0,0 +1,525 @@
+/*Register*/
+<template>
+  <div>
+    <transition name="marsk-fade">
+      <div v-if="registerShow" class="marsk" />
+    </transition>
+    <transition name="slide-fade">
+      <div class="register" v-if="registerShow">
+        <i class="el-icon-close" @click="close"></i>
+        <div class="steps">
+          <p>
+            <span :class="[active === 0 ? 'on' : '']">手机/邮箱验证</span>
+            &gt;
+            <span :class="[active === 1 ? 'on' : '']">设置密码</span>
+            &gt;
+            <span :class="[active === 2 ? 'on' : '']">注册成功</span>
+          </p>
+        </div>
+        <h3 v-if="active != 2" class="title">免费注册</h3>
+        <el-form
+          v-show="active === 0"
+          ref="emailForm"
+          class="register-form"
+          :model="emailForm"
+          :rules="emailRules"
+          label-position="left"
+        >
+          <el-form-item prop="email">
+            <el-input
+              ref="email"
+              v-model="emailForm.email"
+              type="text"
+              size="small"
+              name="email"
+              placeholder="请输入手机号码或邮箱地址"
+            >
+              <span slot="prefix" class="solt">手机/邮箱</span>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="code">
+            <el-input
+              ref="code"
+              v-model="emailForm.code"
+              type="text"
+              size="small"
+              style="width: 220px"
+              name="code"
+              placeholder="请输入验证码"
+            >
+              <span slot="prefix" class="solt">验证码</span>
+            </el-input>
+            <el-button
+              class="code"
+              type="danger"
+              size="small"
+              :disabled="countDown > 0"
+              plain
+              @click.native.prevent="getCode"
+              >{{ countDown > 0 ? `${countDown}s` : '获取验证码' }}</el-button
+            >
+          </el-form-item>
+          <div class="agree">
+            <el-checkbox v-model="emailForm.checked"
+              >点击“下一步”按钮将视为您已阅读并同意</el-checkbox
+            >
+            <span class="link-item" @click="toPage('protocol')"
+              >《注册协议》</span
+            >
+          </div>
+          <el-button
+            type="danger"
+            size="small"
+            class="next-btn"
+            @click.native.prevent="Next"
+            >下一步</el-button
+          >
+        </el-form>
+
+        <el-form
+          v-show="active === 1"
+          ref="setForm"
+          class="register-form"
+          :model="setForm"
+          :rules="setRules"
+          label-position="left"
+        >
+          <el-form-item prop="name">
+            <el-input
+              ref="name"
+              v-model="setForm.name"
+              type="text"
+              size="small"
+              name="name"
+              placeholder="请设置用户名"
+            >
+              <span slot="prefix" class="solt">用户名</span>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item prop="pwd">
+            <el-input
+              ref="pwd"
+              v-model="setForm.pwd"
+              :type="setForm.pwdType"
+              size="small"
+              name="pwd"
+              placeholder="请输入密码"
+            >
+              <span slot="prefix" class="solt">密码</span>
+              <svg-icon
+                slot="suffix"
+                :icon-class="
+                  setForm.pwdType === 'password' ? 'eye' : 'eye-open'
+                "
+                @click="showPwd"
+              />
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="spwd">
+            <el-input
+              ref="spwd"
+              v-model="setForm.spwd"
+              :type="setForm.spwdType"
+              size="small"
+              name="spwd"
+              placeholder="请确认密码"
+            >
+              <span slot="prefix" class="solt">确认密码</span>
+              <svg-icon
+                slot="suffix"
+                :icon-class="
+                  setForm.spwdType === 'password' ? 'eye' : 'eye-open'
+                "
+                @click="showSpwd"
+              />
+            </el-input>
+          </el-form-item>
+          <el-button
+            type="danger"
+            size="small"
+            class="next-btn"
+            @click.native.prevent="Next"
+            >下一步</el-button
+          >
+        </el-form>
+
+        <div v-show="active !== 2" class="link">
+          已有账号？
+          <span class="link-item" @click="toPage('login')">立即登录</span>
+        </div>
+
+        <div v-show="active === 2" class="success">
+          <i class="el-icon-circle-check" />
+          <p>恭喜您，注册成功！</p>
+          <div class="link">
+            <span class="link-item" @click="toPage('login')">返回登录页面</span>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { validEmail,validMobile,validCode, validName, validPwd } from '@/utils/validate'
+import { request, enPassword } from '@/utils/request'
+
+export default {
+  name: 'Register',
+  props: {
+    registerShow: {
+      type: Boolean,
+      default: () => false,
+    },
+  },
+  data() {
+    const validateEmail = (rule, value, callback) => {
+      if (value) {
+        if (!validEmail(value)&&!validMobile(value)) {
+          callback(new Error('请输入正确的手机号码或邮箱地址'))
+        }else{
+          callback()
+        }
+      } else {
+        callback(new Error('请输入手机号码或邮箱地址'))
+      }
+    }
+    const validateCode = (rule, value, callback) => {
+      if (value) {
+        if (!validCode(value)) {
+          callback(new Error('验证码为6位数字'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('请输入验证码'))
+      }
+    }
+
+    const validateName = (rule, value, callback) => {
+      if (value) {
+        if (!validName(value)) {
+          callback(new Error('用户名不允许输入‘@’和‘空格’'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('请输入用户名'))
+      }
+    }
+    const validatePwd = (rule, value, callback) => {
+      if (value) {
+        if (!validPwd(value)) {
+          callback(new Error('6~18位，只能包含字母、数字和下划线'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('请输入密码'))
+      }
+    }
+    const validateSpwd = (rule, value, callback) => {
+      if (value) {
+        if (value != this.setForm.pwd) {
+          callback(new Error('两次密码不一致'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('请再次输入密码'))
+      }
+    }
+    return {
+      active: 0,
+      countDown: '00',
+      emailForm: {
+        email: '',
+        code: '',
+        checked: true,
+      },
+      emailRules: {
+        email: [{ required: true, trigger: 'blur', validator: validateEmail }],
+        code: [{ required: true, trigger: 'blur', validator: validateCode }],
+      },
+      setForm: {
+        name: '',
+        pwd: '',
+        spwd: '',
+        pwdType: 'password',
+        spwdType: 'password',
+      },
+      setRules: {
+        name: [{ required: true, trigger: 'blur', validator: validateName }],
+        pwd: [{ required: true, trigger: 'blur', validator: validatePwd }],
+        spwd: [{ required: true, trigger: 'blur', validator: validateSpwd }],
+      },
+    }
+  },
+  methods: {
+    close() {
+      this.$emit('putRegister', false)
+    },
+    showPwd() {
+      this.setForm.pwdType =
+        this.setForm.pwdType === 'password' ? '' : 'password'
+      this.$nextTick(() => {
+        this.$refs.pwd.focus()
+      })
+    },
+    showSpwd() {
+      this.setForm.spwdType =
+        this.setForm.spwdType === 'password' ? '' : 'password'
+      this.$nextTick(() => {
+        this.$refs.spwd.focus()
+      })
+    },
+    theLast() {
+      this.countDown = 60
+      const timer = setInterval(() => {
+        if (this.countDown > 0) {
+          this.countDown--
+          this.countDown < 10 && (this.countDown = '0' + this.countDown)
+        } else {
+          clearInterval(timer)
+        }
+      }, 1000)
+    },
+    getCode() {
+      if (this.countDown > 0) return this.$message.error('请不要频繁点击!')
+      if (!this.emailForm.email) return this.$message.error('请输入手机号码或邮箱地址!')
+      if (!validEmail(this.emailForm.email)&&!validMobile(this.emailForm.email))
+        return this.$message.error('请输入正确的手机号码或邮箱地址!')
+        let channel=validEmail(this.emailForm.email)?'2':'1'
+      const params = {
+        transCode: 'A00001',
+        mailOrPhone: this.emailForm.email,
+        type: '1',
+        channel:channel
+      }
+      request(params)
+        .then((res) => {
+          channel==='2'
+          ?this.$message.success(
+            `验证码已发送至邮箱： ${this.emailForm.email} ,请注意查收！`
+          )
+          :this.$message.success(
+            `验证码已发送至手机号码： ${this.emailForm.email} ,请注意查收！`
+          )
+          this.theLast()
+        })
+        .catch((err) => {})
+    },
+    Next() {
+      if (this.active === 0) {
+        this.$refs.emailForm.validate((valid) => {
+          if (valid) {
+            if (this.emailForm.checked) {
+              this.active = 1
+            } else {
+              this.$alert('请仔细阅读《注册协议》，并同意！', '提示', {
+                confirmButtonText: '确定',
+                callback: (action) => {},
+              })
+            }
+          } else {
+            return false
+          }
+        })
+      } else if (this.active === 1) {
+        this.$refs.setForm.validate((valid) => {
+          if (valid) {
+            let channel=validEmail(this.emailForm.email)?'2':'1'
+            const params = {
+              transCode: 'A00003',
+              userName: this.setForm.name,
+              password: enPassword(this.setForm.pwd),
+              mailOrPhone: this.emailForm.email,
+              verificationCode: this.emailForm.code,
+              channel:channel
+            }
+            request(params)
+              .then((res) => {
+                this.$message.success('恭喜您，注册成功！')
+                this.active = 2
+                // this.close()
+              })
+              .catch((err) => {
+                this.active = 0
+                this.$message.error('请重新输入验证码！')
+              })
+          } else {
+            return false
+          }
+        })
+      }
+    },
+    toPage(type) {
+      this.$emit('putRegister', { type: type })
+      this.active=0
+      if (type == 'protocol') {
+        this.$router.push('/protocol')
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
+
+.marsk-fade-enter-active,
+.marsk-fade-leave-active {
+  transition: all 0.5s;
+}
+.marsk-fade-enter,
+.marsk-fade-leave-to {
+  opacity: 0;
+}
+.marsk {
+  @include position(fixed, 0, 0, 0, 0, 1000);
+  background: rgba(4, 112, 204, 0.05);
+}
+
+.slide-fade-enter-active {
+  transition: all 0.3s ease;
+}
+.slide-fade-leave-active {
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.slide-fade-enter,
+.slide-fade-leave-to {
+  transform: translateY(7.48rem);
+}
+
+.register {
+  @include position(fixed, 40%, auto, 50%, auto, 1001);
+  @include w_h(400px);
+  min-height: 430px;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+  line-height: 22px;
+  color: $color_3;
+  background: $color_f;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.4);
+  .el-icon-close {
+    @include position(absolute, 12px, auto, auto, 20px, 1001);
+    font-size: 16px;
+    color: $color_9;
+    transition: all 0.3s;
+    &:hover {
+      cursor: pointer;
+      color: $color_on;
+    }
+  }
+  .steps {
+    @include w_h(100%, 40px);
+    line-height: 40px;
+    text-align: center;
+    color: #78a4db;
+    background: #004498;
+    .on {
+      color: $color_f;
+    }
+  }
+  .title {
+    margin-top: 30px;
+    font-size: 20px;
+    text-align: center;
+    color: $color_3;
+  }
+  &-form {
+    @include w_h();
+    padding: 20px 30px;
+    .solt {
+      padding: 0 6px;
+      font-size: 12px;
+      color: $color_6;
+    }
+    .code {
+      @include position(absolute, 4px, auto, auto, 0);
+      @include w_h(100px);
+      font-size: 12px;
+      vertical-align: middle;
+      cursor: pointer;
+      user-select: none;
+    }
+    .agree {
+      text-align: left;
+      font-size: 12px;
+      .link-item {
+        color: #409eff;
+        &:hover {
+          cursor: pointer;
+          text-decoration: underline;
+        }
+      }
+    }
+    .next-btn {
+      margin: 30px auto 0px;
+      @include w_h();
+    }
+  }
+  .link {
+    margin-bottom: 30px;
+    text-align: center;
+    color: $color_9;
+    .link-item {
+      color: $color_on;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+  .success {
+    font-size: 14px;
+    text-align: center;
+    .el-icon-circle-check {
+      margin-top: 50px;
+      font-size: 60px;
+      color: #41b300;
+    }
+    p {
+      margin: 20px auto;
+      font-size: 20px;
+      font-weight: 700;
+      color: $color_3;
+    }
+    a {
+      font-size: 14px;
+      color: $color_9;
+    }
+    a:hover {
+      color: $color_on;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+@import '@/styles/variables.scss';
+@supports (-webkit-mask: none) and (not (cater-color: $color_9)) {
+  .register-form .el-input input {
+    font-size: 12px;
+    color: $color_9;
+  }
+}
+.register-form {
+  .el-checkbox__label {
+    font-size: 12px;
+    color: $color_6;
+  }
+  .el-input {
+    &__inner:focus {
+      border-color: $color_9;
+    }
+    &--prefix .el-input__inner {
+      color: $color_6;
+      padding-left: 70px;
+    }
+  }
+}
+</style>>