tourGuide/subPackages/user/changePassword.vue

<template>
	<view class="bg">
		<view class="item flex-between">
			<view>导游ID</view>
			<view>{{userInfo.mobile}}</view>
		</view>
		<view class="item flex-between">
			<view>手机号</view>
			<view>{{userInfo.mobile}}</view>
		</view>
		<view class="item flex-between">
			<view>短信验证码</view>
			<view class="flex">
				<input  type="text" v-model="verifyCode">
				<view @click="getMobileCode()" class="getCode">{{ getCodeBtnTxt }}</view>
			</view>
		</view>
		
		<view class="item flex-between" >
			<view>新密码</view>
			<view>
				<input  type="password" v-model="password">
			</view>
		</view>
		<view class="item flex-between" >
			<view>确认密码</view>
			<view>
				<input  type="password" v-model="confirmPassword">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				verifyCode: '',
				password: '',
				confirmPassword: '',
				getCodeBtnTxt: '获取验证码',
				smsCodeId: ''
			}
		},
		onShow() {
			this.userInfo = (uni.getStorageSync('userInfo') && JSON.parse(uni.getStorageSync('userInfo'))) || this.$store.state.user.userInfo || {}
			console.log(this.userInfo)
		},
		methods: {
			getCode(){
				let that = this
				if (!this.isCanSend) return;
				that.isCanSend = false
				var params = {
					url: '',
					mobile: this.userInfo.mobile,
					captchaCode: that.captchaCode,
					captchaCodeId: that.captchaCodeId,
				}
				this.Post({},'/api/uservice/user/getMobileCodeForBind').then(res=>{
					this.smsCodeId = res
				})
			},
			
			changeGetCodeBtn() {
				let that = this
				let second = 60;
				let timer = setInterval(() => {
					second--;
					if (second) {
						that.getCodeBtnTxt = second + "s重新获取"
					} else {
						clearInterval(timer);
						that.isCanSend = true
						// 手动清除 Toast
						that.getCodeBtnTxt = "获取验证码"
					}
				}, 1000);
			},
			bindMobile() {
				let that = this
				that.mobile = that.userInfo.mobile.trim()
				if (that.smsCodeId == 0) {
					that.$toast("请先获取验证码")
					return;
				}
				that.mobileCode = that.mobileCode.trim()
				if (that.mobileCode.length < 6) {
					that.$toast("请输入手机验证码")
					return;
				}
				this.Post({},'/api/uservice/user/getMobileCodeForBind').then(res=>{
					uni.showToast({
						title:'修改成功，请重新登录',icon:"none"
					})
					setTimeout(()=>{
						that.$store.commit('changeUserInfo', null)
						uni.navigateTo({
							url:"/pages/login/login"
						})
					},1000)
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		min-height: 100vh;
		background: #F5F5F5;
		padding: 0 26rpx;
	}
	
	.item {
		height: 110rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		border-bottom: 1rpx solid #D8D8D8;
	}
	input{
		text-align: right;
	}
	
	.getCode{
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		background: #96684F;
		border-radius: 7rpx;
		width: 153rpx;
		height: 53rpx;
		text-align: center;
		line-height: 53rpx;
		margin-left: 10rpx;
	}

</style>