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

<script setup>
	// 设置二级密码
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance,
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	// api
	import api from '@/api/index.js'
	// util
	import util from '@/common/js/util.js'
	// 加密
	import CryptoJS from 'crypto-js';
	const {
		proxy
	} = getCurrentInstance()
	// 
	const store = useStore()
	// 模式  set设置密码 check验证密码
	const mode = ref('set')
	// 表单
	const form = reactive({
		pwd: '',
		rePwd: '',
	})
	// 
	const passwordArr = reactive([])
	const AffirmStatus = ref(1)
	// 用户信息
	const userinfo = computed(() => {
		let result = store.state.userinfo
		if (result.hasSecondCipher) mode.value = 'check'
		return result
	})

	// 确认输入密码
	function handleSubmit() {
		const data = {
			...form
		}

		// 验证必填项
		if (!data.pwd) {
			util.alert('二级密码不能为空')
		}
		if (data.pwd !== data.rePwd) {
			util.alert('两次输入密码不一致')
		}
		// 
		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,
				showCanecl: 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,
				showCanecl: false,
			})
		})
	}

	/**
	 * 唤起键盘
	 */
	function onPayUp() {
		proxy.$refs.CodeKeyboard.show();
	}

	/**
	 * 支付键盘回调
	 * @param {Object} val
	 */
	function KeyInfo(val) {
		console.log('val', val)
		if (val.index >= 6) {
			return
		}

		// 判断是否输入的是删除键
		if (val.keyCode === 8) {
			// 删除最后一位
			passwordArr.splice(val.index + 1, 1)
		}
		// 判断是否输入的是.
		else if (val.keyCode == 190) {
			// 输入.无效
		} else {
			passwordArr.push(val.key);
		}

		// 判断是否等于6
		if (passwordArr.length === 6) {
			passwordArr = [];
			AffirmStatus.value = AffirmStatus.value + 1;
		}
	}
</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="inputBox mt50 ptb10 plr30">
				<input type="number" :maxlength="6" v-model="form.pwd" :focus="true" placeholder="六位数字密码" />
			</view>
			<view class="inputBox mt50 ptb10 plr30">
				<input type="number" :maxlength="6" v-model="form.rePwd" placeholder="再次输入密码" />
			</view>

			<!-- <view class="pwd rows mt50 ptb10 plr30" @click="onPayUp">
				<view class="item fmid" v-for="(item,index) in 6" :key="index">
					<text v-if="passwordArr[index] != null">●</text>
				</view>
			</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" />
</template>

<style lang="scss">
	.pwd {

		.item {
			margin: 0 10rpx;
			width: 70rpx;
			height: 80rpx;
			background-color: #f4f4f4;
			border-radius: 10rpx;
		}
	}
</style>