pdf_tech_front_end/src/views/Create.vue

<script>
import { get, post } from '../../utils/request'
import Eyecolse from '@/components/icon/eye_colse.vue'
import Eyeopen from '@/components/icon/eye_open.vue'
import Loading from '@/components/icon/loading.vue'
import Error from '@/components/icon/error.vue'

export default {
  components: { Eyecolse, Eyeopen, Loading, Error },
  data() {
    return {
      loading: false,
      checked: false,
      checkBox: false,
      passwordType: false,
      passwordConfirmType: false,
      result: true,
      verificationCodeError: false,
      passwordError: false,
      passwordConfirmError: false,
      ruleForm: {
        email: '',
        verificationCode: '',
        userName: '',
        password: '',
        passwordConfirm: '',
        industry: '',
        company: ''
      },
      rules: {
        email: [
          {
            required: true,
            message: 'Email Address is required',
            trigger: ['']
          },
          {
            type: 'email',
            message: 'Please enter a valid Email Address',
            trigger: ['']
          }
        ],
        verificationCode: [
          { required: true, message: 'Password is required', trigger: [''] }
        ],
        userName: [
          { required: true, message: 'User name is required', trigger: [''] }
        ],
        password: [
          { required: true, message: 'Password is required', trigger: [''] }
        ],
        passwordConfirm: [
          {
            required: true,
            message: 'Password confirm is required',
            trigger: ['']
          }
        ],
        company: [
          {
            required: true,
            message: 'Company confirm is required',
            trigger: ['']
          }
        ]
      }
    }
  },
  watch: {
    checked: {
      handler(val) {
        if (this.checked !== '') {
          this.checkBox = false
        } else {
          this.checkBox = true
        }
      }
    }
  },
  methods: {
    createAccount() {
      this.verificationCodeError = false
      this.passwordError = false
      this.passwordConfirmError = false
      if (this.checked) {
        this.loading = true
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            let teamIds = this.$route.query.teamIds.split(',')
            console.log(teamIds)
            post('http://81.68.234.235:8032/pdf-tech/vppMember/create', {
              email: this.ruleForm.email,
              verifyCode: this.ruleForm.verificationCode,
              username: this.ruleForm.userName,
              password: this.ruleForm.password,
              confirmPassword: this.ruleForm.passwordConfirm,
              industry: this.ruleForm.industry,
              company: this.ruleForm.company,
              code: this.$route.query.code,
              teamIds: teamIds
            }).then((res) => {
              this.loading = false
              if (
                res.data.code === 700 &&
                res.data.msg === 'False Code，please check again'
              ) {
                this.verificationCodeError = true
                this.$message.error({
                  message: 'False Code，please check again'
                })
              } else if (
                res.data.code === 700 &&
                res.data.msg === 'Password must between 6-24 characters'
              ) {
                this.passwordError = true
                this.passwordConfirmError = true
                this.$message.error({
                  message: 'Password must between 6-24 characters'
                })
              } else if (
                res.data.code === 700 &&
                res.data.msg === 'Different Password'
              ) {
                this.passwordError = true
                this.passwordConfirmError = true
                this.$message.error({
                  message: 'Different Password'
                })
              } else if (
                res.data.code === 200 &&
                res.data.msg === '注册成功'
              ) {
                this.$message({
                  message: 'Create Success',
                  type: 'success'
                })
                this.$router.push('/login')
              }
            })
          }
        })
      } else {
        this.checkBox = true
        this.$message.error({
          message:
            'Please read and confirm POLICY OF PRIVACY and TERMS OF USE first'
        })
      }
    },
    sendEmail() {
      if (this.result) {
        console.log(this.ruleForm.email)
        //发送邮件
        get(
          'http://81.68.234.235:8032/pdf-tech/auth/getVerifyCode?action=0&type=0&receiver=' +
            this.ruleForm.email
        ).then((res) => {
          console.log(res)
        })
      }
    }
  }
}
</script>

