hlm_pl_mall_h5/pages/home/memberregister/RegisterByMobile.vue

<template>
	<view class="div container">
		<view class="div section-wrapper top-wrapper">
			<flex-line class="field-line input-wrapper" :show-border="true"><view class="div field-line-right" slot="right"><input class="field-input" v-model="username" placeholder="请输入手机号" type="number" :attr="{ oninput: 'if(value.length>11)value=value.slice(0,11)' }" /></view></flex-line>
			<flex-line class="field-line input-wrapper" :show-border="true"><view class="div field-line-right" slot="right"><input class="field-input"  v-model="code" placeholder="请输入短信验证码" type="number" :attr="{ oninput: 'if(value.length>6)value=value.slice(0,6)' }" /><view @click="sendVerifyCodeMobile" class="div common-btn send-btn">{{sendStateTextMobile}}</view></view></flex-line>
			<flex-line class="field-line input-wrapper" :show-border="true"><view class="div field-line-right" slot="right"><input class="field-input" type="password" v-model="password" placeholder="设置密码" maxlength="20" /></view></flex-line>
			<flex-line class="field-line input-wrapper" :show-border="true"><view class="div field-line-right" slot="right"><input class="field-input" type="password" v-model="confirmPassword" placeholder="确认密码" maxlength="20" /><label v-if="!confirmPassword" class="tips">6-20位数字/字母/符号</label></view></flex-line>
		</view>
		<view class="div common-btn ds-button-large mt-10 mb-10" @click="onSubmit">注册</view>
		<view class="div link-wrapper">
			<text class="span left-text">点击注册表示同意</text>
			<text class="span right-text" @click="onAgreement">《用户协议》</text>
		</view>
	</view>
</template>

<script>
import { urlencode } from '@/util/common'
import { mapState, mapMutations } from 'vuex'
import { registerByMobile } from '../../../api/memberRegister'
import { getSmsCaptcha } from '../../../api/common'
import flexLine from '../../flexLine'
export default {
  name: 'RegisterByMobile',
  data () {
    return {
      username: '',
      code: '',
      password: '',
      confirmPassword: '',
      aggrementUrl: '',
      verifyCodeMobile: '',
      canSendMobile: true,
      timeIntervalMobile: false,
      sendStateTextMobile: '发送'
    }
  },
  components: {
    flexLine
  },
  mounted () {

  },
  created: function () {

  },
  computed: {
    ...mapState({
      inviter_id: state => state.member.inviterId
    })
  },

  beforeDestroy: function () {
    clearInterval(this.timeIntervalMobile)
  },
  methods: {
    ...mapMutations({
      saveAuthInfo: 'memberLogin'
    }),
    goBack () {
      uni.navigateBack({delta:1})
    },
    goProfile () {
      uni.navigateBack({delta:2})
    },
    goProfileAdd () {
      uni.navigateTo({ url: 'profileAdd' })
    },

    sendVerifyCodeMobile () {
      if (!this.username) {
        uni.showToast({icon:'none',title: '请先输入手机号'})
        return
      }
      if (!this.canSendMobile) {
        return
      }
      getSmsCaptcha(1, this.username).then(res => {
        this.canSendMobile = false
        let second = 60
        uni.showToast({icon:'none',title: res.message})
        let _this = this
        this.timeIntervalMobile = setInterval(function () {
          if (second <= 0) {
            _this.canSendMobile = true
            _this.sendStateTextMobile = '发送'
            clearInterval(_this.timeIntervalMobile)
          } else {
            _this.sendStateTextMobile = second + 's'
          }
          second--
        }, 1000)
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    check () {
      let username = this.username
      let code = this.code
      let password = this.password
      let confirmPassword = this.confirmPassword
      if (username.length === 0) {
        uni.showToast({icon:'none',title: '请输入手机号'})
        return false
      }
      if (code.length === 0) {
        uni.showToast({icon:'none',title: '请输入验证码'})
        return false
      }
      if (code.length !== 6) {
        uni.showToast({icon:'none',title: '请输入6位验证码'})
        return false
      }
      if (password.length === 0) {
        uni.showToast({icon:'none',title: '请输入密码'})
        return false
      }
      if (password.length < 6 || password.length > 20) {
        uni.showToast({icon:'none',title: '请输入6-20个字符的密码'})
        return false
      }
      if (confirmPassword.length === 0) {
        uni.showToast({icon:'none',title: '请输入确认密码'})
        return false
      }
      if (password.length !== confirmPassword.length) {
        uni.showToast({icon:'none',title: '确认密码与输入密码不一致'})
        return false
      }
      if (password !== confirmPassword) {
        uni.showToast({icon:'none',title: '确认密码与输入密码不一致'})
        return false
      }
      return true
    },
    signup () {
      if (!this.check()) {
        return
      }
      uni.showLoading({ title: '加载中' })
      let inviterId = this.inviter_id // 获取邀请人id

      registerByMobile(this.username, this.password, this.confirmPassword, this.code, inviterId).then(
        response => {
          uni.hideLoading()
          this.saveAuthInfo({ token: response.result.token, info: response.result.info })
          uni.navigateTo({ url: '/pages/member/index/Index' })
        },
        error => {
          uni.hideLoading()
          uni.showToast({icon:'none',title: error.message})
        }
      )
    },
    onSubmit () {
      this.signup()
    },
    onAgreement () {
      uni.navigateTo({ url: '/pages/home/article/Document'+'?'+urlencode( { type: '' })})
    }
  }
}
</script>

<style scoped lang="scss">
	.ds-button-large{margin:0 $pageSpace}
	.container {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		//background-color: $primaryColor;
		.input-wrapper {
			font-size:$subFontSize;
			display: flex;
			flex-direction: row;
			align-content: flex-start;
			align-items: center;
			background-color: #fff;
			height:2.2rem;
			padding-left:0.5rem;
			input {
				flex: 1;
			}
			.bottom-input {
				border-bottom-width: 0;
			}
			.img{height:1.75rem}
		}
		.link-wrapper {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: stretch;
			.span {
				font-size:$subFontSize;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
			.left-text {
				color: $descTextColor;
			}
			.right-text {
				color: $primaryColor;
			}
		}
	}
	.top-wrapper {margin:0 $pageSpace;}
	.bottom-wrapper {margin-top:0.5rem;}
	.tips {
		color: $descTextColor;
		font-size:$fontSize;
		white-space: nowrap;
		position: absolute;
		right: 0;
		top:50%;
		margin-top:-.3rem;
	}
	.countdown {min-width:4rem;margin-right:0.5rem;}
	.send-btn{border:1px solid $primaryColor;color:$primaryColor;min-width: 2rem}
	.field-line-right{position: relative;
    .field-input{
      text-align: left !important;
    }
  }
</style>