a77/pages/my/set/updatepaypass.vue

<template>
	<view class="register container">
		<nav-header>修改支付密码</nav-header>

		<!-- <view class="title">
			<view class="login_view">
				<view class="">
					修改支付密码
				</view>
				<view class="">
				</view>
			</view>
			<view class="text">
				<image src="@/static/login/logo.png" mode="widthFix"></image>
			</view>
		</view> -->

		<view class="login_content">

			<!-- <view class="input_item">
			
				<view class="">
					<input type="number" v-model="oldPwd" placeholder="输入旧密码" maxlength="6">
				</view>
			</view> -->
			<view class="input_item">
				<!-- <view class="">
					输入新密码
				</view> -->
				<view class="">
					<input type="number" v-model="newPwd" placeholder="输入新密码" maxlength="6">
				</view>
			</view>
			<view class="input_item">
				<!-- <view class="">
					再次输入密码
				</view> -->
				<view class="">
					<input type="number" v-model="truePwd" placeholder="再次输入密码" maxlength="6">
				</view>
			</view>


			<view class="input_item">
				<view class="" style="display: flex;align-items: center;justify-content: space-between;">
					<view class="">
						<input type="text" v-model="codeImgVal" placeholder="图形验证" style="width: 400rpx;">
					</view>

					<image class="code_img sendcode" @click="getVerify" :src="codeImgData.image"
						style="width: 160rpx;height: 70rpx;margin-right: 10rpx;"></image>
				</view>
			</view>

			<view class="input_item flex">
				<!-- <view class="" style="width: 300rpx;">
					输入验证码
				</view> -->
				<view class="">
					<input type="number" style="width: 350rpx;" v-model="verify" placeholder="输入验证码">
				</view>
				<view class="sendcode" @click="sendCode" v-if="time<=0" style="width: 300rpx;text-align: right;">
					发送验证码
				</view>
				<view class="sendcode_count" v-else style="width: 300rpx;text-align: right;">
					{{time}}秒后重新发送
				</view>
			</view>



		</view>



		<view class="login_btn"  @click="confirm">
			确认修改
		</view>
		
	</view>
</template>


<script>
	import myInput from "@/components/my/input_sz.vue"
	import navHeader from "@/components/my/nav_header.vue"
	export default {
		data() {
			return {
				verify: "", //验证码
				oldPwd: "", //新密码
				newPwd: "", //旧密码
				truePwd: "", //确认密码
				typecode: true, //验证码发送后的状态
				count: 0, //倒计时
				time: 0, //定时器全局控制器
				userinfo: {},
				codeImgData: {},
				codeImgVal: '',
				bgc: false
			}
		},
		components: {
			myInput,
			navHeader
		},
		onHide() {
			clearInterval(this.time)
		},
		onLoad() {
			this.get_user_info()
			this.getVerify()
		},
		methods: {
			getVerify() {
				this.api.graphVer().then(res => {
					this.codeImgData = res.data
				})
			},
			get_user_info() {
				uni.showLoading()
				this.user_info = uni.getStorageSync("user_info")
				uni.hideLoading()
				console.log(this.user_info)
			},
			// sendCode(phone) {
			// 	if (this.user_info.phone) {
			// 		this.api.smsCode(this.user_info.phone).then(res => {
			// 			if (res.code == 1) {
			// 				this.count = res.data.time
			// 				//短信发送成功 开始倒计时
			// 				this.start()
			// 				this.$api.pop("发送成功")
			// 			}
			// 		})
			// 	}
			// },

			sendCode() {
				if (!this.codeImgVal) {
					this.$api.pop('请先输入图形验证')
					return
				}
				this.bgc = true

				// 真实验证
				this.api.smsCode(this.user_info.phone, this.codeImgVal, this.codeImgData.uniqid).then(res => {
					if (res.code == 1 && res.data.time >= 50) {
						this.$api.pop(res.info)
						this.time = 60
						setInterval(() => {
							if (this.time <= 0) {
								this.time = 0
								return
							}
							--this.time
						}, 1000)
					} else {
						this.$api.pop(res.info)
					}
				})
			},


			//提交修改
			confirm() {
				this.api.update_paypass(this.verify, this.oldPwd, this.newPwd, this.truePwd).then(res => {
					if (res.code == 1) {
						this.$api.pop("修改成功")
						setTimeout(() => {
							this.$api.totabar("/pages/my/my")
						}, 1000);
					}
				})
			}
		}
	}
</script>


<style scoped>
	.register {
		box-sizing: border-box;
		padding-top: 100rpx;

	}

	.title {
		width: 600rpx;
		font-size: 46rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 180rpx auto 0 auto;
	}

	/deep/ .uni-input-wrapper {
		color: #fff;
	}

	.login_view {
		font-size: 68rpx;
	}

	.login_content {
		width: 686rpx;
		margin: 70rpx auto 0;
	}

	.text {
		width: 120rpx;
	}

	.input_item {
		background-color: #1D1F1E;
		width: 686rpx;
		height: 100rpx;
		font-size: 32rpx;
		margin-top: 60rpx;
		line-height: 100rpx;
		color: #fff;
		border-bottom: 1px solid rgba(0, 0, 0, .1);
		border-radius: 24rpx;
	}

	.flex {
		display: flex;
	}


	input {
		/* margin-left: 20rpx; */
		height: 100rpx;
		line-height: 100rpx;
		text-indent: 30rpx;
	}

	.label {
		width: 250rpx;
	}

	.sendcode {
		font-size: 24rpx;
		color: #fff;
	}


	.sendcode_count {
		font-size: 24rpx;
		text-align: right;
		width: 200rpx;
		color: #fff;
	}

	.login_btn {
		width: 686rpx;
		height: 100rpx;
		font-size: 32rpx;
		line-height: 100rpx;
		margin: 0 auto;
		margin-top: 88rpx;
		text-align: center;
		border-radius: 16rpx;
		background: linear-gradient(180deg, #69FF60 0%, #0C9D5B 100%);
		color: #000;
	}

	.gologin {
		font-size: 28rpx;
		margin: 22rpx auto;
		text-align: center;
	}

	.blue {
		color: #21E4F0;
	}

	.agreement {
		/* width: 550rpx; */
		/* margin: 50rpx 30rpx; */
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		text-indent: 14rpx;
		margin-top: 32rpx;
		margin-bottom: 50rpx;
	}

	.circle {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		border: 1px solid #999999;
	}

	.circle_checked {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		background: #21E4F0;
		border: 1px solid #21E4F0;
	}

	/deep/.input-placeholder {
		color: #fff;
	}

	.bgc {
		background: linear-gradient(180deg, #69FF60 0%, #0C9D5B 100%);
		color: #000;
	}
</style>