dtx_store/pages/account/resetPassword.vue

<template>
	<view class="content">
		<!-- 设置支付密码 -->
		<view class="password">
			<view class="prompt">
				<view class="prompt-code">验证码发送至{{phone}} 
                 <!-- <button size="mini" :disabled="getCodeState" @click="getCode">{{sendCode}}</button> -->
                </view>
				<view>请设置6位数字密码。建议不要使用连续的数字。</view>
			</view>
			<view class="group">
				<view class="inputs">
					<label>设置支付密码</label>
					<input type="number" v-model="password" maxlength="6" password placeholder="请设置支付密码" />
				</view>
				<view class="inputs">
					<label>确认支付密码</label>
					<input type="number" v-model="verify" maxlength="6" password placeholder="请确认支付密码" />
				</view>
				 <view class="getCode">
				     <view class="inputs">
				     	<label>验证码</label>
				     	<input type="number" v-model="code" maxlength="4" placeholder="请输入验证码" />
				     </view>
				     <view class="time" @click="!canGet ? '':getCode()">
				          {{sendCode}}
				     </view>
				 </view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="buttons">
			<button type="default" form-type="submit" @click="createWallet">确认</button>
		</view>
	</view>
</template>

<script>
	import { setpassword, getSms } from '@/apis/interfaces/account'
	export default {
		data() {
			return {
				sendCode	: '获取验证码',
                canGet      : true,
				getCodeState: true,
				phone		: '',
				code		: '',
				password	: '',
				verify		: '',
                outTime     : '',
			}
		},
		onLoad() {
			this.phone = this.$Route.query.phone
		},
        onUnload() {
           clearInterval(this.outTime) 
        },
		methods: {
            
			// 获取验证码
			getCode(){
				let smsTime = 60;
				getSms().then(res => {
                    this.canGet =  false
					uni.showToast({
						title: res.message,
						icon: "none",
					});
                    this.phone = res.mobile
					this.getCodeState   = true;
					this.sendCode = smsTime + 's后重新获取';
					this.outTime = setInterval(() => {
                        console.log(smsTime);
						if (smsTime <= 1) {
							this.getCodeState   = false;
							this.sendCode = '重新获取';
                            this.canGet =  true;
							clearInterval(this.outTime);
							return
						}
						this.sendCode = smsTime + 's后重新获取';
						smsTime -= 1;
					}, 1000);
				}).catch((err) => {
                    this.canGet =  true;
                    clearInterval(this.outTime)
					uni.showToast({
						title: err.message,
						icon: "none",
					});
				});
			},
			// 激活钱包
			createWallet() {
				if (this.password === '' || this.verify === '') {
					uni.showToast({
						icon: 'none',
						title: '请设置支付密码'
					})
					return
				}
				if (this.password !== this.verify) {
					uni.showToast({
						icon: 'none',
						title: '两次输入密码不一致'
					})
					return
				}
				setpassword({
					password: this.password,
					password_confirmation: this.verify,
					code: this.code
				}).then(res => {
					uni.showModal({
						title: '提示',
						content: res,
						showCancel:false,
						success: res=> {
                            this.canGet =  true;
                            clearInterval(this.outTime)
							uni.navigateBack()
						}
					})
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err.message
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background: $window-color;
		min-height: 100vh;
		overflow: hidden;
	}
	// 副标题
	.sub-title {
		color: $text-gray;
		text-align: center;
		margin: $margin * 2 $margin;
		font-size: $title-size-m;
	}
	// 设置密码
	.password {
		padding: 0 $padding;

		.prompt {
			margin-top: $margin * 2;
			font-size: $title-size-m;
			color: gray;
			text-align: center;
			&-code{
				line-height: 50rpx;
				button[size="mini"]{
					vertical-align: top;
					margin-left: 20rpx;
					font-size: $title-size-m;
					background: transparent;
					color: $main-color;
					height: 50rpx;
					line-height: 50rpx;
					width: auto;
					padding: 0;
					&::after{
						display: none;
					}
				}
			}
		}

		.group {
			margin-top: $margin;
			border-radius: $radius-m;
			box-shadow: 0 0 4rpx 4rpx rgba($color: $text-color, $alpha: .02);
			background-color: white;

			.inputs {
				padding: $padding $padding + 10;
				border-bottom: solid 1rpx $border-color;

				&:last-child {
					border-bottom: none;
				}

				label {
					color: $text-gray;
					font-size: $title-size-m;
				}

				input {
					height: 70rpx;
					line-height: 70rpx;
					font-size: $title-size;
				}
			}
		}
	}

	// 按钮
	.buttons {
		padding: $padding*2 $padding;
		button {
			border-radius: 45rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-color: $main-color;
			color: white;
			font-weight: bold;
			font-size: $title-size;
			&::after{
				display: none;
			}
		}
	}
    .getCode{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        width: 100%;
        .time{
            padding:20rpx 30rpx 20rpx 20rpx;
			font-size: 30rpx;
        }
    }
</style>