MoeNovaClient/pages/my/adolescent.vue

<template>
	<view>
		<PageHeader title="" class="PageHeader">
			<template v-slot:center>
				青少年模式
			</template>
		</PageHeader>
		<view class="content-box">
			<view class="umbrella-box">
				<image class="umbrella" src="../../static/me/qingshaonianmoshi.png"></image>
			</view>
			<view class="textBox">
				<view class="teenageMode">
					<view class="title">
						青少年模式
						<view class="switchMode "
							v-if="youngModeInfo.is_open_young == 0 || youngModeInfo.is_open_young == -1">
							未开启</view>
						<view class="switchMode active" v-else>已开启</view>
					</view>
					<view class="prompt">
						此模式下部分功能无法使用，且会带来以下限制
					</view>
				</view>
				<view class="textList">
					<view class="textItem"><span>·</span>青少年模式下，将不支持充值、订阅会员功能</view>
					<view class="textItem"><span>·</span>每日22时至次日8时，期间无法使用本应</view>
					<view class="textItem"><span>·</span>未成年人每日可使用40分</view>
				</view>
			</view>
			<view class="bottm-box">
				<view class="button" @click="goSetpossWord(1)"  v-if="youngModeInfo.has_password == false">设置密码</view>
				<view class="button" @click="goSetpossWord(4)"  v-else-if="youngModeInfo.is_open_young == 0 || youngModeInfo.is_open_young == -1">开启青少年模式</view>
				<view class="button" @click="goSetpossWord(4)"  v-else-if="youngModeInfo.is_open_young == 1">关闭青少年模式</view>
				<view class="setPassword" @click="goSetpossWord(2)" v-if="youngModeInfo.has_password">修改密码</view>
			</view>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			youngModeInfo: {
				has_password: false, //是否有密码
				is_open_young: -1,  //是否开启青少年模式   
				str: ""
			}
		}
	},
	onLoad() {
	},
	onShow(){
		this.getYoungModeInfo();
		
	},
	methods: {
		getYoungModeInfo() {
			uni.request({
				url: this.$apiHost + '/Young/getYoungModeInfo',
				data: {
					uuid: getApp().globalData.uuid,
					skey: getApp().globalData.skey,
				},
				header: {
					"content-type": "application/json",
					'sign': getApp().globalData.headerSign
				},
				success: (res) => {
					console.log("数据", res.data);
					this.youngModeInfo = res.data;

				},
				complete: () => { },
				fail: (e) => { }
			});
		},
		goSetpossWord(state) {
			uni.navigateTo({
				url: "/pages/my/teenagePassword?state=" + state+"&is_open_young="+this.youngModeInfo.is_open_young,
			})
		}
	}
}
</script>

<style lang="scss">
page {
	background: url("../../static/me/wd_bg_bianjiziliao.png") top center/ 100% auto no-repeat,
		#f2f6f2;
	font-family: 'PingFang SC-Medium';
}

.PageHeader {
	background: url("../../static/me/wd_bg_bianjiziliao.png") center top / 100% auto no-repeat,
		#f2f6f2;
	background-position-y: -var(--status-bar-height);
}

.content-box {
	padding-top: calc(210rpx + var(--status-bar-height));

	.umbrella-box {
		padding-bottom: 96rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.umbrella {
			width: 364rpx;
			height: 364rpx;
		}
	}

	.textBox {
		padding: 0 40rpx;

		.teenageMode {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.title {
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 400;
				font-size: 36rpx;
				font-family: 'PingFang SC-Bold';
				color: #1F1F1F;
				position: relative;
				left: 0;
				top: 0;

				.switchMode {
					position: absolute;
					right: -95rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 80rpx;
					height: 36rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #999999;
					background: url(../../static/me/text-bg.png) center top / 100% auto no-repeat;
					display: flex;
					align-items: center;
					justify-content: center;

					&.active {
						background: url(../../static/me/text-bg-active.png) center top / 100% auto no-repeat;
						color: #8BB849;
					}
				}
			}

			.prompt {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				padding-top: 18rpx;
				padding-bottom: 54rpx;
			}
		}

		.textList {
			line-height: 2.5;
			font-weight: 400;
			font-size: 28rpx;
			color: #1F1F1F;

			.textItem {
				display: flex;
				align-items: center;

				span {
					display: inline-block;
					padding-right: 15rpx;
					font-size: 56rpx;
					line-height: 0;
					font-weight: 700;
				}
			}
		}



	}

	.bottm-box {
		padding: 0 62rpx;
		margin-top: 150rpx;
		padding-bottom: 100rpx;

		.button {

			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			background: #1F1F1F;
			border-radius: 58rpx;
			padding: 22rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.setPassword {
			text-align: center;
			color: #0084FF;
			font-weight: 400;
			font-size: 28rpx;
			color: #0084FF;
			padding-top: 24rpx;
		}
	}
}
</style>