HaniBlindBox/honey_box/pages/user/settings.vue

<template>
	<view class="settings-page">
		<uni-nav-bar 
			title="设置" 
			left-icon="left" 
			color="#333" 
			backgroundColor="#FFFFFF" 
			:border="false" 
			:statusBar="true"
			:fixed="true"
			@clickLeft="goBack"
		></uni-nav-bar>

		<view class="nav-placeholder"></view>

		<view class="settings-card">
			<!-- 用户协议 -->
			<view class="settings-item" @click="handleUserAgreement">
				<view class="item-left">
					<image class="item-icon" :src="$img1('my/s7.png')" mode=""></image>
					<text class="item-title">用户协议</text>
				</view>
				<view class="item-right">
					<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
				</view>
			</view>
			<view class="divider-line"></view>

			<!-- 隐私政策 -->
			<view class="settings-item" @click="handlePrivacyPolicy">
				<view class="item-left">
					<image class="item-icon" :src="$img1('my/s7.png')" mode=""></image>
					<text class="item-title">隐私政策</text>
				</view>
				<view class="item-right">
					<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
				</view>
			</view>

			<!-- 退出登录 -->
			<view v-if="isLoggedIn" class="divider-line"></view>
			<view v-if="isLoggedIn" class="settings-item" @click="handleLogout">
				<view class="item-left">
					<image class="item-icon" :src="$img1('my/exit.png')" mode=""></image>
					<text class="item-title">退出登录</text>
				</view>
				<view class="item-right">
					<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
				</view>
			</view>

			<!-- 注销账号 -->
			<view v-if="isLoggedIn" class="divider-line"></view>
			<view v-if="isLoggedIn" class="settings-item" @click="handleCancelAccount">
				<view class="item-left">
					<image class="item-icon" :src="$img1('my/s10.png')" mode=""></image>
					<text class="item-title">注销账号</text>
				</view>
				<view class="item-right">
					<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isLoggedIn: false
		}
	},
	onLoad() {
		this.checkLoginStatus();
	},
	onShow() {
		this.checkLoginStatus();
	},
	methods: {
		/**
		 * 返回上一页
		 */
		goBack() {
			uni.navigateBack({
				delta: 1
			});
		},

		/**
		 * 检查登录状态
		 */
		checkLoginStatus() {
			const token = uni.getStorageSync('token');
			this.isLoggedIn = token != null && token != "";
		},

		/**
		 * 用户协议
		 */
		handleUserAgreement() {
			this.$platform.getUserAgreement();
		},

		/**
		 * 隐私政策
		 */
		handlePrivacyPolicy() {
			this.$platform.getPrivacyAgreement();
		},

		/**
		 * 退出登录
		 */
		handleLogout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						this.$platform.handleLogout();
					}
				}
			});
		},

		/**
		 * 注销账号
		 */
		handleCancelAccount() {
			this.$c.to({ url: '/pages/user/cancel-account-page' });
		}
	}
}
</script>

<style lang="scss" scoped>
.settings-page {
	min-height: 100vh;
	background-color: #F5F5F5;

	&::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
		background-image: url('/static/main_bg.jpg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
}

.nav-placeholder {
	height: 88rpx;
}

.settings-card {
	margin: 30rpx;
	background-color: #FFFFFF;
	border-radius: 16rpx;
	overflow: hidden;
}

.settings-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28rpx 32rpx;
	background-color: #FFFFFF;

	.item-left {
		display: flex;
		align-items: center;
		flex: 1;

		.item-icon {
			width: 48rpx;
			height: 48rpx;
			margin-right: 24rpx;
		}

		.item-title {
			font-size: 28rpx;
			color: #333333;
		}
	}

	.item-right {
		flex-shrink: 0;
	}
}

.divider-line {
	height: 1rpx;
	background-color: #E0E0E0;
	margin: 0 32rpx;
}
</style>