jiuyiUniapp/jiuyi2/pages/mine/setting/secondPwd.vue

<script setup>
	// 设置二级密码
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance,
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	import {
		onReady,
	} from '@dcloudio/uni-app'
	// api
	import api from '@/api/index.js'
	// util
	import util from '@/common/js/util.js'
	// 加密
	import CryptoJS from 'crypto-js';
	// 
	import codeInput from '@/components/mine/codeInput.vue'
	// 软键盘
	import keyboard from '@/components/public/keyboard/keyboard.vue'

	const {
		proxy
	} = getCurrentInstance()
	// 
	const store = useStore()
	// 模式  set设置密码 rePwd确认密码 check验证密码
	const mode = ref('set')
	// 表单
	const form = reactive({
		pwd: '',
		rePwd: '',
	})
	// 当前输入表单键
	const formKey = ref('pwd')
	// 用户信息
	const userinfo = computed(() => {
		let result = store.state.userinfo
		if (result.hasSecondCipher) mode.value = 'check'
		return result
	})

	// 下一步
	function handleNext() {
		const data = {
			...form
		}
		// 验证必填项
		if (!form.pwd) {
			util.alert('二级密码不能为空')
		}
		mode.value = 'rePwd'
		formKey.value = 'rePwd'
	}

	// 确认输入密码
	function handleSubmit() {
		const data = {
			...form
		}
		console.log('data', data)
		// return

		// 验证必填项
		if (!data.pwd) {
			util.alert('二级密码不能为空')
			return
		}
		if (data.pwd !== data.rePwd) {
			util.alert({
				content: '两次输入密码不一致',
				showCancel: false
			})

			// 密码
			form.pwd = ''
			form.rePwd = ''
			mode.value = 'set'
			return
		}
		// 
		data.pwd = CryptoJS.MD5(data.pwd).toString()

		// 设置二级密码
		api.mine.setSecondLevelCipher({
			data: {
				id: userinfo.value.id,
				secondLevelCipher: data.pwd,
			}
		}).then(rs => {
			if (rs.code == 200) {
				util.alert('设置成功')
				util.getUserinfo()
				uni.navigateBack()
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 验证登录密码
	function handleCheck() {
		const data = {
			...form
		}

		// 验证必填项
		if (!data.pwd) {
			util.alert('二级密码不能为空')
		}
		// 
		data.pwd = CryptoJS.MD5(data.pwd).toString()

		// 设置二级密码
		api.mine.checkSecondLevelCipher({
			data: {
				id: userinfo.value.id,
				secondLevelCipher: data.pwd,
			}
		}).then(rs => {
			if (rs.code == 200) {
				form.pwd = ''
				mode.value = 'set'
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 支付键盘回调
	 * @param {Object} val
	 */
	function KeyInfo(val) {
		// 判断是否输入的是删除键
		if (val.keyCode === 8) {
			// 删除最后一位
			form[formKey.value] = form[formKey.value].slice(0, -1)
			return
		}
		// 如果大于六位
		if (form[formKey.value].length >= 6) return
		// 判断是否输入的是.
		else if (val.keyCode == 190) {
			// 输入.无效
		} else {
			form[formKey.value] += val.key
			// passwordArr.push(val.key);
		}
	}
</script>

<template>
	<view class="appbw">
		<view class="container ver mt10p" v-if="mode === 'set'">
			<view class="title c333 f54">设置二级密码</view>
			<view class="content mt50 c666 f32">请设置六位数字的二级密码</view>

			<view class="pwd">
				<codeInput v-model:modelValue="form.pwd" />
			</view>

			<view class="btn lg black mtb50 plr50" @click="handleNext">下一步</view>
		</view>

		<view class="container ver mt10p" v-if="mode === 'rePwd'">
			<view class="title c333 f54">确认二级密码</view>
			<view class="content mt50 c666 f32">请再次输入刚才设置的二级密码</view>

			<view class="pwd">
				<codeInput v-model:modelValue="form.rePwd" />
			</view>

			<view class="btn lg black mtb50 plr50" @click="handleSubmit">确认</view>
		</view>

		<view class="container ver mt10p" v-if="mode === 'check'">
			<view class="title c333 f54">验证二级密码</view>
			<view class="content mt50 c666 f32">请输入二级密码用于验证</view>
			<view class="inputBox mt50 ptb10 plr30">
				<input type="number" :maxlength="6" v-model="form.pwd" :focus="true" placeholder="六位数字密码" />
			</view>

			<view class="btn lg black mtb50 plr50" @click="handleCheck">验证</view>
		</view>
	</view>

	<!-- 安全键盘 -->
	<!-- <cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo" /> -->
	<view class="keyboard">
		<keyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo" />
	</view>
</template>

<style lang="scss">
	// 软键盘
	.keyboard {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #f8f8f8;
	}
</style>