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

<script setup>
	// 工具库
	import util from '@/common/js/util.js'
	// 
	import api from '@/api/index.js'
	import {
		useStore
	} from 'vuex'
	import {
		ref,
		computed,
		getCurrentInstance,
	} from 'vue';
	// 密码
	import payPwd from '@/components/mine/payPwd.vue'
	// 
	const {
		proxy
	} = getCurrentInstance();
	// vuex
	const store = useStore()
	// 用户信息
	const userinfo = computed(() => store.state.userinfo)

	// 开启青少年模式
	function handleUpdate() {
		api.mine.adolescentOpen({}).then(rs => {
			if (rs.code == 200) {
				// 更新用户信息
				util.getUserinfo()
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 关闭青少年模式
	function handleClose(userPassword) {
		// 解除青少年模式
		api.mine.adolescentClose({
			path: [userPassword],
		}).then(rs => {
			if (rs.code == 200) {
				util.alert('青少年模式已关闭')
				store.commit('setState', {
					key: 'userinfo',
					value: {
						...userinfo.value,
						teenTime: null,
					}
				})
				// 更新用户信息
				util.getUserinfo()
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}
</script>

<template>
	<view class="app">
		<view class="container pr">
			<image class="background" src="/static/teen.png" mode="widthFix" />
			<!-- <view class="">青少年模式说明</view> -->

			<view class="notice pa c333 f28">
				<view class="mtb30">开启青少年模式后，将自动为您开启时间锁，单日使用时间不超过40分钟，晚上10点至早上6点无法使用九亿</view>
				<view class="mtb30">青少年模式开启后，如果到了使用时间需要输入密码解锁关闭青少年模式</view>
			</view>
		</view>

		<view class="btn pro black mtb30 mlr60" v-if="userinfo.teenTime" @click="$refs.payPwdRef.open()">关闭青少年模式</view>
		<view class="btn pro black mtb30 mlr60" v-else @click="handleUpdate">开启青少年模式</view>

		<view class="fill" style="height: 30rpx;"></view>

		<!-- 支付弹窗 -->
		<payPwd ref="payPwdRef" @confirm="handleClose" />
	</view>
</template>

<style lang="scss">
	.app {
		background-color: #eaceb9;
	}

	// 
	.background {
		width: 100%;
	}

	// 提示
	.notice {
		margin: 0 120rpx;
		bottom: 120rpx;
	}
</style>