share_h5/pages/register.vue

<template>
  <view class="register">
    <div class="header">
      <navbar ref="navbar" backColor="#fff" :config="config"></navbar>
      <view class="register-title">邀请注册</view>
      <view class="register-code">邀请人：{{code}}</view>
    </div>

    <div class="body">
      <form @submit="formSubmit">
        <view class="item">
          <!-- <view class="top">
            手机号注册
          </view> -->
          <view class="phone">
            <view class="name">
              手机号
            </view>
            <input type="number" name="phone" @input="onPhone" placeholder="请输入手机号" maxlength="11"
              placeholder-style="color:#cccccc;" />
          </view>
          <view class="verification">
            <view class="name">
              验证码
            </view>
            <input type="number" class="adjustment" value="" name="code" maxlength="6" placeholder="请输入验证码"
              placeholder-style="color:#cccccc;width:200rpx;" />
            <button class="obtain" :disabled="disabled" :class="isPhone?'active':''" @click="obtainCode">
              {{verification}}
              <!-- {{time}} -->
            </button>
          </view>
          <!-- <view class="invitation">
            <view class="name">
              邀请码
            </view>
            <input type="text" :value="code" name="invitation" placeholder="请输入邀请码" maxlength="8"
              @input="invitationCode" placeholder-style="color:#cccccc;" />
          </view> -->
          <view class="password">
            <view class="name">
              登录密码
            </view>
            <input type="password" name="password" value="" @input="onPass" placeholder="请输入登录密码" maxlength="11"
              placeholder-style="color:#cccccc;" />
          </view>
        </view>
        <!-- 协议问题 -->
        <view class="choice">
          <view class="whole">
            <view class="top" v-if="flag" @click="onFlag">
              <icon type="success" color="#FF0000" size="17"></icon>
            </view>
            <view v-else style="width: 34rpx;height: 34rpx;border-radius: 50%;border: #ccc solid 1rpx;" @click="onFlag">
            </view>
          </view>
          <view class="agree">
            已阅读并同意<text @click="goToAgreement">《用户隐私协议》</text>
          </view>
        </view>

        <!-- 按钮 -->
        <view class="button">
          <button class="agree-register" form-type="submit">
            确认提交
          </button>
          <view class="go-to-login" @click="goToLogin()">
            去登录
          </view>
          <view class="go-to-login" @click="goToDownload()">
            已注册，去下载
          </view>
        </view>
      </form>
    </div>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 头部导航
        config: {
          back: false, //false是tolbar页面 是则不写
          title: '',
          color: '#fff',
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, "transparent"],
          statusBarFontColor: '#1A1A1A',
        },
        phone: "", //手机号
        disabled: false, //按钮
        isPhone: false, //手机号正则
        password: "",
        invitation: "",
        time: 60, //倒计时
        verification: "获取验证码",
        active: null,
        flag: false,
        code: null,


      }
    },
    onLoad(options) {
      console.log(options)
      this.code = options.code
    },
    methods: {
      //跳转协议{
      goToAgreement() {
        uni.navigateTo({
          url: "./agreement"
        })
      },

      //跳转下载
      goToDownload() {

        uni.navigateTo({
          url: "./down"
        })

      },

      //跳转到登录页
      goToLogin() {
        // window.location.href = "lida://&pageType=4";
        window.location.href = "lmzc://&pageType=4";
        // window.location.href = "hbuilder://&pageType=4";
        setTimeout(() => {
          uni.showModal({
            title: "该应用尚未下载,是否下载？",
            success(res) {
              if (res.confirm) {
                uni.navigateTo({
                  url: "./down"
                })
              }
            }
          })
        }, 500)

      },
      //倒计时
      countDown() {
        var that = this
        if (that.time <= 0) {
          that.disabled = false;
          that.verification = "重新获取";
          that.isPhone = true;
          that.time = 60
          clearInterval(that.clear);
        } else {
          --that.time;
          that.verification = this.time + "s";
        }
      },

      //获取验证码

      async obtainCode() {
        if (this.isPhone) {
          this.$http.get("/account/verify-mobile/" + this.phone, ).then(res => {
            if (res && res.code == 200) {
              if (res.data == true) {
                this.$mUtil.toast("该手机号已被注册")
              } else if (res.data == false) {
                let res = this.$http.post('/common/account/getVerfityCode', this.phone).then(
                  res => {
                    if (res && res.code == 200) {
                      this.disabled = false;
                      this.isPhone = false;
                      this.verification = this.time + 's';
                      this.clear = setInterval(this.countDown, 1000);
                      this.$mUtil.toast("发送成功")
                    } else {
                      this.$mUtil.toast(res.msg)
                    }
                  })
              }
            }
          })
        }
      },
      beforeDestroy() {
        clearInterval(this.clear)
      },
      //邀请码
      invitationCode(e) {
        let invitationCode = e.detail.value
        this.invitation = invitationCode
        console.log(this.invitation)
      },
      // 手机号
      onPhone(e) {
        let onPhone = e.detail.value
        this.phone = onPhone
        if (onPhone.match(this.$mConfig.telRegex)) {
          if (this.verification == '获取验证码' || this.verification == '重新获取') {
            this.isPhone = true
          }
        } else {
          this.isPhone = false
        }

      },
      onPass(e) {
        let onPass = e.detail.value
        this.password = onPass
      },
      //同意并注册
      formSubmit(e) {
        let target = e.detail.value;
        if (!target.phone) {
          this.$mUtil.toast('请输入手机号')
          return false
        }
        if (!(target.phone.match(this.$mConfig.telRegex))) {
          this.$mUtil.toast('请输入正确手机号')
          return false
        }
        if (!target.code) {
          this.$mUtil.toast("请输入验证码")
          return false
        }
        // if (!target.invitation) {
        //   this.$mUtil.toast("请输入邀请码")
        //   return false
        // }
        if (!target.password) {
          this.$mUtil.toast("请输入登录密码")
          return false
        }
        if (!this.flag) {
          this.$mUtil.toast('请先同意协议')
          return false
        }
        let param = {
          mobile: target.phone,
          captcha: target.code,
          // invitation_code: target.invitation,
          invitation_code: this.code,
          password: target.password,
        }
        this.$http.post("/account/app/register", param)
          .then(res => {
            console.log(res)
            if (res && res.code == 200) {
              this.$mUtil.toast("注册成功")
              setTimeout(() => {
                uni.navigateTo({
                  url: '/pages/down'
                })
              }, 1000)
            }
          })

      },
      // 协议
      onFlag() {
        this.flag = !this.flag
      },
      radioChange(index) {
        if (this.active == index) {
          this.active == null;
        } else {
          this.active = index
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .button {
    margin: 70rpx 50rpx;

    .agree-register {
      color: #FFFFFF;
      font-weight: Regular;
      font-size: 32rpx;
      // padding: 22rpx 0rpx;
      width: 100%;
      text-align: center;
      background-color: #3D93FC;
      border-radius: 45rpx;
    }

    .go-to-login {
      color: #3D93FC;
      font-weight: Regular;
      font-size: 32rpx;
      padding: 17rpx 0;
      width: 100%;
      text-align: center;
      margin-top: 24rpx;
      border: 1rpx solid #3775F6;
      border-radius: 45rpx;
      background: #e7eefc;
    }
  }

  .agree {
    font-size: 28rpx;
    color: #999999;
    font-weight: Regular;
    margin-left: 10rpx;

    text {
      color: #0047B1;
    }
  }

  .choice {

    margin: 0 50rpx;
    display: flex;
    justify-content: center;

    .whole {
      display: flex;

      .top {
        display: flex;
      }
    }
  }

  .password {
    display: flex;
    align-items: center;
    padding: 40rpx 0 40rpx 0;
    border-bottom: 1rpx solid #E6E6E6;

    .name {
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
      margin-right: 40rpx;
      flex-shrink: 0;
    }
  }

  .invitation {
    display: flex;
    align-items: center;
    padding: 40rpx 0 40rpx 0;
    border-bottom: 1rpx solid #E6E6E6;

    .name {
      font-size: 28rpx;
      font-weight: Medium;
      color: #333333;
      margin-right: 40rpx;
      flex-shrink: 0;
    }
  }

  .verification {
    display: flex;
    flex-wrap: nowrap;
    padding: 40rpx 0 34rpx 0;
    align-items: center;
    border-bottom: 1rpx solid #E6E6E6;

    .name {
      font-size: 28rpx;
      color: #333333;
      line-height: 28rpx;
      font-weight: 500;
      margin-right: 40rpx;
    }

    .adjustment {
      flex: 1;
    }

    .obtain {
      // padding: 14rpx 30rpx;
      padding: 0 30rpx;
      color: #999;


      font-size: 28rpx;
      font-weight: Regular;
      border: 1rpx solid #B3B3B3;
      border-radius: 36rpx;
    }

    .active {
      background-color: #e7eefc;
      color: #3775F6;
      border: 1rpx solid #3775F6;
    }
  }

  .register {
    

    .header {
      position: relative;
      height: 506rpx;
      background: url('@/static/login/register-heder-bg.png');
      background-size: cover;
      text-align: center;
      color: #fff;
      
      /deep/ .hx-navbar__icon {
        color: #fff !important;
      }

      .register-title {
        margin-top: 67rpx;
        font-size: 48rpx;
        font-weight: normal;
      }

      .register-code {
        margin-top: 17rpx;
        font-size: 32rpx;
        font-weight: normal;
      }
    }

    .body {
      // position: absolute;
      background-color: #fff;
      // z-index: 9;
      // top: 406rpx;
      // background: url('@/static/login/register-bg.png');
      background-size: cover;
    }

    .item {
      margin: 118rpx 50rpx 40rpx 50rpx;

      .top {
        font-size: 38rpx;
        font-weight: Bold;
        color: #333333;
        line-height: 28rpx;
      }

      .phone {
        display: flex;
        align-items: center;
        padding: 40rpx 0 34rpx 0;
        border-bottom: 1rpx solid #E6E6E6;

        .name {
          margin-right: 40rpx;
          flex-shrink: 0;
        }
      }
    }

  }
</style>