hlm_pl_mall_h5/pages/home/memberbind/BindNew.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 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 { bind, getThirdLogin } from '../../../api/memberLogin'
import flexLine from '../../flexLine'
export default {
  name: 'BindNew',
  data () {
    return {
      query:{},
      username: '',
      password: '',
      confirmPassword: '',
      aggrementUrl: '',
      wxinfo: false
    }
  },
  components: { flexLine },
  mounted(){
    var pages = getCurrentPages()
    var page = pages[pages.length - 1]
    this.query = page.options

    getThirdLogin(this.query.id).then(res => {
      let wxinfo = res.result.wxinfo
      if (!wxinfo) {
        uni.showToast({icon:'none',title: '绑定信息不存在'})
        uni.navigateTo({url: '/pages/home/memberlogin/Login' })
      } else {
        this.wxinfo = wxinfo
      }
    })
  },
  computed: {
    ...mapState({
      inviter_id: state => state.member.inviterId
    })
  },
  methods: {
    ...mapMutations({
      saveAuthInfo: 'memberLogin'
    }),
    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: '加载中' })
      bind(1, 'wx', this.wxinfo.openid, this.wxinfo.unionid, this.wxinfo.nickname, this.wxinfo.headimgurl, this.username, this.password, this.confirmPassword, this.inviter_id).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;
			}
		}
		.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;
	}
	.field-line-right{position: relative;
	  .field-input{
	    text-align: left !important;
	  }
	}
</style>