MoeNovaClient/pages/my/teenagePassword.vue

<template>
	<view>
		<PageHeader class="page-heard" :title="'青少年模式'" />
		<view class="reserveASeat"></view>
		<view class="title-box">
			<view class="title" v-if="state == 1">设置家长密码</view>
			<view class="title" v-if="state == 2">修改密码</view>
			<view class="title" v-if="state == 3">设置新密码</view>
			<view class="title" v-if="state == 4">验证密码</view>
			<view class="subtitle" v-if="state == 1">此密码为关闭青少年模式的密码</view>
			<view class="subtitle" v-if="state == 2">请输入当前密码</view>
			<view class="subtitle" v-if="state == 3">请输入当前密码</view>
			<view class="subtitle" v-if="state == 4">请输入密码{{ action == 'open' ? '打开' : '关闭' }}青少年模式</view>
		</view>
		<view class="code-box">
			<yi-code ref="code" class="yiCode" :width="590" @onComplete="complete" :focus="false"
				:maxlength="4"></yi-code>
		</view>
		<view class="subtitle" v-if="state == 2 || state == 4"> 忘记了？<span @click="openCustomPopup">联系客服反馈</span> </view>
		<view class="subtitle" v-if="state == 3"> 此密码为长期密码，请牢记自己的密码 </view>

		<view class="btn-box">
			<view class="btn" @click="selection(false)" v-if="state != 4">{{ state != 2 ? '确认' : '下一步' }}</view>
			<view class="btn" @click="selection(false)" v-if="state == 4">{{ action == 'open' ? '打开' : '关闭' }}青少年模式
			</view>

		</view>
		<CustomerServicePopup ref="customerServicePopup"></CustomerServicePopup>
	</view>
</template>

<script>
import PageHeader from '@/components/PageHeader/PageHeader.vue'
import { getStorage, setStorage, removeStorage } from "@/common/util.js";
import { mapState,mapMutations } from 'vuex';
export default {
	components: { PageHeader },
	data() {
		return {
			state: 1,
			code: '',
			password: '',
			originalPassword: '',
			newPassword: '',
			action: 'open',
		}
	},
	onLoad(e) {
		// e.state   1 首次进来设置密码   2修改密码（验证原密码） 3 修改密码（验证新密码） 4 验证原密码后 切换青少年状态
		if (e.state) {
			this.state = e.state
		}
		if (e.is_open_young == 1) {
			this.action = 'close'
		} else if (e.is_open_young == 0 || e.is_open_young == -1) {
			this.action = 'open'
		}
	},
	onShow() {

	},
	onHide() {

	},
	methods: {
		...mapMutations('rightsManagement',['setTeenageMode']),
		openCustomPopup() {
			this.$refs.customerServicePopup.$refs.customPopup.open()
		},
		complete(code) {
			this.code = code
			this.selection(true)
		},
		async selection(auto) {
			auto = auto || false
			if (!this.code || this.code.length != 4) {
				uni.showToast({
					title: '请输入四位密码',
					icon: 'none'
				});
				return
			}
			var res

			// 设置密码 
			if (this.state == 1) {
				this.password = this.code
				if (!auto) {
					res = await this.setParentPassword()
				}
			}

			// 验证原密码
			if (this.state == 2) {
				res = await this.verifyParentPassword()
				if (res.str == '密码验证成功') {
					this.originalPassword = this.code
					this.$refs.code.clear()
					res.str = '请输入新密码'
					this.state = 3
				} else {
					res.str = '密码不正确请重新输入'
					this.$refs.code.clear() // 清空输入框
				}
			}

			// 设置新的密码
			if (this.state == 3) {
				if (!auto) {
					res = await this.setParentPassword()
				}
			}

			// 验证原密码后切换状态
			if (this.state == 4) {
				var res1 = await this.verifyParentPassword()
				if (res1.str == '密码验证成功') {
					res = await this.toggleYoungMode()
					this.goBack()
				} else {
					res1.str = '密码不正确请重新输入'
					uni.showToast({
						title: res1.str,
						icon: 'none'
					});
					this.$refs.code.clear() // 清空输入框
				}
			}


			if (res && res.str) {
				if (res && res.str == '操作成功') {
					uni.hideToast();
					if (this.action == 'open') {
						res.str = '青少年模式已开启'
					} else {
						res.str = '青少年模式已关闭'
					}
				}

				uni.showToast({
					title: res.str,
					icon: 'none'
				});
			}

			if (res && res.str == '密码设置成功') {
				this.goBack()
			}
		},
		// 设置家长密码
		setParentPassword() {
			console.log('执行方法');

			return new Promise((resolve, reject) => {
				var rql = {}
				// 第一次设置时 
				rql.password = this.code
				// 修改密码时
				if (this.state == 3) {
					rql.old_password = this.originalPassword
				}
				console.log(rql, 111);

				uni.request({
					url: this.$apiHost + '/Young/setParentPassword',
					data: {
						uuid: getApp().globalData.uuid,
						...rql
					},
					header: {
						"content-type": "application/json",
						'sign': getApp().globalData.headerSign
					},
					success: (res) => {
						console.log("设置结果:", res.data); 
						resolve(res.data);

					},
					fail: (e) => {
						console.log("设置失败:", e);
						reject(e);
					}
				});
			});
		},
		// 验证家长密码
		verifyParentPassword() {
			return new Promise((resolve, reject) => {
				uni.request({
					url: this.$apiHost + '/Young/verifyParentPassword',
					data: {
						uuid: getApp().globalData.uuid,
						password: this.code
					},
					header: {
						"content-type": "application/json",
						'sign': getApp().globalData.headerSign
					},
					success: (res) => {
						console.log("验证结果:", res.data);
						resolve(res.data);

					},
					fail: (e) => {
						console.log("验证失败:", e);
						reject(e);
					}
				});
			});
		},
		// 切换青少年模式状态
		toggleYoungMode() {
			return new Promise((resolve, reject) => {
				uni.request({
					url: this.$apiHost + '/Young/toggleYoungMode',
					data: {
						uuid: getApp().globalData.uuid,
						password: this.code,
						action: this.action
					},
					header: {
						"content-type": "application/json",
						'sign': getApp().globalData.headerSign
					},
					success: (res) => {
						console.log("切换结果:", res.data);
						resolve(res.data);
						if (res.data.is_open_young == 1) { 
							this.setTeenageMode(1);
						} else if (res.data.is_open_young == 0) { 
							this.setTeenageMode(2);
						}
					}, 
					fail: (e) => {
						console.log("切换失败:", e);
						reject(e);
					}
				});
			});
		},
		goBack() {
			setTimeout(() => {
				uni.navigateBack();
			}, 800)
		},



	}
}
</script>