<template>
  <div class="bg w-full h-100vh flex justify-center items-center">
    <div v-show="loading" class="absolute z-100 flex justify-center items-center h-100vh w-full bg-[#fff] opacity-60"><Loading class="z-100" /></div>
    <div class="h-auto m-auto">
      <div class="w-404px h-auto rounded-8px p-24px bg-[#fff] loginBox">
        <h1 class="text-24px font-bold my-24px">Create account</h1>
        <el-form
          :model="ruleForm"
          ref="ruleForm"
          :rules="rules"
          label-position="top"
          label-width="100px"
          inline-message
        >
          <el-form-item prop="email">
            <div class="flex items-center relative">
              <el-input
                v-model.trim="ruleForm.email"
                placeholder="Email address"
              >
              </el-input>
              <button
                type="button"
                @click="sendEmail()"
                class="
                  absolute
                  flex
                  justify-center
                  items-center
                  top-8px
                  right-0px
                  border-1px border-[#1460F3]
                  text-[#1460F3]
                  w-64px
                  h-24px
                  rounded-4px
                "
              >
                Send
              </button>
            </div>
          </el-form-item>
          <el-form-item prop="verificationCode" class="mt-4px">
            <div class="flex items-center">
              <el-input
                v-model="ruleForm.verificationCode"
                placeholder="Verification Code"
              >
              </el-input
              ><Error
                class="w-14px h-14px block ml-10px"
                :class="verificationCodeError ? 'block' : 'hidden'"
              />
            </div>
          </el-form-item>
          <el-form-item prop="userName" class="mt-4px">
            <div class="flex items-center">
              <el-input
                v-model.trim="ruleForm.userName"
                placeholder="User name"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item prop="password" class="mt-4px">
            <div class="flex items-center">
              <el-input
                v-model.trim="ruleForm.password"
                placeholder="Password"
                :type="passwordType ? '' : 'password'"
              >
              </el-input>
              <span
                v-show="ruleForm.password !== ''"
                class="show-password"
                :class="passwordType ? 'eye-open' : 'eye-close'"
                @click="passwordType = !passwordType"
              >
                <Eyeopen v-show="passwordType" />
                <Eyecolse v-show="!passwordType" /> </span
              ><Error
                class="w-14px h-14px block ml-10px"
                :class="passwordError ? 'block' : 'hidden'"
              />
            </div>
          </el-form-item>
          <el-form-item prop="passwordConfirm" class="mt-4px">
            <div class="flex items-center">
              <el-input
                v-model.trim="ruleForm.passwordConfirm"
                placeholder="Password confirm"
                :type="passwordConfirmType ? '' : 'password'"
              >
              </el-input>
              <span
                v-show="ruleForm.password !== ''"
                class="show-password"
                :class="passwordConfirmType ? 'eye-open' : 'eye-close'"
                @click="passwordConfirmType = !passwordConfirmType"
              >
                <Eyeopen v-show="passwordConfirmType" />
                <Eyecolse v-show="!passwordConfirmType" /> </span
              ><Error
                class="w-14px h-14px block ml-10px"
                :class="passwordConfirmError ? 'block' : 'hidden'"
              />
            </div>
          </el-form-item>
          <select
            name=""
            id=""
            class="
              flex
              w-full
              !h-40px
              mt-4px
              border-1px border-[#D9D9D9]
              rounded-6px
              text-[#808185]
            "
          >
            <option value="" selected disabled>Select Industry</option>
            <option value="Architecture">Architecture</option>
            <option value="Engineering_Construction">
              Engineering & Construction
            </option>
            <option value="Finance">Finance</option>
            <option value="Law_Firms_Legal_Services">
              Law Firms & Legal Services
            </option>
            <option value="Government">Government</option>
            <option value="Healthcare">Healthcare</option>
            <option value="Aerospace_Defense">Aerospace & Defense</option>
            <option value="Automotive_Marine">Automotive & Marine</option>
            <option value="Pharmaceuticals">Pharmaceuticals</option>
            <option value="Security">Security</option>
            <option value="Information_Document_Management">
              Information & Document Management
            </option>
            <option value="Media">Media</option>
            <option value="Publishing">Publishing</option>
            <option value="Education">Education</option>
            <option value="eLearning">eLearning</option>
            <option value="Marketing_Services">Marketing Services</option>
            <option value="Insurance">Insurance</option>
            <option value="HR_Staffing">HR & Staffing</option>
          </select>
          <el-form-item prop="company" class="mt-4px">
            <div class="flex items-center">
              <el-input v-model.trim="ruleForm.company" placeholder="Company">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="mt-4px">
            <div class="flex justify-between items-start">
              <input type="checkbox" v-model="checked" name="type" />
              <span
                class="ml-8px text-12px leading-14px"
                :class="checkBox ? 'text-[#FF5054]' : ''"
                >Read and Agree to POLICY OF PRIVACY and TERMS OF USE</span
              >
            </div>
          </el-form-item>
          <div class="flex justify-between">
            <button
            type="button"
              @click="$router.go(-1)"
              class="
                w-170px
                h-48px
                text-[#1460F3]
                font-bold
                border-[#1460F3] border-1px
                rounded-8px
                hover:opacity-80
              "
            >
              Back
            </button>
            <button
              type="button"
              @click="createAccount()"
              class="
                w-170px
                h-48px
                bg-[#1460F3]
                text-[#fff]
                font-bold
                rounded-8px
                hover:opacity-80
              "
            >
              Create
            </button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.bg {
  background: #e7eaee url('@/assets/images/background.png') center center
    no-repeat;
}
.el-input::v-deep input {
  border: 0px !important;
  border-bottom: 1px solid #d9d9d9 !important;
  border-radius: 0 !important;
}
.show-password {
  display: inline-block;
  position: absolute;
  right: 23px;
  top: 13px;
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.is-error {
  display: block;
}
</style>

<style lang="scss">
.el-message--error {
  border-color: #ff5054 !important;
  height: 36px;
  min-width: auto !important;
  padding: 12px !important;
}
.el-message--success {
  margin-top: 90px !important;
  background-color: #373A47 !important;
  height: 36px;
  min-width: auto !important;
  padding: 12px !important;
  p{
    color: #fff !important;
  }
}
</style>