jd_logistics/jd_logistics-app/pages/mine/setting.vue

<template>
	<view class="setting-container">
		<!-- 自定义导航，可复用headerInfo组件，这里简单写一个 -->
<!-- 		<view class="nav-header">
			<view class="back-btn" @click="goBack">
				<image src="/static/img/arrow-left.png" class="back-icon"></image>
			</view>
			<text class="nav-title">设置</text>
			<view class="placeholder"></view>
		</view> -->

		<!-- 设置项卡片 -->
		<view class="menu-section">
			<view class="menu-card">
				<!-- 用户协议 -->
				<view class="menu-item" @click="toUserAgreement">
					<view class="menu-item-left">
						<!-- <image src="/static/img/mine/icon-mine-policy.png" class="menu-icon"></image> -->
						<text class="menu-text">用户协议</text>
					</view>
					<image src="/static/img/arrow-right.png" class="arrow-icon"></image>
				</view>

				<!-- 隐私条款（隐私政策） -->
				<view class="menu-item" @click="toPrivacyPolicy">
					<view class="menu-item-left">
						<!-- <image src="/static/img/mine/icon-mine-policy.png" class="menu-icon"></image> -->
						<text class="menu-text">隐私条款</text>
					</view>
					<image src="/static/img/arrow-right.png" class="arrow-icon"></image>
				</view>

				<!-- 个人信息已收集清单 -->
				<view class="menu-item" @click="toUserInfoList">
					<view class="menu-item-left">
						<!-- <image src="/static/img/mine/icon-mine-policy.png" class="menu-icon"></image> -->
						<text class="menu-text">个人信息已收集清单</text>
					</view>
					<image src="/static/img/arrow-right.png" class="arrow-icon"></image>
				</view>

				<!-- 第三方信息共享清单 -->
				<view class="menu-item" @click="toThirdPartyList">
					<view class="menu-item-left">
						<!-- <image src="/static/img/mine/icon-mine-policy.png" class="menu-icon"></image> -->
						<text class="menu-text">第三方信息共享清单</text>
					</view>
					<image src="/static/img/arrow-right.png" class="arrow-icon"></image>
				</view>

				<!-- 注销账号 -->
<!-- 				<view class="menu-item" @click="cancelAccount">
					<view class="menu-item-left">
						<text class="menu-text">注销账号</text>
					</view>
					<image src="/static/img/arrow-right.png" class="arrow-icon"></image>
				</view> -->

				<!-- 退出登录 -->
<!-- 				<view class="menu-item logout-item" @click="userLogoutFn">
					<text class="menu-text logout-text">退出登录</text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from "vue";
import { useAppStore } from "@/stores/app";

const appStore = useAppStore();

// 返回上一页
function goBack() {
	uni.navigateBack();
}

// 跳转到用户协议
function toUserAgreement() {
	uni.navigateTo({
		url: '/pages/webView/webView?title=用户协议&url=' + encodeURIComponent('https://rjsd.mychery.com/user_agreement.html')
	});
}

// 跳转到隐私政策
function toPrivacyPolicy() {
	uni.navigateTo({
		url: '/pages/webView/webView?title=隐私条款&url=' + encodeURIComponent('https://rjsd.mychery.com/privacy_policy.html')
	});
}

// 跳转到个人信息收集清单
function toUserInfoList() {
	uni.navigateTo({
		url: '/pages/webView/webView?title=个人信息已收集清单&url=' + encodeURIComponent('https://rjsd.mychery.com/userinfo.html')
	});
}

// 跳转到第三方信息共享清单
function toThirdPartyList() {
	uni.navigateTo({
		url: '/pages/webView/webView?title=第三方信息共享清单&url=' + encodeURIComponent('https://rjsd.mychery.com/third_userinfo.html')
	});
}

// 注销账号（需单独处理，此处先弹窗提示）
function cancelAccount() {
	uni.showModal({
		title: '提示',
		content: '确认要注销账号吗？注销后所有数据将被清除且无法恢复。',
		success: (res) => {
			if (res.confirm) {
				// 这里可以调用注销接口
				uni.showToast({ title: '注销功能暂未开放', icon: 'none' });
			}
		}
	});
}

// 退出登录
function userLogoutFn() {
	uni.showModal({
		title: '提示',
		content: '确认要退出登录吗？',
		success: function(res) {
			if (res.confirm) {
				appStore.LOGOUT();
				uni.navigateBack(); // 退出后返回上一页
			}
		}
	});
}
</script>

<style lang="less" scoped>
.setting-container {
	height: 100vh;
	background: #F5F7FA;
	padding: 0 20rpx;

	.nav-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 28rpx 16rpx 20rpx;
		background: transparent;

		.back-btn {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.back-icon {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.nav-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #333333;
		}

		.placeholder {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.menu-section {
		padding-top: 20rpx;

		.menu-card {
			overflow: hidden;
		}

		.menu-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-bottom: 20rpx;
			min-height: 112rpx;

			.menu-item-left {
				display: flex;
				align-items: center;
				gap: 24rpx;
				flex: 1;
			}

			.menu-icon {
				width: 48rpx;
				height: 48rpx;
				flex-shrink: 0;
			}

			.menu-text {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				line-height: 45rpx;
			}

			.arrow-icon {
				width: 48rpx;
				height: 48rpx;
				opacity: 0.5;
				flex-shrink: 0;
			}

			&.logout-item {
				height: 88rpx;
				background: #FEEAEA;
				border-radius: 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.logout-text {
					font-weight: 400;
					font-size: 32rpx;
					color: #F52929;
					text-align: center;
				}
			}
		}
	}
}
</style>