hlm_pl_mall_h5/pages/home/memberforget/Forget.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
	<home-base :show="false"><view class="div container">
		<view class="div common-header-wrap">
			<view :style="'height:'+navHeight+'px'"></view>
			<view class="common-header-holder"></view>
			<view class="common-header-fixed">
			<title-header />
			<uni-nav-bar title="密码找回" class="common-header" left-icon="back" @clickLeft="goBack()">
			</uni-nav-bar>
		</view>
		</view>
		<view class="div main-content">
			<view class="div topList">
				<view class="div list">
					<view class="div item">
						<label class="title active">忘记密码</label>
					</view>
				</view>
			</view>
			<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" type="number" v-model="username" placeholder="请输入手机号" :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" type="number" v-model="verifyCodeMobile" placeholder="验证码" :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 find_the_password_help">如果账号还没有绑定手机号，请联系平台管理员找回密码</view>
			<view class="div common-btn ds-button-large mt-10" @click="onSubmit">确定</view>
		</view>

	</view></home-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import HomeBase from '../HomeBase'
import { forget } from '../../../api/memberForget'
import { getSmsCaptcha } from '../../../api/common'
import { mapMutations, mapActions, mapState } from 'vuex'
import flexLine from '../../flexLine'
export default {
  name:'HomeMemberForget',
  components:{
    TitleHeader,
    HomeBase,
    flexLine
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
      navHeight: 0,
      username: '',
      password: '',
      confirmPassword: '',
      verifyCodeMobile: '',
      canSendMobile: true,
      timeIntervalMobile: false,
      sendStateTextMobile: '发送'
    }
  },
  beforeDestroy: function () {
    clearInterval(this.timeIntervalMobile)
  },
  methods:{
    goBack(){uni.navigateBack({delta:1})},
    ...mapMutations({
      saveAuthInfo: 'memberLogin'
    }),
    onSubmit () {
      forget(this.username, this.verifyCodeMobile, this.password, this.confirmPassword).then(
        response => {
          this.saveAuthInfo({ token: response.result.token, info: response.result.info })
          uni.navigateTo({url:'/pages/member/index/Index'})
        },
        error => {
          uni.showToast({icon:'none',title: error.message})
        }
      )
    },
    sendVerifyCodeMobile () {
      if (!this.canSendMobile) {
        return
      }
      getSmsCaptcha(3, 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})
      })
    }
  }
}
</script>

<style scoped lang="scss">
	.ds-button-large{margin:0 $pageSpace}
	.container {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		.main-content{background: #fff;padding:1rem 0;}

		.input-wrapper {
			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;
				font-size:$subFontSize
			}
			.bottom-input {
				border-bottom-width: 0;
			}
		}
	}
	.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;
	  }
	}
	.send-btn{border:1px solid $primaryColor;color:$primaryColor;min-width: 2rem}
	.topList {
		height:2rem;
		padding:1rem $pageSpace;
		.list {
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-content: center;
			align-items: stretch;
			background-color: #fff;
		}
		.item {
			padding:0 .5rem;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.title {
			text-align: center;
			font-size:$h2;
			color: $formInputColor;
		}
		.active {
			color: $primaryColor;
			font-size:1.1rem;
		}
		.normal {
			color: #404245;
		}

	}
        .find_the_password_help{margin: 0 .6rem;font-size:$subFontSize;padding-top: .5rem;color: $descTextColor }
</style>