2022-08-03

king

2022-08-03 4de1dd139b44e0c4c60b6ceeead23cacf775a923

 src/views/signup/mobsignup.vue

@@ -1,5 +1,15 @@
<template>
   <div class="sign-mob-form-wrap">
      <div v-if="step ==='memberType'" class="member-wrap">
         <div class="member-item personal" @click="changeType('personal')">
            <div class="title">个人版</div>
            <div class="content">限时注册，终身免费使用</div>
         </div>
         <div class="member-item enterprise" @click="changeType('enterprise')">
            <div class="title">企业版</div>
            <div class="content">更多的业务模板，更好的企业服务</div>
         </div>
      </div>
      <div v-if="step ==='signtype'">
         <header>
            <p class="title">明科账号</p>
@@ -9,6 +19,12 @@
         <div class="sign-type">
            <el-button type="danger" @click="step = 'phone';signtype = 'phone'">使用手机号</el-button>
            <el-button plain @click="step = 'email';signtype = 'email'">使用邮箱地址</el-button>
         </div>
         <div class="step-control-wrap">
            <div class="step-control">
               <el-button size="small" icon="el-icon-arrow-left" @click="prevStep()">上一步</el-button>
               <el-button size="small" :disabled="nextDisabled" @click="nextStep()">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </div>
         </div>
      </div>
      <div v-if="step ==='phone'">
@@ -125,7 +141,7 @@
   export default {
      data() {
         return {
            step: 'signtype',
            step: 'memberType',
            calendarShow: false,
            signtype: '',
            phoneNo: '',
@@ -140,7 +156,8 @@
            confirmPassword: '',
            subdisabled: true,
            pass: false,
            subloading: false
            subloading: false,
            member_type: ''
         }
      },
      methods: {
@@ -153,8 +170,15 @@
               this.subdisabled = false
            }
         },
         changeType(type) {
            this.member_type = type
            this.step = 'signtype'
            this.nextDisabled = true
         },
         prevStep () {
            if (this.step === 'phone' || this.step === 'email') {
            if (this.step === 'signtype') {
               this.step = 'memberType'
            } else if (this.step === 'phone' || this.step === 'email') {
               this.step = 'signtype'
               this.pass = false
               this.phoneNo = ''
@@ -412,6 +436,7 @@
               pwd: this.password,
               birthday: this.birthday,
               Type_reg: this.signtype !== 'email' ? 'mob' : 'email',
               member_type: this.member_type,
               timestamp: Utils.getCurrentTime()
            }

@@ -449,6 +474,35 @@
</script>

<style lang="less" scoped>
.member-wrap {
      text-align: center;
      padding-top: 20vh;
      .member-item {
         display: inline-block;
         width: 270px;
         border-radius: 4px;
         padding: 40px 0px;
         cursor: pointer;
         height: 200px;
         vertical-align: top;
         color: #ffffff;
      }

      .title {
         font-size: 24px;
         font-weight: bold;
         margin-bottom: 30px;
      }
      .personal {
         background: #1890ff;
         box-shadow: 0 0 4px #1890ff;
      }
      .enterprise {
         margin-top: 40px;
         background: #fa8c16;
         box-shadow: 0 0 4px #fa8c16;
      }
   }
   .sign-mob-form-wrap {
      position: relative;
      width: 100vw;