hlm_pl_mall_h5/pages/home/memberregister/RegisterByEmail.vue

<template>
	<view class="div container">
		<view class="div 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="用户名" maxlength="25" /><label v-if="!username" class="tips">用户名为3-25位，可以包含英文与数字</label></view></flex-line>

			<!-- <flex-line v-if="config.captcha_status_register=='1'" class="field-line input-wrapper" :show-border="true"><view class="div field-line-right" slot="right"><input class="field-input" v-model="pictureCode" placeholder="请输入图片验证码" maxlength="6" /><image mode="aspectFit" @click="changePictureCode" :src="pictureCodeUrl" class="img countdown" ></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, mapActions } from 'vuex'
import { register } from '../../../api/memberRegister'
import { getSmsCaptcha, checkPictureCaptcha } from '../../../api/common'
import flexLine from '../../flexLine'
import { env } from '../../../static/config'
export default {
  name: 'RegisterByEmail',
  data () {
    return {
      pictureCodeUrl: '',
      pictureCode: '',
      pictureCodeValid: false,
      pictureCodeWait: false,
      username: '',
      password: '',
      confirmPassword: '',
      aggrementUrl: ''
    }
  },
  components: {
    flexLine
  },
  created: function () {
    this.fetchConfig({}).then(
      response => {
      },
      error => {
        uni.showToast({icon:'none',title: error.message})
      }
    )
  },
  computed: {
    ...mapState({
      inviter_id: state => state.member.inviterId,
      config: state => state.config.config
    })
  },
  mounted () {
    // this.changePictureCode()
  },
  methods: {
    ...mapMutations({
      saveAuthInfo: 'memberLogin'
    }),
    ...mapActions({
      fetchConfig: 'fetchConfig'
    }),
    changePictureCode () {
      this.pictureCodeUrl = env.API_HOST + '/Seccode/makecode?r=' + Math.random()
    },
    goBack () {
      uni.navigateBack({delta:1})
    },
    goProfile () {
      uni.navigateBack({delta:2})
    },
    goProfileAdd () {
      uni.navigateTo({ url: 'profileAdd' })
    },
    check () {
      let username = this.username
      let password = this.password
      let confirmPassword = this.confirmPassword
      if (username.length === 0) {
        uni.showToast({icon:'none',title: '请输入3-25个字符的用户名'})
        return false
      }
      if (username.length < 3 || username.length > 25) {
        uni.showToast({icon:'none',title: '请输入3-25个字符的用户名'})
        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
      register(this.username, this.password, this.confirmPassword, inviterId, this.pictureCode).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">
	.flex-line /deep/ .right{max-width: 100%;}
	.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;
			.img {
				height: 1.75rem;width: auto;
				margin: 0;
				padding: 0;
			}
			input {
				flex: 1;
			}
			.bottom-input {
				border-bottom-width: 0;
			}
		}
		.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;}
	.field-line-right{position: relative;
    .field-input{
      text-align: left !important;
    }
  }
</style>