front/pages/user/setting/password.vue

<template>
  <view class="container bg-main pos-r" v-if="fetch && fetch.user">
    <use-tabbar :tabbar="false"></use-tabbar>

    <!-- 内容区域 -->
    <view class="padding-xl dflex-c dflex-flow-c">
      <!-- 头像 -->
      <view class="portrait-box margin-bottom">
        <image class="headimg border-radius-c" :src="fetch.user.avatar"/>
      </view>

      <!-- 手机号输入框（只读） -->
      <view class="w-full dflex padding-bottom-sm">
        <view class="iconfont iconshouji margin-right"></view>
        <view class="flex1 dflex">
          <input class="border-line padding-sm flex1" type="text" :disabled="disabled" placeholder="请输入手机号" maxlength="11" v-model="fetch.user.mobile"/>
        </view>
      </view>

      <!-- 密码输入框 -->
      <view class="w-full dflex padding-bottom-sm">
        <view class="iconfont iconmima margin-right"></view>
        <input class="border-line padding-sm flex1" type="password" placeholder="请输入新密码" maxlength="20" v-model="password"/>
      </view>

      <!-- 验证码输入框 -->
      <view class="w-full dflex padding-bottom-sm">
        <view class="iconfont iconyanzheng margin-right"></view>
        <view class="border-line flex1 dflex">
          <input class="padding-sm flex1" type="number" placeholder="请输入验证码" maxlength="6" v-model="code"/>
          <view class="padding-tb-sm ft-base" @tap="sendCode">{{ codeText }}</view>
        </view>
      </view>

      <!-- 提交按钮 -->
      <view class="w-full margin-top-xl" @click="act">
        <view class="dflex-b border-radius-lg">
          <view class="tac padding-tb-sm flex1 bg-base fs">确定</view>
        </view>
      </view>
    </view>

  </view>
</template>


<script>
	export default {
		data() {
			return {
				fetch: {
					user: {
						mobile: '',
						avatar: '',
					}
				},
				disabled:true,
				password: '',
				code: '',
				codeText: '发送验证码',
				countdown: 0,
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			loadData() {
				if (this.DeverApi.getToken()) {
					this.DeverApi.get(this, 'user.info');
				} else {
					this.disabled = false;
					this.Dever.config().then(config => {
						this.fetch.user.avatar = config.l;
					});
				}
			},
			act() {
				if (this.DeverApi.getToken()) {
					// 修改密码
					var url = 'user.pwd';
				} else {
					var url = 'main.reset';
					// 重置密码
					if (!/^1\d{10}$/.test(this.fetch.user.mobile)) {
						return this.Dever.alert('请输入有效手机号');
					}
				}
				if (!this.password) {
					return this.Dever.alert('密码不能为空');
				}
				if (this.password.length < 6) {
					return this.Dever.alert('密码长度不能少于6位');
				}
				if (this.password.length > 32) {
					return this.Dever.alert('密码长度不能超过32位');
				}
				if (!this.code) {
					return this.Dever.alert('请输入验证码');
				}
				
				this.DeverApi.post(url, {mobile:this.fetch.user.mobile,code:this.code,pwd:this.password}, r => {
					this.Dever.success('修改成功')
					if (url == 'user.pwd') {
						this.Dever.location('user/setting/security', 'go');
					} else {
						this.Dever.location('user/login', 'go');
					}
				});
			},
			sendCode() {
				if (this.countdown > 0) return
				if (this.DeverApi.getToken()) {
					var url = 'user.sms'
				} else {
					if (!/^1\d{10}$/.test(this.fetch.user.mobile)) {
						this.Dever.alert('请输入有效手机号')
						return
					}
					var url = 'main.sms'
				}
				this.DeverApi.post(url, {mobile:this.fetch.user.mobile}, r =>  {
					if (r.indexOf('::') != -1) {
						var t = r.split('::');
						r = t[0];
						this.code = t[1];
					}
					this.Dever.success(r)
					this.countdown = 60
					this.updateCodeText()
				});
			},
			updateCodeText() {
				if (this.countdown === 0) {
					this.codeText = '发送验证码'
					return
				}
				this.codeText = `${this.countdown}s`
				setTimeout(() => {
					this.countdown--
					this.updateCodeText()
				}, 1000)
			},
		}
	}
</script>

<style>
	.container {
	    padding-top: 5vh;
	    width: 100vw;
	    min-height: 100vh;
	    overflow: hidden;
	}
	uni-image {
	    width: 62px;
	    height: 62px;
	    border: 2px solid #fff;
	}
</style>