<style lang="scss">
page {
	background-color: #f2f6f2;
	font-family: 'PingFang SC-Medium';
	min-height: 100vh;
	padding-bottom: calc(var(--window-bottom));
	box-sizing: border-box;
	position: relative;
	left: 0;
	top: 0;
}

.page-heard {
	background-color: #f2f6f2;
}

.reserveASeat {
	width: 100%;
	height: calc(90rpx + var(--status-bar-height))
}

.title-box {
	padding-top: 90rpx;
	padding-bottom: 72rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	.title {
		font-weight: 600;
		font-size: 20px;
		color: #1F1F1F;
	}

	.subtitle {
		padding: 0;
		padding-top: 20rpx;
	}
}

.subtitle {
	font-size: 24rpx;
	color: #999999;
	text-align: center;
	padding-top: 44rpx;

	span {
		color: #0084FF;
	}
}

.code-box {
	padding: 0 80rpx;

	.yiCode {
		width: 100%;
	}
}

.yiCode {
	&::v-deep.yi-code {
		.yi-code-show {
			.yi-code-show-item {
				width: 124rpx;
				height: 124rpx;
				border: 4rpx #000 solid;
				border-radius: 20rpx;
				font-size: 56rpx;
				color: #1F1F1F;

				&.yi-code-show-active {
					border: solid 2px #ff5500;
					animation: myfirst 600ms infinite;

					@keyframes myfirst {
						0% {
							opacity: 0.1
						}

						100% {
							opacity: 1
						}
					}
				}
			}
		}


		.yi-code-hide {
			height: 124rpx;
		}
	}
}

.btn-box {
	position: absolute;
	bottom: 20rpx;
	left: 50%;
	transform: translateX(-50%);

	.btn {
		background: #1F1F1F;
		color: #fff;
		margin: 0 auto;
		width: 626rpx;
		height: 88rpx;
		font-size: 32rpx;
		font-family: 'PingFang SC-Bold';
		background: #1F1F1F;
		border-radius: 58rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
<style>
.navbar-title
{
	font-weight: 500;
	font-size: 32px;
	font-family: 'PingFang SC-Medium' !important;
}
</style>