changePayPass.vue

<template>
	<view class="main">
		<TopBar title="修改支付密码"/>
		<view>
			<view class="set_title" style="margin-top: 40rpx;">请完成以下认证</view>
			<view class="set_tip">验证后更换支付密码</view>
			<input password class="set_input" v-model="old_password" placeholder="请输入旧支付密码">
			<view class="set_title" style="margin-top: 40rpx;">设置新的支付密码</view>
			<input password class="set_input" v-model="new_password" placeholder="设置6位支付密码">
			<input password class="set_input" v-model="new_password_repeat" placeholder="再一次输入支付密码">
			<view class="btn" style="margin-top: 80rpx;" @click="checkPass()">确认</view>
		</view>
		<view class="success_page" v-if="changeSuccess">
			<image src="../../../static/common/icon_chenggong@2x.png"></image>
			<text>修改成功！</text>
			<view class="btn" @click="returnHome()">确认</view>
		</view>
	</view>
</template>

<script>
	import TopBar from '@/components/TopBar/TopBar';
	import md5 from 'md5';
	export default {
		data() {
			return {
				old_password: '',
				new_password: '',
				new_password_repeat: '',
				changeSuccess: false
			}
		},
		methods: {
			checkPass() {
				if(this.new_password !== this.new_password_repeat) {
					uni.showToast({
						title: '两次密码输入不一致',
						icon: 'none'
					});
					return
				}
				if(!/^[0-9a-zA-Z_]{6}$/.test(this.new_password)) {
					uni.showToast({
						title: '请设置6位支付密码,可以是字母、数字或下划线',
						icon: 'none',
						duration: 2000
					});
					return
				}
				uni.request({
					url: '/uni/api/member/change_payword',
					method: 'POST',
					data: {
						old_password: md5(this.old_password),
						newpassword: md5(this.new_password),
						confirm_password: md5(this.new_password_repeat)
					},
					dataType: 'json',
					success: (res) => {
						if(res.data.code === 0) {
							this.changeSuccess = true;
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							});
						}
					}
				})
			},
			returnHome() {
				this.$jump('/pages/setaccount/setaccount', 2);
			}
		},
		components: {
			TopBar
		}
	}
</script>

<style lang="less" scoped>
	.main {
		padding: 80rpx 40rpx 0;
		.set_title {
			font-size: 32rpx;
			color: #212121;
			line-height: 44rpx;
			margin-top: 24rpx;
		}
		.set_tip {
			color: #7C7C7C;
			font-size: 26rpx;
			line-height: 36rpx;
			margin-top: 4rpx;
		}
		.set_input {
			width: 670rpx;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #f5f5f5;
			padding-left: 20rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			margin-top: 20rpx;
		}
		.set_input::placeholder {
			color: #aeaeae;
		}
		.btn {
			background-color: #FFCD00;
			border-radius: 16rpx;
			text-align: center;
			width: 670rpx;
			height: 88rpx;
			line-height: 88rpx;
			margin: 162rpx auto 0;
			font-size: 30rpx;
		}
		.success_page {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 10;
			width: 100%;
			height: 100vh;
			background-color: #fff;
			image {
				width: 152rpx;
				height: 152rpx;
				margin-top: 282rpx;
			}
			text {
				font-size: 32rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				line-height: 44rpx;
				margin: 16rpx auto 78rpx;
			}
		}
	}
</style>