LSM_OIL_SITE_zhongping/packageSecurity/setPassword/setPassword.vue

<template>
	<view class="page-content">
		<cu-custom :isBack="true" class="main-topbar bg-main-oil" bgColor="bg-main-oil">
			<block slot="content">绑定中品云站</block>
			<block slot="backText">返回</block>
		</cu-custom>
		<view class=" margin radius cu-card shadow no-card  padding-top padding-bottom ">
			<view class="radius  ">
				<!-- 		<view class="cu-form-group">
				<view class="title text-black">工号</view>
				<input v-model="oilSiteNo" placeholder="请输入云站编号" name="input"></input>
			</view> -->
				<view class="cu-form-group">
					<view class="title text-black mini-label">手机号</view>
					<view class="text-right">
						{{loginUser.userPhone}}
					</view>
				</view>
				<view class="cu-form-group">
					<input type="number" class="padding-left-xs" :maxlength="6" v-model="auth.authCode" placeholder="请输入六位数字验证码" name="input"></input>
					<text :class="frozen?'text-gray':'oil-main-color'" @tap="sendMsg">{{tips}}</text>
				</view>
				<view class="cu-form-group">
					<view class="title text-black mini-label">新密码</view>
					<input type="password" v-model="pwd" class="text-right" placeholder="请输入新密码" name="input"></input>
				</view>
				<view class="cu-form-group solid-bottom">
					<view class="title text-black mini-label">确认密码</view>
					<input type="password" v-model="authpwd" class="text-right" placeholder="请确认密码" name="input"></input>
				</view>
			</view>
		</view>
		<view class="margin-left">
			<text class="cuIcon-infofill padding-right-xs text-sm oil-main-color"></text>
			<text class="text-sm">密码必须至少8个字符，而且同时包含字母和数字</text>
		</view>
		<view class="margin padding-top-lg margin-top-xl">
			<button class="bg-main-oil" @tap="comfirmPwd">
				确定
			</button>
		</view>
	</view>
</template>

<script>
	import cloudSiteApi from '@/api/cloud-site.js'
	import oliUserApi from '@/api/oli-user.js'
	import md5 from 'js-md5'
	export default {
		data() {
			return {
				tips: '发送验证码',
				frozen: false, // 验证码冷却时间
				auth: {},
				verifyCodeToken:'',
        pwd:"",
        authpwd:"",
				loginUser: uni.getStorageSync('loginUser')
			}
		},
		methods: {
			// 确认修改
			comfirmPwd() {
				if (!this.auth.authCode) {
					uni.showToast({
						title: '请输入验证码',
						icon: "none"
					});
					return false
				}
				if (!this.pwd) {
					uni.showToast({
						title: '请输入新密码',
						icon: "none"
					});
					return false
				}

				if (!this.authpwd) {
					uni.showToast({
						title: '请确认新密码',
						icon: "none"
					});
					return false
				}
				if (this.authpwd.length < 8) {
					uni.showToast({
						title: '密码至少8个字符',
						icon: "none"
					});
					return false
				}
				if (this.pwd === this.authpwd) {
					const data3 = {
						phone: this.loginUser.userPhone,
						code: this.auth.authCode,
						oldPassword: md5(this.pwd),
						verifyCodeToken:this.verifyCodeToken,
						password: md5(this.authpwd),
						id:this.loginUser.id
					}
					oliUserApi.changePwd(data3).then(res => {
						if (res.code == 20000) {
							uni.showToast({
								title: res.msg
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1500);
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '两次输入密码不一致'
					})
				}
			},
			sendMsg() {
				if (!this.frozen) {
					const data2 = {
						phone: this.loginUser.userPhone
					}
					oliUserApi.changePwdSms(data2).then(res => {
						console.log('res', res)
						this.verifyCodeToken = res.data.verifyCodeToken
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						if (res.code == 20000) {
							this.frozen = true
							let second = 60
							this.tips = `${second}秒后重发`
							setTimeout(() => {
								this.frozen = false
								clearInterval(timer)
								this.tips = `发送验证码`
							}, 1000 * 60);

							const timer = setInterval(() => {
								second--
								if (second) {
									this.tips = `${second}秒后重发`
								} else {
									this.tips = `发送验证码`
								}
							}, 1000)
						}

					})
				}
			},
		}
	}
</script>

<style scoped>
	.shadow {
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	}
</style>